Skip to content

Commit 196ea51

Browse files
jawinnjawinn
committed
docs(accordion): additions to stories and tests
Reorganize and add stories to better document accordion's various options. - Adds a disabled state story - Simplifies accordion items displayed on Docs page - Tests accordion states and density sizes in testing preview grid
1 parent a6eac81 commit 196ea51

File tree

4 files changed

+186
-36
lines changed

4 files changed

+186
-36
lines changed

‎components/accordion/dist/metadata.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
".spectrum-Accordion--compact.spectrum-Accordion--sizeS",
88
".spectrum-Accordion--compact.spectrum-Accordion--sizeXL",
99
".spectrum-Accordion--quiet",
10+
".spectrum-Accordion--quiet .spectrum-Accordion-itemHeader",
1011
".spectrum-Accordion--sizeL",
1112
".spectrum-Accordion--sizeS",
1213
".spectrum-Accordion--sizeXL",

‎components/accordion/stories/accordion.stories.js

Lines changed: 16 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ const content = new Map([
8080
{
8181
content:
8282
"Yes, Adobe offers free products like Acrobat Reader, Aero, Fill & Sign, Photoshop Express, and Adobe Scan. You can also use Creative Cloud Express, Fresco, and Lightroom Mobile for free, with the option of making in-app purchases.",
83-
isDisabled: true,
83+
isDisabled: false,
8484
},
8585
],
8686
[
@@ -116,23 +116,11 @@ const content = new Map([
116116
],
117117
[
118118
"How many products does Adobe have?",
119-
{
120-
content:
121-
"Adobe offers nearly 100 products. Get creative with industry-standard apps like Adobe Photoshop, Illustrator InDesign, and Lightroom. Create, edit, and sign PDFs with Adobe Acrobat and Acrobat Sign. And deliver exceptional customer experiences with our marketing and commerce apps such as Adobe Experience Manager, Campaign, and Target.",
122-
isOpen: true,
123-
},
124-
],
125-
[
126-
"How much do Adobe products cost?",
127119
{
128120
content: Typography({
129121
semantics: "body",
130122
content: [
131-
"Creative Cloud plans start at US$9.99/mo. You can subscribe to specific Single App plans or get 20+ creative apps and services in the Creative Cloud All Apps plan.",
132-
Link({
133-
url: "https://www.adobe.com/creativecloud/plans.html",
134-
text: "Explore Creative Cloud plans.",
135-
}),
123+
"Adobe offers nearly 100 products. Get creative with industry-standard apps like Adobe Photoshop, Illustrator, InDesign, and Lightroom. Create, edit, and sign PDFs with Adobe Acrobat and Acrobat Sign. And deliver exceptional customer experiences with our marketing and commerce apps such as adobe experience manager, Campaign, and Target.",
136124
],
137125
}),
138126
},
@@ -144,22 +132,6 @@ const content = new Map([
144132
"Adobe makes some of the most widely used software in the world, including popular apps like Acrobat Pro, Photoshop, Illustrator, InDesign, Lightroom, and Premiere Pro.",
145133
},
146134
],
147-
[
148-
"How can I get a student discount on Adobe products?",
149-
{
150-
content: Typography({
151-
semantics: "body",
152-
content: [
153-
`Students who provide a valid school-issued email address at purchase are eligible to save over 60% on Creative Cloud All Apps, which includes 20+ apps such as Photoshop, Illustrator, InDesign, Acrobat Pro, and more. ${Link(
154-
{
155-
url: "https://www.adobe.com/creativecloud/buy/students.html",
156-
text: "Learn more about Creative Cloud for students.",
157-
}
158-
)}`,
159-
],
160-
}),
161-
},
162-
]
163135
]);
164136

165137
/**
@@ -214,6 +186,20 @@ Spacious.parameters = {
214186
};
215187
Spacious.storyName = "Density: Spacious";
216188

189+
/**
190+
* Individual accordion items (of class `.spectrum-Accordion-item`) can be styled as disabled by applying the `is-disabled` class.
191+
* This example markup also applies the `disabled` attribute on the heading button.
192+
*/
193+
export const Disabled = Template.bind({});
194+
Disabled.tags = ["!dev"];
195+
Disabled.args = {
196+
items: content,
197+
disableAll: true,
198+
};
199+
Disabled.parameters = {
200+
chromatic: { disableSnapshot: true },
201+
};
202+
217203
/**
218204
* The optional quiet style for accordion has no dividers between sections. This style works best when a clear layout
219205
* (vertical stack, table, grid) makes it easy see and understand. Too many quiet components in a small space can be

‎components/accordion/stories/accordion.test.js

Lines changed: 160 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,148 @@
1-
import { Variants } from "@spectrum-css/preview/decorators";
1+
import { Template as Link } from "@spectrum-css/link/stories/template.js";
2+
import { Sizes, Variants } from "@spectrum-css/preview/decorators";
3+
import { Template as Typography } from "@spectrum-css/typography/stories/template.js";
24
import { Template } from "./template.js";
35

6+
/**
7+
* General accordion item content for tests.
8+
* Content sourced from: https://www.adobe.com/products/catalog.html#:~:text=Frequently%20asked%20questions.
9+
*/
10+
const testsContent = new Map([
11+
[
12+
"Are any Adobe products free?",
13+
{
14+
content: "Yes, Adobe offers free products like Acrobat Reader, Aero, Fill & Sign, Photoshop Express, and Adobe Scan. You can also use Creative Cloud Express, Fresco, and Lightroom Mobile for free, with the option of making in-app purchases.",
15+
},
16+
],
17+
[
18+
"Are Adobe products worth it?",
19+
{
20+
content: Typography({
21+
semantics: "body",
22+
content: [
23+
"This is an example of text content within the content area that uses the spectrum-Body typography class on the paragraphs. Adobe makes some of the most widely used software applications in the world, many of which are industry standard.",
24+
Link({
25+
url: "https://www.adobe.com/creativecloud/plans.html",
26+
text: "Learn more about Adobe Creative Cloud plans and pricing.",
27+
}),
28+
],
29+
}),
30+
isOpen: true,
31+
},
32+
],
33+
[
34+
"Which Adobe product is best for editing PDFs?",
35+
{
36+
content: Typography({
37+
semantics: "body",
38+
content: [
39+
"You can edit PDFs with Adobe Acrobat, which is available in two editions: Standard and Pro. Acrobat Standard provides basic tools to create, edit, and sign PDFs on Windows devices. Acrobat Pro is the complete PDF solution with tools to edit, convert, and sign PDFs across web, mobile, and tablet, as well as on Windows and macOS computers. If you'd like to try before you buy, you can get a free 7-day trial of Acrobat Pro.",
40+
Link({
41+
url: "https://www.adobe.com/acrobat.html",
42+
text: "Learn more about Acrobat.",
43+
}),
44+
],
45+
}),
46+
},
47+
],
48+
[
49+
"How many products does Adobe have?",
50+
{
51+
content: "This is an example of text content within the content area that is not wrapped by any typography classes or elements. Adobe offers nearly 100 products. Get creative with industry-standard apps like Adobe Photoshop, Illustrator InDesign, and Lightroom. Create, edit, and sign PDFs with Adobe Acrobat and Acrobat Sign. And deliver exceptional customer experiences with our marketing and commerce apps such as Adobe Experience Manager, Campaign, and Target.",
52+
isOpen: true,
53+
},
54+
],
55+
[
56+
"What are the most popular Adobe products?",
57+
{
58+
content: "This is an example of text content within the content area that is not wrapped by any typography classes or elements. Adobe makes some of the most widely used software in the world, including popular apps like Acrobat Pro, Photoshop, Illustrator, InDesign, Lightroom, and Premiere Pro.",
59+
},
60+
],
61+
]);
62+
63+
const defaultContentText = "This is an example of text content within the content area that is not wrapped by any typography classes or elements.";
64+
65+
/**
66+
* Content for testing accordion item states.
67+
*/
68+
const statesTestContent = new Map([
69+
[
70+
"hovered",
71+
{
72+
isHovered: true,
73+
content: defaultContentText,
74+
},
75+
],
76+
[
77+
"disabled",
78+
{
79+
isDisabled: true,
80+
isHovered: true,
81+
content: defaultContentText,
82+
},
83+
],
84+
[
85+
"hovered + disabled",
86+
{
87+
isDisabled: true,
88+
isHovered: true,
89+
content: defaultContentText,
90+
},
91+
],
92+
[
93+
"focus-visible",
94+
{
95+
isFocused: true,
96+
content: defaultContentText,
97+
},
98+
],
99+
[
100+
"active/down",
101+
{
102+
isActive: true,
103+
content: defaultContentText,
104+
},
105+
],
106+
[
107+
"active/down + hovered",
108+
{
109+
isActive: true,
110+
isHovered: true,
111+
content: defaultContentText,
112+
},
113+
],
114+
[
115+
"focus-visible + hovered",
116+
{
117+
isFocused: true,
118+
isHovered: true,
119+
content: defaultContentText,
120+
},
121+
],
122+
]);
123+
4124
export const AccordionGroup = Variants({
5125
Template,
6126
testData: [
7127
{
8128
testHeading: "Standard",
129+
items: testsContent,
130+
customStyles: {
131+
maxInlineSize: "500px",
132+
},
133+
},
134+
{
135+
testHeading: "Quiet",
136+
items: testsContent,
137+
isQuiet: true,
9138
customStyles: {
10139
maxInlineSize: "500px",
11140
},
12141
},
13142
{
14143
testHeading: "Compact",
144+
items: testsContent,
145+
Template: (args, context) => { return Sizes({Template: Template, ...args}, context); },
15146
density: "compact",
16147
collapseAll: true,
17148
customStyles: {
@@ -21,6 +152,8 @@ export const AccordionGroup = Variants({
21152
},
22153
{
23154
testHeading: "Spacious",
155+
items: testsContent,
156+
Template: (args, context) => { return Sizes({Template: Template, ...args}, context); },
24157
density: "spacious",
25158
collapseAll: true,
26159
customStyles: {
@@ -29,8 +162,30 @@ export const AccordionGroup = Variants({
29162
withStates: false,
30163
},
31164
{
32-
testHeading: "Text wrapping",
33-
collapseAll: true,
165+
testHeading: "Heading text wrapping",
166+
items: new Map([
167+
[
168+
"This example has a heading that wraps to two lines.",
169+
{
170+
content: defaultContentText,
171+
isOpen: false,
172+
},
173+
],
174+
[
175+
"This example has a heading that wraps to more than two lines. What are the most popular Adobe products?",
176+
{
177+
content: defaultContentText,
178+
isOpen: false,
179+
},
180+
],
181+
[
182+
"This example has a heading that wraps to more than two lines. It also shows the text in its content area.",
183+
{
184+
content: defaultContentText,
185+
isOpen: true,
186+
},
187+
],
188+
]),
34189
customStyles: {
35190
maxInlineSize: "300px",
36191
},
@@ -39,8 +194,8 @@ export const AccordionGroup = Variants({
39194
],
40195
stateData: [
41196
{
42-
testHeading: "Disabled",
43-
disableAll: true,
197+
testHeading: "Accordion item states",
198+
items: statesTestContent,
44199
},
45200
],
46201
});

‎components/accordion/stories/template.js

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,9 @@ export const AccordionItem = ({
1616
idx = 0,
1717
isDisabled = false,
1818
isOpen = false,
19+
isHovered = false,
20+
isActive = false,
21+
isFocused = false,
1922
iconSize = "m",
2023
customStyles = {},
2124
customClasses = [],
@@ -38,7 +41,12 @@ export const AccordionItem = ({
3841
<h3 class="${rootClass}Heading">
3942
<!-- WAI-ARIA 1.1: Item header <button> uses aria-expanded attribute to indicate expanded state. -->
4043
<button
41-
class="${rootClass}Header"
44+
class=${classMap({
45+
[`${rootClass}Header`]: true,
46+
"is-hover": isHovered,
47+
"is-active": isActive,
48+
"is-focus-visible": isFocused,
49+
})}
4250
type="button"
4351
?disabled=${isDisabled}
4452
id="spectrum-accordion-item-${idx}-header"

0 commit comments

Comments
 (0)