Merge branch 'main' into radio-button-usage-updates

.github/workflows/process-images.yml

@@ -1,18 +1,28 @@
-name: Compress images
+# Compress images on demand (workflow_dispatch), and at 11pm every Sunday (schedule).
+# Open a Pull Request if any images can be compressed.
+name: Compress Images
 on:
-  pull_request:
-    paths:
-      - '**.jpg'
-      - '**.png'
-      - '**.webp'
+  workflow_dispatch:
+  schedule:
+    - cron: '00 23 * * 0'
 jobs:
   build:
     name: calibreapp/image-actions
     runs-on: ubuntu-latest
     steps:
       - name: Checkout Repo
-        uses: actions/checkout@master
+        uses: actions/checkout@v2
       - name: Compress Images
-        uses: calibreapp/image-actions@master
+        id: calibre
+        uses: calibreapp/image-actions@main
         with:
           githubToken: ${{ secrets.GITHUB_TOKEN }}
+          compressOnly: true
+      - name: Create New Pull Request If Needed
+        if: steps.calibre.outputs.markdown != ''
+        uses: peter-evans/create-pull-request@v3
+        with:
+          title: Compressed Images Nightly
+          branch-suffix: timestamp
+          commit-message: Compressed Images
+          body: ${{ steps.calibre.outputs.markdown }}

package.json

@@ -37,24 +37,25 @@
     "/node_modules/*"
   ],
   "resolutions": {
-    "carbon-components": "^10.28.0",
-    "carbon-components-react": "^7.28.0",
-    "@carbon/elements": "^10.27.0",
-    "@carbon/icons": "^10.25.0",
-    "@carbon/icons-react": "^10.25.0",
+    "carbon-components": "^10.29.0",
+    "carbon-components-react": "^7.29.0",
+    "@carbon/elements": "^10.28.0",
+    "@carbon/icons": "^10.26.0",
+    "@carbon/icons-react": "^10.26.0",
     "gatsby-remark-images": "^3.3.33"
   },
   "dependencies": {
     "@carbon/charts": "0.34.11",
     "@carbon/charts-react": "0.34.11",
-    "@carbon/elements": "^10.27.0",
-    "@carbon/icons": "^10.25.0",
-    "@carbon/icons-react": "^10.25.0",
-    "@carbon/pictograms": "^11.3.0",
+    "@carbon/elements": "^10.28.0",
+    "@carbon/icons": "^10.26.0",
+    "@carbon/icons-react": "^10.26.0",
+    "@carbon/pictograms": "^11.4.0",
+    "@carbon/pictograms-react": "^11.4.0",
     "@loadable/component": "^5.12.0",
     "@slack/web-api": "^5.11.0",
-    "carbon-components": "^10.28.0",
-    "carbon-components-react": "^7.28.0",
+    "carbon-components": "^10.29.0",
+    "carbon-components-react": "^7.29.0",
     "change-case": "^4.1.1",
     "classnames": "^2.2.6",
     "codesandbox": "^2.1.10",
@@ -74,8 +75,6 @@
   },
   "devDependencies": {
     "@babel/core": "^7.11.1",
-    "@carbon/pictograms": "^11.3.0",
-    "@carbon/pictograms-react": "^11.3.0",
     "@loadable/babel-plugin": "^5.12.0",
     "@loadable/webpack-plugin": "^5.12.0",
     "@now/node": "^1.6.1",

src/components/ComponentDemo/Code/useCodesandbox.js

@@ -1,23 +1,33 @@
 import { useMemo, useRef } from 'react';
 import { getParameters } from 'codesandbox/lib/api/define';
+import sampleData from '../data/sampleData';
 
 const getIndex = ({ code = '' }) => {
   const uniqueComponents = Array.from(
     new Set(code.match(/<[A-Z]\w+/g))
   ).map((component) => component.slice(1));
 
+  const importSampleData = () => {
+    const [componentName] = uniqueComponents;
+    if (componentName === 'DataTable') {
+      return `import { headerData, rowData } from './sampleData';`;
+    }
+    return '';
+  };
+
   return `
-      import React from 'react';
-      import { render } from 'react-dom';
-      import 'carbon-components/css/carbon-components.min.css';
-      import { ${uniqueComponents.join(', ')} } from 'carbon-components-react';
-    
-      const App = () => (
-        ${code}
-      );
-
-      render(<App />, document.getElementById('root'));
-    `;
+  import React from 'react';
+  import { render } from 'react-dom';
+  import 'carbon-components/css/carbon-components.min.css';
+  import { ${uniqueComponents.join(', ')} } from 'carbon-components-react';
+  ${importSampleData()}
+
+  const App = () => (
+  ${code}
+  );
+
+  render(<App />, document.getElementById('root'));
+`;
 };
 
 const useCodesandbox = (code) => {
@@ -48,10 +58,11 @@ const useCodesandbox = (code) => {
         'index.html': {
           content: `<div id="root"></div>`,
         },
+        ...(/^<DataTable/.test(code) && sampleData.DataTable),
       },
     });
     return `https://codesandbox.io/api/v1/sandboxes/define?parameters=${parameters}`;
-  }, [originalCode]);
+  }, [code, originalCode]);
 
   return url;
 };

