Skip to content

Commit e66a6ff

Browse files
castastrophecastastrophe
committed
feat: fork into custom local add-on
1 parent 758d9b8 commit e66a6ff

File tree

110 files changed

+5933
-1065
lines changed

Some content is hidden

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

110 files changed

+5933
-1065
lines changed

‎.eslintrc

+2-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,8 @@
1717
"no-console": ["warn", { "allow": ["warn", "error"] }],
1818
"quotes": ["warn", "double"],
1919
"semi": ["warn", "always"],
20-
"space-before-blocks": ["warn", "always"]
20+
"space-before-blocks": ["warn", "always"],
21+
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }]
2122
},
2223
"overrides": [
2324
{

‎.storybook/main.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -55,20 +55,20 @@ export default {
5555
},
5656
},
5757
},
58+
// Local: plugins/storybook-addon-custom-properties
59+
"@spectrum-tools/storybook-addon-custom-properties",
5860
// https://github.com/storybookjs/storybook/tree/next/code/addons/a11y
59-
"@storybook/addon-a11y",
60-
// https://www.npmjs.com/package/@whitespace/storybook-addon-html
6161
"@whitespace/storybook-addon-html",
6262
// https://storybook.js.org/addons/@etchteam/storybook-addon-status
63+
"@storybook/addon-a11y",
64+
// https://www.npmjs.com/package/@whitespace/storybook-addon-html
6365
"@etchteam/storybook-addon-status",
6466
// https://github.com/storybookjs/storybook/tree/next/code/addons/interactions
6567
"@storybook/addon-interactions",
6668
// https://www.chromatic.com/docs/visual-testing-addon/
6769
"@chromaui/addon-visual-tests",
6870
// https://storybook.js.org/addons/@storybook/addon-designs/
6971
"@storybook/addon-designs",
70-
// https://github.com/ljcl/storybook-addon-cssprops
71-
"@ljcl/storybook-addon-cssprops",
7272
],
7373
core: {
7474
disableTelemetry: true,

‎.storybook/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@
4040
"@babel/core": "^7.26.0",
4141
"@chromaui/addon-visual-tests": "^1.0.0",
4242
"@etchteam/storybook-addon-status": "^5.0.0",
43+
"@spectrum-tools/storybook-addon-custom-properties": "workspace:^",
4344
"@storybook/addon-a11y": "^8.4.7",
4445
"@storybook/addon-actions": "^8.4.7",
4546
"@storybook/addon-console": "^3.0.0",

‎components/accordion/index.css

+1
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,7 @@
7676
&:lang(ja),
7777
&:lang(zh),
7878
&:lang(ko) {
79+
/* @description When the language is CJK, update line-height values to prevent cut off diacritics */
7980
--spectrum-accordion-item-header-line-height: var(--spectrum-cjk-line-height-100);
8081
--spectrum-accordion-item-content-line-height: var(--spectrum-cjk-line-height-100);
8182
}

‎components/accordion/stories/accordion.stories.js

+2-12
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@ import { Template as Link } from "@spectrum-css/link/stories/template.js";
22
import { disableDefaultModes } from "@spectrum-css/preview/modes";
33
import { size } from "@spectrum-css/preview/types";
44
import { Template as Typography } from "@spectrum-css/typography/stories/template.js";
5+
import styles from "../index.css?inline";
56
import metadata from "../metadata/metadata.json";
67
import packageJson from "../package.json";
78
import { AccordionGroup } from "./accordion.test.js";
89
import { Template } from "./template.js";
9-
1010
/**
1111
* The accordion element contains a list of items that can be expanded or collapsed to reveal additional content or information associated with each item. There can be zero expanded items, exactly one expanded item, or more than one item expanded at a time, depending on the configuration. This list of items is defined by child accordion item elements.
1212
*/
@@ -63,17 +63,7 @@ export default {
6363
},
6464
packageJson,
6565
metadata,
66-
cssprops: {
67-
...metadata.modifiers.reduce((collection, item) => {
68-
const key = item.replace(/^--/, "");
69-
collection[key] = {
70-
category: "Modifiers",
71-
control: key.includes("color") ? "color" : "text",
72-
value: key.includes("color") ? undefined : " ",
73-
};
74-
return collection;
75-
}, {})
76-
},
66+
cssprops: { styles },
7767
},
7868
tags: ["!autodocs"],
7969
};

