feat: add patternfly color token

ccontrols · Sep 30, 2020 · d78c76b · d78c76b
1 parent 6a9e581
commit d78c76b
Show file tree

Hide file tree

Showing 7 changed files with 274 additions and 2 deletions.
diff --git a/examples/stories/src/tutorial/design/tokens/colors.mdx b/examples/stories/src/tutorial/design/tokens/colors.mdx
@@ -36,6 +36,7 @@ import {
   MorningstarColorPalette,
   OPatternColorPalette,
   PajamasColorPalette,
+  PatternFlyColorPalette,
 } from '@component-controls/design-tokens';
 
 # Overview
@@ -1350,3 +1351,92 @@ import { PajamasColorPalette } from '@component-controls/design-tokens';
     '$orange-950': '#421f00',
   }}
 />
+
+## PatternFlyColor
+
+The [PatternFlyColor](/api/design-tokens-colors-patternflycolor--overview) component displays the color as a row with a color circle with css var name and on click popup.
+
+Design inspired from [PatternFly](https://www.patternfly.org/v4/guidelines/colors/).
+
+```
+import { PatternFlyColorPalette } from '@component-controls/design-tokens';
+
+<PatternFlyColorPalette
+  palette={{
+    hover: {
+      css: '--pf-global--primary-color--200',
+      name: 'Hover',
+      value: '#004080',
+      description:
+        'This color is most commonly used as the hover or focus state for components that use the default primary color, such as buttons and dropdowns.',
+    },
+    link: {
+      css: '--pf-global--primary-color--100',
+      value: '#0066CC',
+      description:
+        'This color is most commonly used as a link text and icon color for many components, such as navigation and accordions. Blue icons use the same primary color variable as the blue text.',
+    },
+    dangerAlertIcon: {
+      css: '--pf-global--primary-color--100',
+      name: 'alert icon',
+      value: '#470000',
+      description:
+        'This color is used as the icon color for the danger alert component.',
+    },
+    dangerAlertTitle: {
+      css: '--pf-global--danger-color--200',
+      name: 'alert title',
+      value: '#A30000',
+      description:
+        'This color is used as the title color for the danger alert as well as the background color for the danger button.',
+    },
+    dangerAlertIconBackground: {
+      css: '--pf-global--danger-color--100',
+      name: 'alert icon background',
+      value: '#C9190B',
+      description:
+        'This color is most commonly used as an indication of danger or error for components, such as alerts and form inputs.',
+    },
+  }}
+/>
+
+```
+
+<PatternFlyColorPalette
+  palette={{
+    hover: {
+      css: '--pf-global--primary-color--200',
+      name: 'Hover',
+      value: '#004080',
+      description:
+        'This color is most commonly used as the hover or focus state for components that use the default primary color, such as buttons and dropdowns.',
+    },
+    link: {
+      css: '--pf-global--primary-color--100',
+      value: '#0066CC',
+      description:
+        'This color is most commonly used as a link text and icon color for many components, such as navigation and accordions. Blue icons use the same primary color variable as the blue text.',
+    },
+    dangerAlertIcon: {
+      css: '--pf-global--primary-color--100',
+      name: 'alert icon',
+      value: '#470000',
+      description:
+        'This color is used as the icon color for the danger alert component.',
+    },
+    dangerAlertTitle: {
+      css: '--pf-global--danger-color--200',
+      name: 'alert title',
+      value: '#A30000',
+      description:
+        'This color is used as the title color for the danger alert as well as the background color for the danger button.',
+    },
+    dangerAlertIconBackground: {
+      css: '--pf-global--danger-color--100',
+      name: 'alert icon background',
+      value: '#C9190B',
+      description:
+        'This color is most commonly used as an indication of danger or error for components, such as alerts and form inputs.',
+    },
+  }}
+/>
diff --git a/ui/design-tokens/src/Colors/GovUKColor/GovUKColor.stories.tsx b/ui/design-tokens/src/Colors/GovUKColor/GovUKColor.stories.tsx
@@ -16,7 +16,7 @@ overview.controls = {
     type: 'object',
     value: {
       value: { type: 'color', value: '#1d70b8' },
-      sass: { type: 'color', value: '$govuk-brand-colour' },
+      sass: '$govuk-brand-colour',
     },
   },
 };

