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

Updated badge colors and corresponding story

Browse Source
This commit is contained in:
Michael Arestad 2022-08-29 09:28:18 -06:00
parent 5f421b438d
commit ddb3aa9e88
2 changed files with 24 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
code/lib/components/src/Badge/Badge.stories.tsx
View File

@ -4,8 +4,10 @@ import { Badge } from './Badge';
storiesOf('Basics/Badge', module).add('all badges', () => (
<div>
<Badge status="positive">Positive</Badge>
<Badge status="negative">Negative</Badge>
<Badge status="neutral">Neutral</Badge>
<Badge status="positive">Positive</Badge>
<Badge status="warning">Warning</Badge>
<Badge status="negative">Negative</Badge>
<Badge status="critical">Critical</Badge>
</div>
));

23
code/lib/components/src/Badge/Badge.tsx
View File

@ -1,5 +1,6 @@
import React, { FC } from 'react';
import { styled } from '@storybook/theming';
import { transparentize, lighten } from 'polished';
const BadgeWrapper = styled.div<BadgeProps>(
({ theme }) => ({
@ -33,26 +34,42 @@ const BadgeWrapper = styled.div<BadgeProps>(
}
case 'negative': {
return {
color: theme.color.negative,
color: theme.color.negativeText,
background: theme.background.negative,
boxShadow:
theme.base === 'light'
? `inset 0 0 0 1px ${transparentize(0.9, theme.color.negativeText)}`
: 'none',
};
}
case 'warning': {
return {
color: theme.color.warning,
color: theme.color.warningText,
background: theme.background.warning,
boxShadow:
theme.base === 'light'
? `inset 0 0 0 1px ${transparentize(0.9, theme.color.warningText)}`
: 'none',
};
}
case 'neutral': {
return {
color: theme.color.dark,
background: theme.color.mediumlight,
boxShadow:
theme.base === 'light'
? `inset 0 0 0 1px ${transparentize(0.9, theme.color.dark)}`
: 'none',
};
}
case 'positive': {
return {
color: theme.color.positive,
color: theme.color.positiveText,
background: theme.background.positive,
boxShadow:
theme.base === 'light'
? `inset 0 0 0 1px ${transparentize(0.9, theme.color.positiveText)}`
: 'none',
};
}
default: {