Skip to content

Commit 6c7fda2

Browse files
castastrophecastastrophe
committed
chore(storybook): add custom styling and upgrade static color
1 parent e5a1699 commit 6c7fda2

File tree

42 files changed

+220
-104
lines changed

Some content is hidden

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

42 files changed

+220
-104
lines changed

‎.circleci/config.yml

+2-2
Original file line numberDiff line numberDiff line change
@@ -231,7 +231,7 @@ jobs:
231231
command: yarn docs:analyze
232232
- run:
233233
name: Move CEM to Storybook directory
234-
command: cp projects/documentation/custom-elements.json storybook/
234+
command: cp projects/documentation/custom-elements.json .storybook/
235235
- run:
236236
name: Build documentation
237237
command: yarn docs:build
@@ -254,7 +254,7 @@ jobs:
254254
command: yarn docs:analyze
255255
- run:
256256
name: Move CEM to Storybook directory
257-
command: cp projects/documentation/custom-elements.json storybook/
257+
command: cp projects/documentation/custom-elements.json .storybook/
258258
- run:
259259
name: Build documentation
260260
command: yarn docs:build

‎.github/workflows/chromatic-vrt.yml

+1-1
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ jobs:
3939
run: yarn docs:analyze
4040

4141
- name: Move CEM to Storybook directory
42-
run: cp projects/documentation/custom-elements.json storybook/
42+
run: cp projects/documentation/custom-elements.json .storybook/
4343

4444
- name: Publish to Chromatic
4545
id: chromatic

‎.github/workflows/publish.yml

+1-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ jobs:
2323
run: yarn docs:analyze
2424

2525
- name: Move CEM to Storybook directory
26-
run: cp projects/documentation/custom-elements.json storybook/
26+
run: cp projects/documentation/custom-elements.json .storybook/
2727

2828
- name: Build documentation
2929
run: yarn docs:production

‎.storybook/assets/base.css

+31-5
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,22 @@
1212
*/
1313

1414
:root {
15-
--spectrum-font-family: var(--spectrum-sans-font-family-stack);
16-
--spectrum-font-style: var(--spectrum-default-font-style);
17-
--spectrum-font-size: var(--spectrum-font-size-100);
15+
--spectrum-font-family: var(
16+
--spectrum-sans-font-family-stack,
17+
adobe-clean,
18+
'Adobe Clean',
19+
'Source Sans Pro',
20+
-apple-system,
21+
BlinkMacSystemFont,
22+
'Segoe UI',
23+
Roboto,
24+
Ubuntu,
25+
'Trebuchet MS',
26+
'Lucida Grande',
27+
sans-serif
28+
);
29+
--spectrum-font-style: var(--spectrum-default-font-style, normal);
30+
--spectrum-font-size: var(--spectrum-font-size-100, 14px);
1831
--spectrum-gray-100: light-dark(rgb(248 248 248), rgb(34 34 34));
1932
--spectrum-gray-800: light-dark(rgb(34 34 34), rgb(255 255 255));
2033

@@ -55,7 +68,7 @@ body {
5568
font-family: var(--spectrum-font-family);
5669
font-size: var(--spectrum-font-size);
5770
font-style: var(--spectrum-font-style);
58-
background: var(--mod-story-decorator-background) !important;
71+
background: var(--spectrum-gray-100);
5972
color: var(--spectrum-gray-800);
6073
-webkit-tap-highlight-color: rgb(0 0 0 / 0%);
6174
}
@@ -72,11 +85,24 @@ body:has([static-color='white']) {
7285
);
7386
}
7487

75-
body,
7688
body .docs-story {
7789
background: var(--mod-story-decorator-background) !important;
7890
}
7991

