From 400e282d7eed4a5fba6d6159bce0fb474f72f927 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 --- .env.example | 4 +- .storybook/README.md | 261 ++-- .storybook/assets/base.css | 21 +- .storybook/decorators/index.js | 147 +- ...ntextsWrapper.js => withContextWrapper.js} | 0 .storybook/decorators/withLanguageWrapper.js | 19 + .storybook/decorators/withPreviewStyles.js | 68 + .../decorators/withReducedMotionWrapper.js | 39 + .../decorators/withTextDirectionWrapper.js | 33 + .storybook/main.js | 56 +- .storybook/package.json | 41 +- .storybook/postcss.config.js | 2 + .storybook/preview.js | 50 +- .storybook/project.json | 1 - .vscode/settings.json | 2 +- components/accordion/metadata/mods.md | 2 +- .../accordion/stories/accordion.stories.js | 142 +- components/accordion/stories/template.js | 31 +- components/accordion/themes/express.css | 16 - components/accordion/themes/spectrum.css | 16 - components/actionbar/metadata/mods.md | 2 +- .../actionbar/stories/actionbar.stories.js | 14 +- components/actionbar/stories/template.js | 117 +- components/actionbar/themes/express.css | 15 - components/actionbar/themes/spectrum.css | 15 - components/actionbutton/index.css | 18 +- components/actionbutton/metadata/mods.md | 3 +- .../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 | 52 +- .../actionmenu/stories/actionmenu.stories.js | 67 +- components/actionmenu/themes/express.css | 12 - components/actionmenu/themes/spectrum.css | 12 - 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/alertdialog/themes/express.css | 13 - components/alertdialog/themes/spectrum.css | 13 - components/asset/index.css | 20 + components/asset/skin.css | 31 - 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/assetlist/themes/express.css | 15 - components/assetlist/themes/spectrum.css | 15 - components/avatar/metadata/mods.md | 2 +- components/avatar/stories/avatar.stories.js | 5 +- components/avatar/stories/template.js | 3 +- components/avatar/themes/express.css | 15 - components/avatar/themes/spectrum.css | 15 - components/badge/metadata/mods.md | 2 +- components/badge/stories/badge.stories.js | 57 +- components/badge/stories/template.js | 11 +- components/badge/themes/express.css | 15 - components/badge/themes/spectrum.css | 15 - components/breadcrumb/metadata/mods.md | 2 +- .../breadcrumb/stories/breadcrumb.stories.js | 54 +- components/breadcrumb/stories/template.js | 11 +- components/breadcrumb/themes/express.css | 16 - components/breadcrumb/themes/spectrum.css | 16 - components/button/index.css | 3 +- components/button/metadata/mods.md | 2 +- components/button/stories/button.stories.js | 75 +- components/button/stories/template.js | 35 +- components/buttongroup/metadata/mods.md | 2 +- .../stories/buttongroup.stories.js | 68 +- components/buttongroup/stories/template.js | 51 +- components/buttongroup/themes/express.css | 15 - components/buttongroup/themes/spectrum.css | 15 - components/calendar/metadata/mods.md | 2 +- .../calendar/stories/calendar.stories.js | 26 +- components/calendar/themes/express.css | 13 - components/calendar/themes/spectrum.css | 13 - components/card/metadata/mods.md | 2 +- components/card/stories/card.stories.js | 25 +- components/card/themes/express.css | 14 - components/card/themes/spectrum.css | 14 - 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/index.css | 2 +- 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/coachindicator/themes/express.css | 14 - components/coachindicator/themes/spectrum.css | 14 - components/coachmark/metadata/mods.md | 2 +- .../coachmark/stories/coachmark.stories.js | 5 +- components/coachmark/stories/template.js | 41 +- components/coachmark/themes/express.css | 14 - components/coachmark/themes/spectrum.css | 14 - components/colorarea/metadata/mods.md | 2 +- .../colorarea/stories/colorarea.stories.js | 5 +- components/colorarea/themes/express.css | 16 - components/colorarea/themes/spectrum.css | 16 - components/colorhandle/metadata/mods.md | 2 +- .../stories/colorhandle.stories.js | 5 +- components/colorhandle/themes/express.css | 16 - components/colorhandle/themes/spectrum.css | 16 - components/colorloupe/metadata/mods.md | 2 +- .../colorloupe/stories/colorloupe.stories.js | 5 +- components/colorloupe/stories/template.js | 1 - components/colorloupe/themes/express.css | 14 - components/colorloupe/themes/spectrum.css | 15 - components/colorslider/metadata/mods.md | 2 +- .../stories/colorslider.stories.js | 5 +- components/colorslider/themes/express.css | 14 - components/colorslider/themes/spectrum.css | 14 - components/colorwheel/metadata/mods.md | 2 +- .../colorwheel/stories/colorwheel.stories.js | 5 +- components/colorwheel/themes/express.css | 16 - components/colorwheel/themes/spectrum.css | 16 - components/combobox/metadata/mods.md | 2 +- .../combobox/stories/combobox.stories.js | 92 +- components/commons/basebutton.css | 133 -- components/contextualhelp/metadata/mods.md | 2 +- .../stories/contextualhelp.stories.js | 9 +- components/contextualhelp/stories/template.js | 25 +- components/contextualhelp/themes/express.css | 13 - components/contextualhelp/themes/spectrum.css | 13 - .../stories/cyclebutton.stories.js | 7 +- components/datepicker/metadata/mods.md | 2 +- .../datepicker/stories/datepicker.stories.js | 26 +- components/dial/metadata/mods.md | 2 +- components/dial/stories/dial.stories.js | 10 +- components/dial/stories/template.js | 1 - components/dial/themes/express.css | 16 - components/dial/themes/spectrum.css | 16 - components/dialog/index.css | 46 +- components/dialog/metadata/mods.md | 2 +- components/dialog/stories/dialog.stories.js | 29 +- components/dialog/stories/template.js | 12 +- components/dialog/themes/express.css | 13 - components/dialog/themes/spectrum.css | 13 - components/divider/metadata/mods.md | 2 +- components/divider/stories/divider.stories.js | 5 +- components/divider/stories/template.js | 63 +- components/divider/themes/express.css | 15 - components/divider/themes/spectrum.css | 15 - components/dropindicator/metadata/mods.md | 2 +- .../stories/dropindicator.stories.js | 7 +- components/dropindicator/stories/template.js | 10 - components/dropindicator/themes/express.css | 16 - components/dropindicator/themes/spectrum.css | 16 - components/dropzone/metadata/mods.md | 2 +- .../dropzone/stories/dropzone.stories.js | 47 +- components/dropzone/stories/template.js | 5 +- components/dropzone/themes/express.css | 13 - components/dropzone/themes/spectrum.css | 13 - .../fieldgroup/stories/fieldgroup.stories.js | 8 +- components/fieldgroup/stories/template.js | 9 - components/fieldgroup/themes/express.css | 15 - components/fieldgroup/themes/spectrum.css | 15 - components/fieldlabel/metadata/mods.md | 2 +- .../fieldlabel/stories/fieldlabel.stories.js | 7 +- .../fieldlabel/stories/form-template.js | 93 -- components/fieldlabel/stories/form.stories.js | 8 +- .../fieldlabel/stories/form.template.js | 81 + components/fieldlabel/stories/template.js | 11 +- components/fieldlabel/themes/express.css | 14 - components/fieldlabel/themes/spectrum.css | 14 - .../floatingactionbutton/metadata/mods.md | 2 +- .../stories/floatingactionbutton.stories.js | 7 +- .../floatingactionbutton/stories/template.js | 3 +- .../floatingactionbutton/themes/express.css | 13 - .../floatingactionbutton/themes/spectrum.css | 13 - components/helptext/metadata/mods.md | 2 +- .../helptext/stories/helptext.stories.js | 5 +- components/helptext/stories/template.js | 11 - components/helptext/themes/express.css | 13 - components/helptext/themes/spectrum.css | 13 - 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 | 30 + .../illustratedmessage/stories/template.js | 104 +- .../illustratedmessage/themes/express.css | 15 - .../illustratedmessage/themes/spectrum.css | 15 - 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/inlinealert/themes/express.css | 15 - components/inlinealert/themes/spectrum.css | 15 - components/link/metadata/mods.md | 2 +- components/link/stories/link.stories.js | 9 +- components/link/stories/template.js | 19 +- components/link/themes/express.css | 15 - components/link/themes/spectrum.css | 15 - components/logicbutton/index.css | 6 +- components/logicbutton/metadata/mods.md | 2 +- .../stories/logicbutton.stories.js | 7 +- components/logicbutton/themes/express.css | 14 - components/logicbutton/themes/spectrum.css | 14 - components/menu/metadata/mods.md | 2 +- components/menu/stories/menu.stories.js | 62 +- components/menu/stories/template.js | 250 ++- components/menu/themes/express.css | 14 - components/menu/themes/spectrum.css | 14 - components/miller/metadata/mods.md | 2 +- components/miller/stories/miller.stories.js | 5 +- components/miller/themes/express.css | 16 - components/miller/themes/spectrum.css | 16 - components/modal/index.css | 25 +- components/modal/metadata/mods.md | 2 +- components/modal/stories/modal.stories.js | 53 - components/modal/stories/template.js | 30 +- components/modal/themes/express.css | 13 - components/modal/themes/spectrum.css | 13 - .../opacitycheckerboard/metadata/mods.md | 2 +- .../stories/opacitycheckerboard.stories.js | 16 +- .../opacitycheckerboard/stories/template.js | 32 +- .../opacitycheckerboard/themes/express.css | 10 - .../opacitycheckerboard/themes/spectrum.css | 10 - components/page/themes/express.css | 13 - components/page/themes/spectrum.css | 13 - components/pagination/metadata/mods.md | 2 +- .../pagination/stories/pagination.stories.js | 5 +- components/pagination/stories/template.js | 36 +- components/pagination/themes/express.css | 13 - components/pagination/themes/spectrum.css | 13 - components/picker/index.css | 6 +- components/picker/metadata/mods.md | 2 +- components/picker/stories/picker.stories.js | 60 +- components/picker/stories/template.js | 164 +- components/pickerbutton/metadata/mods.md | 2 +- .../stories/pickerbutton.stories.js | 3 +- components/popover/index.css | 60 +- components/popover/metadata/mods.md | 2 +- components/popover/stories/popover.stories.js | 210 +-- components/popover/stories/template.js | 204 +-- components/progressbar/metadata/mods.md | 2 +- .../progressbar/stories/meter.stories.js | 99 +- .../progressbar/stories/meter.template.js | 58 + .../progressbar/stories/metertemplate.js | 59 - .../stories/progressbar.stories.js | 22 +- components/progressbar/stories/template.js | 105 +- components/progressbar/themes/express.css | 15 - components/progressbar/themes/spectrum.css | 15 - components/progresscircle/metadata/mods.md | 2 +- .../stories/progresscircle.stories.js | 7 +- components/progresscircle/stories/template.js | 10 - components/progresscircle/themes/express.css | 15 - components/progresscircle/themes/spectrum.css | 15 - components/quickaction/index.css | 2 +- 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 | 73 +- 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 | 53 +- components/sidenav/themes/express.css | 12 - components/sidenav/themes/spectrum.css | 12 - components/slider/metadata/mods.md | 2 +- components/slider/stories/slider.stories.js | 37 +- components/slider/themes/express.css | 1 - .../stories/splitbutton.stories.js | 5 +- components/splitview/metadata/mods.md | 2 +- .../splitview/stories/splitview.stories.js | 11 +- components/splitview/themes/express.css | 13 - components/splitview/themes/spectrum.css | 13 - components/statuslight/metadata/mods.md | 2 +- .../stories/statuslight.stories.js | 37 +- components/statuslight/stories/template.js | 10 - components/statuslight/themes/express.css | 15 - components/statuslight/themes/spectrum.css | 15 - components/steplist/metadata/mods.md | 2 +- .../steplist/stories/steplist.stories.js | 45 +- components/steplist/themes/express.css | 13 - components/steplist/themes/spectrum.css | 13 - 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/swatch/themes/express.css | 15 - components/swatch/themes/spectrum.css | 15 - components/swatchgroup/metadata/mods.md | 2 +- .../stories/swatchgroup.stories.js | 3 +- components/swatchgroup/themes/express.css | 15 - components/swatchgroup/themes/spectrum.css | 15 - 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/table/themes/express.css | 14 - components/table/themes/spectrum.css | 14 - components/tabs/metadata/mods.md | 2 +- .../tabs-horizontal-compact.stories.js | 16 +- .../tabs-horizontal-emphasized.stories.js | 17 +- .../stories/tabs-horizontal-quiet.stories.js | 17 +- .../tabs/stories/tabs-horizontal.stories.js | 19 +- .../stories/tabs-vertical-compact.stories.js | 16 +- .../tabs-vertical-emphasized.stories.js | 12 +- .../stories/tabs-vertical-quiet.stories.js | 10 +- .../tabs/stories/tabs-vertical.stories.js | 15 +- 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 | 59 +- components/taggroup/themes/express.css | 1 - components/taggroup/themes/spectrum.css | 1 - 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/thumbnail/themes/express.css | 16 - components/thumbnail/themes/spectrum.css | 16 - components/toast/metadata/mods.md | 2 +- components/toast/stories/template.js | 5 +- components/toast/stories/toast.stories.js | 65 +- components/tooltip/index.css | 86 +- components/tooltip/metadata/mods.md | 2 +- components/tooltip/stories/tooltip.stories.js | 29 +- components/tray/metadata/mods.md | 2 +- components/tray/stories/template.js | 11 - components/tray/stories/tray.stories.js | 72 +- components/tray/themes/express.css | 15 - components/tray/themes/spectrum.css | 16 - components/treeview/metadata/mods.md | 2 +- .../treeview/stories/treeview.stories.js | 127 +- components/treeview/themes/express.css | 13 - components/treeview/themes/spectrum.css | 12 - components/typography/metadata/mods.md | 2 +- components/typography/stories/template.js | 2 - .../typography/stories/typography.stories.js | 53 +- components/typography/themes/express.css | 14 - components/typography/themes/spectrum.css | 14 - components/underlay/metadata/mods.md | 2 +- components/underlay/stories/template.js | 18 +- .../underlay/stories/underlay.stories.js | 41 - components/underlay/themes/express.css | 12 - components/underlay/themes/spectrum.css | 13 - components/well/metadata/mods.md | 2 +- components/well/stories/well.stories.js | 25 +- components/well/themes/express.css | 12 - components/well/themes/spectrum.css | 12 - package.json | 2 +- stylelint.config.js | 2 +- tasks/compare-compiled-output.js | 10 +- tasks/mod-extractor.js | 55 +- tasks/packageLint.js | 235 --- tools/component-builder-simple/css/index.js | 20 +- .../css/processors.js | 2 +- tools/component-builder-simple/package.json | 2 +- tools/component-builder/css/lib/varUtils.js | 8 +- tools/component-builder/css/vars.js | 6 - tools/component-builder/package.json | 2 +- yarn.lock | 1388 +++++++++-------- 375 files changed, 3715 insertions(+), 6127 deletions(-) rename .storybook/decorators/{contextsWrapper.js => withContextWrapper.js} (100%) create mode 100644 .storybook/decorators/withLanguageWrapper.js create mode 100644 .storybook/decorators/withPreviewStyles.js create mode 100644 .storybook/decorators/withReducedMotionWrapper.js create mode 100644 .storybook/decorators/withTextDirectionWrapper.js delete mode 100644 components/accordion/themes/express.css delete mode 100644 components/accordion/themes/spectrum.css delete mode 100644 components/actionbar/themes/express.css delete mode 100644 components/actionbar/themes/spectrum.css delete mode 100644 components/actionmenu/themes/express.css delete mode 100644 components/actionmenu/themes/spectrum.css delete mode 100644 components/alertdialog/themes/express.css delete mode 100644 components/alertdialog/themes/spectrum.css delete mode 100644 components/asset/skin.css delete mode 100644 components/assetlist/themes/express.css delete mode 100644 components/assetlist/themes/spectrum.css delete mode 100644 components/avatar/themes/express.css delete mode 100644 components/avatar/themes/spectrum.css delete mode 100644 components/badge/themes/express.css delete mode 100644 components/badge/themes/spectrum.css delete mode 100644 components/breadcrumb/themes/express.css delete mode 100644 components/breadcrumb/themes/spectrum.css delete mode 100644 components/buttongroup/themes/express.css delete mode 100644 components/buttongroup/themes/spectrum.css delete mode 100644 components/calendar/themes/express.css delete mode 100644 components/calendar/themes/spectrum.css delete mode 100644 components/card/themes/express.css delete mode 100644 components/card/themes/spectrum.css delete mode 100644 components/coachindicator/themes/express.css delete mode 100644 components/coachindicator/themes/spectrum.css delete mode 100644 components/coachmark/themes/express.css delete mode 100644 components/coachmark/themes/spectrum.css delete mode 100644 components/colorarea/themes/express.css delete mode 100644 components/colorarea/themes/spectrum.css delete mode 100644 components/colorhandle/themes/express.css delete mode 100644 components/colorhandle/themes/spectrum.css delete mode 100644 components/colorloupe/themes/express.css delete mode 100644 components/colorloupe/themes/spectrum.css delete mode 100644 components/colorslider/themes/express.css delete mode 100644 components/colorslider/themes/spectrum.css delete mode 100644 components/colorwheel/themes/express.css delete mode 100644 components/colorwheel/themes/spectrum.css delete mode 100644 components/commons/basebutton.css delete mode 100644 components/contextualhelp/themes/express.css delete mode 100644 components/contextualhelp/themes/spectrum.css delete mode 100644 components/dial/themes/express.css delete mode 100644 components/dial/themes/spectrum.css delete mode 100644 components/dialog/themes/express.css delete mode 100644 components/dialog/themes/spectrum.css delete mode 100644 components/divider/themes/express.css delete mode 100644 components/divider/themes/spectrum.css delete mode 100644 components/dropindicator/themes/express.css delete mode 100644 components/dropindicator/themes/spectrum.css delete mode 100644 components/dropzone/themes/express.css delete mode 100644 components/dropzone/themes/spectrum.css delete mode 100644 components/fieldgroup/themes/express.css delete mode 100644 components/fieldgroup/themes/spectrum.css delete mode 100644 components/fieldlabel/stories/form-template.js create mode 100644 components/fieldlabel/stories/form.template.js delete mode 100644 components/fieldlabel/themes/express.css delete mode 100644 components/fieldlabel/themes/spectrum.css delete mode 100644 components/floatingactionbutton/themes/express.css delete mode 100644 components/floatingactionbutton/themes/spectrum.css delete mode 100644 components/helptext/themes/express.css delete mode 100644 components/helptext/themes/spectrum.css delete mode 100644 components/icon/stories/utilities.js create mode 100644 components/illustratedmessage/stories/illustration.svg delete mode 100644 components/illustratedmessage/themes/express.css delete mode 100644 components/illustratedmessage/themes/spectrum.css delete mode 100644 components/inlinealert/themes/express.css delete mode 100644 components/inlinealert/themes/spectrum.css delete mode 100644 components/link/themes/express.css delete mode 100644 components/link/themes/spectrum.css delete mode 100644 components/logicbutton/themes/express.css delete mode 100644 components/logicbutton/themes/spectrum.css delete mode 100644 components/menu/themes/express.css delete mode 100644 components/menu/themes/spectrum.css delete mode 100644 components/miller/themes/express.css delete mode 100644 components/miller/themes/spectrum.css delete mode 100644 components/modal/stories/modal.stories.js delete mode 100644 components/modal/themes/express.css delete mode 100644 components/modal/themes/spectrum.css delete mode 100644 components/opacitycheckerboard/themes/express.css delete mode 100644 components/opacitycheckerboard/themes/spectrum.css delete mode 100644 components/page/themes/express.css delete mode 100644 components/page/themes/spectrum.css delete mode 100644 components/pagination/themes/express.css delete mode 100644 components/pagination/themes/spectrum.css create mode 100644 components/progressbar/stories/meter.template.js delete mode 100644 components/progressbar/stories/metertemplate.js delete mode 100644 components/progressbar/themes/express.css delete mode 100644 components/progressbar/themes/spectrum.css delete mode 100644 components/progresscircle/themes/express.css delete mode 100644 components/progresscircle/themes/spectrum.css delete mode 100644 components/sidenav/themes/express.css delete mode 100644 components/sidenav/themes/spectrum.css delete mode 100644 components/splitview/themes/express.css delete mode 100644 components/splitview/themes/spectrum.css delete mode 100644 components/statuslight/themes/express.css delete mode 100644 components/statuslight/themes/spectrum.css delete mode 100644 components/steplist/themes/express.css delete mode 100644 components/steplist/themes/spectrum.css delete mode 100644 components/swatch/themes/express.css delete mode 100644 components/swatch/themes/spectrum.css delete mode 100644 components/swatchgroup/themes/express.css delete mode 100644 components/swatchgroup/themes/spectrum.css delete mode 100644 components/table/themes/express.css delete mode 100644 components/table/themes/spectrum.css delete mode 100644 components/taggroup/themes/express.css delete mode 100644 components/taggroup/themes/spectrum.css delete mode 100644 components/thumbnail/themes/express.css delete mode 100644 components/thumbnail/themes/spectrum.css delete mode 100644 components/tray/themes/express.css delete mode 100644 components/tray/themes/spectrum.css delete mode 100644 components/treeview/themes/express.css delete mode 100644 components/treeview/themes/spectrum.css delete mode 100644 components/typography/themes/express.css delete mode 100644 components/typography/themes/spectrum.css delete mode 100644 components/underlay/stories/underlay.stories.js delete mode 100644 components/underlay/themes/express.css delete mode 100644 components/underlay/themes/spectrum.css delete mode 100644 components/well/themes/express.css delete mode 100644 components/well/themes/spectrum.css delete mode 100644 tasks/packageLint.js diff --git a/.env.example b/.env.example index 6078e98f666..9ec88088577 100644 --- a/.env.example +++ b/.env.example @@ -1,6 +1,8 @@ CHROMATIC_PROJECT_TOKEN=1234abcd CHROMATIC_PROJECT_ID="Project:64762974a45b8bc5ca1705a2" -CHROMATIC_BUILD_SCRIPT_NAME="ci:storybook" +# Note: the build script here should be defined in .storybook/package.json +# this is used by the chromatic storybook addon to build the storybook on the fly +CHROMATIC_BUILD_SCRIPT_NAME="build" # NX settings NX_PREFER_TS_NODE=true diff --git a/.storybook/README.md b/.storybook/README.md index 58df51a9c3d..903be2ff4c6 100644 --- a/.storybook/README.md +++ b/.storybook/README.md @@ -120,7 +120,7 @@ argTypes: { _Note:_ In your story, be sure to include the `if: false` override otherwise the control will only show up if you have a `setName` arg and it is equal to `workflow`. -Want to load UI icons instead? Use the following variable import instead: +Want to load UI icons instead? Use the following variable import instead of the above: ```js argTypes: { @@ -205,6 +205,75 @@ label: { }, ``` +### args + +In a story, the args object contains all the default values for the component. These values will be used to render the component in the storybook preview. The values can be overridden by the user via the controls or by setting a custom args object in a specific story. + +The default story should _almost_ always have any empty args object because it is, by nature, using all the default settings. + +```js +export const Default = Template.bind({}); +Default.args = {}; +``` + +Subsequent stories can override the default args object by setting a new value for the desired property. i.e., + +```js +export const Express = Template.bind({}); +Express.args = { + express: true +}; +``` + +Try to focus stories on a single property or set of properties. This will make it easier for users to find the story they are looking for and will help in debugging issues. + +#### customStorybookStyles + +All stories are wrapped in a custom decorator that applies a few standard display properties to the preview. If you need to override these styles, you can do so by adding a `customStorybookStyles` property to your args object. This should be a string of CSS rules. i.e., + +```js +args: { + customStorybookStyles: { + flexDirection: "column", + alignItems: "flex-start", + }, +}, +``` + +The following properties are set on `#root-inner` by default: + +```css +display: flex; +gap: 10px; +``` + +If the display property is updated to something other than `*flex` or `*grid`, the gap property will be removed (`*flex` can equal `flex` or `inline-flex`). As long as the display property is not `contents`, the gap value will be assigned to `padding` instead. + +For example, if the display value is set to `block`, the following styles will be applied: + +```css +display: block; +padding: 10px; +``` + +Leveraging an argType in your component that matches `staticColor` with allowed values of `white` or `black` will automatically set the background color of the preview to an appropriate value (white will use `rgb(15, 121, 125)`; black will use `rgb(181, 209, 211)`). If you need to override this value, you can do so by setting the `customStorybookStyles` property to an object with a `backgroundColor` property. i.e., + +```js +args: { + customStorybookStyles: { + backgroundColor: "rgb(238, 14, 189)", + }, +}, +``` + +Any settings added by the story will override these values. You can unset a value completely using undefined, i.e.: + +```js +customStorybookStyles: { + display: undefined, +}, +``` + ## Templates The goal of the template files is to create a definition for this component to enforce and demonstrate the allowed semantics and required classNames and settings to achieve the desired output (based on the user's selected controls). @@ -240,6 +309,7 @@ All return values for Template functions should be outputting TemplateResults. S import { html } from "lit"; import { classMap } from "lit/directives/class-map.js"; import { ifDefined } from "lit/directives/if-defined.js"; +import { when } from "lit/directives/when.js"; import { Template as Icon } from "@spectrum-css/icon/stories/template.js"; import { Template as Avatar } from "@spectrum-css/avatar/stories/template.js"; @@ -247,7 +317,6 @@ import { Template as ClearButton } from "@spectrum-css/clearbutton/stories/templ import "../index.css"; -// More on component templates: https://storybook.js.org/docs/web-components/writing-stories/introduction#using-args export const Template = ({ rootClass = "spectrum-Tag", size = "m", @@ -272,37 +341,32 @@ export const Template = ({ console.warn(e); } - return html` -
({ ...a, [c]: true }), {}), - })} - id=${ifDefined(id)} - tabindex="0" + return html`
({ ...a, [c]: true }), {}), + })} + id=${ifDefined(id)} + tabindex="0" > - ${avatarUrl && !iconName - ? Avatar({ + ${when(avatarUrl && !iconName, () => Avatar({ ...globals, image: avatarUrl, size: "50", - }) - : ""} ${iconName - ? Icon({ + }))} + ${when(iconName, () => Icon({ ...globals, iconName, customClasses: [`${rootClass}s-itemIcon`], - }) - : ""} + }))}} ${label} - ${hasClearButton - ? ClearButton({ + ${when(hasClearButton, () => ClearButton({ ...globals, customClasses: [`${rootClass}-clearButton`], onclick: (evt) => { @@ -312,10 +376,8 @@ export const Template = ({ const wrapper = el.closest(rootClass); wrapper.parentNode.removeChild(wrapper); }, - }) - : ""} -
- `; + }))} +
`; }; ``` @@ -339,142 +401,5 @@ Runs will generate a JUnit XML file with build results (`chromatic-build-{buildN Running without publishing to Chromatic? Add the `--dry-run` flag. Need more information to debug a run? Try the `--diagnostics` flag (writes process context information to `chromatic-diagnostics.json`). -# Migration to Storybook 7.0(Draft) - -## Updates - ---- -`*` Added support for handler actions with ```withActions``` on each stories which have action handlers. - -Example: - -```js -import globalThis from 'global'; -+ import { withActions } from '@storybook/addon-actions/decorator'; - -export default { - component: globalThis.Components.Button, - args: { - label: 'Click Me!', - }, - parameters: { - chromatic: { disable: true }, - }, -}; -export const Basic = { - parameters: { - handles: [{ click: 'clicked', contextmenu: 'right clicked' }], - }, -+ decorators: [withActions], -}; -``` - -`*` Upgraded to ```Webpack 5``` for improved bundling and performance from ```webpack 4``` - -`*` @storybook addons dependencies are upgraded to v7 from v6 - -```js -"@storybook/addon-docs": "^7.0.12", -"@storybook/addon-essentials": "^7.0.12", -"@storybook/api": "^7.0.12", -"@storybook/client-api": "^7.0.12", -"@storybook/components": "^7.0.12", -"@storybook/core-events": "^7.0.12", -"@storybook/manager-api": "^7.0.12", -"@storybook/preview-api": "^7.0.12", -"@storybook/theming": "^7.0.12", -"@storybook/web-components-webpack5": "^7.0.12", -"@whitespace/storybook-addon-html": "^5.1.4", -``` - -`*` Added a new "Controls" addon for interactive component props editing. - -`*` Introduced a new "Docs-only" mode for isolating component documentation. - -`*` Improved the addon ecosystem with new and updated addons. - -

- -## Breaking Changes - ---- -`*` client-api is deperacted and preview-api is introduced - -```js - - import { useEffect } from '@storybook/client-api'; - + import { useEffect } from '@storybook/preview-api'; -``` - -`*` @storybook/addons is deperacted and replaced with @storybook/manager-api - -```js - - import { addons } from '@storybook/addons'; - + import { addons } from '@storybook/manager-api'; -``` - -`*` ```@storybook-webcomponents``` is deprecated. ```@storybook/web-components-webpack'``` is added with webpack 5 support. - -```js - - framework: '@storybook/web-components', - + framework: { - name: '@storybook/web-components-webpack5', - options: { - fastRefresh: true, - builder: { lazyCompilation: true }, - }, - }, - -``` - -`*` Docs is now added to every component on the sidebar with the below code in Storybook 7 - -```js - docs: { - autodocs: true, - defaultName: 'Docs', - }, -``` - -`*` preview.js is exported as default in Storybook 7 - -```js -- export const parameters = { -- actions: { argTypesRegex: '^on[A-Z].*' }, -- }; - -+ export default { -+ parameters: { -+ actions: { argTypesRegex: '^on[A-Z].*' }, -+ }, -+ }; -``` - -## Deprecations(Addons) - ---- - -`*` ```"@storybook/client-api"``` is deprecated - -`*` ```"@storybook/addons"``` is deprecated - -## Bug Fixes - ---- -`*` Fixed various issues related to performance, rendering, and compatibility. - -`*` Resolved problems with the Storybook UI, including layout glitches and navigation bugs. - -`*` Fixed bugs in calender storybook - -## Improvements - ---- -`*` Improved the overall performance and stability of the Storybook development environment. - -`*` Enhanced the documentation with updated examples and guides. - -`*` Optimized the build process for faster bundling and reduced file sizes. - -`*` Upgraded dependencies to their latest versions for improved compatibility and security. - ---- + + diff --git a/.storybook/assets/base.css b/.storybook/assets/base.css index 069c2d9e47b..a42ae36ecc2 100644 --- a/.storybook/assets/base.css +++ b/.storybook/assets/base.css @@ -1,3 +1,8 @@ +html, +body { + min-block-size: 100%; +} + body { margin: 0; font-size: 10px; @@ -31,7 +36,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 +56,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 +127,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 +166,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 +195,7 @@ select:focus, > div > div :is(button, a:not(:has(button)), span) { - height: 32px; + block-size: 32px; } [role="main"] @@ -202,3 +207,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..35c7bb363fd 100644 --- a/.storybook/decorators/index.js +++ b/.storybook/decorators/index.js @@ -1,142 +1,5 @@ -import { useEffect, makeDecorator } from "@storybook/preview-api"; -import { html } from "lit"; - -export { withContextWrapper } from "./contextsWrapper.js"; - -/** - * @type import('@storybook/csf').DecoratorFunction - * @description Rendered as controls; these properties are assigned to the document root element - **/ -export const withTextDirectionWrapper = makeDecorator({ - name: "withTextDirectionWrapper", - parameterName: "textDecoration", - wrapper: (StoryFn, context) => { - const { globals, parameters } = context; - const defaultDirection = "ltr" - const textDirection = parameters.textDirection || globals.textDirection || defaultDirection; - - // Shortkeys for the global types - document.addEventListener("keydown", (e) => { - switch (e.key || e.keyCode) { - case "r": - document.documentElement.dir = "rtl"; - break; - case "n": - document.documentElement.dir = defaultDirection; - break; - } - }); - - useEffect(() => { - if (textDirection) document.documentElement.dir = textDirection; - }, [textDirection]); - - return StoryFn(context); - }, -}); - -/** - * @type import('@storybook/csf').DecoratorFunction - **/ -export const withReducedMotionWrapper = makeDecorator({ - name: "withReducedMotionWrapper", - parameterName: "context", - wrapper: (StoryFn, context) => { - const { args } = context; - const reducedMotion = args.reducedMotion; - - return html` - ${reducedMotion - ? html` - - ` - : ""} - ${StoryFn(context)} - `; - }, -}); - -/** - * @type import('@storybook/csf').DecoratorFunction - **/ -export const withLanguageWrapper = makeDecorator({ - name: "withLanguageWrapper", - parameterName: "context", - wrapper: (StoryFn, context) => { - const { globals } = context; - const lang = globals.lang; - - useEffect(() => { - if (lang) document.documentElement.lang = lang; - }, [lang]); - - return StoryFn(context); - }, -}); - -/** - * @type import('@storybook/csf').DecoratorFunction - **/ -export const withSizingWrapper = makeDecorator({ - name: "withSizingWrapper", - parameterName: "context", - 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; - }; - - context.parameters.html.root = - '.spectrum-Examples-item[data-value="m"] #scoped-root'; - context.argTypes.size.table = { - ...context.argTypes.size.table, - disable: true, - }; - - return html`
- ${sizes.map((size) => { - context.args.size = size; - return html`
-
- ${StoryFn(context)} -
-

- ${printSize(size)} -

-
`; - })} -
`; - }, -}); +export { withContextWrapper } from "./withContextWrapper.js"; +export { withLanguageWrapper } from "./withLanguageWrapper.js"; +export { withPreviewStyles } from "./withPreviewStyles.js"; +export { withReducedMotionWrapper } from "./withReducedMotionWrapper.js"; +export { withTextDirectionWrapper } from "./withTextDirectionWrapper.js"; diff --git a/.storybook/decorators/contextsWrapper.js b/.storybook/decorators/withContextWrapper.js similarity index 100% rename from .storybook/decorators/contextsWrapper.js rename to .storybook/decorators/withContextWrapper.js diff --git a/.storybook/decorators/withLanguageWrapper.js b/.storybook/decorators/withLanguageWrapper.js new file mode 100644 index 00000000000..110716bcfea --- /dev/null +++ b/.storybook/decorators/withLanguageWrapper.js @@ -0,0 +1,19 @@ +import { makeDecorator, useEffect } from "@storybook/preview-api"; + +/** + * @type import('@storybook/csf').DecoratorFunction + **/ +export const withLanguageWrapper = makeDecorator({ + name: "withLanguageWrapper", + parameterName: "context", + wrapper: (StoryFn, context) => { + const { globals } = context; + const lang = globals.lang; + + useEffect(() => { + if (lang) document.documentElement.lang = lang; + }, [lang]); + + return StoryFn(context); + }, +}); diff --git a/.storybook/decorators/withPreviewStyles.js b/.storybook/decorators/withPreviewStyles.js new file mode 100644 index 00000000000..86544f37b05 --- /dev/null +++ b/.storybook/decorators/withPreviewStyles.js @@ -0,0 +1,68 @@ +import { makeDecorator, useEffect } from "@storybook/preview-api"; + +/** + * @type import('@storybook/csf').DecoratorFunction + **/ +export const withPreviewStyles = makeDecorator({ + name: "withPreviewStyles", + parameterName: "customStyles", + wrapper: (StoryFn, context) => { + const { args } = context; + const staticColor = args.staticColor; + let { + /** @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", + // Gap is only supported for flex and grid so we don't need to set it for other display types + gap = "10px", + padding = "10px", + position = "relative", + ...customStyles + } = args.customStorybookStyles ?? {}; + + const hasSetting = (setting) => Object.keys(args.customStorybookStyles ?? {}).includes(setting); + + if ( + hasSetting("display") && + ["flex", "grid"].every(d => !display.endsWith(d)) + ) { + gap = undefined; + if (display !== "contents") padding = "10px 0"; + } + + // Always prefer the customStorybookStyles over the default styles + ["display", "gap", "position", "padding"].forEach(setting => { + if (!hasSetting(setting)) return; + customStyles[setting] = args.customStorybookStyles[setting]; + }); + + + const customStorybookStyles = { + display, + gap, + padding, + position, + ...customStyles, + }; + + useEffect(() => { + const root = document.querySelector("#root-inner"); + + // Start with a clean slate + root.removeAttribute("style"); + + Object.entries(customStorybookStyles).forEach(([key, value]) => { + if (value) root.style[key] = value; + }); + + // automatically set the background color for static color settings + if (staticColor) { + document.body.style.backgroundColor = staticColor === "white" ? "rgb(15, 121, 125)" : staticColor === "black" ? "rgb(181, 209, 211)" : undefined; + } else { + document.body.style.backgroundColor = customStorybookStyles.backgroundColor ?? undefined; + } + + }, [customStorybookStyles, staticColor]); + + return StoryFn(context); + } +}); diff --git a/.storybook/decorators/withReducedMotionWrapper.js b/.storybook/decorators/withReducedMotionWrapper.js new file mode 100644 index 00000000000..f564e9e7b13 --- /dev/null +++ b/.storybook/decorators/withReducedMotionWrapper.js @@ -0,0 +1,39 @@ +import { makeDecorator } from "@storybook/preview-api"; + +import { html } from "lit"; +/** + * @type import('@storybook/csf').DecoratorFunction + **/ +export const withReducedMotionWrapper = makeDecorator({ + name: "withReducedMotionWrapper", + parameterName: "context", + wrapper: (StoryFn, context) => { + const { args } = context; + const reducedMotion = args.reducedMotion; + + return html` + ${reducedMotion + ? html` + + ` + : ""} + ${StoryFn(context)} + `; + }, +}); diff --git a/.storybook/decorators/withTextDirectionWrapper.js b/.storybook/decorators/withTextDirectionWrapper.js new file mode 100644 index 00000000000..fd4363a2e48 --- /dev/null +++ b/.storybook/decorators/withTextDirectionWrapper.js @@ -0,0 +1,33 @@ +import { makeDecorator, useEffect } from "@storybook/preview-api"; + +/** + * @type import('@storybook/csf').DecoratorFunction + * @description Rendered as controls; these properties are assigned to the document root element + **/ +export const withTextDirectionWrapper = makeDecorator({ + name: "withTextDirectionWrapper", + parameterName: "textDecoration", + wrapper: (StoryFn, context) => { + const { globals, parameters } = context; + const defaultDirection = "ltr" + const textDirection = parameters.textDirection || globals.textDirection || defaultDirection; + + // Shortkeys for the global types + document.addEventListener("keydown", (e) => { + switch (e.key || e.keyCode) { + case "r": + document.documentElement.dir = "rtl"; + break; + case "n": + document.documentElement.dir = defaultDirection; + break; + } + }); + + useEffect(() => { + if (textDirection) document.documentElement.dir = textDirection; + }, [textDirection]); + + return StoryFn(context); + }, +}); diff --git a/.storybook/main.js b/.storybook/main.js index 97e42365255..9eef9ae0484 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -1,6 +1,6 @@ -const { resolve } = require("path"); -const { readdirSync } = require("fs"); -const componentsPath = resolve(__dirname, "../components"); +const { join } = require("path"); +const { existsSync, readdirSync } = require("fs"); +const componentsPath = join(__dirname, "../components"); const componentPkgs = readdirSync(componentsPath, { withFileTypes: true, }) @@ -28,13 +28,16 @@ module.exports = { }, // https://github.com/storybookjs/storybook/tree/next/code/addons/a11y "@storybook/addon-a11y", + // https://github.com/storybookjs/storybook/tree/next/code/addons/actions + "@storybook/addon-actions", + // https://github.com/storybookjs/storybook/tree/next/code/addons/interactions + "@storybook/addon-interactions", // https://www.npmjs.com/package/@whitespace/storybook-addon-html "@whitespace/storybook-addon-html", // https://storybook.js.org/addons/@etchteam/storybook-addon-status "@etchteam/storybook-addon-status", + // https://storybook.js.org/addons/storybook-addon-pseudo-states "storybook-addon-pseudo-states", - // https://github.com/storybookjs/storybook/tree/next/code/addons/interactions - "@storybook/addon-interactions", // https://www.chromatic.com/docs/visual-testing-addon/ "@chromaui/addon-visual-tests", ], @@ -43,14 +46,30 @@ module.exports = { }, env: { MIGRATED_PACKAGES: componentPkgs.filter((dir) => { - const pkg = require(resolve(componentsPath, dir, "package.json")); + if (!existsSync(join(componentsPath, dir, "package.json"))) { + return false; + } + + const { + peerDependencies = {}, + devDependencies = {}, + dependencies = {} + } = require(join(componentsPath, dir, "package.json")); + + const allDeps = [...new Set([ + ...Object.keys(dependencies), + ...Object.keys(devDependencies), + ...Object.keys(peerDependencies), + ])]; + if ( - pkg.devDependencies && - pkg.devDependencies["@spectrum-css/component-builder-simple"] + allDeps.length > 0 && + allDeps.includes("@spectrum-css/vars") ) { - return true; + return false; } - return false; + + return true; }), }, webpackFinal: function (config) { @@ -74,13 +93,13 @@ module.exports = { ...(config.resolve ? config.resolve : {}), modules: [ ...(config.resolve ? config.resolve.modules : []), - resolve(__dirname, "../node_modules"), + join(__dirname, "../node_modules"), ], alias: { ...(config.resolve ? config.resolve.alias : {}), ...componentPkgs.reduce((pkgs, dir) => { - const pkg = require(resolve(componentsPath, dir, "package.json")); - pkgs[pkg.name] = resolve(componentsPath, dir); + const pkg = require(join(componentsPath, dir, "package.json")); + pkgs[pkg.name] = join(componentsPath, dir); return pkgs; }, {}), }, @@ -133,8 +152,9 @@ module.exports = { options: { implementation: require("postcss"), postcssOptions: { - config: resolve(__dirname, "postcss.config.js"), + config: join(__dirname, "postcss.config.js"), }, + sourceMap: true, }, }, ], @@ -154,7 +174,6 @@ module.exports = { }, framework: { name: "@storybook/web-components-webpack5", - options: {}, }, features: { /* Code splitting flag; load stories on-demand */ @@ -162,13 +181,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..0ba21df19d6 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", @@ -18,29 +18,28 @@ "@spectrum-css/vars": "^9.0.8" }, "devDependencies": { - "@babel/core": "^7.22.1", + "@babel/core": "^7.23.7", "@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.5", "@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/jest": "^0.2.3", - "@storybook/manager-api": "^7.0.20", - "@storybook/preview-api": "^7.0.20", + "@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-logger": "^7.6.7", + "@storybook/components": "^7.6.7", + "@storybook/core-events": "^7.6.7", + "@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/types": "^7.6.7", + "@storybook/web-components-webpack5": "^7.6.7", "@whitespace/storybook-addon-html": "^5.1.6", - "chromatic": "^7.0.0", + "chromatic": "^10.2.0", "file-loader": "6.2.0", "lit": "^2.8.0", "lodash-es": "^4.17.21", @@ -56,8 +55,8 @@ "react-dom": "^18.0.0", "react-syntax-highlighter": "^15.5.0", "source-map-loader": "^4.0.1", - "storybook": "^7.5.1", - "storybook-addon-pseudo-states": "^2.1.0", + "storybook": "^7.6.7", + "storybook-addon-pseudo-states": "^2.1.2", "style-loader": "3.3.3", "webpack": "^5.83.1" } diff --git a/.storybook/postcss.config.js b/.storybook/postcss.config.js index 66a7d63c640..4abf0d5c6b4 100644 --- a/.storybook/postcss.config.js +++ b/.storybook/postcss.config.js @@ -95,5 +95,7 @@ module.exports = (ctx) => { }) ); + console.log(plugins); + return { plugins }; }; diff --git a/.storybook/preview.js b/.storybook/preview.js index d7de377910c..7bbbaa7e44f 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -1,16 +1,16 @@ -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"; // https://github.com/storybookjs/storybook-addon-console -import "@storybook/addon-console"; import { setConsoleOptions } from "@storybook/addon-console"; const panelExclude = setConsoleOptions({}).panelExclude || []; @@ -40,6 +40,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 +163,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 +200,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 +228,7 @@ export const parameters = { page: DocumentationTemplate, story: { inline: true, - iframeHeight: "200px", + height: "200px", }, source: { type: "dynamic", @@ -230,21 +238,31 @@ 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.", + }, }, }, }; export const decorators = [ + withActions, withTextDirectionWrapper, withLanguageWrapper, 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..8b1eec8d04c 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,44 @@ 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: undefined, + gap: undefined, + }, }, parameters: { actions: { @@ -52,95 +91,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/accordion/themes/express.css b/components/accordion/themes/express.css deleted file mode 100644 index 1140b43629c..00000000000 --- a/components/accordion/themes/express.css +++ /dev/null @@ -1,16 +0,0 @@ -/* -Copyright 2023 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -@container (--system: express) { - .spectrum-Accordion { - } -} diff --git a/components/accordion/themes/spectrum.css b/components/accordion/themes/spectrum.css deleted file mode 100644 index 5f16da776e0..00000000000 --- a/components/accordion/themes/spectrum.css +++ /dev/null @@ -1,16 +0,0 @@ -/* -Copyright 2023 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -@container (--system: spectrum) { - .spectrum-Accordion { - } -} 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/actionbar/themes/express.css b/components/actionbar/themes/express.css deleted file mode 100644 index 0d46a651874..00000000000 --- a/components/actionbar/themes/express.css +++ /dev/null @@ -1,15 +0,0 @@ -/*! -Copyright 2023 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -@container (--system: express) { - -} diff --git a/components/actionbar/themes/spectrum.css b/components/actionbar/themes/spectrum.css deleted file mode 100644 index 17611eaa41f..00000000000 --- a/components/actionbar/themes/spectrum.css +++ /dev/null @@ -1,15 +0,0 @@ -/*! -Copyright 2023 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -@container (--system: spectrum) { - -} diff --git a/components/actionbutton/index.css b/components/actionbutton/index.css index 86e5b280246..37bd575e628 100644 --- a/components/actionbutton/index.css +++ b/components/actionbutton/index.css @@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -@import "../commons/basebutton-coretokens.css"; +@import "@spectrum-css/commons/basebutton-coretokens.css"; .spectrum-ActionButton { --spectrum-actionbutton-animation-duration: var(--spectrum-animation-duration-100); @@ -26,13 +26,13 @@ governing permissions and limitations under the License. --spectrum-actionbutton-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); --spectrum-actionbutton-focus-indicator-color: var(--spectrum-focus-indicator-color); --spectrum-actionbutton-focus-indicator-border-radius: calc(var(--spectrum-actionbutton-border-radius) + var(--spectrum-actionbutton-focus-indicator-gap)); - + &.is-selected { --mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-default-selected, var(--spectrum-neutral-background-color-selected-default)); --mod-actionbutton-background-color-hover: var(--mod-actionbutton-background-color-hover-selected, var(--spectrum-neutral-background-color-selected-hover)); --mod-actionbutton-background-color-down: var(--mod-actionbutton-background-color-down-selected, var(--spectrum-neutral-background-color-selected-down)); --mod-actionbutton-background-color-focus: var(--mod-actionbutton-background-color-focus-selected, var(--spectrum-neutral-background-color-selected-key-focus)); - + --mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-default-selected, var(--spectrum-gray-50)); --mod-actionbutton-content-color-hover: var(--mod-actionbutton-content-color-hover-selected, var(--spectrum-gray-50)); --mod-actionbutton-content-color-down: var(--mod-actionbutton-content-color-down-selected, var(--spectrum-gray-50)); @@ -43,7 +43,7 @@ governing permissions and limitations under the License. --mod-actionbutton-background-color-hover: var(--mod-actionbutton-background-color-hover-selected-emphasized, var(--spectrum-accent-background-color-hover)); --mod-actionbutton-background-color-down: var(--mod-actionbutton-background-color-down-selected-emphasized, var(--spectrum-accent-background-color-down)); --mod-actionbutton-background-color-focus: var(--mod-actionbutton-background-color-focus-selected-emphasized, var(--spectrum-accent-background-color-key-focus)); - + --mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-default-selected-emphasized, var(--spectrum-white)); --mod-actionbutton-content-color-hover: var(--mod-actionbutton-content-color-hover-selected-emphasized, var(--spectrum-white)); --mod-actionbutton-content-color-down: var(--mod-actionbutton-content-color-down-selected-emphasized, var(--spectrum-white)); @@ -159,7 +159,6 @@ governing permissions and limitations under the License. .spectrum-ActionButton { @inherit: %spectrum-BaseButton; - position: relative; min-inline-size: var(--mod-actionbutton-min-width, var(--spectrum-actionbutton-min-width)); block-size: var(--mod-actionbutton-height, var(--spectrum-actionbutton-height)); @@ -258,20 +257,19 @@ a.spectrum-ActionButton { /* special cases for focus-ring */ .spectrum-ActionButton { + @inherit: %spectrum-ButtonWithFocusRing; transition: border-color var(--mod-actionbutton-animation-duration, var(--spectrum-actionbutton-animation-duration)) ease-in-out; &::after { - position: absolute; - inset: 0; - margin: calc((var(--mod-actionbutton-focus-indicator-gap, var(--spectrum-actionbutton-focus-indicator-gap)) + var(--mod-actionbutton-border-width, var(--spectrum-actionbutton-border-width))) * -1); border-radius: var(--mod-actionbutton-focus-indicator-border-radius, var(--spectrum-actionbutton-focus-indicator-border-radius)); - transition: box-shadow var(--mod-actionbutton-animation-duration, var(--spectrum-actionbutton-animation-duration)) ease-in-out; + transition: opacity var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out, + margin var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out, + box-shadow var(--mod-actionbutton-animation-duration, var(--spectrum-actionbutton-animation-duration)) ease-in-out; pointer-events: none; - content: ''; } &:focus-visible { diff --git a/components/actionbutton/metadata/mods.md b/components/actionbutton/metadata/mods.md index 2d0ca509bf2..974f9f27c1b 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` | @@ -50,5 +50,6 @@ | `--mod-actionbutton-static-content-color` | | `--mod-actionbutton-text-to-visual` | | `--mod-animation-duration-100` | +| `--mod-focus-indicator-gap` | | `--mod-line-height-100` | | `--mod-sans-font-family-stack` | 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..f1134c6e1b7 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: "CornerTriangle", 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..6ba55c669c2 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,44 @@ 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 + customStorybookStyles: { + display: "block" + } }; 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..70f375d98f9 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,26 @@ 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", + }, + ], + customStorybookStyles: { + display: "block" + } }, parameters: { actions: { @@ -52,38 +71,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/actionmenu/themes/express.css b/components/actionmenu/themes/express.css deleted file mode 100644 index 78921ae6a63..00000000000 --- a/components/actionmenu/themes/express.css +++ /dev/null @@ -1,12 +0,0 @@ -/*! -Copyright 2023 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -@container (--system: express) {} diff --git a/components/actionmenu/themes/spectrum.css b/components/actionmenu/themes/spectrum.css deleted file mode 100644 index 88cfca9b111..00000000000 --- a/components/actionmenu/themes/spectrum.css +++ /dev/null @@ -1,12 +0,0 @@ -/*! -Copyright 2023 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -@container (--system: spectrum) {} 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/alertdialog/themes/express.css b/components/alertdialog/themes/express.css deleted file mode 100644 index 2899a53a733..00000000000 --- a/components/alertdialog/themes/express.css +++ /dev/null @@ -1,13 +0,0 @@ -/*! -Copyright 2023 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -@container (--system: express) {} diff --git a/components/alertdialog/themes/spectrum.css b/components/alertdialog/themes/spectrum.css deleted file mode 100644 index d963d64ba60..00000000000 --- a/components/alertdialog/themes/spectrum.css +++ /dev/null @@ -1,13 +0,0 @@ -/*! -Copyright 2023 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -@container (--system: spectrum) {} diff --git a/components/asset/index.css b/components/asset/index.css index e9b7c701854..8a4b813e153 100644 --- a/components/asset/index.css +++ b/components/asset/index.css @@ -33,3 +33,23 @@ governing permissions and limitations under the License. max-inline-size: var(--spectrum-asset-icon-max-width); margin: var(--spectrum-asset-icon-margin); } + +.spectrum-Asset-folderBackground { + fill: var(--highcontrast-asset-folder-background-color, var(--spectrum-asset-folder-background-color)); +} + +.spectrum-Asset-fileBackground { + fill: var(--highcontrast-asset-file-background-color, var(--spectrum-asset-file-background-color)); +} + +.spectrum-Asset-folderOutline, +.spectrum-Asset-fileOutline { + fill: var(--spectrum-asset-icon-outline-color); +} + +@media (forced-colors: active) { + .spectrum-Asset { + --highcontrast-asset-folder-background-color: currentColor; + --highcontrast-asset-file-background-color: currentColor; + } +} diff --git a/components/asset/skin.css b/components/asset/skin.css deleted file mode 100644 index d4c4ca95929..00000000000 --- a/components/asset/skin.css +++ /dev/null @@ -1,31 +0,0 @@ -/*! -Copyright 2023 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -.spectrum-Asset-folderBackground { - fill: var(--highcontrast-asset-folder-background-color, var(--spectrum-asset-folder-background-color)); -} - -.spectrum-Asset-fileBackground { - fill: var(--highcontrast-asset-file-background-color, var(--spectrum-asset-file-background-color)); -} - -.spectrum-Asset-folderOutline, -.spectrum-Asset-fileOutline { - fill: var(--spectrum-asset-icon-outline-color); -} - -@media (forced-colors: active) { - .spectrum-Asset { - --highcontrast-asset-folder-background-color: currentColor; - --highcontrast-asset-file-background-color: currentColor; - } -} 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`