@designcrowd/fe-shared-lib 1.2.10 → 1.2.11-ast-upsell
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 +2 -2
- package/{dist → public}/css/tailwind-brandCrowd.css +512 -599
- package/{dist → public}/css/tailwind-brandPage.css +436 -519
- package/{dist → public}/css/tailwind-crazyDomains.css +512 -599
- package/{dist → public}/css/tailwind-designCom.css +512 -599
- package/{dist → public}/css/tailwind-designCrowd.css +512 -599
- package/src/atoms/components/ButtonGroup/ButtonGroup.stories.js +1 -0
- package/src/atoms/components/ButtonGroup/ButtonGroup.vue +24 -12
- package/src/experiences/components/PublishBrandPageModal/PublishBrandPageModal.vue +1 -0
|
@@ -10,11 +10,14 @@
|
|
|
10
10
|
<button
|
|
11
11
|
class="button-group-item tw-text-xs tw-shadow-inner tw-w-full tw-py-2"
|
|
12
12
|
:class="{
|
|
13
|
-
'!tw-shadow-[0_0_0_2px] !tw-shadow-info-500': option.isSelected,
|
|
14
|
-
'!tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200
|
|
13
|
+
'!tw-shadow-[0_0_0_2px] !tw-shadow-info-500': option.isSelected && !option.disabled,
|
|
14
|
+
'!tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200': !option.isSelected && !option.disabled,
|
|
15
|
+
'hover:!tw-shadow-info-500': !option.isSelected && !option.disabled,
|
|
16
|
+
'tw-opacity-50 !tw-cursor-not-allowed !tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200': option.disabled,
|
|
15
17
|
}"
|
|
18
|
+
:disabled="option.disabled"
|
|
16
19
|
v-bind="option.dataAttribute ? { [option.dataAttribute]: '' } : {}"
|
|
17
|
-
@click="$emit('on-select', option)"
|
|
20
|
+
@click="!option.disabled && $emit('on-select', option)"
|
|
18
21
|
>
|
|
19
22
|
<slot name="content" :option="option"></slot>
|
|
20
23
|
</button>
|
|
@@ -35,8 +38,10 @@
|
|
|
35
38
|
<button
|
|
36
39
|
v-if="variant === 'icon'"
|
|
37
40
|
:class="{
|
|
38
|
-
'!tw-shadow-[0_0_0_2px] !tw-shadow-info-500': option.isSelected,
|
|
39
|
-
'!tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200
|
|
41
|
+
'!tw-shadow-[0_0_0_2px] !tw-shadow-info-500': option.isSelected && !option.disabled,
|
|
42
|
+
'!tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200': !option.isSelected && !option.disabled,
|
|
43
|
+
'hover:!tw-shadow-info-500': !option.isSelected && !option.disabled,
|
|
44
|
+
'tw-opacity-50 !tw-cursor-not-allowed !tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200': option.disabled,
|
|
40
45
|
'tw-px-2': !option.iconViewBox,
|
|
41
46
|
'tw-px-px':
|
|
42
47
|
option.iconViewBox && !option.isSelected && !option.iconName.includes('display-style') && btnStyleVariant, // TODO - move style logic to computed prop
|
|
@@ -45,9 +50,10 @@
|
|
|
45
50
|
'tw-px-0 tw-py-0': option.iconName.includes('display-style') || btnStyleVariant === 'compressed',
|
|
46
51
|
}"
|
|
47
52
|
:style="option.iconName.includes('display-style') ? { lineHeight: 0 } : {}"
|
|
53
|
+
:disabled="option.disabled"
|
|
48
54
|
class="tw-text-xs button-group-icon-button tw-shadow-inner"
|
|
49
55
|
v-bind="option.dataAttribute ? { [option.dataAttribute]: '' } : {}"
|
|
50
|
-
@click="$emit('on-select', option)"
|
|
56
|
+
@click="!option.disabled && $emit('on-select', option)"
|
|
51
57
|
>
|
|
52
58
|
<div
|
|
53
59
|
:class="{
|
|
@@ -67,12 +73,15 @@
|
|
|
67
73
|
<button
|
|
68
74
|
v-else
|
|
69
75
|
:class="{
|
|
70
|
-
'!tw-shadow-[0_0_0_2px] !tw-shadow-info-500': option.isSelected,
|
|
71
|
-
'!tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200
|
|
76
|
+
'!tw-shadow-[0_0_0_2px] !tw-shadow-info-500': option.isSelected && !option.disabled,
|
|
77
|
+
'!tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200': !option.isSelected && !option.disabled,
|
|
78
|
+
'hover:!tw-shadow-info-500': !option.isSelected && !option.disabled,
|
|
79
|
+
'tw-opacity-50 !tw-cursor-not-allowed !tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200': option.disabled,
|
|
72
80
|
}"
|
|
81
|
+
:disabled="option.disabled"
|
|
73
82
|
class="tw-text-xs button-group-image-button tw-shadow-inner"
|
|
74
83
|
v-bind="option.dataAttribute ? { [option.dataAttribute]: '' } : {}"
|
|
75
|
-
@click="$emit('on-select', option)"
|
|
84
|
+
@click="!option.disabled && $emit('on-select', option)"
|
|
76
85
|
>
|
|
77
86
|
<img :src="option.src" :alt="option.alt" class="tw-w-full tw-h-full" />
|
|
78
87
|
</button>
|
|
@@ -90,11 +99,14 @@
|
|
|
90
99
|
:key="`button-${option.value}`"
|
|
91
100
|
:class="{
|
|
92
101
|
'tw-ml-2': idx > 0 && !columns,
|
|
93
|
-
'!tw-shadow-[0_0_0_2px] !tw-shadow-info-500': option.isSelected,
|
|
94
|
-
'!tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200
|
|
102
|
+
'!tw-shadow-[0_0_0_2px] !tw-shadow-info-500': option.isSelected && !option.disabled,
|
|
103
|
+
'!tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200': !option.isSelected && !option.disabled,
|
|
104
|
+
'hover:!tw-shadow-info-500': !option.isSelected && !option.disabled,
|
|
105
|
+
'tw-opacity-50 !tw-cursor-not-allowed !tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200': option.disabled,
|
|
95
106
|
}"
|
|
107
|
+
:disabled="option.disabled"
|
|
96
108
|
class="tw-text-xs button-group-button tw-shadow-inner"
|
|
97
|
-
@click="$emit('on-select', option)"
|
|
109
|
+
@click="!option.disabled && $emit('on-select', option)"
|
|
98
110
|
>
|
|
99
111
|
{{ option.label }}
|
|
100
112
|
</button>
|