From e09fbf2eacd0f7e9b3b4b6a7545afbbd608dae92 Mon Sep 17 00:00:00 2001 From: Igor Date: Wed, 11 Apr 2018 14:30:29 +0200 Subject: [PATCH 1/3] Document properties. --- .../Plugin/Shared/components/Collapsible.js | 41 ++++++++++++------- 1 file changed, 26 insertions(+), 15 deletions(-) diff --git a/composites/Plugin/Shared/components/Collapsible.js b/composites/Plugin/Shared/components/Collapsible.js index f74818d2..93c82ded 100644 --- a/composites/Plugin/Shared/components/Collapsible.js +++ b/composites/Plugin/Shared/components/Collapsible.js @@ -72,7 +72,18 @@ const StyledHeading = wrapInHeading( StyledIconsButton, 2 ); /** * Base collapsible panel. Optionally has a heading around the button. * - * @param {object} props The properties for the component. + * @param {object} props The properties for the component. + * @param {children} props.children The content of the Collapsible. + * @param {IconsButton} props.Heading Heading button. May be wrapped or styled or both. + * @param {boolean} props.isOpen True displays the children. False means collapsed. + * @param {function} props.onToggle Function to handle the Heading click event. + * @param {string} props.prefixIcon Heading icon before the title. + * @param {string} props.prefixIconCollapsed Prefix icon when in collapsed state. + * @param {string} props.prefixIconColor CSS color of the prefix icon. + * @param {string} props.suffixIcon Heading icon after the title. + * @param {string} props.suffixIconColor CSS color of the suffix icon. + * @param {string} props.suffixIconCollapsed Suffix icon when in collapsed state. + * @param {string} props.title Title for in the Heading. * * @returns {ReactElement} A collapsible panel. */ @@ -124,7 +135,16 @@ export class Collapsible extends React.Component { /** * The constructor. * - * @param {object} props The properties for the component. + * @param {object} props The properties for the component. + * @param {number} props.headingLevel Heading level: 1 for h1, 2 for h2, etc. + * @param {boolean} props.initialIsOpen Determines if the initial isOpen state is open or closed. + * @param {string} props.prefixIcon Heading icon before the title. + * @param {string} props.prefixIconCollapsed Prefix icon when in collapsed state. + * @param {string} props.prefixIconColor CSS color of the prefix icon. + * @param {string} props.suffixIcon Heading icon after the title. + * @param {string} props.suffixIconColor CSS color of the suffix icon. + * @param {string} props.suffixIconCollapsed Suffix icon when in collapsed state. + * @param {string} props.title Title for in the Heading. * * @returns {ReactElement} Base collapsible panel. */ @@ -190,25 +210,16 @@ export class Collapsible extends React.Component { */ render() { const { isOpen } = this.state; - const { - children, - prefixIcon, prefixIconCollapsed, prefixIconColor, - suffixIcon, suffixIconCollapsed, suffixIconColor, - title, - } = this.props; + const { children } = this.props; + + const newProps = omit( this.props, [ "children" ] ); return ( { isOpen && { children } } From 01789acce7acd3f16792304d543f521a505af6d5 Mon Sep 17 00:00:00 2001 From: Igor Date: Wed, 11 Apr 2018 15:09:14 +0200 Subject: [PATCH 2/3] Add optional titleScreenReaderText to the Collapsibles. --- app/SidebarCollapsibleWrapper.js | 3 +- .../Plugin/Shared/components/Collapsible.js | 51 ++--- .../Plugin/Shared/tests/CollapsibleTest.js | 19 ++ .../__snapshots__/CollapsibleTest.js.snap | 187 ++++++++++++++++++ 4 files changed, 237 insertions(+), 23 deletions(-) diff --git a/app/SidebarCollapsibleWrapper.js b/app/SidebarCollapsibleWrapper.js index f620e5d6..18407569 100644 --- a/app/SidebarCollapsibleWrapper.js +++ b/app/SidebarCollapsibleWrapper.js @@ -34,6 +34,7 @@ export default function SidebarCollapsibleWrapper() { -

Maybe some help text here with a link Go to Yoast

+

Maybe some help text here with a link Go to Yoast

 diff --git a/composites/Plugin/Shared/components/Collapsible.js b/composites/Plugin/Shared/components/Collapsible.js index 93c82ded..b6242d6f 100644 --- a/composites/Plugin/Shared/components/Collapsible.js +++ b/composites/Plugin/Shared/components/Collapsible.js @@ -1,9 +1,11 @@ import PropTypes from "prop-types"; import React from "react"; import styled from "styled-components"; +import omit from "lodash/omit"; import colors from "../../../../style-guide/colors.json"; import { IconsButton } from "../../Shared/components/Button"; +import ScreenReaderText from "../../../../a11y/ScreenReaderText"; const StyledContainer = styled.div` background-color: ${ colors.$color_white }; @@ -72,18 +74,19 @@ const StyledHeading = wrapInHeading( StyledIconsButton, 2 ); /** * Base collapsible panel. Optionally has a heading around the button. * - * @param {object} props The properties for the component. - * @param {children} props.children The content of the Collapsible. - * @param {IconsButton} props.Heading Heading button. May be wrapped or styled or both. - * @param {boolean} props.isOpen True displays the children. False means collapsed. - * @param {function} props.onToggle Function to handle the Heading click event. - * @param {string} props.prefixIcon Heading icon before the title. - * @param {string} props.prefixIconCollapsed Prefix icon when in collapsed state. - * @param {string} props.prefixIconColor CSS color of the prefix icon. - * @param {string} props.suffixIcon Heading icon after the title. - * @param {string} props.suffixIconColor CSS color of the suffix icon. - * @param {string} props.suffixIconCollapsed Suffix icon when in collapsed state. - * @param {string} props.title Title for in the Heading. + * @param {object} props The properties for the component. + * @param {children} props.children The content of the Collapsible. + * @param {IconsButton} props.Heading Heading button. May be wrapped or styled or both. + * @param {boolean} props.isOpen True displays the children. False means collapsed. + * @param {function} props.onToggle Function to handle the Heading click event. + * @param {string} props.prefixIcon Heading icon before the title. + * @param {string} props.prefixIconCollapsed Prefix icon when in collapsed state. + * @param {string} props.prefixIconColor CSS color of the prefix icon. + * @param {string} props.suffixIcon Heading icon after the title. + * @param {string} props.suffixIconColor CSS color of the suffix icon. + * @param {string} props.suffixIconCollapsed Suffix icon when in collapsed state. + * @param {string} props.title Title for in the Heading. + * @param {string} props.titleScreenReaderText Chance for an extra * * @returns {ReactElement} A collapsible panel. */ @@ -99,6 +102,7 @@ export const CollapsibleStateless = ( props ) => { suffixIconColor={ props.suffixIconColor } > { props.title } + { props.titleScreenReaderText ? { props.titleScreenReaderText } : null } { props.isOpen && props.children } @@ -120,6 +124,7 @@ CollapsibleStateless.propTypes = { suffixIconCollapsed: PropTypes.string, suffixIconColor: PropTypes.string, title: PropTypes.string, + titleScreenReaderText: PropTypes.string, }; CollapsibleStateless.defaultProps = { @@ -135,16 +140,17 @@ export class Collapsible extends React.Component { /** * The constructor. * - * @param {object} props The properties for the component. - * @param {number} props.headingLevel Heading level: 1 for h1, 2 for h2, etc. - * @param {boolean} props.initialIsOpen Determines if the initial isOpen state is open or closed. - * @param {string} props.prefixIcon Heading icon before the title. - * @param {string} props.prefixIconCollapsed Prefix icon when in collapsed state. - * @param {string} props.prefixIconColor CSS color of the prefix icon. - * @param {string} props.suffixIcon Heading icon after the title. - * @param {string} props.suffixIconColor CSS color of the suffix icon. - * @param {string} props.suffixIconCollapsed Suffix icon when in collapsed state. - * @param {string} props.title Title for in the Heading. + * @param {object} props The properties for the component. + * @param {number} props.headingLevel Heading level: 1 for h1, 2 for h2, etc. + * @param {boolean} props.initialIsOpen Determines if the initial isOpen state is open or closed. + * @param {string} props.prefixIcon Heading icon before the title. + * @param {string} props.prefixIconCollapsed Prefix icon when in collapsed state. + * @param {string} props.prefixIconColor CSS color of the prefix icon. + * @param {string} props.suffixIcon Heading icon after the title. + * @param {string} props.suffixIconColor CSS color of the suffix icon. + * @param {string} props.suffixIconCollapsed Suffix icon when in collapsed state. + * @param {string} props.title Title for in the Heading. + * @param {string} props.titleScreenReaderText Chance for an extra * * @returns {ReactElement} Base collapsible panel. */ @@ -241,6 +247,7 @@ Collapsible.propTypes = { suffixIconCollapsed: PropTypes.string, suffixIconColor: PropTypes.string, title: PropTypes.string, + titleScreenReaderText: PropTypes.string, }; Collapsible.defaultProps = { diff --git a/composites/Plugin/Shared/tests/CollapsibleTest.js b/composites/Plugin/Shared/tests/CollapsibleTest.js index 1684ca11..5f8d61a9 100644 --- a/composites/Plugin/Shared/tests/CollapsibleTest.js +++ b/composites/Plugin/Shared/tests/CollapsibleTest.js @@ -97,4 +97,23 @@ describe( "CollapsibleStateless", () => { onToggle(); expect( component.toJSON() ).toMatchSnapshot(); } ); + + it( "matches the snapshot with prefix seo icon and screen reader text", () => { + const component = renderer.create( + {} } + > + { content } + + ); + + let tree = component.toJSON(); + expect( tree ).toMatchSnapshot(); + } ); } ); diff --git a/composites/Plugin/Shared/tests/__snapshots__/CollapsibleTest.js.snap b/composites/Plugin/Shared/tests/__snapshots__/CollapsibleTest.js.snap index badeaa72..27c831d8 100644 --- a/composites/Plugin/Shared/tests/__snapshots__/CollapsibleTest.js.snap +++ b/composites/Plugin/Shared/tests/__snapshots__/CollapsibleTest.js.snap @@ -1478,3 +1478,190 @@ exports[`CollapsibleStateless matches the snapshot when it is opened and closed

`; + +exports[`CollapsibleStateless matches the snapshot with prefix seo icon and screen reader text 1`] = ` +.c8 { + color: #555; + border-color: #ccc; + background: #f7f7f7; + box-shadow: 0 1px 0 rgba( 204,204,204,1 ); +} + +.c3 { + font-size: 0.8rem; +} + +.c4:active { + box-shadow: inset 0 2px 5px -3px rgba( 0,0,0,0.5 ); +} + +.c5:hover { + color: #000; +} + +.c6::-moz-focus-inner { + border-width: 0; +} + +.c6:focus { + outline: none; + border-color: #0066cd; + box-shadow: 0 0 3px rgba( 8,74,103,0.8 ); +} + +.c7 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + vertical-align: middle; + border-width: 1px; + border-style: solid; + margin: 0; + padding: 4px 10px; + border-radius: 3px; + cursor: pointer; + box-sizing: border-box; + font-size: inherit; + font-family: inherit; + font-weight: inherit; + text-align: left; + overflow: visible; + min-height: 32px; +} + +.c7 svg { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; +} + +.c0 { + background-color: #fff; +} + +.c2 { + width: 100%; + background-color: #fff; + padding: 15px; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + border-color: transparent; + border-radius: 0; + box-shadow: none; + color: #000; +} + +.c2 svg:first-child { + margin-right: 8px; +} + +.c2 svg:last-child { + margin-left: 8px; +} + +.c10 { + white-space: nowrap; + text-overflow: ellipsis; + overflow-x: hidden; + -ms-flex-positive: 1; + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; + font-size: 1.03em; + font-weight: 600; +} + +.c1 { + margin: 0; + font-weight: normal; +} + +.c9 { + width: 16px; + height: 16px; + -webkit-flex: none; + -ms-flex: none; + flex: none; +} + +@media all and ( -ms-high-contrast:none ),( -ms-high-contrast:active ) { + .c7::after { + display: inline-block; + content: ""; + min-height: 22px; + } +} + +
+

+ +

+

+ Vivamus rutrum velit ut nunc dignissim vulputate. +

+

+ In a purus quis leo dictum ultrices. Aenean commodo erat at pellentesque placerat. +

+

+ Ut id ex efficitur risus suscipit fermentum. +

+

+ Proin sed dolor neque. Vestibulum id leo ut ante luctus interdum sed ut sem. +

+
+`; From eb78edd2ededea3fa920ecab0368aed06a4abd69 Mon Sep 17 00:00:00 2001 From: Igor Date: Thu, 12 Apr 2018 10:40:41 +0200 Subject: [PATCH 3/3] Fix the comment as per CR. --- composites/Plugin/Shared/components/Collapsible.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/composites/Plugin/Shared/components/Collapsible.js b/composites/Plugin/Shared/components/Collapsible.js index b6242d6f..9c4c3a5e 100644 --- a/composites/Plugin/Shared/components/Collapsible.js +++ b/composites/Plugin/Shared/components/Collapsible.js @@ -86,7 +86,7 @@ const StyledHeading = wrapInHeading( StyledIconsButton, 2 ); * @param {string} props.suffixIconColor CSS color of the suffix icon. * @param {string} props.suffixIconCollapsed Suffix icon when in collapsed state. * @param {string} props.title Title for in the Heading. - * @param {string} props.titleScreenReaderText Chance for an extra + * @param {string} props.titleScreenReaderText Chance for an extra text to feed to a screenreader. * * @returns {ReactElement} A collapsible panel. */ @@ -150,7 +150,7 @@ export class Collapsible extends React.Component { * @param {string} props.suffixIconColor CSS color of the suffix icon. * @param {string} props.suffixIconCollapsed Suffix icon when in collapsed state. * @param {string} props.title Title for in the Heading. - * @param {string} props.titleScreenReaderText Chance for an extra + * @param {string} props.titleScreenReaderText Chance for an extra text to feed to a screenreader. * * @returns {ReactElement} Base collapsible panel. */