diff --git a/components/button/stories/button.mdx b/components/button/stories/button.mdx deleted file mode 100644 index 024a29f86e0..00000000000 --- a/components/button/stories/button.mdx +++ /dev/null @@ -1,119 +0,0 @@ -import { - Meta, - Title, - Subtitle, - Description, - ArgTypes, - Canvas, -} from "@storybook/blocks"; -import { - ComponentDetails, - TaggedReleases, - PropertiesTable, -} from "@spectrum-css/preview/blocks"; - -import * as ButtonStories from "./button.stories"; - - - - -<Subtitle of={ButtonStories} /> -<ComponentDetails of={ButtonStories} /> - -<Description of={ButtonStories} /> - -## Variants - -There are four available variants that are used for different levels of emphasis and different -types of actions. By default, a button uses the fill style with a solid background. The primary -and secondary variants also have an outline option. - -### Accent - -<Description of={ButtonStories.Accent} /> -<Canvas of={ButtonStories.Accent} /> - -### Primary - -<Description of={ButtonStories.Primary} /> -<Canvas of={ButtonStories.Primary} /> - -### Secondary - -<Description of={ButtonStories.Secondary} /> -<Canvas of={ButtonStories.Secondary} /> - -### Negative - -<Description of={ButtonStories.Negative} /> -<Canvas of={ButtonStories.Negative} /> - -## Static color - -When a button needs to be placed on top of a color background or a visual, use the static color -option. Static color buttons do not change shades or values depending upon the color theme. - -### Static white - primary - -<Canvas - of={ButtonStories.StaticWhitePrimary} - className="spectrum-examples-static-white" -/> - -### Static white - secondary - -<Canvas - of={ButtonStories.StaticWhiteSecondary} - className="spectrum-examples-static-white" -/> - -### Static black - primary - -<Canvas - of={ButtonStories.StaticBlackPrimary} - className="spectrum-examples-static-black" -/> - -### Static black - secondary - -<Canvas - of={ButtonStories.StaticBlackSecondary} - className="spectrum-examples-static-black" -/> - -## Sizing - -<Description of={ButtonStories.Sizing} /> -<Canvas of={ButtonStories.Sizing} /> - -## Pending state - -<Description of={ButtonStories.Pending} /> -<Canvas of={ButtonStories.Pending} /> - -## Disabled state - -<Description of={ButtonStories.Disabled} /> -<Canvas of={ButtonStories.Disabled} /> - -## Text overflow behavior - -<Description of={ButtonStories.WithWrapping} /> -<Canvas of={ButtonStories.WithWrapping} /> - -## Disable text wrapping - -<Description of={ButtonStories.DisableWrapping} /> -<Canvas of={ButtonStories.DisableWrapping} /> - -## Properties - -The component accepts the following inputs (properties): - -<ArgTypes of={ButtonStories} /> - -<PropertiesTable /> - -## Tagged releases - -<TaggedReleases of={ButtonStories} /> diff --git a/components/button/stories/button.stories.js b/components/button/stories/button.stories.js index 0dbefb09f65..6da39b3a748 100644 --- a/components/button/stories/button.stories.js +++ b/components/button/stories/button.stories.js @@ -9,6 +9,10 @@ import { ButtonsWithIconOptions, TextOverflowTemplate, TextWrapTemplate, Treatme /** * Buttons allow users to perform an action or to navigate to another page. They have multiple styles for various needs, and are ideal for calling attention to where a user needs to do something in order to move forward in a flow. + * + * There are four available variants that are used for different levels of emphasis and different + * types of actions. By default, a button uses the fill style with a solid background. The primary + * and secondary variants also have an outline option. */ export default { title: "Button", @@ -92,11 +96,11 @@ export default { packageJson, metadata, }, - tags: ["!autodocs"], }; export const Default = ButtonGroups.bind({}); Default.args = {}; +Default.tags = ["!autodocs"]; // ********* VRT ONLY ********* // export const WithForcedColors = ButtonGroups.bind({}); @@ -144,6 +148,7 @@ Accent.args = { Accent.parameters = { chromatic: { disableSnapshot: true }, }; +Accent.storyName = "Emphasis - accent"; /** * The primary button is for medium emphasis. Use it in place of an accent button when the @@ -159,6 +164,7 @@ Primary.args = { Primary.parameters = { chromatic: { disableSnapshot: true }, }; +Primary.storyName = "Emphasis - primary"; /** * The secondary button is for low emphasis. It’s paired with other button types to surface less @@ -174,6 +180,7 @@ Secondary.args = { Secondary.parameters = { chromatic: { disableSnapshot: true }, }; +Secondary.storyName = "Emphasis - secondary"; /** * The negative button is for emphasizing actions that can be destructive or have negative @@ -187,7 +194,11 @@ Negative.args = { Negative.parameters = { chromatic: { disableSnapshot: true }, }; +Negative.storyName = "Emphasis - negative"; +/** + * When a button needs to be placed on top of a dark color background or a visual, use the static white options. Static color buttons do not change shades or values depending upon the color theme. + */ export const StaticWhitePrimary = TreatmentTemplate.bind({}); StaticWhitePrimary.tags = ["!dev"]; StaticWhitePrimary.args = { @@ -198,6 +209,7 @@ StaticWhitePrimary.args = { StaticWhitePrimary.parameters = { chromatic: { disableSnapshot: true }, }; +StaticWhitePrimary.storyName = "Static white - primary"; export const StaticWhiteSecondary = TreatmentTemplate.bind({}); StaticWhiteSecondary.tags = ["!dev"]; @@ -209,7 +221,11 @@ StaticWhiteSecondary.args = { StaticWhiteSecondary.parameters = { chromatic: { disableSnapshot: true }, }; +StaticWhiteSecondary.storyName = "Static white - secondary"; +/** + * When a button needs to be placed on top of a light color background or a visual, use the static black options. Static color buttons do not change shades or values depending upon the color theme. + */ export const StaticBlackPrimary = TreatmentTemplate.bind({}); StaticBlackPrimary.tags = ["!dev"]; StaticBlackPrimary.args = { @@ -220,6 +236,7 @@ StaticBlackPrimary.args = { StaticBlackPrimary.parameters = { chromatic: { disableSnapshot: true }, }; +StaticBlackPrimary.storyName = "Static black - primary"; export const StaticBlackSecondary = TreatmentTemplate.bind({}); StaticBlackSecondary.tags = ["!dev"]; @@ -231,6 +248,8 @@ StaticBlackSecondary.args = { StaticBlackSecondary.parameters = { chromatic: { disableSnapshot: true }, }; +StaticBlackSecondary.storyName = "Static black - secondary"; + /** * The pending button is for indicating that a quick progress action is taking place. In this case, the @@ -273,7 +292,7 @@ Disabled.parameters = { */ export const WithWrapping = TextOverflowTemplate.bind({}); WithWrapping.tags = ["!dev"]; -WithWrapping.storyName = "Text overflow behavior"; +WithWrapping.storyName = "Text overflow"; WithWrapping.args = { variant: "primary", }; @@ -289,7 +308,7 @@ WithWrapping.parameters = { export const DisableWrapping = TextWrapTemplate.bind({}); DisableWrapping.tags = ["!dev"]; -DisableWrapping.storyName = "Disable label wrap"; +DisableWrapping.storyName = "Text overflow disabled"; DisableWrapping.args = { variant: "primary", }; diff --git a/components/icon/stories/icon.mdx b/components/icon/stories/icon.mdx deleted file mode 100644 index 6425344761a..00000000000 --- a/components/icon/stories/icon.mdx +++ /dev/null @@ -1,84 +0,0 @@ -import { Canvas, ArgTypes, Meta, Description, Title } from "@storybook/blocks"; -import { - ComponentDetails, - TaggedReleases, - PropertiesTable, -} from "@spectrum-css/preview/blocks"; - -import * as IconStories from "./icon.stories"; - -<Meta of={IconStories} title="Docs" /> - -<Title of={IconStories} /> -<ComponentDetails /> - -<Description of={IconStories} /> - -## Icon sets - -The SVG icons used in Spectrum CSS are a part of two different icon sets, "workflow" and "ui". The two sets have different uses and methods of sizing. - -### Workflow icons - -The workflow icon set contains several hundred icons to choose from. -These icons can be seen in use within Button, Action button, Menu, and many other components. -Here is an example with just a few of these icons: - -<Canvas of={IconStories.WorkflowDefault} /> - -These icons use "t-shirt" sizes (e.g. small, medium), that are the same width and height for each icon in the set: - -<Canvas of={IconStories.WorkflowSizing} /> - -### UI icons - -UI icons are atomic pieces (e.g., arrows, crosses, etc.) that are used as part of some components. The chevron within -the [Combobox component](?path=/docs/components-combobox--docs) is one example. - -Unlike workflow icons, each UI icon comes in specific numbered sizes. They do not use "t-shirt" sizing. -They have unique classes applied that set their size in CSS. For example: - -- `.spectrum-UIIcon-Asterisk300` -- `.spectrum-UIIcon-ChevronDown75` - -Different UI icons have different number sizes available. The smallest size for some may be "50", while others may start at "100". Some have up to a "600" size. -Some may only have two different sizes, while others have six. Because of this, they can't be mapped one to one to t-shirt sizes. The correct UI icon sizes to use for each of a component's -size options is typically defined on the design spec. - -An example of some UI icons in their available sizes: - -<Canvas of={IconStories.UIDefault} /> - -Directional UI icons such as Chevron and Arrow have classes for each direction. They rotate the same base icon with a CSS `transform: rotate`. For example, the `Arrow100.svg` icon is used -with: - -- `.spectrum-UIIcon-ArrowRight100` -- `.spectrum-UIIcon-ArrowLeft100` -- `.spectrum-UIIcon-ArrowDown100` -- `.spectrum-UIIcon-ArrowUp100` - -<Canvas of={IconStories.UIArrows} /> - -## Repositories for the icon SVG files - -The UI icon SVGs are within the Spectrum CSS repository, which has its own package published to NPM: - -- GitHub: [adobe/spectrum-css — ui-icons folder](https://github.com/adobe/spectrum-css/tree/main/ui-icons) -- NPM: [@spectrum-css/ui-icons](https://www.npmjs.com/package/@spectrum-css/ui-icons). - -The workflow icon SVGs are within a separate respository, which is also published to NPM: - -- GitHub: [adobe/spectrum-css-workflow-icons](https://github.com/adobe/spectrum-css-workflow-icons) -- NPM: [@adobe/spectrum-css-workflow-icons](https://www.npmjs.com/package/@adobe/spectrum-css-workflow-icons). - -## Properties - -The component accepts the following inputs (properties): - -<ArgTypes /> - -<PropertiesTable /> - -## Tagged releases - -<TaggedReleases /> diff --git a/components/icon/stories/icon.stories.js b/components/icon/stories/icon.stories.js index 5411a9d2d09..238f03e9d98 100644 --- a/components/icon/stories/icon.stories.js +++ b/components/icon/stories/icon.stories.js @@ -1,12 +1,10 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { size } from "@spectrum-css/preview/types"; -import { Template as Typography } from "@spectrum-css/typography/stories/template.js"; -import { html } from "lit"; -import { styleMap } from "lit/directives/style-map.js"; +import { Sizes } from "@spectrum-css/preview/decorators"; import metadata from "../dist/metadata.json"; import packageJson from "../package.json"; import { IconGroup } from "./icon.test.js"; -import { Template } from "./template.js"; +import { IconListTemplate, Template, UIDefaultTemplate } from "./template.js"; import { uiIconSizes, uiIconsWithDirections, workflowIcons } from "./utilities.js"; /** @@ -27,6 +25,19 @@ const uiIconNameOptions = uiIconsWithDirections.map((iconName) => { /** * The Icon component contains all of the CSS used for displaying both workflow and UI icons. + * + * ## Icon sets + * The SVG icons used in Spectrum CSS are a part of two different icon sets, "workflow" and "ui". + * The two sets have different uses and methods of sizing. + * + * ## Repositories for the icon SVG files + * The UI icon SVGs are within the Spectrum CSS repository, which has its own package published to NPM: + * - GitHub: [adobe/spectrum-css — ui-icons folder](https://github.com/adobe/spectrum-css/tree/main/ui-icons) + * - NPM: [@spectrum-css/ui-icons](https://www.npmjs.com/package/@spectrum-css/ui-icons). + * + * The workflow icon SVGs are within a separate repository, which is also published to NPM: + * - GitHub: [adobe/spectrum-css-workflow-icons](https://github.com/adobe/spectrum-css-workflow-icons) + * - NPM: [@adobe/spectrum-css-workflow-icons](https://www.npmjs.com/package/@adobe/spectrum-css-workflow-icons). */ export default { title: "Icon", @@ -92,11 +103,11 @@ export default { packageJson, metadata, }, - tags: ["!autodocs"], }; export const Default = IconGroup.bind({}); Default.args = {}; +Default.tags = ["!autodocs"]; // ********* VRT ONLY ********* // export const WithForcedColors = IconGroup.bind({}); @@ -111,27 +122,12 @@ WithForcedColors.parameters = { }, }; -/** - * Helper template function to display multiple icons using an array of icon names. - */ -const IconListTemplate = (args, iconsList = [], context) => html` - <div - style=${styleMap({ - "display": "flex", - "gap": "32px", - "flexWrap": "wrap", - })} - > - ${iconsList.map( - (iconName) => Template({ ...args, iconName }, context) - )} - </div> -`; - /* Stories for the MDX "Docs" only. */ /** - * A sampling of multiple Workflow icons. + * Below is a sampling of multiple Workflow icons. The workflow icon set contains several hundred icons to choose from. + * These icons can be seen in use within [button](/docs/components-button--docs), [action button](/docs/components-action-button--docs), [menu](/docs/components-menu--docs), and many other components. + * Here is an example with just a few of these icons: */ export const WorkflowDefault = (args, context) => IconListTemplate( { @@ -159,105 +155,57 @@ WorkflowDefault.tags = ["!dev"]; WorkflowDefault.parameters = { chromatic: { disableSnapshot: true }, }; +WorkflowDefault.storyName = "Workflow icons"; /** - * An example of a Workflow icon displayed at all sizes, from small to extra-large. + * Here is an example of a workflow icon displayed at all sizes, from extra-small to extra-extra-large. + * Workflow icons use "t-shirt" sizes (e.g. small, medium), that are the same width and height for each icon in the set. */ -export const WorkflowSizing = (args, context) => html` - <div - style=${styleMap({ - "display": "flex", - "gap": "24px", - "flexWrap": "wrap", - })} - > - ${["xs","s","m","l","xl"].map( - (size) => html` - <div - style=${styleMap({ - "display": "flex", - "gap": "16px", - "flexDirection": "column", - "alignItems": "center", - "flexBasis": "80px", - })} - > - ${Typography({ - semantics: "heading", - size: "xs", - content: [ - { - xs: "Extra-small", - s: "Small", - m: "Medium", - l: "Large", - xl: "Extra-large", - }[size], - ], - customStyles: { - "white-space": "nowrap", - "--mod-detail-font-color": "var(--spectrum-seafoam-900)", - } - })} - ${Template({ ...args, size }, context)} - </div> - ` - )} - </div> -`; -WorkflowSizing.tags = ["!dev"]; +export const WorkflowSizing = (args, context) => Sizes({ + Template, + withBorder: false, + withHeading: false, + ...args, +}, context); WorkflowSizing.args = { setName: "workflow", iconName: "Asset", }; +WorkflowSizing.tags = ["!dev"]; WorkflowSizing.parameters = { chromatic: { disableSnapshot: true }, }; +WorkflowSizing.storyName = "Workflow sizing"; /** - * A sampling of a few UI icons. + * Below is a sampling of a few UI icons. UI icons are atomic pieces (e.g., arrows, crosses, etc.) that are used as part of some components. + * The chevron within the [combobox component](/docs/components-combobox--docs) is one example. + * Unlike workflow icons, each UI icon comes in specific numbered sizes. They do not use "t-shirt" sizing. They have unique classes applied that set their size in CSS. For example: + * - `.spectrum-UIIcon-Asterisk300` + * - `.spectrum-UIIcon-ChevronDown75` + * + * Different UI icons have different number sizes available. The smallest size for some may be `50`, while others may start at `100`. Some have up to a `600` size. Some may only have two different sizes, while others have six. + * Because of this, they can't be mapped one-to-one to t-shirt sizes. + * The correct UI icon sizes that correspond to each of a component's size options is typically defined in the design spec. + * An example of some UI icons in their available sizes is below. */ -export const UIDefault = (args, context) => html` - <div style="margin-bottom: 32px;"> - ${IconListTemplate( - { - ...args, - setName: "ui", - }, - [ - "Asterisk100", - "Asterisk200", - "Asterisk300", - ], - context - )} - </div> - <div> - ${IconListTemplate( - { - ...args, - setName: "ui", - }, - [ - "ChevronDown50", - "ChevronDown75", - "ChevronDown100", - "ChevronDown200", - "ChevronDown300", - "ChevronDown400", - ], - context - )} - </div> -`; -UIDefault.storyName = "UI Default"; +export const UIDefault = UIDefaultTemplate.bind({}); +UIDefault.storyName = "UI icons"; UIDefault.tags = ["!dev"]; UIDefault.parameters = { chromatic: { disableSnapshot: true }, }; /** - * A UI arrow displayed for all directions (left, right, up, down). + * Directional UI icons such as chevron and arrow have classes for each direction. They rotate the same basic icon with a CSS `transform: rotate`. For example, the `Arrow100.svg` icon is used +with: + +- `.spectrum-UIIcon-ArrowRight100` +- `.spectrum-UIIcon-ArrowLeft100` +- `.spectrum-UIIcon-ArrowDown100` +- `.spectrum-UIIcon-ArrowUp100` + + * This UI arrow is displayed for all directions (left, right, up, down). */ export const UIArrows = (args, context) => IconListTemplate( { @@ -272,7 +220,7 @@ export const UIArrows = (args, context) => IconListTemplate( ], context ); -UIArrows.storyName = "UI Arrows"; +UIArrows.storyName = "UI arrows"; UIArrows.tags = ["!dev"]; UIArrows.parameters = { chromatic: { disableSnapshot: true }, diff --git a/components/icon/stories/template.js b/components/icon/stories/template.js index 408107755e7..2895ff1ef3e 100644 --- a/components/icon/stories/template.js +++ b/components/icon/stories/template.js @@ -2,6 +2,7 @@ import { getRandomId } from "@spectrum-css/preview/decorators"; import { html } from "lit"; import { classMap } from "lit/directives/class-map.js"; import { ifDefined } from "lit/directives/if-defined.js"; +import { styleMap } from "lit/directives/style-map.js"; import { unsafeSVG } from "lit/directives/unsafe-svg.js"; import "../index.css"; @@ -281,3 +282,57 @@ export const Template = ({ <use xlink:href="#${iconID}" href="#${iconID}" /> </svg>`; }; + +/** + * Helper template function to display multiple icons using an array of icon names. + */ +export const IconListTemplate = (args, iconsList = [], context) => html` + <div + style=${styleMap({ + "display": "flex", + "gap": "32px", + "flexWrap": "wrap", + })} + > + ${iconsList.map( + (iconName) => Template({ ...args, iconName }, context) + )} + </div> +`; + +/** + * A sampling of a few UI icons. + */ +export const UIDefaultTemplate = (args, context) => html` +<div style="margin-bottom: 32px;"> + ${IconListTemplate( + { + ...args, + setName: "ui", + }, + [ + "Asterisk100", + "Asterisk200", + "Asterisk300", + ], + context + )} +</div> +<div> + ${IconListTemplate( + { + ...args, + setName: "ui", + }, + [ + "ChevronDown50", + "ChevronDown75", + "ChevronDown100", + "ChevronDown200", + "ChevronDown300", + "ChevronDown400", + ], + context + )} +</div> +`; diff --git a/components/typography/stories/typography.mdx b/components/typography/stories/typography.mdx deleted file mode 100644 index aed80e6acd9..00000000000 --- a/components/typography/stories/typography.mdx +++ /dev/null @@ -1,112 +0,0 @@ -import { - Meta, - Title, - Subtitle, - Description, - ArgTypes, - Canvas, - Source, - Story, -} from "@storybook/blocks"; -import { - ComponentDetails, - TaggedReleases, - PropertiesTable, -} from "@spectrum-css/preview/blocks"; - -import * as TypographyStories from "./typography.stories"; - -<Meta of={TypographyStories} title="Docs" /> - -<Title of={TypographyStories} /> -<Subtitle of={TypographyStories} /> -<ComponentDetails of={TypographyStories} /> - -Spectrum typography is broken out into several separate components: [heading](#heading), [body](#body), [detail](#detail), and [code](#code). [Internationalized typography examples](#internationalized-typography) are also shown. - -<Description of={TypographyStories.Default} /> -<Canvas of={TypographyStories.Default} /> - -## Heading - -<Description of={TypographyStories.HeadingVariants} /> -<Canvas of={TypographyStories.HeadingVariants} /> - -### Heading sizes - -<Description of={TypographyStories.HeadingSizes} /> -<Canvas of={TypographyStories.HeadingSizes} /> - -## Body - -<Description of={TypographyStories.BodyVariants} /> -<Canvas of={TypographyStories.BodyVariants} /> - -### Body sizes - -<Description of={TypographyStories.BodySizes} /> -<Canvas of={TypographyStories.BodySizes} /> - -## Heading and body pairings - -<Description of={TypographyStories.HeadingBodyHierarchy} /> -<Canvas of={TypographyStories.HeadingBodyHierarchy} /> - -## Detail - -<Description of={TypographyStories.DetailVariants} /> -<Canvas of={TypographyStories.DetailVariants} /> - -### Detail sizes - -<Description of={TypographyStories.DetailSizes} /> -<Canvas of={TypographyStories.DetailSizes} /> - -## Code - -<Description of={TypographyStories.CodeVariants} /> -<Canvas of={TypographyStories.CodeVariants} /> - -### Code sizes - -<Description of={TypographyStories.CodeSizes} /> -<Canvas of={TypographyStories.CodeSizes} /> - -## Internationalized typography - -### Internationalized heading - -<Description of={TypographyStories.InternationalizedHeading} /> -<Canvas of={TypographyStories.InternationalizedHeading} /> - -### Internationalized body - -<Description of={TypographyStories.InternationalizedBody} /> -<Canvas of={TypographyStories.InternationalizedBody} /> - -## Internationalized heading and body pairings - -<Description of={TypographyStories.InternationalizedHeadingBodyHierarchy} /> -<Canvas of={TypographyStories.InternationalizedHeadingBodyHierarchy} /> - -### Internationalized detail - -<Description of={TypographyStories.InternationalizedDetail} /> -<Canvas of={TypographyStories.InternationalizedDetail} /> - -### Internationalized code - -<Description of={TypographyStories.InternationalizedCode} /> -<Canvas of={TypographyStories.InternationalizedCode} /> - -## Properties - -The component accepts the following inputs (properties): - -<ArgTypes /> - -<PropertiesTable /> - -## Tagged releases - -<TaggedReleases /> diff --git a/components/typography/stories/typography.stories.js b/components/typography/stories/typography.stories.js index 044a76bc5b6..7e7bd26645e 100644 --- a/components/typography/stories/typography.stories.js +++ b/components/typography/stories/typography.stories.js @@ -18,7 +18,7 @@ import { import { TypographyGroup } from "./typography.test.js"; /** - * Spectrum typography is broken out into several separate components: heading, body, detail, and code. Internationalized typography examples are also shown. + * Spectrum typography is broken out into several separate components: [heading](#heading), [body](#body), [detail](#detail), and [code](#code). [Internationalized typography examples](#internationalized-typography) are also shown. */ export default { title: "Typography", @@ -87,7 +87,7 @@ export default { }; /** - * By default, Typography components do not include outer margins. If you would like to add margins, simply add the `.spectrum-Typography` class to your container, and every typography component inside of your container will have the correct margins. + * By default, typography components do not include outer margins. If you would like to add margins, simply add the `.spectrum-Typography` class to your container, and every typography component inside of your container will have the correct margins. */ export const Default = TypographyGroup.bind({}); Default.args = { @@ -150,6 +150,7 @@ HeadingSizes.args = { HeadingSizes.parameters = { chromatic: { disableSnapshot: true }, }; +HeadingSizes.storyName = "Heading sizes"; /** * Body is primarily used for Spectrum components and for blocks of text. @@ -172,6 +173,7 @@ BodySizes.args = { BodySizes.parameters = { chromatic: { disableSnapshot: true }, }; +BodySizes.storyName = "Body sizes"; /** * When typography elements are paired, such as with heading and body below, clear content hierarchies are shown. @@ -191,6 +193,7 @@ HeadingBodyHierarchy.tags = ["!dev"]; HeadingBodyHierarchy.parameters = { chromatic: { disableSnapshot: true }, }; +HeadingBodyHierarchy.storyName = "Heading with body pairings"; export const DetailSizes = (args, context) => Sizes({ Template, @@ -212,6 +215,7 @@ DetailSizes.tags = ["!dev"]; DetailSizes.parameters = { chromatic: { disableSnapshot: true }, }; +DetailSizes.storyName = "Detail sizes"; export const CodeSizes = (args, context) => Sizes({ Template, @@ -229,6 +233,7 @@ CodeSizes.args = { CodeSizes.parameters = { chromatic: { disableSnapshot: true }, }; +CodeSizes.storyName = "Code sizes"; // ====== Docs: Glyphs and Variants ====== // /** @@ -239,6 +244,7 @@ HeadingVariants.tags = ["!dev"]; HeadingVariants.parameters = { chromatic: { disableSnapshot: true }, }; +HeadingVariants.storyName = "Heading"; /** * Body is a typography component primarily used within Spectrum components and for blocks of text. @@ -248,6 +254,7 @@ BodyVariants.tags = ["!dev"]; BodyVariants.parameters = { chromatic: { disableSnapshot: true }, }; +BodyVariants.storyName = "Body"; /** * Detail is used for disclosing extra information or smaller items in hierarchical relationships of text. @@ -257,6 +264,7 @@ DetailVariants.tags = ["!dev"]; DetailVariants.parameters = { chromatic: { disableSnapshot: true }, }; +DetailVariants.storyName = "Detail"; /** * Code is used for text that represents code. @@ -268,20 +276,21 @@ CodeVariants.tags = ["!dev"]; CodeVariants.parameters = { chromatic: { disableSnapshot: true }, }; +CodeVariants.storyName = "Code"; // ====== Docs: Internationalization ====== // /** - * We should note that Hebrew and Arabic are rtl languages somewhere over here. + * In the examples below, Hebrew and Arabic are "RTL" languages, meaning they are read from right to left. */ export const InternationalizedHeading = DocsInternationalizedHeadingVariants.bind({}); -InternationalizedHeading.storyName = "Internationalized Heading"; +InternationalizedHeading.storyName = "Internationalized heading"; InternationalizedHeading.tags = ["!dev"]; InternationalizedHeading.parameters = { chromatic: { disableSnapshot: true }, }; export const InternationalizedBody = DocsInternationalizedBodyVariants.bind({}); -InternationalizedBody.storyName = "Internationalized Body"; +InternationalizedBody.storyName = "Internationalized body"; InternationalizedBody.tags = ["!dev"]; InternationalizedBody.parameters = { chromatic: { disableSnapshot: true }, @@ -305,16 +314,17 @@ InternationalizedHeadingBodyHierarchy.tags = ["!dev"]; InternationalizedHeadingBodyHierarchy.parameters = { chromatic: { disableSnapshot: true }, }; +InternationalizedHeadingBodyHierarchy.storyName = "Internationalized heading and body pairings"; export const InternationalizedDetail = DocsInternationalizedDetailVariants.bind({}); -InternationalizedDetail.storyName = "Internationalized Detail"; +InternationalizedDetail.storyName = "Internationalized detail"; InternationalizedDetail.tags = ["!dev"]; InternationalizedDetail.parameters = { chromatic: { disableSnapshot: true }, }; export const InternationalizedCode = DocsInternationalizedCodeVariants.bind({}); -InternationalizedCode.storyName = "Internationalized Code"; +InternationalizedCode.storyName = "Internationalized code"; InternationalizedCode.tags = ["!dev"]; InternationalizedCode.parameters = { chromatic: { disableSnapshot: true },