@pnx-mixtape/mxds 0.1.0-rc.1 → 0.1.0-rc.3

package/src/Component/Pagination/Pagination.stories.tsx

@@ -5,6 +5,7 @@ import Component from "./Components/PaginationContext"
 import PaginationComponent from "./Pagination"
 import "./pagination.css"
 import { Page } from "../../../.storybook-react/decorators"
+import { runScreenReaderWalkthrough } from "../../../tools/test-utils/screen-reader"
 
 const meta: Meta<typeof Component> = {
   tags: ["autodocs"],
@@ -81,3 +82,33 @@ export const Pagination: StoryObj<typeof meta> = {
     })
   },
 }
+
+/**
+ * Steps a virtual screen reader through the page and asserts on what it announces.
+ */
+export const ScreenReaderAnnouncements: StoryObj<typeof meta> = {
+  play: async () => {
+    const log = await runScreenReaderWalkthrough()
+    await expect(log).toEqual([
+      "document",
+      "navigation, Pagination",
+      "list",
+      "listitem, level 1, current page, position 1, set size 4",
+      "1",
+      "end of listitem, level 1, current page, position 1, set size 4",
+      "listitem, level 1, position 2, set size 4",
+      "button, 2",
+      "end of listitem, level 1, position 2, set size 4",
+      "listitem, level 1, position 3, set size 4",
+      "button, 3",
+      "end of listitem, level 1, position 3, set size 4",
+      "listitem, level 1, position 4, set size 4",
+      "button, 10",
+      "end of listitem, level 1, position 4, set size 4",
+      "end of list",
+      "button, next",
+      "end of navigation, Pagination",
+      "end of document",
+    ])
+  },
+}

package/src/Component/Pagination/__snapshots__/Pagination.stories.ts.snap

@@ -8,8 +8,7 @@ exports[`Pagination 1`] = `
   
 <span class="mx-icon mx-icon--arrow-left"></span>
 
-  <span>Previous</span>
-    
+  Previous  
 </a>
 
     </div>
@@ -19,8 +18,7 @@ exports[`Pagination 1`] = `
   
 <a href="#">
   
-  <span>1</span>
-    
+  1  
 </a>
 
 </li>
@@ -28,8 +26,7 @@ exports[`Pagination 1`] = `
     
 <a href="#" aria-current="page">
   
-  <span>2</span>
-    
+  2  
 </a>
 
 </li>
@@ -37,18 +34,16 @@ exports[`Pagination 1`] = `
   
 <a href="#">
   
-  <span>3</span>
-    
+  3  
 </a>
 
 </li>
-  <li class="mx-pagination__ellipsis">…</li>
+  <li class="mx-pagination__ellipsis" aria-hidden="true">…</li>
 <li class="mx-pagination__item">
   
 <a href="#">
   
-  <span>10</span>
-    
+  10  
 </a>
 
 </li>
