@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
|
@@ -3,6 +3,9 @@ import { html } from 'lit';
|
|
|
3
3
|
export default {
|
|
4
4
|
title: 'Primitives/Alerts',
|
|
5
5
|
parameters: {
|
|
6
|
+
pds: {
|
|
7
|
+
tags: ['colors']
|
|
8
|
+
},
|
|
6
9
|
docs: {
|
|
7
10
|
description: {
|
|
8
11
|
component: 'Basic UI elements - buttons, forms, cards, badges'
|
|
@@ -26,41 +29,32 @@ export default {
|
|
|
26
29
|
}
|
|
27
30
|
};
|
|
28
31
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
import('../../../src/js/pds.js').then(({ PDS }) => {
|
|
34
|
-
PDS.applyDesign({ preset: args.preset });
|
|
35
|
-
});
|
|
32
|
+
const alertsStoryStyles = html`
|
|
33
|
+
<style>
|
|
34
|
+
.alerts-story-container {
|
|
35
|
+
padding: var(--spacing-8);
|
|
36
36
|
}
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
PDS.applyDesign({
|
|
42
|
-
design: {
|
|
43
|
-
colors: {
|
|
44
|
-
primary: args.primaryColor,
|
|
45
|
-
secondary: args.secondaryColor
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
});
|
|
49
|
-
});
|
|
37
|
+
.alerts-stack {
|
|
38
|
+
display: flex;
|
|
39
|
+
flex-direction: column;
|
|
40
|
+
gap: var(--spacing-4);
|
|
50
41
|
}
|
|
51
|
-
|
|
52
|
-
|
|
42
|
+
</style>
|
|
43
|
+
`;
|
|
53
44
|
|
|
45
|
+
export const Default = {
|
|
46
|
+
render: (args) => {
|
|
47
|
+
// Preset changes are handled by toolbar in preview.js
|
|
48
|
+
|
|
54
49
|
return html`
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
50
|
+
${alertsStoryStyles}
|
|
51
|
+
<div class="story-container alerts-story-container">
|
|
52
|
+
<div class="alerts-stack">
|
|
53
|
+
<div class="alert alert-info">This is an info alert.</div>
|
|
54
|
+
<div class="alert alert-success">This is a success alert.</div>
|
|
55
|
+
<div class="alert alert-warning">This is a warning alert.</div>
|
|
56
|
+
<div class="alert alert-danger">This is a danger alert.</div>
|
|
57
|
+
</div>
|
|
64
58
|
</div>
|
|
65
59
|
`;
|
|
66
60
|
},
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { html } from 'lit';
|
|
2
2
|
|
|
3
3
|
export default {
|
|
4
|
-
title: 'Primitives/Badges',
|
|
4
|
+
title: 'Primitives/Badges & Pills',
|
|
5
5
|
parameters: {
|
|
6
6
|
docs: {
|
|
7
7
|
description: {
|
|
8
|
-
component: '
|
|
8
|
+
component: 'Badges and pills for labels, tags, status indicators, and categorization'
|
|
9
9
|
}
|
|
10
10
|
}
|
|
11
11
|
},
|
|
@@ -26,43 +26,154 @@ export default {
|
|
|
26
26
|
}
|
|
27
27
|
};
|
|
28
28
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
29
|
+
const badgesStoryStyles = html`
|
|
30
|
+
<style>
|
|
31
|
+
.badges-story-container {
|
|
32
|
+
padding: var(--spacing-8);
|
|
33
|
+
}
|
|
34
|
+
.badges-row {
|
|
35
|
+
display: flex;
|
|
36
|
+
gap: var(--spacing-4);
|
|
37
|
+
flex-wrap: wrap;
|
|
38
|
+
align-items: center;
|
|
39
|
+
}
|
|
40
|
+
.badges-row + .badges-row {
|
|
41
|
+
margin-top: var(--spacing-8);
|
|
36
42
|
}
|
|
37
|
-
|
|
38
|
-
|
|
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
|
-
});
|
|
43
|
+
.badges-section {
|
|
44
|
+
margin-bottom: var(--spacing-8);
|
|
50
45
|
}
|
|
51
|
-
|
|
52
|
-
|
|
46
|
+
</style>
|
|
47
|
+
`;
|
|
48
|
+
|
|
49
|
+
export const DefaultBadges = {
|
|
50
|
+
render: (args) => {
|
|
51
|
+
return html`
|
|
52
|
+
${badgesStoryStyles}
|
|
53
|
+
<div class="story-container badges-story-container">
|
|
54
|
+
<h3>Default Badges</h3>
|
|
55
|
+
<div class="flex gap-md flex-wrap items-center">
|
|
56
|
+
<span class="badge">Default</span>
|
|
57
|
+
<span class="badge badge-primary">Primary</span>
|
|
58
|
+
<span class="badge badge-secondary">Secondary</span>
|
|
59
|
+
<span class="badge badge-success">Success</span>
|
|
60
|
+
<span class="badge badge-warning">Warning</span>
|
|
61
|
+
<span class="badge badge-danger">Danger</span>
|
|
62
|
+
<span class="badge badge-info">Info</span>
|
|
63
|
+
</div>
|
|
64
|
+
</div>
|
|
65
|
+
`;
|
|
66
|
+
},
|
|
67
|
+
args: {
|
|
68
|
+
preset: 'default'
|
|
69
|
+
}
|
|
70
|
+
};
|
|
71
|
+
|
|
72
|
+
export const OutlinedBadges = {
|
|
73
|
+
render: (args) => {
|
|
74
|
+
return html`
|
|
75
|
+
${badgesStoryStyles}
|
|
76
|
+
<div class="story-container badges-story-container">
|
|
77
|
+
<h3>Outlined Badges</h3>
|
|
78
|
+
<div class="badges-row">
|
|
79
|
+
<span class="badge badge-outline badge-primary">Primary</span>
|
|
80
|
+
<span class="badge badge-outline badge-secondary">Secondary</span>
|
|
81
|
+
<span class="badge badge-outline badge-success">Success</span>
|
|
82
|
+
<span class="badge badge-outline badge-info">Info</span>
|
|
83
|
+
<span class="badge badge-outline badge-warning">Warning</span>
|
|
84
|
+
<span class="badge badge-outline badge-danger">Danger</span>
|
|
85
|
+
</div>
|
|
86
|
+
</div>
|
|
87
|
+
`;
|
|
88
|
+
},
|
|
89
|
+
args: {
|
|
90
|
+
preset: 'default'
|
|
91
|
+
}
|
|
92
|
+
};
|
|
53
93
|
|
|
94
|
+
export const BadgeSizes = {
|
|
95
|
+
render: (args) => {
|
|
54
96
|
return html`
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
97
|
+
${badgesStoryStyles}
|
|
98
|
+
<div class="story-container badges-story-container">
|
|
99
|
+
<h3>Badge Sizes</h3>
|
|
100
|
+
<div class="flex gap-md flex-wrap items-center">
|
|
101
|
+
<span class="badge badge-primary badge-sm">Small</span>
|
|
102
|
+
<span class="badge badge-primary">Default</span>
|
|
103
|
+
<span class="badge badge-primary badge-lg">Large</span>
|
|
104
|
+
</div>
|
|
105
|
+
</div>
|
|
106
|
+
`;
|
|
107
|
+
},
|
|
108
|
+
args: {
|
|
109
|
+
preset: 'default'
|
|
110
|
+
}
|
|
111
|
+
};
|
|
112
|
+
|
|
113
|
+
export const Pills = {
|
|
114
|
+
render: (args) => {
|
|
115
|
+
return html`
|
|
116
|
+
${badgesStoryStyles}
|
|
117
|
+
<div class="story-container badges-story-container">
|
|
118
|
+
<h3>Pills</h3>
|
|
119
|
+
<div class="badges-row">
|
|
120
|
+
<span class="pill badge-primary">React</span>
|
|
121
|
+
<span class="pill badge-secondary">Vue</span>
|
|
122
|
+
<span class="pill badge-success">Node.js</span>
|
|
123
|
+
<span class="pill badge-info">TypeScript</span>
|
|
124
|
+
<span class="pill badge-warning">JavaScript</span>
|
|
125
|
+
<span class="pill badge-danger">Critical</span>
|
|
126
|
+
</div>
|
|
127
|
+
</div>
|
|
128
|
+
`;
|
|
129
|
+
},
|
|
130
|
+
args: {
|
|
131
|
+
preset: 'default'
|
|
132
|
+
}
|
|
133
|
+
};
|
|
134
|
+
|
|
135
|
+
export const AllVariations = {
|
|
136
|
+
render: (args) => {
|
|
137
|
+
return html`
|
|
138
|
+
${badgesStoryStyles}
|
|
139
|
+
<div class="story-container badges-story-container">
|
|
140
|
+
<h3>Default Badges</h3>
|
|
141
|
+
<div class="badges-row badges-section">
|
|
142
|
+
<span class="badge">Default</span>
|
|
143
|
+
<span class="badge badge-primary">Primary</span>
|
|
144
|
+
<span class="badge badge-secondary">Secondary</span>
|
|
145
|
+
<span class="badge badge-success">Success</span>
|
|
146
|
+
<span class="badge badge-warning">Warning</span>
|
|
147
|
+
<span class="badge badge-danger">Danger</span>
|
|
148
|
+
<span class="badge badge-info">Info</span>
|
|
149
|
+
</div>
|
|
150
|
+
|
|
151
|
+
<h3>Outlined Badges</h3>
|
|
152
|
+
<div class="badges-row badges-section">
|
|
153
|
+
<span class="badge badge-outline badge-primary">Primary</span>
|
|
154
|
+
<span class="badge badge-outline badge-secondary">Secondary</span>
|
|
155
|
+
<span class="badge badge-outline badge-success">Success</span>
|
|
156
|
+
<span class="badge badge-outline badge-info">Info</span>
|
|
157
|
+
<span class="badge badge-outline badge-warning">Warning</span>
|
|
158
|
+
<span class="badge badge-outline badge-danger">Danger</span>
|
|
159
|
+
</div>
|
|
160
|
+
|
|
161
|
+
<h3>Badge Sizes</h3>
|
|
162
|
+
<div class="badges-row badges-section">
|
|
163
|
+
<span class="badge badge-primary badge-sm">Small</span>
|
|
164
|
+
<span class="badge badge-primary">Default</span>
|
|
165
|
+
<span class="badge badge-primary badge-lg">Large</span>
|
|
166
|
+
</div>
|
|
167
|
+
|
|
168
|
+
<h3>Pills</h3>
|
|
169
|
+
<div class="badges-row">
|
|
170
|
+
<span class="pill badge-primary">React</span>
|
|
171
|
+
<span class="pill badge-secondary">Vue</span>
|
|
172
|
+
<span class="pill badge-success">Node.js</span>
|
|
173
|
+
<span class="pill badge-info">TypeScript</span>
|
|
174
|
+
<span class="pill badge-warning">JavaScript</span>
|
|
175
|
+
<span class="pill badge-danger">Critical</span>
|
|
176
|
+
</div>
|
|
66
177
|
</div>
|
|
67
178
|
`;
|
|
68
179
|
},
|
|
@@ -2,100 +2,228 @@ import { html } from 'lit';
|
|
|
2
2
|
|
|
3
3
|
export default {
|
|
4
4
|
title: 'Primitives/Buttons',
|
|
5
|
+
tags: ['buttons', 'interaction'],
|
|
5
6
|
parameters: {
|
|
7
|
+
pds: {
|
|
8
|
+
tags: ['buttons', 'interaction']
|
|
9
|
+
},
|
|
6
10
|
docs: {
|
|
7
11
|
description: {
|
|
8
|
-
component: '
|
|
12
|
+
component: 'Button primitives with variants, sizes, and icon support. All buttons automatically adapt to your theme with proper focus states and accessibility.'
|
|
9
13
|
}
|
|
10
14
|
}
|
|
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
15
|
}
|
|
27
16
|
};
|
|
28
17
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
import('../../../src/js/pds.js').then(({ PDS }) => {
|
|
34
|
-
PDS.applyDesign({ preset: args.preset });
|
|
35
|
-
});
|
|
18
|
+
const buttonsStoryStyles = html`
|
|
19
|
+
<style>
|
|
20
|
+
.buttons-story-section {
|
|
21
|
+
padding: var(--spacing-4);
|
|
36
22
|
}
|
|
37
|
-
|
|
38
|
-
|
|
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
|
-
});
|
|
23
|
+
.buttons-story-heading-spacer {
|
|
24
|
+
margin-top: var(--spacing-6);
|
|
50
25
|
}
|
|
26
|
+
.buttons-story-helper {
|
|
27
|
+
margin-bottom: var(--spacing-4);
|
|
28
|
+
opacity: 0.8;
|
|
29
|
+
}
|
|
30
|
+
.buttons-story-row {
|
|
31
|
+
margin-bottom: var(--spacing-4);
|
|
32
|
+
}
|
|
33
|
+
</style>
|
|
34
|
+
`;
|
|
35
|
+
|
|
36
|
+
export const ButtonVariants = () => html`
|
|
37
|
+
${buttonsStoryStyles}
|
|
38
|
+
<div class="buttons-story-section">
|
|
39
|
+
<h3>Button Variants</h3>
|
|
40
|
+
<div class="flex gap-sm flex-wrap">
|
|
41
|
+
<button class="btn-primary">Primary</button>
|
|
42
|
+
<button class="btn-secondary">Secondary</button>
|
|
43
|
+
<button class="btn-outline">Outline</button>
|
|
44
|
+
<button class="btn-primary" disabled>Disabled</button>
|
|
45
|
+
</div>
|
|
46
|
+
</div>
|
|
47
|
+
`;
|
|
48
|
+
|
|
49
|
+
ButtonVariants.storyName = 'Button Variants';
|
|
50
|
+
|
|
51
|
+
export const ButtonSizes = () => html`
|
|
52
|
+
${buttonsStoryStyles}
|
|
53
|
+
<div class="buttons-story-section">
|
|
54
|
+
<h3>Button Sizes</h3>
|
|
55
|
+
<div class="flex gap-sm flex-wrap items-center">
|
|
56
|
+
<button class="btn-primary btn-sm">Small</button>
|
|
57
|
+
<button class="btn-primary">Default</button>
|
|
58
|
+
<button class="btn-primary btn-lg">Large</button>
|
|
59
|
+
</div>
|
|
60
|
+
</div>
|
|
61
|
+
`;
|
|
62
|
+
|
|
63
|
+
ButtonSizes.storyName = 'Button Sizes';
|
|
64
|
+
|
|
65
|
+
export const IconButtons = () => html`
|
|
66
|
+
${buttonsStoryStyles}
|
|
67
|
+
<div class="buttons-story-section">
|
|
68
|
+
<h3>Buttons with Icons</h3>
|
|
69
|
+
<div class="flex gap-sm flex-wrap">
|
|
70
|
+
<button class="btn-primary">
|
|
71
|
+
<pds-icon icon="download"></pds-icon>
|
|
72
|
+
<span>Download</span>
|
|
73
|
+
</button>
|
|
74
|
+
<button class="btn-secondary">
|
|
75
|
+
<pds-icon icon="gear"></pds-icon>
|
|
76
|
+
<span>Settings</span>
|
|
77
|
+
</button>
|
|
78
|
+
<button class="btn-outline">
|
|
79
|
+
<pds-icon icon="bell"></pds-icon>
|
|
80
|
+
<span>Notifications</span>
|
|
81
|
+
</button>
|
|
82
|
+
<button class="btn-primary">
|
|
83
|
+
<pds-icon icon="heart"></pds-icon>
|
|
84
|
+
<span>Favorite</span>
|
|
85
|
+
</button>
|
|
86
|
+
</div>
|
|
87
|
+
|
|
88
|
+
<h3 class="buttons-story-heading-spacer">Icon on Right</h3>
|
|
89
|
+
<div class="flex gap-sm flex-wrap">
|
|
90
|
+
<button class="btn-primary">
|
|
91
|
+
<span>Next</span>
|
|
92
|
+
<pds-icon icon="arrow-right"></pds-icon>
|
|
93
|
+
</button>
|
|
94
|
+
<button class="btn-secondary">
|
|
95
|
+
<span>Previous</span>
|
|
96
|
+
<pds-icon icon="arrow-left"></pds-icon>
|
|
97
|
+
</button>
|
|
98
|
+
</div>
|
|
99
|
+
</div>
|
|
100
|
+
`;
|
|
101
|
+
|
|
102
|
+
IconButtons.storyName = 'Buttons with Icons';
|
|
103
|
+
|
|
104
|
+
export const IconOnlyButtons = () => html`
|
|
105
|
+
${buttonsStoryStyles}
|
|
106
|
+
<div class="buttons-story-section">
|
|
107
|
+
<h3>Icon-Only Buttons</h3>
|
|
108
|
+
<p class="buttons-story-helper">
|
|
109
|
+
Use <code>.icon-only</code> class for square icon buttons
|
|
110
|
+
</p>
|
|
51
111
|
|
|
52
|
-
|
|
112
|
+
<div class="flex gap-sm flex-wrap">
|
|
113
|
+
<button class="icon-only btn-primary">
|
|
114
|
+
<pds-icon icon="gear" label="Settings"></pds-icon>
|
|
115
|
+
</button>
|
|
116
|
+
<button class="icon-only btn-secondary">
|
|
117
|
+
<pds-icon icon="bell" label="Notifications"></pds-icon>
|
|
118
|
+
</button>
|
|
119
|
+
<button class="icon-only btn-outline">
|
|
120
|
+
<pds-icon icon="heart" label="Favorite"></pds-icon>
|
|
121
|
+
</button>
|
|
122
|
+
<button class="icon-only btn-primary">
|
|
123
|
+
<pds-icon icon="trash" label="Delete"></pds-icon>
|
|
124
|
+
</button>
|
|
125
|
+
<button class="icon-only btn-secondary">
|
|
126
|
+
<pds-icon icon="pencil" label="Edit"></pds-icon>
|
|
127
|
+
</button>
|
|
128
|
+
<button class="icon-only btn-outline">
|
|
129
|
+
<pds-icon icon="copy" label="Copy"></pds-icon>
|
|
130
|
+
</button>
|
|
131
|
+
</div>
|
|
53
132
|
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
133
|
+
<h3 class="buttons-story-heading-spacer">Icon-Only Sizes</h3>
|
|
134
|
+
<div class="flex gap-sm flex-wrap items-center">
|
|
135
|
+
<button class="icon-only btn-primary btn-sm">
|
|
136
|
+
<pds-icon icon="plus" size="sm" label="Add"></pds-icon>
|
|
137
|
+
</button>
|
|
138
|
+
<button class="icon-only btn-primary">
|
|
139
|
+
<pds-icon icon="plus" label="Add"></pds-icon>
|
|
140
|
+
</button>
|
|
141
|
+
<button class="icon-only btn-primary btn-lg">
|
|
142
|
+
<pds-icon icon="plus" size="lg" label="Add"></pds-icon>
|
|
143
|
+
</button>
|
|
144
|
+
</div>
|
|
145
|
+
</div>
|
|
146
|
+
`;
|
|
147
|
+
|
|
148
|
+
IconOnlyButtons.storyName = 'Icon-Only Buttons';
|
|
149
|
+
|
|
150
|
+
export const ButtonGroups = () => html`
|
|
151
|
+
${buttonsStoryStyles}
|
|
152
|
+
<div class="buttons-story-section">
|
|
153
|
+
<h3>Button Groups</h3>
|
|
154
|
+
<div class="btn-group">
|
|
155
|
+
<button class="btn-primary">
|
|
156
|
+
<pds-icon icon="download"></pds-icon>
|
|
157
|
+
Get Started
|
|
158
|
+
</button>
|
|
159
|
+
<button class="btn-secondary">
|
|
160
|
+
<pds-icon icon="book-open"></pds-icon>
|
|
161
|
+
View Docs
|
|
162
|
+
</button>
|
|
163
|
+
</div>
|
|
164
|
+
|
|
165
|
+
<h3 class="buttons-story-heading-spacer">Icon-Only Group</h3>
|
|
166
|
+
<div class="btn-group">
|
|
167
|
+
<button class="icon-only btn-outline">
|
|
168
|
+
<pds-icon icon="text-align-left" label="Align left"></pds-icon>
|
|
169
|
+
</button>
|
|
170
|
+
<button class="icon-only btn-outline">
|
|
171
|
+
<pds-icon icon="text-align-center" label="Align center"></pds-icon>
|
|
172
|
+
</button>
|
|
173
|
+
<button class="icon-only btn-outline">
|
|
174
|
+
<pds-icon icon="text-align-right" label="Align right"></pds-icon>
|
|
175
|
+
</button>
|
|
176
|
+
</div>
|
|
177
|
+
</div>
|
|
178
|
+
`;
|
|
179
|
+
|
|
180
|
+
ButtonGroups.storyName = 'Button Groups';
|
|
181
|
+
|
|
182
|
+
export const AllSizesCombinations = () => html`
|
|
183
|
+
${buttonsStoryStyles}
|
|
184
|
+
<div class="buttons-story-section">
|
|
185
|
+
<h3>Small Buttons</h3>
|
|
186
|
+
<div class="flex gap-sm flex-wrap buttons-story-row">
|
|
187
|
+
<button class="btn-primary btn-sm">Primary</button>
|
|
188
|
+
<button class="btn-secondary btn-sm">Secondary</button>
|
|
189
|
+
<button class="btn-outline btn-sm">Outline</button>
|
|
190
|
+
<button class="btn-primary btn-sm">
|
|
191
|
+
<pds-icon icon="heart" size="sm"></pds-icon>
|
|
192
|
+
With Icon
|
|
193
|
+
</button>
|
|
194
|
+
<button class="icon-only btn-primary btn-sm">
|
|
195
|
+
<pds-icon icon="gear" size="sm" label="Settings"></pds-icon>
|
|
196
|
+
</button>
|
|
197
|
+
</div>
|
|
198
|
+
|
|
199
|
+
<h3>Default Buttons</h3>
|
|
200
|
+
<div class="flex gap-sm flex-wrap buttons-story-row">
|
|
201
|
+
<button class="btn-primary">Primary</button>
|
|
202
|
+
<button class="btn-secondary">Secondary</button>
|
|
203
|
+
<button class="btn-outline">Outline</button>
|
|
204
|
+
<button class="btn-primary">
|
|
205
|
+
<pds-icon icon="heart"></pds-icon>
|
|
206
|
+
With Icon
|
|
207
|
+
</button>
|
|
208
|
+
<button class="icon-only btn-primary">
|
|
209
|
+
<pds-icon icon="gear" label="Settings"></pds-icon>
|
|
210
|
+
</button>
|
|
211
|
+
</div>
|
|
212
|
+
|
|
213
|
+
<h3>Large Buttons</h3>
|
|
214
|
+
<div class="flex gap-sm flex-wrap">
|
|
215
|
+
<button class="btn-primary btn-lg">Primary</button>
|
|
216
|
+
<button class="btn-secondary btn-lg">Secondary</button>
|
|
217
|
+
<button class="btn-outline btn-lg">Outline</button>
|
|
218
|
+
<button class="btn-primary btn-lg">
|
|
219
|
+
<pds-icon icon="heart" size="lg"></pds-icon>
|
|
220
|
+
With Icon
|
|
221
|
+
</button>
|
|
222
|
+
<button class="icon-only btn-primary btn-lg">
|
|
223
|
+
<pds-icon icon="gear" size="lg" label="Settings"></pds-icon>
|
|
224
|
+
</button>
|
|
225
|
+
</div>
|
|
226
|
+
</div>
|
|
227
|
+
`;
|
|
228
|
+
|
|
229
|
+
AllSizesCombinations.storyName = 'All Sizes & Combinations';
|