Merge pull request #4203 from grommet/fix-status-color-example

Fix status color example

aries-site/src/examples/foundation/color/ColorPalettes.js

@@ -3,7 +3,7 @@ import { Box, ResponsiveContext } from 'grommet';
 import { ColorRow, UsageExample } from '../../../layouts';
 
 import { colorExamples } from '../../../data';
-import { ElevationExample, TextExample } from '../..';
+import { ElevationExample, TextExample, StatusExample } from '../..';
 
 const { coreColors, darkColors, lightColors, primaryColors } =
   colorExamples.palettes;
@@ -144,14 +144,18 @@ export const TextDark = () => (
 );
 
 export const StatusLight = () => (
-  <UsageExample themeMode="light" label="Light Background" pad="none">
-    {statusColorsLight && generateColorExamples(statusColorsLight)}
+  <UsageExample themeMode="light" label="Light Background" justify="between">
+    {statusColorsLight.map(color => (
+      <StatusExample key={color.name} color={color.name} hex={color.value} />
+    ))}
   </UsageExample>
 );
 
 export const StatusDark = () => (
-  <UsageExample themeMode="dark" label="Dark Background" pad="none">
-    {statusColorsDark && generateColorExamples(statusColorsDark)}
+  <UsageExample themeMode="dark" label="Dark Background" justify="between">
+    {statusColorsDark.map(color => (
+      <StatusExample key={color.name} color={color.name} hex={color.value} />
+    ))}
   </UsageExample>
 );
 

aries-site/src/examples/foundation/color/StatusExample.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Box, Text } from 'grommet';
+import {
+  StatusCriticalSmall,
+  StatusWarningSmall,
+  StatusGoodSmall,
+  StatusUnknownSmall,
+} from 'grommet-icons';
+
+export const StatusExample = ({ color, hex }) => {
+  let Icon;
+  if (color.includes('critical')) Icon = StatusCriticalSmall;
+  else if (color.includes('warning')) Icon = StatusWarningSmall;
+  else if (color.includes('ok')) Icon = StatusGoodSmall;
+  else if (color.includes('unknown')) Icon = StatusUnknownSmall;
+
+  return (
+    <Box align="center" gap="small" margin={{ horizontal: 'small' }}>
+      <Icon size="xxlarge" color={color} />
+      <Box align="center">
+        <Text color="text-strong" weight={600} size="small">
+          {color}
+        </Text>
+        <Text color="text" size="small">
+          {hex}
+        </Text>
+      </Box>
+    </Box>
+  );
+};
+
+StatusExample.propTypes = {
+  color: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.shape({
+      dark: PropTypes.string,
+      light: PropTypes.string,
+    }),
+  ]),
+  hex: PropTypes.string,
+};

aries-site/src/examples/foundation/color/index.js

@@ -1,4 +1,5 @@
 export * from './ColorAccessibility';
 export * from './ColorPalettes';
 export * from './ElevationExample';
+export * from './StatusExample';
 export * from './TextExample';

package.json

@@ -35,7 +35,7 @@
   "dependencies": {
     "grommet": "https://github.com/grommet/grommet/tarball/stable",
     "grommet-icons": "https://github.com/grommet/grommet-icons/tarball/stable",
-    "grommet-theme-hpe": "5.6.0",
+    "grommet-theme-hpe": "https://github.com/grommet/grommet-theme-hpe/tarball/stable",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "styled-components": "^5.3.11"