@citizenplane/pimp 16.0.1 → 16.0.3
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 +716 -710
- package/dist/pimp.umd.js +36 -36
- package/dist/style.css +1 -1
- package/package.json +1 -1
- package/src/components/CpAlert.vue +110 -95
- package/src/stories/CpAlert.stories.ts +11 -2
package/package.json
CHANGED
|
@@ -1,58 +1,60 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div class="cpAlert"
|
|
3
|
-
<div class="
|
|
4
|
-
<
|
|
5
|
-
<
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
<div class="cpAlert__body">
|
|
9
|
-
<div class="cpAlert__content">
|
|
10
|
-
<p v-if="hasTitle" class="cpAlert__title">
|
|
11
|
-
<slot name="title">
|
|
12
|
-
{{ title }}
|
|
13
|
-
</slot>
|
|
14
|
-
</p>
|
|
15
|
-
<p v-if="hasContent" class="cpAlert__content">
|
|
16
|
-
<slot>
|
|
17
|
-
{{ content }}
|
|
18
|
-
</slot>
|
|
19
|
-
</p>
|
|
2
|
+
<div class="cpAlert">
|
|
3
|
+
<div class="cpAlert__inner" :class="dynamicClasses">
|
|
4
|
+
<div class="cpAlert__icon">
|
|
5
|
+
<slot name="icon">
|
|
6
|
+
<cp-icon size="16" :type="alertIcon" />
|
|
7
|
+
</slot>
|
|
20
8
|
</div>
|
|
21
|
-
<div
|
|
22
|
-
<div
|
|
23
|
-
<
|
|
24
|
-
<
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
</slot>
|
|
9
|
+
<div class="cpAlert__body">
|
|
10
|
+
<div class="cpAlert__content">
|
|
11
|
+
<p v-if="hasTitle" class="cpAlert__title">
|
|
12
|
+
<slot name="title">
|
|
13
|
+
{{ title }}
|
|
14
|
+
</slot>
|
|
15
|
+
</p>
|
|
16
|
+
<p v-if="hasContent" class="cpAlert__contentText">
|
|
17
|
+
<slot>
|
|
18
|
+
{{ content }}
|
|
19
|
+
</slot>
|
|
20
|
+
</p>
|
|
34
21
|
</div>
|
|
35
|
-
<div v-if="
|
|
36
|
-
<
|
|
37
|
-
<
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
22
|
+
<div v-if="hasActions" class="cpAlert__actions">
|
|
23
|
+
<div v-if="hasPrimaryAction" class="cpAlert__action">
|
|
24
|
+
<slot name="primary-action">
|
|
25
|
+
<cp-button
|
|
26
|
+
:appearance="primaryActionAppearance"
|
|
27
|
+
:color="color"
|
|
28
|
+
is-square
|
|
29
|
+
:size="actionsSize"
|
|
30
|
+
@click="emit('primaryActionClick')"
|
|
31
|
+
>
|
|
32
|
+
{{ primaryActionLabel }}
|
|
33
|
+
</cp-button>
|
|
34
|
+
</slot>
|
|
35
|
+
</div>
|
|
36
|
+
<div v-if="hasSecondaryAction" class="cpAlert__action">
|
|
37
|
+
<slot name="secondary-action">
|
|
38
|
+
<cp-button
|
|
39
|
+
:appearance="secondaryActionAppearance"
|
|
40
|
+
:color="color"
|
|
41
|
+
is-square
|
|
42
|
+
:size="actionsSize"
|
|
43
|
+
@click="emit('secondaryActionClick')"
|
|
44
|
+
>
|
|
45
|
+
{{ secondaryActionLabel }}
|
|
46
|
+
</cp-button>
|
|
47
|
+
</slot>
|
|
48
|
+
</div>
|
|
47
49
|
</div>
|
|
48
50
|
</div>
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
</
|
|
55
|
-
</
|
|
51
|
+
<div v-if="isClosable" class="cpAlert__close">
|
|
52
|
+
<cp-button appearance="tertiary" :color="color" is-square size="xs" @click="emit('onClose')">
|
|
53
|
+
<template #leading-icon>
|
|
54
|
+
<cp-icon size="16" type="x" />
|
|
55
|
+
</template>
|
|
56
|
+
</cp-button>
|
|
57
|
+
</div>
|
|
56
58
|
</div>
|
|
57
59
|
</div>
|
|
58
60
|
</template>
|
|
@@ -96,37 +98,39 @@ const emit = defineEmits<{
|
|
|
96
98
|
|
|
97
99
|
const slots = useSlots()
|
|
98
100
|
|
|
99
|
-
const colorProps = {
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
primaryActionAppearance: 'secondary',
|
|
103
|
-
secondaryActionAppearance: 'tertiary',
|
|
104
|
-
},
|
|
105
|
-
accent: {
|
|
106
|
-
icon: 'info',
|
|
107
|
-
primaryActionAppearance: 'primary',
|
|
108
|
-
secondaryActionAppearance: 'secondary',
|
|
109
|
-
},
|
|
110
|
-
success: {
|
|
111
|
-
icon: 'check',
|
|
112
|
-
primaryActionAppearance: 'primary',
|
|
113
|
-
secondaryActionAppearance: 'secondary',
|
|
114
|
-
},
|
|
115
|
-
warning: {
|
|
116
|
-
icon: 'alert-triangle',
|
|
117
|
-
primaryActionAppearance: 'primary',
|
|
101
|
+
const colorProps = computed(() => {
|
|
102
|
+
const defaultProps = {
|
|
103
|
+
primaryActionAppearance: isExpanded.value ? 'primary' : 'secondary',
|
|
118
104
|
secondaryActionAppearance: 'secondary',
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
}
|
|
105
|
+
}
|
|
106
|
+
return {
|
|
107
|
+
neutral: {
|
|
108
|
+
icon: 'dashed-circle',
|
|
109
|
+
primaryActionAppearance: isExpanded.value ? 'secondary' : 'tertiary',
|
|
110
|
+
secondaryActionAppearance: 'tertiary',
|
|
111
|
+
},
|
|
112
|
+
accent: {
|
|
113
|
+
...defaultProps,
|
|
114
|
+
icon: 'info',
|
|
115
|
+
},
|
|
116
|
+
success: {
|
|
117
|
+
...defaultProps,
|
|
118
|
+
icon: 'check',
|
|
119
|
+
},
|
|
120
|
+
warning: {
|
|
121
|
+
...defaultProps,
|
|
122
|
+
icon: 'alert-triangle',
|
|
123
|
+
},
|
|
124
|
+
error: {
|
|
125
|
+
...defaultProps,
|
|
126
|
+
icon: 'x-octagon',
|
|
127
|
+
},
|
|
128
|
+
}
|
|
129
|
+
})
|
|
126
130
|
|
|
127
131
|
const alertIcon = computed(() => {
|
|
128
132
|
if (props.icon) return props.icon
|
|
129
|
-
return colorProps[props.color].icon
|
|
133
|
+
return colorProps.value[props.color].icon
|
|
130
134
|
})
|
|
131
135
|
|
|
132
136
|
const isExpanded = computed(() => props.type === 'expanded')
|
|
@@ -134,9 +138,11 @@ const hasTitle = computed(() => !!props.title || !!slots.title)
|
|
|
134
138
|
const hasContent = computed(() => isExpanded.value && (!!props.content || !!slots.default))
|
|
135
139
|
const hasActions = computed(() => hasPrimaryAction.value || hasSecondaryAction.value)
|
|
136
140
|
const hasPrimaryAction = computed(() => !!props.primaryActionLabel || !!slots['primary-action'])
|
|
137
|
-
const hasSecondaryAction = computed(
|
|
138
|
-
|
|
139
|
-
|
|
141
|
+
const hasSecondaryAction = computed(
|
|
142
|
+
() => isExpanded.value && (!!props.secondaryActionLabel || !!slots['secondary-action']),
|
|
143
|
+
)
|
|
144
|
+
const primaryActionAppearance = computed(() => colorProps.value[props.color].primaryActionAppearance)
|
|
145
|
+
const secondaryActionAppearance = computed(() => colorProps.value[props.color].secondaryActionAppearance)
|
|
140
146
|
const actionsSize = computed(() => (isExpanded.value ? 'sm' : 'xs'))
|
|
141
147
|
|
|
142
148
|
const dynamicClasses = computed(() => [
|
|
@@ -147,21 +153,26 @@ const dynamicClasses = computed(() => [
|
|
|
147
153
|
|
|
148
154
|
<style lang="scss">
|
|
149
155
|
.cpAlert {
|
|
150
|
-
position: relative;
|
|
151
|
-
display: flex;
|
|
152
|
-
align-items: flex-start;
|
|
153
|
-
overflow: hidden;
|
|
154
|
-
padding: var(--cp-spacing-lg) var(--cp-spacing-lg) var(--cp-spacing-lg) var(--cp-spacing-md);
|
|
155
|
-
gap: var(--cp-spacing-md);
|
|
156
156
|
width: 100%;
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
157
|
+
display: flex;
|
|
158
|
+
|
|
159
|
+
&__inner {
|
|
160
|
+
position: relative;
|
|
161
|
+
display: flex;
|
|
162
|
+
align-items: flex-start;
|
|
163
|
+
overflow: hidden;
|
|
164
|
+
padding: var(--cp-spacing-lg) var(--cp-spacing-lg) var(--cp-spacing-lg) var(--cp-spacing-md);
|
|
165
|
+
gap: var(--cp-spacing-md);
|
|
166
|
+
width: 100%;
|
|
167
|
+
background-color: var(--cp-background-primary);
|
|
168
|
+
border: 1px solid var(--cp-alert-border);
|
|
169
|
+
border-radius: var(--cp-radius-md);
|
|
170
|
+
margin: var(--cp-spacing-sm);
|
|
171
|
+
box-shadow:
|
|
172
|
+
var(--cp-drop-shadow-3xs-offset-x) var(--cp-drop-shadow-3xs-offset-y) var(--cp-drop-shadow-3xs-blur)
|
|
173
|
+
fn.px-to-rem(-4) var(--cp-drop-shadow-3xs-color),
|
|
174
|
+
0 0 0 var(--cp-dimensions-1) var(--cp-alert-shadow);
|
|
175
|
+
}
|
|
165
176
|
|
|
166
177
|
&__icon {
|
|
167
178
|
width: var(--cp-dimensions-4);
|
|
@@ -190,6 +201,10 @@ const dynamicClasses = computed(() => [
|
|
|
190
201
|
gap: var(--cp-spacing-md);
|
|
191
202
|
}
|
|
192
203
|
|
|
204
|
+
&__close {
|
|
205
|
+
align-self: flex-start;
|
|
206
|
+
}
|
|
207
|
+
|
|
193
208
|
&__title {
|
|
194
209
|
font-size: var(--cp-text-size-sm);
|
|
195
210
|
line-height: var(--cp-line-height-sm);
|
|
@@ -197,7 +212,7 @@ const dynamicClasses = computed(() => [
|
|
|
197
212
|
color: var(--cp-alert-title);
|
|
198
213
|
}
|
|
199
214
|
|
|
200
|
-
&
|
|
215
|
+
&__contentText {
|
|
201
216
|
font-size: var(--cp-text-size-sm);
|
|
202
217
|
line-height: var(--cp-line-height-sm);
|
|
203
218
|
font-weight: 500;
|
|
@@ -140,6 +140,15 @@ export const Documentation: Story = {
|
|
|
140
140
|
</div>
|
|
141
141
|
</section>
|
|
142
142
|
|
|
143
|
+
<section style="${docSectionStyle}">
|
|
144
|
+
<h2 style="${docTitleStyle}">Text only</h2>
|
|
145
|
+
<div style="${docRowColumnStyle}">
|
|
146
|
+
<div style="${docCellStyle}">
|
|
147
|
+
<CpAlert color="accent" content="This is an accent informational message." is-closable />
|
|
148
|
+
</div>
|
|
149
|
+
</div>
|
|
150
|
+
</section>
|
|
151
|
+
|
|
143
152
|
<section style="${docSectionStyle}">
|
|
144
153
|
<h2 style="${docTitleStyle}">is-closable</h2>
|
|
145
154
|
<div style="${docRowColumnStyle}">
|
|
@@ -208,11 +217,11 @@ export const Documentation: Story = {
|
|
|
208
217
|
|
|
209
218
|
export const Default: Story = {
|
|
210
219
|
args: {
|
|
211
|
-
color: '
|
|
220
|
+
color: 'neutral',
|
|
212
221
|
type: 'expanded',
|
|
213
222
|
title: 'Alert title',
|
|
214
223
|
content: 'This is an informational alert message.',
|
|
215
|
-
isClosable:
|
|
224
|
+
isClosable: false,
|
|
216
225
|
icon: undefined,
|
|
217
226
|
primaryActionLabel: undefined,
|
|
218
227
|
secondaryActionLabel: undefined,
|