Components: Introduce a basic ProgressBar component

docs/manifest.json

@@ -1115,6 +1115,12 @@
 		"markdown_source": "../packages/components/src/popover/README.md",
 		"parent": "components"
 	},
+	{
+		"title": "ProgressBar",
+		"slug": "progress-bar",
+		"markdown_source": "../packages/components/src/progress-bar/README.md",
+		"parent": "components"
+	},
 	{
 		"title": "QueryControls",
 		"slug": "query-controls",

packages/components/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### New Feature
+
+-   Add a new `ProgressBar` component. ([#53030](https://github.com/WordPress/gutenberg/pull/53030)).
+
 ### Enhancements
 
 -   `ColorPalette`, `BorderControl`: Don't hyphenate hex value in `aria-label` ([#52932](https://github.com/WordPress/gutenberg/pull/52932)).

packages/components/src/index.ts

@@ -128,6 +128,7 @@ export { default as PanelHeader } from './panel/header';
 export { default as PanelRow } from './panel/row';
 export { default as Placeholder } from './placeholder';
 export { default as Popover } from './popover';
+export { default as __experimentalProgressBar } from './progress-bar';
 export { default as QueryControls } from './query-controls';
 export { default as __experimentalRadio } from './radio-group/radio';
 export { default as __experimentalRadioGroup } from './radio-group';

packages/components/src/progress-bar/README.md

@@ -0,0 +1,47 @@
+# ProgressBar
+
+A simple horizontal progress bar component.
+
+Supports two modes: determinate and indeterminate. A progress bar is determinate when a specific progress value has been specified (from 0 to 100), and indeterminate when a value hasn't been specified.
+
+### Usage
+
+```jsx
+/**
+ * WordPress dependencies
+ */
+import { __experimentalProgressBar as ProgressBar } from '@wordpress/components';
+
+export const MyProgressBar = () => {
+	return <ProgressBar value={ 30 } />;
+};
+```
+
+### Props
+
+The component accepts the following props:
+
+#### `value`: `number`
+
+The progress value, a number from 0 to 100.
+If a `value` is not specified, the progress bar will be considered indeterminate.
+
+-   Required: No
+
+#### `trackColor`: `string`
+
+Optional color of the progress bar track.
+
+-   Required: No
+
+#### `indicatorColor`: `string`
+
+Optional color of the progress bar indicator.
+
+-   Required: No
+
+##### `className`: `string`
+
+A CSS class to apply to the underlying `div` element, serving as a progress bar track.
+
+- Required: No

packages/components/src/progress-bar/index.tsx

@@ -0,0 +1,42 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import type { ProgressBarProps } from './types';
+import type { WordPressComponentProps } from '../ui/context';
+
+// Width of the indicator for the indeterminate progress bar
+export const INDETERMINATE_TRACK_WIDTH = 50;
+
+export function ProgressBar(
+	props: WordPressComponentProps< ProgressBarProps, 'div', false >
+) {
+	const { className, value, indicatorColor, trackColor } = props;
+	const isIndeterminate = ! Number.isFinite( value );
+	const wrapperClasses = classnames( 'components-progress-bar', className, {
+		'is-indeterminate': isIndeterminate,
+	} );
+	const trackStyle = {
+		backgroundColor: trackColor ? trackColor : undefined,
+	};
+	const indicatorStyle = {
+		width: `${ isIndeterminate ? INDETERMINATE_TRACK_WIDTH : value }%`,
+		backgroundColor: indicatorColor ? indicatorColor : undefined,
+	};
+
+	return (
+		<div className={ wrapperClasses } style={ trackStyle }>
+			<div
+				className="components-progress-bar__indicator"
+				style={ indicatorStyle }
+			/>
+			<progress max={ 100 } value={ value } />
+		</div>
+	);
+}
+
+export default ProgressBar;

packages/components/src/progress-bar/stories/index.tsx

@@ -0,0 +1,35 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import { ProgressBar } from '..';
+
+const meta: ComponentMeta< typeof ProgressBar > = {
+	component: ProgressBar,
+	title: 'Components/ProgressBar',
+	argTypes: {
+		indicatorColor: { control: { type: 'color' } },
+		trackColor: { control: { type: 'color' } },
+		value: { control: { type: 'number', min: 0, max: 100, step: 1 } },
+	},
+	parameters: {
+		controls: {
+			expanded: true,
+		},
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const Template: ComponentStory< typeof ProgressBar > = ( { ...args } ) => {
+	return <ProgressBar { ...args } />;
+};
+
+export const Default: ComponentStory< typeof ProgressBar > = Template.bind(
+	{}
+);
+Default.args = {};

packages/components/src/progress-bar/style.scss

@@ -0,0 +1,37 @@
+.components-progress-bar {
+	position: relative;
+	overflow: hidden;
+	width: 100%;
+	height: 5px;
+	background-color: $components-color-gray-100;
+
+	progress {
+		display: none;
+	}
+
+	.components-progress-bar__indicator {
+		display: inline-block;
+		position: absolute;
+		top: 0;
+		height: 100%;
+		background-color: $components-color-accent;
+	}
+
+	&.is-indeterminate .components-progress-bar__indicator {
+		animation-duration: 1.5s;
+		animation-timing-function: ease-in-out;
+		animation-iteration-count: infinite;
+		animation-name: progress-bar-indication;
+
+		@include reduce-motion("animation");
+	}
+}
+
+@keyframes progress-bar-indication {
+	from {
+		left: -50%;
+	}
+	to {
+		left: 100%;
+	}
+}

packages/components/src/progress-bar/test/__snapshots__/index.tsx.snap

@@ -0,0 +1,51 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ProgressBar should be able to specify custom track and indicator colors 1`] = `
+<div>
+  <div
+    class="components-progress-bar is-indeterminate"
+    style="background-color: rgb(217, 217, 217);"
+  >
+    <div
+      class="components-progress-bar__indicator"
+      style="width: 50%; background-color: rgb(153, 0, 0);"
+    />
+    <progress
+      max="100"
+    />
+  </div>
+</div>
+`;
+
+exports[`ProgressBar should have an \`is-indeterminate\` className if \`value\` is not provided 1`] = `
+<div>
+  <div
+    class="components-progress-bar is-indeterminate"
+  >
+    <div
+      class="components-progress-bar__indicator"
+      style="width: 50%;"
+    />
+    <progress
+      max="100"
+    />
+  </div>
+</div>
+`;
+
+exports[`ProgressBar should not have an \`is-indeterminate\` className if \`value\` is provided 1`] = `
+<div>
+  <div
+    class="components-progress-bar"
+  >
+    <div
+      class="components-progress-bar__indicator"
+      style="width: 55%;"
+    />
+    <progress
+      max="100"
+      value="55"
+    />
+  </div>
+</div>
+`;

packages/components/src/progress-bar/test/index.tsx

@@ -0,0 +1,83 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import { ProgressBar, INDETERMINATE_TRACK_WIDTH } from '..';
+
+describe( 'ProgressBar', () => {
+	it( 'should render an indeterminate semantic progress bar element', () => {
+		render( <ProgressBar /> );
+
+		const progressBar = screen.getByRole( 'progressbar' );
+
+		expect( progressBar ).toBeVisible();
+		expect( progressBar ).not.toHaveValue();
+	} );
+
+	it( 'should render a determinate semantic progress bar element', () => {
+		render( <ProgressBar value={ 55 } /> );
+
+		const progressBar = screen.getByRole( 'progressbar' );
+
+		expect( progressBar ).toBeVisible();
+		expect( progressBar ).toHaveValue( 55 );
+	} );
+
+	it( 'should use `INDETERMINATE_TRACK_WIDTH`% as track width for indeterminate progress bar', () => {
+		const { container } = render( <ProgressBar /> );
+
+		/**
+		 * We're intentionally not using an accessible selector, because
+		 * the track is an intentionally non-interactive presentation element.
+		 */
+		// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+		const indicator = container.querySelector(
+			'.components-progress-bar__indicator'
+		);
+
+		expect( indicator ).toHaveStyle( {
+			width: `${ INDETERMINATE_TRACK_WIDTH }%`,
+		} );
+	} );
+
+	it( 'should use `value`% as width for determinate progress bar', () => {
+		const { container } = render( <ProgressBar value={ 55 } /> );
+
+		/**
+		 * We're intentionally not using an accessible selector, because
+		 * the track is an intentionally non-interactive presentation element.
+		 */
+		// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+		const indicator = container.querySelector(
+			'.components-progress-bar__indicator'
+		);
+
+		expect( indicator ).toHaveStyle( {
+			width: '55%',
+		} );
+	} );
+
+	it( 'should have an `is-indeterminate` className if `value` is not provided', () => {
+		const { container } = render( <ProgressBar /> );
+
+		expect( container ).toMatchSnapshot();
+	} );
+
+	it( 'should not have an `is-indeterminate` className if `value` is provided', () => {
+		const { container } = render( <ProgressBar value={ 55 } /> );
+
+		expect( container ).toMatchSnapshot();
+	} );
+
+	it( 'should be able to specify custom track and indicator colors', () => {
+		const { container } = render(
+			<ProgressBar indicatorColor="#900" trackColor="#d9d9d9" />
+		);
+
+		expect( container ).toMatchSnapshot();
+	} );
+} );

packages/components/src/progress-bar/types.ts

@@ -0,0 +1,21 @@
+/**
+ * External dependencies
+ */
+import type { CSSProperties } from 'react';
+
+export type ProgressBarProps = {
+	/**
+	 * Value of the progress bar.
+	 */
+	value?: number;
+
+	/**
+	 * Color of the progress bar indicator.
+	 */
+	indicatorColor?: CSSProperties[ 'color' ];
+
+	/**
+	 * Color of the progress bar track.
+	 */
+	trackColor?: CSSProperties[ 'color' ];
+};

packages/components/src/style.scss

@@ -39,6 +39,7 @@
 @import "./panel/style.scss";
 @import "./placeholder/style.scss";
 @import "./popover/style.scss";
+@import "./progress-bar/style.scss";
 @import "./radio-control/style.scss";
 @import "./resizable-box/style.scss";
 @import "./responsive-wrapper/style.scss";