92+
h1,
93+
h2,
94+
h3,
95+
h4,
96+
h5,
97+
h6,
98+
p,
99+
li,
100+
dl {
101+
font-family: var(--spectrum-sans-font-family-stack);
102+
font-style: var(--spectrum-default-font-style);
103+
color: var(--spectrum-gray-800);
104+
}
105+
80106
/* Hide the SVG elements that only include references */
81107
svg:has(symbol):not(:has(use)) {
82108
display: none;

‎netlify.toml

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,4 @@
55
[[headers]]
66
for = "/storybook/*.json"
77
[headers.values]
8-
Access-Control-Allow-Origin = "*"
8+
Access-Control-Allow-Origin = "*"

‎packages/action-bar/stories/args.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export const argTypes = {
1717
description: 'Whether the Action Bar is open and visible.',
1818
table: {
1919
type: { summary: 'boolean' },
20-
defaultValue: { summary: true },
20+
defaultValue: { summary: 'true' },
2121
category: 'Attributes',
2222
},
2323
control: {
@@ -43,7 +43,7 @@ export const argTypes = {
4343
description: 'Whether to display tools in the action bar.',
4444
table: {
4545
type: { summary: 'boolean' },
46-
defaultValue: { summary: true },
46+
defaultValue: { summary: 'true' },
4747
category: 'Attributes',
4848
},
4949
control: {

‎packages/action-group/stories/action-group-tooltip.stories.ts

-1
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,6 @@ export default {
112112
'Whether the elements selects its children and how many it can select at a time.',
113113
table: {
114114
type: { summary: 'string' },
115-
defaultValue: { summary: '' },
116115
category: 'Attributes',
117116
},
118117
control: {

‎packages/action-menu/stories/action-menu.stories.ts

-2
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,6 @@ export default {
6464
type: { name: 'string', required: false },
6565
table: {
6666
type: { summary: 'string' },
67-
defaultValue: { summary: '' },
6867
category: 'Attributes',
6968
},
7069
control: 'text',
@@ -75,7 +74,6 @@ export default {
7574
description: 'Tooltip description',
7675
table: {
7776
type: { summary: 'string' },
78-
defaultValue: { summary: '' },
7977
category: 'Attributes',
8078
},
8179
control: {

‎packages/alert-banner/stories/args.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ export const argTypes = {
2828
'Whether to include an icon-only close button to dismiss it',
2929
table: {
3030
type: { summary: 'boolean' },
31-
defaultValue: { summary: true },
31+
defaultValue: { summary: 'true' },
3232
category: 'Attributes',
3333
},
3434
control: { type: 'boolean' },
@@ -39,7 +39,7 @@ export const argTypes = {
3939
description: 'Whether the alert banner is open',
4040
table: {
4141
type: { summary: 'boolean' },
42-
defaultValue: { summary: true },
42+
defaultValue: { summary: 'true' },
4343
category: 'Attributes',
4444
},
4545
control: { type: 'boolean' },

‎packages/color-area/stories/color-area.stories.ts

-1
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,6 @@ export default {
2929
description: 'The color displayed by the ColorArea.',
3030
table: {
3131
type: { summary: 'ColorTypes' },
32-
defaultValue: { summary: '' },
3332
category: 'Attributes',
3433
},
3534
control: 'color',

‎packages/color-field/stories/args.ts

+4
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ export const argTypes = {
3131
table: {
3232
type: { summary: 'boolean' },
3333
defaultValue: { summary: 'false' },
34+
category: 'Attributes',
3435
},
3536
control: {
3637
type: 'boolean',
@@ -43,6 +44,7 @@ export const argTypes = {
4344
table: {
4445
type: { summary: 'boolean' },
4546
defaultValue: { summary: 'false' },
47+
category: 'Attributes',
4648
},
4749
control: {
4850
type: 'boolean',
@@ -53,7 +55,9 @@ export const argTypes = {
5355
type: { name: 'string', required: false },
5456
description: 'The size at which to display color-field items.',
5557
table: {
58+
type: { summary: 'string' },
5659
defaultValue: { summary: 'm' },
60+
category: 'Attributes',
5761
},
5862
control: {
5963
labels: {

‎packages/combobox/stories/args.ts

+7
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,9 @@ export const argTypes = {
1515
name: 'size',
1616
type: { name: 'string', required: false },
1717
table: {
18+
type: { summary: 'string' },
1819
defaultValue: { summary: 'm' },
20+
category: 'Attributes',
1921
},
2022
control: {
2123
labels: {
@@ -34,6 +36,7 @@ export const argTypes = {
3436
table: {
3537
type: { summary: 'boolean' },
3638
defaultValue: { summary: 'false' },
39+
category: 'Attributes',
3740
},
3841
control: {
3942
type: 'boolean',
@@ -47,6 +50,7 @@ export const argTypes = {
4750
table: {
4851
type: { summary: 'boolean' },
4952
defaultValue: { summary: 'false' },
53+
category: 'Attributes',
5054
},
5155
control: {
5256
type: 'boolean',
@@ -58,6 +62,7 @@ export const argTypes = {
5862
table: {
5963
type: { summary: 'boolean' },
6064
defaultValue: { summary: 'false' },
65+
category: 'Attributes',
6166
},
6267
control: {
6368
type: 'boolean',
@@ -69,6 +74,7 @@ export const argTypes = {
6974
table: {
7075
type: { summary: 'boolean' },
7176
defaultValue: { summary: 'false' },
77+
category: 'Attributes',
7278
},
7379
control: {
7480
type: 'boolean',
@@ -80,6 +86,7 @@ export const argTypes = {
8086
table: {
8187
type: { summary: 'boolean' },
8288
defaultValue: { summary: 'false' },
89+
category: 'Attributes',
8390
},
8491
control: {
8592
type: 'boolean',

‎packages/contextual-help/stories/args.ts

+5
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ export const argTypes = {
2626
table: {
2727
type: { summary: 'boolean' },
2828
defaultValue: { summary: 'false' },
29+
category: 'Attributes',
2930
},
3031
control: {
3132
type: 'boolean',
@@ -36,6 +37,7 @@ export const argTypes = {
3637
type: { name: 'string', required: false },
3738
table: {
3839
defaultValue: { summary: 'info' },
40+
category: 'Attributes',
3941
},
4042
control: {
4143
labels: {
@@ -52,6 +54,7 @@ export const argTypes = {
5254
table: {
5355
type: { summary: 'label' },
5456
defaultValue: { summary: 'Informations' },
57+
category: 'Attributes',
5558
},
5659
control: 'text',
5760
},
@@ -61,6 +64,7 @@ export const argTypes = {
6164
table: {
6265
type: { summary: 'offset' },
6366
defaultValue: { summary: 0 },
67+
category: 'Attributes',
6468
},
6569
control: 'number',
6670
},
@@ -72,6 +76,7 @@ export const argTypes = {
7276
table: {
7377
type: { summary: 'string' },
7478
defaultValue: { summary: 'bottom-start' },
79+
category: 'Attributes',
7580
},
7681
control: {
7782
type: 'select',

‎packages/dropzone/stories/dropzone.stories.ts

+2
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ export default {
3737
table: {
3838
type: { summary: 'boolean' },
3939
defaultValue: { summary: 'false' },
40+
category: 'Attributes',
4041
},
4142
control: {
4243
type: 'boolean',
@@ -48,6 +49,7 @@ export default {
4849
table: {
4950
type: { summary: 'boolean' },
5051
defaultValue: { summary: 'false' },
52+
category: 'Attributes',
5153
},
5254
control: {
5355
type: 'boolean',

‎packages/help-text/stories/help-text.stories.ts

+4
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ export default {
2525
table: {
2626
type: { summary: 'boolean' },
2727
defaultValue: { summary: 'false' },
28+
category: 'Attributes',
2829
},
2930
control: {
3031
type: 'boolean',
@@ -37,6 +38,7 @@ export default {
3738
table: {
3839
type: { summary: 'boolean' },
3940
defaultValue: { summary: 'false' },
41+
category: 'Attributes',
4042
},
4143
control: {
4244
type: 'boolean',
@@ -49,6 +51,7 @@ export default {
4951
table: {
5052
type: { summary: 'string' },
5153
defaultValue: { summary: 'cta' },
54+
category: 'Attributes',
5255
},
5356
control: {
5457
type: 'inline-radio',
@@ -61,6 +64,7 @@ export default {
6164
description: 'The visual variant to apply to the Help Text.',
6265
table: {
6366
type: { summary: 'string' },
67+
category: 'Attributes',
6468
defaultValue: { summary: 'cta' },
6569
},
6670
control: {

‎packages/infield-button/stories/index.ts

+5-3
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ export const argTypes = {
4848
description: 'Where to place the button along the block axis.',
4949
table: {
5050
type: { summary: '"start" | "end"' },
51-
defaultValue: { summary: '' },
51+
category: 'Attributes',
5252
},
5353
control: 'select',
5454
options: ['none', 'start', 'end'],
@@ -60,6 +60,7 @@ export const argTypes = {
6060
table: {
6161
type: { summary: 'boolean' },
6262
defaultValue: { summary: 'false' },
63+
category: 'Attributes',
6364
},
6465
control: {
6566
type: 'boolean',
@@ -71,7 +72,7 @@ export const argTypes = {
7172
description: 'Where to place the button along the inline axis.',
7273
table: {
7374
type: { summary: '"start" | "end"' },
74-
defaultValue: { summary: '' },
75+
category: 'Attributes',
7576
},
7677
control: 'select',
7778
options: ['none', 'start', 'end'],
@@ -82,7 +83,7 @@ export const argTypes = {
8283
description: 'The t-shit size of the button.',
8384
table: {
8485
type: { summary: '"s" | "m" | "l" | "xl"' },
85-
defaultValue: { summary: '' },
86+
category: 'Attributes',
8687
},
8788
control: 'select',
8889
options: ['s', 'm', 'l', 'xl'],
@@ -94,6 +95,7 @@ export const argTypes = {
9495
table: {
9596
type: { summary: 'boolean' },
9697
defaultValue: { summary: 'false' },
98+
category: 'Attributes',
9799
},
98100
control: {
99101
type: 'boolean',

0 commit comments

Comments
 (0)