Skip to content

Commit 27b6165

Browse files
castastrophecastastrophe
committed
feat(storybook): custom properties panel
1 parent 97fe29f commit 27b6165

File tree

87 files changed

+1158
-95
lines changed

Some content is hidden

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

87 files changed

+1158
-95
lines changed

‎.changeset/eleven-plants-grow.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@spectrum-css/generator": patch
3+
---
4+
5+
Update story templates to include the cssprops imports

‎.changeset/new-bulldogs-add.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@spectrum-css/preview": minor
3+
---
4+
5+
New feature: Custom properties panel added to the development preview showing a list of modifiable custom properties as loaded from the metadata/metadata.json resource in each component.

‎.storybook/main.js

+2
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,8 @@ export default {
4545
"@chromaui/addon-visual-tests",
4646
// https://storybook.js.org/addons/@storybook/addon-designs/
4747
"@storybook/addon-designs",
48+
// https://github.com/ljcl/storybook-addon-cssprops
49+
"@ljcl/storybook-addon-cssprops",
4850
],
4951
core: {
5052
disableTelemetry: true,

‎.storybook/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@
3737
"@babel/core": "^7.25.2",
3838
"@chromaui/addon-visual-tests": "^1.0.0",
3939
"@etchteam/storybook-addon-status": "^5.0.0",
40+
"@ljcl/storybook-addon-cssprops": "^4.0.0",
4041
"@storybook/addon-a11y": "^8.3.2",
4142
"@storybook/addon-actions": "^8.3.2",
4243
"@storybook/addon-console": "^3.0.0",

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

+12
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ 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 data from "../metadata/metadata.json";
56
import pkgJson from "../package.json";
67
import { AccordionGroup } from "./accordion.test.js";
78
import { Template } from "./template.js";
@@ -57,6 +58,17 @@ export default {
5758
},
5859
chromatic: { disableSnapshot: true },
5960
packageJson: pkgJson,
61+
cssprops: {
62+
...data.modifiers.reduce((collection, item) => {
63+
const key = item.replace(/^--/, "");
64+
collection[key] = {
65+
category: "Modifiers",
66+
control: key.includes("color") ? "color" : "text",
67+
value: key.includes("color") ? "rgba(0, 0, 0, 0)" : " ",
68+
};
69+
return collection;
70+
}, {})
71+
},
6072
},
6173
tags: ["!autodocs"],
6274
};

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

+13
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,9 @@ 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 data from "../metadata/metadata.json";
67
import pkgJson from "../package.json";
8+
79
import { ActionBarGroup } from "./actionbar.test.js";
810
import { Template } from "./template.js";
911

@@ -67,6 +69,17 @@ export default {
6769
url: "https://www.figma.com/file/MPtRIVRzPp2VHiEplwXL2X/S-%2F-Manual?node-id=465%3A3127&t=xbooxCWItOFgG2xM-1",
6870
},
6971
packageJson: pkgJson,
72+
cssprops: {
73+
...data.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") ? "rgba(0, 0, 0, 0)" : " ",
79+
};
80+
return collection;
81+
}, {})
82+
},
7083
},
7184
tags: ["!autodocs"],
7285
};

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

+13
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.js";
22
import { disableDefaultModes } from "@spectrum-css/preview/modes";
33
import { isActive, isDisabled, isEmphasized, isFocused, isHovered, isQuiet, isSelected, size, staticColor } from "@spectrum-css/preview/types";
4+
import data from "../metadata/metadata.json";
45
import pkgJson from "../package.json";
6+
57
import { ActionButtonGroup, ActionButtons } from "./actionbutton.test.js";
68

