@citizenplane/pimp 16.0.1 → 16.0.2
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 +686 -684
- package/dist/pimp.umd.js +36 -36
- package/dist/style.css +1 -1
- package/package.json +1 -1
- package/src/components/CpAlert.vue +72 -65
- package/src/stories/CpAlert.stories.ts +9 -0
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>
|
|
@@ -147,21 +149,26 @@ const dynamicClasses = computed(() => [
|
|
|
147
149
|
|
|
148
150
|
<style lang="scss">
|
|
149
151
|
.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
152
|
width: 100%;
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
153
|
+
display: flex;
|
|
154
|
+
|
|
155
|
+
&__inner {
|
|
156
|
+
position: relative;
|
|
157
|
+
display: flex;
|
|
158
|
+
align-items: flex-start;
|
|
159
|
+
overflow: hidden;
|
|
160
|
+
padding: var(--cp-spacing-lg) var(--cp-spacing-lg) var(--cp-spacing-lg) var(--cp-spacing-md);
|
|
161
|
+
gap: var(--cp-spacing-md);
|
|
162
|
+
width: 100%;
|
|
163
|
+
background-color: var(--cp-background-primary);
|
|
164
|
+
border: 1px solid var(--cp-alert-border);
|
|
165
|
+
border-radius: var(--cp-radius-md);
|
|
166
|
+
margin: var(--cp-spacing-sm);
|
|
167
|
+
box-shadow:
|
|
168
|
+
var(--cp-drop-shadow-3xs-offset-x) var(--cp-drop-shadow-3xs-offset-y) var(--cp-drop-shadow-3xs-blur)
|
|
169
|
+
fn.px-to-rem(-4) var(--cp-drop-shadow-3xs-color),
|
|
170
|
+
0 0 0 var(--cp-dimensions-1) var(--cp-alert-shadow);
|
|
171
|
+
}
|
|
165
172
|
|
|
166
173
|
&__icon {
|
|
167
174
|
width: var(--cp-dimensions-4);
|
|
@@ -197,7 +204,7 @@ const dynamicClasses = computed(() => [
|
|
|
197
204
|
color: var(--cp-alert-title);
|
|
198
205
|
}
|
|
199
206
|
|
|
200
|
-
&
|
|
207
|
+
&__contentText {
|
|
201
208
|
font-size: var(--cp-text-size-sm);
|
|
202
209
|
line-height: var(--cp-line-height-sm);
|
|
203
210
|
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}">
|