Skip to content

Commit 61996d7

Browse files
castastrophecastastrophe
committed
build: align tooling with s2-foundations branch
1 parent e2cfa3f commit 61996d7

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+277
-1686
lines changed

‎.storybook/assets/base.css

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -34,10 +34,6 @@ body {
3434
-webkit-tap-highlight-color: rgba(0, 0, 0, 0%);
3535
}
3636

37-
.spectrum.spectrum--legacy {
38-
background-color: var(--spectrum-background-layer-1-color);
39-
}
40-
4137
.spectrum .spectrum-examples-static-black {
4238
background: var(--spectrum-examples-gradient-static-black);
4339
}

‎.storybook/decorators/context.js

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { makeDecorator, useEffect } from "@storybook/preview-api";
22
import { fetchContainers, toggleStyles } from "./helpers.js";
33

4-
import legacyTokens from "@spectrum-css/tokens-legacy/dist/index.css?inline";
54
import tokens from "@spectrum-css/tokens/dist/index.css?inline";
65

76
/**
@@ -48,8 +47,6 @@ export const withContextWrapper = makeDecorator({
4847
const isTesting = testingPreview;
4948
const isDocs = viewMode === "docs";
5049
const isRaw = Boolean(context === "raw");
51-
const isModern = Boolean(context === "spectrum");
52-
const isExpress = Boolean(context === "express");
5350

5451
// Start by attaching the appropriate tokens to the container
5552
toggleStyles(document.body, "tokens", tokens, !isRaw);
@@ -60,7 +57,7 @@ export const withContextWrapper = makeDecorator({
6057
}
6158

6259
// Start by attaching the appropriate tokens to the container
63-
toggleStyles(document.body, "tokens", isModern ? tokens : legacyTokens, !isRaw);
60+
toggleStyles(document.body, "tokens", tokens, !isRaw);
6461

6562
for (const container of fetchContainers(id, isDocs, isTesting)) {
6663
// Reset the context to the original values
@@ -85,12 +82,6 @@ export const withContextWrapper = makeDecorator({
8582
// Every container gets the spectrum class
8683
container.classList.toggle("spectrum", !isRaw);
8784

88-
// S1 and S1 Express get the legacy class
89-
container.classList.toggle("spectrum--legacy", !isModern && !isRaw);
90-
91-
// Express only gets the express class
92-
container.classList.toggle("spectrum--express", isExpress && !isRaw);
93-
9485
// Let the static color override the color if it's set
9586
if (hasStaticElement && staticColorSettings[staticKey]?.color) {
9687
color = staticColorSettings[staticKey].color;
@@ -117,7 +108,7 @@ export const withContextWrapper = makeDecorator({
117108
}
118109
}
119110

120-
}, [context, viewMode, original, staticColor, color, scale, rootClass, tokens, legacyTokens, staticColorSettings, testingPreview]);
111+
}, [context, viewMode, original, staticColor, color, scale, rootClass, tokens, staticColorSettings, testingPreview]);
121112

122113
return StoryFn(data);
123114
},

‎.storybook/foundations/corner-rounding/action-button-corner-rounding.stories.js

Lines changed: 6 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1+
import { Template } from "@spectrum-css/actionbutton/stories/template.js";
12
import { html } from "lit";
2-
import { Template } from "../../../components/actionbutton/stories/template";
33

44
export default {
55
title: "Corner rounding",
@@ -17,16 +17,11 @@ export default {
1717
tags: ['foundation'],
1818
};
1919

20-
const ActionButton = (args, context) => {
21-
return html`
22-
<div style="padding: 1rem 0;">
23-
${Template({
24-
...args,
25-
iconName: undefined,
26-
}, context)}
27-
</div>
28-
`;
29-
};
20+
const ActionButton = (args, context) => html`
21+
<div style="padding: 1rem 0;">
22+
${Template({ ...args, iconName: undefined }, context)}
23+
</div>
24+
`;
3025

3126
const ActionButtonTable = (args, context) => {
3227
return html`

‎.storybook/foundations/corner-rounding/checkbox-corner-rounding.stories.js

Lines changed: 6 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// Import the component markup template
2+
import { Template } from "@spectrum-css/checkbox/stories/template.js";
23
import { html } from "lit";
3-
import { Template } from "../../../components/checkbox/stories/template";
44

55
export default {
66
title: "Corner rounding",
@@ -22,16 +22,11 @@ const Checkbox = ({
2222
customStyles = {},
2323
isChecked = false,
2424
...args
25-
}, context) => {
26-
return html`
27-
<div style="padding: 1rem 0;">
28-
${Template({
29-
...args,
30-
iconName: undefined,
31-
}, context)}
32-
</div>
33-
`;
34-
};
25+
} = {}, context = {}) => html`
26+
<div style="padding: 1rem 0;">
27+
${Template({ ...args, iconName: undefined }, context)}
28+
</div>
29+
`;
3530

3631
const CheckboxTable = (args, context) => {
3732
return html`

‎.storybook/foundations/corner-rounding/corner-rounding.stories.js

Lines changed: 70 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -13,78 +13,76 @@ export default {
1313
tags: ["foundation"],
1414
};
1515

16-
const CornerRadiusGroup = ({ customStyles = {}, ...args }, context) => {
17-
return html`
18-
<div>
19-
<table class="spectrum-Foundations-Example-CornerRounding-table">
20-
<thead>
21-
<tr>
22-
<th scope="col">Token</th>
23-
<th scope="col" style="padding: 0 2rem;">Value</th>
24-
<th scope="col">Example<br />(No Border)</th>
25-
<th scope="col">Example<br />(Border)</th>
26-
</tr>
27-
</thead>
28-
<tbody>
29-
${Template(
30-
{
31-
...args,
32-
label: "--spectrum-corner-radius-none",
33-
size: "none",
34-
value: "0px",
35-
},
36-
context,
37-
)}
38-
${Template(
39-
{
40-
...args,
41-
label: "--spectrum-corner-radius-small-default",
42-
size: "s",
43-
value: "4px",
44-
},
45-
context,
46-
)}
47-
${Template(
48-
{
49-
...args,
50-
label: "--spectrum-corner-radius-medium-default",
51-
size: "m",
52-
value: "8px",
53-
},
54-
context,
55-
)}
56-
${Template(
57-
{
58-
...args,
59-
label: "--spectrum-corner-radius-large-default",
60-
size: "l",
61-
value: "10px",
62-
},
63-
context,
64-
)}
65-
${Template(
66-
{
67-
...args,
68-
label: "--spectrum-corner-radius-extra-large-default",
69-
size: "xl",
70-
value: "16px",
71-
},
72-
context,
73-
)}
74-
${Template(
75-
{
76-
...args,
77-
label: "--spectrum-corner-radius-full",
78-
size: "full",
79-
value: "9999px",
80-
},
81-
context,
82-
)}
83-
</tbody>
84-
</table>
85-
</div>
86-
`;
87-
};
16+
const CornerRadiusGroup = ({ customStyles = {}, ...args }, context) => html`
17+
<div>
18+
<table class="spectrum-Foundations-Example-CornerRounding-table">
19+
<thead>
20+
<tr>
21+
<th scope="col">Token</th>
22+
<th scope="col" style="padding: 0 2rem;">Value</th>
23+
<th scope="col">Example<br />(No Border)</th>
24+
<th scope="col">Example<br />(Border)</th>
25+
</tr>
26+
</thead>
27+
<tbody>
28+
${Template(
29+
{
30+
...args,
31+
label: "--spectrum-corner-radius-none",
32+
size: "none",
33+
value: "0px",
34+
},
35+
context,
36+
)}
37+
${Template(
38+
{
39+
...args,
40+
label: "--spectrum-corner-radius-small-default",
41+
size: "s",
42+
value: "4px",
43+
},
44+
context,
45+
)}
46+
${Template(
47+
{
48+
...args,
49+
label: "--spectrum-corner-radius-medium-default",
50+
size: "m",
51+
value: "8px",
52+
},
53+
context,
54+
)}
55+
${Template(
56+
{
57+
...args,
58+
label: "--spectrum-corner-radius-large-default",
59+
size: "l",
60+
value: "10px",
61+
},
62+
context,
63+
)}
64+
${Template(
65+
{
66+
...args,
67+
label: "--spectrum-corner-radius-extra-large-default",
68+
size: "xl",
69+
value: "16px",
70+
},
71+
context,
72+
)}
73+
${Template(
74+
{
75+
...args,
76+
label: "--spectrum-corner-radius-full",
77+
size: "full",
78+
value: "9999px",
79+
},
80+
context,
81+
)}
82+
</tbody>
83+
</table>
84+
</div>
85+
`;
8886

8987
export const CornerRounding = CornerRadiusGroup.bind({});
9088
CornerRounding.args = {};

‎.storybook/foundations/corner-rounding/template.js

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,16 @@ import { classMap } from "lit/directives/class-map.js";
44
import "./index.css";
55

66
const getSizeModifier = (size) => {
7-
if (size === "none" || size === "full") {
8-
return size;
9-
} else {
10-
return `size${size.toUpperCase()}`;
11-
}
7+
if (size === "none" || size === "full") return size;
8+
return `size${size.toUpperCase()}`;
129
};
1310

1411
export const Template = ({
1512
rootClass = "spectrum-Foundations-Example-CornerRounding",
1613
size = "none",
1714
label,
1815
value,
19-
} = {}) => html`
16+
}) => html`
2017
<tr>
2118
<td>${label}</td>
2219
<td style="padding: 0 2rem;">${value}</td>

‎.storybook/foundations/down-state/button-down-state.stories.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Template } from "../../../components/button/stories/template.js";
1+
import { Template } from "@spectrum-css/button/stories/template.js";
22

33
export default {
44
title: "Down state",

‎.storybook/foundations/down-state/checkbox-down-state.stories.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Template } from "../../../components/checkbox/stories/template";
1+
import { Template } from "@spectrum-css/checkbox/stories/template.js";
22

33
export default {
44
title: "Down state",

0 commit comments

Comments
 (0)