feat: atlassian color block

ccontrols · Sep 20, 2020 · de32d50 · de32d50
1 parent 9715cbf
commit de32d50
Show file tree

Hide file tree

Showing 5 changed files with 229 additions and 0 deletions.
diff --git a/examples/stories/src/tutorial/design/tokens/colors.mdx b/examples/stories/src/tutorial/design/tokens/colors.mdx
@@ -144,4 +144,34 @@ import { ColorBlock4Palette } from '@component-controls/design-tokens';
     Border: { value: '#dfe0e1', name: 'Neutral60' },
     Black: { value: '#000000', name: 'Black40' },
   }}
+/>
+
+## ColorBlock5
+
+The [ColorBlock5](/api/design-tokens-colors-colorblock5--overview) component displays a color block with [AA](https://www.w3.org/TR/WCAG/) color contrast tests.
+
+```
+import { ColorBlock5Palette } from '@component-controls/design-tokens';
+
+<ColorBlock5Palette
+  palette={{
+    'Poppy surprise': { value: '#FF5630', name: 'R300' },
+    'Golden state': { value: '#FFAB00', name: 'Y300' },
+    'Fine pine': { value: '#36B37E', name: 'G300' },
+    Tamarama: { value: '#00B8D9', name: 'T300' },
+    "Da' juice": { value: '#6554C0', name: 'P300' },
+    Critical: { value: '#f94d32', name: 'Red400' },
+  }}
+/>
+```
+
+<ColorBlock5Palette
+  palette={{
+    'Poppy surprise': { value: '#FF5630', name: 'R300' },
+    'Golden state': { value: '#FFAB00', name: 'Y300' },
+    'Fine pine': { value: '#36B37E', name: 'G300' },
+    Tamarama: { value: '#00B8D9', name: 'T300' },
+    "Da' juice": { value: '#6554C0', name: 'P300' },
+    Critical: { value: '#f94d32', name: 'Red400' },
+  }}
 />
diff --git a/ui/design-tokens/src/Colors/ColorBlock5/ColorBlock5.stories.tsx b/ui/design-tokens/src/Colors/ColorBlock5/ColorBlock5.stories.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import { ColorBlock5, ColorBlock5Palette } from './ColorBlock5';
+import { ColorProps } from '../types';
+
+export default {
+  title: 'Design Tokens/Colors/ColorBlock5',
+  component: ColorBlock5,
+};
+
+export const overview = ({ name, color }: ColorProps) => (
+  <ColorBlock5 name={name} color={color} />
+);
+
+overview.controls = {
+  name: { type: 'text', value: 'Brand' },
+  color: {
+    type: 'object',
+    value: {
+      value: { type: 'color', value: '#2270ee' },
+      name: { type: 'text', value: 'Blue400' },
+    },
+  },
+};
+
+export const name = () => (
+  <ColorBlock5 name="Critical" color={{ name: 'brand', value: '#f94d32' }} />
+);
+
+export const rgb = () => <ColorBlock5 name="text" color="rgb(0, 0, 0)" />;
+
+export const rgba = () => (
+  <ColorBlock5 name="shadow" color="rgba(0, 0, 0, 0.1)" />
+);
+
+export const hsl = () => (
+  <ColorBlock5 name="accent" color="hsl(12, 10%, 50%)" />
+);
+
+export const hsla = () => (
+  <ColorBlock5 name="accent" color="hsl(12, 10%, 50%, .3)" />
+);
+
+export const palette = () => (
+  <ColorBlock5Palette
+    palette={{
+      'Poppy surprise': { value: '#FF5630', name: 'R300' },
+      'Golden state': { value: '#FFAB00', name: 'Y300' },
+      'Fine pine': { value: '#36B37E', name: 'G300' },
+      Tamarama: { value: '#00B8D9', name: 'T300' },
+      "Da' juice": { value: '#6554C0', name: 'P300' },
+      Critical: { value: '#f94d32', name: 'Red400' },
+    }}
+  />
+);
diff --git a/ui/design-tokens/src/Colors/ColorBlock5/ColorBlock5.tsx b/ui/design-tokens/src/Colors/ColorBlock5/ColorBlock5.tsx
@@ -0,0 +1,143 @@
+/** @jsx jsx */
+import { FC } from 'react';
+import { jsx, Box, SxProps } from 'theme-ui';
+import { CopyContainer } from '@component-controls/components';
+import tinycolor from 'tinycolor2';
+import { colorToStr } from '../utils';
+import { ColorProps } from '../types';
+import { GridContainerProps, GridContainer } from '../GridContainer';
+
+export type ColorBlock5Props = { sx?: SxProps } & ColorProps;
+
+const ContrastTest: FC<{
+  bg: string;
+  color: string;
+  size: 'small' | 'large';
+}> = ({ bg, color, size }) => {
+  const pass = tinycolor.isReadable(bg, color, {
+    level: 'AA',
+    size,
+  }); //false
+  return (
+    <Box
+      sx={{
+        p: 2,
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+      }}
+    >
+      <span sx={{ color, fontSize: size === 'large' ? '18px' : '14px' }}>
+        A
+      </span>
+      <span
+        sx={{
+          bg: 'black',
+          color: 'white',
+          fontSize: '10px',
+          borderRadius: '10px',
+          px: 1,
+        }}
+      >
+        {pass ? 'PASS' : 'FAIL'}
+      </span>
+    </Box>
+  );
+};
+/**
+ * Color item displaying the color as a block with [AA](https://www.w3.org/TR/WCAG/) color contrast tests.
+ * Design inspired from [Atlassian Design System](https://atlassian.design/foundations/color).
+ */
+export const ColorBlock5: FC<ColorBlock5Props> = ({ name, color, sx }) => {
+  const colorValue = typeof color === 'string' ? color : color.value;
+  const { hex, rgba } = colorToStr(colorValue);
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column', minWidth: 180 }}>
+      <CopyContainer value={hex} name={name}>
+        <Box
+          sx={{
+            bg: colorValue,
+            height: 90,
+            position: 'relative',
+          }}
+        >
+          <Box
+            sx={{
+              position: 'absolute',
+              left: 10,
+              bottom: 0,
+              right: 10,
+              display: 'flex',
+              flexDirection: 'row',
+              alignItems: 'flex-end',
+              justifyContent: 'center',
+            }}
+          >
+            <ContrastTest bg={colorValue} color="#000" size="large" />
+            <ContrastTest bg={colorValue} color="#000" size="small" />
+            <ContrastTest bg={colorValue} color="#fff" size="large" />
+            <ContrastTest bg={colorValue} color="#fff" size="small" />
+          </Box>
+        </Box>
+      </CopyContainer>
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          lineHeight: '16px',
+          bg: 'muted',
+          p: 3,
+          fontSize: 1,
+          ...sx,
+        }}
+      >
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'column',
+          }}
+        >
+          <Box>NAME</Box>
+          <Box sx={{ pt: 1, pb: 3 }}>
+            {`${typeof color !== 'string' ? `${color.name} - ` : ''} ${name ||
+              hex}`}
+          </Box>
+        </Box>
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+          }}
+        >
+          <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+            <div>HEX</div>
+            <div>{hex}</div>
+          </Box>
+          <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+            <div>RGB</div>
+            <div>{`${rgba.r}, ${rgba.g}, ${rgba.b}${
+              rgba.a !== 1 ? `, ${rgba.a}` : ''
+            }`}</div>
+          </Box>
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+/**
+ *
+ * palette displayed with ColorBlock4 items
+ * using a css grid for the dsplay
+ */
+export const ColorBlock5Palette: FC<Omit<
+  GridContainerProps,
+  'children'
+>> = props => (
+  <GridContainer {...props}>
+    {({ name, value }) => (
+      <ColorBlock5 key={`color_item_${name}}`} name={name} color={value} />
+    )}
+  </GridContainer>
+);
diff --git a/ui/design-tokens/src/Colors/ColorBlock5/index.ts b/ui/design-tokens/src/Colors/ColorBlock5/index.ts
@@ -0,0 +1 @@
+export * from './ColorBlock5';
diff --git a/ui/design-tokens/src/Colors/index.ts b/ui/design-tokens/src/Colors/index.ts
@@ -2,3 +2,4 @@ export * from './ColorBlock1';
 export * from './ColorBlock2';
 export * from './ColorBlock3';
 export * from './ColorBlock4';
+export * from './ColorBlock5';