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 7d5ff97 commit 319ab28
Show file tree
Hide file tree
Showing 7 changed files with 102 additions and 102 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
170 changes: 85 additions & 85 deletions components/button/stories/button.stories.js
View file
Expand Up @@ -197,91 +197,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 319ab28

Please sign in to comment.