GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-09 00:19:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
feat(addon-docs): named colors with ColorPalette
This commit is contained in:
Norbert de Langen 2020-01-20 23:08:21 +01:00 committed by GitHub
commit 9fe650bb4d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 72 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
lib/components/src/blocks/ColorPalette.stories.tsx
View File

@ -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>
);

74
lib/components/src/blocks/ColorPalette.tsx
View File

@ -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>
);
};