From 7f35f316d8ce7170842ef475c075a640c682d740 Mon Sep 17 00:00:00 2001 From: "[ Cassondra ]" Date: Tue, 6 Aug 2024 23:37:46 -0400 Subject: [PATCH] feat(preview): accordion web components --- .storybook/types/index.js | 1 - .storybook/types/states.js | 22 +- .storybook/types/variants.js | 69 ------- components/accordion/stories/Accordion.js | 26 +++ components/accordion/stories/AccordionItem.js | 26 +++ .../accordion/stories/accordion.stories.js | 193 +++++++++--------- .../accordion/stories/accordion.test.js | 46 +++++ components/accordion/stories/template.js | 89 ++------ .../actionbar/stories/actionbar.stories.js | 12 +- .../stories/actionbutton.stories.js | 60 +++++- components/actionbutton/stories/template.js | 10 +- .../stories/actiongroup.stories.js | 12 +- components/actiongroup/stories/template.js | 3 - components/avatar/stories/avatar.stories.js | 22 +- components/avatar/stories/template.js | 2 +- components/badge/stories/badge.stories.js | 12 +- .../breadcrumb/stories/breadcrumb.stories.js | 11 +- components/button/stories/button.stories.js | 56 ++++- components/button/stories/template.js | 4 +- .../stories/buttongroup.stories.js | 12 +- .../calendar/stories/calendar.stories.js | 6 +- components/calendar/stories/template.js | 8 +- components/card/stories/card.stories.js | 12 +- .../checkbox/stories/checkbox.stories.js | 63 +++++- .../stories/clearbutton.stories.js | 31 ++- .../stories/closebutton.stories.js | 33 ++- components/closebutton/stories/template.js | 4 +- .../stories/coachindicator.stories.js | 11 +- .../combobox/stories/combobox.stories.js | 53 ++++- .../datepicker/stories/datepicker.stories.js | 54 ++++- components/datepicker/stories/template.js | 14 +- components/dial/stories/dial.stories.js | 33 ++- components/divider/stories/divider.stories.js | 23 ++- components/divider/stories/template.js | 6 +- .../dropzone/stories/dropzone.stories.js | 11 +- .../fieldgroup/stories/fieldgroup.stories.js | 6 +- .../fieldlabel/stories/fieldlabel.stories.js | 32 ++- .../helptext/stories/helptext.stories.js | 23 ++- components/icon/stories/icon.stories.js | 10 +- components/icon/stories/template.js | 37 ++-- .../stories/infieldbutton.stories.js | 32 ++- components/link/stories/link.stories.js | 22 +- components/link/stories/template.js | 4 +- .../stories/logicbutton.stories.js | 11 +- components/menu/stories/menu.stories.js | 34 ++- components/menu/stories/template.js | 4 +- .../pagination/stories/pagination.stories.js | 16 +- components/picker/stories/picker.stories.js | 53 ++++- .../stories/pickerbutton.stories.js | 33 ++- .../stories/progressbar.stories.js | 20 +- components/progressbar/stories/template.js | 4 +- .../stories/progresscircle.stories.js | 31 ++- components/radio/stories/radio.stories.js | 52 ++++- components/rating/stories/rating.stories.js | 32 ++- components/search/stories/search.stories.js | 32 ++- components/slider/stories/slider.stories.js | 23 ++- .../stories/statuslight.stories.js | 12 +- components/stepper/stories/stepper.stories.js | 43 +++- components/swatch/stories/swatch.stories.js | 23 ++- components/switch/stories/switch.stories.js | 42 +++- components/table/stories/table.stories.js | 33 ++- components/tabs/stories/tabs.stories.js | 32 ++- components/tag/stories/tag.stories.js | 30 ++- .../textfield/stories/textfield.stories.js | 78 ++++++- .../thumbnail/stories/thumbnail.stories.js | 36 +++- .../treeview/stories/treeview.stories.js | 22 +- .../typography/stories/typography.stories.js | 30 ++- 67 files changed, 1435 insertions(+), 507 deletions(-) delete mode 100644 .storybook/types/variants.js create mode 100644 components/accordion/stories/Accordion.js create mode 100644 components/accordion/stories/AccordionItem.js create mode 100644 components/accordion/stories/accordion.test.js diff --git a/.storybook/types/index.js b/.storybook/types/index.js index d0b18a6d01..86e20f39e9 100644 --- a/.storybook/types/index.js +++ b/.storybook/types/index.js @@ -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 }; diff --git a/.storybook/types/states.js b/.storybook/types/states.js index 145c671ea5..36aa15a60b 100644 --- a/.storybook/types/states.js +++ b/.storybook/types/states.js @@ -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" }, @@ -134,7 +124,7 @@ export const isReadOnly = { type: { name: "boolean" }, table: { type: { summary: "boolean" }, - category: "State", + category: "Advanced", }, control: "boolean", }; @@ -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", -}; diff --git a/.storybook/types/variants.js b/.storybook/types/variants.js deleted file mode 100644 index d890bd1e55..0000000000 --- a/.storybook/types/variants.js +++ /dev/null @@ -1,69 +0,0 @@ -/** - * - * @param {("xxs"|"xs"|"s"|"m"|"l"|"xl"|"xxl"|number)[]} options - * @returns - */ -export const size = ( - options = ["s", "m", "l", "xl"], - hasLabels = true, -) => ({ - name: "Size", - type: { name: "string", required: true }, - table: { - type: { summary: "string" }, - category: "Component", - }, - options, - control: { - type: 'select', - labels: hasLabels ? { - xxs: 'Extra-extra-small', - xs: 'Extra-small', - s: 'Small', - m: 'Medium', - l: 'Large', - xl: 'Extra-large', - xxl: 'Extra-extra-large', - xxxl: 'Extra-extra-extra-large', - } : undefined, - }, -}); - -export const isEmphasized = { - name: "Emphasized styling", - type: { name: "boolean" }, - table: { - type: { summary: "boolean" }, - category: "Component", - }, - control: { type: "boolean" }, -}; - -export const isQuiet = { - name: "Quiet styling", - type: { name: "boolean" }, - table: { - type: { summary: "boolean" }, - category: "Component", - }, - control: { type: "boolean" }, -}; - -export const staticColor = { - name: "Static color", - description: - "Used when component is layered over a background or visual contrary to the general theme.", - type: { name: "string" }, - table: { - type: { summary: "string" }, - category: "Advanced", - }, - options: ["white", "black"], - control: { - type: 'select', - labels: { - white: 'Over dark background', - black: 'Over light background', - }, - }, -}; diff --git a/components/accordion/stories/Accordion.js b/components/accordion/stories/Accordion.js new file mode 100644 index 0000000000..4b4672ac2e --- /dev/null +++ b/components/accordion/stories/Accordion.js @@ -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); diff --git a/components/accordion/stories/AccordionItem.js b/components/accordion/stories/AccordionItem.js new file mode 100644 index 0000000000..6e105ae618 --- /dev/null +++ b/components/accordion/stories/AccordionItem.js @@ -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); diff --git a/components/accordion/stories/accordion.stories.js b/components/accordion/stories/accordion.stories.js index 8832552d89..59f5583a01 100644 --- a/components/accordion/stories/accordion.stories.js +++ b/components/accordion/stories/accordion.stories.js @@ -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` + + `, argTypes: { items: { table: { disable: true } }, size: size(["s", "m", "l", "xl"]), @@ -50,6 +59,80 @@ 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: { @@ -57,109 +140,21 @@ export default { }, 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 = { @@ -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", }; diff --git a/components/accordion/stories/accordion.test.js b/components/accordion/stories/accordion.test.js new file mode 100644 index 0000000000..192400fe3f --- /dev/null +++ b/components/accordion/stories/accordion.test.js @@ -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, + }, + ], +}); diff --git a/components/accordion/stories/template.js b/components/accordion/stories/template.js index 3e2e86ad91..23237258aa 100644 --- a/components/accordion/stories/template.js +++ b/components/accordion/stories/template.js @@ -1,14 +1,11 @@ import { Template as Icon } from "@spectrum-css/icon/stories/template.js"; -import { Variants } from "@spectrum-css/preview/decorators"; import { html } from "lit"; import { classMap } from "lit/directives/class-map.js"; import { ifDefined } from "lit/directives/if-defined.js"; import { repeat } from "lit/directives/repeat.js"; import { styleMap } from "lit/directives/style-map.js"; -import "../index.css"; - -export const AccordionItem = ({ +export const ItemTemplate = ({ heading, content, rootClass = "spectrum-Accordion-item", @@ -20,7 +17,12 @@ export const AccordionItem = ({ customStyles = {}, customClasses = [], onclick, + disableAll = false, + collapseAll = false, } = {}, context = {}) => { + if (disableAll) isDisabled = true; + if (collapseAll) isOpen = false; + return html`
{ - const { updateArgs } = context; - +} = {}) => { return html`
- ${repeat(Array.from(items.keys()), (heading, idx) => { - const item = items.get(heading); - return AccordionItem({ - ...item, - rootClass: `${rootClass}-item`, - heading, - idx, - iconSize: `${size}`, - isDisabled: item.isDisabled || disableAll, - isOpen: collapseAll === true ? false : item.isOpen, - onclick: function() { - if (item.isDisabled) return; - - // Update the args - const newItems = new Map(items); - newItems.set(heading, { - ...item, - isOpen: !item.isOpen, - }); - updateArgs({ items: newItems }); - }, - }, context); - })} + ${repeat(items, + (_, idx) => idx, + (item) => html` + + ` + )}
`; }; - -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, - }, - ], -}); diff --git a/components/actionbar/stories/actionbar.stories.js b/components/actionbar/stories/actionbar.stories.js index 4ee2e0652e..74bdcb59ac 100644 --- a/components/actionbar/stories/actionbar.stories.js +++ b/components/actionbar/stories/actionbar.stories.js @@ -2,7 +2,7 @@ import { default as ActionButton } from "@spectrum-css/actionbutton/stories/acti import { default as CloseButton } from "@spectrum-css/closebutton/stories/closebutton.stories.js"; import { default as Popover } from "@spectrum-css/popover/stories/popover.stories.js"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; -import { isEmphasized, isOpen } from "@spectrum-css/preview/types"; +import { isOpen } from "@spectrum-css/preview/types"; import { version } from "../package.json"; import { ActionBarGroup, Template } from "./template"; @@ -14,7 +14,15 @@ export default { component: "ActionBar", argTypes: { isOpen, - isEmphasized, + isEmphasized: { + name: "Emphasized styling", + type: { name: "boolean" }, + table: { + type: { summary: "boolean" }, + category: "Component", + }, + control: "boolean", + }, isSticky: { name: "Sticky", type: { name: "boolean" }, diff --git a/components/actionbutton/stories/actionbutton.stories.js b/components/actionbutton/stories/actionbutton.stories.js index b182d9d976..3331933b3f 100644 --- a/components/actionbutton/stories/actionbutton.stories.js +++ b/components/actionbutton/stories/actionbutton.stories.js @@ -1,6 +1,6 @@ import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.js"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; -import { isActive, isDisabled, isEmphasized, isFocused, isHovered, isQuiet, isSelected, size, staticColor } from "@spectrum-css/preview/types"; +import { isDisabled, isFocused, isHovered, isSelected } from "@spectrum-css/preview/types"; import { version } from "../package.json"; import { ActionButtonGroup, ActionButtons } from "./template"; @@ -11,7 +11,16 @@ export default { title: "Action button", component: "ActionButton", argTypes: { - size: size(["xs", "s", "m", "l", "xl"]), + size: { + name: "Size", + type: { name: "string", required: true }, + table: { + type: { summary: "string" }, + category: "Component", + }, + options: ["xs", "s", "m", "l", "xl"], + control: "select", + }, iconName: { ...(IconStories?.argTypes?.iconName ?? {}), if: false, @@ -25,13 +34,38 @@ export default { }, control: { type: "text" }, }, - isQuiet, - isEmphasized, + isQuiet: { + name: "Quiet styling", + type: { name: "boolean" }, + table: { + type: { summary: "boolean" }, + category: "Component", + }, + control: "boolean", + }, + isEmphasized: { + name: "Emphasized styling", + type: { name: "boolean" }, + table: { + type: { summary: "boolean" }, + category: "Component", + }, + control: "boolean", + if: { arg: "isSelected", truthy: true } + }, isDisabled, isSelected, isHovered, isFocused, - isActive, + isActive: { + name: "Active", + type: { name: "boolean" }, + table: { + type: { summary: "boolean" }, + category: "State", + }, + control: "boolean", + }, hideLabel: { name: "Hide label", type: { name: "boolean" }, @@ -52,7 +86,16 @@ export default { control: "select", options: ["true", "menu", "listbox", "tree", "grid", "dialog", "false"], }, - staticColor, + staticColor: { + name: "Static color", + type: { name: "string" }, + table: { + type: { summary: "string" }, + category: "Advanced", + }, + options: ["white", "black"], + control: "select", + }, }, args: { rootClass: "spectrum-ActionButton", @@ -73,11 +116,6 @@ export default { handles: ["click .spectrum-ActionButton:not([disabled])"], }, componentVersion: version, - docs: { - story: { - height: "auto", - }, - } }, }; diff --git a/components/actionbutton/stories/template.js b/components/actionbutton/stories/template.js index 6619531218..4e70daa787 100644 --- a/components/actionbutton/stories/template.js +++ b/components/actionbutton/stories/template.js @@ -4,7 +4,7 @@ import { classMap } from "lit/directives/class-map.js"; import { ifDefined } from "lit/directives/if-defined.js"; import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; -import { capitalize } from "lodash-es"; +import { capitalize, lowerCase } from "lodash-es"; import "../index.css"; @@ -79,7 +79,7 @@ export const Template = ({ typeof size !== "undefined", [`${rootClass}--quiet`]: isQuiet, [`${rootClass}--emphasized`]: isEmphasized, - [`${rootClass}--static${capitalize(staticColor)}`]: + [`${rootClass}--static${capitalize(lowerCase(staticColor))}`]: typeof staticColor !== "undefined", ["is-disabled"]: isDisabled, ["is-selected"]: isSelected, @@ -93,11 +93,7 @@ export const Template = ({ role=${ifDefined(role)} style=${styleMap(customStyles)} ?disabled=${isDisabled} - @click=${onclick ?? function() { - updateArgs({ - isSelected: !isSelected - }); - }} + @click=${onclick} @focusin=${function() { updateArgs({ isFocused: true }); }} diff --git a/components/actiongroup/stories/actiongroup.stories.js b/components/actiongroup/stories/actiongroup.stories.js index 2a79f45a08..b649f3014b 100644 --- a/components/actiongroup/stories/actiongroup.stories.js +++ b/components/actiongroup/stories/actiongroup.stories.js @@ -1,6 +1,5 @@ import { default as ActionButton } from "@spectrum-css/actionbutton/stories/actionbutton.stories.js"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; -import { size } from "@spectrum-css/preview/types"; import { version } from "../package.json"; import { ActionGroups } from "./template.js"; /** @@ -14,7 +13,16 @@ export default { areEmphasized: ActionButton.argTypes.isEmphasized, staticColor: ActionButton.argTypes.staticColor, content: { table: { disable: true } }, - size: size(["xs", "s", "m", "l", "xl"]), + size: { + name: "Size", + type: { name: "string", required: true }, + table: { + type: { summary: "string" }, + category: "Component", + }, + options: ["xs", "s", "m", "l", "xl"], + control: "select", + }, vertical: { name: "Vertical layout", type: { name: "boolean" }, diff --git a/components/actiongroup/stories/template.js b/components/actiongroup/stories/template.js index ec4ad8788e..cba3244840 100644 --- a/components/actiongroup/stories/template.js +++ b/components/actiongroup/stories/template.js @@ -3,7 +3,6 @@ import { Variants, renderContent } from "@spectrum-css/preview/decorators/utilit import { html } from "lit"; import { classMap } from "lit/directives/class-map.js"; import { styleMap } from "lit/directives/style-map.js"; -import { capitalize } from "lodash-es"; import "../index.css"; @@ -30,8 +29,6 @@ export const Template = ({ [`${rootClass}--vertical`]: vertical, [`${rootClass}--compact`]: compact, [`${rootClass}--justified`]: justified, - [`${rootClass}--static${capitalize(staticColor)}`]: - typeof staticColor !== "undefined", ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}), })} style=${styleMap(customStyles)} diff --git a/components/avatar/stories/avatar.stories.js b/components/avatar/stories/avatar.stories.js index 2745f87cd2..23f25d5b5c 100644 --- a/components/avatar/stories/avatar.stories.js +++ b/components/avatar/stories/avatar.stories.js @@ -1,5 +1,4 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; -import { isDisabled, size } from "@spectrum-css/preview/types"; import { version } from "../package.json"; import { AvatarGroup, AvatarSizes, Template } from "./template"; @@ -15,7 +14,16 @@ export default { title: "Avatar", component: "Avatar", argTypes: { - size: size([50, 75, 100, 200, 300, 400, 500, 600, 700], false), + size: { + name: "Size", + type: { name: "string", required: true }, + table: { + type: { summary: "string" }, + category: "Component", + }, + options: ["50", "75", "100", "200", "300", "400", "500", "600", "700"], + control: "select", + }, image: { name: "Image", type: { name: "string" }, @@ -44,7 +52,15 @@ export default { control: "boolean", if: { arg: "isDisabled", truthy: false }, }, - isDisabled, + isDisabled: { + name: "Disabled", + type: { name: "boolean" }, + table: { + type: { summary: "boolean" }, + category: "State", + }, + control: "boolean", + }, }, args: { rootClass: "spectrum-Avatar", diff --git a/components/avatar/stories/template.js b/components/avatar/stories/template.js index 9b8fbfdb36..9dee3b82d4 100644 --- a/components/avatar/stories/template.js +++ b/components/avatar/stories/template.js @@ -14,7 +14,7 @@ export const Template = ({ altText, isDisabled = false, isFocused = false, - size = 700, + size = "700", hasLink, id, customClasses = [], diff --git a/components/badge/stories/badge.stories.js b/components/badge/stories/badge.stories.js index 3e4f57d38e..01c2c6a29f 100644 --- a/components/badge/stories/badge.stories.js +++ b/components/badge/stories/badge.stories.js @@ -1,6 +1,5 @@ import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.js"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; -import { size } from "@spectrum-css/preview/types"; import { version } from "../package.json"; import { BadgeGroup, PreviewSets } from "./template"; @@ -18,7 +17,16 @@ export default { title: "Badge", component: "Badge", argTypes: { - size: size(["s", "m", "l", "xl"]), + size: { + name: "Size", + type: { name: "string", required: true }, + table: { + type: { summary: "string" }, + category: "Component", + }, + options: ["s", "m", "l", "xl"], + control: "select", + }, label: { name: "Label", type: { name: "string" }, diff --git a/components/breadcrumb/stories/breadcrumb.stories.js b/components/breadcrumb/stories/breadcrumb.stories.js index c09e4ed5d7..1222d07f86 100644 --- a/components/breadcrumb/stories/breadcrumb.stories.js +++ b/components/breadcrumb/stories/breadcrumb.stories.js @@ -1,5 +1,4 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; -import { isDragged } from "@spectrum-css/preview/types"; import { version } from "../package.json"; import { BreadcrumbGroup } from "./template"; @@ -21,7 +20,15 @@ export default { options: ["compact", "multiline"], control: "inline-radio", }, - isDragged, + isDragged: { + name: "Dragged", + type: { name: "boolean" }, + table: { + type: { summary: "boolean" }, + category: "State", + }, + control: "boolean" + }, }, args: { rootClass: "spectrum-Breadcrumbs", diff --git a/components/button/stories/button.stories.js b/components/button/stories/button.stories.js index d543e5e5b8..3d15bb80a7 100644 --- a/components/button/stories/button.stories.js +++ b/components/button/stories/button.stories.js @@ -1,6 +1,6 @@ import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.js"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; -import { isActive, isDisabled, isFocused, isHovered, isPending, size, staticColor } from "@spectrum-css/preview/types"; +import { isDisabled, isFocused } from "@spectrum-css/preview/types"; import { html } from "lit"; import { styleMap } from "lit/directives/style-map.js"; import { version } from "../package.json"; @@ -13,7 +13,16 @@ export default { title: "Button", component: "Button", argTypes: { - size: size(["s", "m", "l", "xl"]), + size: { + name: "Size", + type: { name: "string", required: true }, + table: { + type: { summary: "string" }, + category: "Component", + }, + options: ["s", "m", "l", "xl"], + control: "select", + }, label: { name: "Label", type: { name: "string" }, @@ -53,11 +62,46 @@ export default { control: "inline-radio", }, isDisabled, - isHovered, + isHovered: { + name: "Hovered", + type: { name: "boolean" }, + table: { + type: { summary: "boolean" }, + category: "State", + }, + control: "boolean", + }, isFocused, - isActive, - isPending, - staticColor, + isActive: { + name: "Active", + type: { name: "boolean" }, + table: { + type: { summary: "boolean" }, + category: "State", + }, + control: "boolean", + }, + isPending: { + name: "Pending", + type: { name: "boolean" }, + table: { + type: { summary: "boolean" }, + category: "State", + }, + control: "boolean", + }, + staticColor: { + name: "Static color", + description: + "Variants that can be used when a button needs to be placed on top of a colored background or a visual.", + type: { name: "string" }, + table: { + type: { summary: "string" }, + category: "Advanced", + }, + options: ["white", "black"], + control: "select", + }, }, args: { rootClass: "spectrum-Button", diff --git a/components/button/stories/template.js b/components/button/stories/template.js index 63bae41fb8..7c6b1ff012 100644 --- a/components/button/stories/template.js +++ b/components/button/stories/template.js @@ -6,7 +6,7 @@ import { classMap } from "lit/directives/class-map.js"; import { ifDefined } from "lit/directives/if-defined.js"; import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; -import { capitalize } from "lodash-es"; +import { capitalize, lowerCase } from "lodash-es"; import "../index.css"; @@ -46,7 +46,7 @@ export const Template = ( [`${rootClass}--${variant}`]: typeof variant !== "undefined", [`${rootClass}--size${size?.toUpperCase()}`]: typeof size !== "undefined", - [`${rootClass}--static${capitalize(staticColor)}`]: + [`${rootClass}--static${capitalize(lowerCase(staticColor))}`]: typeof staticColor !== "undefined", [`${rootClass}--iconOnly`]: hideLabel, ["is-pending"]: isPending, diff --git a/components/buttongroup/stories/buttongroup.stories.js b/components/buttongroup/stories/buttongroup.stories.js index b1e01aadcc..63c3f5883c 100644 --- a/components/buttongroup/stories/buttongroup.stories.js +++ b/components/buttongroup/stories/buttongroup.stories.js @@ -1,5 +1,4 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; -import { size } from "@spectrum-css/preview/types"; import { version } from "../package.json"; import { ButtonGroup } from "./template"; @@ -10,7 +9,16 @@ export default { title: "Button group", component: "ButtonGroup", argTypes: { - size: size(["s", "m", "l", "xl"]), + size: { + name: "Size", + type: { name: "string", required: true }, + table: { + type: { summary: "string" }, + category: "Component", + }, + options: ["s", "m", "l", "xl"], + control: "select", + }, vertical: { name: "Vertical layout", type: { name: "boolean" }, diff --git a/components/calendar/stories/calendar.stories.js b/components/calendar/stories/calendar.stories.js index 5f75b26e25..ba480a527d 100644 --- a/components/calendar/stories/calendar.stories.js +++ b/components/calendar/stories/calendar.stories.js @@ -57,7 +57,7 @@ export default { control: "number", }, isDisabled, - isPadded: { + padded: { name: "Padded", type: { name: "boolean" }, table: { @@ -82,7 +82,7 @@ export default { }, args: { rootClass: "spectrum-Calendar", - isPadded: false, + padded: false, isDisabled: false, isFocused: false, useDOWAbbrev: false, @@ -123,7 +123,7 @@ RangeSelection.args = { year: 2023, lastDay: new Date(2023, 6, 7), useDOWAbbrev: true, - isPadded: true, + padded: true, }; RangeSelection.tags = ["!dev"]; RangeSelection.parameters = { diff --git a/components/calendar/stories/template.js b/components/calendar/stories/template.js index 5587d026f5..e7ff0d4051 100644 --- a/components/calendar/stories/template.js +++ b/components/calendar/stories/template.js @@ -19,7 +19,7 @@ export const Template = ({ selectedDay, lastDay, year, - isPadded, + padded, isDisabled = false, isFocused = false, useDOWAbbrev = false, @@ -260,7 +260,7 @@ export const Template = ({
({ ...a, [c]: true }), {}), })} style=${styleMap({ @@ -402,7 +402,7 @@ export const CalendarGroup = Variants({ }, { testHeading: "Padded", - isPadded: true, + padded: true, }, { testHeading: "Abbreviated days of the week", @@ -415,7 +415,7 @@ export const CalendarGroup = Variants({ year: 2023, lastDay: new Date(2023, 6, 7), useDOWAbbrev: true, - isPadded: true, + padded: true, }, { testHeading: "Today highlighted", diff --git a/components/card/stories/card.stories.js b/components/card/stories/card.stories.js index b423da6395..24d6c57e20 100644 --- a/components/card/stories/card.stories.js +++ b/components/card/stories/card.stories.js @@ -1,7 +1,7 @@ import { default as ActionButton } from "@spectrum-css/actionbutton/stories/actionbutton.stories.js"; import { default as Checkbox } from "@spectrum-css/checkbox/stories/checkbox.stories.js"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; -import { isFocused, isQuiet, isSelected } from "@spectrum-css/preview/types"; +import { isFocused, isSelected } from "@spectrum-css/preview/types"; import { version } from "../package.json"; import { CardGroup, Template } from "./template"; @@ -21,7 +21,15 @@ export default { }, control: { type: "file", accept: ".svg,.png,.jpg,.jpeg,.webc" }, }, - isQuiet, + isQuiet: { + name: "Quiet styling", + type: { name: "boolean" }, + table: { + type: { summary: "boolean" }, + category: "Component", + }, + control: "boolean", + }, isSelected, isFocused, hasActions: { diff --git a/components/checkbox/stories/checkbox.stories.js b/components/checkbox/stories/checkbox.stories.js index 413e84664c..5dd51df03e 100644 --- a/components/checkbox/stories/checkbox.stories.js +++ b/components/checkbox/stories/checkbox.stories.js @@ -1,5 +1,5 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; -import { isChecked, isDisabled, isEmphasized, isIndeterminate, isInvalid, isReadOnly, size } from "@spectrum-css/preview/types"; +import { isInvalid } from "@spectrum-css/preview/types"; import { html } from "lit"; import { version } from "../package.json"; import { Template } from "./template"; @@ -12,7 +12,16 @@ export default { title: "Checkbox", component: "Checkbox", argTypes: { - size: size(["s", "m", "l", "xl"]), + size: { + name: "Size", + type: { name: "string", required: true }, + table: { + type: { summary: "string" }, + category: "Component", + }, + options: ["s", "m", "l", "xl"], + control: "select", + }, label: { name: "Label", type: { name: "string" }, @@ -22,12 +31,52 @@ export default { }, control: { type: "text" }, }, - isEmphasized, + isEmphasized: { + name: "Emphasized styling", + type: { name: "boolean" }, + table: { + type: { summary: "boolean" }, + category: "Component", + }, + control: { type: "boolean" }, + }, isInvalid, - isDisabled, - isChecked, - isIndeterminate, - isReadOnly, + isDisabled: { + name: "Disabled", + type: { name: "boolean" }, + table: { + type: { summary: "boolean" }, + category: "State", + }, + control: "boolean", + }, + isChecked: { + name: "Checked", + type: { name: "boolean" }, + table: { + type: { summary: "boolean" }, + category: "State", + }, + control: { type: "boolean" }, + }, + isIndeterminate: { + name: "Checkbox indeterminate", + type: { name: "boolean" }, + table: { + type: { summary: "boolean" }, + category: "State", + }, + control: "boolean", + }, + isReadOnly: { + name: "Read only", + type: { name: "boolean" }, + table: { + type: { summary: "boolean" }, + category: "State", + }, + control: "boolean", + }, }, args: { rootClass: "spectrum-Checkbox", diff --git a/components/clearbutton/stories/clearbutton.stories.js b/components/clearbutton/stories/clearbutton.stories.js index 2806d1eabb..10f37d2485 100644 --- a/components/clearbutton/stories/clearbutton.stories.js +++ b/components/clearbutton/stories/clearbutton.stories.js @@ -1,5 +1,4 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; -import { isDisabled, size, staticColor } from "@spectrum-css/preview/types"; import { version } from "../package.json"; import { Template } from "./template"; @@ -10,11 +9,35 @@ export default { title: "Clear button", component: "ClearButton", argTypes: { - size: size(["s", "m", "l", "xl"]), - isDisabled, + size: { + name: "Size", + type: { name: "string", required: true }, + table: { + type: { summary: "string" }, + category: "Component", + }, + options: ["s", "m", "l", "xl"], + control: "select", + }, + isDisabled: { + name: "Disabled", + type: { name: "boolean" }, + table: { + type: { summary: "boolean" }, + category: "State", + }, + control: "boolean", + }, staticColor: { - ...staticColor, + name: "Static color", + type: { name: "string" }, + table: { + disable: true, + type: { summary: "string" }, + category: "Advanced", + }, options: ["white"], + control: "select", }, }, args: { diff --git a/components/closebutton/stories/closebutton.stories.js b/components/closebutton/stories/closebutton.stories.js index e601402fb2..9dba752e70 100644 --- a/components/closebutton/stories/closebutton.stories.js +++ b/components/closebutton/stories/closebutton.stories.js @@ -1,5 +1,4 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; -import { isDisabled, size, staticColor } from "@spectrum-css/preview/types"; import { version } from "../package.json"; import { Template } from "./template"; @@ -10,9 +9,35 @@ export default { title: "Close button", component: "CloseButton", argTypes: { - size: size(["s", "m", "l", "xl"]), - staticColor, - isDisabled, + size: { + name: "Size", + type: { name: "string", required: true }, + table: { + type: { summary: "string" }, + category: "Component", + }, + options: ["s", "m", "l", "xl"], + control: "select", + }, + staticColor: { + name: "Static color", + type: { name: "string" }, + table: { + type: { summary: "string" }, + category: "Advanced", + }, + options: ["white", "black"], + control: "select", + }, + isDisabled: { + name: "Disabled", + type: { name: "boolean" }, + table: { + type: { summary: "boolean" }, + category: "State", + }, + control: "boolean", + }, }, args: { rootClass: "spectrum-CloseButton", diff --git a/components/closebutton/stories/template.js b/components/closebutton/stories/template.js index ba95b89671..5e6084cc07 100644 --- a/components/closebutton/stories/template.js +++ b/components/closebutton/stories/template.js @@ -2,7 +2,7 @@ import { Template as Icon } from "@spectrum-css/icon/stories/template.js"; import { html } from "lit"; import { classMap } from "lit/directives/class-map.js"; import { ifDefined } from "lit/directives/if-defined.js"; -import { capitalize, upperCase } from "lodash-es"; +import { capitalize, lowerCase, upperCase } from "lodash-es"; import "../index.css"; @@ -21,7 +21,7 @@ export const Template = ({ class=${classMap({ [rootClass]: true, [`${rootClass}--size${upperCase(size)}`]: typeof size !== "undefined", - [`${rootClass}--static${capitalize(staticColor)}`]: + [`${rootClass}--static${capitalize(lowerCase(staticColor))}`]: typeof staticColor !== "undefined", ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}), })} diff --git a/components/coachindicator/stories/coachindicator.stories.js b/components/coachindicator/stories/coachindicator.stories.js index 8fc07adc99..cb5891bd01 100644 --- a/components/coachindicator/stories/coachindicator.stories.js +++ b/components/coachindicator/stories/coachindicator.stories.js @@ -1,5 +1,4 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; -import { isQuiet } from "@spectrum-css/preview/types"; import { version } from "../package.json"; import { CoachIndicatorGroup } from "./template"; @@ -10,7 +9,15 @@ export default { title: "Coach indicator", component: "CoachIndicator", argTypes: { - isQuiet, + isQuiet: { + name: "Quiet styling", + type: { name: "boolean" }, + table: { + type: { summary: "boolean" }, + category: "Component", + }, + control: "boolean", + }, variant: { name: "Variant", type: { name: "string" }, diff --git a/components/combobox/stories/combobox.stories.js b/components/combobox/stories/combobox.stories.js index 544b0a19c3..44ecf68aad 100644 --- a/components/combobox/stories/combobox.stories.js +++ b/components/combobox/stories/combobox.stories.js @@ -1,6 +1,6 @@ import { Template as Menu } from "@spectrum-css/menu/stories/template.js"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; -import { isDisabled, isFocused, isInvalid, isKeyboardFocused, isLoading, isOpen, isQuiet, size } from "@spectrum-css/preview/types"; +import { isFocused, isInvalid, isOpen } from "@spectrum-css/preview/types"; import { html } from "lit"; import { styleMap } from "lit/directives/style-map.js"; import { version } from "../package.json"; @@ -13,14 +13,55 @@ export default { title: "Combobox", component: "Combobox", argTypes: { - size: size(["s", "m", "l", "xl"]), + size: { + name: "Size", + type: { name: "string", required: true }, + table: { + type: { summary: "string" }, + category: "Component", + }, + options: ["s", "m", "l", "xl"], + control: "select", + }, isOpen, - isQuiet, + isQuiet: { + name: "Quiet styling", + type: { name: "boolean" }, + table: { + type: { summary: "boolean" }, + category: "Component", + }, + control: "boolean", + }, isInvalid, isFocused, - isKeyboardFocused, - isLoading, - isDisabled, + isKeyboardFocused: { + name: "Keyboard Focused", + type: { name: "boolean" }, + table: { + type: { summary: "boolean" }, + category: "State", + }, + control: "boolean", + }, + isLoading: { + name: "Loading", + type: { name: "boolean" }, + table: { + type: { summary: "boolean" }, + category: "State", + }, + control: "boolean", + }, + isDisabled: { + name: "Disabled", + type: { name: "boolean" }, + table: { + type: { summary: "boolean" }, + category: "State", + }, + control: "boolean", + }, showFieldLabel: { name: "Show field label", type: { name: "boolean" }, diff --git a/components/datepicker/stories/datepicker.stories.js b/components/datepicker/stories/datepicker.stories.js index b09b966013..8ab6049e22 100644 --- a/components/datepicker/stories/datepicker.stories.js +++ b/components/datepicker/stories/datepicker.stories.js @@ -1,6 +1,6 @@ import { default as CalendarStories } from "@spectrum-css/calendar/stories/calendar.stories.js"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; -import { isDisabled, isInvalid, isOpen, isQuiet, isRequired, isValid } from "@spectrum-css/preview/types"; +import { isInvalid, isOpen, isValid } from "@spectrum-css/preview/types"; import { html } from "lit"; import { version } from "../package.json"; import { Template } from "./template"; @@ -21,7 +21,15 @@ export default { return { ...acc, [key]: { table: { disable: true } } }; }, {}), isOpen, - isQuiet, + isQuiet: { + name: "Quiet styling", + type: { name: "boolean" }, + table: { + type: { summary: "boolean" }, + category: "Component", + }, + control: "boolean", + }, isValid: { ...isValid, if: { arg: "isInvalid", truthy: false }, @@ -40,9 +48,33 @@ export default { ...isInvalid, if: { arg: "isValid", truthy: false }, }, - isDisabled, - isRequired, - isReadOnly, + isDisabled: { + name: "Disabled", + type: { name: "boolean" }, + table: { + type: { summary: "boolean" }, + category: "State", + }, + control: "boolean", + }, + isRequired: { + name: "Required", + type: { name: "boolean" }, + table: { + type: { summary: "boolean" }, + category: "State", + }, + control: "boolean", + }, + readOnly: { + name: "Read only", + type: { name: "boolean" }, + table: { + type: { summary: "boolean" }, + category: "State", + }, + control: "boolean", + }, content: { table: { disable: true } }, isRange: { table: {disable: true} }, }, @@ -56,7 +88,7 @@ export default { isValid: false, isDisabled: false, isRequired: false, - isReadOnly: false, + readOnly: false, month: "March", selectedDay: 1, year: 2023, @@ -154,12 +186,12 @@ QuietInvalid.parameters = { }; -export const isReadOnly = Template.bind({}); -isReadOnly.tags = ["!dev"]; -isReadOnly.args = { - isReadOnly: true, +export const ReadOnly = Template.bind({}); +ReadOnly.tags = ["!dev"]; +ReadOnly.args = { + readOnly: true, }; -isReadOnly.parameters = { +ReadOnly.parameters = { chromatic: { disableSnapshot: true }, docs: { story: { diff --git a/components/datepicker/stories/template.js b/components/datepicker/stories/template.js index 65433bed72..14ced13cfb 100644 --- a/components/datepicker/stories/template.js +++ b/components/datepicker/stories/template.js @@ -21,7 +21,7 @@ export const Template = ({ isDateTimeRange = false, isDisabled = false, isRequired = false, - isReadOnly = false, + readOnly = false, selectedDay, lastDay, } = {}, context = {}) => { @@ -44,7 +44,7 @@ export const Template = ({ id=${ifDefined(id)} aria-disabled=${isDisabled ? "true" : "false"} aria-invalid=${ifDefined(isInvalid && !isDisabled ? "false" : undefined)} - aria-readonly=${ifDefined(isReadOnly ? "true" : "false")} + aria-readonly=${ifDefined(readOnly ? "true" : "false")} aria-required=${ifDefined(isRequired ? "true" : "false")} aria-haspopup="dialog" > @@ -52,7 +52,7 @@ export const Template = ({ size: "m", isQuiet, isDisabled, - isReadOnly, + isReadOnly: readOnly, isInvalid: !isRange ? isInvalid : undefined, customClasses: [`${rootClass}-textfield`], customInputClasses: isRange ? [`${rootClass}-input`, `${rootClass}-startField`] : [`${rootClass}-input`], @@ -69,7 +69,7 @@ export const Template = ({ isQuiet, isDisabled, isInvalid, - isReadOnly, + isReadOnly: readOnly, customClasses: [`${rootClass}-textfield`], customInputClasses: [`${rootClass}-input`, `${rootClass}-endField`], placeholder: "Choose a date", @@ -84,7 +84,7 @@ export const Template = ({ iconType: "workflow", iconName: "Calendar", isQuiet, - customStyles: isReadOnly ? { "display": "none" } : undefined, + customStyles: readOnly ? { "display": "none" } : undefined, // @todo this is not added to the button on the website; need to make sure it's not a bug // isOpen, isInvalid, @@ -94,9 +94,9 @@ export const Template = ({ updateArgs({ isOpen: !isOpen }); }, }, context)} - ${when(!isReadOnly && !isDisabled, () => html` + ${when(!readOnly && !isDisabled, () => html` ${Popover({ - isOpen: isOpen && !isDisabled && !isReadOnly, + isOpen: isOpen && !isDisabled && !readOnly, withTip: false, position: "bottom", isQuiet, diff --git a/components/dial/stories/dial.stories.js b/components/dial/stories/dial.stories.js index 8cb4d9a20e..f934586659 100644 --- a/components/dial/stories/dial.stories.js +++ b/components/dial/stories/dial.stories.js @@ -1,5 +1,5 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; -import { isDisabled, isDragged, isFocused, size } from "@spectrum-css/preview/types"; +import { isFocused } from "@spectrum-css/preview/types"; import { version } from "../package.json"; import { DialGroup } from "./template"; @@ -10,7 +10,16 @@ export default { title: "Dial", component: "Dial", argTypes: { - size: size(["s", "m"]), + size: { + name: "Size", + type: { name: "string", required: true }, + table: { + type: { summary: "string" }, + category: "Component", + }, + options: ["s", "m"], + control: "select", + }, label: { name: "Label", table: { @@ -20,8 +29,24 @@ export default { control: "text", }, isFocused, - isDragged, - isDisabled, + isDragged: { + name: "Dragged", + type: { name: "boolean" }, + table: { + type: { summary: "boolean" }, + category: "State", + }, + control: "boolean", + }, + isDisabled: { + name: "Disabled", + type: { name: "boolean" }, + table: { + type: { summary: "boolean" }, + category: "State", + }, + control: "boolean", + }, }, args: { rootClass: "spectrum-Dial", diff --git a/components/divider/stories/divider.stories.js b/components/divider/stories/divider.stories.js index 0000762902..4597f8f630 100644 --- a/components/divider/stories/divider.stories.js +++ b/components/divider/stories/divider.stories.js @@ -1,5 +1,4 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; -import { size, staticColor } from "@spectrum-css/preview/types"; import { version } from "../package.json"; import { Template } from "./template"; @@ -10,8 +9,26 @@ export default { title: "Divider", component: "Divider", argTypes: { - size: size(["s", "m", "l"]), - staticColor, + size: { + name: "Size", + type: { name: "string", required: true }, + table: { + type: { summary: "string" }, + category: "Component", + }, + options: ["s", "m", "l"], + control: "select", + }, + staticColor: { + name: "Static color", + type: { name: "string" }, + table: { + type: { summary: "string" }, + category: "Advanced", + }, + options: ["white", "black"], + control: "select", + }, vertical: { name: "Vertical", type: { name: "boolean" }, diff --git a/components/divider/stories/template.js b/components/divider/stories/template.js index bd7e8434ca..8b57e9f04d 100644 --- a/components/divider/stories/template.js +++ b/components/divider/stories/template.js @@ -1,7 +1,7 @@ import { html } from "lit"; import { classMap } from "lit/directives/class-map.js"; import { styleMap } from "lit/directives/style-map.js"; -import { capitalize, upperCase } from "lodash-es"; +import { capitalize, lowerCase, upperCase } from "lodash-es"; import "../index.css"; @@ -19,7 +19,7 @@ export const Template = ({ [rootClass]: true, [`${rootClass}--size${upperCase(size)}`]: typeof size !== "undefined", [`${rootClass}--vertical`]: vertical === true, - [`${rootClass}--static${capitalize(staticColor)}`]: + [`${rootClass}--static${capitalize(lowerCase(staticColor))}`]: typeof staticColor !== "undefined", ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}), })} @@ -37,7 +37,7 @@ export const Template = ({ [rootClass]: true, [`${rootClass}--size${size?.toUpperCase()}`]: typeof size !== "undefined", [`${rootClass}--vertical`]: vertical === true, - [`${rootClass}--static${capitalize(staticColor)}`]: + [`${rootClass}--static${capitalize(lowerCase(staticColor))}`]: typeof staticColor !== "undefined", ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}), })} diff --git a/components/dropzone/stories/dropzone.stories.js b/components/dropzone/stories/dropzone.stories.js index 73a4b6d881..5a1e1f1199 100644 --- a/components/dropzone/stories/dropzone.stories.js +++ b/components/dropzone/stories/dropzone.stories.js @@ -2,7 +2,6 @@ import { default as ActionButton } from "@spectrum-css/actionbutton/stories/acti import { default as IllustratedMessage } from "@spectrum-css/illustratedmessage/stories/illustratedmessage.stories.js"; import { Template as Link } from "@spectrum-css/link/stories/template.js"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; -import { isDragged } from "@spectrum-css/preview/types"; import { html } from "lit"; import { version } from "../package.json"; import { DropzoneGroup } from "./template"; @@ -14,7 +13,15 @@ export default { title: "Drop zone", component: "DropZone", argTypes: { - isDragged, + isDragged: { + name: "Dragged", + type: { name: "boolean" }, + table: { + type: { summary: "boolean" }, + category: "State", + }, + control: "boolean", + }, isFilled: { name: "Filled", type: { name: "boolean" }, diff --git a/components/fieldgroup/stories/fieldgroup.stories.js b/components/fieldgroup/stories/fieldgroup.stories.js index d3265ae7f1..2cd5dcde43 100644 --- a/components/fieldgroup/stories/fieldgroup.stories.js +++ b/components/fieldgroup/stories/fieldgroup.stories.js @@ -1,5 +1,5 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; -import { isInvalid, isReadOnly, isRequired } from "@spectrum-css/preview/types"; +import { isInvalid } from "@spectrum-css/preview/types"; import { default as RadioSettings } from "@spectrum-css/radio/stories/radio.stories.js"; import { Template as Radio } from "@spectrum-css/radio/stories/template.js"; import { version } from "../package.json"; @@ -53,8 +53,8 @@ export default { items: { table: { disable: true } }, fieldLabel: { table: { disable: true } }, helpText: { table: { disable: true } }, - isRequired, - isReadOnly, + isRequired: { table: { disable: true } }, + isReadOnly: { table: { disable: true } }, }, args: { rootClass: "spectrum-FieldGroup", diff --git a/components/fieldlabel/stories/fieldlabel.stories.js b/components/fieldlabel/stories/fieldlabel.stories.js index 2974ac54c0..3e63cfef91 100644 --- a/components/fieldlabel/stories/fieldlabel.stories.js +++ b/components/fieldlabel/stories/fieldlabel.stories.js @@ -1,5 +1,4 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; -import { isDisabled, isRequired, size } from "@spectrum-css/preview/types"; import { version } from "../package.json"; import { FieldLabelGroup } from "./template"; @@ -10,7 +9,16 @@ export default { title: "Field label", component: "FieldLabel", argTypes: { - size: size(["s", "m", "l", "xl"]), + size: { + name: "Size", + type: { name: "string", required: true }, + table: { + type: { summary: "string" }, + category: "Component", + }, + options: ["s", "m", "l", "xl"], + control: "select", + }, label: { name: "Label", type: { name: "string" }, @@ -30,8 +38,24 @@ export default { options: ["left", "right"], control: "select", }, - isDisabled, - isRequired, + isDisabled: { + name: "Disabled", + type: { name: "boolean" }, + table: { + type: { summary: "boolean" }, + category: "State", + }, + control: "boolean", + }, + isRequired: { + name: "Required", + type: { name: "boolean" }, + table: { + type: { summary: "boolean" }, + category: "State", + }, + control: "boolean", + }, }, args: { rootClass: "spectrum-FieldLabel", diff --git a/components/helptext/stories/helptext.stories.js b/components/helptext/stories/helptext.stories.js index d352d5d3e4..8cf42e07cf 100644 --- a/components/helptext/stories/helptext.stories.js +++ b/components/helptext/stories/helptext.stories.js @@ -1,5 +1,4 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; -import { isDisabled, size } from "@spectrum-css/preview/types"; import { version } from "../package.json"; import { Variants } from "./template"; @@ -30,7 +29,16 @@ export default { options: ["neutral", "negative"], control: "inline-radio", }, - size: size(["s", "m", "l", "xl"]), + size: { + name: "Size", + type: { name: "string", required: true }, + table: { + type: { summary: "string" }, + category: "Component", + }, + options: ["s", "m", "l", "xl"], + control: "select", + }, hideIcon: { name: "Hide icon", type: { name: "boolean" }, @@ -43,7 +51,16 @@ export default { control: "boolean", if: { arg: "variant", eq: "negative" }, }, - isDisabled, + isDisabled: { + name: "Disabled", + type: { name: "boolean" }, + table: { + type: { summary: "boolean" }, + category: "State", + + }, + control: "boolean", + }, }, args: { rootClass: "spectrum-HelpText", diff --git a/components/icon/stories/icon.stories.js b/components/icon/stories/icon.stories.js index 1d27bd728e..565ffd09d3 100644 --- a/components/icon/stories/icon.stories.js +++ b/components/icon/stories/icon.stories.js @@ -1,5 +1,4 @@ import { disableDefaultModes, mobile } 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 { styleMap } from "lit/directives/style-map.js"; @@ -32,7 +31,14 @@ export default { component: "Icon", argTypes: { size: { - ...size(["xs", "s", "m", "l", "xl", "xxl"]), + name: "Workflow Icon Size", + type: { name: "string", required: true }, + table: { + type: { summary: "string" }, + category: "Component", + }, + options: ["xs", "s", "m", "l", "xl", "xxl"], + control: "select", if: { arg: "setName", eq: "workflow" }, }, setName: { diff --git a/components/icon/stories/template.js b/components/icon/stories/template.js index daca1567af..3f22fb8544 100644 --- a/components/icon/stories/template.js +++ b/components/icon/stories/template.js @@ -6,6 +6,7 @@ import { unsafeSVG } from "lit/directives/unsafe-svg.js"; import { when } from "lit/directives/when.js"; import "../index.css"; +import styles from "../index.css?inline"; /** * @typedef { keyof import("./icon.stories.js").default.args } IconArgs @@ -244,9 +245,12 @@ export const Template = ({ }, ""); if (!useRef && svgString) { - return html`${unsafeSVG( - svgString.replace(/