Skip to content

Commit

Permalink
chore: storybook pathing optimizations
Browse files Browse the repository at this point in the history
  • Loading branch information
@castastrophe
castastrophe committed Apr 26, 2024
1 parent 5a1fad6 commit bef713c
Show file tree
Hide file tree
Showing 11 changed files with 117 additions and 105 deletions.
2 changes: 1 addition & 1 deletion .storybook/foundations/corner-rounding/action-button-corner-rounding.stories.js
View file
@@ -1,5 +1,5 @@
import { Template } from "@spectrum-css/actionbutton/stories/template";
import { html } from "lit";
import { Template } from "../../../components/actionbutton/stories/template";

export default {
title: "Foundations/Corner rounding",
Expand Down
2 changes: 1 addition & 1 deletion .storybook/foundations/corner-rounding/checkbox-corner-rounding.stories.js
View file
@@ -1,6 +1,6 @@
// Import the component markup template
import { Template } from "@spectrum-css/checkbox/stories/template";
import { html } from "lit";
import { Template } from "../../../components/checkbox/stories/template";

export default {
title: "Foundations/Corner rounding",
Expand Down
14 changes: 7 additions & 7 deletions .storybook/foundations/corner-rounding/component-size-tokens-medium.md
View file
@@ -1,7 +1,7 @@
| Component size token | Alias token (if available) | Global token | Value |
|---------------------------------------------------|-------------------------------|------------------------------|-------|
| --spectrum-corner-radius-medium-size-extra-small | | --spectrum-corner-radius-300 | 6px |
| --spectrum-corner-radius-medium-size-small | | --spectrum-corner-radius-400 | 7px |
| --spectrum-corner-radius-medium-size-medium | --spectrum-corner-radius-medium-default | --spectrum-corner-radius-500 | 8px |
| --spectrum-corner-radius-medium-size-large | | --spectrum-corner-radius-600 | 9px |
| --spectrum-corner-radius-medium-size-extra-large | --spectrum-corner-radius-large-default | --spectrum-corner-radius-700 | 10px |
| Component size token | Alias token (if available) | Global token | Value |
| ------------------------------------------------ | --------------------------------------- | ---------------------------- | ----- |
| --spectrum-corner-radius-medium-size-extra-small | | --spectrum-corner-radius-300 | 6px |
| --spectrum-corner-radius-medium-size-small | | --spectrum-corner-radius-400 | 7px |
| --spectrum-corner-radius-medium-size-medium | --spectrum-corner-radius-medium-default | --spectrum-corner-radius-500 | 8px |
| --spectrum-corner-radius-medium-size-large | | --spectrum-corner-radius-600 | 9px |
| --spectrum-corner-radius-medium-size-extra-large | --spectrum-corner-radius-large-default | --spectrum-corner-radius-700 | 10px |
12 changes: 6 additions & 6 deletions .storybook/foundations/corner-rounding/component-size-tokens-small.md
View file
@@ -1,6 +1,6 @@
| Component size token | Alias token (if available) | Global token | Value |
|---------------------------------------------------|-------------------------------|------------------------------|-------|
| --spectrum-corner-radius-small-size-small | | --spectrum-corner-radius-75 | 3px |
| --spectrum-corner-radius-small-size-medium | --spectrum-corner-radius-small-default | --spectrum-corner-radius-100 | 4px |
| --spectrum-corner-radius-small-size-large | | --spectrum-corner-radius-200 | 5px |
| --spectrum-corner-radius-small-size-extra-large | | --spectrum-corner-radius-300 | 6px |
| Component size token | Alias token (if available) | Global token | Value |
| ----------------------------------------------- | -------------------------------------- | ---------------------------- | ----- |
| --spectrum-corner-radius-small-size-small | | --spectrum-corner-radius-75 | 3px |
| --spectrum-corner-radius-small-size-medium | --spectrum-corner-radius-small-default | --spectrum-corner-radius-100 | 4px |
| --spectrum-corner-radius-small-size-large | | --spectrum-corner-radius-200 | 5px |
| --spectrum-corner-radius-small-size-extra-large | | --spectrum-corner-radius-300 | 6px |
2 changes: 1 addition & 1 deletion .storybook/foundations/down-state/button-down-state.stories.js
View file
@@ -1,4 +1,4 @@
import { Template } from "../../../components/button/stories/template";
import { Template } from "@spectrum-css/button/stories/template";

export default {
title: "Foundations/Down state",
Expand Down
2 changes: 1 addition & 1 deletion .storybook/foundations/down-state/checkbox-down-state.stories.js
View file
@@ -1,4 +1,4 @@
import { Template } from "../../../components/checkbox/stories/template";
import { Template } from "@spectrum-css/checkbox/stories/template";

export default {
title: "Foundations/Down state",
Expand Down
3 changes: 3 additions & 0 deletions components/actionbutton/metadata/mods.md
View file
Expand Up @@ -49,6 +49,9 @@
| `--mod-actionbutton-min-width` |
| `--mod-actionbutton-static-content-color` |
| `--mod-actionbutton-text-to-visual` |
| `--mod-animation-duration-100` |
| `--mod-button-animation-duration` |
| `--mod-button-font-family` |
| `--mod-button-line-height` |
| `--mod-line-height-100` |
| `--mod-sans-font-family-stack` |
3 changes: 3 additions & 0 deletions components/button/metadata/mods.md
View file
@@ -1,5 +1,6 @@
| Modifiable custom properties |
| ------------------------------------------ |
| `--mod-animation-duration-100` |
| `--mod-bold-font-weight` |
| `--mod-button-animation-duration` |
| `--mod-button-background-color-default` |
Expand Down Expand Up @@ -44,4 +45,6 @@
| `--mod-button-top-to-icon` |
| `--mod-button-top-to-text` |
| `--mod-focus-indicator-gap` |
| `--mod-line-height-100` |
| `--mod-sans-font-family-stack` |
| `--mod-static-black-focus-indicator-color` |
175 changes: 87 additions & 88 deletions components/button/stories/button.stories.js
View file
@@ -1,7 +1,6 @@
import { withDownStateDimensionCapture } from "@spectrum-css/preview/decorators";
import { html } from "lit";
import { styleMap } from "lit/directives/style-map.js";
import { when } from "lit/directives/when.js";
import { withDownStateDimensionCapture } from "../../../.storybook/decorators";

import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.js";
import { Template as Typography } from "@spectrum-css/typography/stories/template.js";
Expand All @@ -14,7 +13,6 @@ import { Template } from "./template";
export default {
title: "Components/Button",
component: "Button",
decorators: [withDownStateDimensionCapture('.spectrum-Button:not(:disabled)')],
argTypes: {
size: {
name: "Size",
Expand Down Expand Up @@ -146,6 +144,7 @@ export default {
}
},
decorators: [
withDownStateDimensionCapture(".spectrum-Button:not(:disabled)"),
(Story, context) => html`
<style>
.spectrum-Detail { display: inline-block; }
Expand Down Expand Up @@ -197,91 +196,91 @@ const CustomButton = ({

const States = (args) =>
html` <div>
${Typography({
semantics: "detail",
size: "s",
content: ["Default"],
})}
${Treatment(args)}
</div>
<div>
${Typography({
semantics: "detail",
size: "s",
content: ["Selected"],
})}
${Treatment({
...args,
isSelected: true,
})}
</div>
<div>
${Typography({
semantics: "detail",
size: "s",
content: ["Focused"],
})}
${Treatment({
...args,
isFocused: true,
})}
</div>
<div>
${Typography({
semantics: "detail",
size: "s",
content: ["Hovered"],
})}
${Treatment({
...args,
isHovered: true,
})}
</div>
<div>
${Typography({
semantics: "detail",
size: "s",
content: ["Active"],
})}
${Treatment({
...args,
isActive: true,
})}
</div>
<div>
${Typography({
semantics: "detail",
size: "s",
content: ["Disabled"],
})}
${Treatment({
...args,
isDisabled: true,
})}
</div>
<div>
${Typography({
semantics: "detail",
size: "s",
content: ["Disabled + selected"],
})}
${Treatment({
...args,
isSelected: true,
isDisabled: true,
})}
</div>
<div>
${Typography({
semantics: "detail",
size: "s",
content: ["Pending"],
})}
${Treatment({
...args,
isPending: true,
})}
</div>`;
${Typography({
semantics: "detail",
size: "s",
content: ["Default"],
})}
${Treatment(args)}
</div>
<div>
${Typography({
semantics: "detail",
size: "s",
content: ["Selected"],
})}
${Treatment({
...args,
isSelected: true,
})}
</div>
<div>
${Typography({
semantics: "detail",
size: "s",
content: ["Focused"],
})}
${Treatment({
...args,
isFocused: true,
})}
</div>
<div>
${Typography({
semantics: "detail",
size: "s",
content: ["Hovered"],
})}
${Treatment({
...args,
isHovered: true,
})}
</div>
<div>
${Typography({
semantics: "detail",
size: "s",
content: ["Active"],
})}
${Treatment({
...args,
isActive: true,
})}
</div>
<div>
${Typography({
semantics: "detail",
size: "s",
content: ["Disabled"],
})}
${Treatment({
...args,
isDisabled: true,
})}
</div>
<div>
${Typography({
semantics: "detail",
size: "s",
content: ["Disabled + selected"],
})}
${Treatment({
...args,
isSelected: true,
isDisabled: true,
})}
</div>
<div>
${Typography({
semantics: "detail",
size: "s",
content: ["Pending"],
})}
${Treatment({
...args,
isPending: true,
})}
</div>`;

const Sizes = (args) =>
html` ${["s", "m", "l", "xl"].map((size) => {
Expand Down
4 changes: 4 additions & 0 deletions components/logicbutton/metadata/mods.md
View file
@@ -1,9 +1,12 @@
| Modifiable custom properties |
| -------------------------------------------------------- |
| `--mod-animation-duration-100` |
| `--mod-button-animation-duration` |
| `--mod-button-focus-indicator-gap` |
| `--mod-button-font-family` |
| `--mod-button-line-height` |
| `--mod-focus-indicator-gap` |
| `--mod-line-height-100` |
| `--mod-logic-button-and-background-color` |
| `--mod-logic-button-and-background-color-disabled` |
| `--mod-logic-button-and-background-color-hover` |
Expand Down Expand Up @@ -33,3 +36,4 @@
| `--mod-logic-button-or-text-color` |
| `--mod-logic-button-or-text-color-disabled` |
| `--mod-logic-button-padding` |
| `--mod-sans-font-family-stack` |
3 changes: 3 additions & 0 deletions components/picker/metadata/mods.md
View file
@@ -1,8 +1,10 @@
| Modifiable custom properties |
| ------------------------------------------------------ |
| `--mod-animation-duration-100` |
| `--mod-button-animation-duration` |
| `--mod-button-font-family` |
| `--mod-button-line-height` |
| `--mod-line-height-100` |
| `--mod-picker-animation-duration` |
| `--mod-picker-background-color-active` |
| `--mod-picker-background-color-default` |
Expand Down Expand Up @@ -66,3 +68,4 @@
| `--mod-picker-spacing-top-to-disclosure-icon` |
| `--mod-picker-spacing-top-to-progress-circle` |
| `--mod-picker-spacing-top-to-text` |
| `--mod-sans-font-family-stack` |

0 comments on commit bef713c

Please sign in to comment.