‎components/actionbar/stories/actionbar.stories.js

+2-11
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { default as CloseButton } from "@spectrum-css/closebutton/stories/closeb
33
import { default as Popover } from "@spectrum-css/popover/stories/popover.stories.js";
44
import { disableDefaultModes } from "@spectrum-css/preview/modes";
55
import { isEmphasized, isOpen } from "@spectrum-css/preview/types";
6+
import styles from "../index.css?inline";
67
import metadata from "../metadata/metadata.json";
78
import packageJson from "../package.json";
89
import { ActionBarGroup } from "./actionbar.test.js";
@@ -69,17 +70,7 @@ export default {
6970
},
7071
packageJson,
7172
metadata,
72-
cssprops: {
73-
...metadata.modifiers.reduce((collection, item) => {
74-
const key = item.replace(/^--/, "");
75-
collection[key] = {
76-
category: "Modifiers",
77-
control: key.includes("color") ? "color" : "text",
78-
value: key.includes("color") ? undefined : " ",
79-
};
80-
return collection;
81-
}, {})
82-
},
73+
cssprops: { styles },
8374
},
8475
tags: ["!autodocs"],
8576
};

‎components/actionbutton/stories/actionbutton.stories.js

+2-11
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.
22
import { Sizes } from "@spectrum-css/preview/decorators";
33
import { disableDefaultModes } from "@spectrum-css/preview/modes";
44
import { isActive, isDisabled, isEmphasized, isFocused, isHovered, isQuiet, isSelected, size, staticColor } from "@spectrum-css/preview/types";
5+
import styles from "../index.css?inline";
56
import metadata from "../metadata/metadata.json";
67
import packageJson from "../package.json";
78
import { ActionButtonGroup } from "./actionbutton.test.js";
@@ -90,17 +91,7 @@ export default {
9091
},
9192
packageJson,
9293
metadata,
93-
cssprops: {
94-
...metadata.modifiers.reduce((collection, item) => {
95-
const key = item.replace(/^--/, "");
96-
collection[key] = {
97-
category: "Modifiers",
98-
control: key.includes("color") ? "color" : "text",
99-
value: key.includes("color") ? undefined : " ",
100-
};
101-
return collection;
102-
}, {})
103-
},
94+
cssprops: { styles },
10495
docs: {
10596
story: {
10697
height: "auto",

‎components/actiongroup/stories/actiongroup.stories.js

+2-11
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { default as ActionButton } from "@spectrum-css/actionbutton/stories/acti
22
import { Sizes } from "@spectrum-css/preview/decorators";
33
import { disableDefaultModes } from "@spectrum-css/preview/modes";
44
import { size } from "@spectrum-css/preview/types";
5+
import styles from "../index.css?inline";
56
import metadata from "../metadata/metadata.json";
67
import packageJson from "../package.json";
78
import { ActionGroups } from "./actiongroup.test.js";
@@ -99,17 +100,7 @@ export default {
99100
},
100101
packageJson,
101102
metadata,
102-
cssprops: {
103-
...metadata.modifiers.reduce((collection, item) => {
104-
const key = item.replace(/^--/, "");
105-
collection[key] = {
106-
category: "Modifiers",
107-
control: key.includes("color") ? "color" : "text",
108-
value: key.includes("color") ? undefined : " ",
109-
};
110-
return collection;
111-
}, {})
112-
},
103+
cssprops: { styles },
113104
},
114105
};
115106

‎components/actionmenu/stories/actionmenu.stories.js

