Skip to content

Commit 7fc6eb0

Browse files
castastrophecastastrophe
authored
chore: minor accordion story updates (#2577)
* chore: minor accordion story updates * docs: storybook template update * chore: storybook utilities imported
1 parent f0fae60 commit 7fc6eb0

File tree

3 files changed

+153
-149
lines changed

3 files changed

+153
-149
lines changed

‎.storybook/DocumentationTemplate.mdx

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,12 @@
22

33
import { Meta, Title, Subtitle, Description, Primary, Controls, Stories } from '@storybook/blocks';
44

5-
{/*
6-
* 👇 The isTemplate property is required to tell Storybook that this is a template
7-
* See https://storybook.js.org/docs/react/api/doc-block-meta
8-
* to learn how to use
9-
*/}
10-
5+
{/* 👇 The isTemplate property is required to tell Storybook that this is a template */}
116
<Meta isTemplate />
127

138
<Title />
9+
<Subtitle />
10+
<Description />
1411

1512
<Primary />
1613

@@ -19,3 +16,5 @@ import { Meta, Title, Subtitle, Description, Primary, Controls, Stories } from '
1916
The component accepts the following inputs (properties):
2017

2118
<Controls />
19+
20+
<Stories includePrimary={ false } />

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

Lines changed: 113 additions & 123 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
11
import { html } from "lit";
2-
import { when } from "lit/directives/when.js";
2+
import { styleMap } from "lit/directives/style-map.js";
33

4-
import { Template } from "./template";
4+
import { Template } from "@spectrum-css/accordion/stories/template.js";
5+
import { Template as Link } from "@spectrum-css/link/stories/template.js";
6+
import { Template as Typography } from "@spectrum-css/typography/stories/template.js";
57

8+
/**
9+
* The accordion element contains a list of items that can be expanded or collapsed to reveal additional content or information associated with each item. There can be zero expanded items, exactly one expanded item, or more than one item expanded at a time, depending on the configuration. This list of items is defined by child accordion item elements.
10+
*/
611
export default {
712
title: "Components/Accordion",
8-
description:
9-
"The accordion element contains a list of items that can be expanded or collapsed to reveal additional content or information associated with each item. There can be zero expanded items, exactly one expanded item, or more than one item expanded at a time, depending on the configuration. This list of items is defined by child accordion item elements.",
1013
component: "Accordion",
1114
argTypes: {
1215
items: { table: { disable: true } },
@@ -45,6 +48,94 @@ export default {
4548
size: "m",
4649
density: "regular",
4750
disableAll: false,
51+
/* Content sourced from: https://www.adobe.com/products/catalog.html#:~:text=Frequently%20asked%20questions. */
52+
items: new Map([
53+
[
54+
"Are any Adobe products free?",
55+
{
56+
content:
57+
"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.",
58+
isDisabled: true,
59+
},
60+
],
61+
[
62+
"Are Adobe products worth it?",
63+
{
64+
content: Typography({
65+
semantics: "body",
66+
content: [
67+
"Adobe makes some of the most widely used software applications in the world, many of which are industry standard. Get started with free apps like Adobe Acrobat Reader, Aero, Fill & Sign, Photoshop Express, and Adobe Scan. Or consider Creative Cloud, with plans starting at just US$9.99/mo. Every Adobe Creative Cloud plan includes perks like free stock images and fonts, collaboration tools, and cloud storage as well as regular feature updates to deliver the latest technology.",
68+
Link({
69+
url: "https://www.adobe.com/creativecloud/plans.html",
70+
text: "Learn more about Adobe Creative Cloud plans and pricing.",
71+
}),
72+
],
73+
}),
74+
isOpen: true,
75+
},
76+
],
77+
[
78+
"Which Adobe product is best for editing PDFs?",
79+
{
80+
content: Typography({
81+
semantics: "body",
82+
content: [
83+
"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.",
84+
Link({
85+
url: "https://www.adobe.com/acrobat.html",
86+
text: "Learn more about Acrobat.",
87+
}),
88+
],
89+
}),
90+
},
91+
],
92+
[
93+
"How many products does Adobe have?",
94+
{
95+
content:
96+
"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.",
97+
isOpen: true,
98+
},
99+
],
100+
[
101+
"How much do Adobe products cost?",
102+
{
103+
content: Typography({
104+
semantics: "body",
105+
content: [
106+
"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.",
107+
Link({
108+
url: "https://www.adobe.com/creativecloud/plans.html",
109+
text: "Explore Creative Cloud plans.",
110+
}),
111+
],
112+
}),
113+
},
114+
],
115+
[
116+
"What are the most popular Adobe products?",
117+
{
118+
content:
119+
"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.",
120+
},
121+
],
122+
[
123+
"How can I get a student discount on Adobe products?",
124+
{
125+
content: Typography({
126+
semantics: "body",
127+
content: [
128+
`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(
129+
{
130+
url: "https://www.adobe.com/creativecloud/buy/students.html",
131+
text: "Learn more about Creative Cloud for students.",
132+
}
133+
)}`,
134+
],
135+
}),
136+
},
137+
]
138+
]),
48139
},
49140
parameters: {
50141
actions: {
@@ -53,133 +144,32 @@ export default {
53144
status: {
54145
type: process.env.MIGRATED_PACKAGES.includes("accordion")
55146
? "migrated"
56-
: undefined,
147+
: "legacy",
57148
},
58149
},
59150
};
60151

61-
const AccordionGroup = ({
62-
customStyles = {},
63-
...args
64-
}) => {
65-
return html`
66-
<div style="display: flex; gap: 2rem;">
152+
const AccordionGroup = (args) => html`
153+
${window.isChromatic() ? html`
154+
<div style=${styleMap({
155+
display: "flex",
156+
flexWrap: "wrap",
157+
gap: "2em"
158+
})}>
159+
${Template(args)}
67160
${Template({
68161
...args,
69-
items: new Map([
70-
[
71-
"Recent",
72-
{
73-
content: "Item 1",
74-
isOpen: true,
75-
isDisabled: false,
76-
},
77-
],
78-
[
79-
"Architecture",
80-
{
81-
content: "Item 2",
82-
isOpen: false,
83-
isDisabled: true,
84-
},
85-
],
86-
[
87-
"Nature",
88-
{
89-
content: "Item 3",
90-
isOpen: false,
91-
isDisabled: false,
92-
},
93-
],
94-
[
95-
"Really Long Accordion Item that should wrap",
96-
{
97-
content: "Really long content that should wrap when component has a max or fixed width",
98-
isOpen: true,
99-
isDisabled: false,
100-
},
101-
],
102-
]),
162+
customStyles: {
163+
maxInlineSize: "300px",
164+
},
165+
})}
166+
${Template({
167+
...args,
168+
disableAll: true,
103169
})}
104-
${when(window.isChromatic(), () =>
105-
Template({
106-
...args,
107-
customStyles: { "max-inline-size": "300px"},
108-
items: new Map([
109-
[
110-
"Recent",
111-
{
112-
content: "Item 1",
113-
isOpen: true,
114-
isDisabled: false,
115-
},
116-
],
117-
[
118-
"Architecture",
119-
{
120-
content: "Item 2",
121-
isOpen: false,
122-
isDisabled: true,
123-
},
124-
],
125-
[
126-
"Nature",
127-
{
128-
content: "Item 3",
129-
isOpen: false,
130-
isDisabled: false,
131-
},
132-
],
133-
[
134-
"Really Long Accordion Item that should wrap",
135-
{
136-
content: "Really long content that should wrap when component has a max or fixed width",
137-
isOpen: true,
138-
isDisabled: false,
139-
},
140-
],
141-
]),
142-
})
143-
)}
144-
${when(window.isChromatic(), () =>
145-
Template({
146-
...args,
147-
disableAll: true,
148-
items: new Map([
149-
[
150-
"Recent",
151-
{
152-
content: "Item 1",
153-
isOpen: true,
154-
},
155-
],
156-
[
157-
"Architecture",
158-
{
159-
content: "Item 2",
160-
isOpen: false,
161-
},
162-
],
163-
[
164-
"Nature",
165-
{
166-
content: "Item 3",
167-
isOpen: false,
168-
},
169-
],
170-
[
171-
"Really Long Accordion Item that should wrap",
172-
{
173-
content: "Really long content that should wrap when component has a max or fixed width",
174-
isOpen: true,
175-
},
176-
],
177-
]),
178-
})
179-
)}
180170
</div>
181-
`;
182-
};
171+
` : Template(args)}
172+
`;
183173

184174
export const Default = AccordionGroup.bind({});
185175
Default.args = {};

0 commit comments

Comments
 (0)