fix: changed pattern in the background and updated examples of usage

abue9 · Jul 8, 2021 · 2da73c2 · 2da73c2
1 parent 310f9e6
commit 2da73c2
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 28 deletions.
diff --git a/examples/official-storybook/stories/addon-docs/colorpalette.stories.mdx b/examples/official-storybook/stories/addon-docs/colorpalette.stories.mdx
@@ -19,5 +19,6 @@ import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs';
       Apple60: 'rgba(102,191,60,.6)',
       Apple30: 'rgba(102,191,60,.3)',
     }}
+    isTransparent
   />
 </ColorPalette>
diff --git a/lib/components/src/Colors/colorpalette.stories.mdx b/lib/components/src/Colors/colorpalette.stories.mdx
@@ -15,7 +15,7 @@ Dark theme Colors
 <ColorPalette>
   {Object.entries(convert(themes.dark).color).map(([k, v]) => {
     if (typeof v === 'string' && (v.match(/^#/) || v.match(/^rgb/) || k.match(/color/i))) {
-      return <ColorItem key={k} title={k} colors={{ [k]: v }} />;
+      return <ColorItem key={k} title={k} colors={{ [k]: v }} isTransparent />;
     } else if (typeof v === 'object') {
       return (
         <ColorItem
@@ -29,6 +29,7 @@ Dark theme Colors
                 : acc,
             {}
           )}
+          isTransparent
         />
       );
     }
@@ -49,6 +50,7 @@ Dark theme Backgrounds
           key={k}
           title={k}
           colors={{ [k]: v }}
+          isTransparent
         />
       );
     } else if (typeof v === 'object') {
@@ -58,6 +60,7 @@ Dark theme Backgrounds
           key={k}
           title={k}
           colors={colors}
+          isTransparent
         />
       );
     }
@@ -72,7 +75,7 @@ Light theme Colors
 <ColorPalette>
   {Object.entries(convert(themes.light).color).map(([k, v]) => {
     if (typeof v === 'string' && (v.match(/^#/) || v.match(/^rgb/) || k.match(/color/i))) {
-      return <ColorItem key={k} title={k} colors={{ [k]: v }} />;
+      return <ColorItem key={k} title={k} colors={{ [k]: v }} isTransparent/>;
     } else if (typeof v === 'object') {
       return (
         <ColorItem
@@ -86,6 +89,7 @@ Light theme Colors
                 : acc,
             {}
           )}
+          isTransparent
         />
       );
     }
@@ -106,6 +110,7 @@ Light theme Backgrounds
           key={k}
           title={k}
           colors={{ [k]: v }}
+          isTransparent
         />
       );
     } else if (typeof v === 'object') {
@@ -115,6 +120,7 @@ Light theme Backgrounds
           key={k}
           title={k}
           colors={colors}
+          isTransparent
         />
       );
     }

diff --git a/lib/components/src/blocks/ColorPalette.stories.tsx b/lib/components/src/blocks/ColorPalette.stories.tsx
@@ -24,6 +24,7 @@ export const defaultStyle = () => (
         'rgba(102,191,60,.6)',
         'rgba(102,191,60,.3)',
       ]}
+      isTransparent
     />
     <ColorItem
       title="gradient"
@@ -55,6 +56,7 @@ export const NamedColors = () => (
         Apple60: 'rgba(102,191,60,.6)',
         Apple30: 'rgba(102,191,60,.3)',
       }}
+      isTransparent
     />
     <ColorItem
       title="gradient"

diff --git a/lib/components/src/blocks/ColorPalette.tsx b/lib/components/src/blocks/ColorPalette.tsx
@@ -55,29 +55,27 @@ const SwatchLabels = styled.div({
 
 interface SwatchProps {
   background: string;
+  isTransparent?: boolean;
 }
 
-const Swatch = styled.div<SwatchProps>(({ background }) => ({
+const Swatch = styled.div<SwatchProps>(({ background, isTransparent }) => ({
   position: 'relative',
   flex: 1,
-  backgroundColor: 'white',
-  backgroundImage: `
-  linear-gradient(45deg, #ccc 25%, transparent 25%),
-  linear-gradient(-45deg, #ccc 25%, transparent 25%),
-  linear-gradient(45deg, transparent 75%, #ccc 75%),
-  linear-gradient(-45deg, transparent 75%, #ccc 75%)`,
-  backgroundSize: '20px 20px',
-  backgroundPosition: '0 0, 0 10px, 10px -10px, -10px 0',
-
-  '&::before': {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    width: '100%',
-    height: '100%',
-    background,
-    content: '""',
-  },
+
+  ...(isTransparent && {
+    backgroundColor: 'white',
+    backgroundImage: `repeating-linear-gradient(-45deg, #ccc, #ccc 1px, #fff 1px, #fff 16px)`,
+
+    '&::before': {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      width: '100%',
+      height: '100%',
+      background,
+      content: '""',
+    },
+  }),
 }));
 
 const SwatchColors = styled.div(({ theme }) => ({
@@ -142,10 +140,18 @@ interface ColorProps {
   title: string;
   subtitle: string;
   colors: Colors;
+  isTransparent?: boolean;
 }
 
-function renderSwatch(color: string, index: number) {
-  return <Swatch key={`${color}-${index}`} title={color} background={color} />;
+function renderSwatch(color: string, index: number, isTransparent: boolean) {
+  return (
+    <Swatch
+      key={`${color}-${index}`}
+      title={color}
+      background={color}
+      isTransparent={isTransparent}
+    />
+  );
 }
 
 function renderSwatchLabel(color: string, index: number, colorDescription?: string) {
@@ -159,19 +165,21 @@ function renderSwatchLabel(color: string, index: number, colorDescription?: stri
   );
 }
 
-function renderSwatchSpecimen(colors: Colors) {
+function renderSwatchSpecimen(colors: Colors, isTransparent: boolean) {
   if (Array.isArray(colors)) {
     return (
       <SwatchSpecimen>
-        <SwatchColors>{colors.map((color, index) => renderSwatch(color, index))}</SwatchColors>
+        <SwatchColors>
+          {colors.map((color, index) => renderSwatch(color, index, isTransparent))}
+        </SwatchColors>
         <SwatchLabels>{colors.map((color, index) => renderSwatchLabel(color, index))}</SwatchLabels>
       </SwatchSpecimen>
     );
   }
   return (
     <SwatchSpecimen>
       <SwatchColors>
-        {Object.values(colors).map((color, index) => renderSwatch(color, index))}
+        {Object.values(colors).map((color, index) => renderSwatch(color, index, isTransparent))}
       </SwatchColors>
       <SwatchLabels>
         {Object.keys(colors).map((color, index) => renderSwatchLabel(color, index, colors[color]))}
@@ -184,14 +192,19 @@ function renderSwatchSpecimen(colors: Colors) {
  * A single color row your styleguide showing title, subtitle and one or more colors, used
  * as a child of `ColorPalette`.
  */
-export const ColorItem: FunctionComponent<ColorProps> = ({ title, subtitle, colors }) => {
+export const ColorItem: FunctionComponent<ColorProps> = ({
+  title,
+  subtitle,
+  colors,
+  isTransparent = false,
+}) => {
   return (
     <Item>
       <ItemDescription>
         <ItemTitle>{title}</ItemTitle>
         <ItemSubtitle>{subtitle}</ItemSubtitle>
       </ItemDescription>
-      <Swatches>{renderSwatchSpecimen(colors)}</Swatches>
+      <Swatches>{renderSwatchSpecimen(colors, isTransparent)}</Swatches>
     </Item>
   );
 };