Components: Introduce a basic ProgressBar component

docs/tool/manifest.js

@@ -15,6 +15,7 @@ const componentPaths = glob( 'packages/components/src/*/**/README.md', {
 		'packages/components/src/theme/README.md',
 		'packages/components/src/view/README.md',
 		'packages/components/src/dropdown-menu-v2/README.md',
+		'packages/components/src/progress-bar/README.md',
 	],
 } );
 const packagePaths = glob( 'packages/*/package.json' )

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/private-apis.ts

@@ -8,6 +8,7 @@ import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/pri
  */
 import { default as CustomSelectControl } from './custom-select-control';
 import { positionToPlacement as __experimentalPopoverLegacyPositionToPlacement } from './popover/utils';
+import { default as ProgressBar } from './progress-bar';
 import { createPrivateSlotFill } from './slot-fill';
 import {
 	DropdownMenu as DropdownMenuV2,
@@ -45,4 +46,5 @@ lock( privateApis, {
 	DropdownMenuSeparatorV2,
 	DropdownSubMenuV2,
 	DropdownSubMenuTriggerV2,
+	ProgressBar,
 } );

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

@@ -0,0 +1,32 @@
+# ProgressBar
+
+<div class="callout callout-alert">
+This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
+</div>
+
+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.
+
+### 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
+
+##### `className`: `string`
+
+A CSS class to apply to the underlying `div` element, serving as a progress bar track.
+
+- Required: No
+
+##### `id`: `string`
+
+The HTML `id` of the `progress` element. This is necessary to be able to accessibly associate the label with that element.
+
+-   Required: No

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

@@ -0,0 +1,62 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import type { ForwardedRef } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { forwardRef } from '@wordpress/element';
+import { useInstanceId } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import * as ProgressBarStyled from './styles';
+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;
+
+function UnforwardedProgressBar(
+	props: WordPressComponentProps< ProgressBarProps, 'div', false >,
+	ref: ForwardedRef< HTMLProgressElement >
+) {
+	const { className, id: idProp, value } = props;
+	const id = useInstanceId( ProgressBar, 'progress-bar', idProp );
+	const isIndeterminate = ! Number.isFinite( value );
+	const wrapperClasses = classnames( className, {
+		/**
+		 * @todo Use the `:indeterminate` pseudo-class once supported.
+		 *
+		 * @see https://caniuse.com/mdn-css_selectors_indeterminate_progress
+		 */
+		'is-indeterminate': isIndeterminate,
+	} );
+
+	return (
+		<ProgressBarStyled.Track className={ wrapperClasses }>
+			<ProgressBarStyled.Indicator
+				style={ {
+					width: `${
+						isIndeterminate ? INDETERMINATE_TRACK_WIDTH : value
+					}%`,
+				} }
+			/>
+			<ProgressBarStyled.ProgressElement
+				max={ 100 }
+				value={ value }
+				aria-label={ __( 'Loading …' ) }
+				id={ id }
+				ref={ ref }
+			/>
+		</ProgressBarStyled.Track>
+	);
+}
+
+export const ProgressBar = forwardRef( UnforwardedProgressBar );
+
+export default ProgressBar;

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

@@ -0,0 +1,33 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import { ProgressBar } from '..';
+
+const meta: ComponentMeta< typeof ProgressBar > = {
+	component: ProgressBar,
+	title: 'Components (Experimental)/ProgressBar',
+	argTypes: {
+		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/styles.ts

@@ -0,0 +1,61 @@
+/**
+ * External dependencies
+ */
+import styled from '@emotion/styled';
+import { keyframes } from '@emotion/react';
+
+/**
+ * Internal dependencies
+ */
+import { COLORS, CONFIG } from '../utils';
+
+const animateProgressBar = keyframes( {
+	'0%': {
+		left: '-50%',
+	},
+	'100%': {
+		left: '100%',
+	},
+} );
+
+export const Track = styled.div`
+	position: relative;
+	overflow: hidden;
+	width: 100%;
+	max-width: 160px;
+	height: ${ CONFIG.borderWidthFocus };
+	background-color: var(
+		--wp-components-color-gray-100,
+		${ COLORS.gray[ 100 ] }
+	);
+	border-radius: ${ CONFIG.radiusBlockUi };
+`;
+
+export const Indicator = styled.div`
+	display: inline-block;
+	position: absolute;
+	top: 0;
+	height: 100%;
+	border-radius: ${ CONFIG.radiusBlockUi };
+	background-color: ${ COLORS.ui.theme };
+
+	.is-indeterminate & {
+		animation-duration: 1.5s;
+		animation-timing-function: ease-in-out;
+		animation-iteration-count: infinite;
+		animation-name: ${ animateProgressBar };
+
+		@media ( prefers-reduced-motion ) {
+			animation-duration: 0s;
+		}
+	}
+`;
+
+export const ProgressElement = styled.progress`
+	position: absolute;
+	top: 0;
+	left: 0;
+	opacity: 0;
+	width: 100%;
+	height: 100%;
+`;

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

@@ -0,0 +1,158 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ProgressBar should have an \`is-indeterminate\` className if \`value\` is not provided 1`] = `
+@keyframes animation-0 {
+  0% {
+    left: -50%;
+  }
+
+  100% {
+    left: 100%;
+  }
+}
+
+.emotion-0 {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  max-width: 160px;
+  height: 1.5px;
+  background-color: var(
+  		--wp-components-color-gray-100,
+  		#f0f0f0
+  	);
+  border-radius: 2px;
+}
+
+.emotion-2 {
+  display: inline-block;
+  position: absolute;
+  top: 0;
+  height: 100%;
+  border-radius: 2px;
+  background-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+}
+
+.is-indeterminate .emotion-2 {
+  -webkit-animation-duration: 1.5s;
+  animation-duration: 1.5s;
+  -webkit-animation-timing-function: ease-in-out;
+  animation-timing-function: ease-in-out;
+  -webkit-animation-iteration-count: infinite;
+  animation-iteration-count: infinite;
+  -webkit-animation-name: animation-0;
+  animation-name: animation-0;
+}
+
+@media ( prefers-reduced-motion ) {
+  .is-indeterminate .emotion-2 {
+    -webkit-animation-duration: 0s;
+    animation-duration: 0s;
+  }
+}
+
+.emotion-4 {
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+}
+
+<div>
+  <div
+    class="is-indeterminate emotion-0 emotion-1"
+  >
+    <div
+      class="emotion-2 emotion-3"
+      style="width: 50%;"
+    />
+    <progress
+      aria-label="Loading …"
+      class="emotion-4 emotion-5"
+      id="progress-bar-4"
+      max="100"
+    />
+  </div>
+</div>
+`;
+
+exports[`ProgressBar should not have an \`is-indeterminate\` className if \`value\` is provided 1`] = `
+@keyframes animation-0 {
+  0% {
+    left: -50%;
+  }
+
+  100% {
+    left: 100%;
+  }
+}
+
+.emotion-0 {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  max-width: 160px;
+  height: 1.5px;
+  background-color: var(
+  		--wp-components-color-gray-100,
+  		#f0f0f0
+  	);
+  border-radius: 2px;
+}
+
+.emotion-2 {
+  display: inline-block;
+  position: absolute;
+  top: 0;
+  height: 100%;
+  border-radius: 2px;
+  background-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+}
+
+.is-indeterminate .emotion-2 {
+  -webkit-animation-duration: 1.5s;
+  animation-duration: 1.5s;
+  -webkit-animation-timing-function: ease-in-out;
+  animation-timing-function: ease-in-out;
+  -webkit-animation-iteration-count: infinite;
+  animation-iteration-count: infinite;
+  -webkit-animation-name: animation-0;
+  animation-name: animation-0;
+}
+
+@media ( prefers-reduced-motion ) {
+  .is-indeterminate .emotion-2 {
+    -webkit-animation-duration: 0s;
+    animation-duration: 0s;
+  }
+}
+
+.emotion-4 {
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+}
+
+<div>
+  <div
+    class=" emotion-0 emotion-1"
+  >
+    <div
+      class="emotion-2 emotion-3"
+      style="width: 55%;"
+    />
+    <progress
+      aria-label="Loading …"
+      class="emotion-4 emotion-5"
+      id="progress-bar-5"
+      max="100"
+      value="55"
+    />
+  </div>
+</div>
+`;