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 fa1c327 commit b8fb19c
Show file tree
Hide file tree
Showing 7 changed files with 104 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
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

0 comments on commit b8fb19c

Please sign in to comment.