feat: added antd horz/vert color items

ccontrols · Sep 17, 2020 · ac450f5 · ac450f5
1 parent 8d8fac9
commit ac450f5
Show file tree

Hide file tree

Showing 24 changed files with 620 additions and 32 deletions.
diff --git a/examples/gatsby/.config/buildtime.js b/examples/gatsby/.config/buildtime.js
@@ -10,6 +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/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,6 +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/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
@@ -0,0 +1,127 @@
+---
+title: Design/Design tokens
+route: /tutorial/design/design-tokens
+type: tutorial
+tags:
+  - design
+  - colors
+  - typography
+order: 0
+author: atanasster
+---
+import { ColorSwatchPalette, ColorItemHorzPalette, ColorItemVertPalette } 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.
+
+### ColorSwatch
+
+The [ColorSwatch](/api/design-tokens-colorswatch--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 { ColorSwatchPalette } from '@component-controls/design-tokens';
+
+<ColorSwatchPalette
+  palette={{
+    'color-1': '#fbce4a',
+    'color-2': '#fcfbe8',
+    'color-3': '#fff4d5',
+    'color-4': '#f6cab7',
+    'color-5': '#ec96ad',
+    'color-6': '#ca589d',
+  }}
+/>
+```
+
+<ColorSwatchPalette
+  palette={{
+    'color-1': '#fbce4a',
+    'color-2': '#fcfbe8',
+    'color-3': '#fff4d5',
+    'color-4': '#f6cab7',
+    'color-5': '#ec96ad',
+    'color-6': '#ca589d',
+  }}
+/>
+
+### ColorItemHorz
+
+The [ColorItemHorz](/api/design-tokens-coloritemhorz--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 { ColorItemHorzPalette } from '@component-controls/design-tokens';
+
+<ColorItemHorzPalette
+  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',
+  }}
+/>
+```
+<ColorItemHorzPalette
+  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',
+  }}
+/>
+
+### ColorItemVert
+
+The [ColorItemVert](/api/design-tokens-coloritemvert--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 { ColorItemVertPalette } from '@component-controls/design-tokens';
+
+<ColorItemVertPalette
+  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',
+  }}
+/>
+```
+<ColorItemVertPalette
+  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',
+  }}
+/>
diff --git a/ui/components/src/CopyContainer/CopyContainer.stories.tsx b/ui/components/src/CopyContainer/CopyContainer.stories.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { CopyContainer } from '.';
+
+export default {
+  title: 'Components/CopyContainer',
+  component: CopyContainer,
+};
+
+export const overview = () => (
+  <CopyContainer value="some text">
+    <div style={{ border: '1px solid black', padding: '5px' }}>
+      <p>some text.</p>
+      <p>click to copy</p>
+    </div>
+  </CopyContainer>
+);
diff --git a/...okens/src/CopyContainer/CopyContainer.tsx → ...nents/src/CopyContainer/CopyContainer.tsx b/...okens/src/CopyContainer/CopyContainer.tsx → ...nents/src/CopyContainer/CopyContainer.tsx
@@ -1,16 +1,29 @@
 /** @jsx jsx */
 import { FC, useState } from 'react';
-import { jsx, Box } from 'theme-ui';
+import { jsx, Box, SxStyleProp } from 'theme-ui';
 import copy from 'copy-to-clipboard';
-import { Popover } from '@component-controls/components';
 import { CheckIcon } from '@primer/octicons-react';
+import { Popover } from '../Popover';
 
 export interface CopyContainerProps {
+  /** name of the property */
   name?: string;
+  /**
+   * 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,
@@ -20,6 +33,8 @@ export const CopyContainer: FC<CopyContainerProps> = ({
     <Popover
       sx={{
         cursor: 'pointer',
+        position: 'relative',
+        ...sxStyle,
       }}
       trigger="click"
       followCursor={true}

diff --git a/ui/design-tokens/src/CopyContainer/index.ts → ui/components/src/CopyContainer/index.ts b/ui/design-tokens/src/CopyContainer/index.ts → ui/components/src/CopyContainer/index.ts
diff --git a/ui/components/src/ThemeContext/theme.ts b/ui/components/src/ThemeContext/theme.ts
@@ -751,7 +751,7 @@ export const theme: ControlsTheme = {
       minHeight: '100%',
       minWidth: 'unset',
       pr: 4,
-      ':hover {': {
+      ':hover': {
         '& > .hoverbox-text': {
           color: 'mutedText',
         },

diff --git a/ui/components/src/index.ts b/ui/components/src/index.ts
@@ -3,6 +3,7 @@ export * from './ActionContainer';
 export * from './BlockContainer';
 export * from './Collapsible';
 export * from './ColorMode';
+export * from './CopyContainer';
 export * from './ExternalLink';
 export * from './Header';
 export * from './HoverBox';

diff --git a/ui/design-tokens/package.json b/ui/design-tokens/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@component-controls/design-tokens",
-  "version": "1.25.1",
+  "version": "1.25.2",
   "description": "Component controls design tokens components.",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -36,7 +36,6 @@
     "@component-controls/store": "^1.25.1",
     "@primer/octicons-react": "^10.0.0",
     "color-parse": "^1.3.8",
-    "copy-to-clipboard": "^3.2.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "polished": "^3.4.4",

diff --git a/ui/design-tokens/src/Colors/ColorItemHorz/ColorItemHorz.stories.tsx b/ui/design-tokens/src/Colors/ColorItemHorz/ColorItemHorz.stories.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import { ColorItemHorz, ColorItemHorzPalette } from './ColorItemHorz';
+import { ColorProps } from '../types';
+
+export default {
+  title: 'Design Tokens/ColorItemHorz',
+  component: ColorItemHorz,
+};
+
+export const overview = ({ name, color }: ColorProps) => (
+  <ColorItemHorz name={name} color={color} />
+);
+
+overview.controls = {
+  name: { type: 'text' },
+  color: { type: 'color', value: '#cf1322' },
+};
+
+export const name = () => <ColorItemHorz name="brand" color="#e95b54" />;
+
+export const rgb = () => <ColorItemHorz name="text" color="rgb(0, 0, 0)" />;
+
+export const rgba = () => (
+  <ColorItemHorz name="shadow" color="rgba(0, 0, 0, 0.5)" />
+);
+
+export const hsl = () => (
+  <ColorItemHorz name="accent" color="hsl(12, 10%, 50%)" />
+);
+
+export const hsla = () => (
+  <ColorItemHorz name="accent" color="hsl(12, 10%, 50%, .6)" />
+);
+
+export const palette = () => (
+  <ColorItemHorzPalette
+    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',
+    }}
+  />
+);
diff --git a/ui/design-tokens/src/Colors/ColorItemHorz/ColorItemHorz.tsx b/ui/design-tokens/src/Colors/ColorItemHorz/ColorItemHorz.tsx
@@ -0,0 +1,75 @@
+/** @jsx jsx */
+import { FC, useState } from 'react';
+import { jsx, Box } from 'theme-ui';
+import { CopyContainer } from '@component-controls/components';
+import { readableColor } from 'polished';
+import { colorToStr } from '../utils';
+import { ColorProps } from '../types';
+import { FlexContainerProps, FlexContainer } from '../FlexContainer';
+
+/**
+ * Color item displaying the color as a small block, expanding on hover.
+ * Design inspired from [And Design](https://ant.design/docs/spec/colors).
+ */
+
+export const ColorItemHorz: FC<ColorProps> = ({ name, color, hover }) => {
+  const [hoverMe, setHoverMe] = useState(false);
+  const { hex, rgba } = colorToStr(color);
+  const textColor = readableColor(hex, '#000', '#fff', true);
+  return (
+    <Box sx={{ display: 'flex', flex: '1', width: 250 }}>
+      <CopyContainer value={hex} name={name} sxStyle={{ width: '100%' }}>
+        <Box
+          onMouseOver={() => setHoverMe(true)}
+          onMouseOut={() => setHoverMe(false)}
+          sx={{
+            display: 'flex',
+            flexDirection: 'row',
+            bg: color,
+            color: textColor,
+            height: 44,
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            fontSize: 0,
+            transition: 'all .2s',
+            px: 3,
+            ':hover': {
+              mr: -3,
+            },
+          }}
+        >
+          <Box
+            sx={{
+              fontWeight: 'bold',
+              mr: 4,
+            }}
+          >
+            {name || hex}
+          </Box>
+          <Box
+            className="item-text"
+            sx={hover || hoverMe ? undefined : { visibility: 'hidden' }}
+          >
+            {!name
+              ? `${rgba.red}, ${rgba.green}, ${rgba.blue}${
+                  rgba.alpha !== 1 ? `, ${rgba.alpha}` : ''
+                }`
+              : hex}
+          </Box>
+        </Box>
+      </CopyContainer>
+    </Box>
+  );
+};
+
+/**
+ *
+ * palette displayed with ColorItemHorz items
+ * using a css flex display direction column
+ */
+export const ColorItemHorzPalette: FC<Omit<
+  FlexContainerProps,
+  'ColorBlock' | 'direction'
+>> = props => (
+  <FlexContainer ColorBlock={ColorItemHorz} direction="column" {...props} />
+);
diff --git a/ui/design-tokens/src/Colors/ColorItemHorz/index.ts b/ui/design-tokens/src/Colors/ColorItemHorz/index.ts
@@ -0,0 +1 @@
+export * from './ColorItemHorz';