chore(project): update icon dependencies (#1124)

* chore(node): update to v16 * chore(project): update icon dependencies * chore(icons): update to latest, refactor metadata usage * chore: bump gatsby-theme-carbon from 2.3.1 to 2.3.2 (#1123) Bumps [gatsby-theme-carbon](https://github.com/carbon-design-system/gatsby-theme-carbon) from 2.3.1 to 2.3.2. - [Release notes](https://github.com/carbon-design-system/gatsby-theme-carbon/releases) - [Changelog](https://github.com/carbon-design-system/gatsby-theme-carbon/blob/main/CHANGELOG.md) - [Commits](carbon-design-system/gatsby-theme-carbon@v2.3.1...v2.3.2) --- updated-dependencies: - dependency-name: gatsby-theme-carbon dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(node): update to v16 Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
carbon-design-system · Aug 1, 2022 · e4b071f · e4b071f · vercel · Aug 1, 2022
1 parent 3ed2008
commit e4b071f
Show file tree

Hide file tree

Showing 20 changed files with 1,951 additions and 1,374 deletions.
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -11,10 +11,10 @@ jobs:
         with:
           github_token: ${{ github.token }}
       - uses: actions/checkout@v2
-      - name: Use Node.js 12.x
+      - name: Use Node.js 16.x
         uses: actions/setup-node@v2-beta
         with:
-          node-version: 14.x
+          node-version: 16.x
 
       - name: Install packages
         run: yarn install --frozen-lockfile --network-timeout 300000

diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-v14
+v16
diff --git a/package.json b/package.json
@@ -5,7 +5,7 @@
   "version": "1.0.1",
   "main": "src",
   "engines": {
-    "node": "14.x"
+    "node": "16.x"
   },
   "browserslist": [
     "last 2 edge version",
@@ -59,10 +59,10 @@
   },
   "dependencies": {
     "@carbon/colors": "^10.35.0",
-    "@carbon/icons": "^10.45.0",
-    "@carbon/icons-react": "^10.45.0",
+    "@carbon/icons": "^11.6.0",
+    "@carbon/icons-react": "^11.6.0",
     "@carbon/layout": "^10.35.0",
-    "@carbon/pictograms": "^11.21.0",
+    "@carbon/pictograms": "^12.2.0",
     "@carbon/pictograms-react": "^11.21.0",
     "@ibm/plex": "^5.2.1",
     "@loadable/babel-plugin": "^5.12.0",

diff --git a/src/components/HomepageTile/HomepageTile.js b/src/components/HomepageTile/HomepageTile.js
@@ -2,7 +2,7 @@ import React, { useLayoutEffect, useState } from 'react';
 import { Link } from 'gatsby';
 import PropTypes from 'prop-types';
 import { settings } from 'carbon-components';
-import { Launch20, ArrowRight20, Error20 } from '@carbon/icons-react';
+import { Launch, ArrowRight, Error } from '@carbon/icons-react';
 import { baseFontSize, breakpoints as carbonBreakpoints } from '@carbon/layout';
 
 const { prefix } = settings;
@@ -103,15 +103,15 @@ const HomepageTile = ({
   const getActionIcon = type => {
     switch (type) {
       case 'resources':
-        return <Launch20 aria-label="Open resource" />;
+        return <Launch size={20} aria-label="Open resource" />;
       case 'disabled':
-        return <Error20 aria-label="disabled" />;
+        return <Error size={20} aria-label="disabled" />;
       case 'article':
-        return <ArrowRight20 aria-label="Go to content" />;
+        return <ArrowRight size={20} aria-label="Go to content" />;
       case 'no-icon':
         return null;
       default:
-        return <ArrowRight20 aria-label="Go to content" />;
+        return <ArrowRight size={20} aria-label="Go to content" />;
     }
   };
 

diff --git a/src/components/HomepageVideo/HomepageVideo.js b/src/components/HomepageVideo/HomepageVideo.js
@@ -3,7 +3,7 @@ import { Link } from 'gatsby';
 import PropTypes from 'prop-types';
 import { settings } from 'carbon-components';
 import { breakpoints } from '@carbon/layout/es';
-import { ArrowRight20 } from '@carbon/icons-react';
+import { ArrowRight } from '@carbon/icons-react';
 import VideoInternal from '../VideoInternal';
 
 import '../../styles/Grid.module.scss';
@@ -68,9 +68,7 @@ class HomepageVideo extends Component {
                     Philosophy
                   </p>
                   <div className={`${prefix}--homepage-video-arrow-container`}>
-                    <ArrowRight20
-                      className={`${prefix}--homepage-video-cta-icon`}
-                    />
+                    <ArrowRight size={20} className={`${prefix}--homepage-video-cta-icon`} />
                   </div>
                 </Link>
                 <Link
@@ -80,9 +78,7 @@ class HomepageVideo extends Component {
                     Gallery
                   </p>
                   <div className={`${prefix}--homepage-video-arrow-container`}>
-                    <ArrowRight20
-                      className={`${prefix}--homepage-video-cta-icon`}
-                    />
+                    <ArrowRight size={20} className={`${prefix}--homepage-video-cta-icon`} />
                   </div>
                 </Link>
               </div>

diff --git a/src/components/MotionChecklist/Checkbox.js b/src/components/MotionChecklist/Checkbox.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Checkbox20, CheckboxCheckedFilled20 } from '@carbon/icons-react';
+import { Checkbox as CheckboxIcon, CheckboxCheckedFilled } from '@carbon/icons-react';
 
 class Checkbox extends React.Component {
   constructor(props) {
@@ -30,7 +30,7 @@ class Checkbox extends React.Component {
         aria-checked={this.state.checked}
         onClick={this.handleOnClick}
         className="motion-checklist__checkbox">
-        {this.state.checked ? <CheckboxCheckedFilled20 /> : <Checkbox20 />}
+        {this.state.checked ? <CheckboxCheckedFilled size={20} /> : <CheckboxIcon size={20} />}
       </div>
     );
   }

diff --git a/src/components/NonLatinScripts/NonLatinScript.js b/src/components/NonLatinScripts/NonLatinScript.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { Renew20 as RenewIcon } from '@carbon/icons-react';
+import { Renew as RenewIcon } from '@carbon/icons-react';
 import { settings } from 'carbon-components';
 
 const { prefix } = settings;
@@ -35,7 +35,7 @@ class NonLatinScript extends React.Component {
               type="button"
               className={`${prefix}--type-body-long-01 ${prefix}--non-latin-button`}
               onClick={() => this.setState({ customValue: null })}>
-              Reset <RenewIcon width={16} height={16} />
+              Reset <RenewIcon size={20} width={16} height={16} />
             </button>
           )}
         </div>

diff --git a/src/components/OverviewCard/OverviewCard.js b/src/components/OverviewCard/OverviewCard.js
@@ -5,7 +5,7 @@ import { Link } from 'gatsby';
 import { Tag, TooltipIcon } from 'carbon-components-react';
 import './overview-card.scss';
 import './overview-card-group.scss';
-import { Launch16 } from '@carbon/icons-react';
+import { Launch } from '@carbon/icons-react';
 
 export default class OverviewCard extends React.Component {
   static propTypes = {
@@ -91,7 +91,7 @@ export default class OverviewCard extends React.Component {
               direction="top"
               align="end"
               tooltipText={tooltipText}>
-              <Launch16 />
+              <Launch />
             </TooltipIcon>
           </a>
         )}

diff --git a/src/components/PlayPauseButton/PlayPauseButton.js b/src/components/PlayPauseButton/PlayPauseButton.js
@@ -4,12 +4,12 @@ import classnames from 'classnames';
 import { settings } from 'carbon-components';
 
 import {
-  PlayOutline24,
-  PlayOutlineFilled24,
-  PauseOutline24,
-  PauseOutlineFilled24,
-  Play24 as Play32,
-  Pause24 as Pause32,
+  PlayOutline,
+  PlayOutlineFilled,
+  PauseOutline,
+  PauseOutlineFilled,
+  Play,
+  Pause,
 } from '@carbon/icons-react';
 
 const { prefix } = settings;
@@ -48,53 +48,57 @@ class PlayPauseButton extends React.Component {
         onFocus={this.onOver}
         onBlur={this.onOut}
         onClick={onClick}>
-        {// corner play button - ex homepage player
-        cornerPlayButton && (
-          <>
-            <span
-              className={classnames(`${prefix}--play-pause-icon`, {
-                active: playing && hover,
-              })}>
-              <PauseOutlineFilled24 />
-            </span>
-            <span
-              className={classnames(`${prefix}--play-pause-icon`, {
-                active: playing && !hover,
-              })}>
-              <PauseOutline24 />
-            </span>
-            <span
-              className={classnames(`${prefix}--play-pause-icon`, {
-                active: !playing && hover,
-              })}>
-              <PlayOutlineFilled24 />
-            </span>
-            <span
-              className={classnames(`${prefix}--play-pause-icon`, {
-                active: !playing && !hover,
-              })}>
-              <PlayOutline24 />
-            </span>
-          </>
-        )}
-        {// standard center play button - use by default
-        !cornerPlayButton && (
-          <>
-            <span className={`${prefix}--play-pause-background`} />
-            <span
-              className={classnames(`${prefix}--play-pause-icon`, {
-                active: playing,
-              })}>
-              <Pause32 />
-            </span>
-            <span
-              className={classnames(`${prefix}--play-pause-icon`, {
-                active: !playing,
-              })}>
-              <Play32 />
-            </span>
-          </>
-        )}
+        {
+          // corner play button - ex homepage player
+          cornerPlayButton && (
+            <>
+              <span
+                className={classnames(`${prefix}--play-pause-icon`, {
+                  active: playing && hover,
+                })}>
+                <PauseOutlineFilled size={24} />
+              </span>
+              <span
+                className={classnames(`${prefix}--play-pause-icon`, {
+                  active: playing && !hover,
+                })}>
+                <PauseOutline size={24} />
+              </span>
+              <span
+                className={classnames(`${prefix}--play-pause-icon`, {
+                  active: !playing && hover,
+                })}>
+                <PlayOutlineFilled size={24} />
+              </span>
+              <span
+                className={classnames(`${prefix}--play-pause-icon`, {
+                  active: !playing && !hover,
+                })}>
+                <PlayOutline size={24} />
+              </span>
+            </>
+          )
+        }
+        {
+          // standard center play button - use by default
+          !cornerPlayButton && (
+            <>
+              <span className={`${prefix}--play-pause-background`} />
+              <span
+                className={classnames(`${prefix}--play-pause-icon`, {
+                  active: playing,
+                })}>
+                <Pause size={24} />
+              </span>
+              <span
+                className={classnames(`${prefix}--play-pause-icon`, {
+                  active: !playing,
+                })}>
+                <Play size={24} />
+              </span>
+            </>
+          )
+        }
       </button>
     );
   }

diff --git a/src/components/SVGLibraries/AppIconLibrary/AppIconCategory.js b/src/components/SVGLibraries/AppIconLibrary/AppIconCategory.js
@@ -15,7 +15,7 @@ import {
 
 import { categoryTitle, svgCategory } from '../shared/SvgLibrary.module.scss';
 
-import { Launch16 } from '@carbon/icons-react';
+import { Launch } from '@carbon/icons-react';
 import TooltipIcon from 'carbon-components-react/lib/components/TooltipIcon';
 
 const IconCategory = ({ category, icons, isDarkTheme }) => {
@@ -52,7 +52,7 @@ const IconCategory = ({ category, icons, isDarkTheme }) => {
                     href="https://github.ibm.com/brand/App-icons/issues/new?template=existing-app-icon-request.md" rel="noreferrer">
                     <TooltipIcon
                       tooltipText="Request icon"
-                      renderIcon={Launch16}
+                      renderIcon={Launch}
                       direction="top"
                     />
                   </a>

diff --git a/src/components/SVGLibraries/IconLibrary/IconLibrary.js b/src/components/SVGLibraries/IconLibrary/IconLibrary.js
@@ -30,14 +30,14 @@ const IconLibrary = () => {
     const iconArray = iconMetaData.reduce((accumulator, icon) => {
       if (icon.deprecated) return accumulator;
 
-      const path = [...icon.namespace, icon.name].join('/');
+      const path = icon.moduleInfo.filepath;
 
       return [
         ...accumulator,
         {
           ...icon,
           Component: loadable(() =>
-            import(`@carbon/icons-react/es/${path}/32`).catch((error) => {
+            import(`@carbon/icons-react/es/${path}`).catch((error) => {
               console.error(error, icon);
               return null;
             })

diff --git a/src/components/SVGLibraries/shared/ActionBar.js b/src/components/SVGLibraries/shared/ActionBar.js
@@ -1,7 +1,7 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
 import React, { useRef, useContext, useState } from 'react';
 import { pascalCase } from 'change-case';
-import { Code16, Download16 } from '@carbon/icons-react';
+import { Code, Download } from '@carbon/icons-react';
 import { Button } from 'carbon-components-react';
 import copy from 'copy-to-clipboard';
 import cx from 'classnames';
@@ -67,7 +67,7 @@ const ActionBar = ({
         tooltipPosition="top"
         iconDescription="Download SVG"
         data-attribute1={`Download ${name}.svg file`}
-        renderIcon={Download16}
+        renderIcon={Download}
         onFocus={() => setIsActionBarVisible(true)}
         onClick={handleDownload}
         className={tooltip}
@@ -81,7 +81,7 @@ const ActionBar = ({
           tooltipAlignment={tooltipAlignment}
           tooltipPosition="top"
           iconDescription={copyText}
-          renderIcon={Code16}
+          renderIcon={Code}
           onClick={handleCopy}
           onFocus={() => setIsActionBarVisible(true)}
           className={tooltip}

diff --git a/src/components/SVGLibraries/shared/Icons.js b/src/components/SVGLibraries/shared/Icons.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { LogoGithub32 } from '@carbon/icons-react';
+import { LogoGithub } from '@carbon/icons-react';
 import { icon } from './SvgLibrary.module.scss';
 
-export const Github = () => <LogoGithub32 className={icon} />;
+export const Github = () => <LogoGithub size={32} className={icon} />;
diff --git a/src/components/SVGLibraries/shared/SvgCard.js b/src/components/SVGLibraries/shared/SvgCard.js
@@ -35,7 +35,7 @@ const SvgCard = ({ icon, containerIsVisible, isLastCard, ...rest }) => {
           <ErrorBoundry>
             <div className={flexContainer}>
               {Component && (
-                <Component {...rest}>
+                <Component size={32} {...rest}>
                   <title>{friendlyName}</title>
                 </Component>
               )}

diff --git a/src/gatsby-theme-carbon/components/GifPlayer/GifPlayer.js b/src/gatsby-theme-carbon/components/GifPlayer/GifPlayer.js
@@ -7,10 +7,10 @@ import React, { useState, useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import {
-  PlayOutline24,
-  PlayOutlineFilled24,
-  PauseOutline24,
-  PauseOutlineFilled24,
+  PlayOutline,
+  PlayOutlineFilled,
+  PauseOutline,
+  PauseOutlineFilled,
 } from '@carbon/icons-react';
 import {
   controls,
@@ -24,10 +24,10 @@ import {
 } from 'gatsby-theme-carbon/src/components/GifPlayer/GifPlayer.module.scss';
 
 const Pause = ({ hovering }) =>
-  hovering ? <PauseOutlineFilled24 /> : <PauseOutline24 />;
+  hovering ? <PauseOutlineFilled size={24} /> : <PauseOutline size={24} />;
 
 const Play = ({ hovering }) =>
-  hovering ? <PlayOutlineFilled24 /> : <PlayOutline24 />;
+  hovering ? <PlayOutlineFilled size={24} /> : <PlayOutline size={24} />;
 
 const ToggleIcon = ({ paused, hovering }) =>
   paused ? <Play hovering={hovering} /> : <Pause hovering={hovering} />;

diff --git a/src/pages/iconography/app-icons/design.mdx b/src/pages/iconography/app-icons/design.mdx
@@ -6,7 +6,7 @@ description:
 tabs: [Library, Design, Usage, Production]
 ---
 
-import { Zip32 } from '@carbon/icons-react';
+import { Zip } from '@carbon/icons-react';
 
 <PageDescription>