From 2da73c28d9c2f11a8091876a1644905d0d6dcabe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bart=C5=82omiej=20Krakowski?= Date: Thu, 8 Jul 2021 17:55:43 +0200 Subject: [PATCH] fix: changed pattern in the background and updated examples of usage --- .../addon-docs/colorpalette.stories.mdx | 1 + .../src/Colors/colorpalette.stories.mdx | 10 ++- .../src/blocks/ColorPalette.stories.tsx | 2 + lib/components/src/blocks/ColorPalette.tsx | 65 +++++++++++-------- 4 files changed, 50 insertions(+), 28 deletions(-) diff --git a/examples/official-storybook/stories/addon-docs/colorpalette.stories.mdx b/examples/official-storybook/stories/addon-docs/colorpalette.stories.mdx index 98aed2ad2a6c..d0eb054316c5 100644 --- 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 /> diff --git a/lib/components/src/Colors/colorpalette.stories.mdx b/lib/components/src/Colors/colorpalette.stories.mdx index 4c868685824a..f6dd7bf18200 100644 --- a/lib/components/src/Colors/colorpalette.stories.mdx +++ b/lib/components/src/Colors/colorpalette.stories.mdx @@ -15,7 +15,7 @@ Dark theme Colors {Object.entries(convert(themes.dark).color).map(([k, v]) => { if (typeof v === 'string' && (v.match(/^#/) || v.match(/^rgb/) || k.match(/color/i))) { - return ; + return ; } else if (typeof v === 'object') { return ( ); } @@ -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 {Object.entries(convert(themes.light).color).map(([k, v]) => { if (typeof v === 'string' && (v.match(/^#/) || v.match(/^rgb/) || k.match(/color/i))) { - return ; + return ; } else if (typeof v === 'object') { return ( ); } @@ -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 index 2f3830b98a07..d0b2e0ad67af 100644 --- 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 /> ( Apple60: 'rgba(102,191,60,.6)', Apple30: 'rgba(102,191,60,.3)', }} + isTransparent /> (({ background }) => ({ +const Swatch = styled.div(({ 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 ; +function renderSwatch(color: string, index: number, isTransparent: boolean) { + return ( + + ); } function renderSwatchLabel(color: string, index: number, colorDescription?: string) { @@ -159,11 +165,13 @@ function renderSwatchLabel(color: string, index: number, colorDescription?: stri ); } -function renderSwatchSpecimen(colors: Colors) { +function renderSwatchSpecimen(colors: Colors, isTransparent: boolean) { if (Array.isArray(colors)) { return ( - {colors.map((color, index) => renderSwatch(color, index))} + + {colors.map((color, index) => renderSwatch(color, index, isTransparent))} + {colors.map((color, index) => renderSwatchLabel(color, index))} ); @@ -171,7 +179,7 @@ function renderSwatchSpecimen(colors: Colors) { return ( - {Object.values(colors).map((color, index) => renderSwatch(color, index))} + {Object.values(colors).map((color, index) => renderSwatch(color, index, isTransparent))} {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 = ({ title, subtitle, colors }) => { +export const ColorItem: FunctionComponent = ({ + title, + subtitle, + colors, + isTransparent = false, +}) => { return ( {title} {subtitle} - {renderSwatchSpecimen(colors)} + {renderSwatchSpecimen(colors, isTransparent)} ); };