From 3e6d3ae9e216b038081f481f92551f7e39faa3be Mon Sep 17 00:00:00 2001 From: "[ Cassondra ]" Date: Fri, 1 Nov 2024 12:12:41 -0400 Subject: [PATCH] chore(storybook): align typography elements for VRTs (#3343) --- .storybook/decorators/utilities.js | 90 ++++++++--- components/actionbutton/stories/template.js | 8 +- components/actiongroup/stories/template.js | 27 ++-- components/alertbanner/stories/template.js | 10 +- components/button/stories/template.js | 40 ++--- components/checkbox/stories/template.js | 15 +- components/closebutton/stories/template.js | 8 +- components/coachindicator/stories/template.js | 8 +- components/combobox/stories/template.js | 6 +- components/helptext/stories/template.js | 12 +- components/menu/stories/template.js | 153 +++++++++--------- components/picker/stories/template.js | 12 +- .../progressbar/stories/meter.template.js | 6 +- components/progressbar/stories/template.js | 6 +- components/radio/stories/template.js | 2 +- components/search/stories/template.js | 7 +- components/statuslight/stories/template.js | 4 +- components/steplist/stories/template.js | 8 +- components/stepper/stories/template.js | 22 +-- components/swatch/stories/template.js | 38 ++--- components/swatchgroup/stories/template.js | 12 +- components/switch/stories/template.js | 31 ++-- components/tabs/stories/template.js | 52 +++--- components/tag/stories/template.js | 20 ++- components/textfield/stories/template.js | 20 +-- .../textfield/stories/textarea.template.js | 20 +-- components/toast/stories/template.js | 4 +- components/tooltip/stories/template.js | 16 +- components/typography/stories/template.js | 151 ++++++++--------- 29 files changed, 417 insertions(+), 391 deletions(-) diff --git a/.storybook/decorators/utilities.js b/.storybook/decorators/utilities.js index 8164f3cf088..5b63d53636e 100644 --- a/.storybook/decorators/utilities.js +++ b/.storybook/decorators/utilities.js @@ -1,4 +1,3 @@ -import { Template as Typography } from "@spectrum-css/typography/stories/template.js"; import { html, nothing } from "lit"; import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; @@ -11,26 +10,58 @@ import { capitalize } from "lodash-es"; * @param {string} props.content - The content to render in the heading or code block. * @param {string} props.size - The size of the heading to render. * @param {string} props.weight - The weight of the heading to render. - * @param {string[]} props.customClasses - Additional classes to apply to the heading or code block. */ const Heading = ({ semantics = "heading", content, size = "l", weight, - customClasses = [], -} = {}) => { - return Typography({ - semantics, - size, - weight, - content, - skipLineBreak: true, - customClasses: ["chromatic-ignore", ...customClasses], - customStyles: { - "color": semantics === "detail" ? "var(--spectrum-heading-color)" : undefined, +} = {}, context = {}) => { + if (!content) return nothing; + + const headingStyles = { + "display": "block", + "color": "black", + "font-family": 'adobe-clean, "adobe clean", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif', + "font-size": "11px", + "line-height": "1.3", + "font-weight": "700", + }; + + if ((size === "xxs" && semantics === "heading") || size === "l") { + headingStyles["font-size"] = "14px"; + } + + if (semantics === "detail") { + headingStyles["letter-spacing"] = ".06em"; + headingStyles["text-transform"] = "uppercase"; + } + + if (weight === "light") { + if (semantics === "heading") { + headingStyles["font-weight"] = "300"; + } + else { + headingStyles["font-weight"] = "400"; } - }); + } + + if (context.globals?.color.startsWith("dark")) { + headingStyles["color"] = context?.args?.staticColor ?? "white"; + } + else if (typeof context?.args?.staticColor !== "undefined") { + headingStyles["color"] = context?.args?.staticColor; + } + + + return html` + + ${content} + + `; }; /** @@ -54,7 +85,8 @@ export const Container = ({ withBorder = true, containerStyles = {}, wrapperStyles = {}, -} = {}) => { +} = {}, context = {}) => { + const isDocs = context?.viewMode === "docs"; const headingConfig = { size: "l", semantics: type }; let gap = 40; @@ -100,6 +132,13 @@ export const Container = ({ ${when(heading, () => Heading({ ...headingConfig, content: heading + }, { + ...context, + globals: { + ...context.globals ?? {}, + // If the level is 1 and we are not in docs view, use the light color theme for the heading + color: level === 1 && !isDocs ? "light" : context.globals?.color, + } }))}
- ${renderContent(content)} + ${renderContent(content, { context })}
`; @@ -173,6 +212,15 @@ export const States = ({ return nothing } + context = { + ...context, + args: { + ...context.args, + ...args, + ...item, + } + }; + return Container({ heading: stateData.some(({ testHeading }) => testHeading) ? testHeading : "", level: 3, @@ -182,9 +230,9 @@ export const States = ({ ...stateWrapperStyles, }, content: Template({ ...args, ...item }, context), - }); + }, context); }) - }); + }, context); }; /** @@ -264,8 +312,8 @@ export const ArgGrid = ({ ...(typeof args?.name !== "undefined" ? {name: `${args.name}-${argKey}-${index}`} : {}), ...(typeof args?.id !== "undefined" ? {id: `${args.id}-${argKey}-${index}`} : {}), }, context) - })), - }); + }, context)), + }, context); }; /** @@ -450,7 +498,7 @@ export const Variants = ({ () => AltTemplate(data, context) )} `, - }); + }, context); } )} diff --git a/components/actionbutton/stories/template.js b/components/actionbutton/stories/template.js index 5f48689385e..2a9f4672831 100644 --- a/components/actionbutton/stories/template.js +++ b/components/actionbutton/stories/template.js @@ -158,7 +158,7 @@ export const ActionButtonsWithIconOptions = (args, context) => Container({ hasPopup: "true", }, context)} ` -}); +}, context); export const IconOnlyOption = (args, context) => Container({ withBorder: false, @@ -179,7 +179,7 @@ export const IconOnlyOption = (args, context) => Container({ hasPopup: "true", }, context)} ` -}); +}, context); export const TreatmentTemplate = (args, context) => Container({ withBorder: false, @@ -200,5 +200,5 @@ export const TreatmentTemplate = (args, context) => Container({ isSelected, isDisabled, }) - }, context ))}`, -}); + }, context))}`, +}, context); diff --git a/components/actiongroup/stories/template.js b/components/actiongroup/stories/template.js index b066411acd4..25d8f25f4e0 100644 --- a/components/actiongroup/stories/template.js +++ b/components/actiongroup/stories/template.js @@ -97,7 +97,7 @@ export const OverflowOption = (context) => Container({ }, ] }, context) - })} + }, context)} ${Container({ withBorder: false, heading: "Collapse", @@ -126,9 +126,9 @@ export const OverflowOption = (context) => Container({ }, ] }, context) - })} + }, context)} ` -}); +}, context); export const TreatmentTemplate = (args, context) => Container({ withBorder: false, @@ -140,14 +140,13 @@ export const TreatmentTemplate = (args, context) => Container({ { heading: "Default", }, { iconOnly: true, heading: "Icon-only", }, { iconOnly: true, areQuiet: true, heading: "Quiet, icon-only", }, - ].map(({ heading, areQuiet, iconOnly }) => Container({ - withBorder: false, - heading: heading, - content: Template({ - ...args, - areQuiet, - iconOnly, - }, context)} - ))}` -}); - + ].map(({ heading, areQuiet, iconOnly }) => Container({ + withBorder: false, + heading: heading, + content: Template({ + ...args, + areQuiet, + iconOnly, + }, context) + }, context))}` +}, context); diff --git a/components/alertbanner/stories/template.js b/components/alertbanner/stories/template.js index b2b92c39368..b564deeed0d 100644 --- a/components/alertbanner/stories/template.js +++ b/components/alertbanner/stories/template.js @@ -130,7 +130,7 @@ export const ActionableOptionsTemplate = (args, context) => Container({ text: "Your trial has expired", actionButtonText: "Buy now", }, context), - })} + }, context)} ${Container({ withBorder: false, direction: "column", @@ -144,7 +144,7 @@ export const ActionableOptionsTemplate = (args, context) => Container({ actionButtonText: "Buy now", showCloseButton: false, }, context), - })} + }, context)} ${Container({ withBorder: false, direction: "column", @@ -157,7 +157,7 @@ export const ActionableOptionsTemplate = (args, context) => Container({ text: "Your trial has expired", actionButtonText: "", }), - })} + }, context)} ${Container({ withBorder: false, direction: "column", @@ -171,6 +171,6 @@ export const ActionableOptionsTemplate = (args, context) => Container({ actionButtonText: "", showCloseButton: false, }, context), - })} + }, context)} `, -}); +}, context); diff --git a/components/button/stories/template.js b/components/button/stories/template.js index 2e339780f4c..cecada6f7a9 100644 --- a/components/button/stories/template.js +++ b/components/button/stories/template.js @@ -82,7 +82,7 @@ export const Template = ({ ${when(iconName && !iconAfterLabel, () => Icon({ iconName, setName: iconSet, size }, context) )} - ${when(label && !hideLabel, () => + ${when(label && !hideLabel, () => html`${label}` )} ${when(iconName && iconAfterLabel, () => @@ -131,7 +131,7 @@ export const ButtonsWithIconOptions = ({ iconName: iconName ?? "Edit", }, context)} `, -}); +}, context); /** * Display the buttons with icon options for each treatment option. @@ -155,23 +155,23 @@ export const TextOverflowTemplate = (args, context = {}) => Container({ rowGap: "12px", }, content: html` - ${Template({ - ...args, - customStyles: { - "max-inline-size": "480px", - }, - label: "An example of text overflow behavior when there is no icon. When the button text is too long for the horizontal space available, it wraps to form another line.", - }, context)} - ${Template({ - ...args, - customStyles: { - "max-inline-size": "480px", - }, - iconName: "Edit", - iconSet: "workflow", - label: "An example of text overflow behavior when the button has an icon. When the button text is too long for the horizontal space available, it wraps to form another line.", - }, context)} - `, + ${Template({ + ...args, + customStyles: { + "max-inline-size": "480px", + }, + label: "An example of text overflow behavior when there is no icon. When the button text is too long for the horizontal space available, it wraps to form another line.", + }, context)} + ${Template({ + ...args, + customStyles: { + "max-inline-size": "480px", + }, + iconName: "Edit", + iconSet: "workflow", + label: "An example of text overflow behavior when the button has an icon. When the button text is too long for the horizontal space available, it wraps to form another line.", + }, context)} + `, }, context); export const TextWrapTemplate = (args, context = {}) => Container({ @@ -206,4 +206,4 @@ export const TextWrapTemplate = (args, context = {}) => Container({ noWrap: true, }, context)} `, -}, context); \ No newline at end of file +}, context); diff --git a/components/checkbox/stories/template.js b/components/checkbox/stories/template.js index f8ab2a5d1a1..82845f6ee18 100644 --- a/components/checkbox/stories/template.js +++ b/components/checkbox/stories/template.js @@ -1,5 +1,5 @@ import { Template as Icon } from "@spectrum-css/icon/stories/template.js"; -import { getRandomId, Container } from "@spectrum-css/preview/decorators"; +import { Container, 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"; @@ -126,7 +126,7 @@ export const DocsCheckboxGroup = (args, context) => Container({ customStyles: { "max-inline-size": "200px" }, })} ` -}); +}, context); /* This template group showcases multiple CheckboxGroups in various states of disabled, read-only, invalid, etc. */ export const AllVariantsCheckboxGroup = (args, context) => Container({ @@ -137,25 +137,24 @@ export const AllVariantsCheckboxGroup = (args, context) => Container({ direction: "column", heading: "Default", content: DocsCheckboxGroup(args, context) - })} + }, context)} ${Container({ withBorder: false, direction: "column", heading: "Invalid", content: DocsCheckboxGroup({...args, isInvalid: true }, context) - })} + }, context)} ${Container({ withBorder: false, direction: "column", heading: "Disabled", content: DocsCheckboxGroup({...args, isDisabled: true }, context) - })} + }, context)} ${Container({ withBorder: false, direction: "column", heading: "Read-only", content: DocsCheckboxGroup({...args, isReadOnly: true }, context) - - })} + }, context)} ` -}); +}, context); diff --git a/components/closebutton/stories/template.js b/components/closebutton/stories/template.js index ff227296550..4e730b8529c 100644 --- a/components/closebutton/stories/template.js +++ b/components/closebutton/stories/template.js @@ -80,7 +80,7 @@ const getCloseButtonIconName = (size = "m", iconSize = "regular", iconName = "Cr }; /** - * Example template that includes both the default and disabled close button + * Example template that includes both the default and disabled close button * for some of the Docs only stories. */ export const CloseButtonExample = (args, context) => Container({ @@ -91,7 +91,7 @@ export const CloseButtonExample = (args, context) => Container({ direction: "column", heading: "Default", content: Template(args, context), - })} + }, context)} ${Container({ withBorder: false, direction: "column", @@ -100,6 +100,6 @@ export const CloseButtonExample = (args, context) => Container({ ...args, isDisabled: true, }, context), - })} + }, context)} `, -}); \ No newline at end of file +}, context); diff --git a/components/coachindicator/stories/template.js b/components/coachindicator/stories/template.js index c9f3d0756e4..db6af34db76 100644 --- a/components/coachindicator/stories/template.js +++ b/components/coachindicator/stories/template.js @@ -39,19 +39,19 @@ export const AllVariantsCoachIndicatorGroup = (args, context) => Container({ withBorder: false, heading: "Default", content: Template({ ...args, variant: "default" }, context) - })} + }, context)} ${Container({ direction: "column", withBorder: false, heading: "Dark", content: Template({ ...args, variant: "dark" }, context) - })} + }, context)} ${Container({ direction: "column", withBorder: false, heading: "Light", content: Template({ ...args, variant: "light" }, context) - })} + }, context)} ` -}); +}, context); diff --git a/components/combobox/stories/template.js b/components/combobox/stories/template.js index 2f8d74cdad0..c0ff2f4d9b4 100644 --- a/components/combobox/stories/template.js +++ b/components/combobox/stories/template.js @@ -169,7 +169,7 @@ export const VariantGroup = (args, context) => { args: {...args, showFieldLabel: true, fieldLabelText: "Country"}, }, ]; - + return Container({ direction: "row", withHeading: false, @@ -180,7 +180,7 @@ export const VariantGroup = (args, context) => { heading: variant.heading, containerStyles: {"gap": "8px"}, content: Template(variant.args, context), - })) + }, context)) }` - }); + }, context); }; diff --git a/components/helptext/stories/template.js b/components/helptext/stories/template.js index 60c35c4bf92..74fa628ae2a 100644 --- a/components/helptext/stories/template.js +++ b/components/helptext/stories/template.js @@ -53,7 +53,7 @@ export const Template = ({ export const VariantsTemplate = (args, context) => Container({ withBorder: false, direction: "column", - content: html`${["neutral", "negative"].map((variant) => + content: html`${["neutral", "negative"].map((variant) => Container({ withBorder: false, direction: "column", @@ -65,9 +65,9 @@ export const VariantsTemplate = (args, context) => Container({ ...args, variant }, context), - }) + }, context) )}`, -}); +}, context); /** * Displays options for the negative variant; with and without an icon. @@ -75,7 +75,7 @@ export const VariantsTemplate = (args, context) => Container({ export const NegativeTemplate = (args, context) => Container({ withBorder: false, direction: "column", - content: html`${[true, false].map((hideIcon) => + content: html`${[true, false].map((hideIcon) => Container({ withBorder: false, direction: "column", @@ -87,6 +87,6 @@ export const NegativeTemplate = (args, context) => Container({ ...args, hideIcon }, context), - }) + }, context) )}`, -}); +}, context); diff --git a/components/menu/stories/template.js b/components/menu/stories/template.js index d20fedca80e..24aee2eeaba 100644 --- a/components/menu/stories/template.js +++ b/components/menu/stories/template.js @@ -459,7 +459,7 @@ export const DisabledItemGroup = (args, context) => { ] } ]; - + return Container({ withBorder: false, content: groupData.map((group) => html` @@ -473,9 +473,9 @@ export const DisabledItemGroup = (args, context) => { items: group.items, })} ` - })} + }, context)} `) - }); + }, context); }; export const OverflowGroup = (args, context) => { @@ -582,7 +582,7 @@ export const OverflowGroup = (args, context) => { items: group.items, })} ` - })} + })} `) }); }; @@ -690,87 +690,84 @@ export const SelectionGroup = (args, context) => { return Container({ withBorder: false, - content: groupData.map((group) => html`${Container({ + content: groupData.map((group) => Container({ heading: group.heading, - content: html` - ${Template({ + content: Template({ ...args, context, selectionMode: group.selectionMode || "none", hasActions: group.hasActions || false, items: group.items, - })} - ` - })}`) + }) + }, context)) }); }; -export const SubmenuInPopover = (context) => html`${Popover({ - isOpen: true, - position: "end-top", - customStyles: { - "inline-size": "200px", - }, - trigger: (args, context) => ActionButton({ - label: "Settings", - iconName: "Settings", - ...args, - }, context), - content: [ - (args, context) => Template({ - items: [ - { - label: "Language", - value: "English (US)", - isDrillIn: true, - isHovered: true, - }, - { - label: "Notifications", - }, - { - label: "Show grid", - } - ], - ...args - }, context), - (args, context) => Popover({ - isOpen: true, - position: "end-top", - customStyles: { - "--mod-popover-animation-distance": "-4px", - top: "-105px", - "inline-size": "120px", +export const SubmenuInPopover = (context) => Popover({ + isOpen: true, + position: "end-top", + customStyles: { + "inline-size": "200px", + }, + trigger: (args, context) => ActionButton({ + label: "Settings", + iconName: "Settings", + ...args, + }, context), + content: [ + (args, context) => Template({ + items: [ + { + label: "Language", + value: "English (US)", + isDrillIn: true, + isHovered: true, }, - content: [ - (args, context) => Template({ - selectionMode: "single", - items: [ - { - label: "Deutsch", - }, - { - label: "English (US)", - isSelected: true, - }, - { - label: "Español", - }, - { - label: "Français", - }, - { - label: "Italiano", - }, - { - label: "日本語", - } - ], - ...args, - }, context) - ], - ...args, - }, context) - ], - }, context) - }`; + { + label: "Notifications", + }, + { + label: "Show grid", + } + ], + ...args + }, context), + (args, context) => Popover({ + isOpen: true, + position: "end-top", + customStyles: { + "--mod-popover-animation-distance": "-4px", + top: "-105px", + "inline-size": "120px", + }, + content: [ + (args, context) => Template({ + selectionMode: "single", + items: [ + { + label: "Deutsch", + }, + { + label: "English (US)", + isSelected: true, + }, + { + label: "Español", + }, + { + label: "Français", + }, + { + label: "Italiano", + }, + { + label: "日本語", + } + ], + ...args, + }, context) + ], + ...args, + }, context) + ], +}, context); diff --git a/components/picker/stories/template.js b/components/picker/stories/template.js index a356b4aa44a..4be33a2092f 100644 --- a/components/picker/stories/template.js +++ b/components/picker/stories/template.js @@ -193,7 +193,7 @@ export const Template = ({ */ export const ClosedAndOpenTemplate = (args, context) => Container({ withBorder: false, - content: html`${[false, true].map((isOpen) => + content: html`${[false, true].map((isOpen) => Container({ withBorder: false, direction: "column", @@ -209,16 +209,16 @@ export const ClosedAndOpenTemplate = (args, context) => Container({ ...args, isOpen, }, context), - }) + }, context) )}`, -}); +}, context); /** * Template for the Disabled docs story. */ export const DisabledTemplate = (args, context) => Container({ withBorder: false, - content: html`${[false, true].map((isInvalid) => + content: html`${[false, true].map((isInvalid) => Container({ withBorder: false, direction: "column", @@ -235,6 +235,6 @@ export const DisabledTemplate = (args, context) => Container({ ...args, isInvalid, }, context), - }) + }, context) )}`, -}); \ No newline at end of file +}, context); diff --git a/components/progressbar/stories/meter.template.js b/components/progressbar/stories/meter.template.js index 8edfc5becd8..8c045d1cf05 100644 --- a/components/progressbar/stories/meter.template.js +++ b/components/progressbar/stories/meter.template.js @@ -34,11 +34,11 @@ export const Template = ({ export const FillGroup = (args, context) => Container({ withBorder: false, withHeading: false, - content: html`${["info", "positive", "negative", "notice"].map((variant) => + content: html`${["info", "positive", "negative", "notice"].map((variant) => Container({ withBorder: false, heading: variant, content: Template({...args, fill: variant}, context), - }) + }, context) )}` -}); +}, context); diff --git a/components/progressbar/stories/template.js b/components/progressbar/stories/template.js index 72c9a2a6c3a..84fd9506b7e 100644 --- a/components/progressbar/stories/template.js +++ b/components/progressbar/stories/template.js @@ -74,11 +74,11 @@ export const IndeterminateGroup = (args, context) => Container({ withBorder: false, heading: "Determinate", content: Template(args, context) - })} + }, context)} ${Container({ withBorder: false, heading: "Indeterminate", content: Template({ ...args, isIndeterminate: true }, context) - })} + }, context)} ` -}); +}, context); diff --git a/components/radio/stories/template.js b/components/radio/stories/template.js index 459f2cb9f6a..ef93d33510d 100644 --- a/components/radio/stories/template.js +++ b/components/radio/stories/template.js @@ -88,4 +88,4 @@ export const BasicGroupTemplate = (args, context) => Container({ name: "radio-example-" + (args?.name ?? "default"), }, context)} `, -}); \ No newline at end of file +}, context); diff --git a/components/search/stories/template.js b/components/search/stories/template.js index 49ae6645500..09570d33581 100644 --- a/components/search/stories/template.js +++ b/components/search/stories/template.js @@ -46,7 +46,7 @@ export const Template = ({ size, customClasses: [`${rootClass}-clearButton`], }, context)} - ${when(hasDescription, () => + ${when(hasDescription, () => HelpText({ text: description, size, @@ -71,5 +71,6 @@ export const SearchOptions = ({ ${Template({ ...args, isQuiet: true - }, context)}` -}); \ No newline at end of file + }, context)} + ` +}, context); diff --git a/components/statuslight/stories/template.js b/components/statuslight/stories/template.js index 5874ece9279..2faf35797c8 100644 --- a/components/statuslight/stories/template.js +++ b/components/statuslight/stories/template.js @@ -39,7 +39,7 @@ export const SemanticGroup = (args, context) => Container({ "notice", "positive"].map(variant => Template({...args, variant: variant, label: `${variant.charAt(0).toUpperCase() + variant.slice(1)} status` }, context)) }` -}); +}, context); export const NonsemanticGroup = (args, context) => Container({ withBorder: false, @@ -60,4 +60,4 @@ export const NonsemanticGroup = (args, context) => Container({ "fuchsia", "magenta",].map(variant => Template({...args, variant: variant, label: `${variant.charAt(0).toUpperCase() + variant.slice(1)}`}, context)) }` -}); +}, context); diff --git a/components/steplist/stories/template.js b/components/steplist/stories/template.js index 737306a24b9..7edfdf8199b 100644 --- a/components/steplist/stories/template.js +++ b/components/steplist/stories/template.js @@ -1,4 +1,4 @@ -import { getRandomId, Container } from "@spectrum-css/preview/decorators"; +import { Container, getRandomId } from "@spectrum-css/preview/decorators"; import { Template as Tooltip } from "@spectrum-css/tooltip/stories/template.js"; import { html, nothing } from "lit"; import { classMap } from "lit/directives/class-map.js"; @@ -118,11 +118,11 @@ export const DocsSteplistGroup = (args, context) => Container({ withBorder: false, heading: "Static", content: Template(args, context), - })} + }, context)} ${Container({ withBorder: false, heading: "Interactive", content: Template({...args, isInteractive: true} ,context), - })} + }, context)} ` -}); +}, context); diff --git a/components/stepper/stories/template.js b/components/stepper/stories/template.js index d93c7343428..fb14155af87 100644 --- a/components/stepper/stories/template.js +++ b/components/stepper/stories/template.js @@ -110,7 +110,7 @@ export const AllDefaultVariantsGroup = (args, context) => Container({ }, heading: "Default", content: Template(args, context) - })} + }, context)} ${Container({ withBorder: false, containerStyles: { @@ -118,7 +118,7 @@ export const AllDefaultVariantsGroup = (args, context) => Container({ }, heading: "Invalid", content: Template({...args, isInvalid: true}, context) - })} + }, context)} ${Container({ withBorder: false, containerStyles: { @@ -126,7 +126,7 @@ export const AllDefaultVariantsGroup = (args, context) => Container({ }, heading: "Hovered", content: Template({...args, isHovered: true}, context) - })} + }, context)} ${Container({ withBorder: false, containerStyles: { @@ -134,7 +134,7 @@ export const AllDefaultVariantsGroup = (args, context) => Container({ }, heading: "Focused", content: Template({...args, isFocused: true}, context) - })} + }, context)} ${Container({ withBorder: false, containerStyles: { @@ -142,7 +142,7 @@ export const AllDefaultVariantsGroup = (args, context) => Container({ }, heading: "Invalid, focused", content: Template({...args, isInvalid: true, isFocused: true}, context) - })} + }, context)} ${Container({ withBorder: false, containerStyles: { @@ -150,7 +150,7 @@ export const AllDefaultVariantsGroup = (args, context) => Container({ }, heading: "Keyboard-focused", content: Template({...args, isKeyboardFocused: true}, context) - })} + }, context)} ${Container({ withBorder: false, containerStyles: { @@ -158,9 +158,9 @@ export const AllDefaultVariantsGroup = (args, context) => Container({ }, heading: "Invalid, keyboard-focused", content: Template({...args, isInvalid: true, isKeyboardFocused: true}, context) - })} + }, context)} ` -}); +}, context); /* Shows the disabled variants of the default and quiet stories one grouping. */ export const DisabledVariantsGroup = (args, context) => Container({ @@ -173,7 +173,7 @@ export const DisabledVariantsGroup = (args, context) => Container({ }, heading: "Default", content: Template(args, context) - })} + }, context)} ${Container({ withBorder: false, containerStyles: { @@ -181,6 +181,6 @@ export const DisabledVariantsGroup = (args, context) => Container({ }, heading: "Quiet", content: Template({...args, isQuiet: true}, context) - })} + }, context)} ` -}); +}, context); diff --git a/components/swatch/stories/template.js b/components/swatch/stories/template.js index c58cf016d49..b4fd333417e 100644 --- a/components/swatch/stories/template.js +++ b/components/swatch/stories/template.js @@ -1,12 +1,12 @@ import { Template as Icon } from "@spectrum-css/icon/stories/template.js"; import { Template as OpacityCheckerboard } from "@spectrum-css/opacitycheckerboard/stories/template.js"; -import { getRandomId, Container } from "@spectrum-css/preview/decorators"; +import { Container, 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 { capitalize, lowerCase } from "lodash-es"; import { when } from "lit/directives/when.js"; +import { capitalize, lowerCase } from "lodash-es"; import "../index.css"; @@ -118,21 +118,21 @@ export const RoundingGroup = (args, context) => Container({ heading: "Regular", containerStyles: { "gap": "8px" }, content: Template(args, context), - })} + }, context)} ${Container({ withBorder: false, heading: "Full", containerStyles: { "gap": "8px" }, content: Template({...args, rounding: "full", }, context), - })} + }, context)} ${Container({ withBorder: false, heading: "None", containerStyles: { "gap": "8px" }, content: Template({...args, rounding: "none", }, context), - })} + }, context)} ` -}); +}, context); /* Shows a single group of swatches with all border options. */ export const BorderGroup = (args, context) => Container({ @@ -143,21 +143,21 @@ export const BorderGroup = (args, context) => Container({ heading: "Default", containerStyles: { "gap": "8px" }, content: Template(args, context), - })} + }, context)} ${Container({ withBorder: false, heading: "No border", containerStyles: { "gap": "8px" }, content: Template({...args, borderStyle: "noBorder"}, context), - })} + }, context)} ${Container({ withBorder: false, heading: "Light Border", containerStyles: { "gap": "8px" }, content: Template({...args, borderStyle: "lightBorder"}, context), - })} + }, context)} ` -}); +}, context); /* Shows a single group of swatches that are empty/nothing in various shapes and rounding. */ export const EmptyGroup = (args, context) => Container({ @@ -167,19 +167,19 @@ export const EmptyGroup = (args, context) => Container({ withBorder: false, containerStyles: { "gap": "8px" }, content: Template(args, context), - })} + }, context)} ${Container({ withBorder: false, containerStyles: { "gap": "8px" }, content: Template({...args, rounding: "full", }, context), - })} + }, context)} ${Container({ withBorder: false, containerStyles: { "gap": "8px" }, content: Template({...args, shape: "rectangle", }, context), - })} + }, context)} ` -}); +}, context); /* Shows a single group of disabled swatches. */ export const DisabledGroup = (args, context) => Container({ @@ -189,14 +189,14 @@ export const DisabledGroup = (args, context) => Container({ withBorder: false, withHeading: false, content: Template(args, context), - })} + }, context)} ${Container({ withBorder: false, withHeading: false, content: Template({...args, rounding: "full", }, context), - })} + }, context)} ` -}); +}, context); export const SizingGroup = (args, context) =>Container({ withBorder: false, @@ -205,11 +205,11 @@ export const SizingGroup = (args, context) =>Container({ withBorder: false, withHeading: false, content: Template(args, context), - })} + }, context)} ${Container({ withBorder: false, withHeading: false, content: Template({...args, swatchColor: "rgba(174, 216, 230, 0.25)"}, context), - })} + }, context)} ` }); diff --git a/components/swatchgroup/stories/template.js b/components/swatchgroup/stories/template.js index 3cab50701c3..01c059998bd 100644 --- a/components/swatchgroup/stories/template.js +++ b/components/swatchgroup/stories/template.js @@ -1,4 +1,4 @@ -import { getRandomId, Container } from "@spectrum-css/preview/decorators"; +import { Container, getRandomId } from "@spectrum-css/preview/decorators"; import { Template as Swatch } from "@spectrum-css/swatch/stories/template.js"; import { html } from "lit"; import { classMap } from "lit/directives/class-map.js"; @@ -17,7 +17,7 @@ export const Template = ({ containerWidth, items = [], customStyles = {}, - isDisabled =false, + isDisabled =false, isSelected = false, id = getRandomId("swatchgroup"), } = {}, context = {}) => html` @@ -59,7 +59,7 @@ export const RoundingTemplate = (args, context) => Container({ ...args, rounding: "full", }, context) - })} + }, context)} ${Container({ withBorder: false, heading: "Regular", @@ -68,7 +68,7 @@ export const RoundingTemplate = (args, context) => Container({ ...args, rounding: "regular", }, context) - })} + }, context)} ${Container({ withBorder: false, heading: "None", @@ -77,6 +77,6 @@ export const RoundingTemplate = (args, context) => Container({ ...args, rounding: "none", }, context) - })} + }, context)} ` -}); +}, context); diff --git a/components/switch/stories/template.js b/components/switch/stories/template.js index 4c4d8c8fb22..4f0877d5c86 100644 --- a/components/switch/stories/template.js +++ b/components/switch/stories/template.js @@ -54,26 +54,23 @@ export const Template = ({ export const DocsSwitchGroup = (args, context) => Container({ withBorder: false, content: html` - ${Container({ - heading: "Not selected", - withBorder: false, - content: html` - ${Template({ + ${Container({ + heading: "Not selected", + withBorder: false, + content: Template({ ...args, context, isChecked: false, - })} - ` - })} - ${Container({ - heading: "Selected", - withBorder: false, - content: html` - ${Template({ + }) + }, context)} + ${Container({ + heading: "Selected", + withBorder: false, + content: Template({ ...args, context, isChecked: true, - })} - ` - })}` -}); + }) + }, context)} + ` +}, context); diff --git a/components/tabs/stories/template.js b/components/tabs/stories/template.js index 2e5c4ee6d45..387683f1ae9 100644 --- a/components/tabs/stories/template.js +++ b/components/tabs/stories/template.js @@ -175,15 +175,15 @@ export const OverflowGroup = (args, context) => Container({ heading: "Default overflow", containerStyles: { "gap": "8px", }, content: Template(args, context), - })} + }, context)} ${Container({ withBorder: false, heading: "Compact overflow", containerStyles: { "gap": "8px", }, content: Template({...args, isCompact: true, isQuiet: true}, context), - })} + }, context)} ` -}); +}, context); export const VerticalGroup = (args, context) => Container({ direction: "column", @@ -195,51 +195,51 @@ export const VerticalGroup = (args, context) => Container({ heading: "Label and icon", containerStyles: {"gap": "8px"}, content: Template(args, context), - })} + }, context)} ${Container({ withBorder: false, heading: "Emphasized, with label and icon", containerStyles: {"gap": "8px"}, content: Template({...args, isEmphasized: true, }, context), - })} + }, context)} ${Container({ withBorder: false, heading: "Label only", containerStyles: {"gap": "8px"}, content: Template({...args, content: LabelOnlyTabsContent, }, context), - })} + }, context)} ${Container({ withBorder: false, heading: "Emphasized, with label only", containerStyles: {"gap": "8px"}, content: Template({...args, isEmphasized: true, content: LabelOnlyTabsContent, }, context), - })} + }, context)} ${Container({ withBorder: false, heading: "Compact, with label and icon", containerStyles: {"gap": "8px"}, content: Template({...args, isCompact: true, isQuiet: true, }, context), - })} + }, context)} ${Container({ withBorder: false, heading: "Compact, emphasized, with label and icon", containerStyles: {"gap": "8px"}, content: Template({...args, isEmphasized: true, isCompact: true, isQuiet: true, }, context), - })} + }, context)} ${Container({ withBorder: false, heading: "Compact, label only", containerStyles: {"gap": "8px"}, content: Template({...args, content: LabelOnlyTabsContent, isCompact: true, isQuiet: true, }, context), - })} + }, context)} ${Container({ withBorder: false, heading: "Compact, emphasized label only", containerStyles: {"gap": "8px"}, content: Template({...args, isEmphasized: true, content: LabelOnlyTabsContent, isCompact: true, isQuiet: true, }, context), - })} + }, context)} ` -}); +}, context); /* Shows variants of quiet story in a single group. */ export const QuietGroup = (args, context) => Container({ @@ -251,34 +251,34 @@ export const QuietGroup = (args, context) => Container({ withBorder: false, heading: "Label and icon", content: Template(args, context), - })} + }, context)} ${Container({ withBorder: false, heading: "Emphasized, with label and icon", content: Template({...args, isEmphasized: true, }, context), - })} + }, context)} ${Container({ withBorder: false, heading: "Label only", content: Template({...args, content: LabelOnlyTabsContent, }, context), - })} + }, context)} ${Container({ withBorder: false, heading: "Emphasized, with label only", content: Template({...args, isEmphasized: true, content: LabelOnlyTabsContent, }, context), - })} + }, context)} ${Container({ withBorder: false, heading: "Icon only", content: Template({...args, iconOnly: true, }, context), - })} + }, context)} ${Container({ withBorder: false, heading: "Emphasized, icon-only", content: Template({...args, isEmphasized: true, iconOnly: true, }, context), - })} + }, context)} ` -}); +}, context); /* Shows variants of compact story in a single group. */ export const CompactGroup = (args, context) => Container({ @@ -290,31 +290,31 @@ export const CompactGroup = (args, context) => Container({ withBorder: false, heading: "Label and icon (quiet)", content: Template(args, context), - })} + }, context)} ${Container({ withBorder: false, heading: "Emphasized, with label and icon (quiet)", content: Template({...args, isEmphasized: true, }, context), - })} + }, context)} ${Container({ withBorder: false, heading: "Label only", content: Template({...args, content: LabelOnlyTabsContent, }, context), - })} + }, context)} ${Container({ withBorder: false, heading: "Emphasized, with label only (quiet)", content: Template({...args, isEmphasized: true, content: LabelOnlyTabsContent, }, context), - })} + }, context)} ${Container({ withBorder: false, heading: "Icon only (quiet)", content: Template({...args, iconOnly: true, }, context), - })} + }, context)} ${Container({ withBorder: false, heading: "Emphasized, icon-only (quiet)", content: Template({...args, isEmphasized: true, iconOnly: true, }, context), - })} + }, context)} ` -}); +}, context); diff --git a/components/tag/stories/template.js b/components/tag/stories/template.js index 5cac6b1e5e3..ee4b244dd43 100644 --- a/components/tag/stories/template.js +++ b/components/tag/stories/template.js @@ -2,7 +2,7 @@ import { Template as Avatar } from "@spectrum-css/avatar/stories/template.js"; import { Template as ClearButton } from "@spectrum-css/clearbutton/stories/template.js"; import { Template as Icon } from "@spectrum-css/icon/stories/template.js"; import { Container, getRandomId } from "@spectrum-css/preview/decorators"; -import { html } from "lit"; +import { html, nothing } 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"; @@ -84,22 +84,20 @@ export const TagsDefaultOptions = ({ columnGap: "12px", }, content: html` - ${Template({ - ...args, - }, context )} - ${!args.isInvalid ? + ${Template(args, context)} + ${!args.isInvalid ? Template({ ...args, hasIcon: true, iconName: "CheckmarkCircle" - }, context ): "" } - ${!args.isInvalid ? + }, context): nothing } + ${!args.isInvalid ? Template({ ...args, hasAvatar: true, avatarUrl: "example-ava.png", - }, context ): "" }`, -}); + }, context): nothing }`, +}, context); export const SelectedTemplate = (args, context) => Container({ withBorder: false, @@ -118,5 +116,5 @@ export const SelectedTemplate = (args, context) => Container({ isSelected, isInvalid }) - }, context ))}` -}); \ No newline at end of file + }, context))}` +}, context); diff --git a/components/textfield/stories/template.js b/components/textfield/stories/template.js index 9a7f064cd38..0baad2b50d3 100644 --- a/components/textfield/stories/template.js +++ b/components/textfield/stories/template.js @@ -209,14 +209,14 @@ export const HelpTextOptions = (args, context) => Container({ withBorder: false, heading: "Description", content: Template({...args, isRequired: true, labelText: "Username", value: "lisawilson24", helpText: "Username must be at least 8 characters."}, context), - })} + }, context)} ${Container({ withBorder: false, heading: "Error message", content: Template({...args, isRequired: true, labelText: "Email address", value: "abc@adobe.com", helpText: "Enter your email address", isInvalid: true }, context), - })} + }, context)} ` -}); +}, context); export const TextFieldOptions = (args, context) => Container({ direction: "row", @@ -232,7 +232,7 @@ export const TextFieldOptions = (args, context) => Container({ }, heading: "Default", content: Template({...args, context}) - })} + }, context)} ${Container({ withBorder: false, containerStyles: { @@ -240,7 +240,7 @@ export const TextFieldOptions = (args, context) => Container({ }, heading: "Invalid", content: Template({...args, isInvalid: true}, context) - })} + }, context)} ${Container({ withBorder: false, containerStyles: { @@ -248,7 +248,7 @@ export const TextFieldOptions = (args, context) => Container({ }, heading: "Focused", content: Template({...args, isFocused: true}, context) - })} + }, context)} ${Container({ withBorder: false, containerStyles: { @@ -256,7 +256,7 @@ export const TextFieldOptions = (args, context) => Container({ }, heading: "Invalid, focused", content: Template({...args, isInvalid: true, isFocused: true}, context) - })} + }, context)} ${Container({ withBorder: false, containerStyles: { @@ -264,7 +264,7 @@ export const TextFieldOptions = (args, context) => Container({ }, heading: "Keyboard-focused", content: Template({...args, isKeyboardFocused: true}, context) - })} + }, context)} ${Container({ withBorder: false, containerStyles: { @@ -272,6 +272,6 @@ export const TextFieldOptions = (args, context) => Container({ }, heading: "Invalid, keyboard-focused", content: Template({...args, isInvalid: true, isKeyboardFocused: true}, context) - })} + }, context)} ` -}); +}, context); diff --git a/components/textfield/stories/textarea.template.js b/components/textfield/stories/textarea.template.js index 379131c4c16..8b9d44e7374 100644 --- a/components/textfield/stories/textarea.template.js +++ b/components/textfield/stories/textarea.template.js @@ -28,14 +28,14 @@ export const HelpTextOptionsTextArea = (args, context) => Container({ withBorder: false, heading: "Description", content: Template({...args, isRequired: true, labelText: "Interests", value: "", helpText: "Describe the interests you'd like to explore through our tutorials."}, context), - })} + }, context)} ${Container({ withBorder: false, heading: "Error message", content: Template({...args, isRequired: true, labelText: "Interests", value: "", helpText: "Enter at least one interest.", isInvalid: true }, context), - })} + }, context)} ` -}); +}, context); export const TextAreaOptions = (args, context) => Container({ direction: "row", @@ -51,7 +51,7 @@ export const TextAreaOptions = (args, context) => Container({ }, heading: "Default", content: Template({...args, context}) - })} + }, context)} ${Container({ withBorder: false, containerStyles: { @@ -59,7 +59,7 @@ export const TextAreaOptions = (args, context) => Container({ }, heading: "Invalid", content: Template({...args, isInvalid: true}, context) - })} + }, context)} ${Container({ withBorder: false, containerStyles: { @@ -67,7 +67,7 @@ export const TextAreaOptions = (args, context) => Container({ }, heading: "Focused", content: Template({...args, isFocused: true}, context) - })} + }, context)} ${Container({ withBorder: false, containerStyles: { @@ -75,7 +75,7 @@ export const TextAreaOptions = (args, context) => Container({ }, heading: "Invalid, focused", content: Template({...args, isInvalid: true, isFocused: true}, context) - })} + }, context)} ${Container({ withBorder: false, containerStyles: { @@ -83,7 +83,7 @@ export const TextAreaOptions = (args, context) => Container({ }, heading: "Keyboard-focused", content: Template({...args, isKeyboardFocused: true}, context) - })} + }, context)} ${Container({ withBorder: false, containerStyles: { @@ -91,6 +91,6 @@ export const TextAreaOptions = (args, context) => Container({ }, heading: "Invalid, keyboard-focused", content: Template({...args, isInvalid: true, isKeyboardFocused: true}, context) - })} + }, context)} ` -}); +}, context); diff --git a/components/toast/stories/template.js b/components/toast/stories/template.js index fc6e6350bd6..6bf43215408 100644 --- a/components/toast/stories/template.js +++ b/components/toast/stories/template.js @@ -97,7 +97,7 @@ export const ToastWrapOptions = (args, context) => Container({ "max-inline-size": "240px" }, }, context)}` -}); +}, context); export const ActionTemplate = (args, context) => Container({ withBorder: false, @@ -130,4 +130,4 @@ export const ActionTemplate = (args, context) => Container({ variant: "negative", inlineButtonLabel: "Show" }, context)}` -}); \ No newline at end of file +}, context); diff --git a/components/tooltip/stories/template.js b/components/tooltip/stories/template.js index 340a302d102..4098beb8b73 100644 --- a/components/tooltip/stories/template.js +++ b/components/tooltip/stories/template.js @@ -107,7 +107,7 @@ export const TooltipShowOnHover = (args, context) => { heading, content: html`
- ${placements.map((placement) => + ${placements.map((placement) => when(placement.startsWith(heading), () => html` ${capitalize(placement.replace(/-/g, " "))} @@ -121,9 +121,9 @@ export const TooltipShowOnHover = (args, context) => { )}
` - })} - `) - }); + }, context)} + `) + }, context); }; export const TooltipPlacementGroup = (args, context) => Container({ @@ -138,9 +138,9 @@ export const TooltipPlacementGroup = (args, context) => Container({ placement, })} ` - })} + }, context)} `) -}); +}, context); // these variants no longer exist in s2 export const SemanticVariantGroup = (args, context) => { @@ -163,7 +163,7 @@ export const SemanticVariantGroup = (args, context) => { variant, })} ` - })} + }, context)} `) - }); + }, context); }; diff --git a/components/typography/stories/template.js b/components/typography/stories/template.js index 1f0ae97eef3..d246c7a24d4 100644 --- a/components/typography/stories/template.js +++ b/components/typography/stories/template.js @@ -141,7 +141,6 @@ export const Template = (args = {}, context = {}) => { }; // ********* Template groups for displaying typography variants ********* // - const RegularBoldItalicGroup = (args, context) => Container({ direction: "column", withBorder: false, @@ -149,7 +148,6 @@ const RegularBoldItalicGroup = (args, context) => Container({ content: html` ${Template({ ...args, - context, content: [ { content: `Regular ${args.semantics} text`, @@ -168,8 +166,8 @@ const RegularBoldItalicGroup = (args, context) => Container({ variant: ["strong", "emphasized"], }, ] - })}` -}); + }, context)}` +}, context); export const DocsHeadingVariants = (args, context) => Container({ withBorder: false, @@ -178,34 +176,34 @@ export const DocsHeadingVariants = (args, context) => Container({ direction: "column", heading: "Default/sans serif", content: RegularBoldItalicGroup({...args, semantics: "heading"}, context) - })} + }, context)} ${Container({ direction: "column", heading: "Heavy sans serif", content: RegularBoldItalicGroup({...args, semantics: "heading", weight: "heavy"}, context) - })} + }, context)} ${Container({ direction: "column", heading: "Light sans serif", content: RegularBoldItalicGroup({...args, semantics: "heading", weight: "light"}, context) - })} + }, context)} ${Container({ direction: "column", heading: "Serif", content: RegularBoldItalicGroup({...args, semantics: "heading", glyph: "serif"}, context) - })} + }, context)} ${Container({ direction: "column", heading: "Heavy serif", content: RegularBoldItalicGroup({...args, semantics: "heading", weight: "heavy", glyph: "serif"}, context) - })} + }, context)} ${Container({ direction: "column", heading: "Light serif", content: RegularBoldItalicGroup({...args, semantics: "heading", weight: "light", glyph: "serif"}, context) - })} + }, context)} ` -}); +}, context); export const DocsBodyVariants = (args, context) => Container({ withBorder: false, @@ -214,14 +212,14 @@ export const DocsBodyVariants = (args, context) => Container({ direction: "column", heading: "Default/sans serif", content: RegularBoldItalicGroup({...args, semantics: "body"}, context) - })} + }, context)} ${Container({ direction: "column", heading: "Serif", content: RegularBoldItalicGroup({...args, semantics: "body", glyph: "serif"}, context) - })} + }, context)} ` -}); +}, context); export const DocsDetailVariants = (args, context) => Container({ withBorder: false, @@ -230,24 +228,24 @@ export const DocsDetailVariants = (args, context) => Container({ direction: "column", heading: "Default/sans serif", content: RegularBoldItalicGroup({...args, semantics: "detail"}, context) - })} + }, context)} ${Container({ direction: "column", heading: "Serif", content: RegularBoldItalicGroup({...args, semantics: "detail", glyph: "serif"}, context) - })} + }, context)} ${Container({ direction: "column", heading: "Light sans serif", content: RegularBoldItalicGroup({...args, semantics: "detail", weight: "light"}, context) - })} + }, context)} ${Container({ direction: "column", heading: "Light Serif", content: RegularBoldItalicGroup({...args, semantics: "detail", glyph: "serif", weight: "light"}, context) - })} + }, context)} ` -}); +}, context); export const DocsCodeVariants = (args, context) => Container({ withBorder: false, @@ -256,17 +254,15 @@ export const DocsCodeVariants = (args, context) => Container({ direction: "column", heading: "Default/sans serif", content: RegularBoldItalicGroup({...args, semantics: "code"}, context) - })} + }, context)} ` -}); +}, context); export const DocsHeadingBodyPairing = (args, context) => Container({ direction: "column", withBorder: false, - content: html` - ${Template({ + content: Template({ ...args, - context, content: [ { semantics: "heading", @@ -278,8 +274,8 @@ export const DocsHeadingBodyPairing = (args, context) => Container({ content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat. Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia." } ] - })}` -}); + }, context) +}, context); // ********* Template groups for Internationalization ********* // @@ -287,26 +283,24 @@ const InternationalizedRegularBoldItalicGroup = (args, context) => Container({ direction: "column", withBorder: false, wrapperStyles: {"row-gap": "0"}, - content: html` - ${Template({ - ...args, - context, - content: [ - { - content: html`${args.internationalizedContent.regular} (regular ${args.semantics})`, - customStyles: {"margin-block-start": "0"}, - }, - { - content: html`${args.internationalizedContent.emphasized} (emphasized ${args.semantics})`, - variant: ["emphasized"], - }, - { - content: html`${args.internationalizedContent.strong} (strong ${args.semantics})`, - variant: ["strong"], - } - ] - })}` -}); + content: Template({ + ...args, + content: [ + { + content: html`${args.internationalizedContent.regular} (regular ${args.semantics})`, + customStyles: {"margin-block-start": "0"}, + }, + { + content: html`${args.internationalizedContent.emphasized} (emphasized ${args.semantics})`, + variant: ["emphasized"], + }, + { + content: html`${args.internationalizedContent.strong} (strong ${args.semantics})`, + variant: ["strong"], + } + ] + }, context) +}, context); // @todo these are carryover from the docs site; need to ensure accuracy in translation // they might all mean "heading" @@ -340,7 +334,7 @@ export const DocsInternationalizedHeadingVariants = (args, context) => Container lang: "ja", internationalizedContent: JapaneseInternationalizedContent, }, context) - })} + }, context)} ${Container({ direction: "column", heading: "Japanese (heavy)", @@ -351,7 +345,7 @@ export const DocsInternationalizedHeadingVariants = (args, context) => Container internationalizedContent: JapaneseInternationalizedContent, weight: "heavy" }, context) - })} + }, context)} ${Container({ direction: "column", heading: "Japanese (light)", @@ -362,7 +356,7 @@ export const DocsInternationalizedHeadingVariants = (args, context) => Container internationalizedContent: JapaneseInternationalizedContent, weight: "light" }, context) - })} + }, context)} ${Container({ direction: "column", heading: "Arabic (default)", @@ -372,7 +366,7 @@ export const DocsInternationalizedHeadingVariants = (args, context) => Container lang: "ar", internationalizedContent: ArabicInternationalizedContent, }, context) - })} + }, context)} ${Container({ direction: "column", heading: "Arabic (heavy)", @@ -383,7 +377,7 @@ export const DocsInternationalizedHeadingVariants = (args, context) => Container internationalizedContent: ArabicInternationalizedContent, weight: "heavy" }, context) - })} + }, context)} ${Container({ direction: "column", heading: "Arabic (light)", @@ -394,7 +388,7 @@ export const DocsInternationalizedHeadingVariants = (args, context) => Container internationalizedContent: ArabicInternationalizedContent, weight: "light" }, context) - })} + }, context)} ${Container({ direction: "column", heading: "Hebrew (default)", @@ -404,7 +398,7 @@ export const DocsInternationalizedHeadingVariants = (args, context) => Container lang: "he", internationalizedContent: HebrewInternationalizedContent, }, context) - })} + }, context)} ${Container({ direction: "column", heading: "Hebrew (heavy)", @@ -415,7 +409,7 @@ export const DocsInternationalizedHeadingVariants = (args, context) => Container internationalizedContent: HebrewInternationalizedContent, weight: "heavy" }, context) - })} + }, context)} ${Container({ direction: "column", heading: "Hebrew (light)", @@ -426,7 +420,7 @@ export const DocsInternationalizedHeadingVariants = (args, context) => Container internationalizedContent: HebrewInternationalizedContent, weight: "light" }, context) - })} + }, context)} ` }); @@ -442,7 +436,7 @@ export const DocsInternationalizedBodyVariants = (args, context) => Container({ lang: "ja", internationalizedContent: JapaneseInternationalizedContent, }, context) - })} + }, context)} ${Container({ direction: "column", heading: "Arabic", @@ -452,7 +446,7 @@ export const DocsInternationalizedBodyVariants = (args, context) => Container({ lang: "ar", internationalizedContent: ArabicInternationalizedContent, }, context) - })} + }, context)} ${Container({ direction: "column", heading: "Hebrew", @@ -462,7 +456,7 @@ export const DocsInternationalizedBodyVariants = (args, context) => Container({ lang: "he", internationalizedContent: HebrewInternationalizedContent, }, context) - })} + }, context)} ` }); @@ -478,7 +472,7 @@ export const DocsInternationalizedDetailVariants = (args, context) => Container( lang: "ja", internationalizedContent: JapaneseInternationalizedContent, }, context) - })} + }, context)} ${Container({ direction: "column", heading: "Arabic", @@ -488,7 +482,7 @@ export const DocsInternationalizedDetailVariants = (args, context) => Container( lang: "ar", internationalizedContent: ArabicInternationalizedContent, }, context) - })} + }, context)} ${Container({ direction: "column", heading: "Hebrew", @@ -498,39 +492,32 @@ export const DocsInternationalizedDetailVariants = (args, context) => Container( lang: "he", internationalizedContent: HebrewInternationalizedContent, }, context) - })} + }, context)} ` -}); +}, context); export const DocsInternationalizedCodeVariants = (args, context) => Container({ withBorder: false, wrapperStyles: {"row-gap": "0"}, - content: html` - ${Container({ + content: Container({ direction: "column", heading: "Japanese", wrapperStyles: {"row-gap": "0"}, - content: html` - ${Template({ - ...args, - context, - content: ["暗号", "Code"], - semantics: "code", - lang: "ja", - skipLineBreak: true, - })} - ` - })} - ` -}); + content: Template({ + ...args, + content: ["暗号", "Code"], + semantics: "code", + lang: "ja", + skipLineBreak: true, + }, context) + }, context) +}, context); export const DocsInternationalizedHeadingBodyPairing = (args, context) => Container({ direction: "column", withBorder: false, - content: html` - ${Template({ + content: Template({ ...args, - context, lang: "ja", content: [ { @@ -543,5 +530,5 @@ export const DocsInternationalizedHeadingBodyPairing = (args, context) => Contai content: "見出しとよく対になる本文。", } ], - })}` -}); + }, context) +}, context);