revert: removed isTransparent prop

abue9 · Jul 12, 2021 · ce37c7e · ce37c7e
1 parent a1d0785
commit ce37c7e
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 33 deletions.
diff --git a/examples/official-storybook/stories/addon-docs/colorpalette.stories.mdx b/examples/official-storybook/stories/addon-docs/colorpalette.stories.mdx
@@ -19,6 +19,5 @@ 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 }} isTransparent />;
+      return <ColorItem key={k} title={k} colors={{ [k]: v }} />;
     } else if (typeof v === 'object') {
       return (
         <ColorItem
@@ -29,7 +29,6 @@ Dark theme Colors
                 : acc,
             {}
           )}
-          isTransparent
         />
       );
     }
@@ -50,7 +49,6 @@ Dark theme Backgrounds
           key={k}
           title={k}
           colors={{ [k]: v }}
-          isTransparent
         />
       );
     } else if (typeof v === 'object') {
@@ -60,7 +58,6 @@ Dark theme Backgrounds
           key={k}
           title={k}
           colors={colors}
-          isTransparent
         />
       );
     }
@@ -75,7 +72,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 }} isTransparent/>;
+      return <ColorItem key={k} title={k} colors={{ [k]: v }} />;
     } else if (typeof v === 'object') {
       return (
         <ColorItem
@@ -89,7 +86,6 @@ Light theme Colors
                 : acc,
             {}
           )}
-          isTransparent
         />
       );
     }
@@ -110,7 +106,6 @@ Light theme Backgrounds
           key={k}
           title={k}
           colors={{ [k]: v }}
-          isTransparent
         />
       );
     } else if (typeof v === 'object') {
@@ -120,7 +115,6 @@ 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,7 +24,6 @@ export const defaultStyle = () => (
         'rgba(102,191,60,.6)',
         'rgba(102,191,60,.3)',
       ]}
-      isTransparent
     />
     <ColorItem
       title="gradient"
@@ -56,7 +55,6 @@ 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
@@ -72,21 +72,15 @@ const Swatch = styled.div<SwatchProps>(({ background }) => ({
   },
 }));
 
-interface SwatchColorsProps {
-  isTransparent: boolean;
-}
-const SwatchColors = styled.div<SwatchColorsProps>(({ theme, isTransparent }) => ({
+const SwatchColors = styled.div(({ theme }) => ({
   ...getBlockBackgroundStyle(theme),
   display: 'flex',
   flexDirection: 'row',
   height: 50,
   marginBottom: 5,
   overflow: 'hidden',
-
-  ...(isTransparent && {
-    backgroundColor: 'white',
-    backgroundImage: `repeating-linear-gradient(-45deg, #ccc, #ccc 1px, #fff 1px, #fff 16px)`,
-  }),
+  backgroundColor: 'white',
+  backgroundImage: `repeating-linear-gradient(-45deg, #ccc, #ccc 1px, #fff 1px, #fff 16px)`,
 }));
 
 const SwatchSpecimen = styled.div({
@@ -142,7 +136,6 @@ interface ColorProps {
   title: string;
   subtitle: string;
   colors: Colors;
-  isTransparent?: boolean;
 }
 
 function renderSwatch(color: string, index: number) {
@@ -160,20 +153,18 @@ function renderSwatchLabel(color: string, index: number, colorDescription?: stri
   );
 }
 
-function renderSwatchSpecimen(colors: Colors, isTransparent: boolean) {
+function renderSwatchSpecimen(colors: Colors) {
   if (Array.isArray(colors)) {
     return (
       <SwatchSpecimen>
-        <SwatchColors isTransparent={isTransparent}>
-          {colors.map((color, index) => renderSwatch(color, index))}
-        </SwatchColors>
+        <SwatchColors>{colors.map((color, index) => renderSwatch(color, index))}</SwatchColors>
         <SwatchLabels>{colors.map((color, index) => renderSwatchLabel(color, index))}</SwatchLabels>
       </SwatchSpecimen>
     );
   }
   return (
     <SwatchSpecimen>
-      <SwatchColors isTransparent={isTransparent}>
+      <SwatchColors>
         {Object.values(colors).map((color, index) => renderSwatch(color, index))}
       </SwatchColors>
       <SwatchLabels>
@@ -187,19 +178,14 @@ function renderSwatchSpecimen(colors: Colors, isTransparent: boolean) {
  * 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,
-  isTransparent,
-}) => {
+export const ColorItem: FunctionComponent<ColorProps> = ({ title, subtitle, colors }) => {
   return (
     <Item>
       <ItemDescription>
         <ItemTitle>{title}</ItemTitle>
         <ItemSubtitle>{subtitle}</ItemSubtitle>
       </ItemDescription>
-      <Swatches>{renderSwatchSpecimen(colors, isTransparent)}</Swatches>
+      <Swatches>{renderSwatchSpecimen(colors)}</Swatches>
     </Item>
   );
 };