Storybook: Add ColorPicker component (#18013)

* Add color picker component to Storybook * Switch screen-reader-text to new VisuallyHidden * Update ColorPicker tests snapshots * Add story for showing Alpha Channel * Move state out of exported component * Lowercase story name
WordPress · Oct 28, 2019 · 711f9ff · 711f9ff
1 parent 5a88ec3
commit 711f9ff
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 22 deletions.
diff --git a/packages/components/src/color-picker/hue.js b/packages/components/src/color-picker/hue.js
@@ -43,6 +43,7 @@ import { TAB } from '@wordpress/keycodes';
  */
 import { calculateHueChange } from './utils';
 import KeyboardShortcuts from '../keyboard-shortcuts';
+import VisuallyHidden from '../visually-hidden';
 
 export class Hue extends Component {
 	constructor() {
@@ -157,12 +158,11 @@ export class Hue extends Component {
 							style={ pointerLocation }
 							onKeyDown={ this.preventKeyEvents }
 						/>
-						<p
-							className="components-color-picker__hue-description screen-reader-text"
+						<VisuallyHidden as="p"
 							id={ `components-color-picker__hue-description-${ instanceId }` }
 						>
 							{ __( 'Move the arrow left or right to change hue.' ) }
-						</p>
+						</VisuallyHidden>
 					</div>
 					{ /* eslint-enable jsx-a11y/no-static-element-interactions */ }
 				</div>

diff --git a/packages/components/src/color-picker/inputs.js b/packages/components/src/color-picker/inputs.js
@@ -17,6 +17,7 @@ import { pure } from '@wordpress/compose';
  */
 import IconButton from '../icon-button';
 import TextControl from '../text-control';
+import VisuallyHidden from '../visually-hidden';
 import { isValidHex } from './utils';
 
 /* Wrapper for TextControl, only used to handle intermediate state while typing. */
@@ -175,9 +176,9 @@ export class Inputs extends Component {
 		} else if ( this.state.view === 'rgb' ) {
 			return (
 				<fieldset>
-					<legend className="screen-reader-text">
+					<VisuallyHidden as="legend">
 						{ __( 'Color value in RGB' ) }
-					</legend>
+					</VisuallyHidden>
 					<div className="components-color-picker__inputs-fields">
 						<Input
 							source={ this.state.view }
@@ -228,9 +229,9 @@ export class Inputs extends Component {
 		} else if ( this.state.view === 'hsl' ) {
 			return (
 				<fieldset>
-					<legend className="screen-reader-text">
+					<VisuallyHidden as="legend">
 						{ __( 'Color value in HSL' ) }
-					</legend>
+					</VisuallyHidden>
 					<div className="components-color-picker__inputs-fields">
 						<Input
 							source={ this.state.view }

diff --git a/packages/components/src/color-picker/saturation.js b/packages/components/src/color-picker/saturation.js
@@ -43,6 +43,7 @@ import { compose, pure, withInstanceId } from '@wordpress/compose';
  */
 import { calculateSaturationChange } from './utils';
 import KeyboardShortcuts from '../keyboard-shortcuts';
+import VisuallyHidden from '../visually-hidden';
 
 export class Saturation extends Component {
 	constructor( props ) {
@@ -171,13 +172,12 @@ export class Saturation extends Component {
 						style={ pointerLocation }
 						onKeyDown={ this.preventKeyEvents }
 					/>
-					<div
-						className="screen-reader-text"
+					<VisuallyHidden
 						id={ `color-picker-saturation-${ instanceId }` }>
 						{ __(
 							'Use your arrow keys to change the base color. Move up to lighten the color, down to darken, left to decrease saturation, and right to increase saturation.'
 						) }
-					</div>
+					</VisuallyHidden>
 				</div>
 			</KeyboardShortcuts>
 		);

diff --git a/packages/components/src/color-picker/stories/index.js b/packages/components/src/color-picker/stories/index.js
@@ -0,0 +1,39 @@
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import ColorPicker from '../';
+
+export default { title: 'ColorPicker', component: ColorPicker };
+
+const ColorPickerWithState = ( { ...props } ) => {
+	const [ color, setColor ] = useState( '#f00' );
+	return (
+		<ColorPicker
+			{ ...props }
+			color={ color }
+			onChangeComplete={ ( value ) => setColor( value.hex ) }
+		/>
+	);
+};
+
+export const _default = () => {
+	return (
+		<ColorPickerWithState
+			disableAlpha
+		/>
+	);
+};
+
+export const alphaEnabled = () => {
+	return (
+		<ColorPickerWithState
+			disableAlpha={ false }
+		/>
+	);
+};
diff --git a/packages/components/src/color-picker/test/__snapshots__/index.js.snap b/packages/components/src/color-picker/test/__snapshots__/index.js.snap
@@ -39,7 +39,7 @@ exports[`ColorPicker should commit changes to all views on blur 1`] = `
           }
         />
         <div
-          className="screen-reader-text"
+          className="components-visually-hidden"
           id="color-picker-saturation-2"
         >
           Use your arrow keys to change the base color. Move up to lighten the color, down to darken, left to decrease saturation, and right to increase saturation.
@@ -99,7 +99,7 @@ exports[`ColorPicker should commit changes to all views on blur 1`] = `
                 tabIndex="0"
               />
               <p
-                className="components-color-picker__hue-description screen-reader-text"
+                className="components-visually-hidden"
                 id="components-color-picker__hue-description-2"
               >
                 Move the arrow left or right to change hue.
@@ -213,7 +213,7 @@ exports[`ColorPicker should commit changes to all views on keyDown = DOWN 1`] =
           }
         />
         <div
-          className="screen-reader-text"
+          className="components-visually-hidden"
           id="color-picker-saturation-4"
         >
           Use your arrow keys to change the base color. Move up to lighten the color, down to darken, left to decrease saturation, and right to increase saturation.
@@ -273,7 +273,7 @@ exports[`ColorPicker should commit changes to all views on keyDown = DOWN 1`] =
                 tabIndex="0"
               />
               <p
-                className="components-color-picker__hue-description screen-reader-text"
+                className="components-visually-hidden"
                 id="components-color-picker__hue-description-4"
               >
                 Move the arrow left or right to change hue.
@@ -387,7 +387,7 @@ exports[`ColorPicker should commit changes to all views on keyDown = ENTER 1`] =
           }
         />
         <div
-          className="screen-reader-text"
+          className="components-visually-hidden"
           id="color-picker-saturation-5"
         >
           Use your arrow keys to change the base color. Move up to lighten the color, down to darken, left to decrease saturation, and right to increase saturation.
@@ -447,7 +447,7 @@ exports[`ColorPicker should commit changes to all views on keyDown = ENTER 1`] =
                 tabIndex="0"
               />
               <p
-                className="components-color-picker__hue-description screen-reader-text"
+                className="components-visually-hidden"
                 id="components-color-picker__hue-description-5"
               >
                 Move the arrow left or right to change hue.
@@ -561,7 +561,7 @@ exports[`ColorPicker should commit changes to all views on keyDown = UP 1`] = `
           }
         />
         <div
-          className="screen-reader-text"
+          className="components-visually-hidden"
           id="color-picker-saturation-3"
         >
           Use your arrow keys to change the base color. Move up to lighten the color, down to darken, left to decrease saturation, and right to increase saturation.
@@ -621,7 +621,7 @@ exports[`ColorPicker should commit changes to all views on keyDown = UP 1`] = `
                 tabIndex="0"
               />
               <p
-                className="components-color-picker__hue-description screen-reader-text"
+                className="components-visually-hidden"
                 id="components-color-picker__hue-description-3"
               >
                 Move the arrow left or right to change hue.
@@ -735,7 +735,7 @@ exports[`ColorPicker should only update input view for draft changes 1`] = `
           }
         />
         <div
-          className="screen-reader-text"
+          className="components-visually-hidden"
           id="color-picker-saturation-1"
         >
           Use your arrow keys to change the base color. Move up to lighten the color, down to darken, left to decrease saturation, and right to increase saturation.
@@ -795,7 +795,7 @@ exports[`ColorPicker should only update input view for draft changes 1`] = `
                 tabIndex="0"
               />
               <p
-                className="components-color-picker__hue-description screen-reader-text"
+                className="components-visually-hidden"
                 id="components-color-picker__hue-description-1"
               >
                 Move the arrow left or right to change hue.
@@ -909,7 +909,7 @@ exports[`ColorPicker should render color picker 1`] = `
           }
         />
         <div
-          className="screen-reader-text"
+          className="components-visually-hidden"
           id="color-picker-saturation-0"
         >
           Use your arrow keys to change the base color. Move up to lighten the color, down to darken, left to decrease saturation, and right to increase saturation.
@@ -969,7 +969,7 @@ exports[`ColorPicker should render color picker 1`] = `
                 tabIndex="0"
               />
               <p
-                className="components-color-picker__hue-description screen-reader-text"
+                className="components-visually-hidden"
                 id="components-color-picker__hue-description-0"
               >
                 Move the arrow left or right to change hue.