chore: sync v11 with main branch

package.json

@@ -49,8 +49,8 @@
     "@slack/web-api": "^5.11.0",
     "babel-preset-env": "^1.7.0",
     "babel-preset-gatsby": "^1.14.0",
-    "carbon-components": "^10.50.0",
-    "carbon-components-react": "^7.50.0",
+    "carbon-components": "^10.51.0",
+    "carbon-components-react": "^7.51.0",
     "change-case": "^4.1.1",
     "classnames": "^2.2.6",
     "codesandbox": "^2.1.10",
@@ -61,7 +61,7 @@
     "gatsby-plugin-image": "^1.14.1",
     "gatsby-theme-carbon": "^2.2.0",
     "lodash-es": "^4.17.15",
-    "markdown-it": "^9.0.1",
+    "markdown-it": "^12.3.2",
     "nanoid": "^2.1.11",
     "prettier-config-carbon": "^0.4.0",
     "prop-types": "^15.7.2",

src/components/TypesetStyle/TypesetExample.js

@@ -32,9 +32,8 @@ const TypesetExample = (props) => (
         )
       );
 
-      const currentBreakpointPx = values(breakpoints)[
-        indexOfClosestLargerBreakpoint
-      ];
+      const currentBreakpointPx =
+        values(breakpoints)[indexOfClosestLargerBreakpoint];
 
       const currentBreakpointName = findKey(
         breakpoints,
@@ -48,7 +47,9 @@ const TypesetExample = (props) => (
           typeStylesUntilCurrentBreakpoint.push(
             props.typeScale[type.key][item]
           );
-          if (item === breakpointName) {break;}
+          if (item === breakpointName) {
+            break;
+          }
         }
         return Object.assign(
           {},
@@ -107,7 +108,7 @@ const TypesetExample = (props) => (
         // eslint-disable-next-line no-useless-concat
         lineHeight: `${`${calculateFluidLineHeight('line-height')}px / `}${
           currentBreakpointSpecs['line-height']
-        }em`,
+        }rem`,
         letterSpacing: currentBreakpointSpecs['letter-spacing']
           .toString()
           .replace('0.', '.'),
@@ -130,13 +131,13 @@ const TypesetExample = (props) => (
           className={`${prefix}--typeset-example`}>
           <div className={`${prefix}--typeset-example-row ${prefix}--row`}>
             <div
-              className={`${prefix}--typeset-example-description ${prefix}--col-md-5`}>
+              className={`${prefix}--typeset-example-description ${prefix}--col-md-6`}>
               <p className={versionClassNames} style={specs}>
                 {type.description}
               </p>
             </div>
             <div
-              className={`${prefix}--typeset-example-specs ${prefix}--col-md-3 ${prefix}--padding`}>
+              className={`${prefix}--typeset-example-specs ${prefix}--col-md-2 ${prefix}--padding`}>
               <span className={`${prefix}--type-body-short-01`}>
                 <span className={`${prefix}--type-semibold`}>{type.name} </span>
                 <br />

src/components/TypesetStyle/TypesetStyle.js

@@ -124,8 +124,8 @@ class TypesetStyle extends React.Component {
       banner,
       secondary,
       top,
-      breakpointControls=false,
-      header=false,
+      breakpointControls = false,
+      header = false,
       typesets,
     } = this.props;
 
@@ -191,12 +191,12 @@ class TypesetStyle extends React.Component {
             .map((typeset, i) => (
               <>
                 {header && (
-                <h4 className="page-h4">
-                  {typeset
-                    .replace(/fixed/g, '')
-                    .replace(/([a-z])([A-Z])/g, '$1 $2')
-                    .toLowerCase()}
-                </h4>
+                  <h4 className="page-h4">
+                    {typeset
+                      .replace(/fixed/g, '')
+                      .replace(/([a-z])([A-Z])/g, '$1 $2')
+                      .toLowerCase()}
+                  </h4>
                 )}
                 <TypesetExample
                   key={i}

src/components/TypesetStyle/typeset-example.scss

@@ -48,7 +48,7 @@
 }
 
 .bx--typeset-example-specs {
-  padding: $spacing-05 $spacing-06;
+  padding: $spacing-05;
 
   @include carbon--breakpoint('md') {
     width: 33.3%;

src/pages/all-about-carbon/partners.mdx

@@ -74,31 +74,7 @@ increases the internal and external eminence of Carbon Design System and IBM.
 </Column>
 </Row>
 
-<h3
-  class="AutolinkHeader-module--header--1G1tm Markdown-module--h3--Gwbvh"
-  id="the-committee"
->
-  The people
-  <a
-    class="AutolinkHeader-module--anchor--36UpA AutolinkHeader-module--left-anchor--1SDoO"
-    href="#the-people"
-    aria-label="The people permalink"
-  >
-    <svg
-      focusable="false"
-      preserveAspectRatio="xMidYMid meet"
-      xmlns="http://www.w3.org/2000/svg"
-      fill="currentColor"
-      width="20"
-      height="20"
-      viewBox="0 0 32 32"
-      aria-hidden="true"
-    >
-      <path d="M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"></path>
-      <path d="M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"></path>
-    </svg>
-  </a>
-</h3>
+### The people
 
 <Row>
 
@@ -254,14 +230,14 @@ allocation to support Carbon's work.
 ![Haidy Francis headshot](/images/team/francis_haidy.png)
 
 </Profile>
-<Profile name="Craig Moser" title="Vice President of Design and Usability, AI Applications">
+<Profile name="Marc Johlic" title="Product Manager, IBM Accessibility">
 
-![Craig Moser headshot](/images/team/moser_craig.png)
+![Marc Johlic headshot](/images/team/johlic_marc.png)
 
 </Profile>
-<Profile name="Doug Powell" title="Vice President, Design Program Office, Cloud and Cognitive Software">
+<Profile name="Craig Moser" title="Vice President of Design and Usability, AI Applications">
 
-![Doug Powell headshot](/images/team/powell_doug.png)
+![Craig Moser headshot](/images/team/moser_craig.png)
 
 </Profile>
 <Profile name="Nigel Prentice" title="Design Director, Digital Growth and Commerce">

src/pages/all-about-carbon/the-team.mdx

@@ -111,11 +111,6 @@ design and build with them.
 
 ![Tracey King headshot](/images/team/king_tracey.png)
 
-</Profile>
-<Profile name="Vince Picone" title="Software Developer">
-
-![Vince Picone headshot](/images/team/picone_vince.png)
-
 </Profile>
 </Row>
 

src/pages/designing/design-resources/index.mdx

@@ -283,20 +283,37 @@ handoff assets to make sure your designs are accessible for implementation.
 
 ## Prototyping tools
 
+### Carbon Mid-Fi Sketch kit
+
+This kit provides designers with a way to visualize concepts and test them out
+before committing to high-fidelity designs.
+
+<Row className="resource-card-group">
+  <Column colMd={4} colLg={4} noGutterSm>
+    <ResourceCard
+      subTitle="Carbon Mid-Fi Sketch kit"
+      href="sketch://add-library/cloud/e888aa99-4d88-46a4-9b33-3a033e7f5ca2"
+      actionIcon="download"
+    >
+      <MdxIcon name="sketch" />
+    </ResourceCard>
+  </Column>
+</Row>
+
 ### Invision Freehand kit
 
 A Carbon wireframe kit for Invision Freehand is available for teams to create
 low fidelity wireframes. This kit is maintained by the Cloud PAL community.
 
-#### How to access the kit:
-
-1. Log into [Invision Freehand](https://ibm.invisionapp.com/freehand/) and
-   create a new freehand.
-2. Next, select `Wireframes and flowcharts` from the template window.
-3. Select `Wireframe - carbon components` by Kamil Zal.
+<Row className="resource-card-group">
+<Column colMd={4} colLg={4} noGutterSm>
+  <ResourceCard
+    subTitle="Invision Freehand kit"
+    href="https://pages.github.ibm.com/cdai-design/cloud-pal/resources/resources/#invision-freehand-kit"
+    actionIcon="launch">
 
-For more instructions go to
-[IBM Cloud PAL](https://pages.github.ibm.com/ibmcloud/pal/resources/resources/#invision-freehand-kit)
-_IBMers only_.
+![Invision icon](/images/invision.png)
 
-<br />
+  </ResourceCard>
+</Column>
+</Row>

src/pages/designing/kits/figma.mdx

@@ -15,22 +15,22 @@ contains all resources you need to get started.
 
 <InlineNotification>
 
-**Beta release:** Only the White theme is available in Beta. The other three
-themes will be available by the end of year. The beta is also only available to
-IBMers at the moment however we are hoping to publish it the the Figma community
-in early 2022 for external use.
+**Available to IBM only:** the Figma kit is currently only available to IBMers
+through a private Figma organization. We are working on getting the kit added to
+the Figma open community and expect it to be published at the end of Q1 for
+external use.
 
 </InlineNotification>
 
 <AnchorLinks>
 
-<AnchorLink>Get the library</AnchorLink>
+<AnchorLink>Get the libraries</AnchorLink>
 <AnchorLink>Start designing</AnchorLink>
 <AnchorLink>Feedback</AnchorLink>
 
 </AnchorLinks>
 
-## Get the library
+## Get the libraries
 
 #### 1. Sign into Figma using IBM SSO
 
@@ -40,6 +40,10 @@ libraries.
 
 #### 2. Turn on the theme libraries
 
+There are four Carbon themes, two light (White and Gray 10) and two dark (Gray
+90 and Gray 100). Each theme lives in its own Figma library. You can turn on as
+many libraries as you’d like.
+
 Inside of a design file, navigate to the **Main menu** panel in the top left of
 the toolbar (A). Open the menu and select **Libraries** from the list (B).
 
@@ -52,8 +56,8 @@ the toolbar (A). Open the menu and select **Libraries** from the list (B).
 </Row>
 
 Then in the Libraries modal that appears, find the team called
-`[NEW] IBM Design Systems` (C) and switch the toggle beside
-`White theme - Carbon Design System` to on (D).
+`[NEW] IBM Design Systems` (C) and switch the toggle beside a themed library,
+for example the `White theme - Carbon Design System` to on (D).
 
 <Row>
 <Column colLg={8}>
@@ -63,17 +67,69 @@ Then in the Libraries modal that appears, find the team called
 </Column>
 </Row>
 
-To preview the library, visit this
-[view-only link](https://www.figma.com/file/Vzz8k68Pqk5HfaTdQOQrGu/White-Theme---Carbon-Design-System?node-id=456%3A14680).
+<br />
+<br />
+
+To preview the four Carbon themes, visit these view-only links.
+
+<Row className="resource-card-group">
+<Column colMd={4} colLg={4} noGutterSm>
+  <ResourceCard
+    onClick={() => fathom.trackGoal('P0OEN9TS', 0)}
+    subTitle="White theme"
+    href="https://www.figma.com/file/Vzz8k68Pqk5HfaTdQOQrGu/White-Theme---Carbon-Design-System"
+    actionIcon="launch">
+
+![Figma icon](/images/figma.svg)
+
+  </ResourceCard>
+</Column>
+<Column colMd={4} colLg={4} noGutterSm>
+  <ResourceCard
+    onClick={() => fathom.trackGoal('T7D1HJ3L', 0)}
+    subTitle="Gray 10 theme"
+    href="https://www.figma.com/file/i6y80WeotmhmbWxpmcffz7/Gray-10-Theme---Carbon-Design-System"
+    actionIcon="launch">
+
+![Figma icon](/images/figma.svg)
+
+  </ResourceCard>
+</Column>
+<Column colMd={4} colLg={4} noGutterSm>
+  <ResourceCard
+    onClick={() => fathom.trackGoal('LYFJTPDE', 0)}
+    subTitle="Gray 90 theme"
+    href="https://www.figma.com/file/fCucrHE8tdGDVJX7ODqajd/Gray-90-Theme---Carbon-Design-System"
+    actionIcon="launch">
+
+![Figma icon](/images/figma.svg)
+
+  </ResourceCard>
+</Column>
+<Column colMd={4} colLg={4} noGutterSm>
+  <ResourceCard
+    onClick={() => fathom.trackGoal('3XH0SIBJ', 0)}
+    subTitle="Gray 100 theme"
+    href="https://www.figma.com/file/TckQzGe3bNxHPLoRhbXFal/Gray-100-Theme---Carbon-Design-System"
+    actionIcon="launch">
+
+![Figma icon](/images/figma.svg)
+
+  </ResourceCard>
+</Column>
+</Row>
+
+<br />
 
 #### 3. Turn on the other IBM Design Language libraries 
 
 Under the same team `[NEW] IBM Design Systems` you can also turn on the
 following libraries:
 
 - Color styles - IBM Design Language
-- Icons and Pictograms - IBM Design Language
 - Text styles - IBM Design Language
+- Icons - IBM Design Language
+- Pictograms - IBM Design Language
 
 ## Start designing
 

src/pages/developing/react-tutorial/step-1.mdx

@@ -70,13 +70,15 @@ cd carbon-tutorial
 ### Add upstream remote
 
 Add a remote called `upstream` so we can eventually submit a pull request once
-you have completed this tutorial step.
+you have completed this tutorial step. There are two choices: SSH or HTTPS
+
+#### SSH
 
 ```bash
 git remote add upstream git@github.com:carbon-design-system/carbon-tutorial.git
 ```
 
-Or, if you prefer to use HTTPS instead of SSH with your remotes:
+#### HTTPS
 
 ```bash
 git remote add upstream https://github.com/carbon-design-system/carbon-tutorial.git