Skip to content

fix(accordion): use realistic example content in stories, add ADR #21561

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
tay1orjones wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

fix(accordion): use realistic example content in stories, add ADR #21561

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 35 additions & 0 deletions docs/decisions/0004-use-realistic-example-content-in-stories.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
# 4. Use realistic example content in stories

Date: 2026-02-16

## Status

Accepted

## Context

Many component stories use generic labels and placeholder prose such as "Section
1 title" and lorem ipsum text. This kind of meta content can accidentally carry
the meaning of the pattern itself instead of validating whether the design is
clear in realistic usage.

For example, sequence-based interactions can appear clear only because labels
use words like "Step", instead of because the component's visual and interaction
design communicates sequence on its own.

Using realistic, task-oriented labels in stories helps us identify when a
component is relying on placeholder wording to explain behavior. It also gives
consumers better examples of how components read in product-like contexts.

## Decision

We will prefer realistic example content in stories over generic meta content
and lorem ipsum placeholders. Story content should use plausible user-facing
labels and supporting text that reflect real tasks.

## Consequences

- Stories become a more effective quality check for whether component affordance
is communicated by design, not placeholder wording.
- Storybook docs become more useful to consumers by showing product-like usage
examples.
102 changes: 42 additions & 60 deletions packages/react/src/components/Accordion/Accordion.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,42 +84,36 @@ export const Default = (args) => {
const { onHeadingClick, ...restArgs } = args;
return (
<Accordion {...restArgs}>
<AccordionItem title="Section 1 title" onHeadingClick={onHeadingClick}>
<AccordionItem title="Choose your plan" onHeadingClick={onHeadingClick}>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
Compare plan features and select the option that best matches your
team&apos;s expected usage.
</p>
</AccordionItem>
<AccordionItem title="Section 2 title" onHeadingClick={onHeadingClick}>
<AccordionItem title="Add team members" onHeadingClick={onHeadingClick}>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
Invite collaborators by email and assign their workspace roles before
launch.
</p>
</AccordionItem>
<AccordionItem title="Section 3 title" onHeadingClick={onHeadingClick}>
<AccordionItem
title="Set payment details"
onHeadingClick={onHeadingClick}>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
Add billing information and choose whether to receive invoices by
email.
</p>
</AccordionItem>
<AccordionItem
onHeadingClick={onHeadingClick}
title={
<span>
Section 4 title (<em>the title can be a node</em>)
Review and confirm (<em>title can be a node</em>)
</span>
}>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
Check your setup summary, then confirm to create the workspace for
your team.
</p>
</AccordionItem>
</Accordion>
Expand Down Expand Up @@ -157,47 +151,39 @@ export const Controlled = (args) => {

<Accordion {...restArgs}>
<AccordionItem
title="Section 1 title"
title="Choose your plan"
open={expandAll}
onHeadingClick={onHeadingClick}>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
Compare plan features and select the option that best matches your
team&apos;s expected usage.
</p>
</AccordionItem>
<AccordionItem
title="Section 2 title"
title="Add team members"
open={expandAll}
onHeadingClick={onHeadingClick}>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
Invite collaborators by email and assign their workspace roles
before launch.
</p>
</AccordionItem>
<AccordionItem
title="Section 3 title"
title="Set payment details"
open={expandAll}
onHeadingClick={onHeadingClick}>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
Add billing information and choose whether to receive invoices by
email.
</p>
</AccordionItem>
<AccordionItem
title="Section 4 title"
title="Review and confirm"
open={expandAll}
onHeadingClick={onHeadingClick}>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
Check your setup summary, then confirm to create the workspace for
your team.
</p>
</AccordionItem>
</Accordion>
Expand All @@ -215,36 +201,32 @@ export const _WithLayer = (args) => {
return (
<WithLayer>
<Accordion {...restArgs}>
<AccordionItem title="Section 1 title" onHeadingClick={onHeadingClick}>
<AccordionItem title="Choose your plan" onHeadingClick={onHeadingClick}>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
Compare plan features and select the option that best matches your
team&apos;s expected usage.
</p>
</AccordionItem>
<AccordionItem title="Section 2 title" onHeadingClick={onHeadingClick}>
<AccordionItem title="Add team members" onHeadingClick={onHeadingClick}>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
Invite collaborators by email and assign their workspace roles
before launch.
</p>
</AccordionItem>
<AccordionItem title="Section 3 title" onHeadingClick={onHeadingClick}>
<AccordionItem
title="Set payment details"
onHeadingClick={onHeadingClick}>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
Add billing information and choose whether to receive invoices by
email.
</p>
</AccordionItem>
<AccordionItem title="Section 4 title" onHeadingClick={onHeadingClick}>
<AccordionItem
title="Review and confirm"
onHeadingClick={onHeadingClick}>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
Check your setup summary, then confirm to create the workspace for
your team.
</p>
</AccordionItem>
</Accordion>
Expand Down
96 changes: 36 additions & 60 deletions packages/web-components/src/components/accordion/accordion.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,47 +80,39 @@ export const Default = {
?isFlush="${isFlush}"
?disabled="${disabled}">
<cds-accordion-item
title="Section 1 title"
title="Choose your plan"
@cds-accordion-item-beingtoggled="${onBeforeToggle}"
@cds-accordion-item-toggled="${onToggle}">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
Compare plan features and select the option that best matches your
team's expected usage.
</p>
</cds-accordion-item>
<cds-accordion-item
title="Section 2 title"
title="Add team members"
@cds-accordion-item-beingtoggled="${onBeforeToggle}"
@cds-accordion-item-toggled="${onToggle}">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
Invite collaborators by email and assign their workspace roles
before launch.
</p>
</cds-accordion-item>
<cds-accordion-item
title="Section 3 title"
title="Set payment details"
@cds-accordion-item-beingtoggled="${onBeforeToggle}"
@cds-accordion-item-toggled="${onToggle}">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
Add billing information and choose whether to receive invoices by
email.
</p>
</cds-accordion-item>
<cds-accordion-item
title="Section 4 title"
title="Review and confirm"
@cds-accordion-item-beingtoggled="${onBeforeToggle}"
@cds-accordion-item-toggled="${onToggle}">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
Check your setup summary, then confirm to create the workspace for
your team.
</p>
</cds-accordion-item>
</cds-accordion>
Expand Down Expand Up @@ -176,50 +168,42 @@ export const Controlled = {
?disabled="${disabled}">
<cds-accordion-item
controlled
title="Section 1 title"
title="Choose your plan"
@cds-accordion-item-beingtoggled="${onBeforeToggle}"
@cds-accordion-item-toggled="${onToggle}">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
Compare plan features and select the option that best matches your
team's expected usage.
</p>
</cds-accordion-item>
<cds-accordion-item
controlled
title="Section 2 title"
title="Add team members"
@cds-accordion-item-beingtoggled="${onBeforeToggle}"
@cds-accordion-item-toggled="${onToggle}">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
Invite collaborators by email and assign their workspace roles
before launch.
</p>
</cds-accordion-item>
<cds-accordion-item
controlled
title="Section 3 title"
title="Set payment details"
@cds-accordion-item-beingtoggled="${onBeforeToggle}"
@cds-accordion-item-toggled="${onToggle}">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
Add billing information and choose whether to receive invoices by
email.
</p>
</cds-accordion-item>
<cds-accordion-item
controlled
title="Section 4 title"
title="Review and confirm"
@cds-accordion-item-beingtoggled="${onBeforeToggle}"
@cds-accordion-item-toggled="${onToggle}">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
Check your setup summary, then confirm to create the workspace for
your team.
</p>
</cds-accordion-item>
</cds-accordion>
Expand Down Expand Up @@ -277,40 +261,32 @@ export const WithLayer = {
?isFlush="${isFlush}"
?disabled="${disabled}">
<cds-accordion-item
title="Section 1 title"
title="Choose your plan"
@cds-accordion-item-beingtoggled="${onBeforeToggle}"
@cds-accordion-item-toggled="${onToggle}">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
Compare plan features and select the option that best matches your
team's expected usage.
</cds-accordion-item>
<cds-accordion-item
title="Section 2 title"
title="Add team members"
@cds-accordion-item-beingtoggled="${onBeforeToggle}"
@cds-accordion-item-toggled="${onToggle}">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
Invite collaborators by email and assign their workspace roles
before launch.
</cds-accordion-item>
<cds-accordion-item
title="Section 3 title"
title="Set payment details"
@cds-accordion-item-beingtoggled="${onBeforeToggle}"
@cds-accordion-item-toggled="${onToggle}">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
Add billing information and choose whether to receive invoices by
email.
</cds-accordion-item>
<cds-accordion-item
title="Section 4 title"
title="Review and confirm"
@cds-accordion-item-beingtoggled="${onBeforeToggle}"
@cds-accordion-item-toggled="${onToggle}">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
Check your setup summary, then confirm to create the workspace for
your team.
</cds-accordion-item>
</cds-accordion>
</sb-template-layers>
Expand Down
Loading