diff --git a/ui/design-tokens/src/Colors/PatternFlyColor/PatternFlyColor.stories.tsx b/ui/design-tokens/src/Colors/PatternFlyColor/PatternFlyColor.stories.tsx
@@ -0,0 +1,65 @@
+import React from 'react';
+import { PatternFlyColor, PatternFlyColorPalette } from './PatternFlyColor';
+import { ColorProps } from '../../types';
+
+export default {
+  title: 'Design Tokens/Colors/PatternFlyColor',
+  component: PatternFlyColor,
+};
+
+export const overview = ({ name, color }: ColorProps) => (
+  <PatternFlyColor name={name} color={color} />
+);
+
+overview.controls = {
+  color: {
+    type: 'object',
+    value: {
+      value: { type: 'color', value: '#1d70b8' },
+      css: '--pf-global--link--Color',
+      description:
+        'This color is used as a standard text and icon color as well as a hover state color for icon buttons. It is most commonly used as a text color for many components and application screens.',
+    },
+  },
+};
+
+export const palette = () => (
+  <PatternFlyColorPalette
+    palette={{
+      hover: {
+        css: '--pf-global--primary-color--200',
+        name: 'Hover',
+        value: '#004080',
+        description:
+          'This color is most commonly used as the hover or focus state for components that use the default primary color, such as buttons and dropdowns.',
+      },
+      link: {
+        css: '--pf-global--primary-color--100',
+        value: '#0066CC',
+        description:
+          'This color is most commonly used as a link text and icon color for many components, such as navigation and accordions. Blue icons use the same primary color variable as the blue text.',
+      },
+      dangerAlertIcon: {
+        css: '--pf-global--primary-color--100',
+        name: 'alert icon',
+        value: '#470000',
+        description:
+          'This color is used as the icon color for the danger alert component.',
+      },
+      dangerAlertTitle: {
+        css: '--pf-global--danger-color--200',
+        name: 'alert title',
+        value: '#A30000',
+        description:
+          'This color is used as the title color for the danger alert as well as the background color for the danger button.',
+      },
+      dangerAlertIconBackground: {
+        css: '--pf-global--danger-color--100',
+        name: 'alert icon background',
+        value: '#C9190B',
+        description:
+          'This color is most commonly used as an indication of danger or error for components, such as alerts and form inputs.',
+      },
+    }}
+  />
+);
diff --git a/ui/design-tokens/src/Colors/PatternFlyColor/PatternFlyColor.tsx b/ui/design-tokens/src/Colors/PatternFlyColor/PatternFlyColor.tsx
@@ -0,0 +1,115 @@
+/** @jsx jsx */
+import { FC } from 'react';
+import { jsx, Theme } from 'theme-ui';
+import { CopyContainer, Popover } from '@component-controls/components';
+import { colorToStr } from '../utils';
+import { ColorBlockProps, ColorValue } from '../../types';
+import { FlexContainerProps, FlexContainer } from '../../components';
+
+/**
+ * Color item displaying the color as a row with a color circle with css var name and on click popup.
+ * Design inspired from [PatternFly](https://www.patternfly.org/v4/guidelines/colors/).
+ */
+
+export const PatternFlyColor: FC<ColorBlockProps> = ({ name, color }) => {
+  const colorObj: ColorValue =
+    typeof color === 'string' ? { value: color } : color;
+  const { value: colorValue, css, description, name: colorName } = colorObj;
+
+  const { hex } = colorToStr(colorValue);
+  const cssNode = (
+    <div
+      sx={{
+        bg: 'gray',
+        px: 1,
+        fontSize: 0,
+        border: `1px solid grey`,
+      }}
+    >
+      {css}
+    </div>
+  );
+  return (
+    <div sx={{ display: 'flex', flex: '1' }}>
+      <div
+        sx={{
+          width: '100%',
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'center',
+          fontSize: 0,
+          p: 2,
+        }}
+      >
+        <Popover
+          sx={{
+            cursor: 'pointer',
+          }}
+          trigger="click"
+          placement="right-end"
+          tooltip={() => (
+            <div
+              sx={{
+                p: 2,
+                fontSize: 1,
+                display: 'flex',
+                flexDirection: 'column',
+              }}
+            >
+              <div sx={{ fontWeight: 'bold', mt: 3 }}>Global CSS variable</div>
+              {cssNode}
+              <div sx={{ fontWeight: 'bold', mt: 3 }}>Hex value</div>
+              <CopyContainer value={hex} name={name}>
+                {hex}
+              </CopyContainer>
+              <div sx={{ fontWeight: 'bold', mt: 3 }}>Usage</div>
+              <p sx={{ maxWidth: 300, my: 1, fontSize: 0 }}>{description}</p>
+            </div>
+          )}
+        >
+          <div
+            sx={{
+              width: 45,
+              height: 45,
+              borderRadius: '50%',
+              bg: colorValue,
+              mr: 3,
+              ':hover': {
+                boxShadow: (t: Theme) => `4px 4px ${t.colors?.shadow}`,
+              },
+            }}
+          />
+        </Popover>
+
+        <div
+          sx={{
+            justifyContent: 'space-between',
+            display: 'flex',
+            flexDirection: 'column',
+          }}
+        >
+          <div sx={{ fontWeight: 'bold' }}>{`${hex || colorName}${
+            colorName && hex ? ` (${colorName})` : ''
+          }`}</div>
+          {cssNode}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+/**
+ *
+ * palette displayed with PatternFlyColor items
+ * using a css flex display direction column
+ */
+export const PatternFlyColorPalette: FC<Omit<
+  FlexContainerProps,
+  'children' | 'direction'
+>> = props => (
+  <FlexContainer direction="column" {...props}>
+    {({ name, value }) => (
+      <PatternFlyColor key={`color_item_${name}}`} name={name} color={value} />
+    )}
+  </FlexContainer>
+);
diff --git a/ui/design-tokens/src/Colors/PatternFlyColor/index.ts b/ui/design-tokens/src/Colors/PatternFlyColor/index.ts
@@ -0,0 +1 @@
+export * from './PatternFlyColor';
diff --git a/ui/design-tokens/src/Colors/index.ts b/ui/design-tokens/src/Colors/index.ts
@@ -23,3 +23,4 @@ export * from './LiquidColor';
 export * from './MorningstarColor';
 export * from './OPatternColor';
 export * from './PajamasColor';
+export * from './PatternFlyColor';
diff --git a/ui/design-tokens/src/types.ts b/ui/design-tokens/src/types.ts
@@ -25,7 +25,7 @@ export type ColorValue =
        */
       sass?: string;
       /**
-       * css class name ex .text-input
+       * css class name ex text-input or --pf-global--link--Color
        */
       css?: string;
       /**