79
/**
@@ -73,6 +75,17 @@ export default {
7375
handles: ["click .spectrum-ActionButton:not([disabled])"],
7476
},
7577
packageJson: pkgJson,
78+
cssprops: {
79+
...data.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") ? "rgba(0, 0, 0, 0)" : " ",
85+
};
86+
return collection;
87+
}, {})
88+
},
7689
docs: {
7790
story: {
7891
height: "auto",

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

+13
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import { default as ActionButton } from "@spectrum-css/actionbutton/stories/actionbutton.stories.js";
22
import { disableDefaultModes } from "@spectrum-css/preview/modes";
33
import { size } from "@spectrum-css/preview/types";
4+
import data from "../metadata/metadata.json";
45
import pkgJson from "../package.json";
6+
57
import { ActionGroups } from "./actiongroup.test.js";
68

79
/**
@@ -61,6 +63,17 @@ export default {
6163
],
6264
},
6365
packageJson: pkgJson,
66+
cssprops: {
67+
...data.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") ? "rgba(0, 0, 0, 0)" : " ",
73+
};
74+
return collection;
75+
}, {})
76+
},
6477
},
6578
};
6679

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

+6
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { default as Popover } from "@spectrum-css/popover/stories/popover.storie
55
import { disableDefaultModes } from "@spectrum-css/preview/modes";
66
import { isOpen } from "@spectrum-css/preview/types";
77
import pkgJson from "../package.json";
8+
89
import { ActionMenuGroup } from "./actionmenu.test.js";
910

1011
/**
@@ -49,6 +50,11 @@ export default {
4950
],
5051
},
5152
packageJson: pkgJson,
53+
cssprops: {
54+
...(Popover?.parameters?.cssprops ?? {}),
55+
...(ActionButton?.parameters?.cssprops ?? {}),
56+
...(Menu.parameters?.cssprops ?? {}),
57+
},
5258
docs: {
5359
story: {
5460
height: "200px",

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

+15-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import { disableDefaultModes } from "@spectrum-css/preview/modes";
22
import { isOpen } from "@spectrum-css/preview/types";
3+
import data from "../metadata/metadata.json";
34
import pkgJson from "../package.json";
5+
46
import { AlertBannerGroup } from "./alertbanner.test.js";
57
import { ActionableOptionsTemplate, Template, TextOverflowTemplate } from "./template.js";
68

@@ -68,6 +70,17 @@ export default {
6870
handles: ["click .spectrum-AlertBanner button"],
6971
},
7072
packageJson: pkgJson,
73+
cssprops: {
74+
...data.modifiers.reduce((collection, item) => {
75+
const key = item.replace(/^--/, "");
76+
collection[key] = {
77+
category: "Modifiers",
78+
control: key.includes("color") ? "color" : "text",
79+
value: key.includes("color") ? "rgba(0, 0, 0, 0)" : " ",
80+
};
81+
return collection;
82+
}, {})
83+
},
7184
},
7285
};
7386

@@ -133,7 +146,7 @@ Negative.parameters = {
133146
* The alert banner component can contain both an icon-only close button and a button with a contextual action to
134147
* take. Whenever possible, include the in-line action button if there's a way for a user to quickly address the issue
135148
* associated with an alert. There should never be more than one button with a contextual action in an alert banner.
136-
*
149+
*
137150
* The close button is optional, depending on context. Consider adding one to let a user easily dismiss the alert.
138151
*/
139152
export const ActionableOptions = ActionableOptionsTemplate.bind({});
@@ -160,4 +173,4 @@ TextOverflow.args = {
160173
};
161174
TextOverflow.parameters = {
162175
chromatic: { disableSnapshot: true },
163-
};
176+
};

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

+13
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
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 data from "../metadata/metadata.json";
45
import pkgJson from "../package.json";
6+
57
import { AlertDialogGroup } from "./alertdialog.test.js";
68
import { Template } from "./template.js";
79

