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

refactor: badge text and bg color logic into object lookups

Browse Source
This commit is contained in:
Deen Denno 2021-08-23 18:13:41 -05:00 committed by Gert Hengeveld
parent 4c4f0038f2
commit cfcde69fca
1 changed files with 25 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
addons/interactions/src/components/StatusBadge/StatusBadge.tsx
View File

@ -12,22 +12,32 @@ const {
},
} = theme;
const StyledBadge = styled.div(({ status }: StatusBadgeProps) => ({
padding: '4px 8px',
borderRadius: '4px',
background: status === TestingStates.DONE ? green : status === TestingStates.ERROR ? red : ochre,
color: 'white',
fontFamily: typography.fonts.base,
textTransform: 'uppercase',
fontSize: typography.size.s1,
letterSpacing: 3,
fontWeight: 500,
width: 65,
textAlign: 'center',
}));
const StyledBadge = styled.div(({ status }: StatusBadgeProps) => {
const backgroundColor = {
[TestingStates.DONE]: green,
[TestingStates.ERROR]: red,
[TestingStates.PENDING]: ochre,
}[status];
return {
padding: '4px 8px',
borderRadius: '4px',
backgroundColor: backgroundColor,
color: 'white',
fontFamily: typography.fonts.base,
textTransform: 'uppercase',
fontSize: typography.size.s1,
letterSpacing: 3,
fontWeight: 500,
width: 65,
textAlign: 'center',
};
});
export const StatusBadge: React.FC<StatusBadgeProps> = ({ status }) => {
const badgeText =
status === TestingStates.ERROR ? 'Fail' : status === TestingStates.DONE ? 'Pass' : 'Runs';
const badgeText = {
[TestingStates.DONE]: 'Pass',
[TestingStates.ERROR]: 'Fail',
[TestingStates.PENDING]: 'Runs',
}[status];
return <StyledBadge status={status}>{badgeText}</StyledBadge>;
};