@@ -58,8 +53,70 @@ exports[`Pagination 1`] = `
       
 <a href="#">
   
-  <span>Next</span>
+  Next  
+<span class="mx-icon mx-icon--arrow-right"></span>
+
+</a>
+
+    </div>
+  </nav>
+"
+`;
+
+exports[`Screen Reader Announcements 1`] = `
+"<nav class="mx-pagination" aria-label="Pagination">
+      <div class="mx-pagination__previous">
+      
+<a href="#">
+  
+<span class="mx-icon mx-icon--arrow-left"></span>
+
+  Previous  
+</a>
+
+    </div>
+        <div class="mx-pagination__label">Page 2 of 10</div>
+    <ul class="mx-pagination__items">
+    <li class="mx-pagination__item">
+  
+<a href="#">
+  
+  1  
+</a>
+
+</li>
+<li class="mx-pagination__item">
     
+<a href="#" aria-current="page">
+  
+  2  
+</a>
+
+</li>
+<li class="mx-pagination__item">
+  
+<a href="#">
+  
+  3  
+</a>
+
+</li>
+  <li class="mx-pagination__ellipsis" aria-hidden="true">…</li>
+<li class="mx-pagination__item">
+  
+<a href="#">
+  
+  10  
+</a>
+
+</li>
+
+  </ul>
+      <div class="mx-pagination__next">
+      
+<a href="#">
+  
+  Next  
 <span class="mx-icon mx-icon--arrow-right"></span>
 
 </a>

package/src/Component/Pagination/__snapshots__/Pagination.stories.tsx.snap

@@ -1,3 +1,5 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Pagination 1`] = `"<nav class="mx-pagination" aria-label="Pagination"><div class="mx-pagination__previous" aria-hidden="true"><button type="button" disabled=""><span class="mx-icon mx-icon--arrow-left"></span><span>previous</span></button></div><div class="mx-pagination__label">Page 1 of 10</div><ul class="mx-pagination__items"><li class="mx-pagination__item" aria-current="page">1</li><li class="mx-pagination__item"><button type="button" data-page="2">2</button></li><li class="mx-pagination__item"><button type="button" data-page="3">3</button></li><li class="mx-pagination__ellipsis">...</li><li class="mx-pagination__item"><button type="button" data-page="10">10</button></li></ul><div class="mx-pagination__next"><button type="button" data-page="2"><span>next</span><span class="mx-icon mx-icon--arrow-right"></span></button></div></nav>"`;
+exports[`Pagination 1`] = `"<nav class="mx-pagination" aria-label="Pagination"><div class="mx-pagination__previous" aria-hidden="true"><button type="button" disabled=""><span class="mx-icon mx-icon--arrow-left"></span><span>previous</span></button></div><div class="mx-pagination__label">Page 1 of 10</div><ul class="mx-pagination__items"><li class="mx-pagination__item" aria-current="page">1</li><li class="mx-pagination__item"><button type="button" data-page="2">2</button></li><li class="mx-pagination__item"><button type="button" data-page="3">3</button></li><li class="mx-pagination__ellipsis" aria-hidden="true">...</li><li class="mx-pagination__item"><button type="button" data-page="10">10</button></li></ul><div class="mx-pagination__next"><button type="button" data-page="2"><span>next</span><span class="mx-icon mx-icon--arrow-right"></span></button></div></nav>"`;
+
+exports[`Screen Reader Announcements 1`] = `"<nav class="mx-pagination" aria-label="Pagination"><div class="mx-pagination__previous" aria-hidden="true"><button type="button" disabled=""><span class="mx-icon mx-icon--arrow-left"></span><span>previous</span></button></div><div class="mx-pagination__label">Page 1 of 10</div><ul class="mx-pagination__items"><li class="mx-pagination__item" aria-current="page">1</li><li class="mx-pagination__item"><button type="button" data-page="2">2</button></li><li class="mx-pagination__item"><button type="button" data-page="3">3</button></li><li class="mx-pagination__ellipsis" aria-hidden="true">...</li><li class="mx-pagination__item"><button type="button" data-page="10">10</button></li></ul><div class="mx-pagination__next"><button type="button" data-page="2"><span>next</span><span class="mx-icon mx-icon--arrow-right"></span></button></div></nav>"`;

package/src/Component/Pagination/pagination-item.twig

@@ -3,5 +3,5 @@
   {{ link }}
 </li>
 {% else %}
-  <li class="mx-pagination__ellipsis">&hellip;</li>
+  <li class="mx-pagination__ellipsis" aria-hidden="true">&hellip;</li>
 {% endif %}

package/src/Component/Pagination/pagination.css

@@ -103,10 +103,10 @@
       text-transform: capitalize;
 
       & span:where(:not(.mx-icon)) {
-        @mixin sr-only;
+        @add-mixin sr-only;
 
         @container pagination (min-width: 25ch) {
-          @mixin sr-undo;
+          @add-mixin sr-undo;
         }
       }
     }

package/src/Component/Popover/__snapshots__/Popover.stories.ts.snap

@@ -21,8 +21,7 @@ exports[`Bottom 1`] = `
         
 <a href="#" class="mx-link--more">
   
-  <span>Learn more</span>
-    
+  Learn more  
 </a>
 
     </div>
@@ -52,8 +51,7 @@ exports[`Bottom End 1`] = `
         
 <a href="#" class="mx-link--more">
   
-  <span>Learn more</span>
-    
+  Learn more  
 </a>
 
     </div>
@@ -83,8 +81,7 @@ exports[`Bottom Start 1`] = `
         
 <a href="#" class="mx-link--more">
   
-  <span>Learn more</span>
-    
+  Learn more  
 </a>
 
     </div>
@@ -114,8 +111,7 @@ exports[`Left 1`] = `
         
 <a href="#" class="mx-link--more">
   
-  <span>Learn more</span>
-    
+  Learn more  
 </a>
 
     </div>
@@ -145,8 +141,7 @@ exports[`Left End 1`] = `
         
 <a href="#" class="mx-link--more">
   
-  <span>Learn more</span>
-    
+  Learn more  
 </a>
 
     </div>
@@ -176,8 +171,7 @@ exports[`Left Start 1`] = `
         
 <a href="#" class="mx-link--more">
   
-  <span>Learn more</span>
-    
+  Learn more  
 </a>
 
     </div>
@@ -207,8 +201,7 @@ exports[`Popover 1`] = `
         
 <a href="#" class="mx-link--more">
   
-  <span>Learn more</span>
-    
+  Learn more  
 </a>
 
     </div>
@@ -238,8 +231,7 @@ exports[`Right 1`] = `
         
 <a href="#" class="mx-link--more">
   
-  <span>Learn more</span>
-    
+  Learn more  
 </a>
 
     </div>
@@ -269,8 +261,7 @@ exports[`Right End 1`] = `
         
 <a href="#" class="mx-link--more">
   
-  <span>Learn more</span>
-    
+  Learn more  
 </a>
 
     </div>
@@ -300,8 +291,7 @@ exports[`Right Start 1`] = `
         
 <a href="#" class="mx-link--more">
   
-  <span>Learn more</span>
-    
+  Learn more  
 </a>
 
     </div>
@@ -331,8 +321,7 @@ exports[`Top 1`] = `
         
 <a href="#" class="mx-link--more">
   
-  <span>Learn more</span>
-    
+  Learn more  
 </a>
 
     </div>
@@ -362,8 +351,7 @@ exports[`Top End 1`] = `
         
 <a href="#" class="mx-link--more">
   
-  <span>Learn more</span>
-    
+  Learn more  
 </a>
 
     </div>
@@ -393,8 +381,7 @@ exports[`Top Start 1`] = `
         
 <a href="#" class="mx-link--more">
   
-  <span>Learn more</span>
-    
+  Learn more  
 </a>
 
     </div>

package/src/Component/Popover/popover.css

@@ -26,7 +26,7 @@
     padding: var(--popover-padding, var(--spacing-xs));
     background-color: var(--popover-background, var(--colour-background));
     color: var(--popover-foreground, var(--colour-foreground));
-    border: var(--popover-line-width, 0) solid var(--popover-line-colour, var(--colour-border));
+    border: var(--popover-line-width, 1px) solid var(--popover-line-colour, transparent);
     border-radius: var(--popover-radius, var(--border-radius));
     box-shadow: var(--popover-shadow, var(--box-shadow));
     max-inline-size: var(--popover-width, 30ch);

package/src/Component/ProgressIndicator/ProgressIndicator.stories.ts

@@ -0,0 +1,36 @@
+import { Meta, StoryObj } from "@storybook/html-vite"
+import Component from "./progress-indicator.twig"
+import "./progress-indicator.css"
+
+type ProgressIndicatorProps = {
+  steps: string[]
+  current: number
+}
+
+const steps = ["Your card", "Your details", "Your income", "Evidence", "Review and submit"]
+
+const meta: Meta<ProgressIndicatorProps> = {
+  tags: ["autodocs"],
+  component: Component,
+  args: {
+    steps,
+    current: 1,
+  },
+}
+
+export default meta
+type Story = StoryObj<ProgressIndicatorProps>
+
+export const ProgressIndicator: Story = {}
+
+export const MiddleStep: Story = {
+  args: {
+    current: 3,
+  },
+}
+
+export const LastStep: Story = {
+  args: {
+    current: 5,
+  },
+}

package/src/Component/ProgressIndicator/ProgressIndicator.stories.tsx

@@ -0,0 +1,30 @@
+import { Meta, StoryObj } from "@storybook/react-vite"
+import Component from "./ProgressIndicator"
+import "./progress-indicator.css"
+import { Page } from "../../../.storybook-react/decorators"
+
+const steps = ["Your card", "Your details", "Your income", "Evidence", "Review and submit"]
+
+const meta: Meta<typeof Component> = {
+  component: Component,
+  decorators: [Page],
+  args: {
+    steps,
+    current: 1,
+  },
+}
+
+export default meta
+export const ProgressIndicator: StoryObj<typeof meta> = {}
+
+export const MiddleStep: StoryObj<typeof meta> = {
+  args: {
+    current: 3,
+  },
+}
+
+export const LastStep: StoryObj<typeof meta> = {
+  args: {
+    current: 5,
+  },
+}

package/src/Component/ProgressIndicator/ProgressIndicator.tsx

@@ -0,0 +1,60 @@
+import { JSX } from "react"
+import classNames from "classnames"
+import { validators } from "../../Utility/utilities"
+
+type ProgressIndicatorProps = {
+  steps: string[]
+  current: number
+  className?: string
+}
+
+const ProgressIndicator = ({
+  steps,
+  current,
+  className = null,
+}: ProgressIndicatorProps): JSX.Element => {
+  const total = steps.length
+  const currentStep = validators.integer(current, 1, total) ? current : 1
+
+  return (
+    <div className={classNames("mx-progress-indicator", className)}>
+      <p className="mx-progress-indicator__count">
+        Step {currentStep} of {total} — {steps[currentStep - 1]}
+      </p>
+      <div className="mx-progress-indicator__track" aria-hidden="true">
+        {steps.map((step, index) => {
+          const position = index + 1
+
+          return (
+            <i
+              key={`${step}-${position}`}
+              className={classNames("mx-progress-indicator__marker", {
+                "mx-progress-indicator__marker--done": position < currentStep,
+                "mx-progress-indicator__marker--now": position === currentStep,
+              })}
+            />
+          )
+        })}
+      </div>
+      <ol className="mx-progress-indicator__steps">
+        {steps.map((step, index) => {
+          const position = index + 1
+
+          return (
+            <li
+              key={`${step}-${position}`}
+              className={classNames("mx-progress-indicator__step", {
+                "mx-progress-indicator__step--done": position < currentStep,
+              })}
+              aria-current={position === currentStep ? "step" : undefined}
+            >
+              {step}
+            </li>
+          )
+        })}
+      </ol>
+    </div>
+  )
+}
+
+export default ProgressIndicator

package/src/Component/ProgressIndicator/README.md

@@ -0,0 +1,111 @@
+# ProgressIndicator
+
+A horizontal step-progress tracker for multi-step forms and wizards — a status sentence, a segmented bar, and a list of step names, with the current step highlighted. Presentational only: the parent application owns the step-switching logic and re-renders with an updated `current` prop/value.
+
+---
+
+## CSS Import
+
+```css
+@import "@pnx-mixtape/mxds/src/Component/ProgressIndicator/progress-indicator.css";
+```
+
+---
+
+## Twig
+
+```twig
+{% include '@mixtape/Component/ProgressIndicator/progress-indicator.twig' with {
+  steps: ['Your card', 'Your details', 'Your income', 'Evidence', 'Review and submit'],
+  current: 2,
+} %}
+```
+
+**progress-indicator.twig props:**
+
+| Prop         | Type        | Required | Description                                         |
+| ------------ | ----------- | -------- | --------------------------------------------------- |
+| `steps`      | `string[]`  | Yes      | Ordered list of step labels                         |
+| `current`    | `int`       | Yes      | 1-indexed position of the active step               |
+| `attributes` | `Attribute` | No       | Optional Drupal-style attributes object on the root |
+
+`steps` is treated as plain data (fixed step names for one form), not editorial content — each label renders as a bare list item, so it's looped directly rather than passed as a pre-joined string.
+
+---
+
+## HTML
+
+```html
+<div class="mx-progress-indicator">
+  <p class="mx-progress-indicator__count">Step 2 of 5 — Your details</p>
+  <div class="mx-progress-indicator__track" aria-hidden="true">
+    <i class="mx-progress-indicator__marker mx-progress-indicator__marker--done"></i>
+    <i class="mx-progress-indicator__marker mx-progress-indicator__marker--now"></i>
+    <i class="mx-progress-indicator__marker"></i>
+    <i class="mx-progress-indicator__marker"></i>
+    <i class="mx-progress-indicator__marker"></i>
+  </div>
+  <ol class="mx-progress-indicator__steps">
+    <li class="mx-progress-indicator__step mx-progress-indicator__step--done">Your card</li>
+    <li class="mx-progress-indicator__step" aria-current="step">Your details</li>
+    <li class="mx-progress-indicator__step">Your income</li>
+    <li class="mx-progress-indicator__step">Evidence</li>
+    <li class="mx-progress-indicator__step">Review and submit</li>
+  </ol>
+</div>
+```
+
+---
+
+## React
+
+```tsx
+import { ProgressIndicator } from "@pnx-mixtape/mxds/react"
+
+;<ProgressIndicator
+  steps={["Your card", "Your details", "Your income", "Evidence", "Review and submit"]}
+  current={2}
+/>
+```
+
+**`ProgressIndicator` props:**
+
+| Prop        | Type       | Default | Description                           |
+| ----------- | ---------- | ------- | ------------------------------------- |
+| `steps`     | `string[]` | —       | Ordered list of step labels           |
+| `current`   | `number`   | —       | 1-indexed position of the active step |
+| `className` | `string`   | —       | Extra class on the root               |
+
+---
+
+## Modifiers
+
+There are no BEM modifier classes to apply by hand — the per-step `--done`/`--now` states on the track markers and step list are derived automatically from comparing each step's position against `current`.
+
+---
+
+## Accessibility
+
+- The segmented track (`mx-progress-indicator__track`) is `aria-hidden` — it's a decorative echo of progress, not the source of truth.
+- The real status is the `mx-progress-indicator__count` sentence ("Step 2 of 5 — Your details") and the `<ol>` of step names, with `aria-current="step"` on the active one — both are read by screen readers as ordinary text/list content.
+- The `::before` checkmark on completed steps (`mx-progress-indicator__step--done`) is a visual-only enhancement; completion is already conveyed by list order relative to `aria-current`, so its absence from some assistive tech's generated-content support doesn't lose information.
+- On navigation, the consuming application is responsible for moving focus to the new step's heading (or an error summary, if validation fails) — this component doesn't manage focus itself, same as it doesn't manage step-switching.
+
+---
+
+## Customisation
+
+| Custom property            | Applies to                                                               | Default                 |
+| -------------------------- | ------------------------------------------------------------------------ | ----------------------- |
+| `--gap`                    | `.mx-progress-indicator`                                                 | `var(--spacing-xs)`     |
+| `--track-gap`              | `.mx-progress-indicator__track`                                          | `var(--spacing-xxxs)`   |
+| `--marker-size`            | `.mx-progress-indicator__track`                                          | `var(--spacing-xxxs)`   |
+| `--marker-colour`          | `.mx-progress-indicator__track`                                          | `var(--colour-border)`  |
+| `--marker-colour-complete` | `.mx-progress-indicator__track`                                          | `var(--colour-primary)` |
+| `--marker-colour-active`   | `.mx-progress-indicator__track` and active `mx-progress-indicator__step` | `var(--colour-primary)` |
+
+```css
+.theme--health-services .mx-progress-indicator {
+  font-family: var(--font-family-display);
+}
+```

package/src/Component/ProgressIndicator/__snapshots__/ProgressIndicator.stories.ts.snap

@@ -0,0 +1,67 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Last Step 1`] = `
+"
+<div class="mx-progress-indicator">
+  <p class="mx-progress-indicator__count">Step 5 of 5 — Review and submit</p>
+  <div class="mx-progress-indicator__track" aria-hidden="true">
+                                    <i class="mx-progress-indicator__marker mx-progress-indicator__marker--done"></i>
+                                    <i class="mx-progress-indicator__marker mx-progress-indicator__marker--done"></i>
+                                    <i class="mx-progress-indicator__marker mx-progress-indicator__marker--done"></i>
+                                    <i class="mx-progress-indicator__marker mx-progress-indicator__marker--done"></i>
+                                    <i class="mx-progress-indicator__marker mx-progress-indicator__marker--now"></i>
+      </div>
+  <ol class="mx-progress-indicator__steps">
+          <li class="mx-progress-indicator__step mx-progress-indicator__step--done">Your card</li>
+          <li class="mx-progress-indicator__step mx-progress-indicator__step--done">Your details</li>
+          <li class="mx-progress-indicator__step mx-progress-indicator__step--done">Your income</li>
+          <li class="mx-progress-indicator__step mx-progress-indicator__step--done">Evidence</li>
+          <li class="mx-progress-indicator__step" aria-current="step">Review and submit</li>
+      </ol>
+</div>
+"
+`;
+
+exports[`Middle Step 1`] = `
+"
+<div class="mx-progress-indicator">
+  <p class="mx-progress-indicator__count">Step 3 of 5 — Your income</p>
+  <div class="mx-progress-indicator__track" aria-hidden="true">
+                                    <i class="mx-progress-indicator__marker mx-progress-indicator__marker--done"></i>
+                                    <i class="mx-progress-indicator__marker mx-progress-indicator__marker--done"></i>
+                                    <i class="mx-progress-indicator__marker mx-progress-indicator__marker--now"></i>
+                      <i class="mx-progress-indicator__marker"></i>
+                      <i class="mx-progress-indicator__marker"></i>
+      </div>
+  <ol class="mx-progress-indicator__steps">
+          <li class="mx-progress-indicator__step mx-progress-indicator__step--done">Your card</li>
+          <li class="mx-progress-indicator__step mx-progress-indicator__step--done">Your details</li>
+          <li class="mx-progress-indicator__step" aria-current="step">Your income</li>
+          <li class="mx-progress-indicator__step">Evidence</li>
+          <li class="mx-progress-indicator__step">Review and submit</li>
+      </ol>
+</div>
+"
+`;
+
+exports[`Progress Indicator 1`] = `
+"
+<div class="mx-progress-indicator">
+  <p class="mx-progress-indicator__count">Step 1 of 5 — Your card</p>
+  <div class="mx-progress-indicator__track" aria-hidden="true">
+                                    <i class="mx-progress-indicator__marker mx-progress-indicator__marker--now"></i>
+                      <i class="mx-progress-indicator__marker"></i>
+                      <i class="mx-progress-indicator__marker"></i>
+                      <i class="mx-progress-indicator__marker"></i>
+                      <i class="mx-progress-indicator__marker"></i>
+      </div>
+  <ol class="mx-progress-indicator__steps">
+          <li class="mx-progress-indicator__step" aria-current="step">Your card</li>
+          <li class="mx-progress-indicator__step">Your details</li>
+          <li class="mx-progress-indicator__step">Your income</li>
+          <li class="mx-progress-indicator__step">Evidence</li>
+          <li class="mx-progress-indicator__step">Review and submit</li>
+      </ol>
+</div>
+"
+`;

