Skip to content

Commit

Permalink
feat(preview): accordion web components
Browse files Browse the repository at this point in the history
  • Loading branch information
@castastrophe
castastrophe committed Aug 7, 2024
1 parent 055e5ad commit 96dc2a8
Show file tree
Hide file tree
Showing 65 changed files with 1,431 additions and 434 deletions.
1 change: 0 additions & 1 deletion .storybook/types/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,5 +15,4 @@ import argTypes from "./args.js";
import globalTypes from "./global.js";

export * from "./states.js";
export * from "./variants.js";
export { argTypes, globalTypes };
22 changes: 1 addition & 21 deletions .storybook/types/states.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,16 +89,6 @@ export const isLoading = {
control: "boolean",
};

export const isIndeterminate = {
name: "Indeterminate",
type: { name: "boolean" },
table: {
type: { summary: "boolean" },
category: "State",
},
control: "boolean",
};

export const isDisabled = {
name: "Disabled",
type: { name: "boolean" },
Expand Down Expand Up @@ -134,7 +124,7 @@ export const isReadOnly = {
type: { name: "boolean" },
table: {
type: { summary: "boolean" },
category: "State",
category: "Advanced",
},
control: "boolean",
};
Expand All @@ -148,13 +138,3 @@ export const isChecked = {
},
control: { type: "boolean" },
};

export const isPending = {
name: "Pending",
type: { name: "boolean" },
table: {
type: { summary: "boolean" },
category: "State",
},
control: "boolean",
};
26 changes: 26 additions & 0 deletions components/accordion/stories/Accordion.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import { LitElement, css, unsafeCSS } from "lit";
import styles from "../index.css?inline";
import { Template } from "./template";

export class Accordion extends LitElement {
static get styles() {
return css`${unsafeCSS(styles)}`;
}

static get properties() {
return {
args: { type: Object },
};
}

constructor() {
super();
this.args = {};
}

render() {
return Template(this.args);
}
}

customElements.define("spectrum-accordion", Accordion);
26 changes: 26 additions & 0 deletions components/accordion/stories/AccordionItem.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import { LitElement, css, unsafeCSS } from "lit";
import styles from "../index.css?inline";
import { ItemTemplate } from "./template.js";

export class AccordionItem extends LitElement {
static get styles() {
return css`${unsafeCSS(styles)}`;
}

static get properties() {
return {
args: { type: Object },
};
}

constructor() {
super();
this.args = {};
}

render() {
return ItemTemplate(this.args);
}
}

customElements.define("spectrum-accordion-item", AccordionItem);
193 changes: 93 additions & 100 deletions components/accordion/stories/accordion.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,24 @@ import { Template as Link } from "@spectrum-css/link/stories/template.js";
import { disableDefaultModes } from "@spectrum-css/preview/modes";
import { size } from "@spectrum-css/preview/types";
import { Template as Typography } from "@spectrum-css/typography/stories/template.js";
import { html } from "lit";
import { version } from "../package.json";
import { AccordionGroup, Template } from "./template.js";
import { AccordionGroup } from "./accordion.test.js";
import { Template } from "./template.js";

import "./Accordion.js";
import "./AccordionItem.js";