src/components/ComponentDemo/data/sampleData.js

@@ -0,0 +1,92 @@
+const sampleData = {
+  DataTable: {
+    'sampleData.js': {
+      content: `export const rowData = [
+  {
+    id: 'a',
+    name: 'Load Balancer 3',
+    protocol: 'HTTP',
+    port: 3000,
+    rule: 'Round robin',
+    attached_groups: 'Kevin’s VM Groups',
+    status: 'Disabled',
+  },
+  {
+    id: 'b',
+    name: 'Load Balancer 1',
+    protocol: 'HTTP',
+    port: 443,
+    rule: 'Round robin',
+    attached_groups: 'Maureen’s VM Groups',
+    status: 'Starting',
+  },
+  {
+    id: 'c',
+    name: 'Load Balancer 2',
+    protocol: 'HTTP',
+    port: 80,
+    rule: 'DNS delegation',
+    attached_groups: 'Andrew’s VM Groups',
+    status: 'Active',
+  },
+  {
+    id: 'd',
+    name: 'Load Balancer 6',
+    protocol: 'HTTP',
+    port: 3000,
+    rule: 'Round robin',
+    attached_groups: 'Marc’s VM Groups',
+    status: 'Disabled',
+  },
+  {
+    id: 'e',
+    name: 'Load Balancer 4',
+    protocol: 'HTTP',
+    port: 443,
+    rule: 'Round robin',
+    attached_groups: 'Mel’s VM Groups',
+    status: 'Starting',
+  },
+  {
+    id: 'f',
+    name: 'Load Balancer 5',
+    protocol: 'HTTP',
+    port: 80,
+    rule: 'DNS delegation',
+    attached_groups: 'Ronja’s VM Groups',
+    status: 'Active',
+  },
+];
+
+export const headerData = [
+  {
+    key: 'name',
+    header: 'Name',
+  },
+  {
+    key: 'protocol',
+    header: 'Protocol',
+  },
+  {
+    key: 'port',
+    header: 'Port',
+  },
+  {
+    key: 'rule',
+    header: 'Rule',
+  },
+  {
+    key: 'attached_groups',
+    header: 'Attached Groups',
+  },
+  {
+    key: 'status',
+    header: 'Status',
+  },
+];
+`,
+    },
+  },
+};
+
+export default sampleData;

src/components/SVGLibraries/shared/ActionBar.js

@@ -2,7 +2,7 @@
 import React, { useRef, useContext, useState } from 'react';
 import { pascalCase } from 'change-case';
 import { Code16, Download16 } from '@carbon/icons-react';
-import { TooltipDefinition } from 'carbon-components-react';
+import { Button } from 'carbon-components-react';
 import copy from 'copy-to-clipboard';
 import cx from 'classnames';
 import { LibraryContext } from './LibraryProvider';
