Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs: storybook description format; lit syntax alignment #2681

Merged
merged 2 commits into from
May 2, 2024
Merged

docs: storybook description format; lit syntax alignment #2681

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f18dfe2
chore: storybook description format; lit syntax alignment
castastrophe Apr 26, 2024
689a461
Merge branch 'main' into chore-storybook-descriptions-formatting
castastrophe May 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
6 changes: 3 additions & 3 deletions components/accordion/stories/accordion.stories.js
View file
Open in desktop
Expand Up @@ -150,9 +150,9 @@ export default {
const AccordionGroup = (args) => html`
${window.isChromatic() ? html`
<div style=${styleMap({
display: "flex",
flexWrap: "wrap",
gap: "2em"
"display": "flex",
"flex-wrap": "wrap",
"gap": "28px"
})}>
${Template(args)}
${Template({
Expand Down
90 changes: 44 additions & 46 deletions components/accordion/stories/template.js
View file
Open in desktop
Expand Up @@ -23,55 +23,53 @@ export const AccordionItem = ({
customClasses = [],
onclick,
...globals
}) => {
return html`
}) => html`
<div
class=${classMap({
[rootClass]: true,
"is-open": isOpen && !isDisabled,
"is-disabled": isDisabled,
...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
})}
id=${ifDefined(id)}
style=${ifDefined(styleMap(customStyles))}
role="presentation"
@click=${onclick}
>
<!-- WAI-ARIA 1.1: Item header is a <button> wrapped within a <h3> element, rather than a <div> element with role="tab" -->
<h3 class="${rootClass}Heading">
<!-- WAI-ARIA 1.1: Item header <button> uses aria-expanded attribute to indicate expanded state. -->
<button
class="${rootClass}Header"
type="button"
?disabled=${isDisabled}
id="spectrum-accordion-item-${idx}-header"
aria-controls="spectrum-accordion-item-${idx}-content"
aria-expanded="${open ? "true" : "false"}"
>
${heading}
</button>
<span class="${rootClass}IconContainer">
${Icon({
iconName: !isOpen ? "ChevronRight" : "ChevronDown",
setName: "ui",
size: iconSize,
customClasses: [`${rootClass}Indicator`],
...globals,
})}
</span>
</h3>
<!-- WAI-ARIA 1.1: Item content role changed from "tabpanel" to "region" -->
<div
class=${classMap({
[rootClass]: true,
"is-open": isOpen && !isDisabled,
"is-disabled": isDisabled,
...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
})}
id=${ifDefined(id)}
style=${ifDefined(styleMap(customStyles))}
role="presentation"
@click=${onclick}
class="${rootClass}Content"
role="region"
id="spectrum-accordion-item-${idx}-content"
aria-labelledby="spectrum-accordion-item-${idx}-header"
>
<!-- WAI-ARIA 1.1: Item header is a <button> wrapped within a <h3> element, rather than a <div> element with role="tab" -->
<h3 class="${rootClass}Heading">
<!-- WAI-ARIA 1.1: Item header <button> uses aria-expanded attribute to indicate expanded state. -->
<button
class="${rootClass}Header"
type="button"
?disabled=${isDisabled}
id="spectrum-accordion-item-${idx}-header"
aria-controls="spectrum-accordion-item-${idx}-content"
aria-expanded="${open ? "true" : "false"}"
>
${heading}
</button>
<span class="${rootClass}IconContainer">
${Icon({
iconName: !isOpen ? "ChevronRight" : "ChevronDown",
setName: "ui",
size: iconSize,
customClasses: [`${rootClass}Indicator`],
...globals,
})}
</span>
</h3>
<!-- WAI-ARIA 1.1: Item content role changed from "tabpanel" to "region" -->
<div
class="${rootClass}Content"
role="region"
id="spectrum-accordion-item-${idx}-content"
aria-labelledby="spectrum-accordion-item-${idx}-header"
>
${content}
</div>
${content}
</div>
`;
};
</div>
`;

export const Template = ({
rootClass = "spectrum-Accordion",
Expand Down
7 changes: 4 additions & 3 deletions components/actionbar/stories/actionbar.stories.js
View file
Open in desktop
@@ -1,14 +1,15 @@
// Import the component markup template
import { Template } from "./template";

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";

/**
* The action bar component is a floating full width bar that appears upon selection.
*/
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: {
isOpen: {
name: "Open",
Expand Down
2 changes: 1 addition & 1 deletion components/actionbar/stories/template.js
View file
Open in desktop
Expand Up @@ -51,7 +51,7 @@ export const Template = ({
...globals,
size: "m",
areQuiet: true,
staticColors: isEmphasized ? "white" : undefined,
staticColor: isEmphasized ? "white" : undefined,
content: [
{
iconName: "Edit",
Expand Down
42 changes: 21 additions & 21 deletions components/actionbutton/stories/actionbutton.stories.js
View file
Open in desktop
Expand Up @@ -120,7 +120,7 @@ export default {
control: "boolean",
},
staticColor: {
name: "StaticColor",
name: "Static color",
type: { name: "string" },
table: {
type: { summary: "string" },
Expand Down Expand Up @@ -161,18 +161,18 @@ export default {
.spectrum-Typography > div {
border: 1px solid var(--spectrum-gray-200);
border-radius: 4px;
padding: 0 1em 1em;
padding: 0 14px 14px;
/* Why seafoam? Because it separates it from the component styles. */
--mod-detail-font-color: var(--spectrum-seafoam-900);
}
</style>
<div
style=${styleMap({
display: "flex",
flexDirection: "column",
alignItems: "flex-start",
gap: "1rem",
"--mod-detail-margin-end": ".3rem",
"display": "flex",
"flex-direction": "column",
"align-items": "flex-start",
"gap": "16px",
"--mod-detail-margin-end": "4.8px",
})}
>
${Story(context)}
Expand All @@ -183,8 +183,8 @@ export default {

const ActionButtons = (args) => html` <div
style=${styleMap({
display: "flex",
gap: "1rem",
"display": "flex",
"gap": "16px",
})}
id="render-root"
>
Expand Down Expand Up @@ -332,9 +332,9 @@ const Variants = (args) =>
})}
<div
style=${styleMap({
display: "flex",
flexDirection: "column",
gap: ".3rem",
"display": "flex",
"flex-direction": "column",
"gap": "4.8px",
})}
>
${States(args)}
Expand All @@ -348,9 +348,9 @@ const Variants = (args) =>
})}
<div
style=${styleMap({
display: "flex",
flexDirection: "column",
gap: ".3rem",
"display": "flex",
"flex-direction": "column",
"gap": "4.8px",
})}
>
${States({
Expand All @@ -367,9 +367,9 @@ const Variants = (args) =>
})}
<div
style=${styleMap({
display: "flex",
flexDirection: "column",
gap: ".3rem",
"display": "flex",
"flex-direction": "column",
"gap": "4.8px",
})}
>
${States({
Expand All @@ -386,9 +386,9 @@ const Variants = (args) =>
})}
<div
style=${styleMap({
display: "flex",
flexDirection: "column",
gap: ".3rem",
"display": "flex",
"flex-direction": "column",
"gap": "4.8px",
})}
>
${Sizes(args)}
Expand Down
9 changes: 0 additions & 9 deletions components/actionbutton/stories/template.js
View file
Open in desktop
Expand Up @@ -38,15 +38,6 @@ export const Template = ({
role,
...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`
<button
Expand Down
9 changes: 5 additions & 4 deletions components/actiongroup/stories/actiongroup.stories.js
View file
Open in desktop
@@ -1,16 +1,17 @@
// Import the component markup template
import { Template } from "./template";

import { default as ActionButton } from "@spectrum-css/actionbutton/stories/actionbutton.stories.js";

/**
* The action group component is a collection of action buttons.
*/
export default {
title: "Components/Action group",
description: "The Action group component is a collection of action buttons.",
component: "ActionGroup",
argTypes: {
areQuiet: ActionButton.argTypes.isQuiet,
areEmphasized: ActionButton.argTypes.isEmphasized,
staticColors: ActionButton.argTypes.staticColor,
staticColor: ActionButton.argTypes.staticColor,
content: { table: { disable: true } },
size: {
name: "Size",
Expand Down Expand Up @@ -55,7 +56,7 @@ export default {
size: "m",
areQuiet: ActionButton.args.isQuiet,
areEmphasized: ActionButton.args.isEmphasized,
staticColors: ActionButton.args.staticColor,
staticColor: ActionButton.args.staticColor,
vertical: false,
compact: false,
justified: false,
Expand Down
13 changes: 2 additions & 11 deletions components/actiongroup/stories/template.js
View file
Open in desktop
Expand Up @@ -13,20 +13,11 @@ export const Template = ({
vertical = false,
compact = false,
justified = false,
staticColors,
staticColor,
content = [],
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`
<div
Expand All @@ -50,7 +41,7 @@ export const Template = ({
iconName: item.iconName,
isQuiet: areQuiet || item.isQuiet,
isEmphasized: areEmphasized || item.isEmphasized,
staticColor: staticColors ?? item.staticColor,
staticColor: staticColor ?? item.staticColor,
customClasses: [`${rootClass}-item`],
});
case "function":
Expand Down