feat: add StatusIndicator table component

gatsby-config.js

@@ -12,6 +12,7 @@ module.exports = {
   flags: {
     PRESERVE_WEBPACK_CACHE: true,
     FAST_DEV: true,
+    FAST_REFRESH: true,
   },
   plugins: [
     {

package.json

@@ -62,14 +62,15 @@
     "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"
   },

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}

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) {

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 (

src/components/StatusIndicatorTable/StatusIndicator.module.scss

@@ -0,0 +1,93 @@
+.iconWrapper {
+  display: flex;
+  height: 100%;
+}
+
+.iconGroup {
+  padding: 1rem;
+  display: flex;
+  width: 50%;
+}
+
+.iconGroup.isDark {
+  background-color: $carbon--gray-100;
+  position: relative;
+}
+
+// Covers the top border of the dark cells with appropriate border color
+.iconGroup.isDark::before {
+  content: '';
+  position: absolute;
+  left: 0px;
+  top: -1px;
+  width: 100%;
+  height: 1px;
+  display: block;
+  background-color: #393939;
+}
+
+.icon {
+  background: transparent !important;
+  min-width: 20px;
+  height: 20px;
+}
+
+.icon.glyph {
+  min-width: 16px;
+  height: 16px;
+}
+
+.icon:first-child {
+  margin-right: 8px;
+}
+
+.table {
+  background: white;
+  height: 1px;
+  overflow: hidden;
+  width: 100%;
+}
+
+.table .cell,
+.table .headerCell {
+  padding: 1rem;
+  vertical-align: top;
+}
+
+.table :is(.cell) {
+  color: var(--cds-text-01);
+  border-collapse: collapse;
+}
+
+.table .cell:first-child {
+  padding: 0;
+  padding-left: 0 !important;
+  height: 100%;
+}
+
+.descriptionCell {
+  min-width: 240px;
+}
+
+.statusIndicatorRow {
+  height: 100%;
+  border-bottom: 1px solid #dcdcdc;
+}
+
+.statusIndicatorRow:last-child {
+  border-bottom: none;
+}
+
+@media (max-width: 600px) {
+  .statusIndicatorTableWrapper {
+    margin-right: -1rem;
+    margin-left: -1rem;
+    overflow: scroll;
+  }
+  .iconGroup {
+    width: 100%;
+  }
+  .iconGroup.isDark {
+    display: none;
+  }
+}