@@ -56,27 +56,33 @@ const ActionBar = ({
       className={cx(styles.container, {
         [styles.hidden]: !isActionBarVisible,
       })}>
-      <TooltipDefinition
+      <Button
+        kind="ghost"
+        size="small"
+        hasIconOnly
+        tooltipAlignment="center"
+        tooltipPosition="top"
+        iconDescription="Download SVG"
+        renderIcon={Download16}
         onFocus={() => setIsActionBarVisible(true)}
         onClick={handleDownload}
-        align="center"
-        direction="top"
-        tooltipText="Download SVG"
         className={styles.tooltip}
-        triggerClassName={styles.trigger}>
-        <Download16 />
-      </TooltipDefinition>
+        triggerClassName={styles.trigger}
+      />
       {shouldShowCopyButton && (
-        <TooltipDefinition
-          align="center"
-          direction="top"
-          tooltipText={copyText}
+        <Button
+          kind="ghost"
+          size="small"
+          hasIconOnly
+          tooltipAlignment="center"
+          tooltipPosition="top"
+          iconDescription={copyText}
+          renderIcon={Code16}
           onClick={handleCopy}
           onFocus={() => setIsActionBarVisible(true)}
           className={styles.tooltip}
-          triggerClassName={styles.trigger}>
-          <Code16 />
-        </TooltipDefinition>
+          triggerClassName={styles.trigger}
+        />
       )}
     </div>
   );

src/components/TypeScaleTable/type-scale-table.scss

@@ -17,7 +17,7 @@ $type-scale: 0.75rem, 0.875rem, 1rem, 1.125rem, 1.25rem, 1.5rem, 1.75rem, 2rem,
 
 .type-scale-table {
   overflow-x: auto;
-  background: $ui-02;
+  background: $ui-01;
   border-bottom: rem(1px) solid $ui-03;
 
   table tbody tr {

src/data/guidelines/color-tokens.js

@@ -464,6 +464,27 @@ const colorTokens = {
         },
       },
     },
+    '$link-02': {
+      role: ['Secondary link color for lower contrast backgrounds'],
+      value: {
+        white: {
+          name: 'Blue 70',
+          hex: '#0043ce',
+        },
+        g10: {
+          name: 'Blue 70',
+          hex: '#0043ce',
+        },
+        g90: {
+          name: 'Blue 30',
+          hex: '#a6c8ff',
+        },
+        g100: {
+          name: 'Blue 30',
+          hex: '#a6c8ff',
+        },
+      },
+    },
     '$inverse-link': {
       role: ['Links on $inverse-02 backgrounds'],
       value: {
@@ -1301,8 +1322,8 @@ const colorTokens = {
           hex: '#525252',
         },
         g100: {
-          name: 'Gray 80',
-          hex: '#393939',
+          name: 'Gray 70',
+          hex: '#525252',
         },
       },
     },

src/pages/community/patterns/chatbot/overview.mdx

@@ -7,8 +7,16 @@ description:
 tabs: ['Overview', 'Usage', 'Flows', 'Content']
 ---
 
+#### Maintainers:
+
+[Sarah Liu](https://w3.ibm.com/bluepages/profile.html?uid=5G1630897)
+
 import { Tag, Link } from 'carbon-components-react';
 
+#### Maintainers:
+
+[Sarah Liu](https://w3.ibm.com/bluepages/profile.html?uid=5G1630897)
+
 <PageDescription>
 
 Use a chatbot when a user would benefit from requesting information on-demand
@@ -124,8 +132,8 @@ guidance related to your use case.
     subTitle="Sketch library"
     title="Chatbot Design Kit"
     aspectRatio="2:1"
-    actionIcon="download"
-    href="https://sketch.cloud/s/k8j5g">
+    actionIcon="launch"
+    href="https://www.sketch.com/s/d6986eb8-bf0d-4695-abe8-9e79909d4518">
     <MdxIcon name="sketch" />
   </ResourceCard>
 </Column>

src/pages/community/patterns/remove-pattern/index.mdx

@@ -33,7 +33,7 @@ common type of removal and is destructive.
 
 | Action | Variation       | Description                                                                                                               |
 | ------ | --------------- | ------------------------------------------------------------------------------------------------------------------------- |
-| Delete | _High impact_   | Action can't be reversed and causes significant loss. The user types the resource name into the modal to confim deletion. |
+| Delete | _High impact_   | Action can't be reversed and causes significant loss. The user types the resource name into the modal to confirm deletion. |
 |        | _Medium impact_ | Action can't be reversed and causes some loss. The user sees a modal and confirms the consequence of deletion.            |
 |        | _Low impact_    | Action is reversible or very low impact. A confirmation modal may not be required.                                        |
 | Remove | _Medium impact_ | Action can't be reversed and causes some loss. The user sees a modal and confirms the consequence of removal.             |

src/pages/components/UI-shell-header/style.mdx

@@ -147,7 +147,7 @@ either stay sticky to the top of the browser or scroll away.
 
 ### Responsive behavior
 
-In smaller broswer windows, `menu items` in the header should collapse into the
+In smaller browser windows, `menu items` in the header should collapse into the
 left side nav menu. Items that were once in the header should stack at the top
 of the side nav panel if other items were already present in the panel.
 

src/pages/components/accordion/accessibility.mdx

@@ -362,7 +362,7 @@ Accessibility issues are tracked in the
               </ListItem>
               <ListItem>
                 To expand or collapse the accordion, doubletap on the header, or
-                press Control+Option+Space. VoiceOver announces, exapnaded or
+                press Control+Option+Space. VoiceOver announces, expanded or
                 collapses.
               </ListItem>
               <ListItem>