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

added badge to make the severity display more accessible

Browse Source
This commit is contained in:
codebyalex 2019-04-11 22:46:40 -04:00
parent 4cb4de8da0
commit bdbd1534e9
2 changed files with 20 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
addons/a11y/src/components/Report/Rules.tsx
View File

@ -1,7 +1,6 @@
import React, { FunctionComponent } from 'react'; import React, { FunctionComponent } from 'react';
import { styled } from '@storybook/theming'; import { styled } from '@storybook/theming';
import { Badge, Icons } from '@storybook/components';
import { Icons } from '@storybook/components';
import { CheckResult } from 'axe-core'; import { CheckResult } from 'axe-core';
const impactColors = { const impactColors = {
@ -19,10 +18,22 @@ const List = styled.div({
fontWeight: '400', fontWeight: '400',
} as any); } as any);
const Item = styled.div({ const Item = styled.div(() => {
return `
display: flex;
flex-direction: row;
margin-bottom: 6px;
@media (max-width: 665px) {
display: block;
}
`;
});
const BadgeWrapper = styled.div({
marginBottom: '5px',
marginLeft: '5px',
display: 'flex', display: 'flex',
flexDirection: 'row',
marginBottom: '6px',
}); });
const Message = styled.div({ const Message = styled.div({
@ -47,9 +58,9 @@ interface RuleProps {
const Rule: FunctionComponent<RuleProps> = ({ rule, passes }) => ( const Rule: FunctionComponent<RuleProps> = ({ rule, passes }) => (
<Item> <Item>
<Status passes={passes || undefined} impact={rule.impact}> <BadgeWrapper>
{passes ? <Icons icon="check" /> : <Icons icon="cross" />} <Badge status={passes ? "positive" : "negative"}>{rule.impact}</Badge>
</Status> </BadgeWrapper>
<Message>{rule.message}</Message> <Message>{rule.message}</Message>
</Item> </Item>
); );

2
lib/components/src/Badge/Badge.js
View File

@ -3,9 +3,9 @@ import { styled, css } from '@storybook/theming';
const BadgeWrapper = styled.div` const BadgeWrapper = styled.div`
display: inline-block; display: inline-block;
vertical-align: top;
font-size: 11px; font-size: 11px;
line-height: 12px; line-height: 12px;
align-self: center;
padding: 4px 12px; padding: 4px 12px;
border-radius: 3em; border-radius: 3em;
font-weight: ${props => props.theme.typography.weight.bold}; font-weight: ${props => props.theme.typography.weight.bold};