Merge branch 'main' of github.com:carbon-design-system/carbon-website

andreancardona · Jun 25, 2021 · 1003fa1 · 1003fa1
2 parents ec844fa + 4450af4
commit 1003fa1
Show file tree

Hide file tree

Showing 111 changed files with 2,063 additions and 122 deletions.
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -15,10 +15,10 @@ jobs:
 
     steps:
       - uses: actions/checkout@v2
-      - name: Use Node.js 12.x
+      - name: Use Node.js 14.x
         uses: actions/setup-node@v2-beta
         with:
-          node-version: 12.x
+          node-version: 14.x
 
       - name: Install packages
         run: yarn install --frozen-lockfile --network-timeout 300000

diff --git a/gatsby-config.js b/gatsby-config.js
@@ -12,6 +12,7 @@ module.exports = {
   flags: {
     PRESERVE_WEBPACK_CACHE: true,
     FAST_DEV: true,
+    FAST_REFRESH: true,
   },
   plugins: [
     {
@@ -46,7 +47,7 @@ module.exports = {
       resolve: 'gatsby-theme-carbon',
       options: {
         mdxExtensions: ['.mdx'],
-        isServiceWorkerEnabled: true,
+        isServiceWorkerEnabled: false,
         iconPath: './src/images/favicon.svg',
         titleType: 'prepend',
         repository: {
@@ -76,5 +77,6 @@ module.exports = {
         directory: path.resolve(__dirname, './src/data/chart-index'),
       },
     },
+    'gatsby-plugin-remove-serviceworker',
   ],
 };
diff --git a/package.json b/package.json
@@ -23,7 +23,7 @@
     "update-browserslist": "npx browserslist-ga"
   },
   "engines": {
-    "node": ">=10"
+    "node": ">=14"
   },
   "browserslist": [
     "last 1 edge version",
@@ -37,39 +37,40 @@
     "/node_modules/*"
   ],
   "resolutions": {
-    "carbon-components": "^10.36.0",
-    "carbon-components-react": "^7.36.0",
-    "@carbon/elements": "^10.35.0",
+    "carbon-components": "^10.37.0",
+    "carbon-components-react": "^7.37.1",
+    "@carbon/elements": "^10.36.0",
     "@carbon/icons": "^10.33.0",
     "@carbon/icons-react": "^10.33.0",
     "gatsby-remark-images": "^3.3.33"
   },
   "dependencies": {
-    "@carbon/charts-react": "0.41.62",
-    "@carbon/elements": "^10.35.0",
+    "@carbon/charts-react": "0.41.65",
+    "@carbon/elements": "^10.36.0",
     "@carbon/icons": "^10.33.0",
     "@carbon/icons-react": "^10.33.0",
     "@carbon/pictograms": "^11.11.0",
     "@carbon/pictograms-react": "^11.11.0",
     "@loadable/component": "^5.12.0",
     "@slack/web-api": "^5.11.0",
-    "carbon-components": "^10.36.0",
-    "carbon-components-react": "^7.36.0",
+    "carbon-components": "^10.37.0",
+    "carbon-components-react": "^7.37.1",
     "change-case": "^4.1.1",
     "classnames": "^2.2.6",
     "codesandbox": "^2.1.10",
     "copy-to-clipboard": "^3.2.1",
     "fuse.js": "^6.4.1",
     "gatsby": "^2.19.8",
     "gatsby-image": "^2.4.15",
-    "gatsby-theme-carbon": "^1.29.1",
+    "gatsby-theme-carbon": "^1.29.2",
     "lodash-es": "^4.17.15",
     "markdown-it": "^9.0.1",
     "nanoid": "^2.1.11",
     "prettier-config-carbon": "^0.6.0",
     "prop-types": "^15.7.2",
-    "react": "^16.8.6",
+    "react": "^17.0.2",
     "react-copy-to-clipboard": "^5.0.1",
+    "react-dom": "^17.0.2",
     "react-live": "^2.2.1",
     "use-media": "^1.4.0"
   },
@@ -109,7 +110,6 @@
     "node-fetch": "^3.0.0-beta.9",
     "prettier": "^2.0.2",
     "prismjs": "^1.17.1",
-    "react-dom": "^16.12.0",
     "react-ga": "^2.6.0",
     "use-resize-observer": "^4.0.0"
   },

diff --git a/src/components/ColorPalette/ColorPalette.js b/src/components/ColorPalette/ColorPalette.js
@@ -19,6 +19,11 @@ import {
   alertLight,
   alertDark,
 } from '../../data/data-visualization/palettes';
+import {
+  statusDark,
+  statusLight,
+  statusExtendedColors,
+} from '../../data/status-indicators/palettes.js';
 import ColorPaletteColor from './ColorPaletteColor';
 import PalettesContainer from './PalettesContainer';
 import {
@@ -33,7 +38,13 @@ import {
   sequentialContainer,
 } from './ColorPalette.module.scss';
 
-const ColorPalette = ({ type, isMono, isDiverging }) => {
+const ColorPalette = ({
+  type,
+  isMono,
+  isDiverging,
+  twoColumn,
+  shouldShowControls = true,
+}) => {
   // STATES
   const [continuous, setContinuous] = useState(false);
   const [dark, setDark] = useState(false);
@@ -48,6 +59,7 @@ const ColorPalette = ({ type, isMono, isDiverging }) => {
   const fourColor = dark ? fourColorDark : fourColorLight;
   const fiveColor = dark ? fiveColorDark : fiveColorLight;
   const alertColor = dark ? alertDark : alertLight;
+  const statusColor = dark ? statusDark : statusLight;
 
   // SET RENDERED COLORS
   const [colorGroup, setColorGroup] = useState(oneColor); // used to render type === "grouped" colors
@@ -59,6 +71,10 @@ const ColorPalette = ({ type, isMono, isDiverging }) => {
     colors = categorical;
   } else if (type === 'alert') {
     colors = alertColor;
+  } else if (type === 'status') {
+    colors = statusColor;
+  } else if (type === 'status-extended') {
+    colors = statusExtendedColors;
   }
 
   // DROPDOWN STUFF
@@ -152,32 +168,34 @@ const ColorPalette = ({ type, isMono, isDiverging }) => {
 
   return (
     <div className={colorPaletteWrapper}>
-      <div
-        className={cx(paletteControls, {
-          [groupControls]: type === 'grouped',
-          [sequentialControls]: type === 'sequential',
-          [darkControls]: dark,
-        })}>
-        <ContentSwitcher
-          onChange={handleKeyboard}
-          className={paletteSwitcher}
-          selectionMode="automatic"
-          selectedIndex={0}>
-          <Switch text={switcherOne} onClick={activateFirstSwitcher} />
-          <Switch text={switcherTwo} onClick={activateSecondSwitcher} />
-        </ContentSwitcher>
-        {type === 'grouped' && (
-          <Dropdown
-            label="Color group selection"
-            id="color-group-dropdown"
-            size="xl"
-            items={dropdownItems}
-            onChange={onDropdownChange}
-            selectedItem={dropdownItems[groupNumber - 1]}
-            initialSelectedItem={dropdownItems[0]}
-          />
-        )}
-      </div>
+      {shouldShowControls && (
+        <div
+          className={cx(paletteControls, {
+            [groupControls]: type === 'grouped',
+            [sequentialControls]: type === 'sequential',
+            [darkControls]: dark,
+          })}>
+          <ContentSwitcher
+            onChange={handleKeyboard}
+            className={paletteSwitcher}
+            selectionMode="automatic"
+            selectedIndex={0}>
+            <Switch text={switcherOne} onClick={activateFirstSwitcher} />
+            <Switch text={switcherTwo} onClick={activateSecondSwitcher} />
+          </ContentSwitcher>
+          {type === 'grouped' && (
+            <Dropdown
+              label="Color group selection"
+              id="color-group-dropdown"
+              size="xl"
+              items={dropdownItems}
+              onChange={onDropdownChange}
+              selectedItem={dropdownItems[groupNumber - 1]}
+              initialSelectedItem={dropdownItems[0]}
+            />
+          )}
+        </div>
+      )}
 
       {type === 'grouped' && (
         <PalettesContainer dark={dark}>
@@ -186,6 +204,7 @@ const ColorPalette = ({ type, isMono, isDiverging }) => {
               <div className={groupOption}>Option {index + 1}</div>
               {i.map((j, jIndex) => (
                 <ColorPaletteColor
+                  key={`${j.name}-${index}-${j.index}`}
                   index={jIndex}
                   lightText={j.light}
                   hex={j.hex}
@@ -197,10 +216,11 @@ const ColorPalette = ({ type, isMono, isDiverging }) => {
         </PalettesContainer>
       )}
 
-      {(type === 'categorical' || type === 'alert') && (
-        <PalettesContainer dark={dark} type={type}>
+      {(type === 'categorical' || type === 'alert' || type === 'status') && (
+        <PalettesContainer dark={dark} type={type} twoColumn={twoColumn}>
           {colors.map((i, index) => (
             <ColorPaletteColor
+              key={`${i.name}-${index}-${i.index}`}
               isNumbered
               index={index}
               lightText={i.light}
@@ -215,12 +235,37 @@ const ColorPalette = ({ type, isMono, isDiverging }) => {
         <div className={sequentialContainer}>
           {colors.map((i, index) => (
             <PalettesContainer
+              key={`${i.name}-${index}`}
               color={i.color}
               index={index}
               continuous={continuous}>
               <div className={groupOption}>Option {index + 1}</div>
               {i.data.map((j, jIndex) => (
                 <ColorPaletteColor
+                  key={`${j.name - jIndex}`}
+                  index={jIndex}
+                  lightText={j.light}
+                  hex={j.hex}
+                  name={j.name}
+                  isSequential
+                  continuous={continuous}
+                />
+              ))}
+            </PalettesContainer>
+          ))}
+        </div>
+      )}
+
+      {type === 'status-extended' && (
+        <div className={sequentialContainer}>
+          {colors.map((i, index) => (
+            <PalettesContainer
+              key={`${i.color}-${index}`}
+              color={i.color}
+              index={index}>
+              {i.data.map((j, jIndex) => (
+                <ColorPaletteColor
+                  key={`${j.name - jIndex}`}
                   index={jIndex}
                   lightText={j.light}
                   hex={j.hex}

diff --git a/src/components/ColorPalette/ColorPalette.module.scss b/src/components/ColorPalette/ColorPalette.module.scss
@@ -15,7 +15,6 @@
   column-gap: 1px;
   row-gap: 1px;
   width: 66.66%;
-  border-bottom: 1px solid transparent;
 
   @include carbon--breakpoint-down('md') {
     width: 100%;
@@ -26,6 +25,10 @@
   }
 }
 
+.palette-controls button {
+  border: none !important;
+}
+
 .group-controls {
   border-bottom: 1px solid $ui-03;
 }
@@ -49,6 +52,7 @@
 //SWITCHER
 .palette-switcher {
   height: 3rem;
+  border-bottom: 1px solid $ui-03;
 }
 
 .palette-switcher :global(.bx--content-switcher-btn) {

diff --git a/src/components/ColorPalette/PalettesContainer.js b/src/components/ColorPalette/PalettesContainer.js
@@ -19,7 +19,7 @@ const PalettesContainer = ({
   continuous,
   dark,
   index,
-  type,
+  twoColumn = false,
 }) => {
   const paletteContainerClassNames = cx(palettesContainer, {
     [sequential]: color,
@@ -30,7 +30,7 @@ const PalettesContainer = ({
     [gradientTeal]: color === 'teal' && continuous,
     [gradientCyan]: color === 'cyan' && continuous,
     [gradientTealOnly]: color === 'teal-only' && continuous,
-    [alertContainer]: type === 'alert',
+    [alertContainer]: twoColumn,
   });
 
   return (