fix: rename ColorSwatch

ccontrols · Sep 10, 2020 · 7a0d4fa · 7a0d4fa
1 parent f45c523
commit 7a0d4fa
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 21 deletions.
diff --git a/ui/design-tokens/src/ColorBlock/ColorBlock.stories.tsx b/ui/design-tokens/src/ColorBlock/ColorBlock.stories.tsx
diff --git a/ui/design-tokens/src/ColorSwatch/ColorBlock.stories.tsx b/ui/design-tokens/src/ColorSwatch/ColorBlock.stories.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { ColorSwatch, ColorBlockProps } from './ColorSwatch';
+
+export default {
+  title: 'Design Tokens/ColorSwatch',
+  component: ColorSwatch,
+};
+
+export const overview = ({ name, color }: ColorBlockProps) => (
+  <ColorSwatch name={name} color={color} />
+);
+
+overview.controls = {
+  name: { type: 'text' },
+  color: { type: 'color', value: '#fbce4a' },
+};
diff --git a/...sign-tokens/src/ColorBlock/ColorBlock.tsx → ...gn-tokens/src/ColorSwatch/ColorSwatch.tsx b/...sign-tokens/src/ColorBlock/ColorBlock.tsx → ...gn-tokens/src/ColorSwatch/ColorSwatch.tsx
@@ -1,19 +1,29 @@
 /** @jsx jsx */
 import { FC } from 'react';
 import { jsx, Box, Theme } from 'theme-ui';
-import { parseToRgb } from 'polished';
+import { parseToRgb, rgbToColorString } from 'polished';
 
 export interface ColorBlockProps {
   name?: string;
   color: string;
 }
 
-export const ColorBlock: FC<ColorBlockProps> = ({ name, color }) => {
-  const hex = color;
-  const rgb = parseToRgb(color);
+export const ColorSwatch: FC<ColorBlockProps> = ({ name, color }) => {
+  const colorStr = color.toLowerCase().startsWith('rgb')
+    ? rgbToColorString(parseToRgb(color))
+    : color;
+  const hex = colorStr.startsWith('#') ? colorStr : `#${colorStr}`;
+  const rgb = parseToRgb(hex);
   return (
     <Box sx={{ display: 'flex', flexDirection: 'row', width: '220px' }}>
-      <Box sx={{ bg: color, width: 64, height: 64 }}></Box>
+      <Box
+        sx={{
+          bg: color,
+          width: 64,
+          height: 64,
+          border: (t: Theme) => ` 1px solid  ${t.colors?.shadow}`,
+        }}
+      ></Box>
       <Box
         sx={{
           display: 'flex',
@@ -28,6 +38,7 @@ export const ColorBlock: FC<ColorBlockProps> = ({ name, color }) => {
           sx={{
             fontWeight: 'bold',
             borderBottom: (t: Theme) => ` 1px solid  ${t.colors?.shadow}`,
+            pb: 1,
           }}
         >
           {name || hex}

diff --git a/ui/design-tokens/src/ColorSwatch/index.ts b/ui/design-tokens/src/ColorSwatch/index.ts
@@ -0,0 +1 @@
+export * from './ColorSwatch';
diff --git a/ui/design-tokens/src/index.ts b/ui/design-tokens/src/index.ts
@@ -0,0 +1 @@
+export * from './ColorSwatch';