@pure-ds/storybook 0.1.5 → 0.1.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.storybook/addons/pds-configurator/preview.js +2 -2
- package/dist/pds-reference.json +1 -1
- package/package.json +3 -3
- package/scripts/package-build.js +2 -4
- package/stories/GettingStarted.md +96 -96
- package/stories/components/PdsDrawer.stories.js +602 -19
- package/stories/components/PdsIcon.stories.js +22 -6
- package/stories/components/PdsTabstrip.stories.js +434 -26
- package/stories/foundations/Colors.stories.js +240 -75
- package/stories/foundations/Icons.stories.js +287 -177
- package/stories/foundations/Spacing.stories.js +161 -57
- package/stories/foundations/Typography.stories.js +945 -68
- package/stories/primitives/Alerts.stories.js +25 -31
- package/stories/primitives/Badges.stories.js +146 -35
- package/stories/primitives/Buttons.stories.js +213 -85
- package/stories/primitives/Cards.stories.js +330 -53
- package/stories/primitives/Forms.stories.js +92 -161
|
@@ -1,71 +1,175 @@
|
|
|
1
1
|
import { html } from 'lit';
|
|
2
2
|
|
|
3
|
+
const spacingStoryStyles = html`
|
|
4
|
+
<style>
|
|
5
|
+
.spacing-story-container {
|
|
6
|
+
padding: var(--spacing-8);
|
|
7
|
+
display: grid;
|
|
8
|
+
gap: var(--spacing-6);
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.spacing-story-description {
|
|
12
|
+
max-width: 64ch;
|
|
13
|
+
color: var(--surface-text-secondary);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.spacing-token-grid {
|
|
17
|
+
display: grid;
|
|
18
|
+
gap: var(--spacing-4);
|
|
19
|
+
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.spacing-token-card {
|
|
23
|
+
display: flex;
|
|
24
|
+
flex-direction: column;
|
|
25
|
+
gap: var(--spacing-2);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.spacing-token-swatch {
|
|
29
|
+
border: 1px solid var(--color-border-subtle);
|
|
30
|
+
border-radius: var(--radius-md);
|
|
31
|
+
background: var(--color-surface);
|
|
32
|
+
display: flex;
|
|
33
|
+
align-items: center;
|
|
34
|
+
justify-content: center;
|
|
35
|
+
font-weight: 600;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.spacing-usage-examples {
|
|
39
|
+
display: grid;
|
|
40
|
+
gap: var(--spacing-4);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.spacing-stack-example {
|
|
44
|
+
display: grid;
|
|
45
|
+
gap: var(--spacing-3);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.spacing-inline-example {
|
|
49
|
+
display: flex;
|
|
50
|
+
flex-wrap: wrap;
|
|
51
|
+
gap: var(--spacing-3);
|
|
52
|
+
align-items: flex-start;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.spacing-inline-chip {
|
|
56
|
+
padding: var(--spacing-2) var(--spacing-3);
|
|
57
|
+
border-radius: var(--radius-full);
|
|
58
|
+
background: var(--surface-bg);
|
|
59
|
+
border: 1px solid var(--color-border-subtle);
|
|
60
|
+
font-size: 0.875rem;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.spacing-demo-card {
|
|
64
|
+
border: 1px dashed var(--color-border-subtle);
|
|
65
|
+
border-radius: var(--radius-md);
|
|
66
|
+
background: var(--surface-bg);
|
|
67
|
+
padding: var(--spacing-4);
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.spacing-demo-card__stack {
|
|
71
|
+
display: grid;
|
|
72
|
+
gap: var(--spacing-2);
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.spacing-demo-card__bar {
|
|
76
|
+
height: 8px;
|
|
77
|
+
border-radius: var(--radius-full);
|
|
78
|
+
background: var(--color-primary-quiet);
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.spacing-card-spacing-1 {
|
|
82
|
+
padding: var(--spacing-1);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.spacing-card-spacing-2 {
|
|
86
|
+
padding: var(--spacing-2);
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.spacing-card-spacing-3 {
|
|
90
|
+
padding: var(--spacing-3);
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.spacing-card-spacing-4 {
|
|
94
|
+
padding: var(--spacing-4);
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.spacing-card-spacing-5 {
|
|
98
|
+
padding: var(--spacing-5);
|
|
99
|
+
}
|
|
100
|
+
</style>
|
|
101
|
+
`;
|
|
102
|
+
|
|
103
|
+
const spacingTokens = [
|
|
104
|
+
{ token: '--spacing-1', description: 'Tight spacing for badges, chips, dense UI', className: 'spacing-card-spacing-1' },
|
|
105
|
+
{ token: '--spacing-2', description: 'Compact spacing for form controls and lists', className: 'spacing-card-spacing-2' },
|
|
106
|
+
{ token: '--spacing-3', description: 'Standard spacing for cards and content blocks', className: 'spacing-card-spacing-3' },
|
|
107
|
+
{ token: '--spacing-4', description: 'Generous spacing for sections and panels', className: 'spacing-card-spacing-4' },
|
|
108
|
+
{ token: '--spacing-5', description: 'Hero spacing for feature areas and layouts', className: 'spacing-card-spacing-5' }
|
|
109
|
+
];
|
|
110
|
+
|
|
3
111
|
export default {
|
|
4
112
|
title: 'Foundations/Spacing',
|
|
5
113
|
parameters: {
|
|
6
114
|
docs: {
|
|
7
115
|
description: {
|
|
8
|
-
component: '
|
|
116
|
+
component: 'Spacing tokens ensure consistent rhythm, balance, and hierarchy across layouts.'
|
|
9
117
|
}
|
|
10
118
|
}
|
|
11
|
-
},
|
|
12
|
-
argTypes: {
|
|
13
|
-
preset: {
|
|
14
|
-
control: 'select',
|
|
15
|
-
options: ['default', 'ocean-breeze', 'midnight-steel', 'sunset-vibes', 'forest-calm', 'lavender-dream'],
|
|
16
|
-
description: 'Choose a design preset'
|
|
17
|
-
},
|
|
18
|
-
primaryColor: {
|
|
19
|
-
control: 'color',
|
|
20
|
-
description: 'Override primary color'
|
|
21
|
-
},
|
|
22
|
-
secondaryColor: {
|
|
23
|
-
control: 'color',
|
|
24
|
-
description: 'Override secondary color'
|
|
25
|
-
}
|
|
26
119
|
}
|
|
27
120
|
};
|
|
28
121
|
|
|
29
|
-
export const
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
// Apply color overrides
|
|
39
|
-
if (args.primaryColor || args.secondaryColor) {
|
|
40
|
-
import('../../../src/js/pds.js').then(({ PDS }) => {
|
|
41
|
-
PDS.applyDesign({
|
|
42
|
-
design: {
|
|
43
|
-
colors: {
|
|
44
|
-
primary: args.primaryColor,
|
|
45
|
-
secondary: args.secondaryColor
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
});
|
|
49
|
-
});
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
return html`
|
|
55
|
-
<div class="story-container" style="padding: 2rem;">
|
|
56
|
-
|
|
57
|
-
<div style="display: flex; flex-direction: column; gap: var(--spacing-2);">
|
|
58
|
-
<div style="background: var(--color-primary-100); padding: var(--spacing-1);">Spacing 1</div>
|
|
59
|
-
<div style="background: var(--color-primary-200); padding: var(--spacing-2);">Spacing 2</div>
|
|
60
|
-
<div style="background: var(--color-primary-300); padding: var(--spacing-3);">Spacing 3</div>
|
|
61
|
-
<div style="background: var(--color-primary-400); padding: var(--spacing-4);">Spacing 4</div>
|
|
62
|
-
<div style="background: var(--color-primary-500); padding: var(--spacing-5); color: white;">Spacing 5</div>
|
|
63
|
-
</div>
|
|
64
|
-
|
|
122
|
+
export const SpacingScale = {
|
|
123
|
+
name: 'Spacing Scale',
|
|
124
|
+
render: () => html`
|
|
125
|
+
${spacingStoryStyles}
|
|
126
|
+
<div class="story-container spacing-story-container">
|
|
127
|
+
<div class="spacing-story-description">
|
|
128
|
+
Spacing tokens provide a consistent, modular scale for layout, component padding, and visual rhythm.
|
|
129
|
+
Each increment scales proportionally so vertical and horizontal spacing feels balanced throughout the UI.
|
|
65
130
|
</div>
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
131
|
+
|
|
132
|
+
<section class="spacing-token-grid">
|
|
133
|
+
${spacingTokens.map(
|
|
134
|
+
(token) => html`
|
|
135
|
+
<article class="card spacing-token-card">
|
|
136
|
+
<div class="spacing-token-swatch ${token.className}">
|
|
137
|
+
${token.token}
|
|
138
|
+
</div>
|
|
139
|
+
<div>
|
|
140
|
+
<strong>${token.token.replace('--', '')}</strong>
|
|
141
|
+
<p class="text-muted">${token.description}</p>
|
|
142
|
+
</div>
|
|
143
|
+
</article>
|
|
144
|
+
`
|
|
145
|
+
)}
|
|
146
|
+
</section>
|
|
147
|
+
|
|
148
|
+
<section class="spacing-usage-examples">
|
|
149
|
+
<div class="spacing-stack-example">
|
|
150
|
+
<h3>Vertical Stacks</h3>
|
|
151
|
+
<article class="card spacing-demo-card">
|
|
152
|
+
<div class="spacing-demo-card__stack">
|
|
153
|
+
<div class="spacing-demo-card__bar spacing-card-spacing-1"></div>
|
|
154
|
+
<div class="spacing-demo-card__bar spacing-card-spacing-2"></div>
|
|
155
|
+
<div class="spacing-demo-card__bar spacing-card-spacing-3"></div>
|
|
156
|
+
<div class="spacing-demo-card__bar spacing-card-spacing-4"></div>
|
|
157
|
+
<div class="spacing-demo-card__bar spacing-card-spacing-5"></div>
|
|
158
|
+
</div>
|
|
159
|
+
</article>
|
|
160
|
+
</div>
|
|
161
|
+
|
|
162
|
+
<div>
|
|
163
|
+
<h3>Inline Layout</h3>
|
|
164
|
+
<div class="spacing-inline-example">
|
|
165
|
+
${spacingTokens.map(
|
|
166
|
+
(token) => html`
|
|
167
|
+
<span class="spacing-inline-chip">${token.token}</span>
|
|
168
|
+
`
|
|
169
|
+
)}
|
|
170
|
+
</div>
|
|
171
|
+
</div>
|
|
172
|
+
</section>
|
|
173
|
+
</div>
|
|
174
|
+
`
|
|
71
175
|
};
|