initial commit

2021-12-10 12:03:04 +00:00
commit c46c7ddbf0
3643 changed files with 582794 additions and 0 deletions
--- a/packages/woocommerce-blocks/assets/js/base/components/chip/chip.js
+++ b/packages/woocommerce-blocks/assets/js/base/components/chip/chip.js
@ -0,0 +1,74 @@
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+/** @typedef {import('react')} React */
+
+/**
+ * Component used to render a "chip" -- a list item containing some text.
+ *
+ * Each chip defaults to a list element but this can be customized by providing
+ * a wrapperElement.
+ *
+ * @param {Object} props Incoming props for the component.
+ * @param {string} props.text Text for chip content.
+ * @param {string} props.screenReaderText Screenreader text for the content.
+ * @param {string} props.element The element type for the chip.
+ * @param {string} props.className CSS class used.
+ * @param {string} props.radius Radius size.
+ * @param {React.ReactChildren|null} props.children React children.
+ * @param {Object} props.props Rest of props passed through to component.
+ */
+const Chip = ( {
+	text,
+	screenReaderText = '',
+	element = 'li',
+	className = '',
+	radius = 'small',
+	children = null,
+	...props
+} ) => {
+	const Wrapper = element;
+	const wrapperClassName = classNames(
+		className,
+		'wc-block-components-chip',
+		'wc-block-components-chip--radius-' + radius
+	);
+
+	const showScreenReaderText = Boolean(
+		screenReaderText && screenReaderText !== text
+	);
+
+	return (
+		// @ts-ignore
+		<Wrapper className={ wrapperClassName } { ...props }>
+			<span
+				aria-hidden={ showScreenReaderText }
+				className="wc-block-components-chip__text"
+			>
+				{ text }
+			</span>
+			{ showScreenReaderText && (
+				<span className="screen-reader-text">{ screenReaderText }</span>
+			) }
+			{ children }
+		</Wrapper>
+	);
+};
+
+Chip.propTypes = {
+	text: PropTypes.node.isRequired,
+	screenReaderText: PropTypes.string,
+	element: PropTypes.elementType,
+	className: PropTypes.string,
+	radius: PropTypes.oneOf( [ 'none', 'small', 'medium', 'large' ] ),
+};
+
+export default Chip;
--- a/packages/woocommerce-blocks/assets/js/base/components/chip/index.js
+++ b/packages/woocommerce-blocks/assets/js/base/components/chip/index.js
@ -0,0 +1,2 @@
+export { default as Chip } from './chip';
+export { default as RemovableChip } from './removable-chip';
--- a/packages/woocommerce-blocks/assets/js/base/components/chip/removable-chip.js
+++ b/packages/woocommerce-blocks/assets/js/base/components/chip/removable-chip.js
@ -0,0 +1,105 @@
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { __, sprintf } from '@wordpress/i18n';
+import { Icon, noAlt } from '@woocommerce/icons';
+
+/**
+ * Internal dependencies
+ */
+import Chip from './chip.js';
+
+/**
+ * Component used to render a "chip" -- an item containing some text with
+ * an X button to remove/dismiss each chip.
+ *
+ * @param {Object} props Incoming props for the component.
+ * @param {string} props.ariaLabel Aria label content.
+ * @param {string} props.className CSS class used.
+ * @param {boolean} props.disabled Whether action is disabled or not.
+ * @param {function():any} props.onRemove Function to call when remove event is fired.
+ * @param {boolean} props.removeOnAnyClick Whether to expand click area for remove event.
+ * @param {string} props.text The text for the chip.
+ * @param {string} props.screenReaderText The screen reader text for the chip.
+ * @param {Object} props.props Rest of props passed into component.
+ */
+const RemovableChip = ( {
+	ariaLabel = '',
+	className = '',
+	disabled = false,
+	onRemove = () => void null,
+	removeOnAnyClick = false,
+	text,
+	screenReaderText = '',
+	...props
+} ) => {
+	const RemoveElement = removeOnAnyClick ? 'span' : 'button';
+
+	if ( ! ariaLabel ) {
+		const ariaLabelText =
+			screenReaderText && typeof screenReaderText === 'string'
+				? screenReaderText
+				: text;
+		ariaLabel =
+			typeof ariaLabelText !== 'string'
+				? /* translators: Remove chip. */
+				  __( 'Remove', 'woocommerce' )
+				: sprintf(
+						/* translators: %s text of the chip to remove. */
+						__( 'Remove "%s"', 'woocommerce' ),
+						ariaLabelText
+				  );
+	}
+
+	const clickableElementProps = {
+		'aria-label': ariaLabel,
+		disabled,
+		onClick: onRemove,
+		onKeyDown: ( e ) => {
+			if ( e.key === 'Backspace' || e.key === 'Delete' ) {
+				onRemove();
+			}
+		},
+	};
+
+	const chipProps = removeOnAnyClick ? clickableElementProps : {};
+	const removeProps = removeOnAnyClick
+		? { 'aria-hidden': true }
+		: clickableElementProps;
+
+	return (
+		<Chip
+			{ ...props }
+			{ ...chipProps }
+			className={ classNames( className, 'is-removable' ) }
+			element={ removeOnAnyClick ? 'button' : props.element }
+			screenReaderText={ screenReaderText }
+			text={ text }
+		>
+			<RemoveElement
+				className="wc-block-components-chip__remove"
+				{ ...removeProps }
+			>
+				<Icon
+					className="wc-block-components-chip__remove-icon"
+					srcElement={ noAlt }
+					size={ 16 }
+				/>
+			</RemoveElement>
+		</Chip>
+	);
+};
+
+RemovableChip.propTypes = {
+	text: PropTypes.node.isRequired,
+	ariaLabel: PropTypes.string,
+	className: PropTypes.string,
+	disabled: PropTypes.bool,
+	onRemove: PropTypes.func,
+	removeOnAnyClick: PropTypes.bool,
+	screenReaderText: PropTypes.string,
+};
+
+export default RemovableChip;
--- a/packages/woocommerce-blocks/assets/js/base/components/chip/stories/index.js
+++ b/packages/woocommerce-blocks/assets/js/base/components/chip/stories/index.js
@ -0,0 +1,42 @@
+/**
+ * External dependencies
+ */
+import { text, select, boolean } from '@storybook/addon-knobs';
+
+/**
+ * Internal dependencies
+ */
+import * as components from '../';
+
+export default {
+	title: 'WooCommerce Blocks/@base-components/Chip',
+	component: Chip,
+};
+
+const radii = [ 'none', 'small', 'medium', 'large' ];
+
+export const Chip = () => (
+	<components.Chip
+		text={ text( 'Text', 'example' ) }
+		radius={ select( 'Radius', radii ) }
+		screenReaderText={ text(
+			'Screen reader text',
+			'Example screen reader text'
+		) }
+		element={ select( 'Element', [ 'li', 'div', 'span' ], 'li' ) }
+	/>
+);
+
+export const RemovableChip = () => (
+	<components.RemovableChip
+		text={ text( 'Text', 'example' ) }
+		radius={ select( 'Radius', radii ) }
+		screenReaderText={ text(
+			'Screen reader text',
+			'Example screen reader text'
+		) }
+		disabled={ boolean( 'Disabled', false ) }
+		removeOnAnyClick={ boolean( 'Remove on any click', false ) }
+		element={ select( 'Element', [ 'li', 'div', 'span' ], 'li' ) }
+	/>
+);
--- a/packages/woocommerce-blocks/assets/js/base/components/chip/style.scss
+++ b/packages/woocommerce-blocks/assets/js/base/components/chip/style.scss
@ -0,0 +1,77 @@
+.wc-block-components-chip {
+	@include reset-typography();
+	align-items: center;
+	border: 0;
+	display: inline-flex;
+	padding: em($gap-smallest * 0.5) 0.5em em($gap-smallest);
+	margin: 0 0.365em 0.365em 0;
+	border-radius: 0;
+	line-height: 1;
+	max-width: 100%;
+
+	// Chip might be a button, so we need to override theme styles.
+	&,
+	&:hover,
+	&:focus,
+	&:active {
+		background: $gray-200;
+		color: $gray-900;
+	}
+
+	&.wc-block-components-chip--radius-small {
+		border-radius: 3px;
+	}
+	&.wc-block-components-chip--radius-medium {
+		border-radius: 0.433em;
+	}
+	&.wc-block-components-chip--radius-large {
+		border-radius: 2em;
+		padding-left: 0.75em;
+		padding-right: 0.75em;
+	}
+	.wc-block-components-chip__text {
+		flex-grow: 1;
+	}
+	&.is-removable {
+		padding-right: 0.5em;
+	}
+	&.is-removable .wc-block-components-chip__text {
+		padding-right: 0.25em;
+	}
+	.wc-block-components-chip__remove {
+		@include font-size(smaller);
+		background: transparent;
+		border: 0;
+		appearance: none;
+		padding: 0;
+	}
+
+	.wc-block-components-chip__remove-icon {
+		vertical-align: middle;
+	}
+}
+
+.theme-twentytwentyone {
+	.wc-block-components-chip,
+	.wc-block-components-chip:active,
+	.wc-block-components-chip:focus,
+	.wc-block-components-chip:hover {
+		background: #fff;
+		button.wc-block-components-chip__remove:not(:hover):not(:active):not(.has-background) {
+			background: transparent;
+		}
+	}
+}
+
+button.wc-block-components-chip:hover > .wc-block-components-chip__remove,
+button.wc-block-components-chip:focus > .wc-block-components-chip__remove,
+.wc-block-components-chip__remove:hover,
+.wc-block-components-chip__remove:focus {
+	fill: $alert-red;
+}
+
+button.wc-block-components-chip:disabled > .wc-block-components-chip__remove,
+.wc-block-components-chip__remove:disabled {
+	fill: $gray-600;
+	cursor: not-allowed;
+}
--- a/packages/woocommerce-blocks/assets/js/base/components/chip/test/snapshots/index.js.snap
+++ b/packages/woocommerce-blocks/assets/js/base/components/chip/test/snapshots/index.js.snap
@ -0,0 +1,312 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Chip should render children nodes 1`] = `
+<li
+  className="wc-block-components-chip wc-block-components-chip--radius-small"
+>
+  <span
+    aria-hidden={false}
+    className="wc-block-components-chip__text"
+  >
+    Test
+  </span>
+  Lorem Ipsum
+</li>
+`;
+
+exports[`Chip should render defined radius 1`] = `
+<li
+  className="wc-block-components-chip wc-block-components-chip--radius-large"
+>
+  <span
+    aria-hidden={false}
+    className="wc-block-components-chip__text"
+  >
+    Test
+  </span>
+</li>
+`;
+
+exports[`Chip should render nodes as the text 1`] = `
+<li
+  className="wc-block-components-chip wc-block-components-chip--radius-small"
+>
+  <span
+    aria-hidden={false}
+    className="wc-block-components-chip__text"
+  >
+    <h1>
+      Test
+    </h1>
+  </span>
+</li>
+`;
+
+exports[`Chip should render screen reader text 1`] = `
+<li
+  className="wc-block-components-chip wc-block-components-chip--radius-small"
+>
+  <span
+    aria-hidden={true}
+    className="wc-block-components-chip__text"
+  >
+    Test
+  </span>
+  <span
+    className="screen-reader-text"
+  >
+    Test 2
+  </span>
+</li>
+`;
+
+exports[`Chip should render text 1`] = `
+<li
+  className="wc-block-components-chip wc-block-components-chip--radius-small"
+>
+  <span
+    aria-hidden={false}
+    className="wc-block-components-chip__text"
+  >
+    Test
+  </span>
+</li>
+`;
+
+exports[`Chip with custom wrapper should render a chip made up of a div instead of a li 1`] = `
+<div
+  className="wc-block-components-chip wc-block-components-chip--radius-small"
+>
+  <span
+    aria-hidden={false}
+    className="wc-block-components-chip__text"
+  >
+    Test
+  </span>
+</div>
+`;
+
+exports[`RemovableChip should render custom aria label 1`] = `
+<li
+  className="is-removable wc-block-components-chip wc-block-components-chip--radius-small"
+>
+  <span
+    aria-hidden={false}
+    className="wc-block-components-chip__text"
+  >
+    <h1>
+      Test
+    </h1>
+  </span>
+  <button
+    aria-label="Aria test"
+    className="wc-block-components-chip__remove"
+    disabled={false}
+    onClick={[Function]}
+    onKeyDown={[Function]}
+  >
+    <svg
+      aria-hidden={true}
+      className="wc-block-components-chip__remove-icon"
+      focusable={false}
+      height={16}
+      role="img"
+      viewBox="0 0 20 20"
+      width={16}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M14.95 6.46L11.41 10l3.54 3.54-1.41 1.41L10 11.42l-3.53 3.53-1.42-1.42L8.58 10 5.05 6.47l1.42-1.42L10 8.58l3.54-3.53z"
+      />
+    </svg>
+  </button>
+</li>
+`;
+
+exports[`RemovableChip should render default aria label if text is a node 1`] = `
+<li
+  className="is-removable wc-block-components-chip wc-block-components-chip--radius-small"
+>
+  <span
+    aria-hidden={true}
+    className="wc-block-components-chip__text"
+  >
+    <h1>
+      Test
+    </h1>
+  </span>
+  <span
+    className="screen-reader-text"
+  >
+    Test 2
+  </span>
+  <button
+    aria-label="Remove \\"Test 2\\""
+    className="wc-block-components-chip__remove"
+    disabled={false}
+    onClick={[Function]}
+    onKeyDown={[Function]}
+  >
+    <svg
+      aria-hidden={true}
+      className="wc-block-components-chip__remove-icon"
+      focusable={false}
+      height={16}
+      role="img"
+      viewBox="0 0 20 20"
+      width={16}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M14.95 6.46L11.41 10l3.54 3.54-1.41 1.41L10 11.42l-3.53 3.53-1.42-1.42L8.58 10 5.05 6.47l1.42-1.42L10 8.58l3.54-3.53z"
+      />
+    </svg>
+  </button>
+</li>
+`;
+
+exports[`RemovableChip should render screen reader text aria label 1`] = `
+<li
+  className="is-removable wc-block-components-chip wc-block-components-chip--radius-small"
+>
+  <span
+    aria-hidden={true}
+    className="wc-block-components-chip__text"
+  >
+    Test
+  </span>
+  <span
+    className="screen-reader-text"
+  >
+    Test 2
+  </span>
+  <button
+    aria-label="Remove \\"Test 2\\""
+    className="wc-block-components-chip__remove"
+    disabled={false}
+    onClick={[Function]}
+    onKeyDown={[Function]}
+  >
+    <svg
+      aria-hidden={true}
+      className="wc-block-components-chip__remove-icon"
+      focusable={false}
+      height={16}
+      role="img"
+      viewBox="0 0 20 20"
+      width={16}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M14.95 6.46L11.41 10l3.54 3.54-1.41 1.41L10 11.42l-3.53 3.53-1.42-1.42L8.58 10 5.05 6.47l1.42-1.42L10 8.58l3.54-3.53z"
+      />
+    </svg>
+  </button>
+</li>
+`;
+
+exports[`RemovableChip should render text and the remove button 1`] = `
+<li
+  className="is-removable wc-block-components-chip wc-block-components-chip--radius-small"
+>
+  <span
+    aria-hidden={false}
+    className="wc-block-components-chip__text"
+  >
+    Test
+  </span>
+  <button
+    aria-label="Remove \\"Test\\""
+    className="wc-block-components-chip__remove"
+    disabled={false}
+    onClick={[Function]}
+    onKeyDown={[Function]}
+  >
+    <svg
+      aria-hidden={true}
+      className="wc-block-components-chip__remove-icon"
+      focusable={false}
+      height={16}
+      role="img"
+      viewBox="0 0 20 20"
+      width={16}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M14.95 6.46L11.41 10l3.54 3.54-1.41 1.41L10 11.42l-3.53 3.53-1.42-1.42L8.58 10 5.05 6.47l1.42-1.42L10 8.58l3.54-3.53z"
+      />
+    </svg>
+  </button>
+</li>
+`;
+
+exports[`RemovableChip should render with disabled remove button 1`] = `
+<li
+  className="is-removable wc-block-components-chip wc-block-components-chip--radius-small"
+>
+  <span
+    aria-hidden={false}
+    className="wc-block-components-chip__text"
+  >
+    Test
+  </span>
+  <button
+    aria-label="Remove \\"Test\\""
+    className="wc-block-components-chip__remove"
+    disabled={true}
+    onClick={[Function]}
+    onKeyDown={[Function]}
+  >
+    <svg
+      aria-hidden={true}
+      className="wc-block-components-chip__remove-icon"
+      focusable={false}
+      height={16}
+      role="img"
+      viewBox="0 0 20 20"
+      width={16}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M14.95 6.46L11.41 10l3.54 3.54-1.41 1.41L10 11.42l-3.53 3.53-1.42-1.42L8.58 10 5.05 6.47l1.42-1.42L10 8.58l3.54-3.53z"
+      />
+    </svg>
+  </button>
+</li>
+`;
+
+exports[`RemovableChip with removeOnAnyClick should be a button when removeOnAnyClick is set to true 1`] = `
+<button
+  aria-label="Remove \\"Test\\""
+  className="is-removable wc-block-components-chip wc-block-components-chip--radius-small"
+  disabled={false}
+  onClick={[Function]}
+  onKeyDown={[Function]}
+>
+  <span
+    aria-hidden={false}
+    className="wc-block-components-chip__text"
+  >
+    Test
+  </span>
+  <span
+    aria-hidden={true}
+    className="wc-block-components-chip__remove"
+  >
+    <svg
+      aria-hidden={true}
+      className="wc-block-components-chip__remove-icon"
+      focusable={false}
+      height={16}
+      role="img"
+      viewBox="0 0 20 20"
+      width={16}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M14.95 6.46L11.41 10l3.54 3.54-1.41 1.41L10 11.42l-3.53 3.53-1.42-1.42L8.58 10 5.05 6.47l1.42-1.42L10 8.58l3.54-3.53z"
+      />
+    </svg>
+  </span>
+</button>
+`;
--- a/packages/woocommerce-blocks/assets/js/base/components/chip/test/index.js
+++ b/packages/woocommerce-blocks/assets/js/base/components/chip/test/index.js
@ -0,0 +1,109 @@
+/**
+ * External dependencies
+ */
+import TestRenderer from 'react-test-renderer';
+
+/**
+ * Internal dependencies
+ */
+import { Chip, RemovableChip } from '..';
+
+describe( 'Chip', () => {
+	test( 'should render text', () => {
+		const component = TestRenderer.create( <Chip text="Test" /> );
+
+		expect( component.toJSON() ).toMatchSnapshot();
+	} );
+
+	test( 'should render nodes as the text', () => {
+		const component = TestRenderer.create(
+			<Chip text={ <h1>Test</h1> } />
+		);
+
+		expect( component.toJSON() ).toMatchSnapshot();
+	} );
+
+	test( 'should render defined radius', () => {
+		const component = TestRenderer.create(
+			<Chip text="Test" radius="large" />
+		);
+
+		expect( component.toJSON() ).toMatchSnapshot();
+	} );
+
+	test( 'should render screen reader text', () => {
+		const component = TestRenderer.create(
+			<Chip text="Test" screenReaderText="Test 2" />
+		);
+
+		expect( component.toJSON() ).toMatchSnapshot();
+	} );
+
+	test( 'should render children nodes', () => {
+		const component = TestRenderer.create(
+			<Chip text="Test">Lorem Ipsum</Chip>
+		);
+
+		expect( component.toJSON() ).toMatchSnapshot();
+	} );
+
+	describe( 'with custom wrapper', () => {
+		test( 'should render a chip made up of a div instead of a li', () => {
+			const component = TestRenderer.create(
+				<Chip text="Test" element="div" />
+			);
+
+			expect( component.toJSON() ).toMatchSnapshot();
+		} );
+	} );
+} );
+
+describe( 'RemovableChip', () => {
+	test( 'should render text and the remove button', () => {
+		const component = TestRenderer.create( <RemovableChip text="Test" /> );
+
+		expect( component.toJSON() ).toMatchSnapshot();
+	} );
+
+	test( 'should render with disabled remove button', () => {
+		const component = TestRenderer.create(
+			<RemovableChip text="Test" disabled={ true } />
+		);
+
+		expect( component.toJSON() ).toMatchSnapshot();
+	} );
+
+	test( 'should render custom aria label', () => {
+		const component = TestRenderer.create(
+			<RemovableChip text={ <h1>Test</h1> } ariaLabel="Aria test" />
+		);
+
+		expect( component.toJSON() ).toMatchSnapshot();
+	} );
+
+	test( 'should render default aria label if text is a node', () => {
+		const component = TestRenderer.create(
+			<RemovableChip text={ <h1>Test</h1> } screenReaderText="Test 2" />
+		);
+
+		expect( component.toJSON() ).toMatchSnapshot();
+	} );
+
+	test( 'should render screen reader text aria label', () => {
+		const component = TestRenderer.create(
+			<RemovableChip text="Test" screenReaderText="Test 2" />
+		);
+
+		expect( component.toJSON() ).toMatchSnapshot();
+	} );
+
+	describe( 'with removeOnAnyClick', () => {
+		test( 'should be a button when removeOnAnyClick is set to true', () => {
+			const component = TestRenderer.create(
+				<RemovableChip text="Test" removeOnAnyClick={ true } />
+			);
+
+			expect( component.toJSON() ).toMatchSnapshot();
+		} );
+	} );
+} );