-
Notifications
You must be signed in to change notification settings - Fork 194
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore: all token-free raw mode to storybook
- Loading branch information
1 parent
8142be9
commit cff4722
Showing
104 changed files
with
2,124 additions
and
1,637 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| import { makeDecorator, useArgs } from "@storybook/preview-api"; | ||
|
|
||
| /** | ||
| * @type import('@storybook/csf').DecoratorFunction<import('@storybook/web-components').WebComponentsFramework> | ||
| * @description Global properties added to each component; determines what stylesheets are loaded | ||
| **/ | ||
| export const withArgEvents = makeDecorator({ | ||
| name: "withArgEvents", | ||
| parameterName: "argEvents", | ||
| wrapper: (StoryFn, context) => { | ||
| const [, updateArgs] = useArgs(); | ||
|
|
||
| // Bind the updateArgs function for use in nested templates | ||
| context.updateArgs = updateArgs; | ||
|
|
||
| return StoryFn(context); | ||
| }, | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,8 +1,15 @@ | ||
| export { withArgEvents } from "./arg-events.js"; | ||
| export { withContextWrapper } from "./context.js"; | ||
| export { withLanguageWrapper } from "./language.js"; | ||
| export { withReducedMotionWrapper } from "./reduce-motion.js"; | ||
| export { withTestingPreviewWrapper } from "./testing-preview.js"; | ||
| export { withTextDirectionWrapper } from "./text-direction.js"; | ||
|
|
||
| /* This is exported but must be opted-into on a component-by-component basis */ | ||
| export { withOverlayWrapper } from "./overlay.js"; | ||
| export { withSizingWrapper } from "./sizing.js"; | ||
|
|
||
| /* External decorators exported for use in stories */ | ||
| export { withActions } from "@storybook/addon-actions/decorator"; | ||
|
|
||
| export * from "./utilities.js"; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| import { Template as Underlay } from "@spectrum-css/underlay/stories/template.js"; | ||
| import { makeDecorator } from "@storybook/preview-api"; | ||
| import { html } from "lit"; | ||
|
|
||
| /** | ||
| * @type import('@storybook/csf').DecoratorFunction<import('@storybook/web-components').WebComponentsFramework> | ||
| * @description Ensures the Underlay component is rendered only once. | ||
| **/ | ||
| export const withOverlayWrapper = makeDecorator({ | ||
| name: "withOverlayWrapper", | ||
| parameterName: "withOverlay", | ||
| // @todo: should this be opt-in? | ||
| // skipIfNoParametersOrOptions: true, | ||
| wrapper: (StoryFn, context) => { | ||
| const { | ||
| args: { | ||
| isOpen = false, | ||
| } = {}, | ||
| } = context; | ||
|
|
||
| return html` | ||
| ${Underlay({ isOpen }, context)} | ||
| ${StoryFn(context)} | ||
| `; | ||
| }, | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| import { makeDecorator } from "@storybook/preview-api"; | ||
| import { html } from "lit"; | ||
| import { styleMap } from "lit/directives/style-map.js"; | ||
|
|
||
| /** | ||
| * @type import('@storybook/csf').DecoratorFunction<import('@storybook/web-components').WebComponentsFramework> | ||
| **/ | ||
| export const withSizingWrapper = makeDecorator({ | ||
| name: "withSizingWrapper", | ||
| parameterName: "sizing", | ||
| wrapper: (StoryFn, context) => { | ||
| const { argTypes = {} } = context; | ||
| const sizes = argTypes.size?.options ?? []; | ||
| const sizeMap = { | ||
| xxs: "Extra-extra-small", | ||
| xs: "Extra-small", | ||
| s: "Small", | ||
| m: "Medium", | ||
| l: "Large", | ||
| xl: "Extra-large", | ||
| xxl: "Extra-extra-large", | ||
| }; | ||
|
|
||
| const Typography = import("@spectrum-css/typography/stories/template")?.Template ?? null; | ||
|
|
||
| return html` | ||
| <div style=${styleMap({ "display": sizes.length === 0 || !window.isTestEnv() ? undefined : "none" })}> | ||
| ${StoryFn(context)} | ||
| </div> | ||
| <div data-size-container style=${styleMap({ | ||
| "display": sizes.length === 0 || !window.isTestEnv() ? "none" : "flex", | ||
| "flex-direction": "column", | ||
| "align-items": "flex-start", | ||
| "gap": "24px", | ||
| "margin": "12px", | ||
| })}> | ||
| ${sizes.map((size) => { | ||
| context.args.size = size; | ||
| return html` | ||
| <div> | ||
| ${Typography({ | ||
| semantics: "heading", | ||
| size: "xs", | ||
| content: [sizeMap[size]], | ||
| })} | ||
| <div | ||
| style=${styleMap({ | ||
| "border": "1px solid var(--spectrum-gray-600)", | ||
| "border-radius": "4px", | ||
| "overflow": "auto", | ||
| })} | ||
| > | ||
| ${StoryFn(context)} | ||
| </div> | ||
| </div> | ||
| `; | ||
| })} | ||
| </div>`; | ||
| }, | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.