Add steps component

.changeset/angry-sloths-cheer.md

@@ -0,0 +1,6 @@
+---
+'@microsoft/atlas-site': minor
+'@microsoft/atlas-css': minor
+---
+
+Add steps component and documentation

css/src/components/index.scss

@@ -26,6 +26,7 @@
 @import './toggle.scss';
 @import './scroll.scss';
 @import './site-header.scss';
+@import './steps.scss';
 @import './stretched-link.scss';
 @import './segmented-control.scss';
 @import './layout.scss';

css/src/components/steps.scss

@@ -0,0 +1,22 @@
+$step-font-size: $font-size-7 !default;
+$steps-gap: 0.4375em !default;
+$steps-size: 0.5em !default;
+
+.steps {
+	display: flex;
+	gap: $steps-gap;
+	flex-wrap: nowrap;
+	font-size: $step-font-size;
+
+	.step {
+		height: $steps-size;
+		aspect-ratio: 1 / 1;
+		border-radius: $border-radius-rounded;
+		background-color: $secondary;
+
+		&.step-selected {
+			aspect-ratio: 2 / 1;
+			background-color: $primary;
+		}
+	}
+}

integration/tests/accessibility.spec.ts

@@ -48,6 +48,7 @@ const pathnames = [
 	'/components/scroll.html',
 	'/components/select.html',
 	'/components/site-header.html',
+	'/components/steps.html',
 	'/components/stretched-link.html',
 	'/components/table.html',
 	'/components/tag.html',

site/src/components/steps.md

@@ -0,0 +1,63 @@
+---
+title: Steps
+description: The steps component in the Atlas Design System
+template: standard
+figmaEmbed: https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com/design/7raji0IWkuBRxs5kLiADgI/Copilot-Web-UI-kit?node-id=70108-9255&node-type=frame&t=G0FoPLEXPee1yysa-0
+classType: Component
+classPrefixes:
+  - steps
+  - step
+---
+
+# Steps
+
+Used to indicate the user's location in a finite progression. These steps are not interactive.
+
+For example, as a user progresses through 5 items, you would see something like this:
+
+```html
+<p class="visually-hidden">Step 1 of 5</p>
+<div class="steps padding-xxs" aria-hidden="true">
+	<div class="step step-selected"></div>
+	<div class="step"></div>
+	<div class="step"></div>
+	<div class="step"></div>
+	<div class="step"></div>
+</div>
+<p class="visually-hidden">Step 2 of 5</p>
+<div class="steps padding-xxs" aria-hidden="true">
+	<div class="step"></div>
+	<div class="step step-selected"></div>
+	<div class="step"></div>
+	<div class="step"></div>
+	<div class="step"></div>
+</div>
+<p class="visually-hidden">Step 3 of 5</p>
+<div class="steps padding-xxs" aria-hidden="true">
+	<div class="step"></div>
+	<div class="step"></div>
+	<div class="step step-selected"></div>
+	<div class="step"></div>
+	<div class="step"></div>
+</div>
+<p class="visually-hidden">Step 4 of 5</p>
+<div class="steps padding-xxs" aria-hidden="true">
+	<div class="step"></div>
+	<div class="step"></div>
+	<div class="step"></div>
+	<div class="step step-selected"></div>
+	<div class="step"></div>
+</div>
+<p class="visually-hidden">Step 5 of 5</p>
+<div class="steps padding-xxs" aria-hidden="true">
+	<div class="step"></div>
+	<div class="step"></div>
+	<div class="step"></div>
+	<div class="step"></div>
+	<div class="step step-selected"></div>
+</div>
+```
+
+## Accessibility concerns
+
+Although the step component is not interactive, it is also not entirely presentational. Thus, it's recommended that you put `aria-hidden` on the component, while including a `visually-hidden` element that communicates the current state of the user's progress through the steps.