From e5369997d0304ca5e6f5ca2331418ba87b942ea9 Mon Sep 17 00:00:00 2001 From: castastrophe Date: Tue, 2 Jan 2024 11:39:23 -0500 Subject: [PATCH] feat(storybook): add a shared decorator for focus-state and static color settings --- .storybook/assets/base.css | 16 +- .storybook/decorators/index.js | 71 +- .storybook/main.js | 9 +- .storybook/package.json | 35 +- .storybook/postcss.config.js | 62 +- .storybook/preview.js | 45 +- .storybook/project.json | 1 - .vscode/settings.json | 2 +- components/accordion/metadata/mods.md | 2 +- .../accordion/stories/accordion.stories.js | 141 +- components/accordion/stories/template.js | 31 +- components/actionbar/metadata/mods.md | 2 +- .../actionbar/stories/actionbar.stories.js | 14 +- components/actionbar/stories/template.js | 117 +- components/actionbutton/metadata/mods.md | 2 +- .../stories/actionbutton-quiet.stories.js | 4 +- .../actionbutton-staticblack.stories.js | 2 +- .../actionbutton-staticwhite.stories.js | 2 +- .../stories/actionbutton.stories.js | 9 +- components/actionbutton/stories/index.js | 62 +- components/actionbutton/stories/template.js | 2 +- components/actiongroup/metadata/mods.md | 2 +- .../stories/actiongroup.stories.js | 49 +- .../actionmenu/stories/actionmenu.stories.js | 64 +- components/alertbanner/metadata/mods.md | 2 +- .../stories/alertbanner.stories.js | 60 +- components/alertdialog/metadata/mods.md | 2 +- .../stories/alertdialog.stories.js | 34 +- components/alertdialog/stories/template.js | 7 +- components/asset/stories/asset.stories.js | 5 +- components/asset/stories/template.js | 1 - components/assetcard/metadata/mods.md | 2 +- .../assetcard/stories/assetcard.stories.js | 8 +- components/assetlist/metadata/mods.md | 2 +- .../assetlist/stories/assetlist.stories.js | 78 +- components/assetlist/stories/template.js | 3 +- components/avatar/metadata/mods.md | 2 +- components/avatar/stories/avatar.stories.js | 5 +- components/avatar/stories/template.js | 3 +- components/badge/metadata/mods.md | 2 +- components/badge/stories/badge.stories.js | 51 +- components/badge/stories/template.js | 11 +- components/breadcrumb/metadata/mods.md | 2 +- .../breadcrumb/stories/breadcrumb.stories.js | 50 +- components/breadcrumb/stories/template.js | 9 - components/button/metadata/mods.md | 2 +- components/button/stories/button.stories.js | 72 +- components/buttongroup/metadata/mods.md | 2 +- .../stories/buttongroup.stories.js | 68 +- components/buttongroup/stories/template.js | 51 +- components/calendar/metadata/mods.md | 2 +- .../calendar/stories/calendar.stories.js | 26 +- components/card/metadata/mods.md | 2 +- components/card/stories/card.stories.js | 25 +- components/checkbox/metadata/mods.md | 2 +- .../checkbox/stories/checkbox.stories.js | 76 +- components/clearbutton/metadata/mods.md | 2 +- .../stories/clearbutton.stories.js | 15 +- components/closebutton/metadata/mods.md | 2 +- .../stories/closebutton.stories.js | 6 +- components/coachindicator/metadata/mods.md | 2 +- .../stories/coachindicator.stories.js | 33 +- components/coachindicator/stories/template.js | 1 - components/coachmark/metadata/mods.md | 2 +- .../coachmark/stories/coachmark.stories.js | 5 +- components/coachmark/stories/template.js | 41 +- components/colorarea/metadata/mods.md | 2 +- .../colorarea/stories/colorarea.stories.js | 5 +- components/colorhandle/metadata/mods.md | 2 +- .../stories/colorhandle.stories.js | 5 +- components/colorloupe/metadata/mods.md | 2 +- .../colorloupe/stories/colorloupe.stories.js | 5 +- components/colorloupe/stories/template.js | 1 - components/colorslider/metadata/mods.md | 2 +- .../stories/colorslider.stories.js | 5 +- components/colorwheel/metadata/mods.md | 2 +- .../colorwheel/stories/colorwheel.stories.js | 5 +- components/combobox/metadata/mods.md | 2 +- .../combobox/stories/combobox.stories.js | 92 +- components/contextualhelp/metadata/mods.md | 2 +- .../stories/contextualhelp.stories.js | 9 +- components/contextualhelp/stories/template.js | 25 +- .../stories/cyclebutton.stories.js | 7 +- components/datepicker/metadata/mods.md | 2 +- .../datepicker/stories/datepicker.stories.js | 25 +- components/dial/metadata/mods.md | 2 +- components/dial/stories/dial.stories.js | 10 +- components/dial/stories/template.js | 1 - components/dialog/metadata/mods.md | 2 +- components/dialog/stories/dialog.stories.js | 29 +- components/divider/metadata/mods.md | 2 +- components/divider/stories/divider.stories.js | 5 +- components/divider/stories/template.js | 63 +- components/dropindicator/metadata/mods.md | 2 +- .../stories/dropindicator.stories.js | 7 +- components/dropindicator/stories/template.js | 10 - components/dropzone/metadata/mods.md | 2 +- .../dropzone/stories/dropzone.stories.js | 47 +- components/dropzone/stories/template.js | 5 +- .../fieldgroup/stories/fieldgroup.stories.js | 8 +- components/fieldgroup/stories/template.js | 9 - components/fieldlabel/metadata/mods.md | 2 +- .../fieldlabel/stories/fieldlabel.stories.js | 7 +- components/fieldlabel/stories/form.stories.js | 8 +- .../{form-template.js => form.template.js} | 0 components/fieldlabel/stories/template.js | 11 +- .../floatingactionbutton/metadata/mods.md | 2 +- .../stories/floatingactionbutton.stories.js | 7 +- components/helptext/metadata/mods.md | 2 +- .../helptext/stories/helptext.stories.js | 5 +- components/helptext/stories/template.js | 10 - components/icon/metadata/mods.md | 2 +- components/icon/stories/icon.stories.js | 39 +- components/icon/stories/template.js | 149 +- components/icon/stories/utilities.js | 51 - .../illustratedmessage/metadata/mods.md | 2 +- .../stories/illustratedmessage.stories.js | 61 +- .../stories/illustration.svg | 67 + .../illustratedmessage/stories/template.js | 103 +- components/infieldbutton/metadata/mods.md | 2 +- .../stories/infieldbutton.stories.js | 7 +- components/inlinealert/metadata/mods.md | 2 +- .../stories/inlinealert.stories.js | 55 +- components/inlinealert/stories/template.js | 56 +- components/link/metadata/mods.md | 2 +- components/link/stories/link.stories.js | 9 +- components/link/stories/template.js | 19 +- components/logicbutton/metadata/mods.md | 2 +- .../stories/logicbutton.stories.js | 7 +- components/menu/metadata/mods.md | 2 +- components/menu/stories/menu.stories.js | 62 +- components/miller/metadata/mods.md | 2 +- components/miller/stories/miller.stories.js | 5 +- components/modal/metadata/mods.md | 2 +- components/modal/stories/modal.stories.js | 5 +- components/modal/stories/template.js | 1 - .../opacitycheckerboard/metadata/mods.md | 2 +- .../stories/opacitycheckerboard.stories.js | 16 +- components/pagination/metadata/mods.md | 2 +- .../pagination/stories/pagination.stories.js | 5 +- components/pagination/stories/template.js | 36 +- components/picker/metadata/mods.md | 2 +- components/picker/stories/picker.stories.js | 48 +- components/picker/stories/template.js | 200 ++- components/pickerbutton/metadata/mods.md | 2 +- .../stories/pickerbutton.stories.js | 3 +- components/popover/metadata/mods.md | 2 +- components/popover/stories/popover.stories.js | 124 +- components/progressbar/metadata/mods.md | 2 +- .../progressbar/stories/meter.stories.js | 66 +- .../{metertemplate.js => meter.template.js} | 16 +- .../stories/progressbar.stories.js | 5 +- components/progressbar/stories/template.js | 11 +- components/progresscircle/metadata/mods.md | 2 +- .../stories/progresscircle.stories.js | 7 +- components/progresscircle/stories/template.js | 10 - components/quickaction/metadata/mods.md | 2 +- .../stories/quickaction.stories.js | 34 +- components/quickaction/stories/template.js | 1 - components/radio/metadata/mods.md | 2 +- components/radio/stories/radio.stories.js | 72 +- components/rating/metadata/mods.md | 2 +- components/rating/stories/rating.stories.js | 6 +- components/search/metadata/mods.md | 2 +- components/search/stories/search.stories.js | 5 +- .../stories/searchwithin.stories.js | 7 +- components/sidenav/metadata/mods.md | 2 +- components/sidenav/stories/sidenav.stories.js | 50 +- components/slider/metadata/mods.md | 2 +- components/slider/stories/slider.stories.js | 34 +- .../stories/splitbutton.stories.js | 5 +- components/splitview/metadata/mods.md | 2 +- .../splitview/stories/splitview.stories.js | 8 +- components/statuslight/metadata/mods.md | 2 +- .../stories/statuslight.stories.js | 37 +- components/statuslight/stories/template.js | 10 - components/steplist/metadata/mods.md | 2 +- .../steplist/stories/steplist.stories.js | 42 +- components/stepper/metadata/mods.md | 2 +- components/stepper/stories/stepper.stories.js | 265 ++-- components/swatch/metadata/mods.md | 2 +- components/swatch/stories/swatch.stories.js | 2 + components/swatch/stories/template.js | 12 - components/swatchgroup/metadata/mods.md | 2 +- .../stories/swatchgroup.stories.js | 3 +- components/switch/metadata/mods.md | 2 +- components/switch/stories/switch.stories.js | 6 +- components/table/metadata/mods.md | 2 +- components/table/stories/table.stories.js | 5 +- components/table/stories/template.js | 8 - components/tabs/metadata/mods.md | 2 +- .../tabs-horizontal-compact.stories.js | 12 +- .../tabs-horizontal-emphasized.stories.js | 13 +- .../stories/tabs-horizontal-quiet.stories.js | 13 +- .../tabs/stories/tabs-horizontal.stories.js | 16 +- .../stories/tabs-vertical-compact.stories.js | 15 +- .../tabs-vertical-emphasized.stories.js | 9 +- .../stories/tabs-vertical-quiet.stories.js | 9 +- .../tabs/stories/tabs-vertical.stories.js | 14 +- components/tag/metadata/mods.md | 2 +- components/tag/stories/tag.stories.js | 6 +- components/tag/stories/template.js | 1 - components/taggroup/metadata/mods.md | 2 +- .../taggroup/stories/taggroup.stories.js | 51 +- components/textfield/metadata/mods.md | 2 +- .../textfield/stories/textfield.stories.js | 6 +- components/thumbnail/metadata/mods.md | 2 +- .../thumbnail/stories/thumbnail.stories.js | 5 +- components/toast/metadata/mods.md | 2 +- components/toast/stories/toast.stories.js | 16 +- components/tooltip/metadata/mods.md | 2 +- components/tooltip/stories/tooltip.stories.js | 6 +- components/tray/metadata/mods.md | 2 +- components/tray/stories/template.js | 11 - components/tray/stories/tray.stories.js | 66 +- components/treeview/metadata/mods.md | 2 +- .../treeview/stories/treeview.stories.js | 124 +- components/typography/metadata/mods.md | 2 +- .../typography/stories/typography.stories.js | 50 +- components/underlay/metadata/mods.md | 2 +- .../underlay/stories/underlay.stories.js | 20 +- components/well/metadata/mods.md | 2 +- components/well/stories/well.stories.js | 22 +- package.json | 2 +- stylelint.config.js | 2 +- tasks/compare-compiled-output.js | 10 +- tasks/mod-extractor.js | 55 +- tasks/packageLint.js | 235 --- yarn.lock | 1259 +++++++++-------- 229 files changed, 2658 insertions(+), 3309 deletions(-) rename components/fieldlabel/stories/{form-template.js => form.template.js} (100%) delete mode 100644 components/icon/stories/utilities.js create mode 100644 components/illustratedmessage/stories/illustration.svg rename components/progressbar/stories/{metertemplate.js => meter.template.js} (87%) delete mode 100644 tasks/packageLint.js diff --git a/.storybook/assets/base.css b/.storybook/assets/base.css index 069c2d9e47b..cfcb969a986 100644 --- a/.storybook/assets/base.css +++ b/.storybook/assets/base.css @@ -31,7 +31,7 @@ nav .spectrum-Site-logo { .docblock-argstable-body td > span:has(select), .docblock-argstable-body td textarea { - max-width: 280px !important; + max-inline-size: 280px !important; } #storybook-explorer-tree { @@ -51,7 +51,7 @@ button.sidebar-item { font-weight: 400 !important; font-size: 14px !important; line-height: 1.4em !important; - height: 32px !important; + block-size: 32px !important; border-radius: 4px !important; padding-inline-start: 24px !important; padding-inline-end: 12px !important; @@ -122,7 +122,7 @@ select:focus, } [role="main"] > div > div:first-child .os-content > div > div > * { - margin-top: 0 !important; + margin-block-start: 0 !important; } [role="main"] > div > div:first-child .os-content > div > div > div > a { @@ -161,8 +161,8 @@ select:focus, button::after { content: "◢"; position: absolute; - bottom: -3px; - right: -1px; + inset-block-end: -3px; + inset-inline-end: -1px; display: inline-block; transform: scale(0.5); color: rgb(177, 177, 177); @@ -190,7 +190,7 @@ select:focus, > div > div :is(button, a:not(:has(button)), span) { - height: 32px; + block-size: 32px; } [role="main"] @@ -202,3 +202,7 @@ select:focus, :is(button:hover, a:hover:not(:has(button))) { background-color: rgb(230, 230, 230) !important; } + +.docs-story #root-inner { + margin: 10px; +} diff --git a/.storybook/decorators/index.js b/.storybook/decorators/index.js index 9a2ffade320..ed3eafb85ca 100644 --- a/.storybook/decorators/index.js +++ b/.storybook/decorators/index.js @@ -1,4 +1,5 @@ -import { useEffect, makeDecorator } from "@storybook/preview-api"; +import { makeDecorator, useEffect } from "@storybook/preview-api"; + import { html } from "lit"; export { withContextWrapper } from "./contextsWrapper.js"; @@ -12,7 +13,7 @@ export const withTextDirectionWrapper = makeDecorator({ parameterName: "textDecoration", wrapper: (StoryFn, context) => { const { globals, parameters } = context; - const defaultDirection = "ltr" + const defaultDirection = "ltr" const textDirection = parameters.textDirection || globals.textDirection || defaultDirection; // Shortkeys for the global types @@ -90,53 +91,35 @@ export const withLanguageWrapper = makeDecorator({ }, }); + /** * @type import('@storybook/csf').DecoratorFunction **/ -export const withSizingWrapper = makeDecorator({ - name: "withSizingWrapper", - parameterName: "context", +export const withPreviewStyles = makeDecorator({ + name: "withPreviewStyles", + parameterName: "customStyles", wrapper: (StoryFn, context) => { - const { argTypes, parameters } = context; - const sizes = argTypes?.size?.options || []; - const sizeVariants = - typeof parameters?.sizeVariants === "undefined" - ? true - : parameters.sizeVariants; - - /** To suppress the sizing wrapper, add `sizeVariants: false` to the parameters of a story */ - if (sizes.length === 0 || !sizeVariants) return StoryFn(context); - const printSize = (size) => { - if (size === "xs") return "Extra-small"; - if (size === "s") return "Small"; - if (size === "m") return "Medium"; - if (size === "l") return "Large"; - if (size === "xl") return "Extra-large"; - if (size === "xxl") return "Extra-extra-large"; - return size; + const { args } = context; + const staticColor = args.staticColor; + const customStyles = args.customStorybookStyles ?? {}; + const customStorybookStyles = { + /** @todo: do we really want flex as our default display type? does this make development harder b/c we have to consider how it impacts a component or is it helpful so we can stack components in a view easily? */ + display: "flex", + // automatically set the background color for static color settings + backgroundColor: staticColor === "white" ? "rgb(15, 121, 125)" : staticColor === "black" ? "rgb(181, 209, 211)" : undefined, + // Gap is only supported for flex and grid so we don't need to set it for other display types + gap: customStyles.gap ?? (!customStyles.display || customStyles.display && ["flex", "grid"].some(d => customStyles.display.endsWith(d))) ? "10px" : undefined, + padding: customStyles.padding ?? (customStyles.display && ["flex", "grid", "contents"].every(d => !customStyles.display.endsWith(d))) ? "10px 0" : undefined, + ...customStyles, }; - context.parameters.html.root = - '.spectrum-Examples-item[data-value="m"] #scoped-root'; - context.argTypes.size.table = { - ...context.argTypes.size.table, - disable: true, - }; + useEffect(() => { + const root = document.querySelector("#root-inner"); + Object.entries(customStorybookStyles).forEach(([key, value]) => { + if (value) root.style[key] = value; + }); + }, [customStorybookStyles]); - return html`
- ${sizes.map((size) => { - context.args.size = size; - return html`
-
- ${StoryFn(context)} -
-

- ${printSize(size)} -

-
`; - })} -
`; - }, + return StoryFn(context); + } }); diff --git a/.storybook/main.js b/.storybook/main.js index 97e42365255..7d0b8cc5512 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -135,6 +135,7 @@ module.exports = { postcssOptions: { config: resolve(__dirname, "postcss.config.js"), }, + sourceMap: true, }, }, ], @@ -154,7 +155,6 @@ module.exports = { }, framework: { name: "@storybook/web-components-webpack5", - options: {}, }, features: { /* Code splitting flag; load stories on-demand */ @@ -162,13 +162,6 @@ module.exports = { /* Builds stories.json to help with on-demand loading */ buildStoriesJson: true, }, - // refs: { - // 'swc': { - // title: 'Spectrum Web Components', - // url: 'https://opensource.adobe.com/spectrum-web-components/storybook/', - // expanded: false, - // }, - // }, docs: { autodocs: true, // see below for alternatives defaultName: "Docs", // set to change the name of generated docs entries diff --git a/.storybook/package.json b/.storybook/package.json index 8a71e77e2e8..befba8ac6be 100644 --- a/.storybook/package.json +++ b/.storybook/package.json @@ -7,7 +7,7 @@ "homepage": "https://opensource.adobe.com/spectrum-css/preview", "main": "main.js", "scripts": { - "build": "storybook build --config-dir . --output-dir ./storybook-static" + "build": "storybook build --config-dir ." }, "dependencies": { "@adobe/spectrum-css-workflow-icons": "^1.5.4", @@ -21,24 +21,25 @@ "@babel/core": "^7.22.1", "@chromaui/addon-visual-tests": "^0.0.124", "@etchteam/storybook-addon-status": "^4.2.4", - "@spectrum-css/component-builder": "^4.0.19", - "@storybook/addon-a11y": "^7.5.1", - "@storybook/addon-actions": "^7.5.1", + "@storybook/addon-a11y": "^7.6.7", + "@storybook/addon-actions": "^7.6.7", "@storybook/addon-console": "^1.2.3", - "@storybook/addon-docs": "^7.5.1", - "@storybook/addon-essentials": "^7.0.20", - "@storybook/addon-interactions": "^7.5.1", - "@storybook/api": "^7.5.1", - "@storybook/blocks": "^7.0.20", - "@storybook/client-api": "^7.5.1", - "@storybook/components": "^7.0.20", - "@storybook/core-events": "^7.0.20", + "@storybook/addon-docs": "^7.6.7", + "@storybook/addon-essentials": "^7.6.7", + "@storybook/addon-interactions": "^7.6.7", + "@storybook/addons": "^7.6.7", + "@storybook/api": "^7.6.7", + "@storybook/blocks": "^7.6.7", + "@storybook/client-api": "^7.6.7", + "@storybook/client-logger": "^7.6.7", + "@storybook/components": "^7.6.7", + "@storybook/core-events": "^7.6.7", "@storybook/jest": "^0.2.3", - "@storybook/manager-api": "^7.0.20", - "@storybook/preview-api": "^7.0.20", + "@storybook/manager-api": "^7.6.7", + "@storybook/preview-api": "^7.6.7", "@storybook/testing-library": "^0.2.2", - "@storybook/theming": "^7.0.20", - "@storybook/web-components-webpack5": "^7.5.1", + "@storybook/theming": "^7.6.7", + "@storybook/web-components-webpack5": "^7.6.7", "@whitespace/storybook-addon-html": "^5.1.6", "chromatic": "^7.0.0", "file-loader": "6.2.0", @@ -56,7 +57,7 @@ "react-dom": "^18.0.0", "react-syntax-highlighter": "^15.5.0", "source-map-loader": "^4.0.1", - "storybook": "^7.5.1", + "storybook": "^7.6.7", "storybook-addon-pseudo-states": "^2.1.0", "style-loader": "3.3.3", "webpack": "^5.83.1" diff --git a/.storybook/postcss.config.js b/.storybook/postcss.config.js index 66a7d63c640..7fd6fda9876 100644 --- a/.storybook/postcss.config.js +++ b/.storybook/postcss.config.js @@ -1,9 +1,4 @@ -const { resolve, basename } = require("path"); -const { existsSync } = require("fs"); -const warnCleaner = require("postcss-warn-cleaner"); - -const simpleBuilder = require("@spectrum-css/component-builder-simple/css/processors.js"); -const legacyBuilder = require("@spectrum-css/component-builder/css/processors.js"); +const { join, basename } = require("path"); /** * Determines the package name from a file path @@ -15,11 +10,16 @@ function getPackageFromPath(filePath) { } module.exports = (ctx) => { - let plugins = []; - const componentPath = resolve(__dirname, "../components"); - /** @todo put together a more robust fallback determination */ + const cwd = ctx.cwd ?? process.cwd(); + const plugins = [ + require("postcss-import")({ + root: cwd, + addModulesDirectories: [join(cwd, "node_modules"), join(__dirname, "node_modules")], + }) + ]; + + /** @todo put together a more robust fallback determination */ const folderName = getPackageFromPath(ctx.file) ?? "tokens"; - const pkgPath = resolve(componentPath, folderName, "package.json"); /** * For our token libraries, include a little extra parsing to allow duplicate @@ -33,8 +33,7 @@ module.exports = (ctx) => { .replace("global", "") : ""; - plugins = [ - require("postcss-import")(), + plugins.push( require("postcss-selector-replace")({ before: [":root"], after: [ @@ -43,8 +42,10 @@ module.exports = (ctx) => { }${!isExpress && !modifier ? ".spectrum" : ""}`, ], }), - ...(isExpress - ? [ + ); + + if (isExpress) { + plugins.push( require("postcss-prefix-selector")({ prefix: ".spectrum--express", transform(_prefix, selector, prefixedSelector) { @@ -53,36 +54,7 @@ module.exports = (ctx) => { return prefixedSelector.replace(" ", ""); }, }), - ] - : []), - ]; - } else if (existsSync(pkgPath)) { - /** - * If a path has a package.json, we can assume it's a component and - * we want to leverage the correct plugins for it. - */ - const { - peerDependencies = {}, - devDependencies = {}, - dependencies = {} - } = require(pkgPath); - - const deps = [...new Set([ - ...Object.keys(peerDependencies), - ...Object.keys(dependencies), - ...Object.keys(devDependencies), - ])]; - - if ( - deps.includes("@spectrum-css/vars") - ) { - plugins.push(...legacyBuilder.processors); - } else { - if (ctx.file.split("/").includes("themes")) { - plugins.push(...simpleBuilder.getProcessors({ noSelectors: false })); - } else { - plugins.push(...simpleBuilder.getProcessors()); - } + ); } } @@ -90,7 +62,7 @@ module.exports = (ctx) => { * For storybook, add a tool to suppress unnecessary warnings */ plugins.push( - warnCleaner({ + require("postcss-warn-cleaner")({ ignoreFiles: "**/*.css", }) ); diff --git a/.storybook/preview.js b/.storybook/preview.js index d7de377910c..436448f2a63 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -1,10 +1,9 @@ -import isChromatic from "chromatic/isChromatic"; - import { withActions } from "@storybook/addon-actions/decorator"; import DocumentationTemplate from './DocumentationTemplate.mdx'; import { withContextWrapper, withLanguageWrapper, + withPreviewStyles, withReducedMotionWrapper, withTextDirectionWrapper, } from "./decorators/index.js"; @@ -40,6 +39,10 @@ import "@spectrum-css/tokens"; import "./global.js"; +// Imports the full raw sets of icons +import "!!raw-loader!@adobe/spectrum-css-workflow-icons/dist/spectrum-icons.svg?raw"; +import "!!raw-loader!@spectrum-css/ui-icons/dist/spectrum-css-icons.svg?raw"; + // Rendered as controls; these properties are assigned // to the document root element // @todo: resolve errors on 'name' and 'title' in console @@ -159,6 +162,12 @@ export const argTypes = { table: { disable: true }, control: "object", }, + customStorybookStyles: { + name: "Custom styles specific to Storybook", + type: { name: "string", required: false }, + table: { disable: true }, + control: "object", + }, id: { name: "Element ID", type: { name: "string", required: false }, @@ -190,14 +199,12 @@ export const parameters = { panelPosition: "bottom", showToolbar: true, isFullscreen: false, - //👇 Defines a list of viewport widths for a single story to be captured in Chromatic. - chromatic: isChromatic() - ? { - // viewports: [320, 1200], - // forcedColors: 'active', - // prefersReducedMotion: 'reduce', - } - : {}, + chromatic: { + delay: 100, + // viewports: [320, 1200], + // forcedColors: 'active', + // prefersReducedMotion: 'reduce', + }, controls: { expanded: true, hideNoControlsWarning: true, @@ -220,7 +227,7 @@ export const parameters = { page: DocumentationTemplate, story: { inline: true, - iframeHeight: "200px", + height: "200px", }, source: { type: "dynamic", @@ -230,10 +237,20 @@ export const parameters = { status: { statuses: { migrated: { - background: "#f0f0f0", - color: "#444", + background: "rgb(0,122,77)", + color: "#fff", description: "Migrated to the latest tokens.", }, + legacy: { + background: "rgb(246,133,17)", + color: "#fff", + description: "Not yet migrated to the latest tokens.", + }, + deprecated: { + background: "rgb(211,21,16)", + color: "#fff", + description: "Should not be used and will not receive updates.", + }, }, }, }; @@ -244,7 +261,7 @@ export const decorators = [ withReducedMotionWrapper, withContextWrapper, withActions, - // ...[isChromatic() ? withSizingWrapper : false].filter(Boolean), + withPreviewStyles, ]; export default { diff --git a/.storybook/project.json b/.storybook/project.json index 1c46a77138f..c22ea306fd2 100644 --- a/.storybook/project.json +++ b/.storybook/project.json @@ -10,7 +10,6 @@ "implicitDependencies": [ "@spectrum-css/*", "!@spectrum-css/generator", - "!@spectrum-css/bundle-builder", "!@spectrum-css/component-builder", "!@spectrum-css/component-builder-simple" ], diff --git a/.vscode/settings.json b/.vscode/settings.json index 632a24480b7..494c76bd271 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -5,7 +5,7 @@ }, "[javascript]": { "editor.codeActionsOnSave": { - "source.organizeImports": true + "source.organizeImports": "explicit" }, "editor.colorDecorators": true, "editor.defaultFormatter": "dbaeumer.vscode-eslint" diff --git a/components/accordion/metadata/mods.md b/components/accordion/metadata/mods.md index 18ce230e5b1..412286413ea 100644 --- a/components/accordion/metadata/mods.md +++ b/components/accordion/metadata/mods.md @@ -1,4 +1,4 @@ -| Modifiable Custom Properties | +| Modifiable custom properties | | ----------------------------------------------------- | | `--mod-accordion-background-color-default` | | `--mod-accordion-background-color-down` | diff --git a/components/accordion/stories/accordion.stories.js b/components/accordion/stories/accordion.stories.js index cb1473ad5aa..dcc9c2a6643 100644 --- a/components/accordion/stories/accordion.stories.js +++ b/components/accordion/stories/accordion.stories.js @@ -1,7 +1,6 @@ -// Import the component markup template -import { Template } from "./template"; -import { html } from "lit"; import isChromatic from "chromatic/isChromatic"; +import { html } from "lit"; +import { Template } from "./template"; export default { title: "Components/Accordion", @@ -9,6 +8,8 @@ export default { "The accordion element contains a list of items that can be expanded or collapsed to reveal additional content or information associated with each item. There can be zero expanded items, exactly one expanded item, or more than one item expanded at a time, depending on the configuration. This list of items is defined by child accordion item elements.", component: "Accordion", argTypes: { + /* No theme styles for express available */ + express: { table: { disable: true } }, items: { table: { disable: true } }, size: { name: "Size", @@ -44,6 +45,43 @@ export default { rootClass: "spectrum-Accordion", size: "m", density: "regular", + items: new Map([ + [ + "Recent", + { + content: "Item 1", + isOpen: true, + isDisabled: false, + }, + ], + [ + "Architecture", + { + content: "Item 2", + isOpen: false, + isDisabled: true, + }, + ], + [ + "Nature", + { + content: "Item 3", + isOpen: false, + isDisabled: false, + }, + ], + [ + "Really Long Accordion Item that should wrap", + { + content: "Really long content that should wrap when component has a max or fixed width", + isOpen: true, + isDisabled: false, + }, + ], + ]), + customStorybookStyles: { + padding: "0" + }, }, parameters: { actions: { @@ -52,95 +90,20 @@ export default { status: { type: process.env.MIGRATED_PACKAGES.includes("accordion") ? "migrated" - : undefined, + : "legacy", }, }, }; -const AccordianGroup = ({ - customStyles = {}, - ...args -}) => { - return html` -
- ${Template({ - items: new Map([ - [ - "Recent", - { - content: "Item 1", - isOpen: true, - isDisabled: false, - }, - ], - [ - "Architecture", - { - content: "Item 2", - isOpen: false, - isDisabled: true, - }, - ], - [ - "Nature", - { - content: "Item 3", - isOpen: false, - isDisabled: false, - }, - ], - [ - "Really Long Accordion Item that should wrap", - { - content: "Really long content that should wrap when component has a max or fixed width", - isOpen: true, - isDisabled: false, - }, - ], - ]), - })} - ${isChromatic() ? - Template({ - customStyles: { "max-inline-size": "300px"}, - items: new Map([ - [ - "Recent", - { - content: "Item 1", - isOpen: true, - isDisabled: false, - }, - ], - [ - "Architecture", - { - content: "Item 2", - isOpen: false, - isDisabled: true, - }, - ], - [ - "Nature", - { - content: "Item 3", - isOpen: false, - isDisabled: false, - }, - ], - [ - "Really Long Accordion Item that should wrap", - { - content: "Really long content that should wrap when component has a max or fixed width", - isOpen: true, - isDisabled: false, - }, - ], - ]), - }) - : null } -
- `; -}; +const AccordionGroup = (args) => html` + ${Template(args)} + ${isChromatic() ? Template({ + ...args, + customStyles: { + ...args.customStyles ?? {}, + maxInlineSize: "300px" + }, + }) : "" }`; -export const Default = AccordianGroup.bind({}); +export const Default = AccordionGroup.bind({}); Default.args = {}; diff --git a/components/accordion/stories/template.js b/components/accordion/stories/template.js index 7fc5afb387b..676938d2e1b 100644 --- a/components/accordion/stories/template.js +++ b/components/accordion/stories/template.js @@ -1,8 +1,10 @@ import { html } from "lit"; import { classMap } from "lit/directives/class-map.js"; -import { styleMap } from "lit/directives/style-map.js"; -import { repeat } from "lit/directives/repeat.js"; import { ifDefined } from "lit/directives/if-defined.js"; +import { repeat } from "lit/directives/repeat.js"; +import { styleMap } from "lit/directives/style-map.js"; + +import { useArgs } from "@storybook/client-api"; import { Template as Icon } from "@spectrum-css/icon/stories/template.js"; @@ -20,6 +22,7 @@ export const AccordionItem = ({ disableAll = false, customStyles = {}, // customClasses = [], + onclick, ...globals }) => { return html` @@ -32,12 +35,7 @@ export const AccordionItem = ({ id=${ifDefined(id)} style=${ifDefined(styleMap(customStyles))} role="presentation" - @click=${(evt) => { - if (isDisabled || !evt || !evt.target) return; - const closest = evt.target.closest(`.${rootClass}`); - if (!closest) return; - closest.classList.toggle("is-open"); - }} + @click=${onclick} >

@@ -54,7 +52,7 @@ export const AccordionItem = ({ ${Icon({ - iconName: "ChevronRight", + uiIconName: !isOpen ? "ChevronRight" : "ChevronDown", size: iconSize, customClasses: [`${rootClass}Indicator`], ...globals, @@ -81,8 +79,11 @@ export const Template = ({ items, id, customClasses = [], + customStyles = {}, ...globals }) => { + const [_, updateArgs] = useArgs(); + if (!items || !items.size) return html``; return html` @@ -97,16 +98,26 @@ export const Template = ({ })}" id=${ifDefined(id)} role="region" + style=${ifDefined(styleMap(customStyles))} > ${repeat(Array.from(items.keys()), (heading, idx) => { const item = items.get(heading); return AccordionItem({ + ...globals, rootClass: `${rootClass}-item`, heading, idx, iconSize: `${size}`, ...item, - ...globals, + onclick: () => { + // Update the args + const newItems = new Map(items); + newItems.set(heading, { + ...item, + isOpen: !item.isOpen, + }); + updateArgs({ items: newItems }); + }, }); })} diff --git a/components/actionbar/metadata/mods.md b/components/actionbar/metadata/mods.md index eee556c11ae..c66fd46ead9 100644 --- a/components/actionbar/metadata/mods.md +++ b/components/actionbar/metadata/mods.md @@ -1,4 +1,4 @@ -| Modifiable Custom Properties | +| Modifiable custom properties | | ----------------------------------------------- | | `--mod-actionbar-corner-radius` | | `--mod-actionbar-emphasized-background-color` | diff --git a/components/actionbar/stories/actionbar.stories.js b/components/actionbar/stories/actionbar.stories.js index 2edd0cda045..3910b65e8b9 100644 --- a/components/actionbar/stories/actionbar.stories.js +++ b/components/actionbar/stories/actionbar.stories.js @@ -1,15 +1,16 @@ -// Import the component markup template import { Template } from "./template"; -import { default as Popover } from "@spectrum-css/popover/stories/popover.stories.js"; -import { default as CloseButton } from "@spectrum-css/closebutton/stories/closebutton.stories.js"; import { default as ActionButton } from "@spectrum-css/actionbutton/stories/actionbutton.stories.js"; +import { default as CloseButton } from "@spectrum-css/closebutton/stories/closebutton.stories.js"; +import { default as Popover } from "@spectrum-css/popover/stories/popover.stories.js"; export default { title: "Components/Action bar", description: "The Action bar component is a floating full width bar that appears upon selection", - component: "Actionbar", + component: "ActionBar", argTypes: { + /* No theme styles for express available */ + express: { table: { disable: true } }, isOpen: { name: "Open", type: { name: "boolean" }, @@ -63,6 +64,9 @@ export default { isSticky: false, isFixed: false, isFlexible: false, + customStorybookStyles: { + display: "block", + } }, parameters: { actions: { @@ -75,7 +79,7 @@ export default { status: { type: process.env.MIGRATED_PACKAGES.includes("actionbar") ? "migrated" - : undefined, + : "legacy", }, }, }; diff --git a/components/actionbar/stories/template.js b/components/actionbar/stories/template.js index 081ac60fda0..ea1eda15449 100644 --- a/components/actionbar/stories/template.js +++ b/components/actionbar/stories/template.js @@ -18,67 +18,56 @@ export const Template = ({ isFlexible = false, customClasses = [], ...globals -}) => { - const { express } = globals; - - try { - if (!express) import(/* webpackPrefetch: true */ "../themes/spectrum.css"); - else import(/* webpackPrefetch: true */ "../themes/express.css"); - } catch (e) { - console.warn(e); - } - - return html` -
({ ...a, [c]: true }), {}), - })} - > - ${Popover({ - ...globals, - customClasses: [`${rootClass}-popover`], - isOpen, - content: [ - CloseButton({ - ...globals, - label: "Clear selection", - staticColor: isEmphasized ? "white" : undefined, - }), - FieldLabel({ - ...globals, - size: "s", - label: "2 Selected", - }), - ActionGroup({ - ...globals, - size: "m", - areQuiet: true, - staticColors: isEmphasized ? "white" : undefined, - content: [ - { - iconName: "Edit", - label: "Edit", - }, - { - iconName: "Copy", - label: "Copy", - }, - { - iconName: "Delete", - label: "Delete", - }, - ], - }), - ], - })} -
- `; -}; +}) => html` +
({ ...a, [c]: true }), {}), + })} + > + ${Popover({ + ...globals, + customClasses: [`${rootClass}-popover`], + isOpen, + content: [ + CloseButton({ + ...globals, + label: "Clear selection", + staticColor: isEmphasized ? "white" : undefined, + }), + FieldLabel({ + ...globals, + size: "s", + label: "2 Selected", + }), + ActionGroup({ + ...globals, + size: "m", + areQuiet: true, + staticColors: isEmphasized ? "white" : undefined, + content: [ + { + iconName: "Edit", + label: "Edit", + }, + { + iconName: "Copy", + label: "Copy", + }, + { + iconName: "Delete", + label: "Delete", + }, + ], + }), + ], + })} +
+`; diff --git a/components/actionbutton/metadata/mods.md b/components/actionbutton/metadata/mods.md index 2d0ca509bf2..0c91d4059bc 100644 --- a/components/actionbutton/metadata/mods.md +++ b/components/actionbutton/metadata/mods.md @@ -1,4 +1,4 @@ -| Modifiable Custom Properties | +| Modifiable custom properties | | ----------------------------------------------------------------- | | `--mod-actionbutton-animation-duration` | | `--mod-actionbutton-background-color-default` | diff --git a/components/actionbutton/stories/actionbutton-quiet.stories.js b/components/actionbutton/stories/actionbutton-quiet.stories.js index 15a55671983..3a91366ec67 100644 --- a/components/actionbutton/stories/actionbutton-quiet.stories.js +++ b/components/actionbutton/stories/actionbutton-quiet.stories.js @@ -1,4 +1,4 @@ -import { argTypes, ActionButtons } from "./index"; +import { ActionButtons, argTypes } from "./index"; export default { title: "Components/Action button/Quiet", @@ -21,7 +21,7 @@ export default { status: { type: process.env.MIGRATED_PACKAGES.includes("actionbutton") ? "migrated" - : undefined, + : "legacy", }, }, }; diff --git a/components/actionbutton/stories/actionbutton-staticblack.stories.js b/components/actionbutton/stories/actionbutton-staticblack.stories.js index d047ed2bacc..4bffaf08bef 100644 --- a/components/actionbutton/stories/actionbutton-staticblack.stories.js +++ b/components/actionbutton/stories/actionbutton-staticblack.stories.js @@ -22,7 +22,7 @@ export default { status: { type: process.env.MIGRATED_PACKAGES.includes("actionbutton") ? "migrated" - : undefined, + : "legacy", }, }, }; diff --git a/components/actionbutton/stories/actionbutton-staticwhite.stories.js b/components/actionbutton/stories/actionbutton-staticwhite.stories.js index 0a05cb747e6..700910f2417 100644 --- a/components/actionbutton/stories/actionbutton-staticwhite.stories.js +++ b/components/actionbutton/stories/actionbutton-staticwhite.stories.js @@ -22,7 +22,7 @@ export default { status: { type: process.env.MIGRATED_PACKAGES.includes("actionbutton") ? "migrated" - : undefined, + : "legacy", }, }, }; diff --git a/components/actionbutton/stories/actionbutton.stories.js b/components/actionbutton/stories/actionbutton.stories.js index 65c48394201..2eef494765f 100644 --- a/components/actionbutton/stories/actionbutton.stories.js +++ b/components/actionbutton/stories/actionbutton.stories.js @@ -1,4 +1,4 @@ -import { argTypes, ActionButtons } from "./index"; +import { ActionButtons, argTypes } from "./index"; export default { title: "Components/Action button", @@ -21,7 +21,7 @@ export default { status: { type: process.env.MIGRATED_PACKAGES.includes("actionbutton") ? "migrated" - : undefined, + : "legacy", }, }, }; @@ -45,6 +45,11 @@ SelectedDisabled.args = { isDisabled: true }; +export const Express = ActionButtons.bind({}); +Express.args = { + express: true +}; + export const Emphasized = ActionButtons.bind({}); Emphasized.args = { isEmphasized: true diff --git a/components/actionbutton/stories/index.js b/components/actionbutton/stories/index.js index 7bb13a29493..3020663fc94 100644 --- a/components/actionbutton/stories/index.js +++ b/components/actionbutton/stories/index.js @@ -1,6 +1,4 @@ import { html } from "lit"; -import { ifDefined } from "lit/directives/if-defined.js"; -import { styleMap } from "lit/directives/style-map.js"; import { Template } from "./template"; @@ -97,43 +95,23 @@ export const argTypes = { }, }; -export const ActionButtons = ({ - staticColor, - ...args -}) => { - return html` -
- ${Template({ - ...args, - staticColor, - label: "More", - iconName: undefined, - })} - ${Template({ - ...args, - staticColor, - label: "More", - })} - ${Template({ - ...args, - staticColor, - })} - ${Template({ - ...args, - staticColor, - hasPopup: true, - })} - ${Template({ - ...args, - staticColor, - label: "More and this text should truncate", - customStyles: { "max-inline-size": "100px"}, - })} -
- `; -}; +export const ActionButtons = (args) => html` + ${Template({ + ...args, + label: "More", + iconName: undefined, + })} + ${Template({ + ...args, + label: "More", + })} + ${Template(args)} + ${Template({ + ...args, + hasPopup: true, + })} + ${Template({ + ...args, + label: "More and this text should truncate", + customStyles: { maxInlineSize: "100px" }, + })}`; diff --git a/components/actionbutton/stories/template.js b/components/actionbutton/stories/template.js index ed7d08c43b2..59b3e7da787 100644 --- a/components/actionbutton/stories/template.js +++ b/components/actionbutton/stories/template.js @@ -69,7 +69,7 @@ export const Template = ({ Icon({ ...globals, size, - iconName: "CornerTriangle100", + uiIconName: "CornerTriangle100", customClasses: [`${rootClass}-hold`], }) )} diff --git a/components/actiongroup/metadata/mods.md b/components/actiongroup/metadata/mods.md index 5a103defdb1..2fcc384c89f 100644 --- a/components/actiongroup/metadata/mods.md +++ b/components/actiongroup/metadata/mods.md @@ -1,4 +1,4 @@ -| Modifiable Custom Properties | +| Modifiable custom properties | | ---------------------------------------------- | | `--mod-actiongroup-border-radius` | | `--mod-actiongroup-border-radius-reset` | diff --git a/components/actiongroup/stories/actiongroup.stories.js b/components/actiongroup/stories/actiongroup.stories.js index d967fb38bf2..f7bfbb9f45b 100644 --- a/components/actiongroup/stories/actiongroup.stories.js +++ b/components/actiongroup/stories/actiongroup.stories.js @@ -1,4 +1,3 @@ -// Import the component markup template import { Template } from "./template"; import { default as ActionButton } from "@spectrum-css/actionbutton/stories/actionbutton.stories.js"; @@ -59,6 +58,21 @@ export default { vertical: false, compact: false, justified: false, + content: [ + { + iconName: "Edit", + label: "Edit", + }, + { + iconName: "Copy", + label: "Copy", + }, + { + iconName: "Delete", + label: "Delete", + isSelected: true, + }, + ], }, parameters: { actions: { @@ -67,60 +81,41 @@ export default { status: { type: process.env.MIGRATED_PACKAGES.includes("actiongroup") ? "migrated" - : undefined, + : "legacy", }, }, }; -const items = [ - { - iconName: "Edit", - label: "Edit", - }, - { - iconName: "Copy", - label: "Copy", - }, - { - iconName: "Delete", - label: "Delete", - isSelected: true, - }, -]; - export const Default = Template.bind({}); -Default.args = { - content: items -}; - +Default.args = {}; export const Compact = Template.bind({}); Compact.args = { compact: true, - content: items }; export const Vertical = Template.bind({}); Vertical.args = { vertical: true, - content: items }; export const VerticalCompact = Template.bind({}); VerticalCompact.args = { vertical: true, compact: true, - content: items }; export const Justified = Template.bind({}); Justified.args = { justified: true, - content: items }; export const Quiet = Template.bind({}); Quiet.args = { areQuiet: true, - content: items +}; + +export const Express = Template.bind({}); +Express.args = { + express: true }; diff --git a/components/actionmenu/stories/actionmenu.stories.js b/components/actionmenu/stories/actionmenu.stories.js index 1ef2b13cf23..c367c9900dc 100644 --- a/components/actionmenu/stories/actionmenu.stories.js +++ b/components/actionmenu/stories/actionmenu.stories.js @@ -1,19 +1,19 @@ -import { within, userEvent } from '@storybook/testing-library'; -import { html } from "lit"; +import { userEvent, within } from '@storybook/testing-library'; -// Import the component markup template import { Template } from "./template"; import { default as ActionButton } from "@spectrum-css/actionbutton/stories/actionbutton.stories.js"; +import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.js"; import { default as Menu } from "@spectrum-css/menu/stories/menu.stories.js"; import { default as Popover } from "@spectrum-css/popover/stories/popover.stories.js"; -import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.js"; export default { title: "Components/Action menu", description: "The Action menu component is an action button with a Popover.", - component: "Action menu", + component: "ActionMenu", argTypes: { + /* No theme styles for express available */ + express: { table: { disable: true } }, items: { table: { disable: true } }, isOpen: { name: "Open", @@ -39,7 +39,23 @@ export default { }, }, args: { - isOpen: true, + isOpen: false, + label: "More actions", + iconName: "More", + items: [ + { + label: "Action 1", + }, + { + label: "Action 2", + }, + { + label: "Action 3", + }, + { + label: "Action 4", + }, + ], }, parameters: { actions: { @@ -52,38 +68,16 @@ export default { status: { type: process.env.MIGRATED_PACKAGES.includes("actionmenu") ? "migrated" - : undefined, + : "legacy", }, chromatic: { delay: 2000 }, + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + await new Promise((resolve) => setTimeout(resolve, 100)); + await userEvent.click(canvas.getByRole('button', { id: 'trigger' })); + }, }, }; export const Default = Template.bind({}); -Default.play = async ({ canvasElement }) => { - const canvas = within(canvasElement); - - await new Promise((resolve) => setTimeout(resolve, 100)); - - await userEvent.click(canvas.getByRole('button', { id: 'trigger' })); -}; -// provide padding so that Chromatic can capture the full focus indicator -Default.decorators = [(Story) => html`
${Story().outerHTML || Story()}
`]; -Default.args = { - isOpen: false, - label: "More Actions", - iconName: "More", - items: [ - { - label: "Action 1", - }, - { - label: "Action 2", - }, - { - label: "Action 3", - }, - { - label: "Action 4", - }, - ], -}; +Default.args = {}; diff --git a/components/alertbanner/metadata/mods.md b/components/alertbanner/metadata/mods.md index 42743b5d456..0bd1ac33acb 100644 --- a/components/alertbanner/metadata/mods.md +++ b/components/alertbanner/metadata/mods.md @@ -1,4 +1,4 @@ -| Modifiable Custom Properties | +| Modifiable custom properties | | ---------------------------------------------- | | `--mod-alert-banner-bottom-text` | | `--mod-alert-banner-close-button-spacing` | diff --git a/components/alertbanner/stories/alertbanner.stories.js b/components/alertbanner/stories/alertbanner.stories.js index 71d6cf00e2e..e02eaef15d9 100644 --- a/components/alertbanner/stories/alertbanner.stories.js +++ b/components/alertbanner/stories/alertbanner.stories.js @@ -1,6 +1,8 @@ -import { Template } from "./template"; -import { html } from "lit"; import isChromatic from "chromatic/isChromatic"; +import { html } from "lit"; +import { when } from "lit/directives/when.js"; + +import { Template } from "./template"; export default { title: "Components/Alert banner", @@ -53,6 +55,9 @@ export default { variant: "neutral", hasActionButton: true, text: "Your trial has expired", + customStorybookStyles: { + flexDirection: "column", + } }, parameters: { actions: { @@ -61,38 +66,33 @@ export default { status: { type: process.env.MIGRATED_PACKAGES.includes("alertbanner") ? "migrated" - : undefined, + : "legacy", }, }, }; -const AlertBannerGroup = ({ - ...args - }) => { - return html` -
- ${Template({ - ...args, - })} - ${isChromatic() ? - Template({ - ...args, - hasActionButton: true, - variant: "info", - text: "Your trial will expire in 3 days. Once it expires your files will be saved and ready for you to open again once you have purcahsed the software." - }): null } - ${isChromatic() ? - Template({ - ...args, - hasActionButton: true, - variant: "negative", - text: "Connection interupted. Check your network to continue." - }) - : null } -
- `; -}; +const AlertBannerGroup = (args) => html` + ${Template(args)} + ${when(isChromatic(), () => html` + ${Template({ + ...args, + hasActionButton: true, + variant: "info", + text: "Your trial will expire in 3 days. Once it expires your files will be saved and ready for you to open again once you have purcahsed the software." + })} + ${Template({ + ...args, + hasActionButton: true, + variant: "negative", + text: "Connection interupted. Check your network to continue." + })} + `)} +`; export const Default = AlertBannerGroup.bind({}); -Default.args = { +Default.args = {}; + +export const Express = AlertBannerGroup.bind({}); +Express.args = { + express: true }; diff --git a/components/alertdialog/metadata/mods.md b/components/alertdialog/metadata/mods.md index 14400a302c1..e80747e43af 100644 --- a/components/alertdialog/metadata/mods.md +++ b/components/alertdialog/metadata/mods.md @@ -1,4 +1,4 @@ -| Modifiable Custom Properties | +| Modifiable custom properties | | ------------------------------------------- | | `--mod-alert-dialog-body-color` | | `--mod-alert-dialog-body-font-family` | diff --git a/components/alertdialog/stories/alertdialog.stories.js b/components/alertdialog/stories/alertdialog.stories.js index af26b301dea..b80881b6dd0 100644 --- a/components/alertdialog/stories/alertdialog.stories.js +++ b/components/alertdialog/stories/alertdialog.stories.js @@ -6,6 +6,9 @@ export default { "Alert dialogs display important information that users need to acknowledge. They appear over the interface and block further interactions until an action is selected.", component: "AlertDialog", argTypes: { + /* No theme styles for express available */ + express: { table: { disable: true } }, + buttons: { table: { disable: true } }, heading: { name: "Heading", type: { name: "string" }, @@ -38,6 +41,19 @@ export default { args: { rootClass: "spectrum-AlertDialog", isOpen: true, + variant: 'confirmation', + heading: "Enable Smart Filters?", + buttons: [{ + variant: "secondary", + treatment: "outline", + label: "Remind me later" + }, { + variant: "primary", + treatment: "fill", + label: "Enable", + variant: "accent" + }], + content: 'Smart filters are nondestructive and will preserve your original images.', }, parameters: { actions: { @@ -46,27 +62,13 @@ export default { status: { type: process.env.MIGRATED_PACKAGES.includes("alertdialog") ? "migrated" - : undefined, + : "legacy", }, }, }; export const Default = Template.bind({}); -Default.args = { - variant: 'confirmation', - heading: "Enable Smart Filters?", - buttons: [{ - variant: "secondary", - treatment: "outline", - label: "Remind me later" - }, { - variant: "primary", - treatment: "fill", - label: "Enable", - variant: "accent" - }], - content: 'Smart filters are nondestructive and will preserve your original images.', -}; +Default.args = {}; export const Information = Template.bind({}); Information.args = { diff --git a/components/alertdialog/stories/template.js b/components/alertdialog/stories/template.js index cd0236c971a..4f0a066b8e9 100644 --- a/components/alertdialog/stories/template.js +++ b/components/alertdialog/stories/template.js @@ -46,19 +46,20 @@ export const Template = ({

${heading}

${when(icon, () => Icon({ + ...globals, size: 'm', iconName: "Alert", customClasses: [`${rootClass}-icon`], - ...globals, - })) } + }))}
${Divider({ + ...globals, horizontal: true, customClasses: [`${rootClass}-divider`], - ...globals, })}
${content}
${ButtonGroup({ + ...globals, items: buttons, onclick: () => { updateArgs({ isOpen: !isOpen }); diff --git a/components/asset/stories/asset.stories.js b/components/asset/stories/asset.stories.js index 6187bdb79e8..12ba94581fc 100644 --- a/components/asset/stories/asset.stories.js +++ b/components/asset/stories/asset.stories.js @@ -1,4 +1,3 @@ -// Import the component markup template import { Template } from "./template"; export default { @@ -7,6 +6,8 @@ export default { "Use an asset element to visually represent a file, folder or image. File and folder representations will center themselves horizontally and vertically in the space provided to the element. Images will be contained to the element, growing to the element's full height while centering itself within the width provided.", component: "Asset", argTypes: { + /* No theme styles for express available */ + express: { table: { disable: true } }, reducedMotion: { table: { disable: true } }, preset: { name: "Preset asset types", @@ -35,7 +36,7 @@ export default { status: { type: process.env.MIGRATED_PACKAGES.includes("asset") ? "migrated" - : undefined, + : "legacy", }, }, }; diff --git a/components/asset/stories/template.js b/components/asset/stories/template.js index cb3b9e01742..0946e5bd540 100644 --- a/components/asset/stories/template.js +++ b/components/asset/stories/template.js @@ -3,7 +3,6 @@ import { classMap } from "lit/directives/class-map.js"; import { ifDefined } from "lit/directives/if-defined.js"; import "../index.css"; -import "../skin.css"; export const Template = ({ rootClass = "spectrum-Asset", diff --git a/components/assetcard/metadata/mods.md b/components/assetcard/metadata/mods.md index f1f7b7d24de..867a8fe680f 100644 --- a/components/assetcard/metadata/mods.md +++ b/components/assetcard/metadata/mods.md @@ -1,4 +1,4 @@ -| Modifiable Custom Properties | +| Modifiable custom properties | | ------------------------------------------------------------- | | `--mod-assectcard-border-color-selected-down` | | `--mod-assectcard-focus-indicator-color` | diff --git a/components/assetcard/stories/assetcard.stories.js b/components/assetcard/stories/assetcard.stories.js index 81e57830723..e5a6f44e1fb 100644 --- a/components/assetcard/stories/assetcard.stories.js +++ b/components/assetcard/stories/assetcard.stories.js @@ -1,4 +1,3 @@ -// Import the component markup template import { Template } from "./template"; import { default as Checkbox } from "@spectrum-css/checkbox/stories/checkbox.stories.js"; @@ -7,7 +6,7 @@ export default { title: "Components/Asset card", description: "The asset card component allows users to select and manage assets and their metadata in a grid.", - component: "Assetcard", + component: "AssetCard", argTypes: { image: { name: "Image", @@ -102,7 +101,7 @@ export default { status: { type: process.env.MIGRATED_PACKAGES.includes("assetcard") ? "migrated" - : undefined, + : "legacy", }, }, }; @@ -161,3 +160,6 @@ DropTarget.args = { isDropTarget: true, isSelected: true, }; + +export const Express = Template.bind({}); +Express.args = { express: true }; diff --git a/components/assetlist/metadata/mods.md b/components/assetlist/metadata/mods.md index c8ce663d3cf..2b5081cf59e 100644 --- a/components/assetlist/metadata/mods.md +++ b/components/assetlist/metadata/mods.md @@ -1,4 +1,4 @@ -| Modifiable Custom Properties | +| Modifiable custom properties | | ------------------------------------------------------ | | `--mod-assetlist-border-color-key-focus` | | `--mod-assetlist-child-indicator-animation` | diff --git a/components/assetlist/stories/assetlist.stories.js b/components/assetlist/stories/assetlist.stories.js index a9fb4f26049..30d5da0e563 100644 --- a/components/assetlist/stories/assetlist.stories.js +++ b/components/assetlist/stories/assetlist.stories.js @@ -1,4 +1,3 @@ -// Import the component markup template import { Template } from "./template"; import { default as Checkbox } from "@spectrum-css/checkbox/stories/checkbox.stories.js"; @@ -9,10 +8,47 @@ export default { "A selectable list of Assets, often used inside of Miller Columns.", component: "AssetList", argTypes: { + /* No theme styles for express available */ + express: { table: { disable: true } }, items: { table: { disable: true } }, }, args: { rootClass: "spectrum-AssetList", + items: [ + { + image: "example-ava.png", + label: "Shantanu.jpg", + isSelectable: true, + ariaLabelledBy: "assetitemlabel-1", + checkboxId: "checkbox-1" + }, + { + iconName: "Document", + label: "Resource Allocation Documentation should truncate", + isSelectable: true, + ariaLabelledby: "assetitemlabel-2", + checkboxId: "checkbox-2", + }, + { + iconName: "Folder", + label: "Frontend Projects", + isSelectable: true, + isBranch: true, + isSelected: true, + ariaLabelledby: "assetitemlabel-3", + checkboxId: "checkbox-3", + }, + { + iconName: "Folder", + label: "Downloads", + isSelectable: true, + isBranch: true, + isSelected: false, + isNavigated: true, + ariaLabelledby: "assetitemlabel-4", + checkboxId: "checkbox-4", + }, + ], }, parameters: { actions: { @@ -21,46 +57,10 @@ export default { status: { type: process.env.MIGRATED_PACKAGES.includes("assetlist") ? "migrated" - : undefined, + : "legacy", }, }, }; export const Default = Template.bind({}); -Default.args = { - items: [ - { - image: "example-ava.png", - label: "Shantanu.jpg", - isSelectable: true, - ariaLabelledBy: "assetitemlabel-1", - checkboxId: "checkbox-1" - }, - { - iconName: "Document", - label: "Resource Allocation Documentation should truncate", - isSelectable: true, - ariaLabelledby: "assetitemlabel-2", - checkboxId: "checkbox-2", - }, - { - iconName: "Folder", - label: "Frontend Projects", - isSelectable: true, - isBranch: true, - isSelected: true, - ariaLabelledby: "assetitemlabel-3", - checkboxId: "checkbox-3", - }, - { - iconName: "Folder", - label: "Downloads", - isSelectable: true, - isBranch: true, - isSelected: false, - isNavigated: true, - ariaLabelledby: "assetitemlabel-4", - checkboxId: "checkbox-4", - }, - ], -}; +Default.args = {}; diff --git a/components/assetlist/stories/template.js b/components/assetlist/stories/template.js index f71dce53d13..f9bc00ee8cd 100644 --- a/components/assetlist/stories/template.js +++ b/components/assetlist/stories/template.js @@ -1,7 +1,7 @@ import { html } from "lit"; import { classMap } from "lit/directives/class-map.js"; -import { when } from "lit/directives/when.js"; import { ifDefined } from "lit/directives/if-defined.js"; +import { when } from "lit/directives/when.js"; import { useArgs } from "@storybook/client-api"; @@ -24,7 +24,6 @@ export const AssetListItem = ({ onclick = () => {}, ...globals }) => { - return html`
  • { return html`
    { - return html` -
    - ${Template({ - ...args, - iconName: undefined, - })} - ${Template({ - ...args, - })} - ${Template({ - ...args, - label: undefined, - })} - ${Template({ - ...args, - label: "24 days left in trial", - customStyles: { "max-inline-size": "100px" }, - })} -
    - `; -}; +const BadgeGroup = (args) => html` + ${Template({ + ...args, + iconName: undefined, + })} + ${Template({ + ...args, + })} + ${Template({ + ...args, + label: undefined, + })} + ${Template({ + ...args, + label: "24 days left in trial", + customStyles: { "max-inline-size": "100px" }, + })} +`; export const Default = BadgeGroup.bind({}); -Default.args = { -}; +Default.args = {}; diff --git a/components/badge/stories/template.js b/components/badge/stories/template.js index 175fbfad021..e1b4937ff22 100644 --- a/components/badge/stories/template.js +++ b/components/badge/stories/template.js @@ -1,7 +1,7 @@ import { html } from "lit"; import { classMap } from "lit/directives/class-map.js"; -import { styleMap } from "lit/directives/style-map.js"; import { ifDefined } from "lit/directives/if-defined.js"; +import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import { Template as Icon } from "@spectrum-css/icon/stories/template.js"; @@ -20,15 +20,6 @@ export const Template = ({ id, ...globals }) => { - const { express } = globals; - - try { - if (!express) import(/* webpackPrefetch: true */ "../themes/spectrum.css"); - else import(/* webpackPrefetch: true */ "../themes/express.css"); - } catch (e) { - console.warn(e); - } - return html`
    { - const { express } = globals; - - try { - if (!express) import(/* webpackPrefetch: true */ "../themes/spectrum.css"); - else import(/* webpackPrefetch: true */ "../themes/express.css"); - } catch (e) { - console.warn(e); - } - return html`