From f19556f1d0e7565dfe42d5bb76f80a915c06bb62 Mon Sep 17 00:00:00 2001
From: Fabien Rassinier <frassinier@talend.com>
Date: Wed, 15 Jan 2020 00:16:47 +0100
Subject: [PATCH 1/2] feat(addon-docs): named colors with ColorPalette

---
 .../src/blocks/ColorPalette.stories.tsx       | 26 +++++++
 lib/components/src/blocks/ColorPalette.tsx    | 72 ++++++++++++-------
 2 files changed, 72 insertions(+), 26 deletions(-)

diff --git a/lib/components/src/blocks/ColorPalette.stories.tsx b/lib/components/src/blocks/ColorPalette.stories.tsx
index e09e42c91f02..f5a12b214aad 100644
--- 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
index e4deaaef8fa2..33fa6252528e 100644
--- 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 (
+      <>
+        <SwatchColors>{colors.map(color => renderSwatch(color))}</SwatchColors>
+        <SwatchLabels>{colors.map(color => renderSwatchLabel(color))}</SwatchLabels>
+      </>
+    );
+  }
+  return (
+    <>
+      <SwatchColors>{Object.values(colors).map(color => renderSwatch(color))}</SwatchColors>
+      <SwatchLabels>
+        {Object.keys(colors).map(color => renderSwatchLabel(color, colors[color]))}
+      </SwatchLabels>
+    </>
+  );
 }
 
 /**
@@ -124,28 +164,8 @@ 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>
+        <SwatchSpecimen>{renderSwatchSpecimen(colors)}</SwatchSpecimen>
       </Swatches>
     </Item>
   );

From d1223df9fb519bba49e52bfd6c9cf7493ce6ae69 Mon Sep 17 00:00:00 2001
From: Fabien Rassinier <frassinier@talend.com>
Date: Wed, 15 Jan 2020 17:56:48 +0100
Subject: [PATCH 2/2] feat(addon-docs): named colors with ColorPalette

---
 lib/components/src/blocks/ColorPalette.tsx | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/lib/components/src/blocks/ColorPalette.tsx b/lib/components/src/blocks/ColorPalette.tsx
index 33fa6252528e..246c0133fbb4 100644
--- a/lib/components/src/blocks/ColorPalette.tsx
+++ b/lib/components/src/blocks/ColorPalette.tsx
@@ -137,19 +137,19 @@ function renderSwatchLabel(color: string, colorDescription?: string) {
 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>
   );
 }
 
@@ -164,9 +164,7 @@ export const ColorItem: FunctionComponent<ColorProps> = ({ title, subtitle, colo
         <ItemTitle>{title}</ItemTitle>
         <ItemSubtitle>{subtitle}</ItemSubtitle>
       </ItemDescription>
-      <Swatches>
-        <SwatchSpecimen>{renderSwatchSpecimen(colors)}</SwatchSpecimen>
-      </Swatches>
+      <Swatches>{renderSwatchSpecimen(colors)}</Swatches>
     </Item>
   );
 };