refactor: remove default prop usage

carbon-design-system · Dec 12, 2024 · 90ec4ee · 90ec4ee
1 parent ca0f50b
commit 90ec4ee
Show file tree

Hide file tree

Showing 14 changed files with 162 additions and 141 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,41 @@ import {
   content,
 } from './Footer.module.scss';
 
-const Footer = ({ Content, links, Logo }) => {
+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 {
@@ -86,36 +120,6 @@ const DefaultContent = () => (
   </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,11 @@ import useMetadata from '../../util/hooks/useMetadata';
 
 import * as styles from './Header.module.scss';
 
-const Header = ({ children }) => {
+const defaults = {
+  children: <DefaultHeaderText />,
+};
+
+const Header = ({ children = defaults.children }) => {
   const {
     leftNavIsOpen,
     toggleNavState,
@@ -81,8 +85,4 @@ const DefaultHeaderText = () => (
   </>
 );
 
-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;
diff --git a/packages/gatsby-theme-carbon/src/components/ImageCard/ImageCard.js b/packages/gatsby-theme-carbon/src/components/ImageCard/ImageCard.js
@@ -10,19 +10,28 @@ import {
   Email,
 } from '@carbon/react/icons';
 
+const defaults = {
+  disabled: false,
+  aspectRatio: '1:1',
+  titleColor: 'light',
+  subTitleColor: 'light',
+  iconColor: 'light',
+  hoverColor: 'light',
+};
+
 export default class ImageCard extends React.Component {
   render() {
     const {
       children,
       href,
       subTitle,
       title,
-      titleColor,
-      subTitleColor,
-      iconColor,
-      hoverColor,
-      disabled,
-      aspectRatio,
+      titleColor = defaults.titleColor,
+      subTitleColor = defaults.subTitleColor,
+      iconColor = defaults.iconColor,
+      hoverColor = defaults.hoverColor,
+      disabled = defaults.disabled,
+      aspectRatio = defaults.aspectRatio,
       actionIcon,
       className,
       ...rest
@@ -181,12 +190,3 @@ ImageCard.propTypes = {
    */
   linkProps: PropTypes.object,
 };
-
-ImageCard.defaultProps = {
-  disabled: false,
-  aspectRatio: '1:1',
-  titleColor: 'light',
-  subTitleColor: 'light',
-  iconColor: 'light',
-  hoverColor: 'light',
-};