From 5d7ce669ce802c3560215c93e5cf55175f861b07 Mon Sep 17 00:00:00 2001 From: Matt Gallo Date: Thu, 19 Dec 2024 11:08:49 -0500 Subject: [PATCH] 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 Co-authored-by: Alison Joseph --- .../src/components/ArticleCard/ArticleCard.js | 18 +-- .../AutolinkHeader/AutolinkHeader.js | 12 +- .../src/components/DoDontRow/DoDont.js | 9 +- .../src/components/FeatureCard/FeatureCard.js | 13 +- .../src/components/Footer/Footer.js | 104 ++++++++------- .../src/components/GifPlayer/GifPlayer.js | 17 ++- .../src/components/Grid/Grid.js | 10 +- .../src/components/Header/Header.js | 22 +-- .../src/components/Homepage/Callout.js | 46 +++---- .../src/components/ImageCard/ImageCard.js | 30 ++--- .../components/ResourceCard/ResourceCard.js | 22 +-- .../src/components/SquareCard/SquareCard.js | 22 +-- .../src/components/Switcher/Switcher.js | 126 +++++++++--------- .../src/components/Video/Video.js | 18 ++- yarn.lock | 4 +- 15 files changed, 247 insertions(+), 226 deletions(-) diff --git a/packages/gatsby-theme-carbon/src/components/ArticleCard/ArticleCard.js b/packages/gatsby-theme-carbon/src/components/ArticleCard/ArticleCard.js index 3d5e27b55..5f67447b3 100755 --- 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 index 261d3a978..222bbf432 100644 --- 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 index 744c55219..2790b759d 100644 --- 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 index f4a3f332b..711f73dd0 100755 --- 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 index 2a9b90214..2bcdb71d0 100644 --- 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 = () => ( + + + + + +); + +const DefaultContent = () => ( +

+ Shadow this content by importing the theme Footer and supplying your own + props. +

+); + +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 = () => ( - - - - - -); - -const DefaultContent = () => ( -

- Shadow this content by importing the theme Footer and supplying your own - props. -

-); - -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 index c06dbeff2..71fd24df7 100644 --- 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 ? : ; -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 index dbc74afe0..09a28ef76 100644 --- 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 index 93c747f12..bb33ea00f 100644 --- 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 Design System + +); + +const defaults = { + children: , +}; + +const Header = ({ children = defaults.children }) => { const { leftNavIsOpen, toggleNavState, @@ -75,14 +85,4 @@ const Header = ({ children }) => { ); }; -const DefaultHeaderText = () => ( - <> - Carbon Design System - -); - -Header.defaultProps = { - children: , -}; - 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 index 14dae42db..cd1f3d498 100644 --- 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 → Guide + + ); + }, + rightText: function renderRightText() { + return ( +

+ Build Bonds. +
+ This is the guiding ethos behind IBM’s design philosophy and principles. + This helps us distinguish every element and every experience Designed by + IBM. +

+ ); + }, +}; + 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 → Guide - - ); - }, - rightText: function renderRightText() { - return ( -

- Build Bonds. -
- This is the guiding ethos behind IBM’s design philosophy and principles. - This helps us distinguish every element and every experience Designed by - IBM. -

- ); - }, -}; - 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 index 445218786..ce85ffbf1 100755 --- a/packages/gatsby-theme-carbon/src/components/ImageCard/ImageCard.js +++ b/packages/gatsby-theme-carbon/src/components/ImageCard/ImageCard.js @@ -10,6 +10,15 @@ 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 { @@ -17,12 +26,12 @@ export default class ImageCard extends React.Component { 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', -}; diff --git a/packages/gatsby-theme-carbon/src/components/ResourceCard/ResourceCard.js b/packages/gatsby-theme-carbon/src/components/ResourceCard/ResourceCard.js index b53161a36..38269dedb 100755 --- a/packages/gatsby-theme-carbon/src/components/ResourceCard/ResourceCard.js +++ b/packages/gatsby-theme-carbon/src/components/ResourceCard/ResourceCard.js @@ -12,6 +12,13 @@ import { } from '@carbon/react/icons'; import { AspectRatio } from '@carbon/react'; +const defaults = { + color: 'light', + disabled: false, + aspectRatio: '2:1', + actionIcon: 'launch', +}; + export default class ResourceCard extends React.Component { render() { const { @@ -19,10 +26,10 @@ export default class ResourceCard extends React.Component { href, subTitle, title, - color, - disabled, - aspectRatio, - actionIcon, + color = defaults.color, + disabled = defaults.disabled, + aspectRatio = defaults.aspectRatio, + actionIcon = defaults.actionIcon, className, ...rest } = this.props; @@ -150,10 +157,3 @@ ResourceCard.propTypes = { */ className: PropTypes.string, }; - -ResourceCard.defaultProps = { - color: 'light', - disabled: false, - aspectRatio: '2:1', - actionIcon: 'launch', -}; diff --git a/packages/gatsby-theme-carbon/src/components/SquareCard/SquareCard.js b/packages/gatsby-theme-carbon/src/components/SquareCard/SquareCard.js index ff1b4b6e3..8c830d965 100644 --- a/packages/gatsby-theme-carbon/src/components/SquareCard/SquareCard.js +++ b/packages/gatsby-theme-carbon/src/components/SquareCard/SquareCard.js @@ -12,19 +12,26 @@ import { import { Column } from '../Grid'; import * as styles from './SquareCard.module.scss'; +const defaults = { + color: 'light', + disabled: false, + smallTitle: false, + actionIcon: 'arrowRight', +}; + export default class SquareCard extends React.Component { render() { const { children, href, title, - smallTitle, - disabled, + smallTitle = defaults.smallTitle, + disabled = defaults.disabled, bodyText, helperText, className, - actionIcon, - color, + actionIcon = defaults.actionIcon, + color = defaults.color, ...rest } = this.props; @@ -158,10 +165,3 @@ SquareCard.propTypes = { */ className: PropTypes.string, }; - -SquareCard.defaultProps = { - color: 'light', - disabled: false, - smallTitle: false, - actionIcon: 'arrowRight', -}; diff --git a/packages/gatsby-theme-carbon/src/components/Switcher/Switcher.js b/packages/gatsby-theme-carbon/src/components/Switcher/Switcher.js index 2a084172e..6d86920eb 100644 --- a/packages/gatsby-theme-carbon/src/components/Switcher/Switcher.js +++ b/packages/gatsby-theme-carbon/src/components/Switcher/Switcher.js @@ -5,7 +5,69 @@ import { Locked } from '@carbon/react/icons'; import NavContext from '../../util/context/NavContext'; import { nav, open, divider, link, linkDisabled } from './Switcher.module.scss'; -const Switcher = ({ children }) => { +// https://css-tricks.com/using-css-transitions-auto-dimensions/ +// Note: if you change this, update the max-height in the switcher stylesheet +const DefaultChildren = () => ( + <> + Foundations + + IBM Brand Center + + + IBM Design Language + + Implementation + + Carbon Design System + + + Carbon for IBM Products + + + Carbon for Cloud + + + Carbon for IBM.com + + + IBM Event Design + + + IBM Workplace Design + + Practices + + Enterprise Design Thinking + + + IBM Accessibility + + + IBM Design for AI + + + IBM Design Research + + + IBM Experience Standards + + Community + + IBM Design + + + Racial Equity in Design + + +); + +const defaults = { + children: , +}; + +const Switcher = ({ children = defaults.children }) => { const lgBreakpoint = useMedia('min-width: 1056px'); const { switcherIsOpen, toggleNavState } = useContext(NavContext); const listRef = useRef(null); @@ -81,66 +143,4 @@ export const SwitcherLink = ({ ); }; -// https://css-tricks.com/using-css-transitions-auto-dimensions/ -// Note: if you change this, update the max-height in the switcher stylesheet -const DefaultChildren = () => ( - <> - Foundations - - IBM Brand Center - - - IBM Design Language - - Implementation - - Carbon Design System - - - Carbon for IBM Products - - - Carbon for Cloud - - - Carbon for IBM.com - - - IBM Event Design - - - IBM Workplace Design - - Practices - - Enterprise Design Thinking - - - IBM Accessibility - - - IBM Design for AI - - - IBM Design Research - - - IBM Experience Standards - - Community - - IBM Design - - - Racial Equity in Design - - -); - -Switcher.defaultProps = { - children: , -}; - export default Switcher; diff --git a/packages/gatsby-theme-carbon/src/components/Video/Video.js b/packages/gatsby-theme-carbon/src/components/Video/Video.js index 1899dc7da..86fdec49c 100644 --- a/packages/gatsby-theme-carbon/src/components/Video/Video.js +++ b/packages/gatsby-theme-carbon/src/components/Video/Video.js @@ -12,7 +12,19 @@ import { } from './Video.module.scss'; import usePathPrefix from '../../util/hooks/usePathprefix'; -const Video = ({ autoPlay, vimeoId, title, src, poster, muted, ...props }) => { +const defaults = { + autoPlay: false, +}; + +const Video = ({ + autoPlay = defaults.autoPlay, + vimeoId, + title, + src, + poster, + muted, + ...props +}) => { const [isPlaying, setIsPlaying] = useState(autoPlay); const pathPrefix = usePathPrefix(); const videoRef = useRef(null); @@ -164,8 +176,4 @@ Video.propTypes = { }, }; -Video.defaultProps = { - autoPlay: false, -}; - export default Video; diff --git a/yarn.lock b/yarn.lock index 097665fef..77446f8e5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10117,7 +10117,7 @@ __metadata: dependencies: "@carbon/icons-react": "npm:^11.43.0" gatsby: "npm:^5.13.6" - gatsby-theme-carbon: "npm:^4.2.0" + gatsby-theme-carbon: "npm:^4.2.1" react: "npm:^18.3.1" react-dom: "npm:^18.3.1" languageName: unknown @@ -11403,7 +11403,7 @@ __metadata: languageName: unknown linkType: soft -"gatsby-theme-carbon@npm:^4.2.0, gatsby-theme-carbon@workspace:packages/gatsby-theme-carbon": +"gatsby-theme-carbon@npm:^4.2.1, gatsby-theme-carbon@workspace:packages/gatsby-theme-carbon": version: 0.0.0-use.local resolution: "gatsby-theme-carbon@workspace:packages/gatsby-theme-carbon" dependencies: