@arbor-education/design-system.components 0.14.0 → 0.16.0

package/src/components/kvpList/KVPList.stories.tsx

@@ -1,51 +1,618 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
+import {
+  Controls,
+  Heading as DocHeading,
+  Markdown,
+  Primary as DocPrimary,
+  Stories,
+  Subtitle,
+  Title,
+} from '@storybook/addon-docs/blocks';
 import { Progress } from 'Components/progress/Progress';
 import { KVPList } from './KVPList';
 
+// ---------------------------------------------------------------------------
+// Docs page content
+// ---------------------------------------------------------------------------
+
+const DESCRIPTION_INTRO = [
+  '`KVPList` is a compound component for displaying structured key/value pair data.',
+  'It uses semantic `<dl>/<dt>/<dd>` markup for accessibility and supports vertical or horizontal',
+  'row layouts, two typographic prominence levels, and an optional percentage suffix.',
+].join(' ');
+
+const ROW_PROPS = [
+  '| Prop | Type | Default | Description |',
+  '|---|---|---|---|',
+  '| `orientation` | `\'horizontal\' \\| \'vertical\'` | `\'vertical\'` | Vertical stacks term above definition; horizontal places them side by side |',
+  '| `className` | `string` | — | Additional CSS classes on the `<dl>` element |',
+  '| `...HTMLAttributes<dl>` | | | All standard `<dl>` attributes forwarded |',
+].join('\n');
+
+const TERM_PROPS = [
+  '| Prop | Type | Default | Description |',
+  '|---|---|---|---|',
+  '| `children` | `ReactNode` | — | The key/label text |',
+  '| `className` | `string` | — | Additional CSS classes on the `<dt>` element |',
+  '| `...HTMLAttributes<dt>` | | | All standard element attributes forwarded |',
+].join('\n');
+
+const DEFINITION_PROPS = [
+  '| Prop | Type | Default | Description |',
+  '|---|---|---|---|',
+  '| `children` | `ReactNode` | — | The value content |',
+  '| `isRow` | `boolean` | `false` | Makes the definition span the full row width |',
+  '| `isPercentage` | `boolean` | `false` | Appends a `%` suffix span. Do **not** also include `%` in `children` |',
+  '| `prominence` | `\'neutral\' \\| \'strong\'` | `\'neutral\'` | `neutral` = body text; `strong` = h2 typography |',
+  '| `className` | `string` | — | Additional CSS classes on the `<dd>` element |',
+  '| `...HTMLAttributes<dd>` | | | All standard element attributes forwarded |',
+].join('\n');
+
+const USAGE_GUIDANCE = [
+  '### When to use',
+  '',
+  '- Displaying structured key/value data for one entity — student details, contact info, metric breakdowns',
+  '- Inside a `KPICard` as supplementary detail below the headline metric',
+  '- Detail panels, profile cards, and read-only form summaries',
+  '',
+  '---',
+  '',
+  '### When NOT to use',
+  '',
+  '| Situation | Use instead |',
+  '|---|---|',
+  '| A single dominant metric needing large typographic emphasis | [`KPICard`](?path=/docs/components-card-kpicard--docs) |',
+  '| Data with multiple records (rows/columns) | `<table>` with appropriate `<thead>/<tbody>` |',
+  '| Purely decorative label/value layout | Plain CSS grid — `KVPList` has specific accessibility semantics |',
+].join('\n');
+
+const DEVELOPER_NOTES = [
+  '### Critical usage patterns',
+  '',
+  '**`role="group"` is conditional.** The `KVPList` root only adds `role="group"` when `aria-label`',
+  'or `aria-labelledby` is provided. Without these, it is a plain `<div>`. Always provide `aria-label`',
+  'when the list appears alongside other lists in a dashboard or detail panel.',
+  '',
+  '**`KVPList.Term` and `KVPList.Definition` must always be children of `KVPList.Row`.**',
+  'They are `<dt>` and `<dd>` elements respectively — placing them outside a `<dl>` breaks HTML validity.',
+  '',
+  '**`isPercentage` adds "%" to the DOM** — it will be read aloud by screen readers.',
+  'Do not also include "%" in your `children` content or you will render `"95%%"`.',
+  '',
+  '**`prominence="strong"` uses h2-scale typography but renders as `<dd>`.** This is intentional —',
+  'the visual size is h2, but the semantic meaning is "definition in a definition list".',
+  'Screen readers will not announce it as a heading.',
+  '',
+  '```tsx',
+  '<KVPList aria-label="Attendance summary">',
+  '  <KVPList.Row orientation="horizontal">',
+  '    <KVPList.Term>Overall attendance</KVPList.Term>',
+  '    <KVPList.Definition isPercentage prominence="strong">94.2</KVPList.Definition>',
+  '  </KVPList.Row>',
+  '  <KVPList.Row orientation="horizontal">',
+  '    <KVPList.Term>Autumn term</KVPList.Term>',
+  '    <KVPList.Definition isPercentage>96.1</KVPList.Definition>',
+  '  </KVPList.Row>',
+  '</KVPList>',
+  '```',
+  '',
+  '---',
+  '',
+  '### Accessibility',
+  '',
+  '- Provide `aria-label` on `KVPList` when it represents a named group — activates `role="group"`',
+  '- Use `aria-labelledby` when a visible heading is nearby — point to its `id`',
+  '- `KVPList.Term` (`dt`) and `KVPList.Definition` (`dd`) must be inside `KVPList.Row` (`dl`)',
+  '- `isPercentage` appends "%" to the DOM — never duplicate it in `children`',
+  '',
+  '---',
+  '',
+  '### TypeScript types',
+  '',
+  '```ts',
+  "import { KVPList } from '@arbor-education/design-system.components';",
+  "import type { KVPListProps, KVPListRowProps, KVPListTermProps, KVPListDefinitionProps } from '@arbor-education/design-system.components';",
+  '```',
+].join('\n');
+
+const RELATED_COMPONENTS = [
+  '## Related components',
+  '',
+  '[KPICard](?path=/docs/components-card-kpicard--docs) · [Progress](?path=/docs/components-progress--docs) · [Card](?path=/docs/components-card--docs)',
+].join('\n');
+
+const PROPS_INTRO = 'The preview below is wired to the **Controls** panel — tweak any prop to see the story update in real time.';
+
+// ---------------------------------------------------------------------------
+// Custom DocsPage
+// ---------------------------------------------------------------------------
+
+function KVPListDocsPage() {
+  return (
+    <>
+      <Title />
+      <Subtitle />
+      <Markdown>{DESCRIPTION_INTRO}</Markdown>
+      <DocHeading>Interactive example</DocHeading>
+      <Markdown>{PROPS_INTRO}</Markdown>
+      <DocPrimary />
+      <Controls />
+      <DocHeading>KVPList.Row props</DocHeading>
+      <Markdown>{ROW_PROPS}</Markdown>
+      <DocHeading>KVPList.Term props</DocHeading>
+      <Markdown>{TERM_PROPS}</Markdown>
+      <DocHeading>KVPList.Definition props</DocHeading>
+      <Markdown>{DEFINITION_PROPS}</Markdown>
+      <DocHeading>Usage guidance</DocHeading>
+      <Markdown>{USAGE_GUIDANCE}</Markdown>
+      <DocHeading>Developer notes</DocHeading>
+      <Markdown>{DEVELOPER_NOTES}</Markdown>
+      <DocHeading>Examples</DocHeading>
+      <Stories title="" />
+      <Markdown>{RELATED_COMPONENTS}</Markdown>
+    </>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Meta
+// ---------------------------------------------------------------------------
+
 const meta = {
   title: 'Components/KVPList',
   component: KVPList,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+    docs: { page: KVPListDocsPage },
+  },
+  argTypes: {
+    'aria-label': {
+      control: 'text',
+      description: 'When provided, adds `role="group"` to the root `<div>`. Use when the list represents a named data group.',
+      table: { type: { summary: 'string' } },
+    },
+    'aria-labelledby': {
+      control: false,
+      description: 'ID of a visible heading element. Alternative to `aria-label` when a visible label is already in the DOM.',
+      table: { type: { summary: 'string' } },
+    },
+    'className': {
+      control: false,
+      description: 'Additional CSS class names on the root `div.ds-kvp-list` element.',
+      table: { type: { summary: 'string' } },
+    },
+    'children': {
+      control: false,
+      description: 'Compose using `KVPList.Row`, `KVPList.Term`, and `KVPList.Definition` sub-components.',
+      table: { type: { summary: 'ReactNode' } },
+    },
+  },
 } satisfies Meta<typeof KVPList>;
 
-type Story = StoryObj<typeof meta>;
+export default meta;
+type Story = StoryObj<typeof KVPList>;
+
+// ---------------------------------------------------------------------------
+// Helper: attach a per-story description to docs
+// ---------------------------------------------------------------------------
+
+const withDescription = (story: Story, description: string): Story => ({
+  ...story,
+  parameters: {
+    ...story.parameters,
+    docs: { ...story.parameters?.docs, description: { story: description } },
+  },
+});
+
+// ---------------------------------------------------------------------------
+// Template components
+// ---------------------------------------------------------------------------
 
-export const Summary: Story = {
-  render: args => (
-    <KVPList {...args} aria-label="Attendance metrics">
+const MultipleRowsTemplate = () => (
+  <KVPList aria-label="Student attendance summary">
+    <KVPList.Row orientation="horizontal">
+      <KVPList.Term>Overall attendance</KVPList.Term>
+      <KVPList.Definition isPercentage prominence="strong">94.2</KVPList.Definition>
+    </KVPList.Row>
+    <KVPList.Row orientation="horizontal">
+      <KVPList.Term>Autumn term</KVPList.Term>
+      <KVPList.Definition isPercentage>96.1</KVPList.Definition>
+    </KVPList.Row>
+    <KVPList.Row orientation="horizontal">
+      <KVPList.Term>Spring term</KVPList.Term>
+      <KVPList.Definition isPercentage>93.4</KVPList.Definition>
+    </KVPList.Row>
+    <KVPList.Row orientation="horizontal">
+      <KVPList.Term>Summer term</KVPList.Term>
+      <KVPList.Definition isPercentage>92.8</KVPList.Definition>
+    </KVPList.Row>
+  </KVPList>
+);
+
+const MixedOrientationsTemplate = () => (
+  <KVPList aria-label="Student profile">
+    <KVPList.Row orientation="vertical">
+      <KVPList.Term>Full name</KVPList.Term>
+      <KVPList.Definition prominence="strong">Alice Johnson</KVPList.Definition>
+    </KVPList.Row>
+    <KVPList.Row orientation="horizontal">
+      <KVPList.Term>Year group</KVPList.Term>
+      <KVPList.Definition>Year 10</KVPList.Definition>
+    </KVPList.Row>
+    <KVPList.Row orientation="horizontal">
+      <KVPList.Term>Form</KVPList.Term>
+      <KVPList.Definition>10B</KVPList.Definition>
+    </KVPList.Row>
+    <KVPList.Row orientation="horizontal">
+      <KVPList.Term>Attendance</KVPList.Term>
+      <KVPList.Definition isPercentage>94.2</KVPList.Definition>
+    </KVPList.Row>
+  </KVPList>
+);
+
+const WithProgressTemplate = () => (
+  <KVPList aria-label="Attendance breakdown by year group">
+    {[
+      { label: 'Year 7', value: 96, progress: 96 },
+      { label: 'Year 8', value: 94, progress: 94 },
+      { label: 'Year 9', value: 91, progress: 91 },
+      { label: 'Year 10', value: 93, progress: 93 },
+      { label: 'Year 11', value: 89, progress: 89 },
+    ].map(({ label, value, progress }) => (
+      <KVPList.Row key={label} orientation="horizontal">
+        <KVPList.Term>{label}</KVPList.Term>
+        <KVPList.Definition isPercentage>{value}</KVPList.Definition>
+        <KVPList.Definition aria-hidden="true" isRow>
+          <Progress aria-label={`${label} attendance`} max={100} value={progress} />
+        </KVPList.Definition>
+      </KVPList.Row>
+    ))}
+  </KVPList>
+);
+
+// ---------------------------------------------------------------------------
+// Stories
+// ---------------------------------------------------------------------------
+
+export const Default: Story = withDescription(
+  {
+    args: { 'aria-label': 'Student details' },
+    render: args => (
+      <KVPList {...args}>
+        <KVPList.Row orientation="vertical">
+          <KVPList.Term>Student</KVPList.Term>
+          <KVPList.Definition>Alice Johnson</KVPList.Definition>
+        </KVPList.Row>
+      </KVPList>
+    ),
+  },
+  'A single vertical row — term stacked above definition. The default `orientation="vertical"` and `prominence="neutral"` baseline.',
+);
+
+export const HorizontalOrientation: Story = withDescription(
+  {
+    parameters: {
+      controls: { disable: true },
+      docs: {
+        source: {
+          language: 'tsx',
+          code: `
+import { KVPList } from '@arbor-education/design-system.components';
+
+function HorizontalOrientationExample() {
+  return (
+    <KVPList aria-label="Attendance summary">
       <KVPList.Row orientation="horizontal">
-        <KVPList.Term>Attendance</KVPList.Term>
-        <KVPList.Definition isPercentage prominence="strong">95</KVPList.Definition>
+        <KVPList.Term>Attendance rate</KVPList.Term>
+        <KVPList.Definition isPercentage>94.2</KVPList.Definition>
       </KVPList.Row>
     </KVPList>
-  ),
-};
+  );
+}
+export default HorizontalOrientationExample;
+`.trim(),
+        },
+      },
+    },
+    render: () => (
+      <KVPList aria-label="Attendance summary">
+        <KVPList.Row orientation="horizontal">
+          <KVPList.Term>Attendance rate</KVPList.Term>
+          <KVPList.Definition isPercentage>94.2</KVPList.Definition>
+        </KVPList.Row>
+        <KVPList.Row orientation="horizontal">
+          <KVPList.Term>Sessions attended</KVPList.Term>
+          <KVPList.Definition>342 of 364</KVPList.Definition>
+        </KVPList.Row>
+      </KVPList>
+    ),
+  },
+  '`orientation="horizontal"` places the term and definition on the same line. The term takes `flex: 1` and the definition is right-aligned at `flex: 0 0 auto`.',
+);
+
+export const StrongProminence: Story = withDescription(
+  {
+    parameters: {
+      controls: { disable: true },
+      docs: {
+        source: {
+          language: 'tsx',
+          code: `
+import { KVPList } from '@arbor-education/design-system.components';
+
+function StrongProminenceExample() {
+  return (
+    <KVPList aria-label="Key metric">
+      <KVPList.Row orientation="horizontal">
+        <KVPList.Term>Overall attendance</KVPList.Term>
+        <KVPList.Definition isPercentage prominence="strong">94.2</KVPList.Definition>
+      </KVPList.Row>
+    </KVPList>
+  );
+}
+export default StrongProminenceExample;
+`.trim(),
+        },
+      },
+    },
+    render: () => (
+      <KVPList aria-label="Key metric">
+        <KVPList.Row orientation="horizontal">
+          <KVPList.Term>Overall attendance</KVPList.Term>
+          <KVPList.Definition isPercentage prominence="strong">94.2</KVPList.Definition>
+        </KVPList.Row>
+        <KVPList.Row orientation="horizontal">
+          <KVPList.Term>Autumn term</KVPList.Term>
+          <KVPList.Definition isPercentage prominence="neutral">96.1</KVPList.Definition>
+        </KVPList.Row>
+      </KVPList>
+    ),
+  },
+  '`prominence="strong"` applies h2-scale typography to the definition — rendered as `<dd>` semantically but visually dominant. Use for the primary metric value in a list; `"neutral"` for supporting context.',
+);
+
+export const IsRow: Story = withDescription(
+  {
+    parameters: {
+      controls: { disable: true },
+      docs: {
+        source: {
+          language: 'tsx',
+          code: `
+import { KVPList } from '@arbor-education/design-system.components';
+import { Progress } from '@arbor-education/design-system.components';
 
-export const WithProgressAndPercentage: Story = {
-  render: args => (
-    <KVPList {...args} aria-label="Attendance breakdown">
+function IsRowExample() {
+  return (
+    <KVPList aria-label="Attendance breakdown">
       <KVPList.Row orientation="horizontal">
-        <KVPList.Term>Bar label text</KVPList.Term>
-        <KVPList.Definition isPercentage prominence="neutral">95</KVPList.Definition>
+        <KVPList.Term>Year 9</KVPList.Term>
+        <KVPList.Definition isPercentage>91</KVPList.Definition>
         <KVPList.Definition aria-hidden="true" isRow>
-          <Progress aria-label="Attendance progress" max={100} value={95} />
+          <Progress aria-label="Year 9 attendance" max={100} value={91} />
         </KVPList.Definition>
       </KVPList.Row>
     </KVPList>
-  ),
-};
+  );
+}
+export default IsRowExample;
+`.trim(),
+        },
+      },
+    },
+    render: () => (
+      <KVPList aria-label="Attendance breakdown">
+        <KVPList.Row orientation="horizontal">
+          <KVPList.Term>Year 9</KVPList.Term>
+          <KVPList.Definition isPercentage>91</KVPList.Definition>
+          <KVPList.Definition aria-hidden="true" isRow>
+            <Progress aria-label="Year 9 attendance" max={100} value={91} />
+          </KVPList.Definition>
+        </KVPList.Row>
+      </KVPList>
+    ),
+  },
+  '`isRow=true` on a Definition makes it span the full row width (`flex-basis: 100%`). Use for long text values or embedded components like `Progress` that need the full horizontal space.',
+);
 
-export const WithProgressNoPercentage: Story = {
-  render: args => (
-    <KVPList {...args} aria-label="Attendance breakdown without percentage">
+export const AsPercentage: Story = withDescription(
+  {
+    parameters: {
+      controls: { disable: true },
+      docs: {
+        source: {
+          language: 'tsx',
+          code: `
+import { KVPList } from '@arbor-education/design-system.components';
+
+function AsPercentageExample() {
+  return (
+    <KVPList aria-label="Session attendance">
+      <KVPList.Row orientation="horizontal">
+        <KVPList.Term>Present</KVPList.Term>
+        {/* isPercentage adds "%" — do NOT also include "%" in children */}
+        <KVPList.Definition isPercentage>94.2</KVPList.Definition>
+      </KVPList.Row>
+    </KVPList>
+  );
+}
+export default AsPercentageExample;
+`.trim(),
+        },
+      },
+    },
+    render: () => (
+      <KVPList aria-label="Session attendance">
+        <KVPList.Row orientation="horizontal">
+          <KVPList.Term>Present</KVPList.Term>
+          <KVPList.Definition isPercentage>94.2</KVPList.Definition>
+        </KVPList.Row>
+        <KVPList.Row orientation="horizontal">
+          <KVPList.Term>Authorised absence</KVPList.Term>
+          <KVPList.Definition isPercentage>3.1</KVPList.Definition>
+        </KVPList.Row>
+        <KVPList.Row orientation="horizontal">
+          <KVPList.Term>Unauthorised absence</KVPList.Term>
+          <KVPList.Definition isPercentage>2.7</KVPList.Definition>
+        </KVPList.Row>
+      </KVPList>
+    ),
+  },
+  '`isPercentage=true` appends a `%` suffix span after the definition content. The `%` is part of the DOM and will be read by screen readers — never also include `%` in `children`.',
+);
+
+export const MultipleRows: Story = withDescription(
+  {
+    parameters: {
+      controls: { disable: true },
+      docs: {
+        source: {
+          language: 'tsx',
+          code: `
+import { KVPList } from '@arbor-education/design-system.components';
+
+function MultipleRowsExample() {
+  return (
+    <KVPList aria-label="Student attendance summary">
+      <KVPList.Row orientation="horizontal">
+        <KVPList.Term>Overall attendance</KVPList.Term>
+        <KVPList.Definition isPercentage prominence="strong">94.2</KVPList.Definition>
+      </KVPList.Row>
+      <KVPList.Row orientation="horizontal">
+        <KVPList.Term>Autumn term</KVPList.Term>
+        <KVPList.Definition isPercentage>96.1</KVPList.Definition>
+      </KVPList.Row>
+      <KVPList.Row orientation="horizontal">
+        <KVPList.Term>Spring term</KVPList.Term>
+        <KVPList.Definition isPercentage>93.4</KVPList.Definition>
+      </KVPList.Row>
+    </KVPList>
+  );
+}
+export default MultipleRowsExample;
+`.trim(),
+        },
+      },
+    },
+    render: MultipleRowsTemplate,
+  },
+  'The most common production pattern — several horizontal rows with one `prominence="strong"` value at the top for the headline metric, followed by `"neutral"` breakdown rows.',
+);
+
+export const MixedOrientations: Story = withDescription(
+  {
+    parameters: {
+      controls: { disable: true },
+      docs: {
+        source: {
+          language: 'tsx',
+          code: `
+import { KVPList } from '@arbor-education/design-system.components';
+
+function MixedOrientationsExample() {
+  return (
+    <KVPList aria-label="Student profile">
+      <KVPList.Row orientation="vertical">
+        <KVPList.Term>Full name</KVPList.Term>
+        <KVPList.Definition prominence="strong">Alice Johnson</KVPList.Definition>
+      </KVPList.Row>
+      <KVPList.Row orientation="horizontal">
+        <KVPList.Term>Year group</KVPList.Term>
+        <KVPList.Definition>Year 10</KVPList.Definition>
+      </KVPList.Row>
+    </KVPList>
+  );
+}
+export default MixedOrientationsExample;
+`.trim(),
+        },
+      },
+    },
+    render: MixedOrientationsTemplate,
+  },
+  'Vertical and horizontal rows can be mixed freely within the same list. Vertical orientation (term above definition) suits long values or primary identity fields; horizontal suits compact metric rows.',
+);
+
+export const WithAriaLabel: Story = withDescription(
+  {
+    parameters: {
+      controls: { disable: true },
+      docs: {
+        source: {
+          language: 'tsx',
+          code: `
+import { KVPList } from '@arbor-education/design-system.components';
+
+function WithAriaLabelExample() {
+  return (
+    // aria-label activates role="group" on the root div
+    <KVPList aria-label="Contact details">
+      <KVPList.Row orientation="horizontal">
+        <KVPList.Term>Email</KVPList.Term>
+        <KVPList.Definition>alice.johnson@school.edu</KVPList.Definition>
+      </KVPList.Row>
       <KVPList.Row orientation="horizontal">
-        <KVPList.Term>Bar label text</KVPList.Term>
-        <KVPList.Definition prominence="neutral">X</KVPList.Definition>
+        <KVPList.Term>Phone</KVPList.Term>
+        <KVPList.Definition>01234 567890</KVPList.Definition>
+      </KVPList.Row>
+    </KVPList>
+  );
+}
+export default WithAriaLabelExample;
+`.trim(),
+        },
+      },
+    },
+    render: () => (
+      <KVPList aria-label="Contact details">
+        <KVPList.Row orientation="horizontal">
+          <KVPList.Term>Email</KVPList.Term>
+          <KVPList.Definition>alice.johnson@school.edu</KVPList.Definition>
+        </KVPList.Row>
+        <KVPList.Row orientation="horizontal">
+          <KVPList.Term>Phone</KVPList.Term>
+          <KVPList.Definition>01234 567890</KVPList.Definition>
+        </KVPList.Row>
+        <KVPList.Row orientation="horizontal">
+          <KVPList.Term>Key stage</KVPList.Term>
+          <KVPList.Definition>Key Stage 4</KVPList.Definition>
+        </KVPList.Row>
+      </KVPList>
+    ),
+  },
+  'Providing `aria-label` activates `role="group"` on the root `<div>`, giving screen readers a navigable group landmark. Without `aria-label`, the root is a plain `<div>` with no group semantics.',
+);
+
+export const WithProgressBars: Story = withDescription(
+  {
+    parameters: {
+      controls: { disable: true },
+      docs: {
+        source: {
+          language: 'tsx',
+          code: `
+import { KVPList, Progress } from '@arbor-education/design-system.components';
+
+function WithProgressBarsExample() {
+  return (
+    <KVPList aria-label="Attendance by year group">
+      <KVPList.Row orientation="horizontal">
+        <KVPList.Term>Year 7</KVPList.Term>
+        <KVPList.Definition isPercentage>96</KVPList.Definition>
         <KVPList.Definition aria-hidden="true" isRow>
-          <Progress aria-label="Attendance progress second" max={100} value={95} />
+          <Progress aria-label="Year 7 attendance" max={100} value={96} />
         </KVPList.Definition>
       </KVPList.Row>
     </KVPList>
-  ),
-};
-
-export default meta;
+  );
+}
+export default WithProgressBarsExample;
+`.trim(),
+        },
+      },
+    },
+    render: WithProgressTemplate,
+  },
+  'A `Progress` bar embedded via `isRow` on a Definition spans the full row width. The progress bar is `aria-hidden="true"` since the percentage value in the preceding Definition already conveys the data to screen readers.',
+);