@vcita/design-system 0.6.21 → 0.6.23-beta.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/CHANGELOG.MD +3 -0
- package/dist/@vcita/design-system.esm.js +40 -25
- package/dist/@vcita/design-system.min.js +1 -1
- package/dist/@vcita/design-system.ssr.js +47 -32
- package/package.json +1 -1
- package/src/components/VcRadio/VcRadio.stories.js +1 -1
- package/src/components/VcRadio/VcRadio.vue +8 -3
- package/src/components/VcRadioGroup/VcRadioGroup.spec.js +17 -0
- package/src/components/VcRadioGroup/VcRadioGroup.stories.js +4 -1
- package/src/components/VcRadioGroup/VcRadioGroup.vue +1 -1
- package/src/components/VcTooltip/VcTooltip.vue +8 -6
- package/src/components/wizard/VcSteperContent/VcStepperContent.vue +2 -3
- package/src/components/wizard/VcWizard/VcWizard.vue +2 -0
- package/src/components/wizard/VcWizardCtaContainer/VcWizardCtaContainer.stories.js +1 -1
- package/src/components/wizard/VcWizardCtaContainer/VcWizardCtaContainer.vue +3 -1
|
@@ -2023,11 +2023,13 @@ var __vue_render__$I = function __vue_render__() {
|
|
|
2023
2023
|
staticClass: "dark-tooltip",
|
|
2024
2024
|
attrs: {
|
|
2025
2025
|
"data-qa": _vm.dataQa + "-dark-content"
|
|
2026
|
-
}
|
|
2026
|
+
}
|
|
2027
|
+
}, [_vm.header || _vm.content ? _c('span', {
|
|
2028
|
+
staticClass: "inner-content",
|
|
2027
2029
|
domProps: {
|
|
2028
2030
|
"innerHTML": _vm._s(_vm.header + " " + _vm.content)
|
|
2029
2031
|
}
|
|
2030
|
-
},
|
|
2032
|
+
}) : _vm._e(), _vm._v(" "), _vm._t("content")], 2) : _c('div', {
|
|
2031
2033
|
staticClass: "tooltip-wrapper",
|
|
2032
2034
|
attrs: {
|
|
2033
2035
|
"data-qa": _vm.dataQa + "-content"
|
|
@@ -2038,11 +2040,13 @@ var __vue_render__$I = function __vue_render__() {
|
|
|
2038
2040
|
}, [_vm._v("\n " + _vm._s(_vm.header) + "\n ")]) : _vm._e(), _vm._v(" "), _c('div', {
|
|
2039
2041
|
staticClass: "tooltip-content"
|
|
2040
2042
|
}, [_c('div', {
|
|
2041
|
-
staticClass: "content-text"
|
|
2043
|
+
staticClass: "content-text"
|
|
2044
|
+
}, [_vm.content ? _c('span', {
|
|
2045
|
+
staticClass: "inner-content",
|
|
2042
2046
|
domProps: {
|
|
2043
2047
|
"innerHTML": _vm._s(_vm.content)
|
|
2044
2048
|
}
|
|
2045
|
-
},
|
|
2049
|
+
}) : _vm._e(), _vm._v(" "), _vm._t("content")], 2)])])])], 1);
|
|
2046
2050
|
};
|
|
2047
2051
|
|
|
2048
2052
|
var __vue_staticRenderFns__$I = [];
|
|
@@ -2050,8 +2054,8 @@ var __vue_staticRenderFns__$I = [];
|
|
|
2050
2054
|
|
|
2051
2055
|
var __vue_inject_styles__$I = function __vue_inject_styles__(inject) {
|
|
2052
2056
|
if (!inject) return;
|
|
2053
|
-
inject("data-v-
|
|
2054
|
-
source: ":root{--primary-font-family:Montserrat;--font-size-xxx-small:9px;--font-size-xx-small:12px;--font-size-x-small:13px;--font-size-small:14px;--font-size-small2:15px;--font-size-small3:17px;--font-size-medium:18px;--font-size-medium1:22px;--font-size-medium2:24px;--font-size-large:28px;--font-weight-light:300;--font-weight-medium:400;--font-weight-medium2:500;--font-weight-large:600;--font-weight-large2:700;--font-weight-xl:800;--letter-spacing:0.003em;--size-value0:0px;--size-value1:4px;--size-value2:8px;--size-value3:12px;--size-value4:16px;--size-value5:20px;--size-value6:24px;--size-value7:28px;--size-value8:32px;--size-value9:36px;--size-value10:40px;--size-value11:44px;--size-value12:48px;--size-value13:52px;--size-value14:56px;--size-value15:60px;--size-value16:64px;--size-value17:68px;--size-value18:72px;--size-value19:76px;--size-value20:80px;--border-radius:6px;--border-frame:1px solid #e0e0e0;--border-focused-frame:1px solid var(--v-secondary-base);--shadow-focused-frame:0px 0px 0px 3px var(--v-secondary-lighten1);--popover-width:360px;--popover-max-height:464px;--popover-border-radius:10px;--modal-desktop-offset:-112px;--modal-bg-color:#ffffff;--modal-box-shadow:0px 7px 8px -4px rgba(0, 0, 0, 0.2),2px 13px 19px 2px rgba(0, 0, 0, 0.14),0px 5px 24px rgba(0, 0, 0, 0.12);--modal-border-radius:10px;--modal-width-small:384px;--modal-width-medium:576px;--modal-width-large:816px;--modal-width-x-large:972px;--avatar-x-sm:24px;--avatar-sm:32px;--avatar-md:40px;--avatar-lg:48px;--dropzone-active-border-color:#1e93b7;--dropzone-active-second-border-color:#95cddb;--gray-darken-5:#212121;--gray-darken-4:#616161;--gray-darken-3:#757575;--gray-darken-2:#999999;--gray-darken-1:#b3b3b3;--gray:#cccccc;--gray-lighten-1:#e0e0e0;--gray-lighten-2:#ededed;--gray-lighten-3:#f7f7f7;--gray-lighten-4:#fafafa;--neutral:#586E8C;--neutral-lighten-1:#D6DBE6;--neutral-lighten-2:#EAEDF2;--neutral-lighten-3:#F8F9FB;--red:#F2514A;--red-lighten-1:#F79792;--red-lighten-2:#FBCBC9;--red-lighten-3:#FDE8E7;--yellow:#FFC511;--yellow-lighten-1:#FFDC70;--yellow-lighten-2:#FFEDB8;--yellow-lighten-3:#FFF7E0;--green:#54D28C;--green-lighten-1:#98E4BA;--green-lighten-2:#CFF8E1;--green-lighten-3:#EAFCF2;--blue:#478FFF;--blue-lighten-1:#91BCFF;--blue-lighten-2:#C8DDFF;--blue-lighten-3:#E7F0FF;--orange:#FF8F00;--orange-lighten-1:#FCB965;--orange-lighten-2:#FAD9B0;--orange-lighten-3:#F9EBDA;--shadow-1:0px 1px 4px rgba(0, 0, 0, 0.11);--shadow-2:0px 2px 5px rgba(0, 0, 0, 0.1),0px 2px 2px rgba(0, 0, 0, 0.06),0px 3px 1px -2px rgba(0, 0, 0, 0.06);--shadow-3:0px 3px 2px rgba(0, 0, 0, 0.101961);--shadow-4:0px 1px 1px rgba(0, 0, 0, 0.06),0px 3px 8px rgba(0, 0, 0, 0.15);--shadow-5:0px 4px 18px rgba(0, 0, 0, 0.1);--shadow-6:0px 1px 10px rgba(0, 0, 0, 0.12),0px 4px 7px rgba(0, 0, 0, 0.14),0px 2px 4px -1px rgba(0, 0, 0, 0.2);--shadow-7:0px 3px 5px -1px rgba(0, 0, 0, 0.2),0px 6px 10px rgba(0, 0, 0, 0.14),0px 1px 18px rgba(0, 0, 0, 0.12);--shadow-8:0px 5px 7px 3px rgba(0, 0, 0, 0.26);--shadow-9:0px 7px 8px -4px rgba(0, 0, 0, 0.2),2px 13px 19px 2px rgba(0, 0, 0, 0.14),0px 5px 24px rgba(0, 0, 0, 0.12);--shadow-10:0px 4px 8px #cccccc}.vc-tooltip{opacity:1!important;padding:0;border-radius:var(--border-radius)}.vc-tooltip .dark-tooltip{background-color:rgba(0,0,0,.97);font-size:var(--size-value3);font-weight:400;border-radius:var(--size-value1);padding:var(--size-value2)}.vc-tooltip .tooltip-wrapper{background:var(--modal-bg-color);box-shadow:0 5px 5px -3px rgba(0,0,0,.1),0 8px 10px 1px rgba(0,0,0,.06),0 3px 14px 2px rgba(0,0,0,.06);border-radius:var(--border-radius)}.vc-tooltip .tooltip-wrapper .tooltip-header{color:var(--gray-darken-5);font-size:var(--font-size-small2);border-radius:var(--border-radius) var(--border-radius) 0 0;font-weight:var(--font-weight-large);padding:var(--size-value3) var(--size-value4)}.vc-tooltip .tooltip-wrapper .tooltip-header.alert{background-color:var(--red-lighten-3)}.vc-tooltip .tooltip-wrapper .tooltip-header.information{background-color:var(--blue-lighten-3)}.vc-tooltip .tooltip-wrapper .tooltip-content{display:block;font-size:var(--font-size-x-small);padding:var(--size-value3) var(--size-value4) var(--size-value4)}.vc-tooltip .tooltip-wrapper .tooltip-content .content-text{color:var(--gray-darken-5);max-width:fit-content;min-width:250px;word-wrap:break-word}",
|
|
2057
|
+
inject("data-v-4def565c_0", {
|
|
2058
|
+
source: ":root{--primary-font-family:Montserrat;--font-size-xxx-small:9px;--font-size-xx-small:12px;--font-size-x-small:13px;--font-size-small:14px;--font-size-small2:15px;--font-size-small3:17px;--font-size-medium:18px;--font-size-medium1:22px;--font-size-medium2:24px;--font-size-large:28px;--font-weight-light:300;--font-weight-medium:400;--font-weight-medium2:500;--font-weight-large:600;--font-weight-large2:700;--font-weight-xl:800;--letter-spacing:0.003em;--size-value0:0px;--size-value1:4px;--size-value2:8px;--size-value3:12px;--size-value4:16px;--size-value5:20px;--size-value6:24px;--size-value7:28px;--size-value8:32px;--size-value9:36px;--size-value10:40px;--size-value11:44px;--size-value12:48px;--size-value13:52px;--size-value14:56px;--size-value15:60px;--size-value16:64px;--size-value17:68px;--size-value18:72px;--size-value19:76px;--size-value20:80px;--border-radius:6px;--border-frame:1px solid #e0e0e0;--border-focused-frame:1px solid var(--v-secondary-base);--shadow-focused-frame:0px 0px 0px 3px var(--v-secondary-lighten1);--popover-width:360px;--popover-max-height:464px;--popover-border-radius:10px;--modal-desktop-offset:-112px;--modal-bg-color:#ffffff;--modal-box-shadow:0px 7px 8px -4px rgba(0, 0, 0, 0.2),2px 13px 19px 2px rgba(0, 0, 0, 0.14),0px 5px 24px rgba(0, 0, 0, 0.12);--modal-border-radius:10px;--modal-width-small:384px;--modal-width-medium:576px;--modal-width-large:816px;--modal-width-x-large:972px;--avatar-x-sm:24px;--avatar-sm:32px;--avatar-md:40px;--avatar-lg:48px;--dropzone-active-border-color:#1e93b7;--dropzone-active-second-border-color:#95cddb;--gray-darken-5:#212121;--gray-darken-4:#616161;--gray-darken-3:#757575;--gray-darken-2:#999999;--gray-darken-1:#b3b3b3;--gray:#cccccc;--gray-lighten-1:#e0e0e0;--gray-lighten-2:#ededed;--gray-lighten-3:#f7f7f7;--gray-lighten-4:#fafafa;--neutral:#586E8C;--neutral-lighten-1:#D6DBE6;--neutral-lighten-2:#EAEDF2;--neutral-lighten-3:#F8F9FB;--red:#F2514A;--red-lighten-1:#F79792;--red-lighten-2:#FBCBC9;--red-lighten-3:#FDE8E7;--yellow:#FFC511;--yellow-lighten-1:#FFDC70;--yellow-lighten-2:#FFEDB8;--yellow-lighten-3:#FFF7E0;--green:#54D28C;--green-lighten-1:#98E4BA;--green-lighten-2:#CFF8E1;--green-lighten-3:#EAFCF2;--blue:#478FFF;--blue-lighten-1:#91BCFF;--blue-lighten-2:#C8DDFF;--blue-lighten-3:#E7F0FF;--orange:#FF8F00;--orange-lighten-1:#FCB965;--orange-lighten-2:#FAD9B0;--orange-lighten-3:#F9EBDA;--shadow-1:0px 1px 4px rgba(0, 0, 0, 0.11);--shadow-2:0px 2px 5px rgba(0, 0, 0, 0.1),0px 2px 2px rgba(0, 0, 0, 0.06),0px 3px 1px -2px rgba(0, 0, 0, 0.06);--shadow-3:0px 3px 2px rgba(0, 0, 0, 0.101961);--shadow-4:0px 1px 1px rgba(0, 0, 0, 0.06),0px 3px 8px rgba(0, 0, 0, 0.15);--shadow-5:0px 4px 18px rgba(0, 0, 0, 0.1);--shadow-6:0px 1px 10px rgba(0, 0, 0, 0.12),0px 4px 7px rgba(0, 0, 0, 0.14),0px 2px 4px -1px rgba(0, 0, 0, 0.2);--shadow-7:0px 3px 5px -1px rgba(0, 0, 0, 0.2),0px 6px 10px rgba(0, 0, 0, 0.14),0px 1px 18px rgba(0, 0, 0, 0.12);--shadow-8:0px 5px 7px 3px rgba(0, 0, 0, 0.26);--shadow-9:0px 7px 8px -4px rgba(0, 0, 0, 0.2),2px 13px 19px 2px rgba(0, 0, 0, 0.14),0px 5px 24px rgba(0, 0, 0, 0.12);--shadow-10:0px 4px 8px #cccccc}.vc-tooltip{opacity:1!important;padding:0;border-radius:var(--border-radius)}.vc-tooltip .dark-tooltip{background-color:rgba(0,0,0,.97);font-size:var(--size-value3);font-weight:400;border-radius:var(--size-value1);padding:var(--size-value2)}.vc-tooltip .tooltip-wrapper{background:var(--modal-bg-color);box-shadow:0 5px 5px -3px rgba(0,0,0,.1),0 8px 10px 1px rgba(0,0,0,.06),0 3px 14px 2px rgba(0,0,0,.06);border-radius:var(--border-radius)}.vc-tooltip .tooltip-wrapper .tooltip-header{color:var(--gray-darken-5);font-size:var(--font-size-small2);border-radius:var(--border-radius) var(--border-radius) 0 0;font-weight:var(--font-weight-large);padding:var(--size-value3) var(--size-value4)}.vc-tooltip .tooltip-wrapper .tooltip-header.alert{background-color:var(--red-lighten-3)}.vc-tooltip .tooltip-wrapper .tooltip-header.information{background-color:var(--blue-lighten-3)}.vc-tooltip .tooltip-wrapper .tooltip-content{display:block;font-size:var(--font-size-x-small);padding:var(--size-value3) var(--size-value4) var(--size-value4)}.vc-tooltip .tooltip-wrapper .tooltip-content .content-text{color:var(--gray-darken-5);max-width:fit-content;min-width:250px;word-wrap:break-word}.vc-tooltip .inner-content{display:contents}",
|
|
2055
2059
|
map: undefined,
|
|
2056
2060
|
media: undefined
|
|
2057
2061
|
});
|
|
@@ -2062,7 +2066,7 @@ var __vue_inject_styles__$I = function __vue_inject_styles__(inject) {
|
|
|
2062
2066
|
var __vue_scope_id__$I = undefined;
|
|
2063
2067
|
/* module identifier */
|
|
2064
2068
|
|
|
2065
|
-
var __vue_module_identifier__$I = "data-v-
|
|
2069
|
+
var __vue_module_identifier__$I = "data-v-4def565c";
|
|
2066
2070
|
/* functional template */
|
|
2067
2071
|
|
|
2068
2072
|
var __vue_is_functional_template__$I = false;
|
|
@@ -6719,8 +6723,8 @@ var __vue_staticRenderFns__$8 = [];
|
|
|
6719
6723
|
|
|
6720
6724
|
var __vue_inject_styles__$8 = function __vue_inject_styles__(inject) {
|
|
6721
6725
|
if (!inject) return;
|
|
6722
|
-
inject("data-v-
|
|
6723
|
-
source: "[data-v-
|
|
6726
|
+
inject("data-v-31ce9b04_0", {
|
|
6727
|
+
source: "[data-v-31ce9b04]:root{--primary-font-family:Montserrat;--font-size-xxx-small:9px;--font-size-xx-small:12px;--font-size-x-small:13px;--font-size-small:14px;--font-size-small2:15px;--font-size-small3:17px;--font-size-medium:18px;--font-size-medium1:22px;--font-size-medium2:24px;--font-size-large:28px;--font-weight-light:300;--font-weight-medium:400;--font-weight-medium2:500;--font-weight-large:600;--font-weight-large2:700;--font-weight-xl:800;--letter-spacing:0.003em;--size-value0:0px;--size-value1:4px;--size-value2:8px;--size-value3:12px;--size-value4:16px;--size-value5:20px;--size-value6:24px;--size-value7:28px;--size-value8:32px;--size-value9:36px;--size-value10:40px;--size-value11:44px;--size-value12:48px;--size-value13:52px;--size-value14:56px;--size-value15:60px;--size-value16:64px;--size-value17:68px;--size-value18:72px;--size-value19:76px;--size-value20:80px;--border-radius:6px;--border-frame:1px solid #e0e0e0;--border-focused-frame:1px solid var(--v-secondary-base);--shadow-focused-frame:0px 0px 0px 3px var(--v-secondary-lighten1);--popover-width:360px;--popover-max-height:464px;--popover-border-radius:10px;--modal-desktop-offset:-112px;--modal-bg-color:#ffffff;--modal-box-shadow:0px 7px 8px -4px rgba(0, 0, 0, 0.2),2px 13px 19px 2px rgba(0, 0, 0, 0.14),0px 5px 24px rgba(0, 0, 0, 0.12);--modal-border-radius:10px;--modal-width-small:384px;--modal-width-medium:576px;--modal-width-large:816px;--modal-width-x-large:972px;--avatar-x-sm:24px;--avatar-sm:32px;--avatar-md:40px;--avatar-lg:48px;--dropzone-active-border-color:#1e93b7;--dropzone-active-second-border-color:#95cddb;--gray-darken-5:#212121;--gray-darken-4:#616161;--gray-darken-3:#757575;--gray-darken-2:#999999;--gray-darken-1:#b3b3b3;--gray:#cccccc;--gray-lighten-1:#e0e0e0;--gray-lighten-2:#ededed;--gray-lighten-3:#f7f7f7;--gray-lighten-4:#fafafa;--neutral:#586E8C;--neutral-lighten-1:#D6DBE6;--neutral-lighten-2:#EAEDF2;--neutral-lighten-3:#F8F9FB;--red:#F2514A;--red-lighten-1:#F79792;--red-lighten-2:#FBCBC9;--red-lighten-3:#FDE8E7;--yellow:#FFC511;--yellow-lighten-1:#FFDC70;--yellow-lighten-2:#FFEDB8;--yellow-lighten-3:#FFF7E0;--green:#54D28C;--green-lighten-1:#98E4BA;--green-lighten-2:#CFF8E1;--green-lighten-3:#EAFCF2;--blue:#478FFF;--blue-lighten-1:#91BCFF;--blue-lighten-2:#C8DDFF;--blue-lighten-3:#E7F0FF;--orange:#FF8F00;--orange-lighten-1:#FCB965;--orange-lighten-2:#FAD9B0;--orange-lighten-3:#F9EBDA;--shadow-1:0px 1px 4px rgba(0, 0, 0, 0.11);--shadow-2:0px 2px 5px rgba(0, 0, 0, 0.1),0px 2px 2px rgba(0, 0, 0, 0.06),0px 3px 1px -2px rgba(0, 0, 0, 0.06);--shadow-3:0px 3px 2px rgba(0, 0, 0, 0.101961);--shadow-4:0px 1px 1px rgba(0, 0, 0, 0.06),0px 3px 8px rgba(0, 0, 0, 0.15);--shadow-5:0px 4px 18px rgba(0, 0, 0, 0.1);--shadow-6:0px 1px 10px rgba(0, 0, 0, 0.12),0px 4px 7px rgba(0, 0, 0, 0.14),0px 2px 4px -1px rgba(0, 0, 0, 0.2);--shadow-7:0px 3px 5px -1px rgba(0, 0, 0, 0.2),0px 6px 10px rgba(0, 0, 0, 0.14),0px 1px 18px rgba(0, 0, 0, 0.12);--shadow-8:0px 5px 7px 3px rgba(0, 0, 0, 0.26);--shadow-9:0px 7px 8px -4px rgba(0, 0, 0, 0.2),2px 13px 19px 2px rgba(0, 0, 0, 0.14),0px 5px 24px rgba(0, 0, 0, 0.12);--shadow-10:0px 4px 8px #cccccc}.wizard-cta-container[data-v-31ce9b04]{background-color:#fff;position:sticky;bottom:0;left:0;width:100%;height:var(--size-value18);max-height:var(--size-value18);padding:var(--size-value3) var(--size-value4);border-top:1px solid var(--gray-lighten-1)}@media screen and (min-width:960px){.wizard-cta-container[data-v-31ce9b04]{border-top:revert;position:static;width:100%;transform:revert;height:var(--size-value20);max-height:var(--size-value20);padding-bottom:var(--size-value6)}}.wizard-cta-button[data-v-31ce9b04]{flex:1;min-height:var(--size-value12)}@media screen and (min-width:960px){.wizard-cta-button[data-v-31ce9b04]{flex:revert;min-height:var(--size-value10)}}.wizard-cta-button+.wizard-cta-button[data-v-31ce9b04]{margin-inline-start:var(--size-value3)}",
|
|
6724
6728
|
map: undefined,
|
|
6725
6729
|
media: undefined
|
|
6726
6730
|
});
|
|
@@ -6728,10 +6732,10 @@ var __vue_inject_styles__$8 = function __vue_inject_styles__(inject) {
|
|
|
6728
6732
|
/* scoped */
|
|
6729
6733
|
|
|
6730
6734
|
|
|
6731
|
-
var __vue_scope_id__$8 = "data-v-
|
|
6735
|
+
var __vue_scope_id__$8 = "data-v-31ce9b04";
|
|
6732
6736
|
/* module identifier */
|
|
6733
6737
|
|
|
6734
|
-
var __vue_module_identifier__$8 = "data-v-
|
|
6738
|
+
var __vue_module_identifier__$8 = "data-v-31ce9b04";
|
|
6735
6739
|
/* functional template */
|
|
6736
6740
|
|
|
6737
6741
|
var __vue_is_functional_template__$8 = false;
|
|
@@ -6930,8 +6934,8 @@ var __vue_staticRenderFns__$7 = [];
|
|
|
6930
6934
|
|
|
6931
6935
|
var __vue_inject_styles__$7 = function __vue_inject_styles__(inject) {
|
|
6932
6936
|
if (!inject) return;
|
|
6933
|
-
inject("data-v-
|
|
6934
|
-
source: "[data-v-
|
|
6937
|
+
inject("data-v-627561f4_0", {
|
|
6938
|
+
source: "[data-v-627561f4]:root{--primary-font-family:Montserrat;--font-size-xxx-small:9px;--font-size-xx-small:12px;--font-size-x-small:13px;--font-size-small:14px;--font-size-small2:15px;--font-size-small3:17px;--font-size-medium:18px;--font-size-medium1:22px;--font-size-medium2:24px;--font-size-large:28px;--font-weight-light:300;--font-weight-medium:400;--font-weight-medium2:500;--font-weight-large:600;--font-weight-large2:700;--font-weight-xl:800;--letter-spacing:0.003em;--size-value0:0px;--size-value1:4px;--size-value2:8px;--size-value3:12px;--size-value4:16px;--size-value5:20px;--size-value6:24px;--size-value7:28px;--size-value8:32px;--size-value9:36px;--size-value10:40px;--size-value11:44px;--size-value12:48px;--size-value13:52px;--size-value14:56px;--size-value15:60px;--size-value16:64px;--size-value17:68px;--size-value18:72px;--size-value19:76px;--size-value20:80px;--border-radius:6px;--border-frame:1px solid #e0e0e0;--border-focused-frame:1px solid var(--v-secondary-base);--shadow-focused-frame:0px 0px 0px 3px var(--v-secondary-lighten1);--popover-width:360px;--popover-max-height:464px;--popover-border-radius:10px;--modal-desktop-offset:-112px;--modal-bg-color:#ffffff;--modal-box-shadow:0px 7px 8px -4px rgba(0, 0, 0, 0.2),2px 13px 19px 2px rgba(0, 0, 0, 0.14),0px 5px 24px rgba(0, 0, 0, 0.12);--modal-border-radius:10px;--modal-width-small:384px;--modal-width-medium:576px;--modal-width-large:816px;--modal-width-x-large:972px;--avatar-x-sm:24px;--avatar-sm:32px;--avatar-md:40px;--avatar-lg:48px;--dropzone-active-border-color:#1e93b7;--dropzone-active-second-border-color:#95cddb;--gray-darken-5:#212121;--gray-darken-4:#616161;--gray-darken-3:#757575;--gray-darken-2:#999999;--gray-darken-1:#b3b3b3;--gray:#cccccc;--gray-lighten-1:#e0e0e0;--gray-lighten-2:#ededed;--gray-lighten-3:#f7f7f7;--gray-lighten-4:#fafafa;--neutral:#586E8C;--neutral-lighten-1:#D6DBE6;--neutral-lighten-2:#EAEDF2;--neutral-lighten-3:#F8F9FB;--red:#F2514A;--red-lighten-1:#F79792;--red-lighten-2:#FBCBC9;--red-lighten-3:#FDE8E7;--yellow:#FFC511;--yellow-lighten-1:#FFDC70;--yellow-lighten-2:#FFEDB8;--yellow-lighten-3:#FFF7E0;--green:#54D28C;--green-lighten-1:#98E4BA;--green-lighten-2:#CFF8E1;--green-lighten-3:#EAFCF2;--blue:#478FFF;--blue-lighten-1:#91BCFF;--blue-lighten-2:#C8DDFF;--blue-lighten-3:#E7F0FF;--orange:#FF8F00;--orange-lighten-1:#FCB965;--orange-lighten-2:#FAD9B0;--orange-lighten-3:#F9EBDA;--shadow-1:0px 1px 4px rgba(0, 0, 0, 0.11);--shadow-2:0px 2px 5px rgba(0, 0, 0, 0.1),0px 2px 2px rgba(0, 0, 0, 0.06),0px 3px 1px -2px rgba(0, 0, 0, 0.06);--shadow-3:0px 3px 2px rgba(0, 0, 0, 0.101961);--shadow-4:0px 1px 1px rgba(0, 0, 0, 0.06),0px 3px 8px rgba(0, 0, 0, 0.15);--shadow-5:0px 4px 18px rgba(0, 0, 0, 0.1);--shadow-6:0px 1px 10px rgba(0, 0, 0, 0.12),0px 4px 7px rgba(0, 0, 0, 0.14),0px 2px 4px -1px rgba(0, 0, 0, 0.2);--shadow-7:0px 3px 5px -1px rgba(0, 0, 0, 0.2),0px 6px 10px rgba(0, 0, 0, 0.14),0px 1px 18px rgba(0, 0, 0, 0.12);--shadow-8:0px 5px 7px 3px rgba(0, 0, 0, 0.26);--shadow-9:0px 7px 8px -4px rgba(0, 0, 0, 0.2),2px 13px 19px 2px rgba(0, 0, 0, 0.14),0px 5px 24px rgba(0, 0, 0, 0.12);--shadow-10:0px 4px 8px #cccccc}.stepper-content-wrapper[data-v-627561f4]{height:100%;width:100%;padding-bottom:var(--size-value6)}.layout-content[data-v-627561f4]{padding:var(--size-value0) var(--size-value4)}@media screen and (min-width:960px){.layout-content[data-v-627561f4]{padding:revert;padding-block-start:var(--size-value3)}}.stepper-header[data-v-627561f4]{flex:0;margin-block-end:var(--size-value4);padding:var(--size-value0)}@media screen and (min-width:960px){.stepper-header[data-v-627561f4]{padding:revert;flex:revert;padding-block-start:var(--size-value3)}}.stepper-header .content-stepper-title[data-v-627561f4]{letter-spacing:.01em;font-size:var(--font-size-medium);font-weight:var(--font-weight-large);line-height:var(--size-value8);color:var(--gray-darken-5)}@media screen and (min-width:960px){.stepper-header .content-stepper-title[data-v-627561f4]{font-size:var(--font-size-medium2)}}.stepper-header .content-stepper-description[data-v-627561f4]{font-size:var(--font-size-x-small);line-height:var(--size-value5);color:var(--gray-darken-4)}.vc-stepper-content.v-stepper[data-v-627561f4]{width:100%;box-shadow:none;height:100%;overflow:auto}.vc-stepper-content.v-stepper[data-v-627561f4] .v-stepper__items .v-stepper__content{padding:0}",
|
|
6935
6939
|
map: undefined,
|
|
6936
6940
|
media: undefined
|
|
6937
6941
|
});
|
|
@@ -6939,10 +6943,10 @@ var __vue_inject_styles__$7 = function __vue_inject_styles__(inject) {
|
|
|
6939
6943
|
/* scoped */
|
|
6940
6944
|
|
|
6941
6945
|
|
|
6942
|
-
var __vue_scope_id__$7 = "data-v-
|
|
6946
|
+
var __vue_scope_id__$7 = "data-v-627561f4";
|
|
6943
6947
|
/* module identifier */
|
|
6944
6948
|
|
|
6945
|
-
var __vue_module_identifier__$7 = "data-v-
|
|
6949
|
+
var __vue_module_identifier__$7 = "data-v-627561f4";
|
|
6946
6950
|
/* functional template */
|
|
6947
6951
|
|
|
6948
6952
|
var __vue_is_functional_template__$7 = false;
|
|
@@ -7121,8 +7125,8 @@ var __vue_staticRenderFns__$6 = [];
|
|
|
7121
7125
|
|
|
7122
7126
|
var __vue_inject_styles__$6 = function __vue_inject_styles__(inject) {
|
|
7123
7127
|
if (!inject) return;
|
|
7124
|
-
inject("data-v-
|
|
7125
|
-
source: "[data-v-
|
|
7128
|
+
inject("data-v-c5a0a58e_0", {
|
|
7129
|
+
source: "[data-v-c5a0a58e]:root{--primary-font-family:Montserrat;--font-size-xxx-small:9px;--font-size-xx-small:12px;--font-size-x-small:13px;--font-size-small:14px;--font-size-small2:15px;--font-size-small3:17px;--font-size-medium:18px;--font-size-medium1:22px;--font-size-medium2:24px;--font-size-large:28px;--font-weight-light:300;--font-weight-medium:400;--font-weight-medium2:500;--font-weight-large:600;--font-weight-large2:700;--font-weight-xl:800;--letter-spacing:0.003em;--size-value0:0px;--size-value1:4px;--size-value2:8px;--size-value3:12px;--size-value4:16px;--size-value5:20px;--size-value6:24px;--size-value7:28px;--size-value8:32px;--size-value9:36px;--size-value10:40px;--size-value11:44px;--size-value12:48px;--size-value13:52px;--size-value14:56px;--size-value15:60px;--size-value16:64px;--size-value17:68px;--size-value18:72px;--size-value19:76px;--size-value20:80px;--border-radius:6px;--border-frame:1px solid #e0e0e0;--border-focused-frame:1px solid var(--v-secondary-base);--shadow-focused-frame:0px 0px 0px 3px var(--v-secondary-lighten1);--popover-width:360px;--popover-max-height:464px;--popover-border-radius:10px;--modal-desktop-offset:-112px;--modal-bg-color:#ffffff;--modal-box-shadow:0px 7px 8px -4px rgba(0, 0, 0, 0.2),2px 13px 19px 2px rgba(0, 0, 0, 0.14),0px 5px 24px rgba(0, 0, 0, 0.12);--modal-border-radius:10px;--modal-width-small:384px;--modal-width-medium:576px;--modal-width-large:816px;--modal-width-x-large:972px;--avatar-x-sm:24px;--avatar-sm:32px;--avatar-md:40px;--avatar-lg:48px;--dropzone-active-border-color:#1e93b7;--dropzone-active-second-border-color:#95cddb;--gray-darken-5:#212121;--gray-darken-4:#616161;--gray-darken-3:#757575;--gray-darken-2:#999999;--gray-darken-1:#b3b3b3;--gray:#cccccc;--gray-lighten-1:#e0e0e0;--gray-lighten-2:#ededed;--gray-lighten-3:#f7f7f7;--gray-lighten-4:#fafafa;--neutral:#586E8C;--neutral-lighten-1:#D6DBE6;--neutral-lighten-2:#EAEDF2;--neutral-lighten-3:#F8F9FB;--red:#F2514A;--red-lighten-1:#F79792;--red-lighten-2:#FBCBC9;--red-lighten-3:#FDE8E7;--yellow:#FFC511;--yellow-lighten-1:#FFDC70;--yellow-lighten-2:#FFEDB8;--yellow-lighten-3:#FFF7E0;--green:#54D28C;--green-lighten-1:#98E4BA;--green-lighten-2:#CFF8E1;--green-lighten-3:#EAFCF2;--blue:#478FFF;--blue-lighten-1:#91BCFF;--blue-lighten-2:#C8DDFF;--blue-lighten-3:#E7F0FF;--orange:#FF8F00;--orange-lighten-1:#FCB965;--orange-lighten-2:#FAD9B0;--orange-lighten-3:#F9EBDA;--shadow-1:0px 1px 4px rgba(0, 0, 0, 0.11);--shadow-2:0px 2px 5px rgba(0, 0, 0, 0.1),0px 2px 2px rgba(0, 0, 0, 0.06),0px 3px 1px -2px rgba(0, 0, 0, 0.06);--shadow-3:0px 3px 2px rgba(0, 0, 0, 0.101961);--shadow-4:0px 1px 1px rgba(0, 0, 0, 0.06),0px 3px 8px rgba(0, 0, 0, 0.15);--shadow-5:0px 4px 18px rgba(0, 0, 0, 0.1);--shadow-6:0px 1px 10px rgba(0, 0, 0, 0.12),0px 4px 7px rgba(0, 0, 0, 0.14),0px 2px 4px -1px rgba(0, 0, 0, 0.2);--shadow-7:0px 3px 5px -1px rgba(0, 0, 0, 0.2),0px 6px 10px rgba(0, 0, 0, 0.14),0px 1px 18px rgba(0, 0, 0, 0.12);--shadow-8:0px 5px 7px 3px rgba(0, 0, 0, 0.26);--shadow-9:0px 7px 8px -4px rgba(0, 0, 0, 0.2),2px 13px 19px 2px rgba(0, 0, 0, 0.14),0px 5px 24px rgba(0, 0, 0, 0.12);--shadow-10:0px 4px 8px #cccccc}.vc-wizard[data-v-c5a0a58e]{height:100%}@media screen and (min-width:960px){.vc-wizard[data-v-c5a0a58e]{display:grid;grid-template-columns:minmax(250px,1fr) 3fr;grid-template-rows:1fr 80px;grid-row-gap:0}.vc-wizard.wizard-size-md[data-v-c5a0a58e]{grid-column-gap:var(--size-value10);padding-inline-end:var(--size-value10)}.vc-wizard.wizard-size-lg[data-v-c5a0a58e]{grid-column-gap:var(--size-value20);padding-inline-end:var(--size-value20)}}.vc-stepper-container[data-v-c5a0a58e]{grid-area:1/1/3/2;border-inline-end:1px solid #e0e0e0;max-height:calc(100% - 24px)}.wizard-cta-container[data-v-c5a0a58e]{grid-area:2/2/3/3}.stepper-content-wrapper[data-v-c5a0a58e]{grid-area:1/2/2/3}",
|
|
7126
7130
|
map: undefined,
|
|
7127
7131
|
media: undefined
|
|
7128
7132
|
});
|
|
@@ -7130,10 +7134,10 @@ var __vue_inject_styles__$6 = function __vue_inject_styles__(inject) {
|
|
|
7130
7134
|
/* scoped */
|
|
7131
7135
|
|
|
7132
7136
|
|
|
7133
|
-
var __vue_scope_id__$6 = "data-v-
|
|
7137
|
+
var __vue_scope_id__$6 = "data-v-c5a0a58e";
|
|
7134
7138
|
/* module identifier */
|
|
7135
7139
|
|
|
7136
|
-
var __vue_module_identifier__$6 = "data-v-
|
|
7140
|
+
var __vue_module_identifier__$6 = "data-v-c5a0a58e";
|
|
7137
7141
|
/* functional template */
|
|
7138
7142
|
|
|
7139
7143
|
var __vue_is_functional_template__$6 = false;
|
|
@@ -7609,6 +7613,10 @@ var __vue_component__$3 = /*#__PURE__*/normalizeComponent({
|
|
|
7609
7613
|
},
|
|
7610
7614
|
tooltipProps: {
|
|
7611
7615
|
type: Object
|
|
7616
|
+
},
|
|
7617
|
+
dataQa: {
|
|
7618
|
+
type: String,
|
|
7619
|
+
default: ''
|
|
7612
7620
|
}
|
|
7613
7621
|
}
|
|
7614
7622
|
};/* script */
|
|
@@ -7639,7 +7647,7 @@ var __vue_render__$2 = function __vue_render__() {
|
|
|
7639
7647
|
return [_c('span', {
|
|
7640
7648
|
staticClass: "label-container",
|
|
7641
7649
|
attrs: {
|
|
7642
|
-
"data-qa": "radio-" + _vm.value
|
|
7650
|
+
"data-qa": _vm.dataQa || "radio-" + _vm.value
|
|
7643
7651
|
}
|
|
7644
7652
|
}, [_vm.icon ? _c('vc-icon', {
|
|
7645
7653
|
staticClass: "radio-icon"
|
|
@@ -7648,8 +7656,15 @@ var __vue_render__$2 = function __vue_render__() {
|
|
|
7648
7656
|
staticClass: "radio-label"
|
|
7649
7657
|
}, [_vm._v("\n " + _vm._s(_vm.label) + "\n ")]) : _vm._e()];
|
|
7650
7658
|
}), _vm._v(" "), _vm.tooltipProps ? _c('vc-tooltip', _vm._b({
|
|
7651
|
-
staticClass: "radio-tooltip"
|
|
7652
|
-
|
|
7659
|
+
staticClass: "radio-tooltip",
|
|
7660
|
+
scopedSlots: _vm._u([{
|
|
7661
|
+
key: "content",
|
|
7662
|
+
fn: function fn() {
|
|
7663
|
+
return [_vm._t("tooltip-content")];
|
|
7664
|
+
},
|
|
7665
|
+
proxy: true
|
|
7666
|
+
}], null, true)
|
|
7667
|
+
}, 'vc-tooltip', _vm.tooltipProps, false)) : _vm._e()], 2)];
|
|
7653
7668
|
},
|
|
7654
7669
|
proxy: true
|
|
7655
7670
|
}], null, true)
|
|
@@ -7661,8 +7676,8 @@ var __vue_staticRenderFns__$2 = [];
|
|
|
7661
7676
|
|
|
7662
7677
|
var __vue_inject_styles__$2 = function __vue_inject_styles__(inject) {
|
|
7663
7678
|
if (!inject) return;
|
|
7664
|
-
inject("data-v-
|
|
7665
|
-
source: ".label-container[data-v-
|
|
7679
|
+
inject("data-v-729dbbdc_0", {
|
|
7680
|
+
source: ".label-container[data-v-729dbbdc]{margin-inline-start:var(--size-value2)}.radio-label[data-v-729dbbdc]{color:var(--gray-darken-5);font-weight:var(--font-weight-medium2);font-size:var(--font-size-x-small)}.radio-icon[data-v-729dbbdc]{margin-inline-start:var(--size-value2);font-size:var(--size-value4)}.radio-icon[data-v-729dbbdc] .v-icon__component{height:var(--size-value4);width:var(--size-value4)}.radio-tooltip[data-v-729dbbdc]{height:var(--size-value5);margin-inline-start:var(--size-value2)}.radio-tooltip[data-v-729dbbdc] .v-icon__component{width:var(--size-value4)}.vc-radio[data-v-729dbbdc]{margin:0;margin-bottom:auto}.vc-radio.v-input--radio-group--column[data-v-729dbbdc] .v-radio:not(:last-child):not(:only-child){margin-bottom:var(--size-value4)}.vc-radio[data-v-729dbbdc] .v-input--selection-controls__ripple{inset-inline-start:-9px;top:calc(50% - 17px);width:var(--size-value5);height:var(--size-value5)}.vc-radio[data-v-729dbbdc] .v-input--selection-controls__input{margin:0;padding:0;margin-bottom:auto;height:var(--size-value5);width:var(--size-value4)}.vc-radio[data-v-729dbbdc] .v-input--selection-controls__input .v-icon{font-size:var(--font-size-medium)}",
|
|
7666
7681
|
map: undefined,
|
|
7667
7682
|
media: undefined
|
|
7668
7683
|
});
|
|
@@ -7670,10 +7685,10 @@ var __vue_inject_styles__$2 = function __vue_inject_styles__(inject) {
|
|
|
7670
7685
|
/* scoped */
|
|
7671
7686
|
|
|
7672
7687
|
|
|
7673
|
-
var __vue_scope_id__$2 = "data-v-
|
|
7688
|
+
var __vue_scope_id__$2 = "data-v-729dbbdc";
|
|
7674
7689
|
/* module identifier */
|
|
7675
7690
|
|
|
7676
|
-
var __vue_module_identifier__$2 = "data-v-
|
|
7691
|
+
var __vue_module_identifier__$2 = "data-v-729dbbdc";
|
|
7677
7692
|
/* functional template */
|
|
7678
7693
|
|
|
7679
7694
|
var __vue_is_functional_template__$2 = false;
|
|
@@ -7730,7 +7745,7 @@ var __vue_render__$1 = function __vue_render__() {
|
|
|
7730
7745
|
attrs: {
|
|
7731
7746
|
"data-qa": _vm.dataQa
|
|
7732
7747
|
}
|
|
7733
|
-
}, [_vm.title ? _vm._ssrNode("<div class=\"vc-title\" data-v-
|
|
7748
|
+
}, [_vm.title ? _vm._ssrNode("<div class=\"vc-title\" data-v-0bf8cc5c>", "</div>", [_vm._t("title", function () {
|
|
7734
7749
|
return [_vm._v(_vm._s(_vm.title))];
|
|
7735
7750
|
})], 2) : _vm._e(), _vm._ssrNode(" "), _c('v-radio-group', {
|
|
7736
7751
|
staticClass: "vc-radio-buttons",
|
|
@@ -7753,7 +7768,7 @@ var __vue_render__$1 = function __vue_render__() {
|
|
|
7753
7768
|
},
|
|
7754
7769
|
proxy: true
|
|
7755
7770
|
}, {
|
|
7756
|
-
key: "content",
|
|
7771
|
+
key: "tooltip-content",
|
|
7757
7772
|
fn: function fn() {
|
|
7758
7773
|
return [_vm._t("tooltip-content-" + item.value)];
|
|
7759
7774
|
},
|
|
@@ -7768,8 +7783,8 @@ var __vue_staticRenderFns__$1 = [];
|
|
|
7768
7783
|
|
|
7769
7784
|
var __vue_inject_styles__$1 = function __vue_inject_styles__(inject) {
|
|
7770
7785
|
if (!inject) return;
|
|
7771
|
-
inject("data-v-
|
|
7772
|
-
source: ".vc-radio-buttons[data-v-
|
|
7786
|
+
inject("data-v-0bf8cc5c_0", {
|
|
7787
|
+
source: ".vc-radio-buttons[data-v-0bf8cc5c]{margin:0;padding:0}.vc-radio-buttons.v-input--radio-group--column[data-v-0bf8cc5c] .v-radio:not(:last-child):not(:only-child){margin-bottom:var(--size-value4)}.vc-title[data-v-0bf8cc5c]{color:var(--gray-darken-5);margin-bottom:var(--size-value2);font-weight:var(--font-weight-large);font-size:var(--size-value3);line-height:var(--size-value4)}",
|
|
7773
7788
|
map: undefined,
|
|
7774
7789
|
media: undefined
|
|
7775
7790
|
});
|
|
@@ -7777,10 +7792,10 @@ var __vue_inject_styles__$1 = function __vue_inject_styles__(inject) {
|
|
|
7777
7792
|
/* scoped */
|
|
7778
7793
|
|
|
7779
7794
|
|
|
7780
|
-
var __vue_scope_id__$1 = "data-v-
|
|
7795
|
+
var __vue_scope_id__$1 = "data-v-0bf8cc5c";
|
|
7781
7796
|
/* module identifier */
|
|
7782
7797
|
|
|
7783
|
-
var __vue_module_identifier__$1 = "data-v-
|
|
7798
|
+
var __vue_module_identifier__$1 = "data-v-0bf8cc5c";
|
|
7784
7799
|
/* functional template */
|
|
7785
7800
|
|
|
7786
7801
|
var __vue_is_functional_template__$1 = false;
|
package/package.json
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
:value="value"
|
|
7
7
|
>
|
|
8
8
|
<template v-slot:label>
|
|
9
|
-
<span :data-qa="`radio-${value}`" class="label-container">
|
|
9
|
+
<span :data-qa="dataQa || `radio-${value}`" class="label-container">
|
|
10
10
|
<vc-icon
|
|
11
11
|
v-if="icon" class="radio-icon">
|
|
12
12
|
{{icon}}
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
v-if="tooltipProps"
|
|
23
23
|
v-bind="tooltipProps"
|
|
24
24
|
>
|
|
25
|
-
<template
|
|
25
|
+
<template v-slot:content>
|
|
26
26
|
<slot name="tooltip-content"/>
|
|
27
27
|
</template>
|
|
28
28
|
</vc-tooltip>
|
|
@@ -56,7 +56,12 @@ export default {
|
|
|
56
56
|
},
|
|
57
57
|
tooltipProps: {
|
|
58
58
|
type: Object,
|
|
59
|
-
}
|
|
59
|
+
},
|
|
60
|
+
dataQa: {
|
|
61
|
+
type: String,
|
|
62
|
+
default: '',
|
|
63
|
+
},
|
|
64
|
+
|
|
60
65
|
},
|
|
61
66
|
}
|
|
62
67
|
</script>
|
|
@@ -22,6 +22,7 @@ const generalItems = [
|
|
|
22
22
|
label: "i have icon an :D",
|
|
23
23
|
value: "icon",
|
|
24
24
|
icon: '$close_button',
|
|
25
|
+
dataQa: 'custom-data-qa'
|
|
25
26
|
},
|
|
26
27
|
{
|
|
27
28
|
label: "i have a tooltip",
|
|
@@ -120,5 +121,21 @@ describe("VcRadioGroup.vue", () => {
|
|
|
120
121
|
})
|
|
121
122
|
expect(emitted().change.length).toBe(1)
|
|
122
123
|
});
|
|
124
|
+
it("passing custom data qa prop transfers to radio", async () => {
|
|
125
|
+
// Queries: https://testing-library.com/docs/queries/about#types-of-queries
|
|
126
|
+
const {container, getByTestId } = renderWithVuetify(VcRadioGroup, {
|
|
127
|
+
props: {
|
|
128
|
+
dataQa: 'vc-radio-group',
|
|
129
|
+
items: generalItems,
|
|
130
|
+
value: 'all_of_em'
|
|
131
|
+
}
|
|
132
|
+
})
|
|
133
|
+
|
|
134
|
+
// Expect options: https://github.com/testing-library/jest-dom
|
|
135
|
+
expect(container).toHaveAttribute('data-app', 'true');
|
|
136
|
+
|
|
137
|
+
const customDataQaEl = getByTestId('custom-data-qa');
|
|
138
|
+
expect(customDataQaEl).toBeInTheDocument();
|
|
139
|
+
});
|
|
123
140
|
|
|
124
141
|
});
|
|
@@ -25,6 +25,7 @@ const generalItems = [
|
|
|
25
25
|
},
|
|
26
26
|
{
|
|
27
27
|
value: "custom",
|
|
28
|
+
dataQa: 'custom-data-qa'
|
|
28
29
|
},
|
|
29
30
|
{
|
|
30
31
|
label: "i'm literally all of the above",
|
|
@@ -56,7 +57,9 @@ const GeneralTemplate = (args, {argTypes}) => ({
|
|
|
56
57
|
<template v-slot:label-custom>
|
|
57
58
|
custom label! using slots :D
|
|
58
59
|
</template>
|
|
59
|
-
|
|
60
|
+
<template v-slot:tooltip-content-all_of_em>
|
|
61
|
+
custom tolltip content
|
|
62
|
+
</template>
|
|
60
63
|
</VcRadioGroup>
|
|
61
64
|
</div>`,
|
|
62
65
|
})
|
|
@@ -24,9 +24,9 @@
|
|
|
24
24
|
|
|
25
25
|
<div v-if="dark"
|
|
26
26
|
:data-qa="`${dataQa}-dark-content`"
|
|
27
|
-
class="dark-tooltip"
|
|
28
|
-
|
|
29
|
-
|
|
27
|
+
class="dark-tooltip">
|
|
28
|
+
<span class="inner-content" v-if="header || content" v-html="`${header} ${content}`" />
|
|
29
|
+
<slot name="content"> </slot>
|
|
30
30
|
</div>
|
|
31
31
|
|
|
32
32
|
<div v-else class="tooltip-wrapper"
|
|
@@ -37,8 +37,8 @@
|
|
|
37
37
|
{{ header }}
|
|
38
38
|
</div>
|
|
39
39
|
<div class="tooltip-content">
|
|
40
|
-
<div class="content-text"
|
|
41
|
-
|
|
40
|
+
<div class="content-text">
|
|
41
|
+
<span v-if="content" class="inner-content" v-html="content"/>
|
|
42
42
|
<slot name="content"></slot>
|
|
43
43
|
</div>
|
|
44
44
|
</div>
|
|
@@ -160,6 +160,8 @@ export default {
|
|
|
160
160
|
}
|
|
161
161
|
}
|
|
162
162
|
}
|
|
163
|
-
|
|
163
|
+
.inner-content {
|
|
164
|
+
display: contents;
|
|
165
|
+
}
|
|
164
166
|
}
|
|
165
167
|
</style>
|
|
@@ -127,18 +127,17 @@ export default {
|
|
|
127
127
|
@include md-and-up {
|
|
128
128
|
padding: revert;
|
|
129
129
|
padding-block-start: var(--size-value3);
|
|
130
|
-
padding-inline: var(--size-value10);
|
|
131
130
|
}
|
|
132
131
|
}
|
|
133
132
|
.stepper-header {
|
|
134
133
|
flex: 0;
|
|
135
134
|
margin-block-end: var(--size-value4);
|
|
136
|
-
padding: var(--size-value0)
|
|
135
|
+
padding: var(--size-value0);
|
|
136
|
+
|
|
137
137
|
@include md-and-up {
|
|
138
138
|
padding: revert;
|
|
139
139
|
flex: revert;
|
|
140
140
|
padding-block-start: var(--size-value3);
|
|
141
|
-
padding-inline: var(--size-value10);
|
|
142
141
|
}
|
|
143
142
|
.content-stepper- {
|
|
144
143
|
&title {
|
|
@@ -140,9 +140,11 @@ export default {
|
|
|
140
140
|
&.wizard-size {
|
|
141
141
|
&-md {
|
|
142
142
|
grid-column-gap: var(--size-value10);
|
|
143
|
+
padding-inline-end: var(--size-value10);
|
|
143
144
|
}
|
|
144
145
|
&-lg {
|
|
145
146
|
grid-column-gap: var(--size-value20);
|
|
147
|
+
padding-inline-end: var(--size-value20);
|
|
146
148
|
}
|
|
147
149
|
}
|
|
148
150
|
}
|
|
@@ -20,7 +20,7 @@ const GeneralTemplate = (args, {argTypes}) => ({
|
|
|
20
20
|
<br/>
|
|
21
21
|
<br/>
|
|
22
22
|
<VcWizardCtaContainer
|
|
23
|
-
style="border: solid 1px black;
|
|
23
|
+
style="border: solid 1px black;"
|
|
24
24
|
:isBackDisplayed="isBackDisplayed"
|
|
25
25
|
:isNextButtonDisabled="isNextButtonDisabled"
|
|
26
26
|
:backButtonLabel="backButtonLabel"
|
|
@@ -75,9 +75,11 @@ export default {
|
|
|
75
75
|
@include md-and-up {
|
|
76
76
|
border-top: revert;
|
|
77
77
|
position: static;
|
|
78
|
-
padding: var(--size-value5);
|
|
79
78
|
width: 100%;
|
|
80
79
|
transform: revert;
|
|
80
|
+
height: var(--size-value20);
|
|
81
|
+
max-height: var(--size-value20);
|
|
82
|
+
padding-bottom: var(--size-value6);
|
|
81
83
|
}
|
|
82
84
|
}
|
|
83
85
|
.wizard-cta-button {
|