+1-5
Original file line numberDiff line numberDiff line change
@@ -49,11 +49,7 @@ export default {
4949
],
5050
},
5151
packageJson,
52-
cssprops: {
53-
...(Popover?.parameters?.cssprops ?? {}),
54-
...(ActionButton?.parameters?.cssprops ?? {}),
55-
...(Menu.parameters?.cssprops ?? {}),
56-
},
52+
cssprops: false,
5753
docs: {
5854
story: {
5955
height: "200px",

‎components/alertbanner/stories/alertbanner.stories.js

+2-11
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { disableDefaultModes } from "@spectrum-css/preview/modes";
22
import { isOpen } from "@spectrum-css/preview/types";
3+
import styles from "../index.css?inline";
34
import metadata from "../metadata/metadata.json";
45
import packageJson from "../package.json";
56
import { AlertBannerGroup } from "./alertbanner.test.js";
@@ -75,17 +76,7 @@ export default {
7576
},
7677
packageJson,
7778
metadata,
78-
cssprops: {
79-
...metadata.modifiers.reduce((collection, item) => {
80-
const key = item.replace(/^--/, "");
81-
collection[key] = {
82-
category: "Modifiers",
83-
control: key.includes("color") ? "color" : "text",
84-
value: key.includes("color") ? undefined : " ",
85-
};
86-
return collection;
87-
}, {})
88-
},
79+
cssprops: { styles },
8980
},
9081
};
9182

‎components/alertdialog/stories/alertdialog.stories.js

+2-11
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { withUnderlayWrapper } from "@spectrum-css/preview/decorators";
22
import { disableDefaultModes } from "@spectrum-css/preview/modes";
33
import { isOpen } from "@spectrum-css/preview/types";
4+
import styles from "../index.css?inline";
45
import metadata from "../metadata/metadata.json";
56
import packageJson from "../package.json";
67
import { AlertDialogGroup } from "./alertdialog.test.js";
@@ -56,17 +57,7 @@ export default {
5657
},
5758
packageJson,
5859
metadata,
59-
cssprops: {
60-
...metadata.modifiers.reduce((collection, item) => {
61-
const key = item.replace(/^--/, "");
62-
collection[key] = {
63-
category: "Modifiers",
64-
control: key.includes("color") ? "color" : "text",
65-
value: key.includes("color") ? undefined : " ",
66-
};
67-
return collection;
68-
}, {})
69-
},
60+
cssprops: { styles },
7061
},
7162
decorators: [
7263
withUnderlayWrapper,

‎components/asset/stories/asset.stories.js

+2-11
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { disableDefaultModes } from "@spectrum-css/preview/modes";
2+
import styles from "../index.css?inline";
23
import metadata from "../metadata/metadata.json";
34
import packageJson from "../package.json";
45
import { AssetGroup } from "./asset.test.js";
@@ -38,17 +39,7 @@ export default {
3839
parameters: {
3940
packageJson,
4041
metadata,
41-
cssprops: {
42-
...metadata.modifiers.reduce((collection, item) => {
43-
const key = item.replace(/^--/, "");
44-
collection[key] = {
45-
category: "Modifiers",
46-
control: key.includes("color") ? "color" : "text",
47-
value: key.includes("color") ? undefined : " ",
48-
};
49-
return collection;
50-
}, {})
51-
},
42+
cssprops: { styles },
5243
},
5344
tags: ["!autodocs"],
5445
};

‎components/assetcard/stories/assetcard.stories.js

+2-11
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { default as Checkbox } from "@spectrum-css/checkbox/stories/checkbox.stories.js";
22
import { disableDefaultModes } from "@spectrum-css/preview/modes";
33
import { isFocused, isSelected } from "@spectrum-css/preview/types";
4+
import styles from "../index.css?inline";
45
import metadata from "../metadata/metadata.json";
56
import packageJson from "../package.json";
67
import { AssetCardGroup } from "./assetcard.test.js";
@@ -88,17 +89,7 @@ export default {
8889
},
8990
packageJson,
9091
metadata,
91-
cssprops: {
92-
...metadata.modifiers.reduce((collection, item) => {
93-
const key = item.replace(/^--/, "");
94-
collection[key] = {
95-
category: "Modifiers",
96-
control: key.includes("color") ? "color" : "text",
97-
value: key.includes("color") ? undefined : " ",
98-
};
99-
return collection;
100-
}, {})
101-
},
92+
cssprops: { styles },
10293
},
10394
tags: ["!autodocs"],
10495
};

