feat(addon-docs): named colors with ColorPalette (#9453)

feat(addon-docs): named colors with ColorPalette
storybookjs · Jan 20, 2020 · 9fe650b · 9fe650b
2 parents 015690c + d1223df
commit 9fe650b
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 28 deletions.
diff --git a/lib/components/src/blocks/ColorPalette.stories.tsx b/lib/components/src/blocks/ColorPalette.stories.tsx
@@ -27,3 +27,29 @@ export const defaultStyle = () => (
  />
  </ColorPalette>
 );
+
+export const NamedColors = () => (
+ <ColorPalette>
+ <ColorItem
+ title="theme.color.greyscale"
+ subtitle="Some of the greys"
+ colors={{ White: '#FFFFFF', Alabaster: '#F8F8F8', Concrete: '#F3F3F3' }}
+ />
+ <ColorItem
+ title="theme.color.primary"
+ subtitle="Coral"
+ colors={{ WildWatermelon: '#FF4785' }}
+ />
+ <ColorItem title="theme.color.secondary" subtitle="Ocean" colors={{ DodgerBlue: '#1EA7FD' }} />
+ <ColorItem
+ title="theme.color.positive"
+ subtitle="Green"
+ colors={{
+ Apple: 'rgba(102,191,60,1)',
+ Apple80: 'rgba(102,191,60,.8)',
+ Apple60: 'rgba(102,191,60,.6)',
+ Apple30: 'rgba(102,191,60,.3)',
+ }}
+ />
+ </ColorPalette>
+);
diff --git a/lib/components/src/blocks/ColorPalette.tsx b/lib/components/src/blocks/ColorPalette.tsx
@@ -35,10 +35,8 @@ const SwatchLabel = styled.div(({ theme }) => ({
  ? transparentize(0.4, theme.color.defaultText)
  : transparentize(0.6, theme.color.defaultText),
 
- '> div': {
- display: 'inline-block',
- overflow: 'hidden',
- maxWidth: '100%',
+ small: {
+ display: 'block',
  },
 }));
 
@@ -107,10 +105,52 @@ const List = styled.div(({ theme }) => ({
  flexDirection: 'column',
 }));
 
+type Colors = string[] | { [key: string]: string };
+
 interface ColorProps {
  title: string;
  subtitle: string;
- colors: string[];
+ colors: Colors;
+}
+
+function renderSwatch(color: string) {
+ return (
+ <Swatch
+ key={color}
+ title={color}
+ style={{
+ backgroundColor: color,
+ }}
+ />
+ );
+}
+
+function renderSwatchLabel(color: string, colorDescription?: string) {
+ return (
+ <SwatchLabel key={color} title={color}>
+ {color}
+ {colorDescription && <small>{colorDescription}</small>}
+ </SwatchLabel>
+ );
+}
+
+function renderSwatchSpecimen(colors: Colors) {
+ if (Array.isArray(colors)) {
+ return (
+ <SwatchSpecimen>
+ <SwatchColors>{colors.map(color => renderSwatch(color))}</SwatchColors>
+ <SwatchLabels>{colors.map(color => renderSwatchLabel(color))}</SwatchLabels>
+ </SwatchSpecimen>
+ );
+ }
+ return (
+ <SwatchSpecimen>
+ <SwatchColors>{Object.values(colors).map(color => renderSwatch(color))}</SwatchColors>
+ <SwatchLabels>
+ {Object.keys(colors).map(color => renderSwatchLabel(color, colors[color]))}
+ </SwatchLabels>
+ </SwatchSpecimen>
+ );
 }
 
 /**
@@ -124,29 +164,7 @@ export const ColorItem: FunctionComponent<ColorProps> = ({ title, subtitle, colo
  <ItemTitle>{title}</ItemTitle>
  <ItemSubtitle>{subtitle}</ItemSubtitle>
  </ItemDescription>
-
- <Swatches>
- <SwatchSpecimen>
- <SwatchColors>
- {colors.map(color => (
- <Swatch
- key={color}
- title={color}
- style={{
- backgroundColor: color,
- }}
- />
- ))}
- </SwatchColors>
- <SwatchLabels>
- {colors.map(color => (
- <SwatchLabel key={color} title={color}>
- <div>{color}</div>
- </SwatchLabel>
- ))}
- </SwatchLabels>
- </SwatchSpecimen>
- </Swatches>
+ <Swatches>{renderSwatchSpecimen(colors)}</Swatches>
  </Item>
  );
 };