feat: added anvil color block

ccontrols · Sep 17, 2020 · 14470cc · 14470cc
1 parent ac450f5
commit 14470cc
Show file tree

Hide file tree

Showing 21 changed files with 356 additions and 185 deletions.
diff --git a/examples/gatsby/.config/buildtime.js b/examples/gatsby/.config/buildtime.js
@@ -10,7 +10,7 @@ module.exports = {
     '../../stories/src/tutorial/getting-started/ssg/*.mdx',
     '../../stories/src/tutorial/getting-started/*.mdx',
     '../../stories/src/tutorial/write-documentation/*.mdx',
-    '../../stories/src/tutorial/design/*.mdx',
+    '../../stories/src/tutorial/design/tokens/*.mdx',
     '../../stories/src/tutorial/testing/*.mdx',
     '../../stories/src/tutorial/configuration/*.mdx',
     '../../stories/src/tutorial/reference/*.mdx',

diff --git a/examples/nextjs/.config/buildtime.js b/examples/nextjs/.config/buildtime.js
@@ -10,7 +10,7 @@ module.exports = {
     '../../stories/src/tutorial/getting-started/ssg/*.mdx',
     '../../stories/src/tutorial/getting-started/*.mdx',
     '../../stories/src/tutorial/write-documentation/*.mdx',
-    '../../stories/src/tutorial/design/*.mdx',
+    '../../stories/src/tutorial/design/tokens/*.mdx',
     '../../stories/src/tutorial/testing/*.mdx',
     '../../stories/src/tutorial/configuration/*.mdx',
     '../../stories/src/tutorial/reference/*.mdx',

diff --git a/examples/stories/src/tutorial/design/design-tokens.mdx b/examples/stories/src/tutorial/design/design-tokens.mdx
diff --git a/examples/stories/src/tutorial/design/tokens/colors.mdx b/examples/stories/src/tutorial/design/tokens/colors.mdx
@@ -0,0 +1,156 @@
+---
+title: Design/Design tokens/Colors
+route: /tutorial/design-tokens/colors
+type: tutorial
+tags:
+  - design
+  - colors
+order: 0
+author: atanasster
+---
+import { ColorBlock1Palette, ColorBlock2Palette, ColorBlock3Palette, ColorBlock4Palette } from '@component-controls/design-tokens';
+
+## Overview
+
+The [design-tokens](https://github.com/ccontrols/component-controls/tree/master/ui/design-tokens) package contains a collection of design tokens components.
+
+
+## Install
+
+```sh
+yarn add @component-controls/design-tokens --dev
+```
+
+## Colors
+
+Components that will display a single color or a palette of colors. The color can be a hex, rgb, or hsl string value.
+
+### ColorBlock1
+
+The [ColorBlock1](/api/design-tokens-colors-colorblock1--overview) component design is inspired from [Alta UI](https://www.oracle.com/webfolder/ux/middleware/alta_web_icon_guide/Alta-Colors/UI-Palette.html) and displays the color name and value in a compact block.
+
+```
+import { ColorBlock1Palette } from '@component-controls/design-tokens';
+
+<ColorBlock1Palette
+  palette={{
+    'color-1': '#fbce4a',
+    'color-2': '#fcfbe8',
+    'color-3': '#fff4d5',
+    'color-4': '#f6cab7',
+    'color-5': '#ec96ad',
+    'color-6': '#ca589d',
+  }}
+/>
+```
+
+<ColorBlock1Palette
+  palette={{
+    'color-1': '#fbce4a',
+    'color-2': '#fcfbe8',
+    'color-3': '#fff4d5',
+    'color-4': '#f6cab7',
+    'color-5': '#ec96ad',
+    'color-6': '#ca589d',
+  }}
+/>
+
+### ColorBlock2
+
+The [ColorBlock2](/api/design-tokens-colors-colorblock2--overview) component design is inspired from [And Design](https://ant.design/docs/spec/colors) and displays a horizontal color block, with the color value visible on hover.
+
+```
+import { ColorBlock2Palette } from '@component-controls/design-tokens';
+
+<ColorBlock2Palette
+  palette={{
+    'green-1': '#f6ffed',
+    'green-2': '#d9f7be',
+    'green-3': '#b7eb8f',
+    'green-4': '#95de64',
+    'green-5': '#73d13d',
+    'green-6': '#52c41a',
+    'green-7': '#389e0d',
+    'green-8': '#237804',
+    'green-9': '#135200',
+    'green-10': '#092b00',
+  }}
+/>
+```
+<ColorBlock2Palette
+  palette={{
+    'green-1': '#f6ffed',
+    'green-2': '#d9f7be',
+    'green-3': '#b7eb8f',
+    'green-4': '#95de64',
+    'green-5': '#73d13d',
+    'green-6': '#52c41a',
+    'green-7': '#389e0d',
+    'green-8': '#237804',
+    'green-9': '#135200',
+    'green-10': '#092b00',
+  }}
+/>
+
+### ColorBlock3
+
+The [ColorBlock3](/api/design-tokens-colors-colorblock3--overview) component design is inspired from [And Design](https://ant.design/docs/spec/colors) and displays a horizontal color block, with the color value visible on hover.
+
+```
+import { ColorBlock3Palette } from '@component-controls/design-tokens';
+
+<ColorBlock3Palette
+  palette={{
+    'red-1': '#fff1f0',
+    'red-2': '#ffccc7',
+    'red-3': '#ffa39e',
+    'red-4': '#ff7875',
+    'red-5': '#ff4d4f',
+    'red-6': '#f5222d',
+    'red-7': '#cf1322',
+    'red-8': '#a8071a',
+  }}
+/>
+```
+<ColorBlock3Palette
+  palette={{
+    'red-1': '#fff1f0',
+    'red-2': '#ffccc7',
+    'red-3': '#ffa39e',
+    'red-4': '#ff7875',
+    'red-5': '#ff4d4f',
+    'red-6': '#f5222d',
+    'red-7': '#cf1322',
+    'red-8': '#a8071a',
+  }}
+/>
+
+
+### ColorBlock4
+
+The [ColorBlock4](/api/design-tokens-colors-colorblock4--overview) component design is inspired from [Anvil](https://anvil.servicetitan.com/foundations/color/) and displays a color block with a dot suggesting the best text color and a block of text with the color title, name and value.
+
+```
+import { ColorBlock4Palette } from '@component-controls/design-tokens';
+
+<ColorBlock4Palette
+  palette={{
+    Critical: { value: '#f94d32', name: 'Red400' },
+    Warning: { value: '#ffc902', name: 'Yellow400' },
+    Success: { value: '#18a761', name: 'Green500' },
+    Info: { value: '#2270ee', name: 'Blue400' },
+    Border: { value: '#dfe0e1', name: 'Neutral60' },
+    Accent: { value: '#f5f5f5', name: 'Neutral40' },
+  }}
+/>
+```
+<ColorBlock4Palette
+  palette={{
+    Critical: { value: '#f94d32', name: 'Red400' },
+    Warning: { value: '#ffc902', name: 'Yellow400' },
+    Success: { value: '#18a761', name: 'Green500' },
+    Info: { value: '#2270ee', name: 'Blue400' },
+    Border: { value: '#dfe0e1', name: 'Neutral60' },
+    Accent: { value: '#f5f5f5', name: 'Neutral40' },
+  }}
+/>
diff --git a/...olors/ColorSwatch/ColorSwatch.stories.tsx → ...olors/ColorBlock1/ColorBlock1.stories.tsx b/...olors/ColorSwatch/ColorSwatch.stories.tsx → ...olors/ColorBlock1/ColorBlock1.stories.tsx
@@ -1,39 +1,39 @@
 import React from 'react';
-import { ColorSwatch, ColorSwatchPalette } from './ColorSwatch';
+import { ColorBlock1, ColorBlock1Palette } from './ColorBlock1';
 import { ColorProps } from '../types';
 
 export default {
-  title: 'Design Tokens/ColorSwatch',
-  component: ColorSwatch,
+  title: 'Design Tokens/Colors/ColorBlock1',
+  component: ColorBlock1,
 };
 
 export const overview = ({ name, color }: ColorProps) => (
-  <ColorSwatch name={name} color={color} />
+  <ColorBlock1 name={name} color={color} />
 );
 
 overview.controls = {
   name: { type: 'text' },
   color: { type: 'color', value: '#fbce4a' },
 };
 
-export const name = () => <ColorSwatch name="brand" color="#e95b54" />;
+export const name = () => <ColorBlock1 name="brand" color="#e95b54" />;
 
-export const rgb = () => <ColorSwatch name="text" color="rgb(0, 0, 0)" />;
+export const rgb = () => <ColorBlock1 name="text" color="rgb(0, 0, 0)" />;
 
 export const rgba = () => (
-  <ColorSwatch name="shadow" color="rgba(0, 0, 0, 0.1)" />
+  <ColorBlock1 name="shadow" color="rgba(0, 0, 0, 0.1)" />
 );
 
 export const hsl = () => (
-  <ColorSwatch name="accent" color="hsl(12, 10%, 50%)" />
+  <ColorBlock1 name="accent" color="hsl(12, 10%, 50%)" />
 );
 
 export const hsla = () => (
-  <ColorSwatch name="accent" color="hsl(12, 10%, 50%, .3)" />
+  <ColorBlock1 name="accent" color="hsl(12, 10%, 50%, .3)" />
 );
 
 export const palette = () => (
-  <ColorSwatchPalette
+  <ColorBlock1Palette
     palette={{
       'color-1': '#fbce4a',
       'color-2': '#fcfbe8',

diff --git a/...ns/src/Colors/ColorSwatch/ColorSwatch.tsx → ...ns/src/Colors/ColorBlock1/ColorBlock1.tsx b/...ns/src/Colors/ColorSwatch/ColorSwatch.tsx → ...ns/src/Colors/ColorBlock1/ColorBlock1.tsx
@@ -6,20 +6,21 @@ import { colorToStr } from '../utils';
 import { ColorProps } from '../types';
 import { GridContainerProps, GridContainer } from '../GridContainer';
 
-export type ColorSwatchProps = { sx?: SxProps } & ColorProps;
+export type ColoBlock1Props = { sx?: SxProps } & ColorProps;
 
 /**
  * Color item displaying the color as a block, as well as hex(string) and rgb values.
  * Inspired from [Alta UI](https://www.oracle.com/webfolder/ux/middleware/alta_web_icon_guide/Alta-Colors/UI-Palette.html).
  */
-export const ColorSwatch: FC<ColorSwatchProps> = ({ name, color, sx }) => {
-  const { hex, rgba } = colorToStr(color);
+export const ColorBlock1: FC<ColoBlock1Props> = ({ name, color, sx }) => {
+  const colorValue = typeof color === 'string' ? color : color.value;
+  const { hex, rgba } = colorToStr(colorValue);
   return (
     <Box sx={{ display: 'flex', flexDirection: 'row', width: '220px' }}>
       <CopyContainer value={hex} name={name}>
         <Box
           sx={{
-            bg: color,
+            bg: colorValue,
             width: 64,
             height: 64,
             border: (t: Theme) => ` 1px solid  ${t.colors?.shadow}`,
@@ -64,7 +65,7 @@ export const ColorSwatch: FC<ColorSwatchProps> = ({ name, color, sx }) => {
  * palette displayed with ColorSwatch items
  * using a css grid for the dsplay
  */
-export const ColorSwatchPalette: FC<Omit<
+export const ColorBlock1Palette: FC<Omit<
   GridContainerProps,
   'ColorBlock'
->> = props => <GridContainer ColorBlock={ColorSwatch} {...props} />;
+>> = props => <GridContainer ColorBlock={ColorBlock1} {...props} />;
diff --git a/ui/design-tokens/src/Colors/ColorBlock1/index.ts b/ui/design-tokens/src/Colors/ColorBlock1/index.ts
@@ -0,0 +1 @@
+export * from './ColorBlock1';