Skip to content

Commit 754b512

Browse files
castastrophecastastrophe
committed
feat(storybook): custom properties panel
1 parent 8192326 commit 754b512

File tree

87 files changed

+1148
-82
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

+1148
-82
lines changed

‎.changeset/eleven-plants-grow.md

Lines changed: 5 additions & 0 deletions
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

Lines changed: 5 additions & 0 deletions
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

Lines changed: 2 additions & 0 deletions
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

Lines changed: 1 addition & 0 deletions
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

Lines changed: 12 additions & 0 deletions
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") ? undefined : " ",
68+
};
69+
return collection;
70+
}, {})
71+
},
6072
},
6173
tags: ["!autodocs"],
6274
};

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

Lines changed: 13 additions & 0 deletions
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") ? undefined : " ",
79+
};
80+
return collection;
81+
}, {})
82+
},
7083
},
7184
tags: ["!autodocs"],
7285
};

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

Lines changed: 13 additions & 0 deletions
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") ? undefined : " ",
85+
};
86+
return collection;
87+
}, {})
88+
},
7689
docs: {
7790
story: {
7891
height: "auto",

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

Lines changed: 13 additions & 0 deletions
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") ? undefined : " ",
73+
};
74+
return collection;
75+
}, {})
76+
},
6477
},
6578
};
6679

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

Lines changed: 6 additions & 0 deletions
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

Lines changed: 13 additions & 0 deletions
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

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

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

Lines changed: 13 additions & 0 deletions
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

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

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

Lines changed: 13 additions & 0 deletions
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") ? undefined : " ",
48+
};
49+
return collection;
50+
}, {})
51+
},
3952
},
4053
tags: ["!autodocs"],
4154
};

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

Lines changed: 13 additions & 0 deletions
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") ? undefined : " ",
98+
};
99+
return collection;
100+
}, {})
101+
},
89102
},
90103
tags: ["!autodocs"],
91104
};

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

Lines changed: 13 additions & 0 deletions
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") ? undefined : " ",
32+
};
33+
return collection;
34+
}, {})
35+
},
2336
},
2437
};
2538

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

Lines changed: 13 additions & 0 deletions
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") ? undefined : " ",
70+
};
71+
return collection;
72+
}, {})
73+
},
6174
},
6275
tags: ["!autodocs"],
6376
};

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

Lines changed: 13 additions & 0 deletions
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") ? undefined : " ",
74+
};
75+
return collection;
76+
}, {})
77+
},
6578
},
6679
tags: ["!autodocs"],
6780
};

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

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,19 @@
11
import { disableDefaultModes } from "@spectrum-css/preview/modes";
22
import { isDragged } from "@spectrum-css/preview/types";
3+
import data from "../metadata/metadata.json";
34
import pkgJson from "../package.json";
5+
46
import { BreadcrumbGroup } from "./breadcrumb.test.js";
57
import { Template } from "./template";
68

79
/**
810
* Breadcrumbs show hierarchy and navigational context for a user's location within an app.
9-
*
11+
*
1012
* ## Nesting
1113
* Breadcrumbs truncate when there is not enough room to display all levels of the breadcrumb list, or as a way of managing relevance of the visible breadcrumb items in a deeply nested hierarchy. The truncation of breadcrumb items begins when either there is not enough room to display all items, or if there are 5 or more breadcrumbs to display. They are typically indicated by the truncated menu folder icon.
12-
*
14+
*
1315
* The nested variants below are non-functional. Implementations can add their own overflow menus to display all options within a breadcrumb.
14-
*
16+
*
1517
* ## Root Context
1618
* Some applications find that displaying the root directory is useful for user orientation. This variation keeps the root visible when other folders are truncated into a menu. For example, when users can navigate file directories on their device as well as in the cloud, exposing a root directory called “On this device” is very helpful.
1719
*/
@@ -41,6 +43,17 @@ export default {
4143
},
4244
parameters: {
4345
packageJson: pkgJson,
46+
cssprops: {
47+
...data.modifiers.reduce((collection, item) => {
48+
const key = item.replace(/^--/, "");
49+
collection[key] = {
50+
category: "Modifiers",
51+
control: key.includes("color") ? "color" : "text",
52+
value: key.includes("color") ? undefined : " ",
53+
};
54+
return collection;
55+
}, {})
56+
},
4457
},
4558
};
4659

0 commit comments

Comments
 (0)