From 09e4d51dc97bcdfbf64aa12902723c9802abfa12 Mon Sep 17 00:00:00 2001 From: codebyalex Date: Thu, 14 Mar 2019 06:04:30 -0400 Subject: [PATCH 01/43] Added toggle button that highlight a11y rules based on type --- addons/a11y/src/components/A11YPanel.tsx | 6 +- .../a11y/src/components/Report/Elements.tsx | 70 +++++++++++++++++-- addons/a11y/src/components/Report/Item.tsx | 5 +- addons/a11y/src/components/Report/index.tsx | 5 +- 4 files changed, 74 insertions(+), 12 deletions(-) diff --git a/addons/a11y/src/components/A11YPanel.tsx b/addons/a11y/src/components/A11YPanel.tsx index 648a072c3cb5..b27647da659b 100644 --- a/addons/a11y/src/components/A11YPanel.tsx +++ b/addons/a11y/src/components/A11YPanel.tsx @@ -149,17 +149,17 @@ export class A11YPanel extends Component { { label: {violations.length} Violations, panel: ( - + ), }, { label: {passes.length} Passes, - panel: , + panel: , }, { label: {incomplete.length} Incomplete, panel: ( - + ), }, ]} diff --git a/addons/a11y/src/components/Report/Elements.tsx b/addons/a11y/src/components/Report/Elements.tsx index cce537cba04c..7a21008633be 100644 --- a/addons/a11y/src/components/Report/Elements.tsx +++ b/addons/a11y/src/components/Report/Elements.tsx @@ -1,6 +1,7 @@ -import React, { FunctionComponent } from 'react'; +import React, { Component, Fragment, FunctionComponent } from 'react'; import { styled } from '@storybook/theming'; +import memoize from 'memoizerific'; import { NodeResult } from 'axe-core'; import { Rules } from './Rules'; @@ -19,16 +20,17 @@ const ItemTitle = styled.span({ interface ElementProps { element: NodeResult; passes: boolean; + type: string; } -const Element: FunctionComponent = ({ element, passes }) => { +const Element: FunctionComponent = ({ element, passes, type }) => { const { any, all, none } = element; const rules = [...any, ...all, ...none]; return ( - {element.target[0]} + {element.target[0]} ); @@ -37,12 +39,70 @@ const Element: FunctionComponent = ({ element, passes }) => { interface ElementsProps { elements: NodeResult[]; passes: boolean; + type: string; } -export const Elements: FunctionComponent = ({ elements, passes }) => ( +export const Elements: FunctionComponent = ({ elements, passes, type }) => (
    {elements.map((element, index) => ( - + ))}
); + +interface ToggleProps { + element: any; + type: string; +} + +interface ToggleState { + isToggleOn: boolean; + originalOutline: string | null, +} + +export class HighlightToggle extends Component { + state = { + isToggleOn: true, + originalOutline: '', + }; + + getIframe = memoize(1)(() => document.getElementsByTagName("iframe")[0]); + + componentDidMount() { + const targetElement = this.getIframe().contentDocument.querySelector(this.props.element.target[0]); + this.state.originalOutline = targetElement.style.outline; + console.log(this.props.type); + } + + higlightRuleLocation: any = (element:any, addHighlight:boolean) => { + const targetElement = this.getIframe().contentDocument.querySelector(element.target[0]); + if (addHighlight){ + if(this.props.type==='PASSES'){ + targetElement.style.outline = '2px dotted green'; + }else if(this.props.type==='VIOLATIONS'){ + targetElement.style.outline = '2px dotted red'; + }else if(this.props.type==='INCOMPLETIONS'){ + targetElement.style.outline = '2px dotted orange'; + } + } else { + targetElement.style.outline = this.state.originalOutline; + } + } + + onToggle = () => { + this.setState(prevState => { + this.higlightRuleLocation(this.props.element, this.state.isToggleOn); + return { isToggleOn: !prevState.isToggleOn }; + }); + } + + render() { + const { isToggleOn } = this.state; + + return ( + + ); + } +} diff --git a/addons/a11y/src/components/Report/Item.tsx b/addons/a11y/src/components/Report/Item.tsx index 3be6015217cb..b3909549ca02 100644 --- a/addons/a11y/src/components/Report/Item.tsx +++ b/addons/a11y/src/components/Report/Item.tsx @@ -42,6 +42,7 @@ const HeaderBar = styled.button(({ theme }) => ({ interface ItemProps { item: Result; passes: boolean; + type: string; } interface ItemState { @@ -59,7 +60,7 @@ export class Item extends Component { })); render() { - const { item, passes } = this.props; + const { item, passes, type } = this.props; const { open } = this.state; return ( @@ -78,7 +79,7 @@ export class Item extends Component { {open ? ( - + ) : null} diff --git a/addons/a11y/src/components/Report/index.tsx b/addons/a11y/src/components/Report/index.tsx index 2498962ccfd9..105deb459c35 100644 --- a/addons/a11y/src/components/Report/index.tsx +++ b/addons/a11y/src/components/Report/index.tsx @@ -8,12 +8,13 @@ export interface ReportProps { items: Result[]; empty: string; passes: boolean; + type: string; } -export const Report: FunctionComponent = ({ items, empty, passes }) => ( +export const Report: FunctionComponent = ({ items, empty, type, passes }) => ( {items.length ? ( - items.map(item => ) + items.map(item => ) ) : ( {empty} )} From cf21ec32898cc4bf2a076c5e43c8d92cc03975b0 Mon Sep 17 00:00:00 2001 From: codebyalex Date: Fri, 15 Mar 2019 05:28:15 -0400 Subject: [PATCH 02/43] Added toggle styling --- .../a11y/src/components/Report/Elements.tsx | 114 ++++++++++++++---- 1 file changed, 91 insertions(+), 23 deletions(-) diff --git a/addons/a11y/src/components/Report/Elements.tsx b/addons/a11y/src/components/Report/Elements.tsx index 7a21008633be..bba38626d48e 100644 --- a/addons/a11y/src/components/Report/Elements.tsx +++ b/addons/a11y/src/components/Report/Elements.tsx @@ -17,6 +17,53 @@ const ItemTitle = styled.span({ marginBottom: '4px', }); +const Switch = styled.label({ + position: 'relative', + display: 'inline-block', + width: '40px', + height: '20px', + marginLeft: '10px', + marginBottom: '-5px', +}); + +const Checkbox = styled.input({ + display: 'none', +}); + +const Slider = styled.span( + { + position: 'absolute', + cursor: 'pointer', + top: '0', + left: '0', + right: '0', + bottom: '0', + webkitTransition: '0.4s', + transition: '0.4s', + borderRadius: '34px', + '&:before': { + position: 'absolute', + content: '""', + height: '15px', + width: '15px', + left: '4px', + bottom: '3px', + backgroundColor: '#fff', + webkitTransition: '0.4s', + transition: '0.4s', + borderRadius: '50%', + }, + }, + ({ checked }: { checked: boolean | null }) => ({ + backgroundColor: checked === true ? 'green' : '#d0d0d0', + }), + ({ checked }: { checked: boolean | null }) => ({ + '&:before': { + transform: checked === true ? 'translateX(17px)' : '', + } + }), +); + interface ElementProps { element: NodeResult; passes: boolean; @@ -30,7 +77,9 @@ const Element: FunctionComponent = ({ element, passes, type }) => return ( - {element.target[0]} + {element.target[0]} + + ); @@ -62,47 +111,66 @@ interface ToggleState { export class HighlightToggle extends Component { state = { - isToggleOn: true, + isToggleOn: false, originalOutline: '', }; getIframe = memoize(1)(() => document.getElementsByTagName("iframe")[0]); componentDidMount() { - const targetElement = this.getIframe().contentDocument.querySelector(this.props.element.target[0]); - this.state.originalOutline = targetElement.style.outline; - console.log(this.props.type); + if(this.props && this.props.element && this.props.element.target[0]){ + const targetElement = this.getIframe().contentDocument.querySelector(this.props.element.target[0]); + if (targetElement) { + this.state.originalOutline = targetElement.style.outline; + } + } + } + + componentWillUnmount() { + if(this.props && this.props.element && this.props.element.target[0]){ + const targetElement = this.getIframe().contentDocument.querySelector(this.props.element.target[0]); + if (targetElement) { + targetElement.style.outline = this.state.originalOutline; + } + } } higlightRuleLocation: any = (element:any, addHighlight:boolean) => { + const PASSES_OPTION = 'PASSES'; + const VIOLATIONS_OPTION = 'VIOLATIONS'; + const INCOMPLETIONS_OPTION = 'INCOMPLETIONS'; + const targetElement = this.getIframe().contentDocument.querySelector(element.target[0]); - if (addHighlight){ - if(this.props.type==='PASSES'){ - targetElement.style.outline = '2px dotted green'; - }else if(this.props.type==='VIOLATIONS'){ - targetElement.style.outline = '2px dotted red'; - }else if(this.props.type==='INCOMPLETIONS'){ - targetElement.style.outline = '2px dotted orange'; + if (addHighlight) { + switch (this.props.type) { + case PASSES_OPTION: + targetElement.style.outline = '2px dotted green'; + break; + case VIOLATIONS_OPTION: + targetElement.style.outline = '2px dotted red'; + break; + case INCOMPLETIONS_OPTION: + targetElement.style.outline = '2px dotted orange'; + break; } } else { targetElement.style.outline = this.state.originalOutline; } - } + }; onToggle = () => { - this.setState(prevState => { - this.higlightRuleLocation(this.props.element, this.state.isToggleOn); - return { isToggleOn: !prevState.isToggleOn }; + this.setState(()=> { + this.higlightRuleLocation(this.props.element, !this.state.isToggleOn); + return { isToggleOn: !this.state.isToggleOn, originalOutline: this.state.originalOutline}; }); - } + }; render() { - const { isToggleOn } = this.state; - return ( - + + + + ); } -} +} \ No newline at end of file From ef4c0007b42cdff2455bf3513ce76f720a8b8fdb Mon Sep 17 00:00:00 2001 From: codebyalex Date: Fri, 15 Mar 2019 07:17:29 -0400 Subject: [PATCH 03/43] added enum usage for rule types in a11y --- addons/a11y/src/components/A11YPanel.tsx | 12 +++++++++--- addons/a11y/src/components/Report/Elements.tsx | 16 +++++++--------- addons/a11y/src/components/Report/Item.tsx | 3 ++- addons/a11y/src/components/Report/index.tsx | 3 ++- 4 files changed, 20 insertions(+), 14 deletions(-) diff --git a/addons/a11y/src/components/A11YPanel.tsx b/addons/a11y/src/components/A11YPanel.tsx index 35434f68bddc..7ee7c4e47a1b 100644 --- a/addons/a11y/src/components/A11YPanel.tsx +++ b/addons/a11y/src/components/A11YPanel.tsx @@ -11,6 +11,12 @@ import { Report } from './Report'; import { Tabs } from './Tabs'; import { EVENTS } from '../constants'; +export enum RuleTypes { + VIOLATIONS, + PASSES, + INCOMPLETIONS, +} + const Icon = styled(Icons)( { height: '12px', @@ -165,17 +171,17 @@ export class A11YPanel extends Component { { label: {violations.length} Violations, panel: ( - + ), }, { label: {passes.length} Passes, - panel: , + panel: , }, { label: {incomplete.length} Incomplete, panel: ( - + ), }, ]} diff --git a/addons/a11y/src/components/Report/Elements.tsx b/addons/a11y/src/components/Report/Elements.tsx index bba38626d48e..b31af56fa958 100644 --- a/addons/a11y/src/components/Report/Elements.tsx +++ b/addons/a11y/src/components/Report/Elements.tsx @@ -5,6 +5,7 @@ import memoize from 'memoizerific'; import { NodeResult } from 'axe-core'; import { Rules } from './Rules'; +import { RuleTypes } from '../A11YPanel'; const Item = styled.li({ fontWeight: 600, @@ -67,7 +68,7 @@ const Slider = styled.span( interface ElementProps { element: NodeResult; passes: boolean; - type: string; + type: RuleTypes; } const Element: FunctionComponent = ({ element, passes, type }) => { @@ -88,7 +89,7 @@ const Element: FunctionComponent = ({ element, passes, type }) => interface ElementsProps { elements: NodeResult[]; passes: boolean; - type: string; + type: RuleTypes; } export const Elements: FunctionComponent = ({ elements, passes, type }) => ( @@ -101,7 +102,7 @@ export const Elements: FunctionComponent = ({ elements, passes, t interface ToggleProps { element: any; - type: string; + type: RuleTypes; } interface ToggleState { @@ -136,20 +137,17 @@ export class HighlightToggle extends Component { } higlightRuleLocation: any = (element:any, addHighlight:boolean) => { - const PASSES_OPTION = 'PASSES'; - const VIOLATIONS_OPTION = 'VIOLATIONS'; - const INCOMPLETIONS_OPTION = 'INCOMPLETIONS'; const targetElement = this.getIframe().contentDocument.querySelector(element.target[0]); if (addHighlight) { switch (this.props.type) { - case PASSES_OPTION: + case RuleTypes.PASSES: targetElement.style.outline = '2px dotted green'; break; - case VIOLATIONS_OPTION: + case RuleTypes.VIOLATIONS: targetElement.style.outline = '2px dotted red'; break; - case INCOMPLETIONS_OPTION: + case RuleTypes.INCOMPLETIONS: targetElement.style.outline = '2px dotted orange'; break; } diff --git a/addons/a11y/src/components/Report/Item.tsx b/addons/a11y/src/components/Report/Item.tsx index b3909549ca02..287e7a3a8c84 100644 --- a/addons/a11y/src/components/Report/Item.tsx +++ b/addons/a11y/src/components/Report/Item.tsx @@ -7,6 +7,7 @@ import { Result } from 'axe-core'; import { Info } from './Info'; import { Elements } from './Elements'; import { Tags } from './Tags'; +import { RuleTypes } from '../A11YPanel'; const Wrapper = styled.div(); @@ -42,7 +43,7 @@ const HeaderBar = styled.button(({ theme }) => ({ interface ItemProps { item: Result; passes: boolean; - type: string; + type: RuleTypes; } interface ItemState { diff --git a/addons/a11y/src/components/Report/index.tsx b/addons/a11y/src/components/Report/index.tsx index 105deb459c35..b43f7090e21e 100644 --- a/addons/a11y/src/components/Report/index.tsx +++ b/addons/a11y/src/components/Report/index.tsx @@ -3,12 +3,13 @@ import { Placeholder } from '@storybook/components'; import { Result } from 'axe-core'; import { Item } from './Item'; +import { RuleTypes } from '../A11YPanel'; export interface ReportProps { items: Result[]; empty: string; passes: boolean; - type: string; + type: RuleTypes; } export const Report: FunctionComponent = ({ items, empty, type, passes }) => ( From f23e53e61b8cfbff6629caecd6152b8f0937c5e6 Mon Sep 17 00:00:00 2001 From: codebyalex Date: Fri, 15 Mar 2019 12:30:45 -0400 Subject: [PATCH 04/43] formatted and pulled toggle component into its own file --- addons/a11y/src/components/A11YPanel.tsx | 38 ++--- .../a11y/src/components/Report/Elements.tsx | 123 +--------------- .../src/components/Report/HighlightToggle.tsx | 131 ++++++++++++++++++ 3 files changed, 152 insertions(+), 140 deletions(-) create mode 100644 addons/a11y/src/components/Report/HighlightToggle.tsx diff --git a/addons/a11y/src/components/A11YPanel.tsx b/addons/a11y/src/components/A11YPanel.tsx index 7ee7c4e47a1b..1c4104c84c94 100644 --- a/addons/a11y/src/components/A11YPanel.tsx +++ b/addons/a11y/src/components/A11YPanel.tsx @@ -97,7 +97,6 @@ export class A11YPanel extends Component { componentWillUnmount() { const { api } = this.props; - api.off(STORY_RENDERED, this.request); api.off(EVENTS.RESULT, this.onUpdate); } @@ -167,24 +166,25 @@ export class A11YPanel extends Component { {violations.length} Violations, - panel: ( - - ), - }, - { - label: {passes.length} Passes, - panel: , - }, - { - label: {incomplete.length} Incomplete, - panel: ( - - ), - }, - ]} + tabs= + {[ + { + label: {violations.length} Violations, + panel: ( + + ), + }, + { + label: {passes.length} Passes, + panel: , + }, + { + label: {incomplete.length} Incomplete, + panel: ( + + ), + }, + ]} /> )} diff --git a/addons/a11y/src/components/Report/Elements.tsx b/addons/a11y/src/components/Report/Elements.tsx index b31af56fa958..5cd87ede4cef 100644 --- a/addons/a11y/src/components/Report/Elements.tsx +++ b/addons/a11y/src/components/Report/Elements.tsx @@ -6,6 +6,7 @@ import memoize from 'memoizerific'; import { NodeResult } from 'axe-core'; import { Rules } from './Rules'; import { RuleTypes } from '../A11YPanel'; +import { HighlightToggle } from './HighlightToggle'; const Item = styled.li({ fontWeight: 600, @@ -18,53 +19,6 @@ const ItemTitle = styled.span({ marginBottom: '4px', }); -const Switch = styled.label({ - position: 'relative', - display: 'inline-block', - width: '40px', - height: '20px', - marginLeft: '10px', - marginBottom: '-5px', -}); - -const Checkbox = styled.input({ - display: 'none', -}); - -const Slider = styled.span( - { - position: 'absolute', - cursor: 'pointer', - top: '0', - left: '0', - right: '0', - bottom: '0', - webkitTransition: '0.4s', - transition: '0.4s', - borderRadius: '34px', - '&:before': { - position: 'absolute', - content: '""', - height: '15px', - width: '15px', - left: '4px', - bottom: '3px', - backgroundColor: '#fff', - webkitTransition: '0.4s', - transition: '0.4s', - borderRadius: '50%', - }, - }, - ({ checked }: { checked: boolean | null }) => ({ - backgroundColor: checked === true ? 'green' : '#d0d0d0', - }), - ({ checked }: { checked: boolean | null }) => ({ - '&:before': { - transform: checked === true ? 'translateX(17px)' : '', - } - }), -); - interface ElementProps { element: NodeResult; passes: boolean; @@ -98,77 +52,4 @@ export const Elements: FunctionComponent = ({ elements, passes, t ))} -); - -interface ToggleProps { - element: any; - type: RuleTypes; -} - -interface ToggleState { - isToggleOn: boolean; - originalOutline: string | null, -} - -export class HighlightToggle extends Component { - state = { - isToggleOn: false, - originalOutline: '', - }; - - getIframe = memoize(1)(() => document.getElementsByTagName("iframe")[0]); - - componentDidMount() { - if(this.props && this.props.element && this.props.element.target[0]){ - const targetElement = this.getIframe().contentDocument.querySelector(this.props.element.target[0]); - if (targetElement) { - this.state.originalOutline = targetElement.style.outline; - } - } - } - - componentWillUnmount() { - if(this.props && this.props.element && this.props.element.target[0]){ - const targetElement = this.getIframe().contentDocument.querySelector(this.props.element.target[0]); - if (targetElement) { - targetElement.style.outline = this.state.originalOutline; - } - } - } - - higlightRuleLocation: any = (element:any, addHighlight:boolean) => { - - const targetElement = this.getIframe().contentDocument.querySelector(element.target[0]); - if (addHighlight) { - switch (this.props.type) { - case RuleTypes.PASSES: - targetElement.style.outline = '2px dotted green'; - break; - case RuleTypes.VIOLATIONS: - targetElement.style.outline = '2px dotted red'; - break; - case RuleTypes.INCOMPLETIONS: - targetElement.style.outline = '2px dotted orange'; - break; - } - } else { - targetElement.style.outline = this.state.originalOutline; - } - }; - - onToggle = () => { - this.setState(()=> { - this.higlightRuleLocation(this.props.element, !this.state.isToggleOn); - return { isToggleOn: !this.state.isToggleOn, originalOutline: this.state.originalOutline}; - }); - }; - - render() { - return ( - - - - - ); - } -} \ No newline at end of file +); \ No newline at end of file diff --git a/addons/a11y/src/components/Report/HighlightToggle.tsx b/addons/a11y/src/components/Report/HighlightToggle.tsx new file mode 100644 index 000000000000..895a078a3d8b --- /dev/null +++ b/addons/a11y/src/components/Report/HighlightToggle.tsx @@ -0,0 +1,131 @@ +import React, { Component, Fragment, } from 'react'; + +import { styled } from '@storybook/theming'; +import memoize from 'memoizerific'; + +import { NodeResult } from 'axe-core'; +import { Rules } from './Rules'; +import { RuleTypes } from '../A11YPanel'; + +const Switch = styled.label({ + position: 'relative', + display: 'inline-block', + width: '40px', + height: '20px', + marginLeft: '10px', + marginBottom: '-5px', +}); + +const Checkbox = styled.input({ + display: 'none', +}); + +const Slider = styled.span( + { + position: 'absolute', + cursor: 'pointer', + top: '0', + left: '0', + right: '0', + bottom: '0', + webkitTransition: '0.4s', + transition: '0.4s', + borderRadius: '34px', + '&:before': { + position: 'absolute', + content: '""', + height: '15px', + width: '15px', + left: '4px', + bottom: '3px', + backgroundColor: '#fff', + webkitTransition: '0.4s', + transition: '0.4s', + borderRadius: '50%', + }, + }, + ({ checked }: { checked: boolean | null }) => ({ + backgroundColor: checked === true ? 'green' : '#d0d0d0', + }), + ({ checked }: { checked: boolean | null }) => ({ + '&:before': { + transform: checked === true ? 'translateX(17px)' : '', + }, + }) +); + +interface ToggleProps { + element: any; + type: RuleTypes; +} + +interface ToggleState { + isToggleOn: boolean; + originalOutline: string | null; +} + +export class HighlightToggle extends Component { + state = { + isToggleOn: false, + originalOutline: '', + }; + + getIframe = memoize(1)(() => document.getElementsByTagName('iframe')[0]); + + componentDidMount() { + if (this.props && this.props.element && this.props.element.target[0]) { + const targetElement = this.getIframe().contentDocument.querySelector( + this.props.element.target[0] + ); + if (targetElement) { + this.state.originalOutline = targetElement.style.outline; + } + } + } + + componentWillUnmount() { + if (this.props && this.props.element && this.props.element.target[0]) { + const targetElement = this.getIframe().contentDocument.querySelector( + this.props.element.target[0] + ); + if (targetElement) { + targetElement.style.outline = this.state.originalOutline; + } + } + } + + higlightRuleLocation: any = (element: any, addHighlight: boolean) => { + const targetElement = this.getIframe().contentDocument.querySelector(element.target[0]); + if (addHighlight) { + switch (this.props.type) { + case RuleTypes.PASSES: + targetElement.style.outline = '2px dotted green'; + break; + case RuleTypes.VIOLATIONS: + targetElement.style.outline = '2px dotted red'; + break; + case RuleTypes.INCOMPLETIONS: + targetElement.style.outline = '2px dotted orange'; + break; + } + } else { + targetElement.style.outline = this.state.originalOutline; + } + }; + + onToggle = () => { + this.setState(() => { + this.higlightRuleLocation(this.props.element, !this.state.isToggleOn); + return { isToggleOn: !this.state.isToggleOn, originalOutline: this.state.originalOutline }; + }); + }; + + render() { + return ( + + + + + ); + } +} From 47b4a6e92161a68dfff4e138bc273c5a710a3514 Mon Sep 17 00:00:00 2001 From: codebyalex Date: Sat, 16 Mar 2019 06:13:17 -0400 Subject: [PATCH 05/43] added functionality that allows the Highlight Toggle to highlight more than one item --- .../a11y/src/components/Report/Elements.tsx | 4 +- .../src/components/Report/HighlightToggle.tsx | 74 ++++++++++--------- addons/a11y/src/components/Report/Item.tsx | 2 + addons/a11y/src/components/Report/index.tsx | 2 +- 4 files changed, 45 insertions(+), 37 deletions(-) diff --git a/addons/a11y/src/components/Report/Elements.tsx b/addons/a11y/src/components/Report/Elements.tsx index 5cd87ede4cef..dfb51bf5697c 100644 --- a/addons/a11y/src/components/Report/Elements.tsx +++ b/addons/a11y/src/components/Report/Elements.tsx @@ -33,7 +33,7 @@ const Element: FunctionComponent = ({ element, passes, type }) => return ( {element.target[0]} - + @@ -52,4 +52,4 @@ export const Elements: FunctionComponent = ({ elements, passes, t ))} -); \ No newline at end of file +); diff --git a/addons/a11y/src/components/Report/HighlightToggle.tsx b/addons/a11y/src/components/Report/HighlightToggle.tsx index 895a078a3d8b..2e34ac43a059 100644 --- a/addons/a11y/src/components/Report/HighlightToggle.tsx +++ b/addons/a11y/src/components/Report/HighlightToggle.tsx @@ -1,4 +1,4 @@ -import React, { Component, Fragment, } from 'react'; +import React, { Component, Fragment } from 'react'; import { styled } from '@storybook/theming'; import memoize from 'memoizerific'; @@ -55,68 +55,74 @@ const Slider = styled.span( ); interface ToggleProps { - element: any; + elements: any[]; type: RuleTypes; } interface ToggleState { isToggleOn: boolean; - originalOutline: string | null; + originalOutlineElementMap: Map | null; } export class HighlightToggle extends Component { state = { isToggleOn: false, - originalOutline: '', + originalOutlineElementMap: new Map(), }; getIframe = memoize(1)(() => document.getElementsByTagName('iframe')[0]); componentDidMount() { - if (this.props && this.props.element && this.props.element.target[0]) { - const targetElement = this.getIframe().contentDocument.querySelector( - this.props.element.target[0] - ); - if (targetElement) { - this.state.originalOutline = targetElement.style.outline; + if (this.props && this.props.elements) { + for (let element of this.props.elements) { + if (element.target[0]) { + const targetElement = this.getIframe().contentDocument.querySelector(element.target[0]); + if (targetElement && !this.state.originalOutlineElementMap.get(targetElement)) { + this.state.originalOutlineElementMap.set(targetElement, targetElement.style.outline); + } + } } } } componentWillUnmount() { - if (this.props && this.props.element && this.props.element.target[0]) { - const targetElement = this.getIframe().contentDocument.querySelector( - this.props.element.target[0] - ); - if (targetElement) { - targetElement.style.outline = this.state.originalOutline; + if (this.props && this.props.elements) { + for (let element of this.props.elements) { + if (element.target[0]) { + const targetElement = this.getIframe().contentDocument.querySelector(element.target[0]); + if (targetElement) { + targetElement.style.outline = this.state.originalOutlineElementMap.get(targetElement); + } + } } } } - higlightRuleLocation: any = (element: any, addHighlight: boolean) => { - const targetElement = this.getIframe().contentDocument.querySelector(element.target[0]); - if (addHighlight) { - switch (this.props.type) { - case RuleTypes.PASSES: - targetElement.style.outline = '2px dotted green'; - break; - case RuleTypes.VIOLATIONS: - targetElement.style.outline = '2px dotted red'; - break; - case RuleTypes.INCOMPLETIONS: - targetElement.style.outline = '2px dotted orange'; - break; - } - } else { - targetElement.style.outline = this.state.originalOutline; + higlightRuleLocations: any = (elements: any[], addHighlight: boolean) => { + for (let element of elements) { + const targetElement = this.getIframe().contentDocument.querySelector(element.target[0]); + if (addHighlight) { + switch (this.props.type) { + case RuleTypes.PASSES: + targetElement.style.outline = '2px dotted green'; + break; + case RuleTypes.VIOLATIONS: + targetElement.style.outline = '2px dotted red'; + break; + case RuleTypes.INCOMPLETIONS: + targetElement.style.outline = '2px dotted orange'; + break; + } + } else { + targetElement.style.outline = this.state.originalOutlineElementMap.get(targetElement); + } } }; onToggle = () => { this.setState(() => { - this.higlightRuleLocation(this.props.element, !this.state.isToggleOn); - return { isToggleOn: !this.state.isToggleOn, originalOutline: this.state.originalOutline }; + this.higlightRuleLocations(this.props.elements, !this.state.isToggleOn); + return { isToggleOn: !this.state.isToggleOn, originalOutlineElementMap: this.state.originalOutlineElementMap }; }); }; diff --git a/addons/a11y/src/components/Report/Item.tsx b/addons/a11y/src/components/Report/Item.tsx index 287e7a3a8c84..e9d89df08ceb 100644 --- a/addons/a11y/src/components/Report/Item.tsx +++ b/addons/a11y/src/components/Report/Item.tsx @@ -8,6 +8,7 @@ import { Info } from './Info'; import { Elements } from './Elements'; import { Tags } from './Tags'; import { RuleTypes } from '../A11YPanel'; +import { HighlightToggle } from './HighlightToggle'; const Wrapper = styled.div(); @@ -77,6 +78,7 @@ export class Item extends Component { /> {item.description} + {open ? ( diff --git a/addons/a11y/src/components/Report/index.tsx b/addons/a11y/src/components/Report/index.tsx index b43f7090e21e..0319dd7564be 100644 --- a/addons/a11y/src/components/Report/index.tsx +++ b/addons/a11y/src/components/Report/index.tsx @@ -20,4 +20,4 @@ export const Report: FunctionComponent = ({ items, empty, type, pas {empty} )} -); +); \ No newline at end of file From a216b0f69ff470f16e6b148333414b70befccfc7 Mon Sep 17 00:00:00 2001 From: Arman Sargsyan Date: Sat, 16 Mar 2019 19:38:12 +0300 Subject: [PATCH 06/43] fix(preview): zoom iframe content instead zoom iframe wrapper --- .../__snapshots__/preview.stories.storyshot | 102 +++++------------- lib/ui/src/components/preview/components.js | 19 ---- lib/ui/src/components/preview/iframe.js | 33 +++++- lib/ui/src/components/preview/preview.js | 51 +++++---- 4 files changed, 78 insertions(+), 127 deletions(-) diff --git a/lib/ui/src/components/preview/__snapshots__/preview.stories.storyshot b/lib/ui/src/components/preview/__snapshots__/preview.stories.storyshot index 6ae49e281cc9..0f427f789c1c 100644 --- a/lib/ui/src/components/preview/__snapshots__/preview.stories.storyshot +++ b/lib/ui/src/components/preview/__snapshots__/preview.stories.storyshot @@ -279,7 +279,7 @@ Array [ /> , - .emotion-2 { + .emotion-1 { position: absolute; overflow: auto; left: 0; @@ -293,7 +293,7 @@ Array [ background: transparent; } -.emotion-1 { +.emotion-0 { position: absolute; top: 0; left: 0; @@ -304,51 +304,24 @@ Array [ background: #FFFFFF; } -.emotion-0 { - position: absolute; - top: 0; - left: 0; - border: 0 none; - -webkit-transition: -webkit-transform .2s ease-out,height .2s ease-out,width .2s ease-out; - -webkit-transition: transform .2s ease-out,height .2s ease-out,width .2s ease-out; - transition: transform .2s ease-out,height .2s ease-out,width .2s ease-out; - -webkit-transform-origin: top left; - -ms-transform-origin: top left; - transform-origin: top left; - overflow: auto; -} - -.emotion-0 > iframe { - width: 100%; - height: 100%; - position: absolute; - top: 0; - left: 0; - border: 0 none; -} -
-
-