/**
* 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.
*/
export default {
title: "Accordion",
component: "Accordion",
component: "spectrum-accordion",
subcomponents: { AccordionItem: "spectrum-accordion-item" },
render: (args) => html`
<spectrum-accordion .args=${args}></spectrum-accordion>
`,
argTypes: {
items: { table: { disable: true } },
size: size(["s", "m", "l", "xl"]),
Expand Down Expand Up @@ -50,116 +59,102 @@ export default {
density: "regular",
collapseAll: false,
disableAll: false,
/* Content sourced from: https://www.adobe.com/products/catalog.html#:~:text=Frequently%20asked%20questions. */
items: [
{
heading: "Are any Adobe products free?",
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.",
isDisabled: true,
},
{
heading: "Are Adobe products worth it?",
content: Typography({
semantics: "body",
content: [
"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.",
Link({
url: "https://www.adobe.com/creativecloud/plans.html",
text: "Learn more about Adobe Creative Cloud plans and pricing.",
}),
],
}),
isOpen: true,
},
{
heading: "Which Adobe product is best for editing PDFs?",
content: Typography({
semantics: "body",
content: [
"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.",
Link({
url: "https://www.adobe.com/acrobat.html",
text: "Learn more about Acrobat.",
}),
],
}),
},
{
heading: "How many products does Adobe have?",
content:
"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.",
isOpen: true,
},
{
heading: "How much do Adobe products cost?",
content: Typography({
semantics: "body",
content: [
"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.",
Link({
url: "https://www.adobe.com/creativecloud/plans.html",
text: "Explore Creative Cloud plans.",
}),
],
}),
},
{
heading: "What are the most popular Adobe products?",
content:
"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.",
},
{
heading: "How can I get a student discount on Adobe products?",
content: Typography({
semantics: "body",
content: [
`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(
{
url: "https://www.adobe.com/creativecloud/buy/students.html",
text: "Learn more about Creative Cloud for students.",
}
)}`,
],
}),
},
],
},
parameters: {
actions: {
handles: ["click .spectrum-Accordion-item"],
},
chromatic: { disableSnapshot: true },
componentVersion: version,
html: {
root: "#root-inner",
},
},
tags: ["!autodocs"],
};

/* Content sourced from: https://www.adobe.com/products/catalog.html#:~:text=Frequently%20asked%20questions. */
const content = new Map([
[
"Are any Adobe products free?",
{
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.",
isDisabled: true,
},
],
[
"Are Adobe products worth it?",
{
content: Typography({
semantics: "body",
content: [
"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.",
Link({
url: "https://www.adobe.com/creativecloud/plans.html",
text: "Learn more about Adobe Creative Cloud plans and pricing.",
}),
],
}),
isOpen: true,
},
],
[
"Which Adobe product is best for editing PDFs?",
{
content: Typography({
semantics: "body",
content: [
"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.",
Link({
url: "https://www.adobe.com/acrobat.html",
text: "Learn more about Acrobat.",
}),
],
}),
},
],
[
"How many products does Adobe have?",
{
content:
"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.",
isOpen: true,
},
],
[
"How much do Adobe products cost?",
{
content: Typography({
semantics: "body",
content: [
"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.",
Link({
url: "https://www.adobe.com/creativecloud/plans.html",
text: "Explore Creative Cloud plans.",
}),
],
}),
},
],
[
"What are the most popular Adobe products?",
{
content:
"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.",
},
],
[
"How can I get a student discount on Adobe products?",
{
content: Typography({
semantics: "body",
content: [
`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(
{
url: "https://www.adobe.com/creativecloud/buy/students.html",
text: "Learn more about Creative Cloud for students.",
}
)}`,
],
}),
},
]
]);

export const Default = AccordionGroup.bind({});
Default.args = {
items: content,
};
Default.parameters = {
chromatic: { disableSnapshot: false },
export const Default = {
parameters: {
chromatic: { disableSnapshot: false },
}
};

// ********* VRT ONLY ********* //
export const WithForcedColors = Default.bind({});
export const WithForcedColors = AccordionGroup.bind({});
WithForcedColors.args = Default.args;
WithForcedColors.tags = ["!autodocs", "!dev"];
WithForcedColors.parameters = {
Expand All @@ -173,13 +168,11 @@ WithForcedColors.parameters = {
export const Compact = Template.bind({});
Compact.tags = ["!dev"];
Compact.args = {
items: content,
density: "compact",
};

export const Spacious = Template.bind({});
Spacious.tags = ["!dev"];
Spacious.args = {
items: content,
density: "spacious",
};
46 changes: 46 additions & 0 deletions components/accordion/stories/accordion.test.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import { Variants } from "@spectrum-css/preview/decorators";
import { Template } from "./template.js";

export const AccordionGroup = Variants({
Template,
testData: [
{
testHeading: "Standard",
customStyles: {
maxInlineSize: "500px",
},
},
{
testHeading: "Compact",
density: "compact",
collapseAll: true,
customStyles: {
maxInlineSize: "500px",
},
withStates: false,
},
{
testHeading: "Spacious",
density: "spacious",
collapseAll: true,
customStyles: {
maxInlineSize: "500px",
},
withStates: false,
},
{
testHeading: "Text wrapping",
collapseAll: true,
customStyles: {
maxInlineSize: "300px",
},
withStates: false,
},
],
stateData: [
{
testHeading: "Disabled",
disableAll: true,
},
],
});
Loading

0 comments on commit 96dc2a8

Please sign in to comment.