@citizenplane/pimp 10.4.2 → 10.5.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/style.css +1 -1
- package/package.json +1 -1
- package/src/assets/css/dimensions.css +1 -0
- package/src/assets/css/shadows.css +1 -0
- package/src/assets/css/tokens.css +4 -0
- package/src/components/CpButton.vue +4 -6
- package/src/components/CpInput.vue +3 -6
- package/src/components/CpSelectableButton.vue +367 -0
- package/src/components/CpTelInput.vue +1 -2
- package/src/stories/CpSelectableButton.stories.ts +154 -0
package/package.json
CHANGED
|
@@ -4,6 +4,7 @@
|
|
|
4
4
|
--cp-drop-shadow-3xs-offset-x: 0;
|
|
5
5
|
--cp-drop-shadow-3xs-offset-y: 3px;
|
|
6
6
|
--cp-drop-shadow-3xs-spread: -2px;
|
|
7
|
+
--cp-drop-shadow-3xs-inset-spread: -1px;
|
|
7
8
|
--cp-drop-shadow-2xs-blur: 6px;
|
|
8
9
|
--cp-drop-shadow-2xs-color: var(--cp-colors-grey-shadow-color-7-5);
|
|
9
10
|
--cp-drop-shadow-2xs-offset-x: 0;
|
|
@@ -18,6 +18,7 @@
|
|
|
18
18
|
--cp-background-disabled: var(--cp-colors-grey-50);
|
|
19
19
|
--cp-background-overlay: rgba(62, 62, 91, 0.86);
|
|
20
20
|
--cp-background-black: var(--cp-colors-black);
|
|
21
|
+
--cp-background-white: var(--cp-colors-white);
|
|
21
22
|
|
|
22
23
|
--cp-background-accent-primary: var(--cp-colors-accent-50);
|
|
23
24
|
--cp-background-accent-primary-hover: var(--cp-colors-accent-100);
|
|
@@ -81,6 +82,7 @@
|
|
|
81
82
|
--cp-border-strong-hover: var(--cp-colors-grey-400);
|
|
82
83
|
--cp-border-disabled: var(--cp-colors-grey-100);
|
|
83
84
|
--cp-border-solid: var(--cp-colors-grey-800);
|
|
85
|
+
--cp-border-white: var(--cp-colors-white);
|
|
84
86
|
|
|
85
87
|
--cp-border-accent-primary: var(--cp-colors-accent-200);
|
|
86
88
|
--cp-border-accent-primary-hover: var(--cp-colors-accent-300);
|
|
@@ -359,6 +361,8 @@
|
|
|
359
361
|
|
|
360
362
|
--cp-shadows-3xs: var(--cp-drop-shadow-3xs-offset-x) var(--cp-drop-shadow-3xs-offset-y) var(--cp-drop-shadow-3xs-blur)
|
|
361
363
|
var(--cp-drop-shadow-3xs-spread) var(--cp-drop-shadow-3xs-color);
|
|
364
|
+
--cp-shadows-3xs-inset: var(--cp-drop-shadow-3xs-offset-x) var(--cp-drop-shadow-3xs-offset-y)
|
|
365
|
+
var(--cp-drop-shadow-3xs-blur) var(--cp-drop-shadow-3xs-inset-spread) var(--cp-drop-shadow-3xs-color);
|
|
362
366
|
--cp-shadows-2xs: var(--cp-drop-shadow-2xs-offset-x) var(--cp-drop-shadow-2xs-offset-y) var(--cp-drop-shadow-2xs-blur)
|
|
363
367
|
var(--cp-drop-shadow-2xs-spread) var(--cp-drop-shadow-2xs-color);
|
|
364
368
|
--cp-shadows-xs: var(--cp-drop-shadow-xs-offset-x) var(--cp-drop-shadow-xs-offset-y) var(--cp-drop-shadow-xs-blur)
|
|
@@ -88,8 +88,7 @@ const dynamicClasses = computed(() => {
|
|
|
88
88
|
&--isDefault#{&}--is#{$className} {
|
|
89
89
|
background-color: var(--cp-background-primary);
|
|
90
90
|
box-shadow:
|
|
91
|
-
var(--cp-
|
|
92
|
-
var(--cp-drop-shadow-3xs-color),
|
|
91
|
+
var(--cp-shadows-3xs-inset),
|
|
93
92
|
0 0 0 var(--cp-dimensions-0_25) var(--cp-border-soft-hover);
|
|
94
93
|
|
|
95
94
|
&,
|
|
@@ -101,8 +100,7 @@ const dynamicClasses = computed(() => {
|
|
|
101
100
|
&:hover {
|
|
102
101
|
background-color: var(--cp-background-primary-hover);
|
|
103
102
|
box-shadow:
|
|
104
|
-
var(--cp-
|
|
105
|
-
var(--cp-drop-shadow-3xs-color),
|
|
103
|
+
var(--cp-shadows-3xs-inset),
|
|
106
104
|
0 0 0 var(--cp-dimensions-0_25) $textColorHover;
|
|
107
105
|
color: $textColorHover;
|
|
108
106
|
}
|
|
@@ -195,10 +193,10 @@ const dynamicClasses = computed(() => {
|
|
|
195
193
|
}
|
|
196
194
|
|
|
197
195
|
&--isDefault {
|
|
198
|
-
box-shadow: 0 0 0 fn.px-to-rem(1) var(--cp-border-
|
|
196
|
+
box-shadow: 0 0 0 fn.px-to-rem(1) var(--cp-border-soft);
|
|
199
197
|
|
|
200
198
|
&:hover {
|
|
201
|
-
box-shadow: 0 0 0 fn.px-to-rem(1) var(--cp-border-
|
|
199
|
+
box-shadow: 0 0 0 fn.px-to-rem(1) var(--cp-border-soft-hover);
|
|
202
200
|
}
|
|
203
201
|
|
|
204
202
|
&:focus {
|
|
@@ -211,8 +211,7 @@ onMounted(async () => {
|
|
|
211
211
|
|
|
212
212
|
&__inner {
|
|
213
213
|
box-shadow:
|
|
214
|
-
var(--cp-
|
|
215
|
-
var(--cp-drop-shadow-3xs-color),
|
|
214
|
+
var(--cp-shadows-3xs-inset),
|
|
216
215
|
0 0 0 var(--cp-dimensions-0_25) var(--cp-border-soft);
|
|
217
216
|
appearance: none;
|
|
218
217
|
border-radius: var(--cp-radius-md);
|
|
@@ -224,8 +223,7 @@ onMounted(async () => {
|
|
|
224
223
|
|
|
225
224
|
&:hover {
|
|
226
225
|
box-shadow:
|
|
227
|
-
var(--cp-
|
|
228
|
-
var(--cp-drop-shadow-3xs-color),
|
|
226
|
+
var(--cp-shadows-3xs-inset),
|
|
229
227
|
0 0 0 var(--cp-dimensions-0_25) var(--cp-border-strong-hover);
|
|
230
228
|
}
|
|
231
229
|
|
|
@@ -245,8 +243,7 @@ onMounted(async () => {
|
|
|
245
243
|
.cpInput__inner:focus,
|
|
246
244
|
.cpInput__icon:hover ~ .cpInput__inner {
|
|
247
245
|
box-shadow:
|
|
248
|
-
var(--cp-
|
|
249
|
-
var(--cp-drop-shadow-3xs-color),
|
|
246
|
+
var(--cp-shadows-3xs-inset),
|
|
250
247
|
0 0 0 var(--cp-dimensions-0_25) var(--cp-border-error-solid);
|
|
251
248
|
}
|
|
252
249
|
|
|
@@ -0,0 +1,367 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<button
|
|
3
|
+
:aria-disabled="disabled"
|
|
4
|
+
:aria-pressed="isSelected"
|
|
5
|
+
class="cpSelectableButton"
|
|
6
|
+
:class="dynamicClasses"
|
|
7
|
+
:disabled="disabled"
|
|
8
|
+
role="button"
|
|
9
|
+
type="button"
|
|
10
|
+
>
|
|
11
|
+
<div class="cpSelectableButton__body">
|
|
12
|
+
<span v-if="showLeadingIcon" class="cpSelectableButton__icon cpSelectableButton__icon--isBefore">
|
|
13
|
+
<slot name="leading-icon" />
|
|
14
|
+
</span>
|
|
15
|
+
<span v-if="showText" class="cpSelectableButton__label">
|
|
16
|
+
{{ label }}
|
|
17
|
+
</span>
|
|
18
|
+
<span v-if="showTrailingIcon" class="cpSelectableButton__icon cpSelectableButton__icon--isAfter">
|
|
19
|
+
<slot name="trailing-icon" />
|
|
20
|
+
</span>
|
|
21
|
+
</div>
|
|
22
|
+
</button>
|
|
23
|
+
</template>
|
|
24
|
+
|
|
25
|
+
<script setup lang="ts">
|
|
26
|
+
import { computed, useSlots } from 'vue'
|
|
27
|
+
|
|
28
|
+
import { capitalizeFirstLetter } from '@/helpers'
|
|
29
|
+
|
|
30
|
+
type SelectableButtonAppearance = 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'inverse'
|
|
31
|
+
type SelectableButtonSize = 'xs' | '2xs' | '3xs' | 'sm' | 'md'
|
|
32
|
+
|
|
33
|
+
interface Props {
|
|
34
|
+
appearance?: SelectableButtonAppearance
|
|
35
|
+
disabled?: boolean
|
|
36
|
+
isExpanded?: boolean
|
|
37
|
+
isSelected?: boolean
|
|
38
|
+
label?: string
|
|
39
|
+
size?: SelectableButtonSize
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
const props = withDefaults(defineProps<Props>(), {
|
|
43
|
+
size: 'md',
|
|
44
|
+
appearance: 'primary',
|
|
45
|
+
label: '',
|
|
46
|
+
disabled: false,
|
|
47
|
+
isSelected: false,
|
|
48
|
+
isExpanded: false,
|
|
49
|
+
})
|
|
50
|
+
|
|
51
|
+
const slots = useSlots()
|
|
52
|
+
|
|
53
|
+
const showLeadingIcon = computed(() => !!slots['leading-icon'])
|
|
54
|
+
const showText = computed(() => !!props.label)
|
|
55
|
+
const showTrailingIcon = computed(() => !!slots['trailing-icon'])
|
|
56
|
+
|
|
57
|
+
const dynamicClasses = computed(() => {
|
|
58
|
+
return [
|
|
59
|
+
`cpSelectableButton--${props.size}`,
|
|
60
|
+
`cpSelectableButton--is${capitalizeFirstLetter(props.appearance)}`,
|
|
61
|
+
{
|
|
62
|
+
'cpSelectableButton--isSelected': props.isSelected,
|
|
63
|
+
'cpSelectableButton--isExpanded': props.isExpanded,
|
|
64
|
+
'cpSelectableButton--isDisabled': props.disabled,
|
|
65
|
+
},
|
|
66
|
+
]
|
|
67
|
+
})
|
|
68
|
+
</script>
|
|
69
|
+
|
|
70
|
+
<style lang="scss">
|
|
71
|
+
.cpSelectableButton {
|
|
72
|
+
border-radius: var(--cp-selectable-border-radius);
|
|
73
|
+
padding: var(--cp-selectable-border-padding);
|
|
74
|
+
font-size: var(--cp-selectable-font-size);
|
|
75
|
+
line-height: var(--cp-selectable-line-height);
|
|
76
|
+
font-weight: 500;
|
|
77
|
+
transition:
|
|
78
|
+
background-color 0.1s ease-out,
|
|
79
|
+
box-shadow 0.1s ease-out,
|
|
80
|
+
color 0.1s ease-out,
|
|
81
|
+
transform 0.15s ease-out;
|
|
82
|
+
box-shadow:
|
|
83
|
+
var(--cp-selectable-box-shadow),
|
|
84
|
+
0 0 0 var(--cp-dimensions-0_25) var(--cp-selectable-border-color);
|
|
85
|
+
background-color: var(--cp-selectable-background-color);
|
|
86
|
+
color: var(--cp-selectable-text-color);
|
|
87
|
+
|
|
88
|
+
&:hover:not(.cpSelectableButton--isDisabled) {
|
|
89
|
+
box-shadow:
|
|
90
|
+
var(--cp-selectable-box-shadow),
|
|
91
|
+
0 0 0 var(--cp-dimensions-0_25) var(--cp-selectable-border-color-hover);
|
|
92
|
+
background-color: var(--cp-selectable-background-color-hover);
|
|
93
|
+
color: var(--cp-selectable-text-color-hover);
|
|
94
|
+
transform: translateY(var(--cp-dimensions-minus-0_25));
|
|
95
|
+
|
|
96
|
+
& > .cpSelectableButton__body {
|
|
97
|
+
background-color: var(--cp-selectable-body-background-color-hover);
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
&:active:not(.cpSelectableButton--isDisabled) {
|
|
102
|
+
transform: translateY(var(--cp-dimensions-0_25));
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
&:focus-visible {
|
|
106
|
+
outline: var(--cp-dimensions-0_5) solid var(--cp-background-accent-solid);
|
|
107
|
+
outline-offset: var(--cp-dimensions-0_25);
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
&__body {
|
|
111
|
+
display: inline-flex;
|
|
112
|
+
align-items: center;
|
|
113
|
+
padding: var(--cp-selectable-body-padding);
|
|
114
|
+
gap: var(--cp-selectable-body-gap);
|
|
115
|
+
background-color: var(--cp-selectable-body-background-color);
|
|
116
|
+
border-radius: var(--cp-selectable-body-border-radius);
|
|
117
|
+
transition:
|
|
118
|
+
background-color 0.1s ease-out,
|
|
119
|
+
box-shadow 0.1s ease-out,
|
|
120
|
+
color 0.1s ease-out;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
&__icon i,
|
|
124
|
+
&__icon svg {
|
|
125
|
+
width: var(--cp-selectable-icon-size);
|
|
126
|
+
height: var(--cp-selectable-icon-size);
|
|
127
|
+
aspect-ratio: 1 / 1;
|
|
128
|
+
flex-shrink: 0;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
--cp-selectable-border-padding: var(--cp-spacing-sm);
|
|
132
|
+
--cp-selectable-border-radius: var(--cp-radius-sm-md);
|
|
133
|
+
--cp-selectable-font-size: var(--cp-text-size-md);
|
|
134
|
+
--cp-selectable-line-height: var(--cp-line-height-md);
|
|
135
|
+
--cp-selectable-body-padding: var(--cp-spacing-sm) var(--cp-spacing-sm-md);
|
|
136
|
+
--cp-selectable-body-gap: var(--cp-spacing-sm-md);
|
|
137
|
+
--cp-selectable-body-border-radius: var(--cp-radius-sm);
|
|
138
|
+
--cp-selectable-icon-size: var(--cp-dimensions-5);
|
|
139
|
+
|
|
140
|
+
--cp-selectable-border-color: transparent;
|
|
141
|
+
--cp-selectable-border-color-hover: transparent;
|
|
142
|
+
--cp-selectable-text-color: var(--cp-foreground-white);
|
|
143
|
+
--cp-selectable-text-color-hover: var(--cp-foreground-white);
|
|
144
|
+
--cp-selectable-background-color: var(--cp-background-accent-solid);
|
|
145
|
+
--cp-selectable-background-color-hover: var(--cp-background-accent-solid-hover);
|
|
146
|
+
--cp-selectable-body-background-color: var(--cp-background-accent-solid);
|
|
147
|
+
--cp-selectable-body-background-color-hover: var(--cp-background-accent-solid-hover);
|
|
148
|
+
--cp-selectable-box-shadow: var(--cp-shadows-3xs-inset);
|
|
149
|
+
|
|
150
|
+
&--sm {
|
|
151
|
+
--cp-selectable-border-padding: var(--cp-spacing-sm);
|
|
152
|
+
--cp-selectable-border-radius: var(--cp-radius-sm-md);
|
|
153
|
+
--cp-selectable-font-size: var(--cp-text-size-sm);
|
|
154
|
+
--cp-selectable-line-height: var(--cp-line-height-sm);
|
|
155
|
+
--cp-selectable-body-padding: var(--cp-spacing-xs) var(--cp-spacing-sm);
|
|
156
|
+
--cp-selectable-body-gap: var(--cp-spacing-sm);
|
|
157
|
+
--cp-selectable-body-border-radius: var(--cp-radius-sm);
|
|
158
|
+
--cp-selectable-icon-size: var(--cp-dimensions-4);
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
&--xs {
|
|
162
|
+
--cp-selectable-border-padding: var(--cp-spacing-xs);
|
|
163
|
+
--cp-selectable-border-radius: var(--cp-radius-sm-md);
|
|
164
|
+
--cp-selectable-font-size: var(--cp-text-size-sm);
|
|
165
|
+
--cp-selectable-line-height: var(--cp-line-height-sm);
|
|
166
|
+
--cp-selectable-body-padding: var(--cp-spacing-xs) var(--cp-spacing-sm);
|
|
167
|
+
--cp-selectable-body-gap: var(--cp-spacing-sm);
|
|
168
|
+
--cp-selectable-body-border-radius: var(--cp-radius-sm);
|
|
169
|
+
--cp-selectable-icon-size: var(--cp-dimensions-4);
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
&--2xs {
|
|
173
|
+
--cp-selectable-border-padding: var(--cp-spacing-xs);
|
|
174
|
+
--cp-selectable-border-radius: var(--cp-radius-sm-md);
|
|
175
|
+
--cp-selectable-font-size: var(--cp-text-size-xs);
|
|
176
|
+
--cp-selectable-line-height: var(--cp-line-height-xs);
|
|
177
|
+
--cp-selectable-body-padding: var(--cp-spacing-xs) var(--cp-spacing-sm);
|
|
178
|
+
--cp-selectable-body-gap: var(--cp-spacing-sm);
|
|
179
|
+
--cp-selectable-body-border-radius: var(--cp-radius-sm);
|
|
180
|
+
--cp-selectable-icon-size: var(--cp-dimensions-3_5);
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
&--3xs {
|
|
184
|
+
--cp-selectable-border-padding: var(--cp-spacing-none);
|
|
185
|
+
--cp-selectable-border-radius: var(--cp-radius-sm);
|
|
186
|
+
--cp-selectable-font-size: var(--cp-text-size-xs);
|
|
187
|
+
--cp-selectable-line-height: var(--cp-line-height-xs);
|
|
188
|
+
--cp-selectable-body-padding: var(--cp-spacing-xs) var(--cp-spacing-sm);
|
|
189
|
+
--cp-selectable-body-gap: var(--cp-spacing-sm);
|
|
190
|
+
--cp-selectable-body-border-radius: var(--cp-radius-sm);
|
|
191
|
+
--cp-selectable-icon-size: var(--cp-dimensions-3);
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
&--isSelected {
|
|
195
|
+
--cp-selectable-border-color: transparent;
|
|
196
|
+
--cp-selectable-border-color-hover: transparent;
|
|
197
|
+
--cp-selectable-text-color: var(--cp-foreground-white);
|
|
198
|
+
--cp-selectable-text-color-hover: var(--cp-foreground-white);
|
|
199
|
+
--cp-selectable-background-color: var(--cp-background-accent-solid);
|
|
200
|
+
--cp-selectable-background-color-hover: var(--cp-background-accent-solid-hover);
|
|
201
|
+
--cp-selectable-body-background-color: var(--cp-utility-accent-600);
|
|
202
|
+
--cp-selectable-body-background-color-hover: var(--cp-utility-accent-700);
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
&--isExpanded {
|
|
206
|
+
--cp-selectable-border-color: transparent;
|
|
207
|
+
--cp-selectable-border-color-hover: transparent;
|
|
208
|
+
--cp-selectable-text-color: var(--cp-foreground-white);
|
|
209
|
+
--cp-selectable-text-color-hover: var(--cp-foreground-white);
|
|
210
|
+
--cp-selectable-background-color: var(--cp-utility-accent-600);
|
|
211
|
+
--cp-selectable-background-color-hover: var(--cp-utility-accent-700);
|
|
212
|
+
--cp-selectable-body-background-color: transparent;
|
|
213
|
+
--cp-selectable-body-background-color-hover: transparent;
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
&--isSecondary {
|
|
217
|
+
--cp-selectable-border-color: var(--cp-border-soft);
|
|
218
|
+
--cp-selectable-border-color-hover: var(--cp-border-soft-hover);
|
|
219
|
+
--cp-selectable-text-color: var(--cp-foreground-primary);
|
|
220
|
+
--cp-selectable-text-color-hover: var(--cp-foreground-primary-hover);
|
|
221
|
+
--cp-selectable-background-color: var(--cp-background-primary);
|
|
222
|
+
--cp-selectable-background-color-hover: var(--cp-background-primary-hover);
|
|
223
|
+
--cp-selectable-body-background-color: transparent;
|
|
224
|
+
--cp-selectable-body-background-color-hover: transparent;
|
|
225
|
+
--cp-selectable-box-shadow: var(--cp-shadows-3xs-inset);
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
&--isSecondary:is(&--isSelected) {
|
|
229
|
+
--cp-selectable-border-color: var(--cp-border-soft);
|
|
230
|
+
--cp-selectable-border-color-hover: var(--cp-border-soft);
|
|
231
|
+
--cp-selectable-text-color: var(--cp-foreground-accent-primary);
|
|
232
|
+
--cp-selectable-text-color-hover: var(--cp-foreground-accent-primary-hover);
|
|
233
|
+
--cp-selectable-background-color: var(--cp-background-primary);
|
|
234
|
+
--cp-selectable-background-color-hover: var(--cp-background-primary);
|
|
235
|
+
--cp-selectable-body-background-color: var(--cp-background-accent-secondary);
|
|
236
|
+
--cp-selectable-body-background-color-hover: var(--cp-background-accent-secondary-hover);
|
|
237
|
+
|
|
238
|
+
&.cpSelectableButton--3xs {
|
|
239
|
+
--cp-selectable-border-color: var(--cp-border-accent-primary);
|
|
240
|
+
--cp-selectable-border-color-hover: var(--cp-border-accent-primary-hover);
|
|
241
|
+
}
|
|
242
|
+
}
|
|
243
|
+
|
|
244
|
+
&--isSecondary:is(&--isExpanded) {
|
|
245
|
+
--cp-selectable-border-color: var(--cp-border-accent-solid);
|
|
246
|
+
--cp-selectable-border-color-hover: var(--cp-border-accent-solid);
|
|
247
|
+
--cp-selectable-text-color: var(--cp-foreground-accent-primary);
|
|
248
|
+
--cp-selectable-text-color-hover: var(--cp-foreground-accent-primary-hover);
|
|
249
|
+
--cp-selectable-background-color: var(--cp-background-primary);
|
|
250
|
+
--cp-selectable-background-color-hover: var(--cp-background-primary);
|
|
251
|
+
--cp-selectable-body-background-color: var(--cp-background-accent-secondary);
|
|
252
|
+
--cp-selectable-body-background-color-hover: var(--cp-background-accent-secondary-hover);
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
&--isTertiary {
|
|
256
|
+
--cp-selectable-border-color: transparent;
|
|
257
|
+
--cp-selectable-border-color-hover: transparent;
|
|
258
|
+
--cp-selectable-text-color: var(--cp-foreground-primary);
|
|
259
|
+
--cp-selectable-text-color-hover: var(--cp-foreground-primary);
|
|
260
|
+
--cp-selectable-background-color: transparent;
|
|
261
|
+
--cp-selectable-background-color-hover: var(--cp-background-primary-hover);
|
|
262
|
+
--cp-selectable-body-background-color: transparent;
|
|
263
|
+
--cp-selectable-body-background-color-hover: transparent;
|
|
264
|
+
--cp-selectable-box-shadow: transparent;
|
|
265
|
+
}
|
|
266
|
+
|
|
267
|
+
&--isTertiary:is(&--isSelected) {
|
|
268
|
+
--cp-selectable-text-color: var(--cp-foreground-accent-primary);
|
|
269
|
+
--cp-selectable-text-color-hover: var(--cp-foreground-accent-primary-hover);
|
|
270
|
+
--cp-selectable-background-color: transparent;
|
|
271
|
+
--cp-selectable-background-color-hover: transparent;
|
|
272
|
+
}
|
|
273
|
+
|
|
274
|
+
&--isTertiary:is(&--isExpanded) {
|
|
275
|
+
--cp-selectable-text-color: var(--cp-foreground-accent-primary);
|
|
276
|
+
--cp-selectable-text-color-hover: var(--cp-foreground-accent-primary-hover);
|
|
277
|
+
--cp-selectable-background-color: var(--cp-background-accent-secondary);
|
|
278
|
+
--cp-selectable-background-color-hover: var(--cp-background-accent-secondary-hover);
|
|
279
|
+
}
|
|
280
|
+
|
|
281
|
+
&--isQuaternary {
|
|
282
|
+
--cp-selectable-border-color: transparent;
|
|
283
|
+
--cp-selectable-border-color-hover: transparent;
|
|
284
|
+
--cp-selectable-text-color: var(--cp-foreground-secondary);
|
|
285
|
+
--cp-selectable-text-color-hover: var(--cp-foreground-primary);
|
|
286
|
+
--cp-selectable-background-color: transparent;
|
|
287
|
+
--cp-selectable-background-color-hover: var(--cp-background-primary-hover);
|
|
288
|
+
--cp-selectable-body-background-color: transparent;
|
|
289
|
+
--cp-selectable-body-background-color-hover: transparent;
|
|
290
|
+
--cp-selectable-box-shadow: transparent;
|
|
291
|
+
}
|
|
292
|
+
|
|
293
|
+
&--isQuaternary:is(&--isSelected) {
|
|
294
|
+
--cp-selectable-text-color: var(--cp-foreground-accent-primary);
|
|
295
|
+
--cp-selectable-text-color-hover: var(--cp-foreground-accent-primary-hover);
|
|
296
|
+
--cp-selectable-background-color: transparent;
|
|
297
|
+
--cp-selectable-background-color-hover: transparent;
|
|
298
|
+
}
|
|
299
|
+
|
|
300
|
+
&--isQuaternary:is(&--isExpanded) {
|
|
301
|
+
--cp-selectable-text-color: var(--cp-foreground-accent-primary);
|
|
302
|
+
--cp-selectable-text-color-hover: var(--cp-foreground-accent-primary-hover);
|
|
303
|
+
--cp-selectable-background-color: var(--cp-background-accent-secondary);
|
|
304
|
+
--cp-selectable-background-color-hover: var(--cp-background-accent-secondary-hover);
|
|
305
|
+
}
|
|
306
|
+
|
|
307
|
+
&--isInverse {
|
|
308
|
+
--cp-selectable-border-color: transparent;
|
|
309
|
+
--cp-selectable-border-color-hover: transparent;
|
|
310
|
+
--cp-selectable-text-color: var(--cp-foreground-white);
|
|
311
|
+
--cp-selectable-text-color-hover: var(--cp-foreground-white);
|
|
312
|
+
--cp-selectable-background-color: transparent;
|
|
313
|
+
--cp-selectable-background-color-hover: color-mix(in srgb, var(--cp-background-white) 10%, transparent);
|
|
314
|
+
--cp-selectable-body-background-color: transparent;
|
|
315
|
+
--cp-selectable-body-background-color-hover: transparent;
|
|
316
|
+
--cp-selectable-box-shadow: var(--cp-shadows-3xs-inset);
|
|
317
|
+
}
|
|
318
|
+
|
|
319
|
+
&--isInverse:is(&--isSelected) {
|
|
320
|
+
--cp-selectable-border-color: color-mix(in srgb, var(--cp-background-white) 20%, transparent);
|
|
321
|
+
--cp-selectable-border-color-hover: color-mix(in srgb, var(--cp-background-white) 20%, transparent);
|
|
322
|
+
--cp-selectable-text-color: var(--cp-foreground-white);
|
|
323
|
+
--cp-selectable-text-color-hover: var(--cp-foreground-white);
|
|
324
|
+
--cp-selectable-background-color: transparent;
|
|
325
|
+
--cp-selectable-background-color-hover: transparent;
|
|
326
|
+
--cp-selectable-body-background-color: color-mix(in srgb, var(--cp-background-white) 20%, transparent);
|
|
327
|
+
--cp-selectable-body-background-color-hover: color-mix(in srgb, var(--cp-background-white) 30%, transparent);
|
|
328
|
+
}
|
|
329
|
+
|
|
330
|
+
&--isInverse:is(&--isExpanded) {
|
|
331
|
+
--cp-selectable-border-color: var(--cp-border-white);
|
|
332
|
+
--cp-selectable-border-color-hover: var(--cp-border-white);
|
|
333
|
+
--cp-selectable-text-color: var(--cp-foreground-white);
|
|
334
|
+
--cp-selectable-text-color-hover: var(--cp-foreground-white);
|
|
335
|
+
--cp-selectable-background-color: transparent;
|
|
336
|
+
--cp-selectable-background-color-hover: transparent;
|
|
337
|
+
--cp-selectable-body-background-color: color-mix(in srgb, var(--cp-background-white) 20%, transparent);
|
|
338
|
+
--cp-selectable-body-background-color-hover: color-mix(in srgb, var(--cp-background-white) 30%, transparent);
|
|
339
|
+
}
|
|
340
|
+
|
|
341
|
+
&__icon {
|
|
342
|
+
display: flex;
|
|
343
|
+
align-items: center;
|
|
344
|
+
}
|
|
345
|
+
|
|
346
|
+
&__label {
|
|
347
|
+
display: flex;
|
|
348
|
+
align-items: center;
|
|
349
|
+
flex-shrink: 0;
|
|
350
|
+
padding: var(--cp-spacing-none) var(--cp-spacing-xs);
|
|
351
|
+
}
|
|
352
|
+
|
|
353
|
+
&--isDisabled {
|
|
354
|
+
background-color: var(--cp-background-disabled);
|
|
355
|
+
color: var(--cp-text-disabled);
|
|
356
|
+
cursor: not-allowed;
|
|
357
|
+
box-shadow: var(--cp-shadows-3xs);
|
|
358
|
+
transform: none;
|
|
359
|
+
|
|
360
|
+
& > .cpSelectableButton__body {
|
|
361
|
+
background-color: var(--cp-background-disabled);
|
|
362
|
+
color: var(--cp-text-disabled);
|
|
363
|
+
cursor: not-allowed;
|
|
364
|
+
}
|
|
365
|
+
}
|
|
366
|
+
}
|
|
367
|
+
</style>
|
|
@@ -176,8 +176,7 @@ const handleOnValidate = (phoneObject: PhoneObject) => {
|
|
|
176
176
|
}
|
|
177
177
|
|
|
178
178
|
&__wrapper {
|
|
179
|
-
--box-shadow: var(--cp-
|
|
180
|
-
var(--cp-drop-shadow-3xs-blur) -1px var(--cp-drop-shadow-3xs-color);
|
|
179
|
+
--box-shadow: var(--cp-shadows-3xs-inset);
|
|
181
180
|
|
|
182
181
|
border: 0;
|
|
183
182
|
box-shadow:
|
|
@@ -0,0 +1,154 @@
|
|
|
1
|
+
import { ref } from 'vue'
|
|
2
|
+
|
|
3
|
+
import type { Meta, StoryObj } from '@storybook/vue3'
|
|
4
|
+
|
|
5
|
+
import CpSelectableButton from '@/components/CpSelectableButton.vue'
|
|
6
|
+
|
|
7
|
+
import { Sizes } from '@/constants'
|
|
8
|
+
|
|
9
|
+
const meta = {
|
|
10
|
+
title: 'CpSelectableButton',
|
|
11
|
+
component: CpSelectableButton,
|
|
12
|
+
argTypes: {
|
|
13
|
+
appearance: {
|
|
14
|
+
control: 'select',
|
|
15
|
+
options: ['primary', 'secondary', 'tertiary', 'quaternary', 'inverse'],
|
|
16
|
+
description: 'Visual style of the selectable button',
|
|
17
|
+
},
|
|
18
|
+
isSelected: {
|
|
19
|
+
control: 'boolean',
|
|
20
|
+
description: 'Whether the button is selected',
|
|
21
|
+
},
|
|
22
|
+
isExpanded: {
|
|
23
|
+
control: 'boolean',
|
|
24
|
+
description: 'Whether the button is expanded',
|
|
25
|
+
},
|
|
26
|
+
size: {
|
|
27
|
+
control: 'select',
|
|
28
|
+
options: ['3xs', '2xs', 'xs', 'sm', 'md'],
|
|
29
|
+
description: 'Size of the button',
|
|
30
|
+
},
|
|
31
|
+
disabled: {
|
|
32
|
+
control: 'boolean',
|
|
33
|
+
description: 'Whether the button is disabled',
|
|
34
|
+
},
|
|
35
|
+
label: {
|
|
36
|
+
control: 'text',
|
|
37
|
+
description: 'Text displayed inside the button',
|
|
38
|
+
},
|
|
39
|
+
},
|
|
40
|
+
} satisfies Meta<typeof CpSelectableButton>
|
|
41
|
+
|
|
42
|
+
export default meta
|
|
43
|
+
type Story = StoryObj<typeof meta>
|
|
44
|
+
|
|
45
|
+
export const Default: Story = {
|
|
46
|
+
args: {
|
|
47
|
+
appearance: 'primary',
|
|
48
|
+
size: Sizes.MD,
|
|
49
|
+
disabled: false,
|
|
50
|
+
label: 'Label',
|
|
51
|
+
isSelected: false,
|
|
52
|
+
isExpanded: false,
|
|
53
|
+
},
|
|
54
|
+
render: (args) => ({
|
|
55
|
+
components: { CpSelectableButton },
|
|
56
|
+
setup() {
|
|
57
|
+
return { args }
|
|
58
|
+
},
|
|
59
|
+
template: `
|
|
60
|
+
<div style="display: flex; justify-content: center; align-items: center; min-height: 240px; min-width:240px;">
|
|
61
|
+
<CpSelectableButton
|
|
62
|
+
v-bind="args"
|
|
63
|
+
/>
|
|
64
|
+
</div>
|
|
65
|
+
`,
|
|
66
|
+
}),
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
export const WithIcons: Story = {
|
|
70
|
+
args: {
|
|
71
|
+
appearance: 'primary',
|
|
72
|
+
size: Sizes.MD,
|
|
73
|
+
disabled: false,
|
|
74
|
+
label: 'Label',
|
|
75
|
+
isSelected: false,
|
|
76
|
+
isExpanded: false,
|
|
77
|
+
},
|
|
78
|
+
render: (args) => ({
|
|
79
|
+
components: { CpSelectableButton },
|
|
80
|
+
setup() {
|
|
81
|
+
return { args }
|
|
82
|
+
},
|
|
83
|
+
template: `
|
|
84
|
+
<div style="display: flex; justify-content: center; align-items: center; min-height: 240px; min-width:240px;">
|
|
85
|
+
<CpSelectableButton
|
|
86
|
+
v-bind="args"
|
|
87
|
+
>
|
|
88
|
+
<template #leading-icon>
|
|
89
|
+
<CpIcon type="circle" />
|
|
90
|
+
</template>
|
|
91
|
+
<template #trailing-icon>
|
|
92
|
+
<CpIcon type="circle" />
|
|
93
|
+
</template>
|
|
94
|
+
</CpSelectableButton>
|
|
95
|
+
</div>
|
|
96
|
+
`,
|
|
97
|
+
}),
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
export const Sizing: Story = {
|
|
101
|
+
args: {
|
|
102
|
+
disabled: false,
|
|
103
|
+
label: 'Label',
|
|
104
|
+
},
|
|
105
|
+
render: (args) => ({
|
|
106
|
+
components: { CpSelectableButton },
|
|
107
|
+
setup() {
|
|
108
|
+
const defaultValue = ref('default')
|
|
109
|
+
const expandedValue = ref('expanded')
|
|
110
|
+
const selectedValue = ref('selected')
|
|
111
|
+
return { args, defaultValue, expandedValue, selectedValue }
|
|
112
|
+
},
|
|
113
|
+
template: `
|
|
114
|
+
<div v-for="appearance in ['primary', 'secondary', 'tertiary', 'quaternary', 'inverse']" :style="['display: flex; flex-direction: row; gap: 48px; align-items: center; padding: 48px', {'background-color': appearance === 'inverse' ? 'black' : 'transparent', 'color': appearance === 'inverse' ? 'white' : 'black'}]">
|
|
115
|
+
<p style="min-width: 80px;">{{ appearance }}</p>
|
|
116
|
+
<div v-for="size in ['3xs', '2xs', 'xs', 'sm', 'md']" style="display: flex; justify-content: center; align-items: center; gap: 8px;">
|
|
117
|
+
<p>{{ size }}</p>
|
|
118
|
+
<CpSelectableButton
|
|
119
|
+
v-bind="{ ...args, appearance, size }"
|
|
120
|
+
>
|
|
121
|
+
<template #leading-icon>
|
|
122
|
+
<CpIcon type="circle" />
|
|
123
|
+
</template>
|
|
124
|
+
<template #trailing-icon>
|
|
125
|
+
<CpIcon type="circle" />
|
|
126
|
+
</template>
|
|
127
|
+
</CpSelectableButton>
|
|
128
|
+
<CpSelectableButton
|
|
129
|
+
v-bind="{ ...args, appearance, size }"
|
|
130
|
+
isExpanded
|
|
131
|
+
>
|
|
132
|
+
<template #leading-icon>
|
|
133
|
+
<CpIcon type="circle" />
|
|
134
|
+
</template>
|
|
135
|
+
<template #trailing-icon>
|
|
136
|
+
<CpIcon type="circle" />
|
|
137
|
+
</template>
|
|
138
|
+
</CpSelectableButton>
|
|
139
|
+
<CpSelectableButton
|
|
140
|
+
v-bind="{ ...args, appearance, size }"
|
|
141
|
+
isSelected
|
|
142
|
+
>
|
|
143
|
+
<template #leading-icon>
|
|
144
|
+
<CpIcon type="circle" />
|
|
145
|
+
</template>
|
|
146
|
+
<template #trailing-icon>
|
|
147
|
+
<CpIcon type="circle" />
|
|
148
|
+
</template>
|
|
149
|
+
</CpSelectableButton>
|
|
150
|
+
</div>
|
|
151
|
+
</div>
|
|
152
|
+
`,
|
|
153
|
+
}),
|
|
154
|
+
}
|