feat: added etrade color token

core/config/test/__snapshots__/stories.test.ts.snap

@@ -18,6 +18,7 @@ Array [
   "/Users/atanasster/component-controls/ui/components/src/BlockContainer/BlockContainer.stories.tsx",
   "/Users/atanasster/component-controls/ui/components/src/Collapsible/Collapsible.stories.tsx",
   "/Users/atanasster/component-controls/ui/components/src/ColorMode/ColorMode.stories.tsx",
+  "/Users/atanasster/component-controls/ui/components/src/CopyContainer/CopyContainer.stories.tsx",
   "/Users/atanasster/component-controls/ui/components/src/ExternalLink/ExternalLink.stories.tsx",
   "/Users/atanasster/component-controls/ui/components/src/Header/Header.stories.tsx",
   "/Users/atanasster/component-controls/ui/components/src/HoverBox/HoverBox.stories.tsx",
@@ -89,6 +90,7 @@ Array [
   "/Users/atanasster/component-controls/ui/components/src/BlockContainer/BlockContainer.stories.tsx",
   "/Users/atanasster/component-controls/ui/components/src/Collapsible/Collapsible.stories.tsx",
   "/Users/atanasster/component-controls/ui/components/src/ColorMode/ColorMode.stories.tsx",
+  "/Users/atanasster/component-controls/ui/components/src/CopyContainer/CopyContainer.stories.tsx",
   "/Users/atanasster/component-controls/ui/components/src/ExternalLink/ExternalLink.stories.tsx",
   "/Users/atanasster/component-controls/ui/components/src/Header/Header.stories.tsx",
   "/Users/atanasster/component-controls/ui/components/src/HoverBox/HoverBox.stories.tsx",

core/store/src/serialization/transform-controls.ts

@@ -12,6 +12,41 @@ import {
   getControlValue,
 } from '@component-controls/core';
 
+const controlShortcuts = (
+  control: ComponentControl | any,
+): ComponentControl => {
+  const valueType = typeof control;
+  switch (valueType) {
+    case 'string':
+      return { type: ControlTypes.TEXT, value: control };
+    case 'number':
+      return { type: ControlTypes.NUMBER, value: control };
+    case 'object': {
+      if (control instanceof Date) {
+        return { type: ControlTypes.DATE, value: control };
+      }
+      if (Array.isArray(control)) {
+        return { type: ControlTypes.OPTIONS, options: control };
+      }
+      if (
+        control.type === ControlTypes.OBJECT &&
+        typeof control.value === 'object'
+      ) {
+        return {
+          ...control,
+          value: Object.keys(control.value).reduce(
+            (acc, name) => ({
+              ...acc,
+              [name]: controlShortcuts(control.value[name]),
+            }),
+            {},
+          ),
+        };
+      }
+    }
+  }
+  return control;
+};
 export const transformControls = (
   story: Story,
   doc: Document,
@@ -20,17 +55,7 @@ export const transformControls = (
   const { controls: storyControls } = story;
   const controls: ComponentControls | undefined = storyControls
     ? Object.keys(storyControls).reduce((acc, key) => {
-        let control: ComponentControl;
-        const value = storyControls[key];
-        if (typeof value === 'string') {
-          control = { type: ControlTypes.TEXT, value };
-        } else if (typeof value === 'number') {
-          control = { type: ControlTypes.NUMBER, value };
-        } else if (typeof value === 'object' && value instanceof Date) {
-          control = { type: ControlTypes.DATE, value };
-        } else {
-          control = value;
-        }
+        const control = controlShortcuts(storyControls[key]);
         if (control.defaultValue === undefined) {
           const defaultValue = getControlValue(control);
           if (typeof defaultValue !== 'function') {

examples/stories/src/tutorial/design/tokens/colors.mdx

@@ -23,6 +23,7 @@ import {
   CedarColorPalette,
   CometColorPalette,
   DuetColorPalette,
+  ETradeColorPalette,
 } from '@component-controls/design-tokens';
 
 # Overview
@@ -645,4 +646,74 @@ import { DuetColorPalette } from '@component-controls/design-tokens';
       status: 'error',
     },
   }}
-/>
+/>
+
+
+## ETradeColor
+
+The [ETradeColor](/api/design-tokens-colors-etradecolor--overview) component displays the color as a block with values for hex, class and sass can be copied to clipboard on hover.
+
+Design inspired from [E-Trade Design System](https://docs.etrade.design/colors).
+
+```
+import { ETradeColorPalette } from '@component-controls/design-tokens';
+
+<ETradeColorPalette
+  palette={{
+    Purple: {
+      value: '#5627d8',
+      description: 'Text links and other interactive elements',
+      sass: '$link-color',
+    },
+    'Negative red': {
+      value: '#cc0000',
+      name: 'Error state',
+      description: 'Data trending down',
+      sass: '$negative',
+    },
+    'Positive green': {
+      value: '#107a1b',
+      name: 'Success state',
+      description: 'Data trending up',
+      sass: '$positive',
+      css: '.text-positive',
+    },
+    'Background accent color': {
+      value: '#f1ecff',
+      description: 'Background color',
+      sass: '$background-accent-color-1',
+      css: '.background-accent-color-1',
+    },
+  }}
+/>
+```
+
+<ETradeColorPalette
+  palette={{
+    Purple: {
+      value: '#5627d8',
+      description: 'Text links and other interactive elements',
+      sass: '$link-color',
+    },
+    'Negative red': {
+      value: '#cc0000',
+      name: 'Error state',
+      description: 'Data trending down',
+      sass: '$negative',
+    },
+    'Positive green': {
+      value: '#107a1b',
+      name: 'Success state',
+      description: 'Data trending up',
+      sass: '$positive',
+      css: '.text-positive',
+    },
+    'Background accent color': {
+      value: '#f1ecff',
+      description: 'Background color',
+      sass: '$background-accent-color-1',
+      css: '.background-accent-color-1',
+    },
+  }}
+/>
+

plugins/viewport-plugin/tests/__snapshots__/stories.test.js.snap

@@ -52,7 +52,7 @@ exports[`Plugins/ViewportBlock Overview 1`] = `
               class="css-iux8x2"
             >
               <div
-                class="css-1hcw92l"
+                class="css-d51li0"
               >
                 <div
                   class="css-12caf47"
@@ -127,7 +127,7 @@ exports[`Plugins/ViewportBlock Overview 1`] = `
                 </div>
               </div>
               <div
-                class="css-1hcw92l"
+                class="css-d51li0"
               >
                 <div
                   class="css-12caf47"
@@ -202,7 +202,7 @@ exports[`Plugins/ViewportBlock Overview 1`] = `
                 </div>
               </div>
               <div
-                class="css-1hcw92l"
+                class="css-d51li0"
               >
                 <div
                   class="css-12caf47"
@@ -277,7 +277,7 @@ exports[`Plugins/ViewportBlock Overview 1`] = `
                 </div>
               </div>
               <div
-                class="css-1hcw92l"
+                class="css-d51li0"
               >
                 <div
                   class="css-12caf47"
@@ -412,7 +412,7 @@ exports[`Plugins/ViewportBlock Sizes 1`] = `
               class="css-iux8x2"
             >
               <div
-                class="css-1hcw92l"
+                class="css-d51li0"
               >
                 <div
                   class="css-12caf47"
@@ -487,7 +487,7 @@ exports[`Plugins/ViewportBlock Sizes 1`] = `
                 </div>
               </div>
               <div
-                class="css-1hcw92l"
+                class="css-d51li0"
               >
                 <div
                   class="css-12caf47"

ui/components/tests/__snapshots__/stories.test.js.snap

@@ -926,6 +926,25 @@ exports[`Components/ColorMode Overview 1`] = `
 </DocumentFragment>
 `;
 
+exports[`Components/CopyContainer Overview 1`] = `
+<DocumentFragment>
+  <div
+    class="css-r60fd5"
+  >
+    <div
+      style="border: 1px solid black; padding: 5px;"
+    >
+      <p>
+        some text.
+      </p>
+      <p>
+        click to copy
+      </p>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`Components/ExternalLink Overview 1`] = `
 <DocumentFragment>
   <a
@@ -952,7 +971,7 @@ exports[`Components/Header Overview 1`] = `
 exports[`Components/HoverBox Overview 1`] = `
 <DocumentFragment>
   <div
-    class="css-1hcw92l"
+    class="css-d51li0"
   >
     <div
       class="css-12caf47"

ui/design-tokens/.config/buildtime.js

@@ -0,0 +1,5 @@
+module.exports = {
+  stories: [
+    '../src/**/*.stories.tsx',
+  ],
+};

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",
+    "copy-to-clipboard": "^3.2.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "simple-color-converter": "^2.1.9",

ui/design-tokens/src/Colors/ETradeColor/ETradeColor.stories.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { ETradeColor, ETradeColorPalette } from './ETradeColor';
+import { ColorProps } from '../types';
+
+export default {
+  title: 'Design Tokens/Colors/ETradeColor',
+  component: ETradeColor,
+};
+
+export const overview = ({ name, color }: ColorProps) => (
+  <ETradeColor name={name} color={color} />
+);
+
+overview.controls = {
+  name: { type: 'text', value: 'Negative red' },
+  color: {
+    type: 'object',
+    value: {
+      value: { type: 'color', value: '#cc0000' },
+      name: 'Error state',
+      description: 'Data trending down',
+      sass: '$negative',
+    },
+  },
+};
+
+export const palette = () => (
+  <ETradeColorPalette
+    palette={{
+      Purple: {
+        value: '#5627d8',
+        description: 'Text links and other interactive elements',
+        sass: '$link-color',
+      },
+      'Negative red': {
+        value: '#cc0000',
+        name: 'Error state',
+        description: 'Data trending down',
+        sass: '$negative',
+      },
+      'Positive green': {
+        value: '#107a1b',
+        name: 'Success state',
+        description: 'Data trending up',
+        sass: '$positive',
+        css: '.text-positive',
+      },
+      'Body gray': {
+        value: '#242424',
+        description: 'Headers and body text',
+        sass: '$body-text-color',
+        css: '.body-text-color',
+      },
+      'Background accent color': {
+        value: '#f1ecff',
+        description: 'Background color',
+        sass: '$background-accent-color-1',
+        css: '.background-accent-color-1',
+      },
+    }}
+  />
+);