feat: added opattern color token

ccontrols · Sep 29, 2020 · 1316e10 · 1316e10
1 parent 8ed5097
commit 1316e10
Show file tree

Hide file tree

Showing 8 changed files with 236 additions and 4 deletions.
diff --git a/examples/stories/src/tutorial/design/tokens/colors.mdx b/examples/stories/src/tutorial/design/tokens/colors.mdx
@@ -34,6 +34,7 @@ import {
   LightningColorPalette,
   LiquidColorPalette,
   MorningstarColorPalette,
+  OPatternColorPalette,
 } from '@component-controls/design-tokens';
 
 # Overview
@@ -1240,3 +1241,68 @@ import { MorningstarColorPalette } from '@component-controls/design-tokens';
     },
   }}
 />
+
+
+## OPatternColor
+
+The [OPatternColor](/api/design-tokens-colors-opatterncolor--overview) component displays the color as a table row, with color block, sass name, andhex, rgb and cmyk color values.
+
+Design inspired from [OPattern](https://ux.opower.com/opattern/color.html).
+
+```
+import { OPatternColorPalette } from '@component-controls/design-tokens';
+
+<OPatternColorPalette
+  palette={{
+    Primary: {
+      value: '#107CB2',
+      sass: '$primary-color',
+    },
+    PrimaryLight: {
+      value: '#b7d8e8',
+      description: '30% of $primary-color',
+      sass: '$primary-color-light',
+    },
+    Alert: {
+      value: '#D8400F',
+      sass: '$alert-color',
+    },
+    AlertLight: {
+      value: '#f3c6b7',
+      description: '30% of $alert-color',
+      sass: '$alert-color-light',
+    },
+    Weather: {
+      value: '#990099',
+      sass: '$weather-color',
+    },
+  }}
+/>
+```
+
+<OPatternColorPalette
+  palette={{
+    Primary: {
+      value: '#107CB2',
+      sass: '$primary-color',
+    },
+    PrimaryLight: {
+      value: '#b7d8e8',
+      description: '30% of $primary-color',
+      sass: '$primary-color-light',
+    },
+    Alert: {
+      value: '#D8400F',
+      sass: '$alert-color',
+    },
+    AlertLight: {
+      value: '#f3c6b7',
+      description: '30% of $alert-color',
+      sass: '$alert-color-light',
+    },
+    Weather: {
+      value: '#990099',
+      sass: '$weather-color',
+    },
+  }}
+/>
diff --git a/ui/design-tokens/src/Colors/DuetColor/DuetColor.tsx b/ui/design-tokens/src/Colors/DuetColor/DuetColor.tsx
@@ -114,9 +114,6 @@ export const DuetColorPalette: FC<Omit<
     ]}
     sx={{
       border: 'none',
-      '& > tbody > td': {
-        px: 1,
-      },
       '& > tbody > tr': {
         fontSize: 0,
         transition: 'background .3s ease',

diff --git a/ui/design-tokens/src/Colors/MorningstarColor/MorningstarColor.tsx b/ui/design-tokens/src/Colors/MorningstarColor/MorningstarColor.tsx
@@ -92,7 +92,7 @@ export const MorningstarColorPalette: FC<Omit<
     }}
     columns={[
       { title: 'Name', sx: { width: '35%' } },
-      { title: 'Constant', sx: { width: '52%' } },
+      { title: 'Constant', sx: { width: '50%' } },
       { title: 'Color', sx: { width: '15%' } },
     ]}
     {...props}

diff --git a/ui/design-tokens/src/Colors/OPatternColor/OPatternColor.stories.tsx b/ui/design-tokens/src/Colors/OPatternColor/OPatternColor.stories.tsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import { OPatternColor, OPatternColorPalette } from './OPatternColor';
+import { ColorProps } from '../../types';
+
+export default {
+  title: 'Design Tokens/Colors/OPatternColor',
+  component: OPatternColor,
+};
+
+export const overview = ({ name, color }: ColorProps) => (
+  <OPatternColor name={name} color={color} />
+);
+
+overview.controls = {
+  name: { type: 'text', value: 'Weather' },
+  color: {
+    type: 'object',
+    value: {
+      value: { type: 'color', value: '#990099' },
+      sass: { type: 'text', value: '$weather-color' },
+    },
+  },
+};
+
+export const palette = () => (
+  <OPatternColorPalette
+    palette={{
+      Primary: {
+        value: '#107CB2',
+        sass: '$primary-color',
+      },
+      PrimaryLight: {
+        value: '#b7d8e8',
+        description: '30% of $primary-color',
+        sass: '$primary-color-light',
+      },
+      Alert: {
+        value: '#D8400F',
+        sass: '$alert-color',
+      },
+      AlertLight: {
+        value: '#f3c6b7',
+        description: '30% of $alert-color',
+        sass: '$alert-color-light',
+      },
+      Weather: {
+        value: '#990099',
+        sass: '$weather-color',
+      },
+    }}
+  />
+);
diff --git a/ui/design-tokens/src/Colors/OPatternColor/OPatternColor.tsx b/ui/design-tokens/src/Colors/OPatternColor/OPatternColor.tsx
@@ -0,0 +1,113 @@
+/** @jsx jsx */
+import { FC, Fragment } from 'react';
+import { jsx } from 'theme-ui';
+import { CopyContainer } from '@component-controls/components';
+import simpleColorConverter from 'simple-color-converter';
+import { colorToStr } from '../utils';
+import { ColorBlockProps, ColorValue } from '../../types';
+import { TableContainerProps, TableContainer } from '../../components';
+
+/**
+ * Color item displaying as a table row, with color block, sass name, andhex, rgb and cmyk color values.
+ * Design inspired from [OPattern](https://ux.opower.com/opattern/color.html).
+ */
+
+export const OPatternColor: FC<ColorBlockProps> = props => (
+  <table>
+    <tbody>
+      <BaseOPatternColor {...props} />
+    </tbody>
+  </table>
+);
+
+const BaseOPatternColor: FC<ColorBlockProps> = ({ name, color }) => {
+  const colorObj: ColorValue =
+    typeof color === 'string' ? { value: color } : color;
+  const {
+    value: colorValue,
+    name: colorName = name,
+    sass,
+    description,
+  } = colorObj;
+  const { hex, rgba } = colorToStr(colorValue);
+  const { color: cmyk } = new simpleColorConverter({
+    rgba,
+    to: 'cmyk',
+  });
+
+  return (
+    <tr>
+      <td sx={{ border: 'none !important' }}>
+        <CopyContainer
+          value={hex}
+          name={colorName}
+          sx={{ bg: colorValue, width: '100%', minWidth: 100, height: '100%' }}
+        />
+      </td>
+      <td>
+        <code sx={{ bg: 'gray' }}>{sass}</code>
+      </td>
+      {description ? (
+        <td colSpan={3}>{description}</td>
+      ) : (
+        <Fragment>
+          <td>
+            <div>{hex.toUpperCase()}</div>
+          </td>
+          <td>
+            <div>{`${rgba.r}, ${rgba.g}, ${rgba.b}${
+              rgba.a !== 1 ? `, ${rgba.a}` : ''
+            }`}</div>
+          </td>
+          <td>{`${cmyk.c}, ${cmyk.m}, ${cmyk.y}, ${cmyk.k}`}</td>
+        </Fragment>
+      )}
+    </tr>
+  );
+};
+
+/**
+ *
+ * palette displayed with OPatternColor items
+ * using a css flex display direction column
+ */
+export const OPatternColorPalette: FC<Omit<
+  TableContainerProps,
+  'children' | 'columns'
+>> = props => (
+  <TableContainer
+    columns={[
+      { title: 'Color', sx: { width: '25%' } },
+      { title: 'Variable', sx: { width: '30%' } },
+      { title: 'Hex', sx: { width: '15%' } },
+      { title: 'RGB', sx: { width: '15%' } },
+      { title: 'CMYK', sx: { width: '15%' } },
+    ]}
+    sx={{
+      '& > tbody > tr > td': {
+        height: 80,
+        px: 2,
+        py: 0,
+      },
+      '& > tbody > tr': {
+        fontSize: 0,
+      },
+      '& > thead > tr > th': {
+        textAlign: 'left',
+        fontSize: 1,
+        fontWeight: 'bold',
+        pb: 2,
+        px: 2,
+      },
+    }}
+    {...props}
+  >
+    {({ name, value }) => (
+      <BaseOPatternColor
+        key={`color_item_${name}}`}
+        name={name}
+        color={value}
+      />
+    )}
+  </TableContainer>
+);
diff --git a/ui/design-tokens/src/Colors/OPatternColor/index.ts b/ui/design-tokens/src/Colors/OPatternColor/index.ts
@@ -0,0 +1 @@
+export * from './OPatternColor';
diff --git a/ui/design-tokens/src/Colors/index.ts b/ui/design-tokens/src/Colors/index.ts
@@ -21,3 +21,4 @@ export * from './IBMDLColor';
 export * from './LightningColor';
 export * from './LiquidColor';
 export * from './MorningstarColor';
+export * from './OPatternColor';
diff --git a/ui/design-tokens/src/components/TableContainer/TableContainer.tsx b/ui/design-tokens/src/components/TableContainer/TableContainer.tsx
@@ -30,6 +30,8 @@ export const TableContainer: FC<TableContainerProps> = ({
         bg: 'background',
         borderSpacing: 0,
         borderCollapse: 'separate',
+        tableLayout: 'fixed',
+        width: '100%',
         borderTop: (t: Theme) => ` 1px solid  ${t.colors?.shadow}`,
         borderBottom: (t: Theme) => ` 1px solid  ${t.colors?.shadow}`,
         '& > tbody > tr > td': {