From 0be83f2169b0b6d9b78495e7592a267c5aa47261 Mon Sep 17 00:00:00 2001
From: atanasster <atanasster@gmail.com>
Date: Fri, 25 Sep 2020 18:46:57 -0400
Subject: [PATCH] feat: add fishtank color token

---
 .../src/tutorial/design/tokens/colors.mdx     | 44 ++++++++++++
 .../FishTankColor/FishTankColor.stories.tsx   | 53 ++++++++++++++
 .../Colors/FishTankColor/FishTankColor.tsx    | 72 +++++++++++++++++++
 .../src/Colors/FishTankColor/index.ts         |  1 +
 ui/design-tokens/src/Colors/index.ts          |  1 +
 5 files changed, 171 insertions(+)
 create mode 100644 ui/design-tokens/src/Colors/FishTankColor/FishTankColor.stories.tsx
 create mode 100644 ui/design-tokens/src/Colors/FishTankColor/FishTankColor.tsx
 create mode 100644 ui/design-tokens/src/Colors/FishTankColor/index.ts

diff --git a/examples/stories/src/tutorial/design/tokens/colors.mdx b/examples/stories/src/tutorial/design/tokens/colors.mdx
index e688de686..8065638aa 100644
--- a/examples/stories/src/tutorial/design/tokens/colors.mdx
+++ b/examples/stories/src/tutorial/design/tokens/colors.mdx
@@ -25,6 +25,7 @@ import {
   DuetColorPalette,
   ETradeColorPalette,
   FinestraColorPalette,
+  FishTankColorPalette,
 } from '@component-controls/design-tokens';
 
 # Overview
@@ -773,3 +774,46 @@ import { FinestraColorPalette } from '@component-controls/design-tokens';
   }}
 />
 
+## FishTankColor
+
+The [FishTankColor](/api/design-tokens-colors-fishtankcolor--overview) component displays the color as a row with the sass var name and hex color.
+
+Design inspired from Blooomberg BNA's [FishTank](https://fishtank.bna.com/colors).
+
+```
+import { FishTankColorPalette } from '@component-controls/design-tokens';
+
+<FishTankColorPalette
+  palette={{
+    'highlight-1': {
+      sass: '$color-highlight-1',
+      value: '#FFF8B0',
+    },
+    'highlight-2': {
+      sass: '$color-highlight-2',
+      value: '#E3F7FF',
+    },
+    'highlight-3': {
+      sass: '$color-highlight-3',
+      value: '#E0FFE0',
+    },
+  }}
+/>
+```
+
+<FishTankColorPalette
+  palette={{
+    'highlight-1': {
+      sass: '$color-highlight-1',
+      value: '#FFF8B0',
+    },
+    'highlight-2': {
+      sass: '$color-highlight-2',
+      value: '#E3F7FF',
+    },
+    'highlight-3': {
+      sass: '$color-highlight-3',
+      value: '#E0FFE0',
+    },
+  }}
+/>
diff --git a/ui/design-tokens/src/Colors/FishTankColor/FishTankColor.stories.tsx b/ui/design-tokens/src/Colors/FishTankColor/FishTankColor.stories.tsx
new file mode 100644
index 000000000..77c1200b8
--- /dev/null
+++ b/ui/design-tokens/src/Colors/FishTankColor/FishTankColor.stories.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import { FishTankColor, FishTankColorPalette } from './FishTankColor';
+import { ColorProps } from '../types';
+
+export default {
+  title: 'Design Tokens/Colors/FishTankColor',
+  component: FishTankColor,
+};
+
+export const overview = ({ name, color }: ColorProps) => (
+  <FishTankColor name={name} color={color} />
+);
+
+overview.controls = {
+  color: {
+    type: 'object',
+    value: {
+      value: { type: 'color', value: '#0A7DAF' },
+      sass: { type: 'color', value: '$color-selected-darkest' },
+    },
+  },
+};
+
+export const palette = () => (
+  <FishTankColorPalette
+    palette={{
+      'highlight-1': {
+        sass: '$color-highlight-1',
+        value: '#FFF8B0',
+      },
+      'highlight-2': {
+        sass: '$color-highlight-2',
+        value: '#E3F7FF',
+      },
+      'highlight-3': {
+        sass: '$color-highlight-3',
+        value: '#E0FFE0',
+      },
+      action: {
+        sass: '$color-action',
+        value: '#3DA774',
+      },
+      warning: {
+        sass: '$color-warning',
+        value: '#FFB511',
+      },
+      error: {
+        sass: '$color-error',
+        value: '#E1483E',
+      },
+    }}
+  />
+);
diff --git a/ui/design-tokens/src/Colors/FishTankColor/FishTankColor.tsx b/ui/design-tokens/src/Colors/FishTankColor/FishTankColor.tsx
new file mode 100644
index 000000000..9209f11ca
--- /dev/null
+++ b/ui/design-tokens/src/Colors/FishTankColor/FishTankColor.tsx
@@ -0,0 +1,72 @@
+/** @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 '../FlexContainer';
+
+/**
+ * Color item displaying the color as a row with the sass var name and hex color.
+ * Design inspired from Blooomberg BNA's [FishTank](https://fishtank.bna.com/colors).
+ */
+
+export const FishTankColor: FC<ColorBlockProps> = ({ name, color }) => {
+  const colorObj: ColorValue =
+    typeof color === 'string' ? { value: color } : color;
+  const { value: colorValue, sass } = colorObj;
+
+  const { hex } = colorToStr(colorValue);
+  const textColor = mostReadable(hex);
+  return (
+    <div sx={{ display: 'flex', flex: '1' }}>
+      <CopyContainer value={hex} name={name} sxStyle={{ width: '100%' }}>
+        <div
+          sx={{
+            display: 'flex',
+            flexDirection: 'row',
+            bg: colorValue,
+            color: textColor,
+            height: 50,
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            fontSize: 1,
+            transition: 'all .2s',
+            px: 3,
+          }}
+        >
+          <div>{sass}</div>
+          <div
+            sx={{
+              fontSize: 2,
+            }}
+          >
+            {hex.toUpperCase()}
+          </div>
+        </div>
+      </CopyContainer>
+    </div>
+  );
+};
+
+/**
+ *
+ * palette displayed with FishTankColor items
+ * using a css flex display direction column
+ */
+export const FishTankColorPalette: FC<Omit<
+  FlexContainerProps,
+  'children' | 'direction'
+>> = props => (
+  <FlexContainer
+    direction="column"
+    sx={{
+      boxShadow: (t: Theme) => `0 2px 10px 3px ${t.colors?.shadow}`,
+    }}
+    {...props}
+  >
+    {({ name, value }) => (
+      <FishTankColor key={`color_item_${name}}`} name={name} color={value} />
+    )}
+  </FlexContainer>
+);
diff --git a/ui/design-tokens/src/Colors/FishTankColor/index.ts b/ui/design-tokens/src/Colors/FishTankColor/index.ts
new file mode 100644
index 000000000..95265dd48
--- /dev/null
+++ b/ui/design-tokens/src/Colors/FishTankColor/index.ts
@@ -0,0 +1 @@
+export * from './FishTankColor';
diff --git a/ui/design-tokens/src/Colors/index.ts b/ui/design-tokens/src/Colors/index.ts
index 787646a38..924cab5f1 100644
--- a/ui/design-tokens/src/Colors/index.ts
+++ b/ui/design-tokens/src/Colors/index.ts
@@ -14,3 +14,4 @@ export * from './CometColor';
 export * from './DuetColor';
 export * from './ETradeColor';
 export * from './FinestraColor';
+export * from './FishTankColor';