gatsby-theme-carbon 4.2.1 → 4.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-theme-carbon",
-  "version": "4.2.1",
+  "version": "4.2.2",
   "main": "index.js",
   "author": "vpicone <vp@vincepic.one> (@vpicone)",
   "repository": {

package/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: '',
-};

package/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;

package/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) */

package/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',
-};

package/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

package/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;

package/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,
   /**

package/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;

package/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;

package/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',
-};

package/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',
-};

package/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',
-};

package/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 = () => (
+  <>
+    <SwitcherDivider>Foundations</SwitcherDivider>
+    <SwitcherLink href="https://ibm.com/brand" isInternal>
+      IBM Brand Center
+    </SwitcherLink>
+    <SwitcherLink href="https://ibm.com/design/language">
+      IBM Design Language
+    </SwitcherLink>
+    <SwitcherDivider>Implementation</SwitcherDivider>
+    <SwitcherLink href="https://www.carbondesignsystem.com/">
+      Carbon Design System
+    </SwitcherLink>
+    <SwitcherLink href="http://ibm.biz/carbon4ibmproducts" isInternal>
+      Carbon for IBM Products
+    </SwitcherLink>
+    <SwitcherLink href="https://ibm.biz/carbon4cloud" isInternal>
+      Carbon for Cloud
+    </SwitcherLink>
+    <SwitcherLink href="https://www.ibm.com/standards/carbon/">
+      Carbon for IBM.com
+    </SwitcherLink>
+    <SwitcherLink href="https://www.ibm.com/design/event/">
+      IBM Event Design
+    </SwitcherLink>
+    <SwitcherLink href="https://www.ibm.com/design/workplace/">
+      IBM Workplace Design
+    </SwitcherLink>
+    <SwitcherDivider>Practices</SwitcherDivider>
+    <SwitcherLink href="https://www.ibm.com/design/thinking/">
+      Enterprise Design Thinking
+    </SwitcherLink>
+    <SwitcherLink href="https://www.ibm.com/able/">
+      IBM Accessibility
+    </SwitcherLink>
+    <SwitcherLink href="https://www.ibm.com/design/ai">
+      IBM Design for AI
+    </SwitcherLink>
+    <SwitcherLink href="https://www.ibm.com/design/research/">
+      IBM Design Research
+    </SwitcherLink>
+    <SwitcherLink
+      isInternal
+      href="https://w3.ibm.com/design/experience-standards/">
+      IBM Experience Standards
+    </SwitcherLink>
+    <SwitcherDivider>Community</SwitcherDivider>
+    <SwitcherLink href="https://w3.ibm.com/design/" isInternal>
+      IBM Design
+    </SwitcherLink>
+    <SwitcherLink href="https://www.ibm.com/design/racial-equity-in-design">
+      Racial Equity in Design
+    </SwitcherLink>
+  </>
+);
+
+const defaults = {
+  children: <DefaultChildren />,
+};
+
+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 = () => (
-  <>
-    <SwitcherDivider>Foundations</SwitcherDivider>
-    <SwitcherLink href="https://ibm.com/brand" isInternal>
-      IBM Brand Center
-    </SwitcherLink>
-    <SwitcherLink href="https://ibm.com/design/language">
-      IBM Design Language
-    </SwitcherLink>
-    <SwitcherDivider>Implementation</SwitcherDivider>
-    <SwitcherLink href="https://www.carbondesignsystem.com/">
-      Carbon Design System
-    </SwitcherLink>
-    <SwitcherLink href="http://ibm.biz/carbon4ibmproducts" isInternal>
-      Carbon for IBM Products
-    </SwitcherLink>
-    <SwitcherLink href="https://ibm.biz/carbon4cloud" isInternal>
-      Carbon for Cloud
-    </SwitcherLink>
-    <SwitcherLink href="https://www.ibm.com/standards/carbon/">
-      Carbon for IBM.com
-    </SwitcherLink>
-    <SwitcherLink href="https://www.ibm.com/design/event/">
-      IBM Event Design
-    </SwitcherLink>
-    <SwitcherLink href="https://www.ibm.com/design/workplace/">
-      IBM Workplace Design
-    </SwitcherLink>
-    <SwitcherDivider>Practices</SwitcherDivider>
-    <SwitcherLink href="https://www.ibm.com/design/thinking/">
-      Enterprise Design Thinking
-    </SwitcherLink>
-    <SwitcherLink href="https://www.ibm.com/able/">
-      IBM Accessibility
-    </SwitcherLink>
-    <SwitcherLink href="https://www.ibm.com/design/ai">
-      IBM Design for AI
-    </SwitcherLink>
-    <SwitcherLink href="https://www.ibm.com/design/research/">
-      IBM Design Research
-    </SwitcherLink>
-    <SwitcherLink
-      isInternal
-      href="https://w3.ibm.com/design/experience-standards/">
-      IBM Experience Standards
-    </SwitcherLink>
-    <SwitcherDivider>Community</SwitcherDivider>
-    <SwitcherLink href="https://w3.ibm.com/design/" isInternal>
-      IBM Design
-    </SwitcherLink>
-    <SwitcherLink href="https://www.ibm.com/design/racial-equity-in-design">
-      Racial Equity in Design
-    </SwitcherLink>
-  </>
-);
-
-Switcher.defaultProps = {
-  children: <DefaultChildren />,
-};
-
 export default Switcher;

package/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;