@eturnity/eturnity_reusable_components 9.22.2-qa-03-9.22.12 → 9.25.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/package.json +1 -1
- package/src/assets/svgIcons/delete.svg +3 -2
- package/src/assets/svgIcons/redo.svg +5 -2
- package/src/assets/svgIcons/save.svg +2 -2
- package/src/assets/svgIcons/undo.svg +5 -2
- package/src/components/buttons/buttonIcon/index.vue +6 -2
- package/src/components/buttons/mainButton/index.vue +1 -1
- package/src/components/inputs/inputNumber/index.vue +54 -54
- package/src/components/inputs/select/select.stories.js +2 -53
- package/src/components/inputs/switchField/switchField.stories.js +0 -1
- package/src/components/inputs/textAreaInput/index.vue +2 -2
- package/src/components/tag/conversionTag/index.vue +1 -1
- package/src/assets/svgIcons/add_thin_icon.svg +0 -3
- package/src/assets/svgIcons/location_outline.svg +0 -3
- package/src/assets/svgIcons/subtract_thin_icon.svg +0 -3
- package/src/components/inputs/colorSelector/ColorSelector.stories.js +0 -78
- package/src/components/inputs/colorSelector/colorSelector.spec.js +0 -73
- package/src/components/inputs/colorSelector/defaultProps.js +0 -11
- package/src/components/inputs/colorSelector/index.vue +0 -224
- package/src/constants/colorPalettes.js +0 -71
package/package.json
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
-
<svg
|
|
2
|
-
<path d="
|
|
1
|
+
<svg fill="none" height="16" viewbox="13 12 14 16" width="14" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M15.7713 25.7127C15.8072 26.4355 16.3994 27 17.1244 27H22.6175C23.3425 27 23.9348 26.4355 23.9706 25.7127L24.7618 16.6129H14.9801L15.7713 25.7127ZM21.2258 18.871H22.129V23.8387H21.2258V18.871ZM19.4194 18.871H20.3226V23.8387H19.4194V18.871ZM17.6129 18.871H18.5161V23.8387H17.6129V18.871Z" fill="#DEE2EB"></path>
|
|
3
|
+
<path d="M22.129 13.9032V13H17.6129V13.9032H14V15.7097H25.7419V13.9032H22.129Z" fill="#DEE2EB"></path>
|
|
3
4
|
</svg>
|
|
@@ -1,3 +1,6 @@
|
|
|
1
|
-
<svg width="
|
|
2
|
-
<path d="
|
|
1
|
+
<svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M4.51904 2H10.519V4H4.51904V2Z" fill="#555D61"/>
|
|
3
|
+
<path d="M4.51904 8H8.51904V10H4.51904V8Z" fill="#555D61"/>
|
|
4
|
+
<path d="M10.519 5.92321L13.4807 2.96161L10.519 0L10.519 5.92321Z" fill="#555D61"/>
|
|
5
|
+
<path d="M7.98391 8C7.29229 9.1956 5.99961 10 4.51904 10C2.3099 10 0.519043 8.20914 0.519043 6C0.519043 3.79086 2.3099 2 4.51904 2C5.99961 2 7.2923 2.8044 7.98391 4H4.51904C3.41447 4 2.51904 4.89543 2.51904 6C2.51904 7.10457 3.41447 8 4.51904 8H7.98391Z" fill="#555D61"/>
|
|
3
6
|
</svg>
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
<svg width="
|
|
2
|
-
<path d="
|
|
1
|
+
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M10.8889 0H1.55556C0.692222 0 0 0.7 0 1.55556V12.4444C0 13.3 0.692222 14 1.55556 14H12.4444C13.3 14 14 13.3 14 12.4444V3.11111L10.8889 0ZM7 12.4444C5.70889 12.4444 4.66667 11.4022 4.66667 10.1111C4.66667 8.82 5.70889 7.77778 7 7.77778C8.29111 7.77778 9.33333 8.82 9.33333 10.1111C9.33333 11.4022 8.29111 12.4444 7 12.4444ZM9.33333 4.66667H1.55556V1.55556H9.33333V4.66667Z" fill="#263238"/>
|
|
3
3
|
</svg>
|
|
@@ -1,3 +1,6 @@
|
|
|
1
|
-
<svg width="
|
|
2
|
-
<path d="
|
|
1
|
+
<svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M9.48096 2H3.48096V4H9.48096V2Z" fill="white"/>
|
|
3
|
+
<path d="M9.48096 8H5.48096V10H9.48096V8Z" fill="white"/>
|
|
4
|
+
<path d="M3.48096 5.92321L0.519349 2.96161L3.48096 0L3.48096 5.92321Z" fill="white"/>
|
|
5
|
+
<path d="M6.01609 8C6.70771 9.1956 8.00039 10 9.48096 10C11.6901 10 13.481 8.20914 13.481 6C13.481 3.79086 11.6901 2 9.48096 2C8.00039 2 6.7077 2.8044 6.01609 4H9.48096C10.5855 4 11.481 4.89543 11.481 6C11.481 7.10457 10.5855 8 9.48096 8H6.01609Z" fill="white"/>
|
|
3
6
|
</svg>
|
|
@@ -212,7 +212,11 @@
|
|
|
212
212
|
}};
|
|
213
213
|
border: ${(props) => {
|
|
214
214
|
const variantStyles = getVariantStyles(props)
|
|
215
|
-
return resolveButtonBorder(
|
|
215
|
+
return resolveButtonBorder(
|
|
216
|
+
variantStyles,
|
|
217
|
+
props,
|
|
218
|
+
getButtonState(props)
|
|
219
|
+
)
|
|
216
220
|
}};
|
|
217
221
|
cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
|
|
218
222
|
user-select: none;
|
|
@@ -406,7 +410,7 @@
|
|
|
406
410
|
? props.theme.colors.disabled
|
|
407
411
|
: props.theme.semanticColors.red[500]};
|
|
408
412
|
color: ${(props) => props.theme.colors.white};
|
|
409
|
-
font-weight:
|
|
413
|
+
font-weight: 700;
|
|
410
414
|
transform: rotate(20deg);
|
|
411
415
|
cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
|
|
412
416
|
`
|
|
@@ -222,7 +222,7 @@
|
|
|
222
222
|
? props.theme.colors.disabled
|
|
223
223
|
: props.theme.semanticColors.red[500]};
|
|
224
224
|
color: ${(props) => props.theme.colors.white};
|
|
225
|
-
font-weight:
|
|
225
|
+
font-weight: 700;
|
|
226
226
|
transform: rotate(20deg);
|
|
227
227
|
cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
|
|
228
228
|
`
|
|
@@ -299,14 +299,14 @@
|
|
|
299
299
|
props.isInfoBorder
|
|
300
300
|
? '1px solid ' + props.theme.semanticColors.blue[500]
|
|
301
301
|
: props.isError
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
302
|
+
? '1px solid ' + props.theme.colors.red
|
|
303
|
+
: props.noBorder
|
|
304
|
+
? 'none'
|
|
305
|
+
: props.borderColor
|
|
306
|
+
? props.theme.colors[props.borderColor]
|
|
307
|
+
? '1px solid ' + props.theme.colors[props.borderColor]
|
|
308
|
+
: '1px solid ' + props.borderColor
|
|
309
|
+
: '1px solid ' + props.theme.colors.grey4};
|
|
310
310
|
height: ${(props) => props.inputHeight};
|
|
311
311
|
max-height: ${(props) => props.inputHeight};
|
|
312
312
|
padding: ${({ colorMode }) =>
|
|
@@ -322,14 +322,14 @@
|
|
|
322
322
|
showArrowControls
|
|
323
323
|
? '40px'
|
|
324
324
|
: colorMode === 'transparent'
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
325
|
+
? '0'
|
|
326
|
+
: slotSize
|
|
327
|
+
? isError && !showLinearUnitName && !isBorderErrorOnly
|
|
328
|
+
? 'calc(' + slotSize + ' + 24px)'
|
|
329
|
+
: 'calc(' + slotSize + ' + 10px)'
|
|
330
|
+
: isError && !showLinearUnitName && !isBorderErrorOnly
|
|
331
|
+
? '24px'
|
|
332
|
+
: '5px'};
|
|
333
333
|
border-radius: ${(props) =>
|
|
334
334
|
props.isInteractive && props.alignItems != 'vertical'
|
|
335
335
|
? '0 4px 4px 0'
|
|
@@ -342,22 +342,22 @@
|
|
|
342
342
|
props.isError
|
|
343
343
|
? props.theme.colors.grey6
|
|
344
344
|
: props.isDisabled
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
345
|
+
? props.colorMode === 'transparent'
|
|
346
|
+
? props.theme.colors.white
|
|
347
|
+
: props.theme.colors.grey2
|
|
348
|
+
: props.fontColor
|
|
349
|
+
? props.fontColor + ' !important'
|
|
350
|
+
: props.theme.colors.black};
|
|
351
351
|
background-color: ${(props) =>
|
|
352
352
|
props.readOnly
|
|
353
353
|
? props.theme.semanticColors.grey[300]
|
|
354
354
|
: props.isDisabled
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
355
|
+
? props.colorMode === 'transparent'
|
|
356
|
+
? 'transparent'
|
|
357
|
+
: props.theme.colors.grey5
|
|
358
|
+
: props.backgroundColor
|
|
359
|
+
? props.backgroundColor + ' !important'
|
|
360
|
+
: props.theme.colors.white};
|
|
361
361
|
width: ${(props) =>
|
|
362
362
|
props.inputWidth && !props.hasLabelSlot ? props.inputWidth : '100%'};
|
|
363
363
|
min-width: ${(props) => (props.minWidth ? props.minWidth : 'unset')};
|
|
@@ -435,8 +435,8 @@
|
|
|
435
435
|
props.isError
|
|
436
436
|
? props.theme.colors.red
|
|
437
437
|
: props.hasLength
|
|
438
|
-
|
|
439
|
-
|
|
438
|
+
? props.theme.colors.black
|
|
439
|
+
: props.theme.colors.mediumGray};
|
|
440
440
|
position: absolute;
|
|
441
441
|
right: 10px;
|
|
442
442
|
top: 10px;
|
|
@@ -446,8 +446,8 @@
|
|
|
446
446
|
props.isError
|
|
447
447
|
? props.theme.colors.red
|
|
448
448
|
: props.hasLength
|
|
449
|
-
|
|
450
|
-
|
|
449
|
+
? props.theme.colors.black
|
|
450
|
+
: props.theme.colors.mediumGray};
|
|
451
451
|
`
|
|
452
452
|
|
|
453
453
|
const SlotContainer = styled('span', inputProps)`
|
|
@@ -457,8 +457,8 @@
|
|
|
457
457
|
props.isError
|
|
458
458
|
? props.theme.colors.red
|
|
459
459
|
: props.hasLength
|
|
460
|
-
|
|
461
|
-
|
|
460
|
+
? props.theme.colors.black
|
|
461
|
+
: props.theme.colors.mediumGray};
|
|
462
462
|
position: absolute;
|
|
463
463
|
width: ${(props) =>
|
|
464
464
|
props.slotSize ? 'calc(' + props.slotSize + ' - 10px)' : 'fit-content'};
|
|
@@ -469,8 +469,8 @@
|
|
|
469
469
|
props.isError
|
|
470
470
|
? props.theme.colors.red
|
|
471
471
|
: props.hasLength
|
|
472
|
-
|
|
473
|
-
|
|
472
|
+
? props.theme.colors.black
|
|
473
|
+
: props.theme.colors.mediumGray};
|
|
474
474
|
`
|
|
475
475
|
|
|
476
476
|
const LabelWrapper = styled('div', inputProps)`
|
|
@@ -489,14 +489,14 @@
|
|
|
489
489
|
props.alignItems == 'vertical'
|
|
490
490
|
? 'none'
|
|
491
491
|
: props.isError
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
492
|
+
? '1px solid ' + props.theme.colors.red
|
|
493
|
+
: props.noBorder
|
|
494
|
+
? 'none'
|
|
495
|
+
: props.borderColor
|
|
496
|
+
? props.theme.colors[props.borderColor]
|
|
497
|
+
? '1px solid ' + props.theme.colors[props.borderColor]
|
|
498
|
+
: '1px solid ' + props.borderColor
|
|
499
|
+
: '1px solid ' + props.theme.colors.grey4};
|
|
500
500
|
border-radius: 4px 0 0 4px;
|
|
501
501
|
border-right: none;
|
|
502
502
|
`
|
|
@@ -952,8 +952,8 @@
|
|
|
952
952
|
this.defaultNumber || this.defaultNumber === 0
|
|
953
953
|
? this.defaultNumber
|
|
954
954
|
: this.minNumber || this.minNumber === 0
|
|
955
|
-
|
|
956
|
-
|
|
955
|
+
? this.minNumber
|
|
956
|
+
: value
|
|
957
957
|
}
|
|
958
958
|
if (!this.allowNegative) {
|
|
959
959
|
value = Math.abs(value)
|
|
@@ -1093,10 +1093,10 @@
|
|
|
1093
1093
|
value || value === 0
|
|
1094
1094
|
? value
|
|
1095
1095
|
: this.defaultNumber
|
|
1096
|
-
|
|
1097
|
-
|
|
1098
|
-
|
|
1099
|
-
|
|
1096
|
+
? this.defaultNumber
|
|
1097
|
+
: this.minNumber || this.minNumber === 0
|
|
1098
|
+
? this.minNumber
|
|
1099
|
+
: ''
|
|
1100
1100
|
if (adjustedMinValue || adjustedMinValue === 0) {
|
|
1101
1101
|
let input = this.numberToStringEnabled
|
|
1102
1102
|
? numberToString({
|
|
@@ -1125,10 +1125,10 @@
|
|
|
1125
1125
|
value || value === 0
|
|
1126
1126
|
? value
|
|
1127
1127
|
: this.defaultNumber
|
|
1128
|
-
|
|
1129
|
-
|
|
1130
|
-
|
|
1131
|
-
|
|
1128
|
+
? this.defaultNumber
|
|
1129
|
+
: this.minNumber || this.minNumber === 0
|
|
1130
|
+
? this.minNumber
|
|
1131
|
+
: ''
|
|
1132
1132
|
if (adjustedMinValue || adjustedMinValue === 0) {
|
|
1133
1133
|
let input = this.numberToStringEnabled
|
|
1134
1134
|
? numberToString({
|
|
@@ -44,57 +44,6 @@ Default.args = {
|
|
|
44
44
|
optionWidth: '50%',
|
|
45
45
|
label: 'Service territory',
|
|
46
46
|
alignItems: 'vertical',
|
|
47
|
-
<<<<<<< HEAD
|
|
48
|
-
value: '2',
|
|
49
|
-
disabled: false,
|
|
50
|
-
hasError: false,
|
|
51
|
-
dataId: 'select_story',
|
|
52
|
-
dataQaId: 'select_story',
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
export const HorizontalLayout = Template.bind({})
|
|
56
|
-
HorizontalLayout.args = {
|
|
57
|
-
...Default.args,
|
|
58
|
-
alignItems: 'horizontal',
|
|
59
|
-
label: 'Tariff model',
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
export const Disabled = Template.bind({})
|
|
63
|
-
Disabled.args = {
|
|
64
|
-
...Default.args,
|
|
65
|
-
disabled: true,
|
|
66
|
-
value: '1',
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
export const WithError = Template.bind({})
|
|
70
|
-
WithError.args = {
|
|
71
|
-
...Default.args,
|
|
72
|
-
hasError: true,
|
|
73
|
-
label: 'Assign reviewer',
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
const CountriesTemplate = (args, { argTypes }) => ({
|
|
77
|
-
components: { Select, Option },
|
|
78
|
-
props: Object.keys(argTypes),
|
|
79
|
-
template: `<Select v-bind="$props">
|
|
80
|
-
<template #selector="{selectedValue}">Code: {{ selectedValue }}</template>
|
|
81
|
-
<template #dropdown>
|
|
82
|
-
<Option value="de">Germany</Option>
|
|
83
|
-
<Option value="fr">France</Option>
|
|
84
|
-
<Option value="ch">Switzerland</Option>
|
|
85
|
-
<Option value="at">Austria</Option>
|
|
86
|
-
<Option value="it">Italy</Option>
|
|
87
|
-
</template>
|
|
88
|
-
</Select>`,
|
|
89
|
-
})
|
|
90
|
-
|
|
91
|
-
export const CountryList = CountriesTemplate.bind({})
|
|
92
|
-
CountryList.args = {
|
|
93
|
-
...Default.args,
|
|
94
|
-
label: 'Market',
|
|
95
|
-
value: 'ch',
|
|
96
|
-
optionWidth: '100%',
|
|
97
|
-
=======
|
|
98
47
|
value: SELECT_SAMPLE_OPTIONS[1],
|
|
99
48
|
}
|
|
100
49
|
|
|
@@ -117,7 +66,8 @@ const CustomizableTemplate = (args) => ({
|
|
|
117
66
|
}
|
|
118
67
|
return options.filter(
|
|
119
68
|
(item, index, self) =>
|
|
120
|
-
self.findIndex((candidate) => candidate.label === item.label) ===
|
|
69
|
+
self.findIndex((candidate) => candidate.label === item.label) ===
|
|
70
|
+
index
|
|
121
71
|
)
|
|
122
72
|
})
|
|
123
73
|
const onInputChange = (value) => {
|
|
@@ -168,5 +118,4 @@ Customizable.args = {
|
|
|
168
118
|
alignItems: 'vertical',
|
|
169
119
|
isCustomizable: true,
|
|
170
120
|
value: SELECT_SAMPLE_OPTIONS[1],
|
|
171
|
-
>>>>>>> master
|
|
172
121
|
}
|
|
@@ -18,7 +18,6 @@ export default {
|
|
|
18
18
|
argTypes: {
|
|
19
19
|
label: { control: 'text' },
|
|
20
20
|
size: { control: 'select', options: ['small', 'medium'] },
|
|
21
|
-
height: { control: 'text' },
|
|
22
21
|
disabled: { control: 'boolean' },
|
|
23
22
|
colorMode: { control: 'select', options: ['light', 'dark'] },
|
|
24
23
|
alignItems: { control: 'select', options: ['horizontal', 'vertical'] },
|
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<path d="M8 1C8.27614 1 8.5 1.22386 8.5 1.5V7.5H14.5C14.7761 7.5 15 7.72386 15 8C15 8.27614 14.7761 8.5 14.5 8.5H8.5V14.5C8.5 14.7761 8.27614 15 8 15C7.72386 15 7.5 14.7761 7.5 14.5V8.5H1.5C1.22386 8.5 1 8.27614 1 8C1 7.72386 1.22386 7.5 1.5 7.5H7.5V1.5C7.5 1.22386 7.72386 1 8 1Z" fill="#263238"/>
|
|
3
|
-
</svg>
|
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<path d="M8.00293 0.999023C11.0599 0.999297 13.5059 3.57137 13.5059 6.70117C13.5058 7.45313 13.3649 8.17298 13.1084 8.83203L13.0195 9.04004C12.7922 9.53547 12.4218 10.1025 12.0068 10.666C11.526 11.319 10.9591 12.0025 10.4209 12.6201C9.88204 13.2385 9.36719 13.7965 8.9873 14.1992C8.7973 14.4007 8.64051 14.5639 8.53125 14.6768C8.47669 14.7331 8.43357 14.7767 8.4043 14.8066C8.3898 14.8215 8.37876 14.833 8.37109 14.8408L8.35938 14.8525V14.8535L8.28223 14.917C8.2005 14.9719 8.10288 15.0019 8.00293 15.002C7.86962 15.0019 7.74129 14.9482 7.64746 14.8535L7.64648 14.8525C7.64603 14.8521 7.64523 14.8505 7.64453 14.8496L7.60156 14.8066C7.57234 14.7768 7.52889 14.7328 7.47461 14.6768C7.36539 14.5639 7.20843 14.4005 7.01855 14.1992C6.63872 13.7965 6.12374 13.2384 5.58496 12.6201C5.04685 12.0026 4.47982 11.3189 3.99902 10.666C3.52499 10.0223 3.10926 9.37316 2.89844 8.83203L2.80762 8.58203C2.60878 7.99254 2.50009 7.35915 2.5 6.70117C2.5 3.57129 4.94589 0.999168 8.00293 0.999023ZM8.00293 2C5.53441 2.00015 3.50098 4.08662 3.50098 6.70117C3.50107 7.24934 3.59037 7.77502 3.75488 8.2627L3.83008 8.46973C3.9905 8.88137 4.33977 9.44187 4.80469 10.0732C5.26308 10.6957 5.81036 11.3564 6.33887 11.9629C6.8666 12.5685 7.37235 13.1165 7.74609 13.5127C7.8404 13.6127 7.92733 13.7032 8.00293 13.7822C8.07869 13.703 8.16521 13.6129 8.25977 13.5127C8.63358 13.1164 9.13911 12.5687 9.66699 11.9629C10.1957 11.3562 10.7437 10.6959 11.2021 10.0732C11.6091 9.52063 11.9268 9.02242 12.1074 8.63086L12.1768 8.46973C12.3889 7.9249 12.5058 7.32773 12.5059 6.70117C12.5059 4.08671 10.4713 2.00028 8.00293 2ZM8 4.5C9.10457 4.5 10 5.39543 10 6.5C10 7.60457 9.10457 8.5 8 8.5C6.89543 8.5 6 7.60457 6 6.5C6 5.39543 6.89543 4.5 8 4.5ZM8 5.5C7.44772 5.5 7 5.94772 7 6.5C7 7.05228 7.44772 7.5 8 7.5C8.55228 7.5 9 7.05228 9 6.5C9 5.94772 8.55228 5.5 8 5.5Z" fill="#263238"/>
|
|
3
|
-
</svg>
|
|
@@ -1,78 +0,0 @@
|
|
|
1
|
-
import { useArgs } from '@storybook/preview-api'
|
|
2
|
-
import { action } from '@storybook/addon-actions'
|
|
3
|
-
import defaultProps from './defaultProps'
|
|
4
|
-
import ColorSelector from './index.vue'
|
|
5
|
-
import {
|
|
6
|
-
PANEL_FILL_COLORS,
|
|
7
|
-
TRANSPARENT_COLOR,
|
|
8
|
-
} from '@/constants/colorPalettes.js'
|
|
9
|
-
|
|
10
|
-
export default {
|
|
11
|
-
title: 'Components/Inputs/ColorSelector',
|
|
12
|
-
component: ColorSelector,
|
|
13
|
-
tags: ['autodocs'],
|
|
14
|
-
argTypes: {
|
|
15
|
-
size: {
|
|
16
|
-
control: 'select',
|
|
17
|
-
options: ['default', 'compact'],
|
|
18
|
-
},
|
|
19
|
-
},
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
// import ColorSelector from "@eturnity/eturnity_reusable_components/src/components/inputs/colorSelector"
|
|
23
|
-
// <ColorSelector
|
|
24
|
-
// :colors="colors"
|
|
25
|
-
// :selected-color="selectedColor"
|
|
26
|
-
// data-id="my_color_selector"
|
|
27
|
-
// label="Color"
|
|
28
|
-
// size="default"
|
|
29
|
-
// @color-change="onColorChange"
|
|
30
|
-
// />
|
|
31
|
-
|
|
32
|
-
const Template = (args) => {
|
|
33
|
-
const [currentArgs, updateArgs] = useArgs()
|
|
34
|
-
|
|
35
|
-
const handleColorChange = (color) => {
|
|
36
|
-
action('color-change')(color)
|
|
37
|
-
updateArgs({ selectedColor: color })
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
return {
|
|
41
|
-
components: { ColorSelector },
|
|
42
|
-
setup() {
|
|
43
|
-
return { args: currentArgs, handleColorChange }
|
|
44
|
-
},
|
|
45
|
-
template: `
|
|
46
|
-
<div style="padding: 16px; background: #263238;">
|
|
47
|
-
<ColorSelector
|
|
48
|
-
v-bind="args"
|
|
49
|
-
@color-change="handleColorChange"
|
|
50
|
-
/>
|
|
51
|
-
</div>
|
|
52
|
-
`,
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
export const Default = Template.bind({})
|
|
57
|
-
Default.args = {
|
|
58
|
-
...defaultProps,
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
export const WithTransparent = Template.bind({})
|
|
62
|
-
WithTransparent.args = {
|
|
63
|
-
...defaultProps,
|
|
64
|
-
colors: PANEL_FILL_COLORS,
|
|
65
|
-
selectedColor: TRANSPARENT_COLOR,
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
export const Compact = Template.bind({})
|
|
69
|
-
Compact.args = {
|
|
70
|
-
...defaultProps,
|
|
71
|
-
size: 'compact',
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
export const WithoutCustomPicker = Template.bind({})
|
|
75
|
-
WithoutCustomPicker.args = {
|
|
76
|
-
...defaultProps,
|
|
77
|
-
showCustomPicker: false,
|
|
78
|
-
}
|
|
@@ -1,73 +0,0 @@
|
|
|
1
|
-
import { mount } from '@vue/test-utils'
|
|
2
|
-
import ColorSelector from './index.vue'
|
|
3
|
-
import defaultProps from './defaultProps'
|
|
4
|
-
import theme from '@/assets/theme'
|
|
5
|
-
import { TRANSPARENT_COLOR } from '@/constants/colorPalettes.js'
|
|
6
|
-
|
|
7
|
-
jest.mock('@/components/icon/iconCache.mjs', () => ({
|
|
8
|
-
fetchIcon: jest.fn(() => Promise.resolve('mocked-icon-url.svg')),
|
|
9
|
-
}))
|
|
10
|
-
|
|
11
|
-
jest.mock('@/components/icon', () => ({
|
|
12
|
-
name: 'Icon',
|
|
13
|
-
template: '<div class="mock-icon" />',
|
|
14
|
-
props: ['name', 'color', 'size', 'cursor'],
|
|
15
|
-
}))
|
|
16
|
-
|
|
17
|
-
describe('ColorSelector', () => {
|
|
18
|
-
const colors = ['#000000', '#ff0000', TRANSPARENT_COLOR]
|
|
19
|
-
|
|
20
|
-
const mountSelector = (props = {}) =>
|
|
21
|
-
mount(ColorSelector, {
|
|
22
|
-
props: {
|
|
23
|
-
colors,
|
|
24
|
-
selectedColor: colors[0],
|
|
25
|
-
dataId: 'test_color_selector',
|
|
26
|
-
...props,
|
|
27
|
-
},
|
|
28
|
-
global: {
|
|
29
|
-
provide: { theme },
|
|
30
|
-
},
|
|
31
|
-
})
|
|
32
|
-
|
|
33
|
-
it('renders a swatch per color and the custom picker by default', () => {
|
|
34
|
-
const wrapper = mountSelector()
|
|
35
|
-
expect(wrapper.findAll('[data-test-id^="color_selector_swatch_"]')).toHaveLength(
|
|
36
|
-
colors.length
|
|
37
|
-
)
|
|
38
|
-
expect(wrapper.find('[data-test-id="color_selector_custom"]').exists()).toBe(
|
|
39
|
-
true
|
|
40
|
-
)
|
|
41
|
-
})
|
|
42
|
-
|
|
43
|
-
it('emits color-change when a preset swatch is clicked', async () => {
|
|
44
|
-
const wrapper = mountSelector()
|
|
45
|
-
await wrapper.find('[data-test-id="color_selector_swatch_1"]').trigger('click')
|
|
46
|
-
expect(wrapper.emitted('color-change')).toBeTruthy()
|
|
47
|
-
expect(wrapper.emitted('color-change')[0]).toEqual([colors[1]])
|
|
48
|
-
})
|
|
49
|
-
|
|
50
|
-
it('emits color-change when the native color input changes', async () => {
|
|
51
|
-
const wrapper = mountSelector({ selectedColor: '#123456' })
|
|
52
|
-
const input = wrapper.find('[data-test-id="color_selector_native_input"]')
|
|
53
|
-
await input.setValue('#abcdef')
|
|
54
|
-
expect(wrapper.emitted('color-change')).toBeTruthy()
|
|
55
|
-
expect(wrapper.emitted('color-change').at(-1)).toEqual(['#abcdef'])
|
|
56
|
-
})
|
|
57
|
-
|
|
58
|
-
it('hides the custom picker when showCustomPicker is false', () => {
|
|
59
|
-
const wrapper = mountSelector({ showCustomPicker: false })
|
|
60
|
-
expect(wrapper.find('[data-test-id="color_selector_custom"]').exists()).toBe(
|
|
61
|
-
false
|
|
62
|
-
)
|
|
63
|
-
expect(
|
|
64
|
-
wrapper.find('[data-test-id="color_selector_native_input"]').exists()
|
|
65
|
-
).toBe(false)
|
|
66
|
-
})
|
|
67
|
-
|
|
68
|
-
it('sets data-id on swatches when dataId is provided', () => {
|
|
69
|
-
const wrapper = mountSelector()
|
|
70
|
-
const swatch = wrapper.find('[data-test-id="color_selector_swatch_0"]')
|
|
71
|
-
expect(swatch.attributes('data-id')).toBe('test_color_selector_color_0')
|
|
72
|
-
})
|
|
73
|
-
})
|
|
@@ -1,224 +0,0 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<ColorContainer>
|
|
3
|
-
<LabelContainer v-if="label">
|
|
4
|
-
<label>{{ label }}</label>
|
|
5
|
-
</LabelContainer>
|
|
6
|
-
<ColorsWrapper>
|
|
7
|
-
<ColorRadio
|
|
8
|
-
v-for="(color, index) in colors"
|
|
9
|
-
:key="index"
|
|
10
|
-
:color="color"
|
|
11
|
-
:data-id="swatchDataId(index)"
|
|
12
|
-
:data-qa-id="swatchDataQaId(index)"
|
|
13
|
-
:data-test-id="`color_selector_swatch_${index}`"
|
|
14
|
-
:is-selected="index === colorIndex"
|
|
15
|
-
:size="size"
|
|
16
|
-
@click="changeColorIndex(index)"
|
|
17
|
-
>
|
|
18
|
-
<CrossedIcon v-if="color === TRANSPARENT_COLOR" :size="size">
|
|
19
|
-
<Icon
|
|
20
|
-
:color="colorIndex === index ? 'white' : 'grey1'"
|
|
21
|
-
cursor="default"
|
|
22
|
-
name="cross"
|
|
23
|
-
size="14px"
|
|
24
|
-
/>
|
|
25
|
-
</CrossedIcon>
|
|
26
|
-
</ColorRadio>
|
|
27
|
-
<ColorRadioCustom
|
|
28
|
-
v-if="showCustomPicker"
|
|
29
|
-
:color="colorIndex >= 0 ? 'transparent' : selectedColor"
|
|
30
|
-
:data-id="customDataId"
|
|
31
|
-
:data-qa-id="customDataQaId"
|
|
32
|
-
data-test-id="color_selector_custom"
|
|
33
|
-
:is-selected="colorIndex < 0"
|
|
34
|
-
:size="size"
|
|
35
|
-
@click="openColorPicker"
|
|
36
|
-
>
|
|
37
|
-
<Icon
|
|
38
|
-
:color="colorIndex < 0 ? 'white' : 'grey1'"
|
|
39
|
-
cursor="default"
|
|
40
|
-
name="add_icon"
|
|
41
|
-
size="14px"
|
|
42
|
-
/>
|
|
43
|
-
</ColorRadioCustom>
|
|
44
|
-
<input
|
|
45
|
-
v-if="showCustomPicker"
|
|
46
|
-
ref="colorPicker"
|
|
47
|
-
data-test-id="color_selector_native_input"
|
|
48
|
-
:style="nativeInputStyle"
|
|
49
|
-
type="color"
|
|
50
|
-
:value="selectedColor"
|
|
51
|
-
@change="defineCustomColor"
|
|
52
|
-
/>
|
|
53
|
-
</ColorsWrapper>
|
|
54
|
-
</ColorContainer>
|
|
55
|
-
</template>
|
|
56
|
-
|
|
57
|
-
<script>
|
|
58
|
-
import styled from 'vue3-styled-components'
|
|
59
|
-
import Icon from '../../../components/icon'
|
|
60
|
-
import { TRANSPARENT_COLOR } from '../../../constants/colorPalettes.js'
|
|
61
|
-
|
|
62
|
-
const swatchProps = { isSelected: Boolean, color: String, size: String }
|
|
63
|
-
|
|
64
|
-
const swatchSize = (size) => (size === 'compact' ? '24px' : '34px')
|
|
65
|
-
|
|
66
|
-
const CrossedIcon = styled('div', { size: String })`
|
|
67
|
-
position: absolute;
|
|
68
|
-
top: 50%;
|
|
69
|
-
left: 50%;
|
|
70
|
-
transform: translate(-50%, -50%);
|
|
71
|
-
`
|
|
72
|
-
|
|
73
|
-
const ColorRadio = styled('div', swatchProps)`
|
|
74
|
-
position: relative;
|
|
75
|
-
width: ${(props) => swatchSize(props.size)};
|
|
76
|
-
height: ${(props) => swatchSize(props.size)};
|
|
77
|
-
display: inline-flex;
|
|
78
|
-
align-items: center;
|
|
79
|
-
justify-content: center;
|
|
80
|
-
border: 2px solid
|
|
81
|
-
${(props) =>
|
|
82
|
-
props.isSelected
|
|
83
|
-
? 'white'
|
|
84
|
-
: props.size === 'compact'
|
|
85
|
-
? props.theme.colors.grey2
|
|
86
|
-
: 'transparent'};
|
|
87
|
-
border-radius: 4px;
|
|
88
|
-
background-color: ${(props) => props.color};
|
|
89
|
-
color: white;
|
|
90
|
-
cursor: pointer;
|
|
91
|
-
|
|
92
|
-
&:hover {
|
|
93
|
-
border-color: white;
|
|
94
|
-
}
|
|
95
|
-
`
|
|
96
|
-
|
|
97
|
-
const ColorRadioCustom = styled('div', swatchProps)`
|
|
98
|
-
border: 2px solid
|
|
99
|
-
${(props) => (props.isSelected ? 'white' : props.theme.colors.grey1)};
|
|
100
|
-
border-radius: 4px;
|
|
101
|
-
background-color: ${(props) => props.color};
|
|
102
|
-
color: ${(props) =>
|
|
103
|
-
props.isSelected ? 'white' : props.theme.colors.grey1};
|
|
104
|
-
display: inline-flex;
|
|
105
|
-
width: ${(props) => swatchSize(props.size)};
|
|
106
|
-
height: ${(props) => swatchSize(props.size)};
|
|
107
|
-
justify-content: center;
|
|
108
|
-
vertical-align: top;
|
|
109
|
-
cursor: pointer;
|
|
110
|
-
align-items: center;
|
|
111
|
-
`
|
|
112
|
-
|
|
113
|
-
const ColorContainer = styled('div')`
|
|
114
|
-
display: flex;
|
|
115
|
-
flex-direction: column;
|
|
116
|
-
gap: 8px;
|
|
117
|
-
`
|
|
118
|
-
|
|
119
|
-
const ColorsWrapper = styled('div')`
|
|
120
|
-
display: flex;
|
|
121
|
-
flex-wrap: wrap;
|
|
122
|
-
gap: 8px;
|
|
123
|
-
position: relative;
|
|
124
|
-
`
|
|
125
|
-
|
|
126
|
-
const LabelContainer = styled('div')`
|
|
127
|
-
font-size: 13px;
|
|
128
|
-
font-weight: 500;
|
|
129
|
-
`
|
|
130
|
-
|
|
131
|
-
const nativeInputStyle = {
|
|
132
|
-
width: 0,
|
|
133
|
-
height: 0,
|
|
134
|
-
opacity: 0,
|
|
135
|
-
position: 'absolute',
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
export default {
|
|
139
|
-
name: 'ColorSelector',
|
|
140
|
-
|
|
141
|
-
components: {
|
|
142
|
-
ColorRadio,
|
|
143
|
-
ColorRadioCustom,
|
|
144
|
-
ColorContainer,
|
|
145
|
-
ColorsWrapper,
|
|
146
|
-
CrossedIcon,
|
|
147
|
-
Icon,
|
|
148
|
-
LabelContainer,
|
|
149
|
-
},
|
|
150
|
-
|
|
151
|
-
props: {
|
|
152
|
-
colors: {
|
|
153
|
-
type: Array,
|
|
154
|
-
required: true,
|
|
155
|
-
},
|
|
156
|
-
selectedColor: {
|
|
157
|
-
type: String,
|
|
158
|
-
default: '',
|
|
159
|
-
},
|
|
160
|
-
label: {
|
|
161
|
-
type: String,
|
|
162
|
-
default: '',
|
|
163
|
-
},
|
|
164
|
-
dataId: {
|
|
165
|
-
type: String,
|
|
166
|
-
default: '',
|
|
167
|
-
},
|
|
168
|
-
dataQaId: {
|
|
169
|
-
type: String,
|
|
170
|
-
default: '',
|
|
171
|
-
},
|
|
172
|
-
size: {
|
|
173
|
-
type: String,
|
|
174
|
-
default: 'default',
|
|
175
|
-
validator: (value) => ['default', 'compact'].includes(value),
|
|
176
|
-
},
|
|
177
|
-
showCustomPicker: {
|
|
178
|
-
type: Boolean,
|
|
179
|
-
default: true,
|
|
180
|
-
},
|
|
181
|
-
},
|
|
182
|
-
|
|
183
|
-
emits: ['color-change'],
|
|
184
|
-
|
|
185
|
-
data() {
|
|
186
|
-
return {
|
|
187
|
-
TRANSPARENT_COLOR,
|
|
188
|
-
nativeInputStyle,
|
|
189
|
-
}
|
|
190
|
-
},
|
|
191
|
-
|
|
192
|
-
computed: {
|
|
193
|
-
colorIndex() {
|
|
194
|
-
return this.colors.findIndex((color) => color === this.selectedColor)
|
|
195
|
-
},
|
|
196
|
-
customDataId() {
|
|
197
|
-
return this.dataId ? `${this.dataId}_custom` : undefined
|
|
198
|
-
},
|
|
199
|
-
customDataQaId() {
|
|
200
|
-
const id = this.dataQaId || this.dataId
|
|
201
|
-
return id ? `${id}_custom` : undefined
|
|
202
|
-
},
|
|
203
|
-
},
|
|
204
|
-
|
|
205
|
-
methods: {
|
|
206
|
-
swatchDataId(index) {
|
|
207
|
-
return this.dataId ? `${this.dataId}_color_${index}` : undefined
|
|
208
|
-
},
|
|
209
|
-
swatchDataQaId(index) {
|
|
210
|
-
const id = this.dataQaId || this.dataId
|
|
211
|
-
return id ? `${id}_color_${index}` : undefined
|
|
212
|
-
},
|
|
213
|
-
changeColorIndex(index) {
|
|
214
|
-
this.$emit('color-change', this.colors[index])
|
|
215
|
-
},
|
|
216
|
-
defineCustomColor(event) {
|
|
217
|
-
this.$emit('color-change', event.target.value)
|
|
218
|
-
},
|
|
219
|
-
openColorPicker() {
|
|
220
|
-
this.$refs.colorPicker?.click()
|
|
221
|
-
},
|
|
222
|
-
},
|
|
223
|
-
}
|
|
224
|
-
</script>
|
|
@@ -1,71 +0,0 @@
|
|
|
1
|
-
import theme from '@/assets/theme.js'
|
|
2
|
-
|
|
3
|
-
/** Fully transparent fill (used with cross icon in ColorSelector). */
|
|
4
|
-
export const TRANSPARENT_COLOR = '#ffffff00'
|
|
5
|
-
|
|
6
|
-
export const THEME_COLORS = [
|
|
7
|
-
theme.colors.black,
|
|
8
|
-
theme.colors.grey1,
|
|
9
|
-
theme.colors.blue,
|
|
10
|
-
theme.colors.red,
|
|
11
|
-
theme.colors.green,
|
|
12
|
-
theme.colors.yellow,
|
|
13
|
-
]
|
|
14
|
-
|
|
15
|
-
/** Shared palette for blueprint arrows and 3D roof plan items. */
|
|
16
|
-
export const DRAWING_ITEM_COLORS = [
|
|
17
|
-
theme.semanticColors.red[400],
|
|
18
|
-
theme.semanticColors.red[600],
|
|
19
|
-
theme.semanticColors.blue[400],
|
|
20
|
-
theme.semanticColors.blue[600],
|
|
21
|
-
theme.semanticColors.green[400],
|
|
22
|
-
theme.semanticColors.green[600],
|
|
23
|
-
theme.semanticColors.purple[400],
|
|
24
|
-
theme.semanticColors.purple[600],
|
|
25
|
-
theme.semanticColors.yellow[400],
|
|
26
|
-
theme.semanticColors.yellow[600],
|
|
27
|
-
theme.semanticColors.teal[400],
|
|
28
|
-
theme.semanticColors.grey[400],
|
|
29
|
-
theme.colors.black,
|
|
30
|
-
theme.colors.white,
|
|
31
|
-
]
|
|
32
|
-
|
|
33
|
-
export const ARROW_COLORS = DRAWING_ITEM_COLORS
|
|
34
|
-
|
|
35
|
-
export const ROOF_PLAN_ITEM_COLORS = DRAWING_ITEM_COLORS
|
|
36
|
-
|
|
37
|
-
export const PANEL_FILL_COLORS = [
|
|
38
|
-
TRANSPARENT_COLOR,
|
|
39
|
-
theme.semanticColors.red[400],
|
|
40
|
-
theme.semanticColors.red[600],
|
|
41
|
-
theme.semanticColors.blue[400],
|
|
42
|
-
theme.semanticColors.blue[600],
|
|
43
|
-
theme.semanticColors.green[400],
|
|
44
|
-
theme.semanticColors.green[600],
|
|
45
|
-
theme.semanticColors.purple[400],
|
|
46
|
-
theme.semanticColors.purple[600],
|
|
47
|
-
theme.semanticColors.yellow[400],
|
|
48
|
-
theme.semanticColors.yellow[600],
|
|
49
|
-
theme.semanticColors.teal[400],
|
|
50
|
-
theme.semanticColors.grey[400],
|
|
51
|
-
theme.colors.black,
|
|
52
|
-
theme.colors.white,
|
|
53
|
-
]
|
|
54
|
-
|
|
55
|
-
export const PANEL_STROKE_COLORS = [
|
|
56
|
-
TRANSPARENT_COLOR,
|
|
57
|
-
theme.semanticColors.red[400],
|
|
58
|
-
theme.semanticColors.red[600],
|
|
59
|
-
theme.semanticColors.blue[400],
|
|
60
|
-
theme.semanticColors.blue[600],
|
|
61
|
-
theme.semanticColors.green[400],
|
|
62
|
-
theme.semanticColors.green[600],
|
|
63
|
-
theme.semanticColors.purple[400],
|
|
64
|
-
theme.semanticColors.purple[600],
|
|
65
|
-
theme.semanticColors.yellow[400],
|
|
66
|
-
theme.semanticColors.yellow[600],
|
|
67
|
-
theme.semanticColors.teal[400],
|
|
68
|
-
theme.semanticColors.grey[400],
|
|
69
|
-
theme.colors.black,
|
|
70
|
-
theme.colors.white,
|
|
71
|
-
]
|