feat: add helpscout color token

ccontrols · Sep 26, 2020 · 8331000 · 8331000
1 parent 460532d
commit 8331000
Show file tree

Hide file tree

Showing 6 changed files with 172 additions and 1 deletion.
diff --git a/examples/stories/src/tutorial/design/tokens/colors.mdx b/examples/stories/src/tutorial/design/tokens/colors.mdx
@@ -27,6 +27,7 @@ import {
   FinastraColorPalette,
   FishTankColorPalette,
   GovUKColorPalette,
+  HelpScoutColorPalette,
 } from '@component-controls/design-tokens';
 
 # Overview
@@ -870,3 +871,37 @@ import { GovUKColorPalette } from '@component-controls/design-tokens';
     },
   }}
 />
+
+## HelpScoutColor
+
+The [HelpScoutColor](/api/design-tokens-colors-helpscoutcolor--overview) component displays the color as a row, expanding on hover. Separate visualization (header) for primary color.
+
+Design inspired from [HelpScout](https://style.helpscout.com/visual-elements/#color).
+
+```
+import { HelpScoutColorPalette } from '@component-controls/design-tokens';
+
+<HelpScoutColorPalette
+  palette={{
+    lavender: { value: '#9FA6FF', name: '500', primary: true },
+    'lavender-100': { value: '#F9F9FF', name: '100' },
+    'lavender-200': { value: '#EBECFF', name: '200' },
+    'lavender-300': { value: '#D9DCFD', name: '300' },
+    'lavender-400': { value: '#B9BEFF', name: '400' },
+    'lavender-500': { value: '#9FA6FF', name: '500' },
+    'lavender-600': { value: '#818AEC', name: '600' },
+  }}
+/>
+```
+
+<HelpScoutColorPalette
+  palette={{
+    lavender: { value: '#9FA6FF', name: '500', primary: true },
+    'lavender-100': { value: '#F9F9FF', name: '100' },
+    'lavender-200': { value: '#EBECFF', name: '200' },
+    'lavender-300': { value: '#D9DCFD', name: '300' },
+    'lavender-400': { value: '#B9BEFF', name: '400' },
+    'lavender-500': { value: '#9FA6FF', name: '500' },
+    'lavender-600': { value: '#818AEC', name: '600' },
+  }}
+/>
diff --git a/ui/design-tokens/src/Colors/AntdVertColor/AntdVertColor.tsx b/ui/design-tokens/src/Colors/AntdVertColor/AntdVertColor.tsx
@@ -58,7 +58,6 @@ export const AntdVertColor: FC<ColorBlockProps> = ({ name, color, hover }) => {
             {name || hex}
           </div>
           <div
-            className="item-text"
             sx={{
               pointerEvents: 'none',
               ...(hover || hoverMe ? {} : { visibility: 'hidden', width: 0 }),

diff --git a/ui/design-tokens/src/Colors/HelpScoutColor/HelpScoutColor.stories.tsx b/ui/design-tokens/src/Colors/HelpScoutColor/HelpScoutColor.stories.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import { HelpScoutColor, HelpScoutColorPalette } from './HelpScoutColor';
+import { ColorProps } from '../../types';
+
+export default {
+  title: 'Design Tokens/Colors/HelpScoutColor',
+  component: HelpScoutColor,
+};
+
+export const overview = ({ name, color }: ColorProps) => (
+  <HelpScoutColor name={name} color={color} />
+);
+
+overview.controls = {
+  name: 'Lavender',
+  color: {
+    type: 'object',
+    value: {
+      value: { type: 'color', value: '#9FA6FF' },
+      name: '500',
+      primary: { type: 'boolean', value: true },
+    },
+  },
+};
+
+export const palette = () => (
+  <HelpScoutColorPalette
+    palette={{
+      lavender: { value: '#9FA6FF', name: '500', primary: true },
+      'lavender-100': { value: '#F9F9FF', name: '100' },
+      'lavender-200': { value: '#EBECFF', name: '200' },
+      'lavender-300': { value: '#D9DCFD', name: '300' },
+      'lavender-400': { value: '#B9BEFF', name: '400' },
+      'lavender-500': { value: '#9FA6FF', name: '500' },
+      'lavender-600': { value: '#818AEC', name: '600' },
+      'lavender-700': { value: '#6269C5', name: '700' },
+      'lavender-800': { value: '#404996', name: '800' },
+      'lavender-900': { value: '#232A5C', name: '900' },
+    }}
+  />
+);
diff --git a/ui/design-tokens/src/Colors/HelpScoutColor/HelpScoutColor.tsx b/ui/design-tokens/src/Colors/HelpScoutColor/HelpScoutColor.tsx
@@ -0,0 +1,94 @@
+/** @jsx jsx */
+import { FC } from 'react';
+import { jsx, Theme } from 'theme-ui';
+import { CopyContainer } from '@component-controls/components';
+import { colorToStr, mostReadable } from '../utils';
+import { ColorBlockProps, ColorValue } from '../../types';
+import { FlexContainerProps, FlexContainer } from '../../components';
+
+/**
+ * Color item displaying the color as a row, expanding on hover. Separate visualization (header) for primary color.
+ * Design inspired from [HelpScout](https://style.helpscout.com/visual-elements/#color).
+ */
+
+export const HelpScoutColor: FC<ColorBlockProps> = ({ name, color }) => {
+  const colorObj: ColorValue =
+    typeof color === 'string' ? { value: color } : color;
+  const { value: colorValue, primary, name: colorName } = colorObj;
+
+  const { hex } = colorToStr(colorValue);
+  const textColor = mostReadable(hex);
+
+  return (
+    <div sx={{ display: 'flex', flex: '1', width: 250 }}>
+      <CopyContainer value={hex} name={name} sxStyle={{ width: '100%' }}>
+        <div
+          sx={{
+            display: 'flex',
+            flexDirection: 'column',
+            bg: colorValue,
+            color: textColor,
+            height: primary ? 100 : 50,
+            justifyContent: primary ? 'space-between' : 'center',
+            fontSize: 0,
+            borderTopRightRadius: primary ? 6 : 0,
+            borderTopLeftRadius: primary ? 6 : 0,
+            transition: 'all .2s',
+            ':hover': {
+              mx: -2,
+              borderRadius: 3,
+              boxShadow: (t: Theme) => `0 2px 10px 3px ${t.colors?.shadow}`,
+            },
+          }}
+        >
+          {primary && (
+            <div sx={{ p: 3, fontSize: 1, fontWeight: 'heading' }}>
+              {name ? name.toUpperCase() : ''}
+            </div>
+          )}
+          <div
+            sx={{
+              px: 3,
+              display: 'flex',
+              height: 50,
+              flexDirection: 'row',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+            }}
+          >
+            <div
+              sx={{
+                mr: 4,
+              }}
+            >
+              {colorName}
+            </div>
+            <div
+              sx={{
+                pointerEvents: 'none',
+              }}
+            >
+              {hex}
+            </div>
+          </div>
+        </div>
+      </CopyContainer>
+    </div>
+  );
+};
+
+/**
+ *
+ * palette displayed with HelpScoutColor items
+ * using a css flex display direction column
+ */
+export const HelpScoutColorPalette: FC<Omit<
+  FlexContainerProps,
+  'children' | 'direction'
+>> = props => (
+  <FlexContainer direction="column" sx={{ width: 250 }} {...props}>
+    {({ name, value }) => (
+      <HelpScoutColor key={`color_item_${name}}`} name={name} color={value} />
+    )}
+  </FlexContainer>
+);
diff --git a/ui/design-tokens/src/Colors/HelpScoutColor/index.ts b/ui/design-tokens/src/Colors/HelpScoutColor/index.ts
@@ -0,0 +1 @@
+export * from './HelpScoutColor';
diff --git a/ui/design-tokens/src/Colors/index.ts b/ui/design-tokens/src/Colors/index.ts
@@ -16,3 +16,4 @@ export * from './ETradeColor';
 export * from './FinastraColor';
 export * from './FishTankColor';
 export * from './GovUKColor';
+export * from './HelpScoutColor';