@@ -49,6 +51,17 @@ export default {
4951
}
5052
},
5153
packageJson: pkgJson,
54+
cssprops: {
55+
...data.modifiers.reduce((collection, item) => {
56+
const key = item.replace(/^--/, "");
57+
collection[key] = {
58+
category: "Modifiers",
59+
control: key.includes("color") ? "color" : "text",
60+
value: key.includes("color") ? "rgba(0, 0, 0, 0)" : " ",
61+
};
62+
return collection;
63+
}, {})
64+
},
5265
},
5366
decorators: [
5467
withUnderlayWrapper,

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

+13
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import { disableDefaultModes } from "@spectrum-css/preview/modes";
2+
import data from "../metadata/metadata.json";
23
import pkgJson from "../package.json";
4+
35
import { AssetGroup } from "./asset.test.js";
46
import { Template } from "./template.js";
57

@@ -36,6 +38,17 @@ export default {
3638
},
3739
parameters: {
3840
packageJson: pkgJson,
41+
cssprops: {
42+
...data.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") ? "rgba(0, 0, 0, 0)" : " ",
48+
};
49+
return collection;
50+
}, {})
51+
},
3952
},
4053
tags: ["!autodocs"],
4154
};

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

+13
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
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 data from "../metadata/metadata.json";
45
import pkgJson from "../package.json";
6+
57
import { AssetCardGroup } from "./assetcard.test.js";
68
import { Template } from "./template.js";
79

@@ -86,6 +88,17 @@ export default {
8688
handles: [...(Checkbox.parameters?.actions?.handles ?? [])],
8789
},
8890
packageJson: pkgJson,
91+
cssprops: {
92+
...data.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") ? "rgba(0, 0, 0, 0)" : " ",
98+
};
99+
return collection;
100+
}, {})
101+
},
89102
},
90103
tags: ["!autodocs"],
91104
};

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

+13
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import { default as Checkbox } from "@spectrum-css/checkbox/stories/checkbox.stories.js";
22
import { disableDefaultModes } from "@spectrum-css/preview/modes";
3+
import data from "../metadata/metadata.json";
34
import pkgJson from "../package.json";
5+
46
import { AssetListGroup } from "./assetlist.test.js";
57

68
/**
@@ -20,6 +22,17 @@ export default {
2022
handles: [...(Checkbox.parameters?.actions?.handles ?? [])],
2123
},
2224
packageJson: pkgJson,
25+
cssprops: {
26+
...data.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") ? "rgba(0, 0, 0, 0)" : " ",
32+
};
33+
return collection;
34+
}, {})
35+
},
2336
},
2437
};
2538

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

+13
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
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 data from "../metadata/metadata.json";
45
import pkgJson from "../package.json";
6+
57
import { AvatarGroup } from "./avatar.test.js";
68
import { Template } from "./template.js";
79

@@ -58,6 +60,17 @@ export default {
5860
},
5961
parameters: {
6062
packageJson: pkgJson,
63+
cssprops: {
64+
...data.modifiers.reduce((collection, item) => {
65+
const key = item.replace(/^--/, "");
66+
collection[key] = {
67+
category: "Modifiers",
68+
control: key.includes("color") ? "color" : "text",
69+
value: key.includes("color") ? "rgba(0, 0, 0, 0)" : " ",
70+
};
71+
return collection;
72+
}, {})
73+
},
6174
},
6275
tags: ["!autodocs"],
6376
};

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

+13
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.js";
22
import { disableDefaultModes } from "@spectrum-css/preview/modes";
33
import { size } from "@spectrum-css/preview/types";
4+
import data from "../metadata/metadata.json";
45
import pkgJson from "../package.json";
6+
57
import { BadgeGroup } from "./badge.test.js";
68
import { PreviewSets } from "./template.js";
79

@@ -62,6 +64,17 @@ export default {
6264
},
6365
parameters: {
6466
packageJson: pkgJson,
67+
cssprops: {
68+
...data.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") ? "rgba(0, 0, 0, 0)" : " ",
74+
};
75+
return collection;
76+
}, {})
77+
},
6578
},
6679
tags: ["!autodocs"],
6780
};

0 commit comments

Comments
 (0)