diff --git a/.changeset/eleven-plants-grow.md b/.changeset/eleven-plants-grow.md new file mode 100644 index 0000000000..b08e57e166 --- /dev/null +++ b/.changeset/eleven-plants-grow.md @@ -0,0 +1,5 @@ +--- +"@spectrum-css/generator": patch +--- + +Update story templates to include the cssprops imports diff --git a/.changeset/new-bulldogs-add.md b/.changeset/new-bulldogs-add.md new file mode 100644 index 0000000000..a5328a1d0a --- /dev/null +++ b/.changeset/new-bulldogs-add.md @@ -0,0 +1,5 @@ +--- +"@spectrum-css/preview": minor +--- + +New feature: Custom properties panel added to the development preview showing a list of modifiable custom properties as loaded from the metadata/metadata.json resource in each component. diff --git a/.storybook/main.js b/.storybook/main.js index a00e74bff7..38cd343408 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -45,6 +45,8 @@ export default { "@chromaui/addon-visual-tests", // https://storybook.js.org/addons/@storybook/addon-designs/ "@storybook/addon-designs", + // https://github.com/ljcl/storybook-addon-cssprops + "@ljcl/storybook-addon-cssprops", ], core: { disableTelemetry: true, diff --git a/.storybook/package.json b/.storybook/package.json index c899284062..d417904381 100644 --- a/.storybook/package.json +++ b/.storybook/package.json @@ -37,6 +37,7 @@ "@babel/core": "^7.25.2", "@chromaui/addon-visual-tests": "^1.0.0", "@etchteam/storybook-addon-status": "^5.0.0", + "@ljcl/storybook-addon-cssprops": "^4.0.0", "@storybook/addon-a11y": "^8.3.2", "@storybook/addon-actions": "^8.3.2", "@storybook/addon-console": "^3.0.0", diff --git a/components/accordion/stories/accordion.stories.js b/components/accordion/stories/accordion.stories.js index af47f53cc1..7a6a3e5255 100644 --- a/components/accordion/stories/accordion.stories.js +++ b/components/accordion/stories/accordion.stories.js @@ -2,6 +2,7 @@ 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 data from "../metadata/metadata.json"; import pkgJson from "../package.json"; import { AccordionGroup } from "./accordion.test.js"; import { Template } from "./template.js"; @@ -57,6 +58,17 @@ export default { }, chromatic: { disableSnapshot: true }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, tags: ["!autodocs"], }; diff --git a/components/actionbar/stories/actionbar.stories.js b/components/actionbar/stories/actionbar.stories.js index d644fe48cb..27368c2711 100644 --- a/components/actionbar/stories/actionbar.stories.js +++ b/components/actionbar/stories/actionbar.stories.js @@ -3,7 +3,9 @@ import { default as CloseButton } from "@spectrum-css/closebutton/stories/closeb 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 data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { ActionBarGroup } from "./actionbar.test.js"; import { Template } from "./template.js"; @@ -67,6 +69,17 @@ export default { url: "https://www.figma.com/file/MPtRIVRzPp2VHiEplwXL2X/S-%2F-Manual?node-id=465%3A3127&t=xbooxCWItOFgG2xM-1", }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, tags: ["!autodocs"], }; diff --git a/components/actionbutton/stories/actionbutton.stories.js b/components/actionbutton/stories/actionbutton.stories.js index 6a214ab0a1..be309105e7 100644 --- a/components/actionbutton/stories/actionbutton.stories.js +++ b/components/actionbutton/stories/actionbutton.stories.js @@ -1,7 +1,9 @@ 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 data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { ActionButtonGroup, ActionButtons } from "./actionbutton.test.js"; /** @@ -73,6 +75,17 @@ export default { handles: ["click .spectrum-ActionButton:not([disabled])"], }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, docs: { story: { height: "auto", diff --git a/components/actiongroup/stories/actiongroup.stories.js b/components/actiongroup/stories/actiongroup.stories.js index b4fc06f099..545c9a104a 100644 --- a/components/actiongroup/stories/actiongroup.stories.js +++ b/components/actiongroup/stories/actiongroup.stories.js @@ -1,7 +1,9 @@ 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 data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { ActionGroups } from "./actiongroup.test.js"; /** @@ -61,6 +63,17 @@ export default { ], }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/actionmenu/stories/actionmenu.stories.js b/components/actionmenu/stories/actionmenu.stories.js index 41420890ec..bb3c1e3fd7 100644 --- a/components/actionmenu/stories/actionmenu.stories.js +++ b/components/actionmenu/stories/actionmenu.stories.js @@ -5,6 +5,7 @@ import { default as Popover } from "@spectrum-css/popover/stories/popover.storie import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isOpen } from "@spectrum-css/preview/types"; import pkgJson from "../package.json"; + import { ActionMenuGroup } from "./actionmenu.test.js"; /** @@ -49,6 +50,11 @@ export default { ], }, packageJson: pkgJson, + cssprops: { + ...(Popover?.parameters?.cssprops ?? {}), + ...(ActionButton?.parameters?.cssprops ?? {}), + ...(Menu.parameters?.cssprops ?? {}), + }, docs: { story: { height: "200px", diff --git a/components/alertbanner/stories/alertbanner.stories.js b/components/alertbanner/stories/alertbanner.stories.js index fdeebb1eab..839e488951 100644 --- a/components/alertbanner/stories/alertbanner.stories.js +++ b/components/alertbanner/stories/alertbanner.stories.js @@ -1,6 +1,8 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isOpen } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { AlertBannerGroup } from "./alertbanner.test.js"; import { ActionableOptionsTemplate, Template, TextOverflowTemplate } from "./template.js"; @@ -68,6 +70,17 @@ export default { handles: ["click .spectrum-AlertBanner button"], }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; @@ -133,7 +146,7 @@ Negative.parameters = { * The alert banner component can contain both an icon-only close button and a button with a contextual action to * take. Whenever possible, include the in-line action button if there's a way for a user to quickly address the issue * associated with an alert. There should never be more than one button with a contextual action in an alert banner. - * + * * The close button is optional, depending on context. Consider adding one to let a user easily dismiss the alert. */ export const ActionableOptions = ActionableOptionsTemplate.bind({}); @@ -160,4 +173,4 @@ TextOverflow.args = { }; TextOverflow.parameters = { chromatic: { disableSnapshot: true }, -}; \ No newline at end of file +}; diff --git a/components/alertdialog/stories/alertdialog.stories.js b/components/alertdialog/stories/alertdialog.stories.js index 47a4ed4bac..b69e4acaf4 100644 --- a/components/alertdialog/stories/alertdialog.stories.js +++ b/components/alertdialog/stories/alertdialog.stories.js @@ -1,7 +1,9 @@ import { withUnderlayWrapper } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isOpen } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { AlertDialogGroup } from "./alertdialog.test.js"; import { Template } from "./template.js"; @@ -49,6 +51,17 @@ export default { } }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, decorators: [ withUnderlayWrapper, diff --git a/components/asset/stories/asset.stories.js b/components/asset/stories/asset.stories.js index 13d64fd732..6ce54bc0d4 100644 --- a/components/asset/stories/asset.stories.js +++ b/components/asset/stories/asset.stories.js @@ -1,5 +1,7 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { AssetGroup } from "./asset.test.js"; import { Template } from "./template.js"; @@ -36,6 +38,17 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, tags: ["!autodocs"], }; diff --git a/components/assetcard/stories/assetcard.stories.js b/components/assetcard/stories/assetcard.stories.js index d088a28822..22f10fde86 100644 --- a/components/assetcard/stories/assetcard.stories.js +++ b/components/assetcard/stories/assetcard.stories.js @@ -1,7 +1,9 @@ import { default as Checkbox } from "@spectrum-css/checkbox/stories/checkbox.stories.js"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isFocused, isSelected } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { AssetCardGroup } from "./assetcard.test.js"; import { Template } from "./template.js"; @@ -86,6 +88,17 @@ export default { handles: [...(Checkbox.parameters?.actions?.handles ?? [])], }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, tags: ["!autodocs"], }; diff --git a/components/assetlist/stories/assetlist.stories.js b/components/assetlist/stories/assetlist.stories.js index 2ee335d903..1f275f9e29 100644 --- a/components/assetlist/stories/assetlist.stories.js +++ b/components/assetlist/stories/assetlist.stories.js @@ -1,6 +1,8 @@ import { default as Checkbox } from "@spectrum-css/checkbox/stories/checkbox.stories.js"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { AssetListGroup } from "./assetlist.test.js"; /** @@ -20,6 +22,17 @@ export default { handles: [...(Checkbox.parameters?.actions?.handles ?? [])], }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/avatar/stories/avatar.stories.js b/components/avatar/stories/avatar.stories.js index 83eb4abc37..ff34d79fdb 100644 --- a/components/avatar/stories/avatar.stories.js +++ b/components/avatar/stories/avatar.stories.js @@ -1,7 +1,9 @@ import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled, size } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { AvatarGroup } from "./avatar.test.js"; import { Template } from "./template.js"; @@ -58,6 +60,17 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, tags: ["!autodocs"], }; diff --git a/components/badge/stories/badge.stories.js b/components/badge/stories/badge.stories.js index d5976ef5ba..fcf764cc36 100644 --- a/components/badge/stories/badge.stories.js +++ b/components/badge/stories/badge.stories.js @@ -1,7 +1,9 @@ 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 data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { BadgeGroup } from "./badge.test.js"; import { PreviewSets } from "./template.js"; @@ -62,6 +64,17 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, tags: ["!autodocs"], }; diff --git a/components/breadcrumb/stories/breadcrumb.stories.js b/components/breadcrumb/stories/breadcrumb.stories.js index 6689d7d7bb..fa84fd85e4 100644 --- a/components/breadcrumb/stories/breadcrumb.stories.js +++ b/components/breadcrumb/stories/breadcrumb.stories.js @@ -1,17 +1,19 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDragged } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { BreadcrumbGroup } from "./breadcrumb.test.js"; import { Template } from "./template"; /** * Breadcrumbs show hierarchy and navigational context for a user's location within an app. - * + * * ## Nesting * Breadcrumbs truncate when there is not enough room to display all levels of the breadcrumb list, or as a way of managing relevance of the visible breadcrumb items in a deeply nested hierarchy. The truncation of breadcrumb items begins when either there is not enough room to display all items, or if there are 5 or more breadcrumbs to display. They are typically indicated by the truncated menu folder icon. - * + * * The nested variants below are non-functional. Implementations can add their own overflow menus to display all options within a breadcrumb. - * + * * ## Root Context * Some applications find that displaying the root directory is useful for user orientation. This variation keeps the root visible when other folders are truncated into a menu. For example, when users can navigate file directories on their device as well as in the cloud, exposing a root directory called “On this device” is very helpful. */ @@ -41,6 +43,17 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/button/stories/button.stories.js b/components/button/stories/button.stories.js index 0fc0cb8cd6..314553b0d5 100644 --- a/components/button/stories/button.stories.js +++ b/components/button/stories/button.stories.js @@ -2,7 +2,9 @@ import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories. import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isActive, isDisabled, isFocused, isHovered, isPending, size, staticColor } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { ButtonGroups } from "./button.test.js"; import { ButtonsWithIconOptions, TextOverflowTemplate, TextWrapTemplate, TreatmentTemplate } from "./template.js"; @@ -85,6 +87,17 @@ export default { handles: ["click .spectrum-Button"], }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, tags: ["!autodocs"], }; @@ -266,7 +279,7 @@ Pending.parameters = { }; /** - * A button in a disabled state shows that an action exists, but is not available in that circumstance. + * A button in a disabled state shows that an action exists, but is not available in that circumstance. * This state can be used to maintain layout continuity and to communicate that an action may become * available later. */ @@ -281,7 +294,7 @@ Disabled.parameters = { }; /** - * When the button text is too long for the horizontal space available, it wraps to form another line. + * When the button text is too long for the horizontal space available, it wraps to form another line. * When there is no icon present, the text is aligned center. When there is an icon present, the text is * aligned `start` (left with a writing direction of left-to-right) and the icon remains vertically aligned * at the top. diff --git a/components/buttongroup/stories/buttongroup.stories.js b/components/buttongroup/stories/buttongroup.stories.js index 276ed44c84..60015971b7 100644 --- a/components/buttongroup/stories/buttongroup.stories.js +++ b/components/buttongroup/stories/buttongroup.stories.js @@ -1,7 +1,9 @@ import { default as Icon } from "@spectrum-css/icon/stories/icon.stories.js"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { size } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { ButtonGroup } from "./buttongroup.test.js"; /** @@ -57,6 +59,17 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/calendar/stories/calendar.stories.js b/components/calendar/stories/calendar.stories.js index cc0afa3b79..24ca7e997c 100644 --- a/components/calendar/stories/calendar.stories.js +++ b/components/calendar/stories/calendar.stories.js @@ -1,7 +1,9 @@ import ActionButtonStories from "@spectrum-css/actionbutton/stories/actionbutton.stories.js"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled, isFocused } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { CalendarGroup } from "./calendar.test.js"; import { Template } from "./template.js"; @@ -96,6 +98,17 @@ export default { ], }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, tags: ["!autodocs"], }; diff --git a/components/card/stories/card.stories.js b/components/card/stories/card.stories.js index 16fcc54c73..75d680b129 100644 --- a/components/card/stories/card.stories.js +++ b/components/card/stories/card.stories.js @@ -2,7 +2,9 @@ import { default as ActionButton } from "@spectrum-css/actionbutton/stories/acti 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 data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { CardGroup } from "./card.test.js"; import { Template } from "./template.js"; @@ -92,6 +94,17 @@ export default { ], }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, tags: ["!autodocs"], }; diff --git a/components/checkbox/stories/checkbox.stories.js b/components/checkbox/stories/checkbox.stories.js index 8bfe1cf1d2..7b760c28d1 100644 --- a/components/checkbox/stories/checkbox.stories.js +++ b/components/checkbox/stories/checkbox.stories.js @@ -1,18 +1,20 @@ import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isChecked, isDisabled, isEmphasized, isIndeterminate, isInvalid, isReadOnly, size } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; -import { DocsCheckboxGroup, AllVariantsCheckboxGroup, } from "./template"; + import { CheckboxGroup } from "./checkbox.test.js"; +import { AllVariantsCheckboxGroup, DocsCheckboxGroup, } from "./template"; /** * Checkboxes allow users to select multiple items from a list of individual items, or mark one individual item as selected. - * - * ## Usage notes - * - * Checkboxes should not be used on their own. They should always be used within a [field group](/docs/components-field-group--docs). Invalid checkboxes are indicated with an alert [help text](/docs/components-help-text--docs) when included in a Field group. - * - * When the label is too long for the horizontal space available, it wraps to form another line. + * + * ## Usage notes + * + * Checkboxes should not be used on their own. They should always be used within a [field group](/docs/components-field-group--docs). Invalid checkboxes are indicated with an alert [help text](/docs/components-help-text--docs) when included in a Field group. + * + * When the label is too long for the horizontal space available, it wraps to form another line. */ export default { title: "Checkbox", @@ -51,6 +53,17 @@ export default { handles: ["click input[type=\"checkbox\"]"], }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/clearbutton/stories/clearbutton.stories.js b/components/clearbutton/stories/clearbutton.stories.js index 9270808c04..508cb89768 100644 --- a/components/clearbutton/stories/clearbutton.stories.js +++ b/components/clearbutton/stories/clearbutton.stories.js @@ -1,7 +1,9 @@ import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled, isQuiet, size, staticColor } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { ClearButtonGroup } from "./clearbutton.test.js"; import { Template } from "./template"; @@ -59,6 +61,17 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/closebutton/stories/closebutton.stories.js b/components/closebutton/stories/closebutton.stories.js index 1475a07760..e16f1f980e 100644 --- a/components/closebutton/stories/closebutton.stories.js +++ b/components/closebutton/stories/closebutton.stories.js @@ -1,7 +1,9 @@ import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled, isFocused, isHovered, isKeyboardFocused, size, staticColor } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { CloseButtonGroup } from "./closebutton.test.js"; import { CloseButtonExample, Template } from "./template.js"; @@ -46,6 +48,17 @@ export default { handles: ["click .spectrum-CloseButton"], }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; @@ -55,7 +68,7 @@ Default.args = {}; /** * Close button provides a "large" icon size option, for displaying a larger cross icon for each component size. * When using this option, the following UI icons should be used: - * + * * | Close button class name | UI icon class name | * | ------------------------------- | --------------------------- | * | `.spectrum-CloseButton--sizeS` | `.spectrum-UIIcon-Cross200` | @@ -90,7 +103,7 @@ WithForcedColors.parameters = { /** * Close buttons come in four different sizes: small, medium, large, and extra-large. By default ("regular" icon size), the cross icon * within the close button should use the following UI icons for each component size: -* +* * | Close button class name | UI icon class name | * | ------------------------------- | --------------------------- | * | `.spectrum-CloseButton--sizeS` | `.spectrum-UIIcon-Cross75` | @@ -136,4 +149,3 @@ StaticBlack.tags = ["!dev"]; StaticBlack.parameters = { chromatic: { disableSnapshot: true }, }; - diff --git a/components/coachindicator/stories/coachindicator.stories.js b/components/coachindicator/stories/coachindicator.stories.js index 971211a1da..5a99cfcf79 100644 --- a/components/coachindicator/stories/coachindicator.stories.js +++ b/components/coachindicator/stories/coachindicator.stories.js @@ -1,12 +1,14 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isQuiet } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { CoachIndicatorGroup } from "./coachindicator.test.js"; import { AllVariantsCoachIndicatorGroup } from "./template"; /** * The coach indicator component can be used to bring added attention to specific parts of a page. - * + * * Coach indicator is primarily used along with the [coach mark](/docs/components-coach-mark--docs) component. */ export default { @@ -32,6 +34,17 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/coachmark/stories/coachmark.stories.js b/components/coachmark/stories/coachmark.stories.js index ca2e94c01e..e8fbc73040 100644 --- a/components/coachmark/stories/coachmark.stories.js +++ b/components/coachmark/stories/coachmark.stories.js @@ -1,7 +1,9 @@ import { default as ActionButton } from "@spectrum-css/actionbutton/stories/actionbutton.stories.js"; import { default as Menu } from "@spectrum-css/menu/stories/menu.stories.js"; import { disableDefaultModes, mobile } from "@spectrum-css/preview/modes"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { CoachMarkGroup } from "./coachmark.test.js"; import { Template } from "./template.js"; @@ -54,6 +56,17 @@ export default { ], }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, chromatic: { modes: mobile, }, diff --git a/components/colorarea/stories/colorarea.stories.js b/components/colorarea/stories/colorarea.stories.js index d04ecca0c9..8363eee633 100644 --- a/components/colorarea/stories/colorarea.stories.js +++ b/components/colorarea/stories/colorarea.stories.js @@ -1,6 +1,8 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled, isFocused } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { ColorAreaGroup } from "./colorarea.test.js"; import { Template } from "./template.js"; @@ -41,6 +43,17 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, tags: ["!autodocs"], }; diff --git a/components/colorhandle/stories/colorhandle.stories.js b/components/colorhandle/stories/colorhandle.stories.js index 494e115ad5..7a9e901b9a 100644 --- a/components/colorhandle/stories/colorhandle.stories.js +++ b/components/colorhandle/stories/colorhandle.stories.js @@ -1,6 +1,8 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled, isFocused } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { ColorHandleGroup } from "./colorhandle.test.js"; import { Template } from "./template.js"; @@ -46,6 +48,17 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, tags: ["!autodocs"], }; diff --git a/components/colorloupe/stories/colorloupe.stories.js b/components/colorloupe/stories/colorloupe.stories.js index ccee023b9a..d58dfc0d61 100644 --- a/components/colorloupe/stories/colorloupe.stories.js +++ b/components/colorloupe/stories/colorloupe.stories.js @@ -1,6 +1,8 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled, isOpen } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { ColorLoupeGroup } from "./colorloupe.test.js"; /** @@ -37,6 +39,17 @@ export default { } }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/colorslider/stories/colorslider.stories.js b/components/colorslider/stories/colorslider.stories.js index 81c42a2887..bacb2e5f62 100644 --- a/components/colorslider/stories/colorslider.stories.js +++ b/components/colorslider/stories/colorslider.stories.js @@ -1,6 +1,8 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled, isFocused } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { ColorSliderGroup } from "./colorslider.test.js"; import { Template } from "./template.js"; @@ -50,6 +52,17 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, tags: ["!autodocs"], }; diff --git a/components/colorwheel/stories/colorwheel.stories.js b/components/colorwheel/stories/colorwheel.stories.js index 5b5daf2771..644d1c23c2 100644 --- a/components/colorwheel/stories/colorwheel.stories.js +++ b/components/colorwheel/stories/colorwheel.stories.js @@ -1,6 +1,8 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled, isFocused } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { ColorWheelGroup } from "./colorwheel.test.js"; import { Template } from "./template.js"; @@ -42,6 +44,17 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, tags: ["!autodocs"], }; diff --git a/components/combobox/stories/combobox.stories.js b/components/combobox/stories/combobox.stories.js index 3a1c476934..ba3e46d0e5 100644 --- a/components/combobox/stories/combobox.stories.js +++ b/components/combobox/stories/combobox.stories.js @@ -1,7 +1,9 @@ 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 data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { ComboBoxGroup } from "./combobox.test.js"; import { Template } from "./template.js"; @@ -67,6 +69,17 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/contextualhelp/stories/contextualhelp.stories.js b/components/contextualhelp/stories/contextualhelp.stories.js index 44714b4053..2cd13df4e0 100644 --- a/components/contextualhelp/stories/contextualhelp.stories.js +++ b/components/contextualhelp/stories/contextualhelp.stories.js @@ -1,6 +1,8 @@ import { default as ActionButtonStories } from "@spectrum-css/actionbutton/stories/actionbutton.stories.js"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { ContextualHelpGroup } from "./contextualhelp.test.js"; import { Template } from "./template.js"; @@ -91,6 +93,17 @@ export default { ], }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, tags: ["!autodocs"], }; diff --git a/components/datepicker/stories/datepicker.stories.js b/components/datepicker/stories/datepicker.stories.js index afc9adb24c..b70a90eb86 100644 --- a/components/datepicker/stories/datepicker.stories.js +++ b/components/datepicker/stories/datepicker.stories.js @@ -1,7 +1,9 @@ import { default as CalendarStories } from "@spectrum-css/calendar/stories/calendar.stories.js"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled, isInvalid, isOpen, isQuiet, isReadOnly, isRequired, isValid } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { DatePickerGroup } from "./datepicker.test.js"; import { Template } from "./template.js"; @@ -74,6 +76,17 @@ export default { } }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/dial/stories/dial.stories.js b/components/dial/stories/dial.stories.js index 87466157d4..8bc53a7ba6 100644 --- a/components/dial/stories/dial.stories.js +++ b/components/dial/stories/dial.stories.js @@ -1,6 +1,8 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled, isDragged, isFocused, size } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { DialGroup } from "./dial.test.js"; import { Template } from "./template.js"; @@ -33,6 +35,17 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/dialog/stories/dialog.stories.js b/components/dialog/stories/dialog.stories.js index 90fbf9fae2..e691ce9385 100644 --- a/components/dialog/stories/dialog.stories.js +++ b/components/dialog/stories/dialog.stories.js @@ -2,13 +2,15 @@ import { withUnderlayWrapper } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isOpen } from "@spectrum-css/preview/types"; import { Template as Typography } from "@spectrum-css/typography/stories/template.js"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { DialogFullscreen, DialogFullscreenTakeover, DialogGroup } from "./dialog.test.js"; import { Template } from "./template"; /** * A dialog displays important information that users need to acknowledge. They appear over the interface and block further interactions. - * + * * The alert variants that were previously a part of Dialog were moved to their own component, [Alert Dialog](/docs/components-alert-dialog--docs). */ export default { @@ -119,6 +121,17 @@ export default { }, }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, decorators: [ withUnderlayWrapper, diff --git a/components/divider/stories/divider.stories.js b/components/divider/stories/divider.stories.js index 60fde7aa00..0015cb98e7 100644 --- a/components/divider/stories/divider.stories.js +++ b/components/divider/stories/divider.stories.js @@ -1,7 +1,9 @@ +import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { size, staticColor } from "@spectrum-css/preview/types"; -import { Sizes } from "@spectrum-css/preview/decorators"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { DividerGroup } from "./divider.test.js"; import { Template } from "./template.js"; @@ -34,11 +36,22 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; /** - * By default, dividers are horizontal and should be used for separating content vertically. The small divider is the default size. + * By default, dividers are horizontal and should be used for separating content vertically. The small divider is the default size. */ export const Default = DividerGroup.bind({}); Default.args = {}; diff --git a/components/dropindicator/stories/dropindicator.stories.js b/components/dropindicator/stories/dropindicator.stories.js index af546a7e58..39063eb6a7 100644 --- a/components/dropindicator/stories/dropindicator.stories.js +++ b/components/dropindicator/stories/dropindicator.stories.js @@ -1,5 +1,7 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { DropIndicatorGroup } from "./dropindicator.test.js"; import { DocsDropIndicatorGroup } from "./template"; @@ -39,6 +41,17 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/dropzone/stories/dropzone.stories.js b/components/dropzone/stories/dropzone.stories.js index 247214a0e5..d00aabf5d0 100644 --- a/components/dropzone/stories/dropzone.stories.js +++ b/components/dropzone/stories/dropzone.stories.js @@ -4,7 +4,9 @@ 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 data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { DropzoneGroup } from "./dropzone.test.js"; /** @@ -35,6 +37,17 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/fieldgroup/stories/fieldgroup.stories.js b/components/fieldgroup/stories/fieldgroup.stories.js index 428a24479b..3c8faf492f 100644 --- a/components/fieldgroup/stories/fieldgroup.stories.js +++ b/components/fieldgroup/stories/fieldgroup.stories.js @@ -2,7 +2,9 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isInvalid, isReadOnly, isRequired } 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 data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { FieldGroupSet } from "./fieldgroup.test.js"; import { Template } from "./template.js"; @@ -73,6 +75,17 @@ export default { ], }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, tags: ["!autodocs"], }; diff --git a/components/fieldlabel/stories/fieldlabel.stories.js b/components/fieldlabel/stories/fieldlabel.stories.js index 639a5eda31..0652802782 100644 --- a/components/fieldlabel/stories/fieldlabel.stories.js +++ b/components/fieldlabel/stories/fieldlabel.stories.js @@ -1,6 +1,8 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled, isRequired, size } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { FieldLabelGroup } from "./fieldlabel.test.js"; /** @@ -42,6 +44,17 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/fieldlabel/stories/form.stories.js b/components/fieldlabel/stories/form.stories.js index 956a380814..d1bf3c6552 100644 --- a/components/fieldlabel/stories/form.stories.js +++ b/components/fieldlabel/stories/form.stories.js @@ -2,7 +2,9 @@ import { Template as Picker } from "@spectrum-css/picker/stories/template.js"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { Template as Stepper } from "@spectrum-css/stepper/stories/template.js"; import { Template as TextField } from "@spectrum-css/textfield/stories/template.js"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { FormGroup } from "./form.test.js"; /** @@ -28,6 +30,17 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/floatingactionbutton/stories/floatingactionbutton.stories.js b/components/floatingactionbutton/stories/floatingactionbutton.stories.js index f25f64d1d6..89f09726b9 100644 --- a/components/floatingactionbutton/stories/floatingactionbutton.stories.js +++ b/components/floatingactionbutton/stories/floatingactionbutton.stories.js @@ -1,7 +1,9 @@ import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.js"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isActive, isFocused, isHovered } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { FloatingActionButtonGroup } from "./floatingactionbutton.test.js"; import { Template } from "./template.js"; @@ -45,6 +47,17 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/helptext/stories/helptext.stories.js b/components/helptext/stories/helptext.stories.js index 3ddcaaa8a4..1121c73db5 100644 --- a/components/helptext/stories/helptext.stories.js +++ b/components/helptext/stories/helptext.stories.js @@ -1,7 +1,9 @@ import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled, size } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { HelpTextGroup } from "./helptext.test.js"; import { NegativeTemplate, Template, VariantsTemplate } from "./template.js"; @@ -57,6 +59,17 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; @@ -113,10 +126,10 @@ Disabled.parameters = { /** * The negative variant is used to convey error messages and can have an optional icon. - * - * In most cases, help text is used with a component that already displays an icon communicating an error (e.g., + * + * In most cases, help text is used with a component that already displays an icon communicating an error (e.g., * [text field](?path=/docs/components-text-field--docs), - * [picker](?path=/docs/components-picker--docs), + * [picker](?path=/docs/components-picker--docs), * [combo box](?path=/docs/components-combobox--docs#standard---invalid)), * so it’s not necessary to include another icon. In other cases, help text that is used with a component that does not display an icon * communicating an error (e.g., [field group](?path=/docs/components-field-group--docs#invalid)) needs to display an icon. diff --git a/components/icon/stories/icon.stories.js b/components/icon/stories/icon.stories.js index a1548194fa..c5522a2f26 100644 --- a/components/icon/stories/icon.stories.js +++ b/components/icon/stories/icon.stories.js @@ -3,7 +3,9 @@ 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"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { IconGroup } from "./icon.test.js"; import { Template } from "./template.js"; import { uiIconSizes, uiIconsWithDirections, workflowIcons } from "./utilities.js"; @@ -89,6 +91,17 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, chromatic: { modes: mobile, }, diff --git a/components/illustratedmessage/stories/illustratedmessage.stories.js b/components/illustratedmessage/stories/illustratedmessage.stories.js index b292562929..1e0cc41df0 100644 --- a/components/illustratedmessage/stories/illustratedmessage.stories.js +++ b/components/illustratedmessage/stories/illustratedmessage.stories.js @@ -1,7 +1,9 @@ import { Template as Link } from "@spectrum-css/link/stories/template.js"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { html } from "lit"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { IllustratedMessageGroup } from "./illustratedmessage.test.js"; import { Template } from "./template.js"; @@ -44,6 +46,17 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/infieldbutton/stories/infieldbutton.stories.js b/components/infieldbutton/stories/infieldbutton.stories.js index 2d449dff95..1e4406bcd9 100644 --- a/components/infieldbutton/stories/infieldbutton.stories.js +++ b/components/infieldbutton/stories/infieldbutton.stories.js @@ -1,7 +1,9 @@ import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.js"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isActive, isDisabled, isFocused, isHovered, isQuiet, size } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { InfieldButtonGroup } from "./infieldbutton.test.js"; import { Template } from "./template.js"; @@ -48,6 +50,17 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/inlinealert/stories/inlinealert.stories.js b/components/inlinealert/stories/inlinealert.stories.js index 405c65a58c..cf2a0692d1 100644 --- a/components/inlinealert/stories/inlinealert.stories.js +++ b/components/inlinealert/stories/inlinealert.stories.js @@ -1,5 +1,7 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { InlineAlertGroup } from "./inlinealert.test.js"; import { Template } from "./template"; @@ -59,6 +61,17 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; @@ -71,7 +84,7 @@ Default.args = {}; // ********* DOCS ONLY ********* // /** * The informative variant uses the informative semantic color (blue) and has an "information" icon to help those with color vision deficiency discern the message tone. This should be used when the message needs to call extra attention, as compared to the neutral variant. - * + * * _Spectrum for Adobe Express uses a different icon. Use the SX_Info_18_S.svg icon in the Express workflow icon set._ */ export const Informative = Template.bind({}); @@ -86,7 +99,7 @@ Informative.tags = ["!dev"]; /** * A negative variant uses the negative semantic color (red) and has an "alert" icon to help those with color vision deficiency to discern the message tone. Negative variants are used to show an error or failure, or to convey something that needs to be immediately acknowledged or addressed. - * + * * _Spectrum for Adobe Express uses a different icon. Use the SX_Alert_18_S.svg icon in the Express workflow icon set._ */ export const Negative = Template.bind({}); @@ -101,7 +114,7 @@ Negative.tags = ["!dev"]; /** * The positive variant uses the positive semantic color (green) and has a "checkmark" icon to help those with color vision deficiency discern the message tone. This variant should be used to inform someone of a successful function or result of an action they took. - * + * * _Spectrum for Adobe Express uses a different icon. Use the SX_CheckmarkCircle_18_S.svg icon in the Express workflow icon set._ */ export const Positive = Template.bind({}); @@ -116,7 +129,7 @@ Positive.tags = ["!dev"]; /** * To warn about a situation that may need to be addressed soon, use the notice variant. It utilizes the notice semantic color (orange) and has an "alert" icon to help those with color vision deficiency to discern the message tone. - * + * * _Spectrum for Adobe Express uses a different icon. Use the SX_Alert_18_S.svg icon in the Express workflow icon set._ */ export const Notice = Template.bind({}); @@ -131,7 +144,7 @@ Notice.tags = ["!dev"]; /** * An in-line alert with a close button in the footer. Combine this strategy with any variant. - * + * * _Spectrum for Adobe Express uses a different icon. Use the SX_Alert_18_S.svg icon in the Express workflow icon set._ */ export const Closable = Template.bind({}); diff --git a/components/link/stories/link.stories.js b/components/link/stories/link.stories.js index 5fc8782e28..a45f58b14d 100644 --- a/components/link/stories/link.stories.js +++ b/components/link/stories/link.stories.js @@ -1,6 +1,8 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isActive, isFocused, isHovered, isQuiet, staticColor } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { LinkGroup } from "./link.test.js"; import { TemplateWithFillerText } from "./template"; @@ -70,6 +72,17 @@ export default { handles: ["click .spectrum-Link"], }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/logicbutton/stories/logicbutton.stories.js b/components/logicbutton/stories/logicbutton.stories.js index c56c44f06e..29d0085b12 100644 --- a/components/logicbutton/stories/logicbutton.stories.js +++ b/components/logicbutton/stories/logicbutton.stories.js @@ -1,6 +1,8 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { LogicButtonGroup } from "./logicbutton.test.js"; import { Template, VariantGroup } from "./template.js"; @@ -30,6 +32,17 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/menu/stories/menu.stories.js b/components/menu/stories/menu.stories.js index 8658cb8b33..a393d21f74 100644 --- a/components/menu/stories/menu.stories.js +++ b/components/menu/stories/menu.stories.js @@ -1,7 +1,9 @@ import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.js"; import { disableDefaultModes, viewports } from "@spectrum-css/preview/modes"; import { isActive, isDisabled, isFocused, isHovered, isOpen, isSelected, size } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { MenuItemGroup, MenuTraySubmenu, MenuWithVariants } from "./menu.test.js"; import { Template } from "./template.js"; @@ -186,6 +188,17 @@ export default { } }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/miller/stories/miller.stories.js b/components/miller/stories/miller.stories.js index 6a49e68820..012a8810bd 100644 --- a/components/miller/stories/miller.stories.js +++ b/components/miller/stories/miller.stories.js @@ -1,5 +1,7 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { MillerGroup } from "./miller.test.js"; import { Template } from "./template.js"; @@ -77,6 +79,17 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/modal/stories/modal.stories.js b/components/modal/stories/modal.stories.js index 0c7847814b..fe48f55cc5 100644 --- a/components/modal/stories/modal.stories.js +++ b/components/modal/stories/modal.stories.js @@ -2,7 +2,9 @@ import { withUnderlayWrapper } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isOpen } from "@spectrum-css/preview/types"; import { Template as Typography } from "@spectrum-css/typography/stories/template.js"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { ModalGroup } from "./modal.test.js"; /** @@ -49,6 +51,17 @@ export default { }, }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, decorators: [ withUnderlayWrapper, diff --git a/components/opacitycheckerboard/stories/opacitycheckerboard.stories.js b/components/opacitycheckerboard/stories/opacitycheckerboard.stories.js index 327179205c..92d696ef76 100644 --- a/components/opacitycheckerboard/stories/opacitycheckerboard.stories.js +++ b/components/opacitycheckerboard/stories/opacitycheckerboard.stories.js @@ -1,5 +1,7 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { OpacityCheckboardGroup } from "./opacitycheckerboard.test.js"; import { Template } from "./template.js"; @@ -30,6 +32,17 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/pagination/stories/pagination.stories.js b/components/pagination/stories/pagination.stories.js index a3b2f09790..db9fa528cc 100644 --- a/components/pagination/stories/pagination.stories.js +++ b/components/pagination/stories/pagination.stories.js @@ -1,12 +1,14 @@ import { default as ActionButton } from "@spectrum-css/actionbutton/stories/actionbutton.stories"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { size } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { PaginationGroup } from "./pagination.test.js"; import { Template } from "./template"; /** - * The pagination component displays numbered buttons or an input field to allow for navigation. + * The pagination component displays numbered buttons or an input field to allow for navigation. */ export default { title: "Pagination", @@ -68,11 +70,22 @@ export default { ], }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; /** - * The default listing/page variant uses buttons for each page number. + * The default listing/page variant uses buttons for each page number. */ export const Default = PaginationGroup.bind({}); Default.storyName = "Default (listing)"; diff --git a/components/picker/stories/picker.stories.js b/components/picker/stories/picker.stories.js index 12a0100c8d..84cee34ea1 100644 --- a/components/picker/stories/picker.stories.js +++ b/components/picker/stories/picker.stories.js @@ -1,7 +1,9 @@ import { WithDividers as MenuStories } from "@spectrum-css/menu/stories/menu.stories.js"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled, isInvalid, isKeyboardFocused, isLoading, isOpen, isQuiet, size } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { PickerGroup } from "./picker.test.js"; /** @@ -84,6 +86,17 @@ export default { } }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/pickerbutton/stories/pickerbutton.stories.js b/components/pickerbutton/stories/pickerbutton.stories.js index 0c8245ec4f..00127b0e36 100644 --- a/components/pickerbutton/stories/pickerbutton.stories.js +++ b/components/pickerbutton/stories/pickerbutton.stories.js @@ -2,7 +2,9 @@ import { default as Icon } from "@spectrum-css/icon/stories/icon.stories.js"; import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled, isFocused, isOpen, isQuiet, size } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { PickerGroup } from "./pickerbutton.test.js"; import { CustomIconTemplate, Template } from "./template"; @@ -85,6 +87,17 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/popover/stories/popover.stories.js b/components/popover/stories/popover.stories.js index 2c5d922afb..eb48b344be 100644 --- a/components/popover/stories/popover.stories.js +++ b/components/popover/stories/popover.stories.js @@ -5,17 +5,19 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isOpen } from "@spectrum-css/preview/types"; import { Template as Typography } from "@spectrum-css/typography/stories/template.js"; import { html } from "lit"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { PopoverGroup } from "./popover.test.js"; import { FixedWidthSourceTemplate, Template, TipPlacementVariants } from "./template"; /** * A popover is used to display transient content (menus, options, additional actions, etc.) and appears when clicking/tapping on a source (tools, buttons, etc.). * It stands out via its visual style (stroke and drop shadow) and floats on top of the rest of the interface. - * + * * - Popover's position and distance to its source should be handled by the implementation. Positioning in Storybook is only for demonstration purposes. * - When the `.is-open` class is present, popover is offset from the source by the spacing value defined in `--spectrum-popover-animation-distance`. This - * offset is done with a CSS transform and animates with a CSS transition. + * offset is done with a CSS transform and animates with a CSS transition. */ export default { title: "Popover", @@ -91,13 +93,24 @@ export default { } }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; /** * By default, popovers do not have a tip. Popovers without a tip should be used when the source has a * visually distinct down state, in order to show the connection between the popover and its source. - * + * * This example uses the [menu](?path=/docs/components-menu--docs) component within the popover, and a button as the source. */ export const Default = PopoverGroup.bind({}); @@ -269,7 +282,7 @@ DialogStyle.parameters = { * the following naming convention: the first term is the popover's position and the second term is its * source's position. For example, for the `spectrum-Popover--top-left` class, the popover is positioned at the top and the * source is to the left. - * + * * #### Tip SVG * Depending on its position, the tip uses one of two different SVGs. * - Top and bottom popover positions use the same SVG. The CSS handles flipping the SVG vertically. diff --git a/components/progressbar/stories/meter.stories.js b/components/progressbar/stories/meter.stories.js index 69928bed33..12011e7881 100644 --- a/components/progressbar/stories/meter.stories.js +++ b/components/progressbar/stories/meter.stories.js @@ -1,5 +1,7 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { MeterGroup } from "./meter.test.js"; import { default as ProgressBar } from "./progressbar.stories"; @@ -25,6 +27,17 @@ export default { args: ProgressBar.args, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/progresscircle/stories/progresscircle.stories.js b/components/progresscircle/stories/progresscircle.stories.js index 65b5464342..4be34a756a 100644 --- a/components/progresscircle/stories/progresscircle.stories.js +++ b/components/progresscircle/stories/progresscircle.stories.js @@ -1,7 +1,9 @@ import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isIndeterminate, size, staticColor } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { ProgressCircleGroup } from "./progresscircle.test.js"; import { Template } from "./template"; @@ -27,6 +29,17 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; @@ -107,4 +120,4 @@ StaticWhiteIndeterminate.args = { }; StaticWhiteIndeterminate.parameters = { chromatic: { disableSnapshot: true }, -}; \ No newline at end of file +}; diff --git a/components/radio/stories/radio.stories.js b/components/radio/stories/radio.stories.js index be88ce4a12..14e4f41b8c 100644 --- a/components/radio/stories/radio.stories.js +++ b/components/radio/stories/radio.stories.js @@ -1,13 +1,15 @@ import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isChecked, isDisabled, isEmphasized, isReadOnly, size } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { RadioGroup } from "./radio.test.js"; import { BasicGroupTemplate } from "./template"; /** * Radio buttons allow users to select a single option from a list of mutually exclusive options. All possible options are exposed up front for users to compare. - * + * * Radio buttons should not be used on their own, they should always be used within a [field group](?path=/docs/components-field-group--docs). Invalid radio buttons are signified by including * [help text](?path=/docs/components-help-text--docs) in a field group. Sample usage for an [invalid radio state](?path=/docs/components-field-group--docs#invalid) is included in the field group documentation. */ @@ -54,6 +56,17 @@ export default { handles: ["click input[type=\"radio\"]"], }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; @@ -103,7 +116,7 @@ Sizing.parameters = { }; /** - * The emphasized option provides a visual prominence for the selected radio button. + * The emphasized option provides a visual prominence for the selected radio button. * It is best for forms, settings, lists or grids of assets, and other situations where a * radio button needs to be noticed. */ @@ -130,7 +143,7 @@ Disabled.parameters = { /** * A radio group has a read-only option for when it's in the disabled state but still needs to be shown. * This allows for content to be copied, but not interacted with or changed. - * + * * - Read-only radio buttons are disabled, but not all disabled radio buttons are read-only. * - Read-only radio buttons do not have a focus ring, but the button should be focusable. */ @@ -143,4 +156,4 @@ ReadOnly.args = { ReadOnly.tags = ["!dev"]; ReadOnly.parameters = { chromatic: { disableSnapshot: true }, -}; \ No newline at end of file +}; diff --git a/components/rating/stories/rating.stories.js b/components/rating/stories/rating.stories.js index 314aba98d3..81565517a3 100644 --- a/components/rating/stories/rating.stories.js +++ b/components/rating/stories/rating.stories.js @@ -1,12 +1,14 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled, isEmphasized, isFocused, isReadOnly } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { RatingGroup } from "./rating.test.js"; import { Template } from "./template.js"; /** * The rating component is used to display or collect a user's rating of an item as represented by a number of stars. - * + * * ### Usage notes * - All active stars have the class `is-selected` applied. * - The current value (the last active star) has the class `is-currentValue` applied. @@ -53,6 +55,17 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/search/stories/search.stories.js b/components/search/stories/search.stories.js index ef50bd6a0d..c1bbf5518e 100644 --- a/components/search/stories/search.stories.js +++ b/components/search/stories/search.stories.js @@ -1,6 +1,8 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled, isQuiet, size } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { SearchGroup } from "./search.test.js"; /** @@ -28,6 +30,17 @@ export default { ], }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/sidenav/stories/sidenav.stories.js b/components/sidenav/stories/sidenav.stories.js index fc68aa78b9..42a03f5a19 100644 --- a/components/sidenav/stories/sidenav.stories.js +++ b/components/sidenav/stories/sidenav.stories.js @@ -1,11 +1,13 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { SideNavGroup } from "./sidenav.test.js"; import { Template } from "./template.js"; /** * Side nav lets users navigate the entire content of a product or a section. These can be used for a single level or a multi-level navigation. - * + * * - A navigation item can be styled as disabled with the `is-disabled` class. * - A navigation item can be styled as the current or selected page with the `is-selected` class. This is accompanied by the use of the `aria-current` attribute on the anchor link. */ @@ -63,6 +65,17 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/slider/stories/slider.stories.js b/components/slider/stories/slider.stories.js index c5f4119f6d..636a271fbf 100644 --- a/components/slider/stories/slider.stories.js +++ b/components/slider/stories/slider.stories.js @@ -1,20 +1,22 @@ -import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { Sizes } from "@spectrum-css/preview/decorators"; +import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled, isFocused, size } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { SliderGroup } from "./slider.test.js"; import { Template } from "./template.js"; /** * A slider allows users to quickly select a value within a range. They should be used when the upper and lower bounds to the range are invariable. - * + * * ## Indicating focus * Focus must be bubbled up to the parent so its descendants can be styled. * * Thus, implementations should add the following class to the `.spectrum-Slider` parent class in the following situations: * * - `.is-disabled`: when the slider is disabled - * + * * Implementations should also bubble the following class to the `.spectrum-Slider-controls` parent class in the following situations: * - `.is-focused`: when the handle input is focused with the mouse or keyboard @@ -140,6 +142,17 @@ export default { ], }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; @@ -154,7 +167,7 @@ Default.args = {}; * If a slider's label is undefined, it should still include an aria-label in HTML (depending on the context, “aria-label” or “aria-labelledby”). */ export const WithoutLabel = Template.bind({}); -WithoutLabel.args = { +WithoutLabel.args = { label: "", }; WithoutLabel.tags = ["!dev"]; diff --git a/components/splitview/stories/splitview.stories.js b/components/splitview/stories/splitview.stories.js index 3cc8ad40c5..9e45e23a46 100644 --- a/components/splitview/stories/splitview.stories.js +++ b/components/splitview/stories/splitview.stories.js @@ -1,6 +1,8 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isFocused } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { SplitViewGroup } from "./splitview.test.js"; import { Template } from "./template.js"; @@ -79,6 +81,17 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/statuslight/stories/statuslight.stories.js b/components/statuslight/stories/statuslight.stories.js index b318b49813..6bdabe383b 100644 --- a/components/statuslight/stories/statuslight.stories.js +++ b/components/statuslight/stories/statuslight.stories.js @@ -1,6 +1,8 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { size } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { StatusLightGroup } from "./statuslight.test.js"; export default { @@ -57,6 +59,17 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/steplist/stories/steplist.stories.js b/components/steplist/stories/steplist.stories.js index 6c75bc1c43..bc46a0ee1a 100644 --- a/components/steplist/stories/steplist.stories.js +++ b/components/steplist/stories/steplist.stories.js @@ -1,11 +1,13 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { SteplistGroup } from "./steplist.test.js"; import { DocsSteplistGroup } from "./template"; /** * A steplist can communicate the progress of a task or workflow. It can help users understand where they are in a process and what they need to do next. - * + * * All variants of steplist can be static or interactive. */ export default { @@ -74,6 +76,17 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/stepper/stories/stepper.stories.js b/components/stepper/stories/stepper.stories.js index 5fe18fa5cf..20df823925 100644 --- a/components/stepper/stories/stepper.stories.js +++ b/components/stepper/stories/stepper.stories.js @@ -1,7 +1,9 @@ import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled, isFocused, isHovered, isInvalid, isKeyboardFocused, isQuiet, size } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { StepperGroup } from "./stepper.test.js"; import { AllDefaultVariantsGroup, DisabledVariantsGroup, Template } from "./template"; @@ -42,6 +44,17 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/swatch/stories/swatch.stories.js b/components/swatch/stories/swatch.stories.js index 8871631e05..30fb8e17f5 100644 --- a/components/swatch/stories/swatch.stories.js +++ b/components/swatch/stories/swatch.stories.js @@ -1,15 +1,17 @@ +import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled, isSelected, size } from "@spectrum-css/preview/types"; -import { Sizes } from "@spectrum-css/preview/decorators"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { SwatchGroup } from "./swatch.test.js"; -import { Template, DisabledGroup, EmptyGroup, RoundingGroup, BorderGroup, SizingGroup } from "./template"; +import { BorderGroup, DisabledGroup, EmptyGroup, RoundingGroup, SizingGroup, Template } from "./template"; /** * A swatch shows a small sample of a fill--such as a color, gradient, texture, or material--that is intended to be applied to an object. - * + * * ## Usage notes - * + * * Set `--spectrum-picked-color` to customize the swatch fill background color. */ export default { @@ -108,6 +110,17 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; @@ -172,7 +185,7 @@ Selected.parameters = { }; /** - * By default, swatches have a border. However, when swatches are used within a swatch group, there are additional border considerations. + * By default, swatches have a border. However, when swatches are used within a swatch group, there are additional border considerations. * - When color swatches are used in a [swatch group](?path=/docs/components-swatch-group--docs), they typically have the `.spectrum-Swatch--noBorder` class. * - When and only when color swatches used in a swatch group have low contrast (below 3:1 contrast with the background), those swatches will have a less prominent border compared to the swatch component when used by itself. They individually use the `.spectrum-Swatch--lightBorder` class. */ @@ -182,7 +195,7 @@ Border.parameters = { chromatic: { disableSnapshot: true }, }; -/** +/** * Swatches can also have a rectangle shape with an aspect ratio of 2:1. The square shape is the default and is used in swatch groups (e.g., a palette of colors). */ export const Shape = Template.bind({}); diff --git a/components/swatchgroup/stories/swatchgroup.stories.js b/components/swatchgroup/stories/swatchgroup.stories.js index d94c91ba15..814ee513dd 100644 --- a/components/swatchgroup/stories/swatchgroup.stories.js +++ b/components/swatchgroup/stories/swatchgroup.stories.js @@ -1,29 +1,31 @@ -import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { Sizes } from "@spectrum-css/preview/decorators"; +import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { default as Swatch } from "@spectrum-css/swatch/stories/swatch.stories.js"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { SwatchgroupGroup } from "./swatchgroup.test.js"; -import { Template, RoundingTemplate } from "./template"; +import { RoundingTemplate, Template } from "./template"; /** * The swatch group component is a collection of [swatches](?path=/docs/components-swatch--docs). - * + * * ## Usage notes - * + * * ### Corner rounding in swatch groups - * + * * A corner rounding of “none” (`.spectrum-Swatch--roundingNone` class) should be used in a swatch group in order to help minimize the Hermann grid illusion that happens at the intersections of the white space within the group. - * + * * The only exception is when a swatch group only takes up a single row. In that case, use any of the rounding options. - * + * * ### Apply border to low-contrast swatches only - * + * * When swatches within a swatch group have low contrast (below 3:1 contrast with the background), they have a less prominent border compared to a single swatch component used by itself, and should have the `.spectrum-Swatch--lightBorder` class. This reduces the likelihood of the UI interfering with color perception and comparisons. Otherwise, swatches within a swatch group that meet contrast should have the `.spectrum-Swatch--noBorder` class. - * + * * Implementations should apply the `.spectrum-Swatch--lightBorder` to the individual swatches of a swatch group that do not meet 3:1 contrast. - * + * * ### Density - * + * * Swatch groups come in 3 densities: regular (default), compact, and spacious. Compact and spacious densities retain the same swatch size as regular density, but have less or more padding between each swatch, respectively. */ export default { @@ -112,6 +114,17 @@ export default { ], }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; @@ -165,7 +178,7 @@ Rounding.parameters = { export const Sizing = (args, context) => Sizes({ Template, withBorder: false, - withHeading: false, + withHeading: false, ...args, }, context); Sizing.args = Default.args; @@ -176,7 +189,7 @@ Sizing.parameters = { /** * When swatches within a swatch group have low contrast (below 3:1 contrast with the background), the `.spectrum-Swatch--lightBorder` class should be applied to those swatches only. - * + * * The swatch group example below contains all swatches with low contrast in light mode, therefore each has the `.spectrum-Swatch--lightBorder` class applied. */ export const WithLightBorder = Template.bind({}); diff --git a/components/switch/stories/switch.stories.js b/components/switch/stories/switch.stories.js index f53be00fd7..f24613cbda 100644 --- a/components/switch/stories/switch.stories.js +++ b/components/switch/stories/switch.stories.js @@ -1,6 +1,7 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isChecked, isDisabled, isEmphasized, size } from "@spectrum-css/preview/types"; import pkgJson from "../package.json"; + import { SwitchGroup } from "./switch.test.js"; import { Template } from "./template.js"; diff --git a/components/table/stories/table.stories.js b/components/table/stories/table.stories.js index 5bbada7598..8aef109448 100644 --- a/components/table/stories/table.stories.js +++ b/components/table/stories/table.stories.js @@ -1,7 +1,9 @@ +import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isEmphasized, isQuiet, size } from "@spectrum-css/preview/types"; -import { Sizes } from "@spectrum-css/preview/decorators"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { TableGroup } from "./table.test.js"; import { Template } from "./template.js"; @@ -111,6 +113,17 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; @@ -341,7 +354,7 @@ SectionHeaderQuiet.parameters = { }; /** - * + * * A table can be wrapped in a fixed height `div` with the `.spectrum-Table-scroller` class. This allows scrolling of the table body and makes the column headers sticky (i.e. fixed to the top on scroll). * * When using the scrollable wrapper, the column headers must have a solid background color set. This can be customized to match the parent background with the custom property `--mod-table-header-background-color-scrollable`. diff --git a/components/tabs/stories/tabs.stories.js b/components/tabs/stories/tabs.stories.js index b328be7445..f3740f0213 100644 --- a/components/tabs/stories/tabs.stories.js +++ b/components/tabs/stories/tabs.stories.js @@ -1,21 +1,23 @@ +import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isEmphasized, isQuiet, size } from "@spectrum-css/preview/types"; -import { Sizes } from "@spectrum-css/preview/decorators"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { TabsGroups } from "./tabs.test.js"; -import { Template, QuietGroup, OverflowGroup, VerticalGroup, CompactGroup } from "./template.js"; +import { CompactGroup, OverflowGroup, QuietGroup, Template, VerticalGroup } from "./template.js"; /** * Tabs organize content into multiple sections and allow users to navigate between them. The content under the set of tabs should be related and form a coherent unit. Tabs can be either horizontal or vertical. - * + * * ## Usage notes - * + * * ### Use icons consistently * Icons are optional, but don’t mix the use of icons in tabs if they are utilized. Navigation controls require a clear spacial relationship to one another, and mixing the use of icons can dramatically impact the visual balance and presence for each tab item. - * + * * ### Setting the selected tab item * Only one tab item can be selected at any given time. The selected tab item is designated by the `is-selected` class. A selection indicator line is shown under or next to the selected tab item. - * + * */ export default { @@ -113,23 +115,34 @@ export default { handles: [".spectrum-Tabs-item"], }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; /** * Basic, default tab items should have a label for accessibility. If a label isn’t present, it must include an icon and becomes an icon-only tab item. - * + * * By default, tabs have a divider that spans across all tab items. This style works as a way to anchor them to the page. These types of tabs are best used at the top of a page, as a top-level navigation. - * + * * Tabs are horizontal by default and should be used when horizontal space is limited. - * + * */ export const Default = TabsGroups.bind({}); Default.args = {}; // ********* DOCS ONLY ********* // /** - * Vertical tabs should be used when horizontal space is more generous and when the list of sections is greater than can be presented to the user in a horizontal format. + * Vertical tabs should be used when horizontal space is more generous and when the list of sections is greater than can be presented to the user in a horizontal format. */ export const Vertical = VerticalGroup.bind({}); Vertical.args = { @@ -142,7 +155,7 @@ Vertical.parameters = { export const VerticalRight = Template.bind({}); VerticalRight.args = { - ...Vertical.args, + ...Vertical.args, hasRightAlignedTabs: true, }; VerticalRight.storyName = "Vertical right"; @@ -153,7 +166,7 @@ VerticalRight.parameters = { /** * When there are too many tabs to fit horizontally across the viewport, the tabs component can be displayed as a [quiet picker](/docs/components-picker--docs). The example below is non-functional. - * + * * When appropriate, alternative methods of overflowing tabs such as horizontal scrolling can be used. */ export const Overflow = OverflowGroup.bind({}); diff --git a/components/tag/stories/tag.stories.js b/components/tag/stories/tag.stories.js index d5b95fcf34..7a319b1092 100644 --- a/components/tag/stories/tag.stories.js +++ b/components/tag/stories/tag.stories.js @@ -1,7 +1,9 @@ import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.js"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled, isEmphasized, isInvalid, isSelected, size } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { TagGroups } from "./tag.test.js"; import { Template } from "./template.js"; @@ -93,6 +95,17 @@ export default { handles: [], }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/taggroup/stories/taggroup.stories.js b/components/taggroup/stories/taggroup.stories.js index b1f4b6381a..3fa1b87ad7 100644 --- a/components/taggroup/stories/taggroup.stories.js +++ b/components/taggroup/stories/taggroup.stories.js @@ -1,6 +1,8 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { default as TagStories } from "@spectrum-css/tag/stories/tag.stories.js"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { TagGroups } from "./taggroup.test.js"; import { Template } from "./template.js"; @@ -55,6 +57,17 @@ export default { ], }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/textfield/stories/textfield.stories.js b/components/textfield/stories/textfield.stories.js index 683470204c..abb32339aa 100644 --- a/components/textfield/stories/textfield.stories.js +++ b/components/textfield/stories/textfield.stories.js @@ -1,6 +1,8 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled, isFocused, isInvalid, isKeyboardFocused, isLoading, isQuiet, isReadOnly, isRequired, isValid, size } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { Template } from "./template.js"; import { TextFieldGroup } from "./textfield.test.js"; @@ -117,6 +119,17 @@ export default { ], }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/thumbnail/stories/thumbnail.stories.js b/components/thumbnail/stories/thumbnail.stories.js index e709de85e1..29c68952db 100644 --- a/components/thumbnail/stories/thumbnail.stories.js +++ b/components/thumbnail/stories/thumbnail.stories.js @@ -1,7 +1,9 @@ import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled, isFocused, isSelected, size } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { Template } from "./template.js"; import { ThumbnailGroup } from "./thumbnail.test.js"; @@ -88,6 +90,17 @@ export default { handles: [], }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/toast/stories/toast.stories.js b/components/toast/stories/toast.stories.js index a2069f1117..f6b668b4ac 100644 --- a/components/toast/stories/toast.stories.js +++ b/components/toast/stories/toast.stories.js @@ -1,5 +1,7 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { Template } from "./template.js"; import { ToastGroup } from "./toast.test.js"; @@ -41,6 +43,17 @@ export default { handles: ["click .spectrum-Toast button"], }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/tooltip/stories/tooltip.stories.js b/components/tooltip/stories/tooltip.stories.js index 17946b4693..81a29ba6ff 100644 --- a/components/tooltip/stories/tooltip.stories.js +++ b/components/tooltip/stories/tooltip.stories.js @@ -1,6 +1,8 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isFocused, isOpen } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { PlacementVariants } from "./tooltip.test.js"; /** @@ -89,6 +91,17 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/tray/stories/tray.stories.js b/components/tray/stories/tray.stories.js index 564bf294d6..56be95f95d 100644 --- a/components/tray/stories/tray.stories.js +++ b/components/tray/stories/tray.stories.js @@ -1,7 +1,9 @@ import { Template as Dialog } from "@spectrum-css/dialog/stories/template.js"; import { disableDefaultModes, viewports } from "@spectrum-css/preview/modes"; import { isOpen } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { TrayGroup } from "./tray.test.js"; /** @@ -42,6 +44,17 @@ export default { }, }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/treeview/stories/treeview.stories.js b/components/treeview/stories/treeview.stories.js index a4f9a7e295..a2d08ce649 100644 --- a/components/treeview/stories/treeview.stories.js +++ b/components/treeview/stories/treeview.stories.js @@ -1,7 +1,9 @@ import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isQuiet, size } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { Template } from "./template.js"; import { TreeViewGroup } from "./treeview.test.js"; @@ -37,6 +39,17 @@ export default { handles: ["click .spectrum-TreeView-itemLink"], }, packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; diff --git a/components/typography/stories/typography.stories.js b/components/typography/stories/typography.stories.js index 3e1cd67cc5..1eed76b258 100644 --- a/components/typography/stories/typography.stories.js +++ b/components/typography/stories/typography.stories.js @@ -1,19 +1,21 @@ import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { size } from "@spectrum-css/preview/types"; +import data from "../metadata/metadata.json"; import pkgJson from "../package.json"; + import { - DocsBodyVariants, - DocsCodeVariants, - DocsDetailVariants, - DocsHeadingBodyPairing, - DocsHeadingVariants, - DocsInternationalizedBodyVariants, - DocsInternationalizedCodeVariants, - DocsInternationalizedDetailVariants, - DocsInternationalizedHeadingBodyPairing, - DocsInternationalizedHeadingVariants, - Template + DocsBodyVariants, + DocsCodeVariants, + DocsDetailVariants, + DocsHeadingBodyPairing, + DocsHeadingVariants, + DocsInternationalizedBodyVariants, + DocsInternationalizedCodeVariants, + DocsInternationalizedDetailVariants, + DocsInternationalizedHeadingBodyPairing, + DocsInternationalizedHeadingVariants, + Template } from "./template.js"; import { TypographyGroup } from "./typography.test.js"; @@ -78,6 +80,17 @@ export default { }, parameters: { packageJson: pkgJson, + cssprops: { + ...data.modifiers.reduce((collection, item) => { + const key = item.replace(/^--/, ""); + collection[key] = { + category: "Modifiers", + control: key.includes("color") ? "color" : "text", + value: key.includes("color") ? "rgba(0, 0, 0, 0)" : " ", + }; + return collection; + }, {}) + }, }, }; @@ -170,7 +183,7 @@ BodySizes.parameters = { /** * When typography elements are paired, such as with heading and body below, clear content hierarchies are shown. - * + * * Note that the body component is not available in XXS, but the XXS heading can be paired with the XS body as seen here. */ export const HeadingBodyHierarchy = (args, context) => Sizes({ @@ -255,7 +268,7 @@ DetailVariants.parameters = { /** * Code is used for text that represents code. - * + * * Multi-line blocks of code may be wrapped with `
` tags to allow block formatting.
  */
 export const CodeVariants = DocsCodeVariants.bind({});
diff --git a/components/underlay/stories/underlay.stories.js b/components/underlay/stories/underlay.stories.js
index 756fe8d9fd..e07d22e06a 100644
--- a/components/underlay/stories/underlay.stories.js
+++ b/components/underlay/stories/underlay.stories.js
@@ -1,7 +1,9 @@
 import { Default as DialogStory } from "@spectrum-css/dialog/stories/dialog.stories.js";
 import { Template as Dialog } from "@spectrum-css/dialog/stories/template.js";
 import { isOpen } from "@spectrum-css/preview/types";
+import data from "../metadata/metadata.json";
 import pkgJson from "../package.json";
+
 import { Template } from "./template.js";
 
 /**
@@ -29,6 +31,17 @@ export default {
 		},
 		chromatic: { disableSnapshot: true },
 		packageJson: pkgJson,
+		cssprops: {
+			...data.modifiers.reduce((collection, item) => {
+				const key = item.replace(/^--/, "");
+				collection[key] = {
+					category: "Modifiers",
+					control: key.includes("color") ? "color" : "text",
+					value: key.includes("color") ? "rgba(0, 0, 0, 0)" : " ",
+				};
+				return collection;
+			}, {})
+		},
 	}
 };
 
diff --git a/components/well/stories/well.stories.js b/components/well/stories/well.stories.js
index 1e3633d718..6031a32ff4 100644
--- a/components/well/stories/well.stories.js
+++ b/components/well/stories/well.stories.js
@@ -1,7 +1,9 @@
 import { Template as Link } from "@spectrum-css/link/stories/template.js";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { Template as Typography } from "@spectrum-css/typography/stories/template.js";
+import data from "../metadata/metadata.json";
 import pkgJson from "../package.json";
+
 import { WellGroup } from "./well.test.js";
 
 /**
@@ -21,6 +23,17 @@ export default {
 			handles: [],
 		},
 		packageJson: pkgJson,
+		cssprops: {
+			...data.modifiers.reduce((collection, item) => {
+				const key = item.replace(/^--/, "");
+				collection[key] = {
+					category: "Modifiers",
+					control: key.includes("color") ? "color" : "text",
+					value: key.includes("color") ? "rgba(0, 0, 0, 0)" : " ",
+				};
+				return collection;
+			}, {})
+		},
 	},
 };
 
diff --git a/generator/templates/stories/{{ folderName }}.stories.js.hbs b/generator/templates/stories/{{ folderName }}.stories.js.hbs
index 552f294ce8..d5f2f9faff 100644
--- a/generator/templates/stories/{{ folderName }}.stories.js.hbs	
+++ b/generator/templates/stories/{{ folderName }}.stories.js.hbs	
@@ -3,6 +3,7 @@ import { Template } from "./template.js";
 import { isDisabled, isSelected, isHovered, isFocused } from "@spectrum-css/preview/types";
 import { {{ pascalCase name }}Group } from "./{{ pascalCase name }}.test.js";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
+import data from "../metadata/metadata.json";
 import pkgJson from "../package.json";
 
 /**
@@ -38,12 +39,21 @@ export default {
     actions: {
       handles: ["click .spectrum-{{ pascalCase name }}"],
     },
-    componentVersion: version,
     design: {
       type: "figma",
       url: "",
     },
-    componentVersion: pkgJson.version,
+		packageJson: pkgJson,
+		cssprops: {
+			...data.modifiers.reduce((collection, item) => {
+				const key = item.replace(/^--/, "");
+				collection[key] = {
+					control: key.includes("color") ? "color" : "text",
+					category: "Modifiers",
+				};
+				return collection;
+			}, {})
+		},
   }
 };
 
diff --git a/yarn.lock b/yarn.lock
index d60896feed..7b04771797 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2197,6 +2197,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@ljcl/storybook-addon-cssprops@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "@ljcl/storybook-addon-cssprops@npm:4.0.0"
+  checksum: 10c0/8b04b83da0d0ac955c66184c1f5a91eaff54cf21cf190537fd21f8402575ae87e68f6ff0928a8e34777ef9fd023c27fd7582af0ecd3e8717512a58650c51be29
+  languageName: node
+  linkType: hard
+
 "@ljharb/through@npm:^2.3.13":
   version: 2.3.13
   resolution: "@ljharb/through@npm:2.3.13"
@@ -3872,6 +3879,7 @@ __metadata:
     "@babel/core": "npm:^7.25.2"
     "@chromaui/addon-visual-tests": "npm:^1.0.0"
     "@etchteam/storybook-addon-status": "npm:^5.0.0"
+    "@ljcl/storybook-addon-cssprops": "npm:^4.0.0"
     "@spectrum-css/tokens": "workspace:^"
     "@spectrum-css/typography": "workspace:^"
     "@spectrum-css/ui-icons": "workspace:^"