refactor: remove default prop usage across components (#1555)

* refactor: remove default prop usage * chore: lock update * fix: move DefaultHeaderText * chore: address a few default initializations * chore: lockfile --------- Co-authored-by: Alison Joseph <[email protected]> Co-authored-by: Alison Joseph <[email protected]>
carbon-design-system · Dec 19, 2024 · 5d7ce66 · 5d7ce66
1 parent c36a79d
commit 5d7ce66
Show file tree

Hide file tree

Showing 15 changed files with 247 additions and 226 deletions.
diff --git a/packages/gatsby-theme-carbon/src/components/ArticleCard/ArticleCard.js b/packages/gatsby-theme-carbon/src/components/ArticleCard/ArticleCard.js
@@ -10,6 +10,12 @@ import {
   Email,
 } from '@carbon/react/icons';
 
+const defaults = {
+  color: 'light',
+  disabled: false,
+  actionIcon: '',
+};
+
 export default class ArticleCard extends React.Component {
   render() {
     const {
@@ -20,9 +26,9 @@ export default class ArticleCard extends React.Component {
       author,
       date,
       readTime,
-      color,
-      disabled,
-      actionIcon,
+      color = defaults.color,
+      disabled = defaults.disabled,
+      actionIcon = defaults.actionIcon,
       className,
       ...rest
     } = this.props;
@@ -168,9 +174,3 @@ ArticleCard.propTypes = {
    */
   className: PropTypes.string,
 };
-
-ArticleCard.defaultProps = {
-  color: 'light',
-  disabled: false,
-  actionIcon: '',
-};
diff --git a/packages/gatsby-theme-carbon/src/components/AutolinkHeader/AutolinkHeader.js b/packages/gatsby-theme-carbon/src/components/AutolinkHeader/AutolinkHeader.js
@@ -28,7 +28,15 @@ const Anchor = ({ id, string, position }) => {
   );
 };
 
-const AutolinkHeader = ({ is: Component, className, ...props }) => {
+const defaults = {
+  is: 'h2',
+};
+
+const AutolinkHeader = ({
+  is: Component = defaults.is,
+  className,
+  ...props
+}) => {
   const isMobile = useMedia({ maxWidth: breakpoints.md.width });
 
   const string = React.Children.map(
@@ -48,6 +56,4 @@ const AutolinkHeader = ({ is: Component, className, ...props }) => {
   );
 };
 
-AutolinkHeader.defaultProps = { is: 'h2' };
-
 export default AutolinkHeader;
diff --git a/packages/gatsby-theme-carbon/src/components/DoDontRow/DoDont.js b/packages/gatsby-theme-carbon/src/components/DoDontRow/DoDont.js
@@ -5,6 +5,9 @@ import { CheckmarkFilled, Misuse } from '@carbon/react/icons';
 import { Column } from '../Grid';
 import * as styles from './DoDontRow.module.scss';
 
+const defaults = {
+  type: 'do',
+};
 export default class DoDont extends React.Component {
   static renderCaption = (caption, captionTitle) => {
     if (caption || captionTitle) {
@@ -25,7 +28,7 @@ export default class DoDont extends React.Component {
       text,
       aspectRatio,
       color,
-      type,
+      type = defaults.type,
       className,
       ...columnProps
     } = this.props;
@@ -79,10 +82,6 @@ export default class DoDont extends React.Component {
   }
 }
 
-DoDont.defaultProps = {
-  type: 'do',
-};
-
 DoDont.propTypes = {
   children: PropTypes.node,
   /** title for the caption (optional) */

diff --git a/packages/gatsby-theme-carbon/src/components/FeatureCard/FeatureCard.js b/packages/gatsby-theme-carbon/src/components/FeatureCard/FeatureCard.js
@@ -6,6 +6,10 @@ import { AspectRatio } from '@carbon/react';
 import { Row, Column } from '../Grid';
 import ResourceCard from '../ResourceCard';
 
+const defaults = {
+  disabled: false,
+  actionIcon: 'launch',
+};
 export default class FeatureCard extends React.Component {
   render() {
     const {
@@ -14,8 +18,8 @@ export default class FeatureCard extends React.Component {
       subTitle,
       title,
       color,
-      disabled,
-      actionIcon,
+      disabled = defaults.disabled,
+      actionIcon = defaults.actionIcon,
       className,
       ...resourceCardProps
     } = this.props;
@@ -123,8 +127,3 @@ FeatureCard.propTypes = {
    */
   resourceCardProps: PropTypes.object,
 };
-
-FeatureCard.defaultProps = {
-  disabled: false,
-  actionIcon: 'launch',
-};
diff --git a/packages/gatsby-theme-carbon/src/components/Footer/Footer.js b/packages/gatsby-theme-carbon/src/components/Footer/Footer.js
@@ -11,7 +11,60 @@ import {
   content,
 } from './Footer.module.scss';
 
-const Footer = ({ Content, links, Logo }) => {
+const IBMLogo = () => (
+  <svg
+    className={logo}
+    width="81"
+    height="32"
+    xmlns="http://www.w3.org/2000/svg">
+    <g fillRule="evenodd">
+      <path d="M0 32h15.689v-2.038H0zM0 27.721h15.689v-2.038H0zM4.483 23.442h6.724v-2.037H4.483zM4.483 19.164h6.724v-2.038H4.483zM4.483 14.885h6.724v-2.037H4.483zM4.482 10.606h6.724V8.568H4.482zM0 6.327h15.689V4.29H0zM0 2.049h15.689V.011H0zM17.93 29.963V32h16.504a8.521 8.521 0 0 0 5.54-2.037H17.93zM17.93 25.683v2.038h23.914a8.535 8.535 0 0 0 .85-2.038H17.93zM22.412 23.442h6.724v-2.037h-6.724zM40.124 17.126H22.412v2.038H41.77a8.62 8.62 0 0 0-1.645-2.038M22.413 12.848v2.036h17.786a8.612 8.612 0 0 0 1.644-2.037h-19.43zM42.693 6.327a8.447 8.447 0 0 0-.85-2.037H17.93v2.037h24.763zM39.974 2.049a8.521 8.521 0 0 0-5.54-2.037H17.93v2.037h22.044zM22.412 10.606h6.724V8.568h-6.724zM35.453 10.606h7.29a8.603 8.603 0 0 0 .248-2.038h-7.538v2.038zM35.453 21.405v2.037h7.538c0-.703-.09-1.384-.248-2.037h-7.29zM57.457 0H44.825v2.038h13.34zM44.826 32h11.21v-2.038h-11.21zM44.826 27.72h11.21v-2.038h-11.21zM49.309 23.439h6.727v-2.038h-6.727zM49.309 19.159h6.727v-2.038h-6.727zM69.488 32h11.21v-2.038h-11.21zM69.488 27.72h11.21v-2.038h-11.21zM69.488 23.439h6.726v-2.038h-6.726zM69.487 19.159h6.726v-2.038h-6.726zM69.488 14.879h6.726V12.84H63.606l-.707 2.038h5.903l.686-1.94zM61.916 12.84H49.31v2.039h6.726v-1.94l.686 1.94h5.903zM76.213 8.56H65.091l-.707 2.038h11.83zM68.06 0l-.706 2.038h13.344V0zM62.757 32l.72-2.038h-1.432zM61.254 27.72h3.015l.72-2.038h-4.455zM59.743 23.44h6.037l.72-2.039h-7.476zM58.232 19.159h9.06l.719-2.038h-10.5zM49.309 10.598h11.83l-.707-2.038H49.309zM65.868 6.318h14.83V4.28H66.576zM58.947 4.28H44.826v2.038h14.828z" />
+    </g>
+  </svg>
+);
+
+const DefaultContent = () => (
+  <p>
+    Shadow this content by importing the theme Footer and supplying your own
+    props.
+  </p>
+);
+
+const defaults = {
+  links: {
+    firstCol: [
+      { href: 'https://www.ibm.com/design', linkText: 'Sample' },
+      { href: 'https://www.ibm.com/design', linkText: 'Links' },
+      {
+        href: 'https://www.ibm.com/design',
+        linkText: 'Column',
+      },
+      { href: 'https://www.ibm.com/design', linkText: 'One' },
+    ],
+    secondCol: [
+      {
+        href: 'https://www.ibm.com/design',
+        linkText: 'Dribbble',
+      },
+      {
+        href: 'https://www.ibm.com/design',
+        linkText: 'Medium',
+      },
+      {
+        href: 'https://www.ibm.com/design',
+        linkText: 'Twitter',
+      },
+    ],
+  },
+  Content: DefaultContent,
+  Logo: IBMLogo,
+};
+
+const Footer = ({
+  Content = defaults.Content,
+  links = defaults.links,
+  Logo = defaults.Logo,
+}) => {
   const { firstCol, secondCol } = links;
   const { site } = useStaticQuery(graphql`
     query BUILD_TIME_QUERY {
@@ -67,55 +120,6 @@ const Footer = ({ Content, links, Logo }) => {
   );
 };
 
-const IBMLogo = () => (
-  <svg
-    className={logo}
-    width="81"
-    height="32"
-    xmlns="http://www.w3.org/2000/svg">
-    <g fillRule="evenodd">
-      <path d="M0 32h15.689v-2.038H0zM0 27.721h15.689v-2.038H0zM4.483 23.442h6.724v-2.037H4.483zM4.483 19.164h6.724v-2.038H4.483zM4.483 14.885h6.724v-2.037H4.483zM4.482 10.606h6.724V8.568H4.482zM0 6.327h15.689V4.29H0zM0 2.049h15.689V.011H0zM17.93 29.963V32h16.504a8.521 8.521 0 0 0 5.54-2.037H17.93zM17.93 25.683v2.038h23.914a8.535 8.535 0 0 0 .85-2.038H17.93zM22.412 23.442h6.724v-2.037h-6.724zM40.124 17.126H22.412v2.038H41.77a8.62 8.62 0 0 0-1.645-2.038M22.413 12.848v2.036h17.786a8.612 8.612 0 0 0 1.644-2.037h-19.43zM42.693 6.327a8.447 8.447 0 0 0-.85-2.037H17.93v2.037h24.763zM39.974 2.049a8.521 8.521 0 0 0-5.54-2.037H17.93v2.037h22.044zM22.412 10.606h6.724V8.568h-6.724zM35.453 10.606h7.29a8.603 8.603 0 0 0 .248-2.038h-7.538v2.038zM35.453 21.405v2.037h7.538c0-.703-.09-1.384-.248-2.037h-7.29zM57.457 0H44.825v2.038h13.34zM44.826 32h11.21v-2.038h-11.21zM44.826 27.72h11.21v-2.038h-11.21zM49.309 23.439h6.727v-2.038h-6.727zM49.309 19.159h6.727v-2.038h-6.727zM69.488 32h11.21v-2.038h-11.21zM69.488 27.72h11.21v-2.038h-11.21zM69.488 23.439h6.726v-2.038h-6.726zM69.487 19.159h6.726v-2.038h-6.726zM69.488 14.879h6.726V12.84H63.606l-.707 2.038h5.903l.686-1.94zM61.916 12.84H49.31v2.039h6.726v-1.94l.686 1.94h5.903zM76.213 8.56H65.091l-.707 2.038h11.83zM68.06 0l-.706 2.038h13.344V0zM62.757 32l.72-2.038h-1.432zM61.254 27.72h3.015l.72-2.038h-4.455zM59.743 23.44h6.037l.72-2.039h-7.476zM58.232 19.159h9.06l.719-2.038h-10.5zM49.309 10.598h11.83l-.707-2.038H49.309zM65.868 6.318h14.83V4.28H66.576zM58.947 4.28H44.826v2.038h14.828z" />
-    </g>
-  </svg>
-);
-
-const DefaultContent = () => (
-  <p>
-    Shadow this content by importing the theme Footer and supplying your own
-    props.
-  </p>
-);
-
-Footer.defaultProps = {
-  links: {
-    firstCol: [
-      { href: 'https://www.ibm.com/design', linkText: 'Sample' },
-      { href: 'https://www.ibm.com/design', linkText: 'Links' },
-      {
-        href: 'https://www.ibm.com/design',
-        linkText: 'Column',
-      },
-      { href: 'https://www.ibm.com/design', linkText: 'One' },
-    ],
-    secondCol: [
-      {
-        href: 'https://www.ibm.com/design',
-        linkText: 'Dribbble',
-      },
-      {
-        href: 'https://www.ibm.com/design',
-        linkText: 'Medium',
-      },
-      {
-        href: 'https://www.ibm.com/design',
-        linkText: 'Twitter',
-      },
-    ],
-  },
-  Content: DefaultContent,
-  Logo: IBMLogo,
-};
-
 Footer.propTypes = {
   /**
    * Specify the first and second columns of your links

diff --git a/packages/gatsby-theme-carbon/src/components/GifPlayer/GifPlayer.js b/packages/gatsby-theme-carbon/src/components/GifPlayer/GifPlayer.js
@@ -18,7 +18,17 @@ const Play = ({ hovering }) =>
 const ToggleIcon = ({ paused, hovering }) =>
   paused ? <Play hovering={hovering} /> : <Pause hovering={hovering} />;
 
-const GifPlayer = ({ children, color, className, isInDialog }) => {
+const defaults = {
+  color: 'light',
+  isInDialog: false,
+};
+
+const GifPlayer = ({
+  children,
+  color = defaults.color,
+  className,
+  isInDialog = defaults.isInDialog,
+}) => {
   const [paused, setPaused] = useState(false);
 
   const [hovering, setHovering] = useState(false);
@@ -96,9 +106,4 @@ GifPlayer.propTypes = {
   isInDialog: PropTypes.bool,
 };
 
-GifPlayer.defaultProps = {
-  color: 'light',
-  isInDialog: false,
-};
-
 export default GifPlayer;
diff --git a/packages/gatsby-theme-carbon/src/components/Grid/Grid.js b/packages/gatsby-theme-carbon/src/components/Grid/Grid.js
@@ -34,11 +34,15 @@ Row.propTypes = {
   className: PropTypes.string,
 };
 
+const colDefaults = {
+  colLg: 12,
+};
+
 export const Column = ({
   children,
   colSm,
   colMd,
-  colLg,
+  colLg = colDefaults.colLg,
   colXl,
   colMax,
   offsetSm,
@@ -94,10 +98,6 @@ export const Column = ({
   );
 };
 
-Column.defaultProps = {
-  colLg: 12,
-};
-
 Column.propTypes = {
   children: PropTypes.node,
   /**

diff --git a/packages/gatsby-theme-carbon/src/components/Header/Header.js b/packages/gatsby-theme-carbon/src/components/Header/Header.js
@@ -17,7 +17,17 @@ import useMetadata from '../../util/hooks/useMetadata';
 
 import * as styles from './Header.module.scss';
 
-const Header = ({ children }) => {
+const DefaultHeaderText = () => (
+  <>
+    Carbon&nbsp;<span>Design System</span>
+  </>
+);
+
+const defaults = {
+  children: <DefaultHeaderText />,
+};
+
+const Header = ({ children = defaults.children }) => {
   const {
     leftNavIsOpen,
     toggleNavState,
@@ -75,14 +85,4 @@ const Header = ({ children }) => {
   );
 };
 
-const DefaultHeaderText = () => (
-  <>
-    Carbon&nbsp;<span>Design System</span>
-  </>
-);
-
-Header.defaultProps = {
-  children: <DefaultHeaderText />,
-};
-
 export default Header;
diff --git a/packages/gatsby-theme-carbon/src/components/Homepage/Callout.js b/packages/gatsby-theme-carbon/src/components/Homepage/Callout.js
@@ -12,9 +12,30 @@ const getBackgroundColor = (backgroundColor) =>
 const getColor = (color) =>
   theme.colors[color] || color || theme.colors.inverse01;
 
+const defaults = {
+  leftText: function renderLeftText() {
+    return (
+      <>
+        Think → <strong>Guide</strong>
+      </>
+    );
+  },
+  rightText: function renderRightText() {
+    return (
+      <p>
+        <strong>Build Bonds.</strong>
+        <br />
+        This is the guiding ethos behind IBM’s design philosophy and principles.
+        This helps us distinguish every element and every experience Designed by
+        IBM.
+      </p>
+    );
+  },
+};
+
 const HomepageCallout = ({
-  leftText,
-  rightText,
+  leftText = defaults.leftText,
+  rightText = defaults.rightText,
   backgroundColor: backgroundColorProp,
   color: colorProp,
   ...rest
@@ -38,25 +59,4 @@ const HomepageCallout = ({
   );
 };
 
-HomepageCallout.defaultProps = {
-  leftText: function renderLeftText() {
-    return (
-      <>
-        Think → <strong>Guide</strong>
-      </>
-    );
-  },
-  rightText: function renderRightText() {
-    return (
-      <p>
-        <strong>Build Bonds.</strong>
-        <br />
-        This is the guiding ethos behind IBM’s design philosophy and principles.
-        This helps us distinguish every element and every experience Designed by
-        IBM.
-      </p>
-    );
-  },
-};
-
 export default HomepageCallout;