package/src/Component/ProgressIndicator/__snapshots__/ProgressIndicator.stories.tsx.snap

@@ -0,0 +1,7 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Last Step 1`] = `"<div class="mx-progress-indicator"><p class="mx-progress-indicator__count">Step 5 of 5 — Review and submit</p><div class="mx-progress-indicator__track" aria-hidden="true"><i class="mx-progress-indicator__marker mx-progress-indicator__marker--done"></i><i class="mx-progress-indicator__marker mx-progress-indicator__marker--done"></i><i class="mx-progress-indicator__marker mx-progress-indicator__marker--done"></i><i class="mx-progress-indicator__marker mx-progress-indicator__marker--done"></i><i class="mx-progress-indicator__marker mx-progress-indicator__marker--now"></i></div><ol class="mx-progress-indicator__steps"><li class="mx-progress-indicator__step mx-progress-indicator__step--done">Your card</li><li class="mx-progress-indicator__step mx-progress-indicator__step--done">Your details</li><li class="mx-progress-indicator__step mx-progress-indicator__step--done">Your income</li><li class="mx-progress-indicator__step mx-progress-indicator__step--done">Evidence</li><li class="mx-progress-indicator__step" aria-current="step">Review and submit</li></ol></div>"`;
+
+exports[`Middle Step 1`] = `"<div class="mx-progress-indicator"><p class="mx-progress-indicator__count">Step 3 of 5 — Your income</p><div class="mx-progress-indicator__track" aria-hidden="true"><i class="mx-progress-indicator__marker mx-progress-indicator__marker--done"></i><i class="mx-progress-indicator__marker mx-progress-indicator__marker--done"></i><i class="mx-progress-indicator__marker mx-progress-indicator__marker--now"></i><i class="mx-progress-indicator__marker"></i><i class="mx-progress-indicator__marker"></i></div><ol class="mx-progress-indicator__steps"><li class="mx-progress-indicator__step mx-progress-indicator__step--done">Your card</li><li class="mx-progress-indicator__step mx-progress-indicator__step--done">Your details</li><li class="mx-progress-indicator__step" aria-current="step">Your income</li><li class="mx-progress-indicator__step">Evidence</li><li class="mx-progress-indicator__step">Review and submit</li></ol></div>"`;
+
+exports[`Progress Indicator 1`] = `"<div class="mx-progress-indicator"><p class="mx-progress-indicator__count">Step 1 of 5 — Your card</p><div class="mx-progress-indicator__track" aria-hidden="true"><i class="mx-progress-indicator__marker mx-progress-indicator__marker--now"></i><i class="mx-progress-indicator__marker"></i><i class="mx-progress-indicator__marker"></i><i class="mx-progress-indicator__marker"></i><i class="mx-progress-indicator__marker"></i></div><ol class="mx-progress-indicator__steps"><li class="mx-progress-indicator__step" aria-current="step">Your card</li><li class="mx-progress-indicator__step">Your details</li><li class="mx-progress-indicator__step">Your income</li><li class="mx-progress-indicator__step">Evidence</li><li class="mx-progress-indicator__step">Review and submit</li></ol></div>"`;