@citizenplane/pimp 15.1.4 → 16.0.0
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/dist/pimp.es.js +4471 -4388
- package/dist/pimp.umd.js +41 -41
- package/dist/style.css +1 -1
- package/package.json +1 -1
- package/src/assets/css/colors.css +0 -2
- package/src/components/CpAlert.vue +196 -87
- package/src/components/CpButton.vue +6 -3
- package/src/components/CpHeading.vue +4 -0
- package/src/components/icons/IconDashedCircle.vue +44 -0
- package/src/constants/CpCustomIcons.ts +2 -0
- package/src/stories/CpAlert.stories.ts +218 -53
|
@@ -1,91 +1,256 @@
|
|
|
1
|
-
import type { Meta, StoryObj } from '@storybook/vue3'
|
|
1
|
+
import type { Args, Meta, StoryObj } from '@storybook/vue3'
|
|
2
2
|
|
|
3
3
|
import CpAlert from '@/components/CpAlert.vue'
|
|
4
4
|
|
|
5
|
+
import {
|
|
6
|
+
docCellStyle,
|
|
7
|
+
docLabelStyle,
|
|
8
|
+
docPageStyle,
|
|
9
|
+
docRowColumnStyle,
|
|
10
|
+
docSectionStyle,
|
|
11
|
+
docTitleStyle,
|
|
12
|
+
} from '@/stories/documentationStyles'
|
|
13
|
+
|
|
5
14
|
const meta = {
|
|
6
15
|
title: 'Feedback/CpAlert',
|
|
7
16
|
component: CpAlert,
|
|
8
17
|
argTypes: {
|
|
9
|
-
|
|
18
|
+
color: {
|
|
19
|
+
control: 'select',
|
|
20
|
+
options: ['neutral', 'accent', 'success', 'warning', 'error'],
|
|
21
|
+
description: 'The color variant of the alert',
|
|
22
|
+
},
|
|
23
|
+
type: {
|
|
10
24
|
control: 'select',
|
|
11
|
-
options: ['
|
|
12
|
-
description: 'The type of alert',
|
|
25
|
+
options: ['expanded', 'inline'],
|
|
26
|
+
description: 'The type of the alert',
|
|
13
27
|
},
|
|
14
28
|
title: {
|
|
15
29
|
control: 'text',
|
|
16
30
|
description: 'The title of the alert',
|
|
17
31
|
},
|
|
32
|
+
content: {
|
|
33
|
+
control: 'text',
|
|
34
|
+
description: 'The text content of the alert',
|
|
35
|
+
},
|
|
36
|
+
icon: {
|
|
37
|
+
control: 'select',
|
|
38
|
+
options: ['', 'info', 'check', 'alert-triangle', 'x-octagon', 'bell', 'star'],
|
|
39
|
+
description: 'Custom icon override',
|
|
40
|
+
},
|
|
18
41
|
isClosable: {
|
|
19
42
|
control: 'boolean',
|
|
20
43
|
description: 'Whether the alert can be closed',
|
|
21
44
|
},
|
|
22
|
-
|
|
45
|
+
primaryActionLabel: {
|
|
46
|
+
control: 'text',
|
|
47
|
+
description: 'Label for the primary action button',
|
|
48
|
+
},
|
|
49
|
+
secondaryActionLabel: {
|
|
50
|
+
control: 'text',
|
|
51
|
+
description: 'Label for the secondary action button',
|
|
52
|
+
},
|
|
23
53
|
},
|
|
24
54
|
} satisfies Meta<typeof CpAlert>
|
|
25
55
|
|
|
26
56
|
export default meta
|
|
27
|
-
type Story = StoryObj<typeof meta>
|
|
28
57
|
|
|
29
|
-
|
|
30
|
-
<CpAlert v-bind="args">
|
|
31
|
-
Default slot content
|
|
32
|
-
</CpAlert>
|
|
33
|
-
`
|
|
58
|
+
type Story = StoryObj<typeof meta>
|
|
34
59
|
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
60
|
+
const defaultTemplate = '<CpAlert v-bind="args" />'
|
|
61
|
+
const defaultRender = (args: Args) => ({
|
|
62
|
+
components: { CpAlert },
|
|
63
|
+
setup() {
|
|
64
|
+
return { args }
|
|
40
65
|
},
|
|
41
|
-
|
|
66
|
+
template: defaultTemplate,
|
|
67
|
+
})
|
|
68
|
+
|
|
69
|
+
export const Documentation: Story = {
|
|
70
|
+
args: {},
|
|
71
|
+
render: () => ({
|
|
42
72
|
components: { CpAlert },
|
|
43
|
-
setup() {
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
}
|
|
73
|
+
setup: () => ({}),
|
|
74
|
+
template: `
|
|
75
|
+
<div>
|
|
76
|
+
<div style="${docPageStyle}">
|
|
77
|
+
<h1 style="margin: 0 0 32px 0; font-size: 28px; font-weight: 700; color: #111;">CpAlert</h1>
|
|
49
78
|
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
79
|
+
<section style="${docSectionStyle}">
|
|
80
|
+
<h2 style="${docTitleStyle}">Color</h2>
|
|
81
|
+
<div style="${docRowColumnStyle}">
|
|
82
|
+
<div style="${docCellStyle}">
|
|
83
|
+
<span style="${docLabelStyle}">neutral</span>
|
|
84
|
+
<CpAlert color="neutral" title="Neutral alert" content="This is a neutral informational message." is-closable />
|
|
85
|
+
</div>
|
|
86
|
+
<div style="${docCellStyle}">
|
|
87
|
+
<span style="${docLabelStyle}">accent</span>
|
|
88
|
+
<CpAlert color="accent" title="Accent alert" content="This is an accent informational message." is-closable />
|
|
89
|
+
</div>
|
|
90
|
+
<div style="${docCellStyle}">
|
|
91
|
+
<span style="${docLabelStyle}">success</span>
|
|
92
|
+
<CpAlert color="success" title="Success alert" content="The operation completed successfully." is-closable />
|
|
93
|
+
</div>
|
|
94
|
+
<div style="${docCellStyle}">
|
|
95
|
+
<span style="${docLabelStyle}">warning</span>
|
|
96
|
+
<CpAlert color="warning" title="Warning alert" content="Please review before proceeding." is-closable />
|
|
97
|
+
</div>
|
|
98
|
+
<div style="${docCellStyle}">
|
|
99
|
+
<span style="${docLabelStyle}">error</span>
|
|
100
|
+
<CpAlert color="error" title="Error alert" content="Something went wrong. Please try again." is-closable />
|
|
101
|
+
</div>
|
|
102
|
+
</div>
|
|
103
|
+
</section>
|
|
104
|
+
|
|
105
|
+
<section style="${docSectionStyle}">
|
|
106
|
+
<h2 style="${docTitleStyle}">Type</h2>
|
|
107
|
+
<div style="${docRowColumnStyle}">
|
|
108
|
+
<div style="${docCellStyle}">
|
|
109
|
+
<span style="${docLabelStyle}">Expanded (default)</span>
|
|
110
|
+
<CpAlert color="neutral" title="Neutral alert" content="This is a neutral informational message." is-closable />
|
|
111
|
+
</div>
|
|
112
|
+
<div style="${docCellStyle}">
|
|
113
|
+
<CpAlert color="accent" title="Accent alert" content="This is an accent informational message." is-closable />
|
|
114
|
+
</div>
|
|
115
|
+
<div style="${docCellStyle}">
|
|
116
|
+
<CpAlert color="success" title="Success alert" content="The operation completed successfully." is-closable />
|
|
117
|
+
</div>
|
|
118
|
+
<div style="${docCellStyle}">
|
|
119
|
+
<CpAlert color="warning" title="Warning alert" content="Please review before proceeding." is-closable />
|
|
120
|
+
</div>
|
|
121
|
+
<div style="${docCellStyle}">
|
|
122
|
+
<CpAlert color="error" title="Error alert" content="Something went wrong. Please try again." is-closable />
|
|
123
|
+
</div>
|
|
124
|
+
<div style="${docCellStyle}">
|
|
125
|
+
<span style="${docLabelStyle}">inline</span>
|
|
126
|
+
<CpAlert color="neutral" type="inline" title="Neutral alert" is-closable />
|
|
127
|
+
</div>
|
|
128
|
+
<div style="${docCellStyle}">
|
|
129
|
+
<CpAlert color="accent" type="inline" title="Accent alert" is-closable />
|
|
130
|
+
</div>
|
|
131
|
+
<div style="${docCellStyle}">
|
|
132
|
+
<CpAlert color="success" type="inline" title="Success alert" is-closable />
|
|
133
|
+
</div>
|
|
134
|
+
<div style="${docCellStyle}">
|
|
135
|
+
<CpAlert color="warning" type="inline" title="Warning alert" is-closable />
|
|
136
|
+
</div>
|
|
137
|
+
<div style="${docCellStyle}">
|
|
138
|
+
<CpAlert color="error" type="inline" title="Error alert" is-closable />
|
|
139
|
+
</div>
|
|
140
|
+
</div>
|
|
141
|
+
</section>
|
|
142
|
+
|
|
143
|
+
<section style="${docSectionStyle}">
|
|
144
|
+
<h2 style="${docTitleStyle}">is-closable</h2>
|
|
145
|
+
<div style="${docRowColumnStyle}">
|
|
146
|
+
<div style="${docCellStyle}">
|
|
147
|
+
<span style="${docLabelStyle}">false</span>
|
|
148
|
+
<CpAlert color="accent" title="Not closable" content="This alert cannot be dismissed." @on-close="console.log('alert closed')" />
|
|
149
|
+
</div>
|
|
150
|
+
<div style="${docCellStyle}">
|
|
151
|
+
<span style="${docLabelStyle}">true on expanded</span>
|
|
152
|
+
<CpAlert color="accent" title="Closable" content="This alert can be dismissed with the close button." :is-closable="true" @on-close="console.log('alert closed')" />
|
|
153
|
+
</div>
|
|
154
|
+
<div style="${docCellStyle}">
|
|
155
|
+
<span style="${docLabelStyle}">true on inline</span>
|
|
156
|
+
<CpAlert color="accent" type="inline" title="Closable" :is-closable="true" @on-close="console.log('alert closed')" />
|
|
157
|
+
</div>
|
|
158
|
+
</div>
|
|
159
|
+
</section>
|
|
160
|
+
|
|
161
|
+
<section style="${docSectionStyle}">
|
|
162
|
+
<h2 style="${docTitleStyle}">Actions</h2>
|
|
163
|
+
<div style="${docRowColumnStyle}">
|
|
164
|
+
<div style="${docCellStyle}">
|
|
165
|
+
<span style="${docLabelStyle}">without actions</span>
|
|
166
|
+
<CpAlert color="accent" title="Without actions" />
|
|
167
|
+
</div>
|
|
168
|
+
<div style="${docCellStyle}">
|
|
169
|
+
<span style="${docLabelStyle}">primary only</span>
|
|
170
|
+
<CpAlert color="accent" title="With primary action" content="This alert has a primary action button." primary-action-label="Confirm" is-closable @primary-action-click="console.log('primary action clicked')" />
|
|
171
|
+
</div>
|
|
172
|
+
<div style="${docCellStyle}">
|
|
173
|
+
<CpAlert color="accent" title="With primary action" type="inline" primary-action-label="Confirm" is-closable @primary-action-click="console.log('primary action clicked')" />
|
|
174
|
+
</div>
|
|
175
|
+
<div style="${docCellStyle}">
|
|
176
|
+
<span style="${docLabelStyle}">primary + secondary</span>
|
|
177
|
+
<CpAlert color="accent" title="With both actions" content="This alert has primary and secondary action buttons." primary-action-label="Confirm" secondary-action-label="Cancel" is-closable @primary-action-click="console.log('primary action clicked')" @secondary-action-click="console.log('secondary action clicked')" />
|
|
178
|
+
</div>
|
|
179
|
+
</div>
|
|
180
|
+
</section>
|
|
181
|
+
|
|
182
|
+
<section style="${docSectionStyle}">
|
|
183
|
+
<h2 style="${docTitleStyle}">Custom icon</h2>
|
|
184
|
+
<div style="${docRowColumnStyle}">
|
|
185
|
+
<div style="${docCellStyle}">
|
|
186
|
+
<span style="${docLabelStyle}">default icon (auto from color)</span>
|
|
187
|
+
<CpAlert color="success" title="Default icon" content="Icon is derived from the color prop." />
|
|
188
|
+
</div>
|
|
189
|
+
<div style="${docCellStyle}">
|
|
190
|
+
<span style="${docLabelStyle}">custom icon override</span>
|
|
191
|
+
<CpAlert color="success" icon="star" title="Custom icon" content="Icon is overridden with a star." />
|
|
192
|
+
</div>
|
|
193
|
+
</div>
|
|
194
|
+
</section>
|
|
195
|
+
</div>
|
|
196
|
+
</div>
|
|
197
|
+
`,
|
|
58
198
|
}),
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
199
|
+
parameters: {
|
|
200
|
+
controls: { disable: true },
|
|
201
|
+
docs: {
|
|
202
|
+
source: {
|
|
203
|
+
code: null,
|
|
204
|
+
},
|
|
205
|
+
},
|
|
64
206
|
},
|
|
65
|
-
render: (args) => ({
|
|
66
|
-
...Default.render(args),
|
|
67
|
-
template: defaultTemplate,
|
|
68
|
-
}),
|
|
69
207
|
}
|
|
70
208
|
|
|
71
|
-
export const
|
|
209
|
+
export const Default: Story = {
|
|
72
210
|
args: {
|
|
73
|
-
|
|
74
|
-
|
|
211
|
+
color: 'accent',
|
|
212
|
+
type: 'expanded',
|
|
213
|
+
title: 'Alert title',
|
|
214
|
+
content: 'This is an informational alert message.',
|
|
215
|
+
isClosable: true,
|
|
216
|
+
icon: undefined,
|
|
217
|
+
primaryActionLabel: undefined,
|
|
218
|
+
secondaryActionLabel: undefined,
|
|
75
219
|
},
|
|
76
|
-
render:
|
|
77
|
-
...Default.render(args),
|
|
78
|
-
template: defaultTemplate,
|
|
79
|
-
}),
|
|
220
|
+
render: defaultRender,
|
|
80
221
|
}
|
|
81
222
|
|
|
82
|
-
export const
|
|
223
|
+
export const WithSlots: Story = {
|
|
83
224
|
args: {
|
|
84
|
-
|
|
85
|
-
|
|
225
|
+
color: 'accent',
|
|
226
|
+
type: 'expanded',
|
|
227
|
+
isClosable: true,
|
|
86
228
|
},
|
|
87
|
-
render: (args) => ({
|
|
88
|
-
|
|
89
|
-
|
|
229
|
+
render: (args: Args) => ({
|
|
230
|
+
components: { CpAlert },
|
|
231
|
+
setup() {
|
|
232
|
+
return { args }
|
|
233
|
+
},
|
|
234
|
+
template: `
|
|
235
|
+
<CpAlert v-bind="args">
|
|
236
|
+
<template #icon>
|
|
237
|
+
<span style="font-size: 18px;">🔔</span>
|
|
238
|
+
</template>
|
|
239
|
+
<template #title>
|
|
240
|
+
<strong>Custom title</strong> with <em>HTML formatting</em>
|
|
241
|
+
</template>
|
|
242
|
+
<span>Custom default slot with <a href="#" style="color: inherit; font-weight: 600;">a link</a> and <code style="background: rgba(0,0,0,0.1); padding: 2px 4px; border-radius: 3px;">inline code</code>.</span>
|
|
243
|
+
<template #primary-action>
|
|
244
|
+
<button style="padding: 4px 12px; border-radius: 4px; background: currentColor; border: none; cursor: pointer;">
|
|
245
|
+
<span style="color: white; font-size: 12px;">Custom Primary</span>
|
|
246
|
+
</button>
|
|
247
|
+
</template>
|
|
248
|
+
<template #secondary-action>
|
|
249
|
+
<button style="padding: 4px 12px; border-radius: 4px; background: transparent; border: 1px solid currentColor; cursor: pointer; color: inherit; font-size: 12px;">
|
|
250
|
+
Custom Secondary
|
|
251
|
+
</button>
|
|
252
|
+
</template>
|
|
253
|
+
</CpAlert>
|
|
254
|
+
`,
|
|
90
255
|
}),
|
|
91
256
|
}
|