feat: add lightning color token, table container

ccontrols · Sep 28, 2020 · 8d45d31 · 8d45d31
1 parent c826051
commit 8d45d31
Show file tree

Hide file tree

Showing 21 changed files with 624 additions and 117 deletions.
diff --git a/examples/stories/src/tutorial/design/tokens/colors.mdx b/examples/stories/src/tutorial/design/tokens/colors.mdx
@@ -31,6 +31,7 @@ import {
   HelpScoutColorPalette,
   ColorTabs,
   IBMDLColorPalette,
+  LightningColorPalette,
 } from '@component-controls/design-tokens';
 
 # Overview
@@ -949,3 +950,191 @@ import { ColorTabs, IBMDLColorPalette } from '@component-controls/design-tokens'
     />
   )}
 </ColorTabs>
+
+
+
+## LightningColor
+
+The [LightningColor](/api/design-tokens-colors-lightningcolor--overview) component displays the color as a row, with color, name, description, var and sas variables and contrast ratio. allows for custom columns.
+
+Design inspired from racle's [Lightning Design System](https://www.lightningdesignsystem.com/design-tokens/#category-color).
+
+```
+import { LightningColorPalette } from '@component-controls/design-tokens';
+
+<LightningColorPalette
+  columns={[
+    {
+      title: 'Released',
+      name: 'released',
+      render: value => <div style={{ textAlign: 'right' }}>{value}</div>,
+    },
+    {
+      title: 'Themeable',
+      name: 'themeable',
+      render: value => (
+        <div style={{ textAlign: 'center' }}>{value ? 'Yes' : 'No'}</div>
+      ),
+    },
+    {
+      title: 'Support',
+      name: 'support',
+      render: value => (
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+          }}
+        >
+          <div
+            style={{
+              textAlign: 'center',
+              width: '1.5rem',
+              height: '1.5rem',
+              lineHeight: '1.5rem',
+              fontSize: '.625rem',
+              color: '#fff',
+              backgroundColor: value === 'GA' ? '#54c473' : '#6488e3',
+            }}
+          >
+            {value}
+          </div>
+        </div>
+      ),
+    },
+  ]}
+  palette={{
+    BRAND_DISABLED: {
+      value: '#c9c7c5',
+      description: 'Disabled state of BRAND_A11Y',
+      sass: '$brand-disabled',
+      released: '2.6.0',
+      themeable: true,
+      support: 'GA',
+    },
+    PALETTE_GRAY_1: {
+      value: '#ffffff',
+      description: 'Background color a branded app header',
+      sass: '$brand-header',
+      released: '2.6.0',
+      themeable: true,
+      support: 'I',
+    },
+    BRAND_HEADER_CONTRAST: {
+      value: '#5e5e5e',
+      description:
+        'Variant of BRAND_HEADER that is accessible with BRAND_HEADER',
+      sass: '$brand-header-contrast',
+      released: '2.6.0',
+      themeable: true,
+      support: 'I',
+    },
+    BRAND_HEADER_CONTRAST_WARM: {
+      value: '#bf0201',
+      description:
+        'Variant of BRAND_HEADER_CONTRAST that provides a warm color',
+      sass: '$brand-header-contrast-warm',
+      released: '2.6.0',
+      themeable: true,
+      support: 'I',
+    },
+    BRAND_PRIMARY: {
+      value: '#1589ee',
+      description: 'Primary brand color',
+      sass: '$brand-primary',
+      released: '2.6.0',
+      themeable: true,
+      support: 'GA',
+    },
+  }}
+/>
+```
+
+<LightningColorPalette
+  columns={[
+    {
+      title: 'Released',
+      name: 'released',
+      render: value => <div style={{ textAlign: 'right' }}>{value}</div>,
+    },
+    {
+      title: 'Themeable',
+      name: 'themeable',
+      render: value => (
+        <div style={{ textAlign: 'center' }}>{value ? 'Yes' : 'No'}</div>
+      ),
+    },
+    {
+      title: 'Support',
+      name: 'support',
+      render: value => (
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+          }}
+        >
+          <div
+            style={{
+              textAlign: 'center',
+              width: '1.5rem',
+              height: '1.5rem',
+              lineHeight: '1.5rem',
+              fontSize: '.625rem',
+              color: '#fff',
+              backgroundColor: value === 'GA' ? '#54c473' : '#6488e3',
+            }}
+          >
+            {value}
+          </div>
+        </div>
+      ),
+    },
+  ]}
+  palette={{
+    BRAND_DISABLED: {
+      value: '#c9c7c5',
+      description: 'Disabled state of BRAND_A11Y',
+      sass: '$brand-disabled',
+      released: '2.6.0',
+      themeable: true,
+      support: 'GA',
+    },
+    PALETTE_GRAY_1: {
+      value: '#ffffff',
+      description: 'Background color a branded app header',
+      sass: '$brand-header',
+      released: '2.6.0',
+      themeable: true,
+      support: 'I',
+    },
+    BRAND_HEADER_CONTRAST: {
+      value: '#5e5e5e',
+      description:
+        'Variant of BRAND_HEADER that is accessible with BRAND_HEADER',
+      sass: '$brand-header-contrast',
+      released: '2.6.0',
+      themeable: true,
+      support: 'I',
+    },
+    BRAND_HEADER_CONTRAST_WARM: {
+      value: '#bf0201',
+      description:
+        'Variant of BRAND_HEADER_CONTRAST that provides a warm color',
+      sass: '$brand-header-contrast-warm',
+      released: '2.6.0',
+      themeable: true,
+      support: 'I',
+    },
+    BRAND_PRIMARY: {
+      value: '#1589ee',
+      description: 'Primary brand color',
+      sass: '$brand-primary',
+      released: '2.6.0',
+      themeable: true,
+      support: 'GA',
+    },
+  }}
+/>
diff --git a/ui/components/src/CopyContainer/CopyContainer.tsx b/ui/components/src/CopyContainer/CopyContainer.tsx
@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { FC, useState } from 'react';
-import { jsx, Box, SxStyleProp } from 'theme-ui';
+import { jsx, Box } from 'theme-ui';
 import copy from 'copy-to-clipboard';
 import { CheckIcon } from '@primer/octicons-react';
 import { Popover } from '../Popover';
