Extend <Stepper> with an indicator-only "rail" layout variant.

assets/js/components/Stepper/Step.js

@@ -27,30 +27,43 @@ import PropTypes from 'prop-types';
 import Typography from '@/js/components/Typography';
 import { STEP_STATUS } from './constants';
 
-export default function Step( { children, title, stepStatus } ) {
+export default function Step( { children, title, stepStatus, variant } ) {
+	const isActive = stepStatus === STEP_STATUS.ACTIVE;
+	const isRail = variant === 'rail';
+
+	const railTitleSize = isActive ? 'large' : 'medium';
+	const railTitleType = isActive ? 'label' : 'body';
+
+	const titleAs = isRail ? 'div' : 'h2';
+	const titleSize = isRail ? railTitleSize : 'medium';
+	const titleType = isRail ? railTitleType : 'title';
+
 	return (
 		<div className="googlesitekit-stepper__step-info">
 			<Typography
-				as="h2"
+				as={ titleAs }
 				className="googlesitekit-stepper__step-title"
-				size="medium"
-				type="title"
+				size={ titleSize }
+				type={ titleType }
 			>
 				{ title }
 			</Typography>
-			<div className="googlesitekit-stepper__step-content-container">
-				{ stepStatus === STEP_STATUS.ACTIVE && (
-					<div className="googlesitekit-stepper__step-content">
-						{ children }
-					</div>
-				) }
-			</div>
+			{ ! isRail && (
+				<div className="googlesitekit-stepper__step-content-container">
+					{ children && stepStatus === STEP_STATUS.ACTIVE && (
+						<div className="googlesitekit-stepper__step-content">
+							{ children }
+						</div>
+					) }
+				</div>
+			) }
 		</div>
 	);
 }
 
 Step.propTypes = {
-	children: PropTypes.node.isRequired,
+	children: PropTypes.node,
 	title: PropTypes.string.isRequired,
 	stepStatus: PropTypes.oneOf( Object.values( STEP_STATUS ) ),
+	variant: PropTypes.string,
 };

assets/js/components/Stepper/__snapshots__/index.test.js.snap

@@ -12,6 +12,7 @@ exports[`Stepper should render all steps as completed when activeStep is greater
         class="googlesitekit-stepper__step-progress"
       >
         <span
+          aria-label="Step 1 of 2 (completed)."
           class="googlesitekit-stepper__step-number"
           title="Step 1 of 2 (completed)."
         >
@@ -41,6 +42,7 @@ exports[`Stepper should render all steps as completed when activeStep is greater
         class="googlesitekit-stepper__step-progress"
       >
         <span
+          aria-label="Step 2 of 2 (completed)."
           class="googlesitekit-stepper__step-number"
           title="Step 2 of 2 (completed)."
         >
@@ -76,6 +78,7 @@ exports[`Stepper should render all steps as upcoming when activeStep is negative
         class="googlesitekit-stepper__step-progress"
       >
         <span
+          aria-label="Step 1 of 2 (upcoming)."
           class="googlesitekit-stepper__step-number"
           title="Step 1 of 2 (upcoming)."
         >
@@ -105,6 +108,7 @@ exports[`Stepper should render all steps as upcoming when activeStep is negative
         class="googlesitekit-stepper__step-progress"
       >
         <span
+          aria-label="Step 2 of 2 (upcoming)."
           class="googlesitekit-stepper__step-number"
           title="Step 2 of 2 (upcoming)."
         >
@@ -140,6 +144,7 @@ exports[`Stepper should render all steps as upcoming when activeStep is not prov
         class="googlesitekit-stepper__step-progress"
       >
         <span
+          aria-label="Step 1 of 2 (upcoming)."
           class="googlesitekit-stepper__step-number"
           title="Step 1 of 2 (upcoming)."
         >
@@ -169,6 +174,7 @@ exports[`Stepper should render all steps as upcoming when activeStep is not prov
         class="googlesitekit-stepper__step-progress"
       >
         <span
+          aria-label="Step 2 of 2 (upcoming)."
           class="googlesitekit-stepper__step-number"
           title="Step 2 of 2 (upcoming)."
         >
@@ -204,6 +210,7 @@ exports[`Stepper should render the active step as active and display its content
         class="googlesitekit-stepper__step-progress"
       >
         <span
+          aria-label="Step 1 of 2 (active)."
           class="googlesitekit-stepper__step-number"
           title="Step 1 of 2 (active)."
         >
@@ -239,6 +246,7 @@ exports[`Stepper should render the active step as active and display its content
         class="googlesitekit-stepper__step-progress"
       >
         <span
+          aria-label="Step 2 of 2 (upcoming)."
           class="googlesitekit-stepper__step-number"
           title="Step 2 of 2 (upcoming)."
         >
@@ -274,6 +282,7 @@ exports[`Stepper should render the active step as active and display its content
         class="googlesitekit-stepper__step-progress"
       >
         <span
+          aria-label="Step 1 of 2 (completed)."
           class="googlesitekit-stepper__step-number"
           title="Step 1 of 2 (completed)."
         >
@@ -303,6 +312,7 @@ exports[`Stepper should render the active step as active and display its content
         class="googlesitekit-stepper__step-progress"
       >
         <span
+          aria-label="Step 2 of 2 (active)."
           class="googlesitekit-stepper__step-number"
           title="Step 2 of 2 (active)."
         >

assets/js/components/Stepper/index.js

@@ -31,12 +31,20 @@ import { __, sprintf } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
+import CheckMark from '@/svg/icons/check-2.svg';
 import Tick from '@/svg/icons/tick.svg';
 import { STEP_STATUS } from './constants';
 
-export default function Stepper( { children, activeStep, className } ) {
+export default function Stepper( {
+	children,
+	activeStep,
+	className,
+	variant,
+} ) {
 	const childCount = Children.count( children );
 
+	const Icon = variant === 'rail' ? CheckMark : Tick;
+
 	function getStepStatus( index = -1 ) {
 		if ( index < activeStep ) {
 			return STEP_STATUS.COMPLETED;
@@ -78,11 +86,18 @@ export default function Stepper( { children, activeStep, className } ) {
 	}
 
 	return (
-		<ol className={ classnames( 'googlesitekit-stepper', className ) }>
+		<ol
+			className={ classnames(
+				'googlesitekit-stepper',
+				variant && `googlesitekit-stepper--${ variant }`,
+				className
+			) }
+		>
 			{ Children.map( children, ( child, childIndex ) => {
 				const stepStatus = getStepStatus( childIndex, activeStep );
 
 				const childNumber = childIndex + 1;
+				const numberTitle = getNumberTitle( childNumber, stepStatus );
 
 				return (
 					<li
@@ -94,23 +109,21 @@ export default function Stepper( { children, activeStep, className } ) {
 					>
 						<div className="googlesitekit-stepper__step-progress">
 							<span
+								aria-label={ numberTitle }
 								className="googlesitekit-stepper__step-number"
-								title={ getNumberTitle(
-									childNumber,
-									stepStatus
-								) }
+								title={ numberTitle }
 							>
 								{ stepStatus === STEP_STATUS.COMPLETED ? (
-									<Tick />
+									<Icon />
 								) : (
-									childNumber
+									variant !== 'rail' && childNumber
 								) }
 							</span>
 							{ childNumber < childCount && (
 								<div className="googlesitekit-stepper__step-progress-line"></div>
 							) }
 						</div>
-						{ cloneElement( child, { stepStatus } ) }
+						{ cloneElement( child, { stepStatus, variant } ) }
 					</li>
 				);
 			} ) }
@@ -123,4 +136,5 @@ Stepper.propTypes = {
 	// The zero-based index of the active step. If omitted or negative, all steps are in the upcoming state. If greater than the number of steps - 1, all steps are complete.
 	activeStep: PropTypes.number,
 	className: PropTypes.string,
+	variant: PropTypes.string,
 };

assets/js/components/Stepper/index.stories.js

@@ -28,9 +28,20 @@ import { Button } from 'googlesitekit-components';
 import Step from './Step';
 import Stepper from '.';
 
-function Template( { activeStep: initialActiveStep } ) {
+function Template( { activeStep: initialActiveStep, variant } ) {
 	const [ activeStep, setActiveStep ] = useState( initialActiveStep );
 
+	if ( variant === 'rail' ) {
+		return (
+			<Stepper activeStep={ activeStep } variant={ variant }>
+				<Step title="Connect publication" />
+				<Step title="Add publication policies" />
+				<Step title="Set up a sign-up form" />
+				<Step title="Setup complete" />
+			</Stepper>
+		);
+	}
+
 	return (
 		<Stepper activeStep={ activeStep }>
 			<Step title="First Step">
@@ -75,6 +86,31 @@ Complete.storyName = 'Complete';
 Complete.args = { activeStep: 3 };
 Complete.scenario = {};
 
+export const RailInactive = Template.bind( {} );
+RailInactive.storyName = 'Rail Inactive';
+RailInactive.args = { variant: 'rail' };
+RailInactive.scenario = {};
+
+export const RailFirstStepActive = Template.bind( {} );
+RailFirstStepActive.storyName = 'Rail First Step Active';
+RailFirstStepActive.args = { activeStep: 0, variant: 'rail' };
+RailFirstStepActive.scenario = {};
+
+export const RailMiddleStepActive = Template.bind( {} );
+RailMiddleStepActive.storyName = 'Rail Middle Step Active';
+RailMiddleStepActive.args = { activeStep: 1, variant: 'rail' };
+RailMiddleStepActive.scenario = {};
+
+export const RailLastStepActive = Template.bind( {} );
+RailLastStepActive.storyName = 'Rail Last Step Active';
+RailLastStepActive.args = { activeStep: 3, variant: 'rail' };
+RailLastStepActive.scenario = {};
+
+export const RailComplete = Template.bind( {} );
+RailComplete.storyName = 'Rail Complete';
+RailComplete.args = { activeStep: 4, variant: 'rail' };
+RailComplete.scenario = {};
+
 export default {
 	title: 'Components/Stepper',
 	component: Stepper,

assets/sass/components/global/_googlesitekit-stepper.scss

@@ -126,4 +126,121 @@
 			margin-bottom: 0;
 		}
 	}
+
+	.googlesitekit-stepper--rail {
+		--googlesitekit-stepper-row-gap: 12px;
+		--googlesitekit-stepper-size: 18px;
+		--googlesitekit-stepper-small-size: 10px;
+
+		align-items: center;
+		box-sizing: content-box;
+		display: flex;
+
+		@media (min-width: $bp-desktop) {
+			align-items: stretch;
+			display: grid;
+			gap: var(--googlesitekit-stepper-row-gap);
+			grid-auto-rows: 1fr;
+		}
+
+		.googlesitekit-stepper__step {
+			display: block;
+			flex: 2 1 0;
+
+			@media (min-width: $bp-desktop) {
+				display: grid;
+				flex-grow: 1;
+				gap: 14px;
+				grid-template-columns: var(--googlesitekit-stepper-size) auto;
+				min-block-size: 36px;
+			}
+		}
+
+		.googlesitekit-stepper__step:first-child,
+		.googlesitekit-stepper__step:last-child {
+			flex-grow: 1;
+		}
+
+		.googlesitekit-stepper__step-info {
+			display: none;
+
+			@media (min-width: $bp-desktop) {
+				align-self: center;
+				display: block;
+			}
+		}
+
+		.googlesitekit-stepper__step-title {
+			block-size: auto;
+		}
+
+		.googlesitekit-stepper__step-progress {
+			display: flex;
+			flex-direction: row;
+			place-items: center;
+
+			@media (min-width: $bp-desktop) {
+				flex-direction: column;
+				position: relative;
+			}
+
+			&::after,
+			&::before {
+				background-color: $c-surfaces-surface-2;
+				block-size: 1px;
+				content: "";
+				display: block;
+				flex: 1 1 0;
+
+				@media (min-width: $bp-desktop) {
+					block-size: auto;
+					inline-size: 1px;
+				}
+			}
+		}
+
+		.googlesitekit-stepper__step:first-child .googlesitekit-stepper__step-progress::before,
+		.googlesitekit-stepper__step:last-child .googlesitekit-stepper__step-progress::after {
+			display: none;
+
+			@media (min-width: $bp-desktop) {
+				display: block;
+				visibility: hidden;
+			}
+		}
+
+		.googlesitekit-stepper__step-number {
+			aspect-ratio: 1 / 1;
+			background-color: $c-site-kit-sk-600;
+			block-size: auto;
+			inline-size: var(--googlesitekit-stepper-size);
+		}
+
+		.googlesitekit-stepper__step--active {
+
+			.googlesitekit-stepper__step-number {
+				background-clip: content-box;
+				box-shadow: inset 0 0 0 1px $c-site-kit-sk-600;
+				padding: calc((var(--googlesitekit-stepper-size) - var(--googlesitekit-stepper-small-size)) / 2);
+			}
+		}
+
+		.googlesitekit-stepper__step--upcoming .googlesitekit-stepper__step-number {
+			background-color: $c-site-kit-sk-200;
+			inline-size: var(--googlesitekit-stepper-small-size);
+		}
+
+		.googlesitekit-stepper__step-progress-line {
+			display: none;
+
+			@media (min-width: $bp-desktop) {
+				block-size: var(--googlesitekit-stepper-row-gap);
+				display: block;
+				inset-block-start: 100%;
+				margin: 0;
+				min-block-size: 0;
+				position: absolute;
+			}
+		}
+	}
 }