‎components/assetlist/stories/assetlist.stories.js

+2-11
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { default as Checkbox } from "@spectrum-css/checkbox/stories/checkbox.stories.js";
22
import { disableDefaultModes } from "@spectrum-css/preview/modes";
3+
import styles from "../index.css?inline";
34
import metadata from "../metadata/metadata.json";
45
import packageJson from "../package.json";
56
import { AssetListGroup } from "./assetlist.test.js";
@@ -22,17 +23,7 @@ export default {
2223
},
2324
packageJson,
2425
metadata,
25-
cssprops: {
26-
...metadata.modifiers.reduce((collection, item) => {
27-
const key = item.replace(/^--/, "");
28-
collection[key] = {
29-
category: "Modifiers",
30-
control: key.includes("color") ? "color" : "text",
31-
value: key.includes("color") ? undefined : " ",
32-
};
33-
return collection;
34-
}, {})
35-
},
26+
cssprops: { styles },
3627
},
3728
};
3829

‎components/avatar/stories/avatar.stories.js

+2-11
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { Sizes } from "@spectrum-css/preview/decorators";
22
import { disableDefaultModes } from "@spectrum-css/preview/modes";
33
import { isDisabled, size } from "@spectrum-css/preview/types";
4+
import styles from "../index.css?inline";
45
import metadata from "../metadata/metadata.json";
56
import packageJson from "../package.json";
67
import { AvatarGroup } from "./avatar.test.js";
@@ -64,17 +65,7 @@ export default {
6465
},
6566
packageJson,
6667
metadata,
67-
cssprops: {
68-
...metadata.modifiers.reduce((collection, item) => {
69-
const key = item.replace(/^--/, "");
70-
collection[key] = {
71-
category: "Modifiers",
72-
control: key.includes("color") ? "color" : "text",
73-
value: key.includes("color") ? undefined : " ",
74-
};
75-
return collection;
76-
}, {})
77-
},
68+
cssprops: { styles },
7869
},
7970
tags: ["!autodocs"],
8071
};

‎components/badge/stories/badge.stories.js

+2-11
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.
22
import { ArgGrid } from "@spectrum-css/preview/decorators";
33
import { disableDefaultModes } from "@spectrum-css/preview/modes";
44
import { size } from "@spectrum-css/preview/types";
5+
import styles from "../index.css?inline";
56
import metadata from "../metadata/metadata.json";
67
import packageJson from "../package.json";
78
import { BadgeGroup } from "./badge.test.js";
@@ -68,17 +69,7 @@ export default {
6869
},
6970
packageJson,
7071
metadata,
71-
cssprops: {
72-
...metadata.modifiers.reduce((collection, item) => {
73-
const key = item.replace(/^--/, "");
74-
collection[key] = {
75-
category: "Modifiers",
76-
control: key.includes("color") ? "color" : "text",
77-
value: key.includes("color") ? undefined : " ",
78-
};
79-
return collection;
80-
}, {})
81-
},
72+
cssprops: { styles },
8273
},
8374
tags: ["!autodocs"],
8475
};

‎components/breadcrumb/stories/breadcrumb.stories.js

+2-11
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { disableDefaultModes } from "@spectrum-css/preview/modes";
22
import { isDragged } from "@spectrum-css/preview/types";
3+
import styles from "../index.css?inline";
34
import metadata from "../metadata/metadata.json";
45
import packageJson from "../package.json";
56
import { BreadcrumbGroup } from "./breadcrumb.test.js";
@@ -47,17 +48,7 @@ export default {
4748
},
4849
packageJson,
4950
metadata,
50-
cssprops: {
51-
...metadata.modifiers.reduce((collection, item) => {
52-
const key = item.replace(/^--/, "");
53-
collection[key] = {
54-
category: "Modifiers",
55-
control: key.includes("color") ? "color" : "text",
56-
value: key.includes("color") ? undefined : " ",
57-
};
58-
return collection;
59-
}, {})
60-
},
51+
cssprops: { styles },
6152
},
6253
};
6354

0 commit comments

Comments
 (0)