@@ -12,30 +12,26 @@ export interface CopyContainerProps {
    * value to copy
    */
   value: string;
-  /**
-   * stying props
-   */
-  sxStyle?: SxStyleProp;
 }
 
 /**
  * conainer to enclose items that will provide copy fnctionality on click
  *
  */
 export const CopyContainer: FC<CopyContainerProps> = ({
-  sxStyle,
   name,
   value,
   children,
+  ...rest
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   return (
     <Popover
       sx={{
         cursor: 'pointer',
         position: 'relative',
-        ...sxStyle,
       }}
+      {...rest}
       trigger="click"
       followCursor={true}
       tooltipShown={isOpen}

diff --git a/ui/design-tokens/package.json b/ui/design-tokens/package.json
@@ -35,6 +35,7 @@
     "@component-controls/editors": "^1.25.1",
     "@component-controls/store": "^1.25.1",
     "@primer/octicons-react": "^10.0.0",
+    "@types/tinycolor2": "^1.4.2",
     "copy-to-clipboard": "^3.2.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",

diff --git a/ui/design-tokens/src/Colors/AntdHorzColor/AntdHorzColor.tsx b/ui/design-tokens/src/Colors/AntdHorzColor/AntdHorzColor.tsx
@@ -30,7 +30,7 @@ export const AntdHorzColor: FC<ColorBlockProps> = ({ name, color, hover }) => {
   );
   return (
     <div sx={{ display: 'flex', flex: '1', height: 90, maxWidth: 120 }}>
-      <CopyContainer value={hex} name={name} sxStyle={{ width: '100%' }}>
+      <CopyContainer value={hex} name={name} sx={{ width: '100%' }}>
         <div
           {...onMouseEvents}
           sx={{

diff --git a/ui/design-tokens/src/Colors/AntdVertColor/AntdVertColor.tsx b/ui/design-tokens/src/Colors/AntdVertColor/AntdVertColor.tsx
@@ -30,7 +30,7 @@ export const AntdVertColor: FC<ColorBlockProps> = ({ name, color, hover }) => {
 
   return (
     <div sx={{ display: 'flex', flex: '1', width: 250 }}>
-      <CopyContainer value={hex} name={name} sxStyle={{ width: '100%' }}>
+      <CopyContainer value={hex} name={name} sx={{ width: '100%' }}>
         <div
           {...onMouseEvents}
           sx={{

diff --git a/ui/design-tokens/src/Colors/BeelineColor/BeelineColor.tsx b/ui/design-tokens/src/Colors/BeelineColor/BeelineColor.tsx
@@ -31,7 +31,7 @@ export const BeelineColor: FC<ColorBlockProps> = ({ name, color }) => {
         boxShadow: (t: Theme) => `0 1px 2px 0 ${t.colors?.shadow}`,
       }}
     >
-      <CopyContainer value={hex} name={name} sxStyle={{ px: 2, pt: 2 }}>
+      <CopyContainer value={hex} name={name} sx={{ px: 2, pt: 2 }}>
         <div
           sx={{
             bg: colorValue,

diff --git a/ui/design-tokens/src/Colors/CanvasColor/CanvasColor.tsx b/ui/design-tokens/src/Colors/CanvasColor/CanvasColor.tsx
@@ -34,7 +34,7 @@ export const CanvasColor: FC<ColorBlockProps> = ({ name, color }) => {
         <CopyContainer
           value={hex}
           name={name}
-          sxStyle={{ width: '40%', height: '100%' }}
+          sx={{ width: '40%', height: '100%' }}
         >
           <div
             sx={{

diff --git a/ui/design-tokens/src/Colors/CometColor/CometColor.tsx b/ui/design-tokens/src/Colors/CometColor/CometColor.tsx
@@ -42,7 +42,7 @@ export const CometColor: FC<ColorBlockProps> = ({ name, color }) => {
   }
   return (
     <div sx={{ display: 'flex', flex: '1' }}>
-      <CopyContainer value={hex} name={name} sxStyle={{ width: '100%' }}>
+      <CopyContainer value={hex} name={name} sx={{ width: '100%' }}>
         <div
           sx={{
             width: '100%',