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

removed passes from props and used type to determine the badge needed

Browse Source
This commit is contained in:
codebyalex 2019-04-11 23:10:03 -04:00
parent bdbd1534e9
commit d1e8ccce82
6 changed files with 151 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
addons/a11y/src/components/A11YPanel.tsx
View File

@ -175,7 +175,6 @@ export class A11YPanel extends Component<A11YPanelProps, A11YPanelState> {
label: <Violations>{violations.length} Violations</Violations>, label: <Violations>{violations.length} Violations</Violations>,
panel: ( panel: (
<Report <Report
passes={false}
items={violations} items={violations}
type={RuleType.VIOLATION} type={RuleType.VIOLATION}
empty="No accessibility violations found." empty="No accessibility violations found."
@ -188,7 +187,6 @@ export class A11YPanel extends Component<A11YPanelProps, A11YPanelState> {
label: <Passes>{passes.length} Passes</Passes>, label: <Passes>{passes.length} Passes</Passes>,
panel: ( panel: (
<Report <Report
passes
items={passes} items={passes}
type={RuleType.PASS} type={RuleType.PASS}
empty="No accessibility checks passed." empty="No accessibility checks passed."
@ -201,7 +199,6 @@ export class A11YPanel extends Component<A11YPanelProps, A11YPanelState> {
label: <Incomplete>{incomplete.length} Incomplete</Incomplete>, label: <Incomplete>{incomplete.length} Incomplete</Incomplete>,
panel: ( panel: (
<Report <Report
passes={false}
items={incomplete} items={incomplete}
type={RuleType.INCOMPLETION} type={RuleType.INCOMPLETION}
empty="No accessibility checks incomplete." empty="No accessibility checks incomplete."

10
addons/a11y/src/components/Report/Elements.tsx
View File

@ -28,11 +28,10 @@ const HighlightToggleElement = styled.span({
interface ElementProps { interface ElementProps {
element: NodeResult; element: NodeResult;
passes: boolean;
type: RuleType; type: RuleType;
} }
const Element: FunctionComponent<ElementProps> = ({ element, passes, type }) => { const Element: FunctionComponent<ElementProps> = ({ element, type }) => {
const { any, all, none } = element; const { any, all, none } = element;
const rules = [...any, ...all, ...none]; const rules = [...any, ...all, ...none];
const highlightToggleId = `${type}-${element.target[0]}`; const highlightToggleId = `${type}-${element.target[0]}`;
@ -51,21 +50,20 @@ const Element: FunctionComponent<ElementProps> = ({ element, passes, type }) =>
/> />
</HighlightToggleElement> </HighlightToggleElement>
</ItemTitle> </ItemTitle>
<Rules rules={rules} passes={passes} /> <Rules rules={rules} type={type} />
</Item> </Item>
); );
}; };
interface ElementsProps { interface ElementsProps {
elements: NodeResult[]; elements: NodeResult[];
passes: boolean;
type: RuleType; type: RuleType;
} }
export const Elements: FunctionComponent<ElementsProps> = ({ elements, passes, type }) => ( export const Elements: FunctionComponent<ElementsProps> = ({ elements, type }) => (
<ol> <ol>
{elements.map((element, index) => ( {elements.map((element, index) => (
<Element passes={passes} element={element} key={index} type={type} /> <Element element={element} key={index} type={type} />
))} ))}
</ol> </ol>
); );

5
addons/a11y/src/components/Report/Item.tsx
View File

@ -56,7 +56,6 @@ const HighlightToggleElement = styled.span({
interface ItemProps { interface ItemProps {
item: Result; item: Result;
passes: boolean;
type: RuleType; type: RuleType;
} }
@ -75,7 +74,7 @@ export class Item extends Component<ItemProps, ItemState> {
})); }));
render() { render() {
const { item, passes, type } = this.props; const { item, type } = this.props;
const { open } = this.state; const { open } = this.state;
const highlightToggleId = `${type}-${item.id}`; const highlightToggleId = `${type}-${item.id}`;
@ -104,7 +103,7 @@ export class Item extends Component<ItemProps, ItemState> {
{open ? ( {open ? (
<Fragment> <Fragment>
<Info item={item} key="info" /> <Info item={item} key="info" />
<Elements elements={item.nodes} passes={passes} type={type} key="elements" /> <Elements elements={item.nodes} type={type} key="elements" />
<Tags tags={item.tags} key="tags" /> <Tags tags={item.tags} key="tags" />
</Fragment> </Fragment>
) : null} ) : null}

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

@ -2,6 +2,7 @@ import React, { FunctionComponent } from 'react';
import { styled } from '@storybook/theming'; import { styled } from '@storybook/theming';
import { Badge, Icons } from '@storybook/components'; import { Badge, Icons } from '@storybook/components';
import { CheckResult } from 'axe-core'; import { CheckResult } from 'axe-core';
import { RuleType } from '../A11YPanel';
const impactColors = { const impactColors = {
minor: '#f1c40f', minor: '#f1c40f',
@ -53,28 +54,45 @@ const Status = styled.div(({ passes, impact }: { passes: boolean; impact: string
interface RuleProps { interface RuleProps {
rule: CheckResult; rule: CheckResult;
passes: boolean; type: RuleType;
} }
const Rule: FunctionComponent<RuleProps> = ({ rule, passes }) => ( const Rule: FunctionComponent<RuleProps> = ({ rule, type }) => {
let badgeType = '';
switch(type) {
case RuleType.PASS:
badgeType = 'positive';
break;
case RuleType.VIOLATION:
badgeType = 'negative';
break;
case RuleType.INCOMPLETION:
badgeType = 'neutral';
break;
default:
break;
}
return (
<Item> <Item>
<BadgeWrapper> <BadgeWrapper>
<Badge status={passes ? "positive" : "negative"}>{rule.impact}</Badge> <Badge status={badgeType}>{rule.impact}</Badge>
</BadgeWrapper> </BadgeWrapper>
<Message>{rule.message}</Message> <Message>{rule.message}</Message>
</Item> </Item>
); );
}
interface RulesProps { interface RulesProps {
rules: CheckResult[]; rules: CheckResult[];
passes: boolean; type: RuleType;
} }
export const Rules: FunctionComponent<RulesProps> = ({ rules, passes }) => { export const Rules: FunctionComponent<RulesProps> = ({ rules, type }) => {
return ( return (
<List> <List>
{rules.map((rule, index) => ( {rules.map((rule, index) => (
<Rule passes={passes} rule={rule} key={index} /> <Rule type={type} rule={rule} key={index} />
))} ))}
</List> </List>
); );

5
addons/a11y/src/components/Report/index.tsx
View File

@ -7,14 +7,13 @@ import { RuleType } from '../A11YPanel';
export interface ReportProps { export interface ReportProps {
items: Result[]; items: Result[];
empty: string; empty: string;
passes: boolean;
type: RuleType; type: RuleType;
} }
export const Report: FunctionComponent<ReportProps> = ({ items, empty, type, passes }) => ( export const Report: FunctionComponent<ReportProps> = ({ items, empty, type }) => (
<Fragment> <Fragment>
{items && items.length ? ( {items && items.length ? (
items.map(item => <Item passes={passes} item={item} key={`${type}:${item.id}`} type={type} />) items.map(item => <Item item={item} key={`${type}:${item.id}`} type={type} />)
) : ( ) : (
<Placeholder key="placeholder">{empty}</Placeholder> <Placeholder key="placeholder">{empty}</Placeholder>
)} )}

109
addons/a11y/src/components/__snapshots__/A11YPanel.test.js.snap
View File

@ -114,7 +114,7 @@ exports[`A11YPanel should render report 1`] = `
min-height: 100%; min-height: 100%;
} }
.emotion-10 { .emotion-7 {
box-shadow: rgba(0,0,0,.1) 0 -1px 0 0 inset; box-shadow: rgba(0,0,0,.1) 0 -1px 0 0 inset;
background: rgba(0,0,0,.05); background: rgba(0,0,0,.05);
display: -webkit-box; display: -webkit-box;
@ -182,12 +182,14 @@ exports[`A11YPanel should render report 1`] = `
color: #E69D00; color: #E69D00;
} }
.emotion-9 { .emotion-10 {
padding: 10px 15px 10px 0; padding: 10px 12px 10px 0;
cursor: pointer; cursor: pointer;
font-size: 13px; font-size: 13px;
height: 40px; height: 40px;
border: none; border: none;
margin-top: -40px;
float: right;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
@ -198,23 +200,36 @@ exports[`A11YPanel should render report 1`] = `
align-items: center; align-items: center;
} }
.emotion-9 input { @media (max-width:665px) {
margin-left: 10px; .emotion-10 {
display: block;
margin-top: 0px;
padding: 12px 0px 3px 12px;
width: 100%;
float: left;
border-bottom: 1px solid rgba(0,0,0,.1);
}
}
.emotion-10 input: {
margin-left: 10;
margin-right: 0; margin-right: 0;
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
} }
.emotion-7 { .emotion-8 {
cursor: pointer; cursor: pointer;
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
-ms-user-select: none; -ms-user-select: none;
user-select: none; user-select: none;
margin-bottom: 3px;
margin-right: 3px;
color: #666666; color: #666666;
} }
.emotion-8 { .emotion-9 {
cursor: not-allowed; cursor: not-allowed;
} }
@ -334,13 +349,13 @@ exports[`A11YPanel should render report 1`] = `
"inserted": Object { "inserted": Object {
"0": true, "0": true,
"110qmus": true, "110qmus": true,
"152wg9i": true,
"1551xjo": true, "1551xjo": true,
"15paq49": true, "15paq49": true,
"176o2y5": true, "176o2y5": true,
"195aj2u": true,
"1977chw": true, "1977chw": true,
"1cwfnw4": true, "19mcg9j": true,
"1fp6daz": true, "1kbt4a0": true,
"1l7fvsg": true, "1l7fvsg": true,
"1myfomu": true, "1myfomu": true,
"1s6ajii": true, "1s6ajii": true,
@ -348,13 +363,13 @@ exports[`A11YPanel should render report 1`] = `
"4ryd4s": true, "4ryd4s": true,
"6hqipu": true, "6hqipu": true,
"animation-u07e3c": true, "animation-u07e3c": true,
"aq4p19": true,
"fg630j": true, "fg630j": true,
"g90fw7": true, "g90fw7": true,
"iau1th": true, "iau1th": true,
"jb2puo": true, "jb2puo": true,
"kqzqgg": true, "kqzqgg": true,
"l0u0ek": true, "l0u0ek": true,
"nuzmgr": true,
"qacwg0": true, "qacwg0": true,
"qb28": true, "qb28": true,
"snh8f7": true, "snh8f7": true,
@ -617,7 +632,7 @@ exports[`A11YPanel should render report 1`] = `
data-emotion="css" data-emotion="css"
> >
.emotion-10{box-shadow:rgba(0,0,0,.1) 0 -1px 0 0 inset;background:rgba(0,0,0,.05);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;white-space:nowrap;} .emotion-7{box-shadow:rgba(0,0,0,.1) 0 -1px 0 0 inset;background:rgba(0,0,0,.05);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;white-space:nowrap;}
</style> </style>
<style <style
data-emotion="css" data-emotion="css"
@ -665,25 +680,31 @@ exports[`A11YPanel should render report 1`] = `
data-emotion="css" data-emotion="css"
> >
.emotion-9{padding:10px 15px 10px 0;cursor:pointer;font-size:13px;height:40px;border:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;} .emotion-10{padding:10px 12px 10px 0;cursor:pointer;font-size:13px;height:40px;border:none;margin-top:-40px;float:right;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
</style> </style>
<style <style
data-emotion="css" data-emotion="css"
> >
.emotion-9 input{margin-left:10px;margin-right:0;margin-top:0;margin-bottom:0;} @media (max-width:665px){.emotion-10{display:block;margin-top:0px;padding:12px 0px 3px 12px;width:100%;float:left;border-bottom:1px solid rgba(0,0,0,.1);}}
</style> </style>
<style <style
data-emotion="css" data-emotion="css"
> >
.emotion-7{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:#666666;} .emotion-10 input:{margin-left:10;margin-right:0;margin-top:0;margin-bottom:0;}
</style> </style>
<style <style
data-emotion="css" data-emotion="css"
> >
.emotion-8{cursor:not-allowed;} .emotion-8{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-bottom:3px;margin-right:3px;color:#666666;}
</style>
<style
data-emotion="css"
>
.emotion-9{cursor:not-allowed;}
</style> </style>
<style <style
data-emotion="css" data-emotion="css"
@ -767,13 +788,13 @@ exports[`A11YPanel should render report 1`] = `
data-emotion="css" data-emotion="css"
> >
.css-nuzmgr{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;border-bottom:1px solid rgba(0,0,0,.1);} .css-aq4p19{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;border-bottom:1px solid rgba(0,0,0,.1);}
</style> </style>
<style <style
data-emotion="css" data-emotion="css"
> >
.css-nuzmgr:hover{background:rgba(0,0,0,.05);} .css-aq4p19:hover{background:rgba(0,0,0,.05);}
</style> </style>
<style <style
data-emotion="css" data-emotion="css"
@ -803,13 +824,13 @@ exports[`A11YPanel should render report 1`] = `
data-emotion="css" data-emotion="css"
> >
.css-1fp6daz{font-weight:normal;float:right;margin-right:15px;margin-top:10px;} .css-19mcg9j{font-weight:normal;float:right;margin-right:15px;-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;}
</style> </style>
<style <style
data-emotion="css" data-emotion="css"
> >
.css-1fp6daz input{margin:0;} .css-19mcg9j input{margin:0;}
</style> </style>
<style <style
data-emotion="css" data-emotion="css"
@ -824,7 +845,7 @@ exports[`A11YPanel should render report 1`] = `
.css-6hqipu{shape-rendering:inherit;-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0);display:inline-block;height:12px;width:12px;margin-right:4px;} .css-6hqipu{shape-rendering:inherit;-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0);display:inline-block;height:12px;width:12px;margin-right:4px;}
</style> </style>
</head>, </head>,
"ctr": 37, "ctr": 38,
"isSpeedy": false, "isSpeedy": false,
"key": "css", "key": "css",
"nonce": undefined, "nonce": undefined,
@ -845,7 +866,7 @@ exports[`A11YPanel should render report 1`] = `
data-emotion="css" data-emotion="css"
> >
.emotion-10{box-shadow:rgba(0,0,0,.1) 0 -1px 0 0 inset;background:rgba(0,0,0,.05);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;white-space:nowrap;} .emotion-7{box-shadow:rgba(0,0,0,.1) 0 -1px 0 0 inset;background:rgba(0,0,0,.05);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;white-space:nowrap;}
</style>, </style>,
<style <style
data-emotion="css" data-emotion="css"
@ -893,25 +914,31 @@ exports[`A11YPanel should render report 1`] = `
data-emotion="css" data-emotion="css"
> >
.emotion-9{padding:10px 15px 10px 0;cursor:pointer;font-size:13px;height:40px;border:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;} .emotion-10{padding:10px 12px 10px 0;cursor:pointer;font-size:13px;height:40px;border:none;margin-top:-40px;float:right;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
</style>, </style>,
<style <style
data-emotion="css" data-emotion="css"
> >
.emotion-9 input{margin-left:10px;margin-right:0;margin-top:0;margin-bottom:0;} @media (max-width:665px){.emotion-10{display:block;margin-top:0px;padding:12px 0px 3px 12px;width:100%;float:left;border-bottom:1px solid rgba(0,0,0,.1);}}
</style>, </style>,
<style <style
data-emotion="css" data-emotion="css"
> >
.emotion-7{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:#666666;} .emotion-10 input:{margin-left:10;margin-right:0;margin-top:0;margin-bottom:0;}
</style>, </style>,
<style <style
data-emotion="css" data-emotion="css"
> >
.emotion-8{cursor:not-allowed;} .emotion-8{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-bottom:3px;margin-right:3px;color:#666666;}
</style>,
<style
data-emotion="css"
>
.emotion-9{cursor:not-allowed;}
</style>, </style>,
<style <style
data-emotion="css" data-emotion="css"
@ -995,13 +1022,13 @@ exports[`A11YPanel should render report 1`] = `
data-emotion="css" data-emotion="css"
> >
.css-nuzmgr{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;border-bottom:1px solid rgba(0,0,0,.1);} .css-aq4p19{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;border-bottom:1px solid rgba(0,0,0,.1);}
</style>, </style>,
<style <style
data-emotion="css" data-emotion="css"
> >
.css-nuzmgr:hover{background:rgba(0,0,0,.05);} .css-aq4p19:hover{background:rgba(0,0,0,.05);}
</style>, </style>,
<style <style
data-emotion="css" data-emotion="css"
@ -1031,13 +1058,13 @@ exports[`A11YPanel should render report 1`] = `
data-emotion="css" data-emotion="css"
> >
.css-1fp6daz{font-weight:normal;float:right;margin-right:15px;margin-top:10px;} .css-19mcg9j{font-weight:normal;float:right;margin-right:15px;-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;}
</style>, </style>,
<style <style
data-emotion="css" data-emotion="css"
> >
.css-1fp6daz input{margin:0;} .css-19mcg9j input{margin:0;}
</style>, </style>,
<style <style
data-emotion="css" data-emotion="css"
@ -1111,7 +1138,7 @@ exports[`A11YPanel should render report 1`] = `
Violations Violations
</ForwardRef(render)>, </ForwardRef(render)>,
"panel": <Report "panel": <Report
empty="No a11y violations found." empty="No accessibility violations found."
items={Array []} items={Array []}
passes={false} passes={false}
type={0} type={0}
@ -1125,7 +1152,7 @@ exports[`A11YPanel should render report 1`] = `
Passes Passes
</ForwardRef(render)>, </ForwardRef(render)>,
"panel": <Report "panel": <Report
empty="No a11y check passed." empty="No accessibility checks passed."
items={Array []} items={Array []}
passes={true} passes={true}
type={1} type={1}
@ -1139,7 +1166,7 @@ exports[`A11YPanel should render report 1`] = `
Incomplete Incomplete
</ForwardRef(render)>, </ForwardRef(render)>,
"panel": <Report "panel": <Report
empty="No a11y incomplete found." empty="No accessibility checks incomplete."
items={Array []} items={Array []}
passes={false} passes={false}
type={2} type={2}
@ -1155,7 +1182,7 @@ exports[`A11YPanel should render report 1`] = `
> >
<Styled(div)> <Styled(div)>
<div <div
className="emotion-10" className="emotion-7"
> >
<Styled(div)> <Styled(div)>
<div <div
@ -1226,15 +1253,17 @@ exports[`A11YPanel should render report 1`] = `
</Styled(button)> </Styled(button)>
</div> </div>
</Styled(div)> </Styled(div)>
</div>
</Styled(div)>
<Styled(div)> <Styled(div)>
<div <div
className="emotion-9" className="emotion-10"
> >
<Styled(label) <Styled(label)
htmlFor="0-global-checkbox" htmlFor="0-global-checkbox"
> >
<label <label
className="emotion-7" className="emotion-8"
htmlFor="0-global-checkbox" htmlFor="0-global-checkbox"
> >
Highlight results Highlight results
@ -1267,7 +1296,7 @@ exports[`A11YPanel should render report 1`] = `
<input <input
aria-label="Highlight result" aria-label="Highlight result"
checked={false} checked={false}
className="emotion-8" className="emotion-9"
disabled={true} disabled={true}
id="0-global-checkbox" id="0-global-checkbox"
onChange={[Function]} onChange={[Function]}
@ -1278,10 +1307,8 @@ exports[`A11YPanel should render report 1`] = `
</Connect(HighlightToggle)> </Connect(HighlightToggle)>
</div> </div>
</Styled(div)> </Styled(div)>
</div>
</Styled(div)>
<Report <Report
empty="No a11y violations found." empty="No accessibility violations found."
items={Array []} items={Array []}
passes={false} passes={false}
type={0} type={0}
@ -1297,7 +1324,7 @@ exports[`A11YPanel should render report 1`] = `
<div <div
className="emotion-11" className="emotion-11"
> >
No a11y violations found. No accessibility violations found.
</div> </div>
</Styled(div)> </Styled(div)>
</div> </div>