@abgov/react-components 3.4.0-beta.31 → 3.4.0-beta.32
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/experimental/experimental/form/form.row.d.ts +2 -0
- package/experimental/experimental/form/index.d.ts +2 -0
- package/experimental/experimental/form/validators.d.ts +10 -2
- package/experimental/react-components.esm.js +6 -6
- package/experimental/react-components.umd.js +6 -6
- package/lib/radio-group/radio-group.d.ts +1 -1
- package/lib/radio-group/radio.d.ts +2 -2
- package/package.json +1 -1
- package/react-components.esm.js +22 -22
- package/react-components.umd.js +22 -22
- package/lib/_common/errorState.d.ts +0 -5
|
@@ -1,2 +1,10 @@
|
|
|
1
|
-
export declare
|
|
2
|
-
export declare
|
|
1
|
+
export declare type FormValidatorFn = (val: string) => [boolean, string];
|
|
2
|
+
export declare class FormValidator {
|
|
3
|
+
private items;
|
|
4
|
+
constructor();
|
|
5
|
+
add(fieldName: string, validators: FormValidatorFn[]): void;
|
|
6
|
+
validate(data: Record<string, string>): Record<string, string>;
|
|
7
|
+
}
|
|
8
|
+
export declare const requiredFieldValidator: FormValidatorFn;
|
|
9
|
+
export declare const emailFormatValidator: FormValidatorFn;
|
|
10
|
+
export declare const phoneNumberFormatValidator: FormValidatorFn;
|
|
@@ -595,7 +595,7 @@ function GoAIconButton(_ref) {
|
|
|
595
595
|
}));
|
|
596
596
|
}
|
|
597
597
|
|
|
598
|
-
var css_248z$2 = ":root {\n /* font-size */\n --fs-xs: 0.75rem;\n --fs-sm: 0.875rem;\n --fs-base: 1.125rem;\n
|
|
598
|
+
var css_248z$2 = ":root {\n /* font-size */\n --fs-xs: 0.75rem;\n --fs-sm: 0.875rem;\n --fs-base: 1.125rem;\n --fs-lg: 1.25rem;\n --fs-xl: 1.5rem;\n --fs-2xl: 2.25rem;\n --fs-3xl: 3rem;\n /* font-weight */\n --fw-thin: 100;\n --fw-light: 300;\n --fw-regular: 400;\n --fw-medium: 500;\n --fw-bold: 700;\n --fw-black: 900;\n --input-padding: 0.5rem;\n --input-border-radius: 0.25rem;\n --input-font-size: var(--fs-base); }\n\n:root {\n --color-white: #fff;\n --color-black: #333;\n --color-gray-l5: #f1f1f1;\n --color-gray-l2: #adadad;\n --color-gray-l1: #dcdcdc;\n --color-gray-d1: #666;\n --color-gray-d3: #333;\n --color-orange: #feba35;\n --color-red: #ec040b;\n --color-green: hsl(148, 100%, 26%);\n --color-primary: #0070c4;\n --color-primary-d1: #004f84;\n --color-primary--hover: var(--color-primary-d1);\n --color-text: var(--color-gray-d3);\n --color-error: var(--color-red);\n --color-disabled: var(--color-gray-l2);\n --color-input-background: var(--color-white);\n --color-input-border: var(--color-gray-d1);\n --color-input-border--hover: var(--color-primary-d1);\n --color-input: var(--color-gray-d3);\n --color-input--focused: var(--color-orange);\n --color-button-primary: var(--color-primary);\n --color-button-primary--hover: var(--color-primary-d1);\n --color-button-tertiary: var(--color-gray-l2);\n --color-button-tertiary--hover: var(--color-gray-l5); }\n\n.goa-input {\n position: relative; }\n\n.goa-input-leading-icon {\n position: absolute;\n display: flex;\n align-items: center;\n top: 0;\n bottom: 0;\n left: 0.5rem; }\n\n.goa-input input {\n outline: none;\n transition: box-shadow 0.1s ease-in;\n border: 1px solid var(--color-input-border);\n border-radius: 3px;\n background: white;\n color: var(--color-input);\n padding: var(--input-padding);\n font-size: var(--input-font-size);\n display: block;\n width: 100%;\n line-height: 1.5rem;\n padding: 0.5rem 2rem 0.5rem 0.5rem; }\n .goa-input input:hover {\n border-color: var(--color-input-border--hover); }\n .goa-input input:active, .goa-input input:focus {\n box-shadow: 0 0 0 3px var(--color-input--focused); }\n .goa-input input:disabled {\n border-color: var(--color-disabled); }\n .goa-input input:disabled:hover {\n border-color: var(--color-disabled); }\n .goa-input input:disabled:focus {\n box-shadow: none; }\n\n.goa-input input:disabled {\n border-color: var(--color-disabled); }\n .goa-input input:disabled:hover {\n border-color: var(--color-disabled); }\n .goa-input input:disabled:focus {\n box-shadow: none; }\n\n.goa-input svg {\n width: 80%; }\n\n.goa-input .input--leading-icon {\n padding-left: 2rem; }\n\n.goa-state--error .goa-input input {\n border: 2px solid var(--color-error); }\n";
|
|
599
599
|
styleInject(css_248z$2);
|
|
600
600
|
|
|
601
601
|
var GoAInput = function GoAInput(_ref) {
|
|
@@ -625,7 +625,7 @@ var GoAInput = function GoAInput(_ref) {
|
|
|
625
625
|
}));
|
|
626
626
|
};
|
|
627
627
|
|
|
628
|
-
var css_248z$3 = ":root {\n /* font-size */\n --fs-xs: 0.75rem;\n --fs-sm: 0.875rem;\n --fs-base: 1.125rem;\n
|
|
628
|
+
var css_248z$3 = ":root {\n /* font-size */\n --fs-xs: 0.75rem;\n --fs-sm: 0.875rem;\n --fs-base: 1.125rem;\n --fs-lg: 1.25rem;\n --fs-xl: 1.5rem;\n --fs-2xl: 2.25rem;\n --fs-3xl: 3rem;\n /* font-weight */\n --fw-thin: 100;\n --fw-light: 300;\n --fw-regular: 400;\n --fw-medium: 500;\n --fw-bold: 700;\n --fw-black: 900;\n --input-padding: 0.5rem;\n --input-border-radius: 0.25rem;\n --input-font-size: var(--fs-base); }\n\n:root {\n --color-white: #fff;\n --color-black: #333;\n --color-gray-l5: #f1f1f1;\n --color-gray-l2: #adadad;\n --color-gray-l1: #dcdcdc;\n --color-gray-d1: #666;\n --color-gray-d3: #333;\n --color-orange: #feba35;\n --color-red: #ec040b;\n --color-green: hsl(148, 100%, 26%);\n --color-primary: #0070c4;\n --color-primary-d1: #004f84;\n --color-primary--hover: var(--color-primary-d1);\n --color-text: var(--color-gray-d3);\n --color-error: var(--color-red);\n --color-disabled: var(--color-gray-l2);\n --color-input-background: var(--color-white);\n --color-input-border: var(--color-gray-d1);\n --color-input-border--hover: var(--color-primary-d1);\n --color-input: var(--color-gray-d3);\n --color-input--focused: var(--color-orange);\n --color-button-primary: var(--color-primary);\n --color-button-primary--hover: var(--color-primary-d1);\n --color-button-tertiary: var(--color-gray-l2);\n --color-button-tertiary--hover: var(--color-gray-l5); }\n\n.goa-textarea {\n outline: none;\n transition: box-shadow 0.1s ease-in;\n border: 1px solid var(--color-input-border);\n border-radius: 3px;\n background: white;\n color: var(--color-input);\n padding: var(--input-padding);\n font-size: var(--input-font-size);\n display: block;\n width: 100%; }\n .goa-textarea:hover {\n border-color: var(--color-input-border--hover); }\n .goa-textarea:active, .goa-textarea:focus {\n box-shadow: 0 0 0 3px var(--color-input--focused); }\n .goa-textarea:disabled {\n border-color: var(--color-disabled); }\n .goa-textarea:disabled:hover {\n border-color: var(--color-disabled); }\n .goa-textarea:disabled:focus {\n box-shadow: none; }\n\n.goa-textarea:disabled {\n border-color: var(--color-disabled); }\n .goa-textarea:disabled:hover {\n border-color: var(--color-disabled); }\n .goa-textarea:disabled:focus {\n box-shadow: none; }\n\n.goa-state--error textarea,\n.goa-state--error textarea:hover {\n border: 2px solid var(--color-red); }\n";
|
|
629
629
|
styleInject(css_248z$3);
|
|
630
630
|
|
|
631
631
|
var GoATextArea = function GoATextArea(_ref) {
|
|
@@ -977,12 +977,12 @@ var GoAFormItem = function GoAFormItem(_ref) {
|
|
|
977
977
|
var children = _ref.children,
|
|
978
978
|
helpText = _ref.helpText,
|
|
979
979
|
error = _ref.error;
|
|
980
|
-
var className = error ? "goa-form-item error" : "goa-form-item";
|
|
980
|
+
var className = error ? "goa-form-item goa-state--error" : "goa-form-item";
|
|
981
981
|
return /*#__PURE__*/React.createElement("div", {
|
|
982
982
|
className: className
|
|
983
|
-
}, children, /*#__PURE__*/React.createElement("div", {
|
|
983
|
+
}, children, error && /*#__PURE__*/React.createElement("div", {
|
|
984
984
|
className: "error-msg"
|
|
985
|
-
}, error), helpText &&
|
|
985
|
+
}, error), helpText && /*#__PURE__*/React.createElement("div", {
|
|
986
986
|
id: "helpText",
|
|
987
987
|
className: "help-msg"
|
|
988
988
|
}, helpText));
|
|
@@ -997,7 +997,7 @@ var GoAFormActions = function GoAFormActions(_ref) {
|
|
|
997
997
|
}, children);
|
|
998
998
|
};
|
|
999
999
|
|
|
1000
|
-
var css_248z$7 = "/*
|
|
1000
|
+
var css_248z$7 = ":root {\n --color-white: #fff;\n --color-black: #333;\n --color-gray-l5: #f1f1f1;\n --color-gray-l2: #adadad;\n --color-gray-l1: #dcdcdc;\n --color-gray-d1: #666;\n --color-gray-d3: #333;\n --color-orange: #feba35;\n --color-red: #ec040b;\n --color-green: hsl(148, 100%, 26%);\n --color-primary: #0070c4;\n --color-primary-d1: #004f84;\n --color-primary--hover: var(--color-primary-d1);\n --color-text: var(--color-gray-d3);\n --color-error: var(--color-red);\n --color-disabled: var(--color-gray-l2);\n --color-input-background: var(--color-white);\n --color-input-border: var(--color-gray-d1);\n --color-input-border--hover: var(--color-primary-d1);\n --color-input: var(--color-gray-d3);\n --color-input--focused: var(--color-orange);\n --color-button-primary: var(--color-primary);\n --color-button-primary--hover: var(--color-primary-d1);\n --color-button-tertiary: var(--color-gray-l2);\n --color-button-tertiary--hover: var(--color-gray-l5); }\n\n:root {\n /* font-size */\n --fs-xs: 0.75rem;\n --fs-sm: 0.875rem;\n --fs-base: 1.125rem;\n --fs-lg: 1.25rem;\n --fs-xl: 1.5rem;\n --fs-2xl: 2.25rem;\n --fs-3xl: 3rem;\n /* font-weight */\n --fw-thin: 100;\n --fw-light: 300;\n --fw-regular: 400;\n --fw-medium: 500;\n --fw-bold: 700;\n --fw-black: 900;\n --input-padding: 0.5rem;\n --input-border-radius: 0.25rem;\n --input-font-size: var(--fs-base); }\n\n.goa-form {\n box-sizing: border-box; }\n\n.goa-form *,\n.goa-form *:before,\n.goa-form *:after {\n box-sizing: inherit; }\n\n.goa-form-row {\n display: flex;\n flex-direction: column;\n justify-content: space-between; }\n\n@media screen and (min-width: 640px) {\n .goa-form-row {\n gap: 1.75rem;\n flex-direction: row; } }\n\n.goa-form-item {\n flex: 1 1 auto;\n margin-bottom: 1rem; }\n .goa-form-item label {\n display: block;\n font-weight: bold;\n color: #333;\n font-size: var(--fs-base);\n line-height: calc(var(--fs-base) + 1rem); }\n .goa-form-item label em {\n color: var(--color-gray-d1);\n font-style: normal;\n font-weight: var(--fw-regular);\n font-size: var(--fs-sm); }\n .goa-form-item input,\n .goa-form-item textarea {\n display: block;\n width: 100%;\n font-size: var(--fs-base); }\n .goa-form-item.goa-state--error .error-msg {\n font-size: var(--fs-sm);\n line-height: calc(var(--fs-sm) + 0.5rem);\n color: var(--color-red); }\n\n.help-msg {\n font-size: var(--fs-sm);\n color: var(--color-gray-d3);\n line-height: calc(var(--fs-sm) + 0.5rem); }\n\n.goa-form-actions {\n display: flex;\n flex-wrap: wrap;\n margin-top: 2rem; }\n .goa-form-actions button,\n .goa-form-actions .goa-link-button {\n margin: 0; }\n @media (max-width: 639px) {\n .goa-form-actions button,\n .goa-form-actions .goa-link-button {\n width: 100%; }\n .goa-form-actions button + button,\n .goa-form-actions button + .goa-link-button,\n .goa-form-actions .goa-link-button + button,\n .goa-form-actions .goa-link-button + .goa-link-button {\n margin-top: 0.5rem; } }\n @media (min-width: 640px) {\n .goa-form-actions button,\n .goa-form-actions .goa-link-button {\n min-width: 6rem; }\n .goa-form-actions button + button,\n .goa-form-actions button + .goa-link-button,\n .goa-form-actions .goa-link-button + button,\n .goa-form-actions .goa-link-button + .goa-link-button {\n margin-left: 0.5rem; } }\n\n.goa-form-actions--left {\n justify-content: flex-start; }\n\n.goa-form-actions--right {\n justify-content: flex-end; }\n";
|
|
1001
1001
|
styleInject(css_248z$7);
|
|
1002
1002
|
|
|
1003
1003
|
var GoAForm = function GoAForm(_ref) {
|
|
@@ -601,7 +601,7 @@
|
|
|
601
601
|
}));
|
|
602
602
|
}
|
|
603
603
|
|
|
604
|
-
var css_248z$2 = ":root {\n /* font-size */\n --fs-xs: 0.75rem;\n --fs-sm: 0.875rem;\n --fs-base: 1.125rem;\n
|
|
604
|
+
var css_248z$2 = ":root {\n /* font-size */\n --fs-xs: 0.75rem;\n --fs-sm: 0.875rem;\n --fs-base: 1.125rem;\n --fs-lg: 1.25rem;\n --fs-xl: 1.5rem;\n --fs-2xl: 2.25rem;\n --fs-3xl: 3rem;\n /* font-weight */\n --fw-thin: 100;\n --fw-light: 300;\n --fw-regular: 400;\n --fw-medium: 500;\n --fw-bold: 700;\n --fw-black: 900;\n --input-padding: 0.5rem;\n --input-border-radius: 0.25rem;\n --input-font-size: var(--fs-base); }\n\n:root {\n --color-white: #fff;\n --color-black: #333;\n --color-gray-l5: #f1f1f1;\n --color-gray-l2: #adadad;\n --color-gray-l1: #dcdcdc;\n --color-gray-d1: #666;\n --color-gray-d3: #333;\n --color-orange: #feba35;\n --color-red: #ec040b;\n --color-green: hsl(148, 100%, 26%);\n --color-primary: #0070c4;\n --color-primary-d1: #004f84;\n --color-primary--hover: var(--color-primary-d1);\n --color-text: var(--color-gray-d3);\n --color-error: var(--color-red);\n --color-disabled: var(--color-gray-l2);\n --color-input-background: var(--color-white);\n --color-input-border: var(--color-gray-d1);\n --color-input-border--hover: var(--color-primary-d1);\n --color-input: var(--color-gray-d3);\n --color-input--focused: var(--color-orange);\n --color-button-primary: var(--color-primary);\n --color-button-primary--hover: var(--color-primary-d1);\n --color-button-tertiary: var(--color-gray-l2);\n --color-button-tertiary--hover: var(--color-gray-l5); }\n\n.goa-input {\n position: relative; }\n\n.goa-input-leading-icon {\n position: absolute;\n display: flex;\n align-items: center;\n top: 0;\n bottom: 0;\n left: 0.5rem; }\n\n.goa-input input {\n outline: none;\n transition: box-shadow 0.1s ease-in;\n border: 1px solid var(--color-input-border);\n border-radius: 3px;\n background: white;\n color: var(--color-input);\n padding: var(--input-padding);\n font-size: var(--input-font-size);\n display: block;\n width: 100%;\n line-height: 1.5rem;\n padding: 0.5rem 2rem 0.5rem 0.5rem; }\n .goa-input input:hover {\n border-color: var(--color-input-border--hover); }\n .goa-input input:active, .goa-input input:focus {\n box-shadow: 0 0 0 3px var(--color-input--focused); }\n .goa-input input:disabled {\n border-color: var(--color-disabled); }\n .goa-input input:disabled:hover {\n border-color: var(--color-disabled); }\n .goa-input input:disabled:focus {\n box-shadow: none; }\n\n.goa-input input:disabled {\n border-color: var(--color-disabled); }\n .goa-input input:disabled:hover {\n border-color: var(--color-disabled); }\n .goa-input input:disabled:focus {\n box-shadow: none; }\n\n.goa-input svg {\n width: 80%; }\n\n.goa-input .input--leading-icon {\n padding-left: 2rem; }\n\n.goa-state--error .goa-input input {\n border: 2px solid var(--color-error); }\n";
|
|
605
605
|
styleInject(css_248z$2);
|
|
606
606
|
|
|
607
607
|
var GoAInput = function GoAInput(_ref) {
|
|
@@ -631,7 +631,7 @@
|
|
|
631
631
|
}));
|
|
632
632
|
};
|
|
633
633
|
|
|
634
|
-
var css_248z$3 = ":root {\n /* font-size */\n --fs-xs: 0.75rem;\n --fs-sm: 0.875rem;\n --fs-base: 1.125rem;\n
|
|
634
|
+
var css_248z$3 = ":root {\n /* font-size */\n --fs-xs: 0.75rem;\n --fs-sm: 0.875rem;\n --fs-base: 1.125rem;\n --fs-lg: 1.25rem;\n --fs-xl: 1.5rem;\n --fs-2xl: 2.25rem;\n --fs-3xl: 3rem;\n /* font-weight */\n --fw-thin: 100;\n --fw-light: 300;\n --fw-regular: 400;\n --fw-medium: 500;\n --fw-bold: 700;\n --fw-black: 900;\n --input-padding: 0.5rem;\n --input-border-radius: 0.25rem;\n --input-font-size: var(--fs-base); }\n\n:root {\n --color-white: #fff;\n --color-black: #333;\n --color-gray-l5: #f1f1f1;\n --color-gray-l2: #adadad;\n --color-gray-l1: #dcdcdc;\n --color-gray-d1: #666;\n --color-gray-d3: #333;\n --color-orange: #feba35;\n --color-red: #ec040b;\n --color-green: hsl(148, 100%, 26%);\n --color-primary: #0070c4;\n --color-primary-d1: #004f84;\n --color-primary--hover: var(--color-primary-d1);\n --color-text: var(--color-gray-d3);\n --color-error: var(--color-red);\n --color-disabled: var(--color-gray-l2);\n --color-input-background: var(--color-white);\n --color-input-border: var(--color-gray-d1);\n --color-input-border--hover: var(--color-primary-d1);\n --color-input: var(--color-gray-d3);\n --color-input--focused: var(--color-orange);\n --color-button-primary: var(--color-primary);\n --color-button-primary--hover: var(--color-primary-d1);\n --color-button-tertiary: var(--color-gray-l2);\n --color-button-tertiary--hover: var(--color-gray-l5); }\n\n.goa-textarea {\n outline: none;\n transition: box-shadow 0.1s ease-in;\n border: 1px solid var(--color-input-border);\n border-radius: 3px;\n background: white;\n color: var(--color-input);\n padding: var(--input-padding);\n font-size: var(--input-font-size);\n display: block;\n width: 100%; }\n .goa-textarea:hover {\n border-color: var(--color-input-border--hover); }\n .goa-textarea:active, .goa-textarea:focus {\n box-shadow: 0 0 0 3px var(--color-input--focused); }\n .goa-textarea:disabled {\n border-color: var(--color-disabled); }\n .goa-textarea:disabled:hover {\n border-color: var(--color-disabled); }\n .goa-textarea:disabled:focus {\n box-shadow: none; }\n\n.goa-textarea:disabled {\n border-color: var(--color-disabled); }\n .goa-textarea:disabled:hover {\n border-color: var(--color-disabled); }\n .goa-textarea:disabled:focus {\n box-shadow: none; }\n\n.goa-state--error textarea,\n.goa-state--error textarea:hover {\n border: 2px solid var(--color-red); }\n";
|
|
635
635
|
styleInject(css_248z$3);
|
|
636
636
|
|
|
637
637
|
var GoATextArea = function GoATextArea(_ref) {
|
|
@@ -983,12 +983,12 @@
|
|
|
983
983
|
var children = _ref.children,
|
|
984
984
|
helpText = _ref.helpText,
|
|
985
985
|
error = _ref.error;
|
|
986
|
-
var className = error ? "goa-form-item error" : "goa-form-item";
|
|
986
|
+
var className = error ? "goa-form-item goa-state--error" : "goa-form-item";
|
|
987
987
|
return /*#__PURE__*/React__default.createElement("div", {
|
|
988
988
|
className: className
|
|
989
|
-
}, children, /*#__PURE__*/React__default.createElement("div", {
|
|
989
|
+
}, children, error && /*#__PURE__*/React__default.createElement("div", {
|
|
990
990
|
className: "error-msg"
|
|
991
|
-
}, error), helpText &&
|
|
991
|
+
}, error), helpText && /*#__PURE__*/React__default.createElement("div", {
|
|
992
992
|
id: "helpText",
|
|
993
993
|
className: "help-msg"
|
|
994
994
|
}, helpText));
|
|
@@ -1003,7 +1003,7 @@
|
|
|
1003
1003
|
}, children);
|
|
1004
1004
|
};
|
|
1005
1005
|
|
|
1006
|
-
var css_248z$7 = "/*
|
|
1006
|
+
var css_248z$7 = ":root {\n --color-white: #fff;\n --color-black: #333;\n --color-gray-l5: #f1f1f1;\n --color-gray-l2: #adadad;\n --color-gray-l1: #dcdcdc;\n --color-gray-d1: #666;\n --color-gray-d3: #333;\n --color-orange: #feba35;\n --color-red: #ec040b;\n --color-green: hsl(148, 100%, 26%);\n --color-primary: #0070c4;\n --color-primary-d1: #004f84;\n --color-primary--hover: var(--color-primary-d1);\n --color-text: var(--color-gray-d3);\n --color-error: var(--color-red);\n --color-disabled: var(--color-gray-l2);\n --color-input-background: var(--color-white);\n --color-input-border: var(--color-gray-d1);\n --color-input-border--hover: var(--color-primary-d1);\n --color-input: var(--color-gray-d3);\n --color-input--focused: var(--color-orange);\n --color-button-primary: var(--color-primary);\n --color-button-primary--hover: var(--color-primary-d1);\n --color-button-tertiary: var(--color-gray-l2);\n --color-button-tertiary--hover: var(--color-gray-l5); }\n\n:root {\n /* font-size */\n --fs-xs: 0.75rem;\n --fs-sm: 0.875rem;\n --fs-base: 1.125rem;\n --fs-lg: 1.25rem;\n --fs-xl: 1.5rem;\n --fs-2xl: 2.25rem;\n --fs-3xl: 3rem;\n /* font-weight */\n --fw-thin: 100;\n --fw-light: 300;\n --fw-regular: 400;\n --fw-medium: 500;\n --fw-bold: 700;\n --fw-black: 900;\n --input-padding: 0.5rem;\n --input-border-radius: 0.25rem;\n --input-font-size: var(--fs-base); }\n\n.goa-form {\n box-sizing: border-box; }\n\n.goa-form *,\n.goa-form *:before,\n.goa-form *:after {\n box-sizing: inherit; }\n\n.goa-form-row {\n display: flex;\n flex-direction: column;\n justify-content: space-between; }\n\n@media screen and (min-width: 640px) {\n .goa-form-row {\n gap: 1.75rem;\n flex-direction: row; } }\n\n.goa-form-item {\n flex: 1 1 auto;\n margin-bottom: 1rem; }\n .goa-form-item label {\n display: block;\n font-weight: bold;\n color: #333;\n font-size: var(--fs-base);\n line-height: calc(var(--fs-base) + 1rem); }\n .goa-form-item label em {\n color: var(--color-gray-d1);\n font-style: normal;\n font-weight: var(--fw-regular);\n font-size: var(--fs-sm); }\n .goa-form-item input,\n .goa-form-item textarea {\n display: block;\n width: 100%;\n font-size: var(--fs-base); }\n .goa-form-item.goa-state--error .error-msg {\n font-size: var(--fs-sm);\n line-height: calc(var(--fs-sm) + 0.5rem);\n color: var(--color-red); }\n\n.help-msg {\n font-size: var(--fs-sm);\n color: var(--color-gray-d3);\n line-height: calc(var(--fs-sm) + 0.5rem); }\n\n.goa-form-actions {\n display: flex;\n flex-wrap: wrap;\n margin-top: 2rem; }\n .goa-form-actions button,\n .goa-form-actions .goa-link-button {\n margin: 0; }\n @media (max-width: 639px) {\n .goa-form-actions button,\n .goa-form-actions .goa-link-button {\n width: 100%; }\n .goa-form-actions button + button,\n .goa-form-actions button + .goa-link-button,\n .goa-form-actions .goa-link-button + button,\n .goa-form-actions .goa-link-button + .goa-link-button {\n margin-top: 0.5rem; } }\n @media (min-width: 640px) {\n .goa-form-actions button,\n .goa-form-actions .goa-link-button {\n min-width: 6rem; }\n .goa-form-actions button + button,\n .goa-form-actions button + .goa-link-button,\n .goa-form-actions .goa-link-button + button,\n .goa-form-actions .goa-link-button + .goa-link-button {\n margin-left: 0.5rem; } }\n\n.goa-form-actions--left {\n justify-content: flex-start; }\n\n.goa-form-actions--right {\n justify-content: flex-end; }\n";
|
|
1007
1007
|
styleInject(css_248z$7);
|
|
1008
1008
|
|
|
1009
1009
|
var GoAForm = function GoAForm(_ref) {
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import { FC } from 'react';
|
|
2
2
|
import './radio.scss';
|
|
3
|
-
import { ErrorProps } from '../_common/errorState';
|
|
4
3
|
import { TestProps } from '../../experimental/common';
|
|
5
4
|
interface Props {
|
|
6
5
|
value: string;
|
|
6
|
+
label?: string;
|
|
7
7
|
name?: string;
|
|
8
8
|
disabled?: boolean;
|
|
9
9
|
checked?: boolean;
|
|
10
10
|
onChange?: (value: string) => void;
|
|
11
11
|
}
|
|
12
|
-
export declare const GoARadio: FC<Props &
|
|
12
|
+
export declare const GoARadio: FC<Props & TestProps>;
|
|
13
13
|
export default GoARadio;
|
package/package.json
CHANGED
package/react-components.esm.js
CHANGED
|
@@ -28,7 +28,7 @@ function styleInject(css, ref) {
|
|
|
28
28
|
}
|
|
29
29
|
}
|
|
30
30
|
|
|
31
|
-
var css_248z = ":root {\n --color-white: #fff;\n --color-black: #333;\n --color-gray-l5: #f1f1f1;\n --color-gray-l2: #adadad;\n --color-gray-l1: #dcdcdc;\n --color-gray-d1: #666;\n --color-gray-d3: #333;\n --color-orange: #feba35;\n --color-red:
|
|
31
|
+
var css_248z = ":root {\n --color-white: #fff;\n --color-black: #333;\n --color-gray-l5: #f1f1f1;\n --color-gray-l2: #adadad;\n --color-gray-l1: #dcdcdc;\n --color-gray-d1: #666;\n --color-gray-d3: #333;\n --color-orange: #feba35;\n --color-red: #ec040b;\n --color-green: hsl(148, 100%, 26%);\n --color-primary: #0070c4;\n --color-primary-d1: #004f84;\n --color-primary--hover: var(--color-primary-d1);\n --color-text: var(--color-gray-d3);\n --color-error: var(--color-red);\n --color-disabled: var(--color-gray-l2);\n --color-input-background: var(--color-white);\n --color-input-border: var(--color-gray-d1);\n --color-input-border--hover: var(--color-primary-d1);\n --color-input: var(--color-gray-d3);\n --color-input--focused: var(--color-orange);\n --color-button-primary: var(--color-primary);\n --color-button-primary--hover: var(--color-primary-d1);\n --color-button-tertiary: var(--color-gray-l2);\n --color-button-tertiary--hover: var(--color-gray-l5); }\n\n:root {\n /* font-size */\n --fs-xs: 0.75rem;\n --fs-sm: 0.875rem;\n --fs-base: 1.125rem;\n --fs-lg: 1.25rem;\n --fs-xl: 1.5rem;\n --fs-2xl: 2.25rem;\n --fs-3xl: 3rem;\n /* font-weight */\n --fw-thin: 100;\n --fw-light: 300;\n --fw-regular: 400;\n --fw-medium: 500;\n --fw-bold: 700;\n --fw-black: 900;\n --input-padding: 0.5rem;\n --input-border-radius: 0.25rem;\n --input-font-size: var(--fs-base); }\n\nbody,\ninput,\nbutton,\ntextarea {\n background: #fff;\n font-family: acumin-pro-semi-condensed, sans-serif;\n font-weight: 400;\n font-size: var(--fs-base);\n color: #333; }\n\nbody {\n margin: 0; }\n\n*,\n*:before,\n*:after {\n box-sizing: border-box; }\n\np {\n margin: 0;\n margin-bottom: 1rem; }\n\nhr {\n border-width: 0;\n border-top: 1px solid #ccc;\n padding: 0;\n margin: 0; }\n\nem {\n font-size: var(--fs-xs);\n color: var(--color-gray-l1); }\n\nul,\nol {\n padding-left: 0; }\n\nli > ul,\nli > ol,\nli > ul,\nli > ol {\n padding-left: 0;\n margin-top: 0; }\n\na {\n color: var(--color-primary);\n cursor: pointer; }\n\na:hover {\n color: var(--color-primary--hover); }\n\na:focus {\n outline-width: thin;\n outline-style: solid;\n outline-color: var(--color-primary-d1);\n outline-offset: 0px; }\n\n::-moz-placeholder {\n /* Chrome, Firefox, Opera, Safari 10.1+ */\n color: #999;\n opacity: 1;\n /* Firefox */ }\n\n:-ms-input-placeholder {\n /* Chrome, Firefox, Opera, Safari 10.1+ */\n color: #999;\n opacity: 1;\n /* Firefox */ }\n\n::placeholder {\n /* Chrome, Firefox, Opera, Safari 10.1+ */\n color: #999;\n opacity: 1;\n /* Firefox */ }\n\n:-ms-input-placeholder {\n /* Internet Explorer 10-11 */\n color: #999; }\n\n::-ms-input-placeholder {\n /* Microsoft Edge */\n color: #999; }\n";
|
|
32
32
|
styleInject(css_248z);
|
|
33
33
|
|
|
34
34
|
var css_248z$1 = "/* typekit ***/\n/* This style is from the alberta design system */\n@import url(\"https://p.typekit.net/p.css?s=1&k=nur5yta&ht=tk&f=26036.26037.26044.26046.26047&a=14638192&app=typekit&e=css\");\n@font-face {\n font-family: 'acumin-pro-semi-condensed';\n src: url(\"https://use.typekit.net/af/3f7b4d/00000000000000003b9acb2d/27/l?subset_id=1&fvd=n4&v=3\") format(\"woff2\"), url(\"https://use.typekit.net/af/3f7b4d/00000000000000003b9acb2d/27/d?subset_id=1&fvd=n4&v=3\") format(\"woff\"), url(\"https://use.typekit.net/af/3f7b4d/00000000000000003b9acb2d/27/a?subset_id=1&fvd=n4&v=3\") format(\"opentype\");\n font-style: normal;\n font-weight: 400; }\n\n@font-face {\n font-family: 'acumin-pro-semi-condensed';\n src: url(\"https://use.typekit.net/af/761912/00000000000000003b9acb2e/27/l?subset_id=1&fvd=i4&v=3\") format(\"woff2\"), url(\"https://use.typekit.net/af/761912/00000000000000003b9acb2e/27/d?subset_id=1&fvd=i4&v=3\") format(\"woff\"), url(\"https://use.typekit.net/af/761912/00000000000000003b9acb2e/27/a?subset_id=1&fvd=i4&v=3\") format(\"opentype\");\n font-style: italic;\n font-weight: 400; }\n\n@font-face {\n font-family: 'acumin-pro-semi-condensed';\n src: url(\"https://use.typekit.net/af/ee7f3d/00000000000000003b9acb33/27/l?subset_id=1&fvd=n7&v=3\") format(\"woff2\"), url(\"https://use.typekit.net/af/ee7f3d/00000000000000003b9acb33/27/d?subset_id=1&fvd=n7&v=3\") format(\"woff\"), url(\"https://use.typekit.net/af/ee7f3d/00000000000000003b9acb33/27/a?subset_id=1&fvd=n7&v=3\") format(\"opentype\");\n font-style: normal;\n font-weight: 700; }\n\n@font-face {\n font-family: 'acumin-pro-semi-condensed';\n src: url(\"https://use.typekit.net/af/503f80/00000000000000003b9acb34/27/l?subset_id=1&fvd=i7&v=3\") format(\"woff2\"), url(\"https://use.typekit.net/af/503f80/00000000000000003b9acb34/27/d?subset_id=1&fvd=i7&v=3\") format(\"woff\"), url(\"https://use.typekit.net/af/503f80/00000000000000003b9acb34/27/a?subset_id=1&fvd=i7&v=3\") format(\"opentype\");\n font-style: italic;\n font-weight: 700; }\n\n@font-face {\n font-family: 'acumin-pro-semi-condensed';\n src: url(\"https://use.typekit.net/af/e60e87/00000000000000003b9acb31/27/l?subset_id=1&fvd=n6&v=3\") format(\"woff2\"), url(\"https://use.typekit.net/af/e60e87/00000000000000003b9acb31/27/d?subset_id=1&fvd=n6&v=3\") format(\"woff\"), url(\"https://use.typekit.net/af/e60e87/00000000000000003b9acb31/27/a?subset_id=1&fvd=n6&v=3\") format(\"opentype\");\n font-style: normal;\n font-weight: 600; }\n";
|
|
@@ -2061,10 +2061,10 @@ function getSize(size) {
|
|
|
2061
2061
|
}
|
|
2062
2062
|
}
|
|
2063
2063
|
|
|
2064
|
-
var css_248z$d = ":root {\n /* font-size */\n --fs-xs: 0.75rem;\n --fs-sm: 0.875rem;\n --fs-base: 1.125rem;\n
|
|
2064
|
+
var css_248z$d = ":root {\n /* font-size */\n --fs-xs: 0.75rem;\n --fs-sm: 0.875rem;\n --fs-base: 1.125rem;\n --fs-lg: 1.25rem;\n --fs-xl: 1.5rem;\n --fs-2xl: 2.25rem;\n --fs-3xl: 3rem;\n /* font-weight */\n --fw-thin: 100;\n --fw-light: 300;\n --fw-regular: 400;\n --fw-medium: 500;\n --fw-bold: 700;\n --fw-black: 900;\n --input-padding: 0.5rem;\n --input-border-radius: 0.25rem;\n --input-font-size: var(--fs-base); }\n\n:root {\n --color-white: #fff;\n --color-black: #333;\n --color-gray-l5: #f1f1f1;\n --color-gray-l2: #adadad;\n --color-gray-l1: #dcdcdc;\n --color-gray-d1: #666;\n --color-gray-d3: #333;\n --color-orange: #feba35;\n --color-red: #ec040b;\n --color-green: hsl(148, 100%, 26%);\n --color-primary: #0070c4;\n --color-primary-d1: #004f84;\n --color-primary--hover: var(--color-primary-d1);\n --color-text: var(--color-gray-d3);\n --color-error: var(--color-red);\n --color-disabled: var(--color-gray-l2);\n --color-input-background: var(--color-white);\n --color-input-border: var(--color-gray-d1);\n --color-input-border--hover: var(--color-primary-d1);\n --color-input: var(--color-gray-d3);\n --color-input--focused: var(--color-orange);\n --color-button-primary: var(--color-primary);\n --color-button-primary--hover: var(--color-primary-d1);\n --color-button-tertiary: var(--color-gray-l2);\n --color-button-tertiary--hover: var(--color-gray-l5); }\n\n.goa-input {\n position: relative; }\n\n.goa-input-leading-icon {\n position: absolute;\n display: flex;\n align-items: center;\n top: 0;\n bottom: 0;\n left: 0.5rem; }\n\n.goa-input input {\n outline: none;\n transition: box-shadow 0.1s ease-in;\n border: 1px solid var(--color-input-border);\n border-radius: 3px;\n background: white;\n color: var(--color-input);\n padding: var(--input-padding);\n font-size: var(--input-font-size);\n display: block;\n width: 100%;\n line-height: 1.5rem;\n padding: 0.5rem 2rem 0.5rem 0.5rem; }\n .goa-input input:hover {\n border-color: var(--color-input-border--hover); }\n .goa-input input:active, .goa-input input:focus {\n box-shadow: 0 0 0 3px var(--color-input--focused); }\n .goa-input input:disabled {\n border-color: var(--color-disabled); }\n .goa-input input:disabled:hover {\n border-color: var(--color-disabled); }\n .goa-input input:disabled:focus {\n box-shadow: none; }\n\n.goa-input input:disabled {\n border-color: var(--color-disabled); }\n .goa-input input:disabled:hover {\n border-color: var(--color-disabled); }\n .goa-input input:disabled:focus {\n box-shadow: none; }\n\n.goa-input svg {\n width: 80%; }\n\n.goa-input .input--leading-icon {\n padding-left: 2rem; }\n\n.goa-state--error .goa-input input {\n border: 2px solid var(--color-error); }\n";
|
|
2065
2065
|
styleInject(css_248z$d);
|
|
2066
2066
|
|
|
2067
|
-
var css_248z$e = ":root {\n /* font-size */\n --fs-xs: 0.75rem;\n --fs-sm: 0.875rem;\n --fs-base: 1.125rem;\n
|
|
2067
|
+
var css_248z$e = ":root {\n /* font-size */\n --fs-xs: 0.75rem;\n --fs-sm: 0.875rem;\n --fs-base: 1.125rem;\n --fs-lg: 1.25rem;\n --fs-xl: 1.5rem;\n --fs-2xl: 2.25rem;\n --fs-3xl: 3rem;\n /* font-weight */\n --fw-thin: 100;\n --fw-light: 300;\n --fw-regular: 400;\n --fw-medium: 500;\n --fw-bold: 700;\n --fw-black: 900;\n --input-padding: 0.5rem;\n --input-border-radius: 0.25rem;\n --input-font-size: var(--fs-base); }\n\n:root {\n --color-white: #fff;\n --color-black: #333;\n --color-gray-l5: #f1f1f1;\n --color-gray-l2: #adadad;\n --color-gray-l1: #dcdcdc;\n --color-gray-d1: #666;\n --color-gray-d3: #333;\n --color-orange: #feba35;\n --color-red: #ec040b;\n --color-green: hsl(148, 100%, 26%);\n --color-primary: #0070c4;\n --color-primary-d1: #004f84;\n --color-primary--hover: var(--color-primary-d1);\n --color-text: var(--color-gray-d3);\n --color-error: var(--color-red);\n --color-disabled: var(--color-gray-l2);\n --color-input-background: var(--color-white);\n --color-input-border: var(--color-gray-d1);\n --color-input-border--hover: var(--color-primary-d1);\n --color-input: var(--color-gray-d3);\n --color-input--focused: var(--color-orange);\n --color-button-primary: var(--color-primary);\n --color-button-primary--hover: var(--color-primary-d1);\n --color-button-tertiary: var(--color-gray-l2);\n --color-button-tertiary--hover: var(--color-gray-l5); }\n\n.goa-textarea {\n outline: none;\n transition: box-shadow 0.1s ease-in;\n border: 1px solid var(--color-input-border);\n border-radius: 3px;\n background: white;\n color: var(--color-input);\n padding: var(--input-padding);\n font-size: var(--input-font-size);\n display: block;\n width: 100%; }\n .goa-textarea:hover {\n border-color: var(--color-input-border--hover); }\n .goa-textarea:active, .goa-textarea:focus {\n box-shadow: 0 0 0 3px var(--color-input--focused); }\n .goa-textarea:disabled {\n border-color: var(--color-disabled); }\n .goa-textarea:disabled:hover {\n border-color: var(--color-disabled); }\n .goa-textarea:disabled:focus {\n box-shadow: none; }\n\n.goa-textarea:disabled {\n border-color: var(--color-disabled); }\n .goa-textarea:disabled:hover {\n border-color: var(--color-disabled); }\n .goa-textarea:disabled:focus {\n box-shadow: none; }\n\n.goa-state--error textarea,\n.goa-state--error textarea:hover {\n border: 2px solid var(--color-red); }\n";
|
|
2068
2068
|
styleInject(css_248z$e);
|
|
2069
2069
|
|
|
2070
2070
|
var css_248z$f = ".goa-scrollable {\n overflow: hidden;\n height: 100%;\n}\n\n.goa-scrollable > div::-webkit-scrollbar {\n width: 6px;\n}\n\n.goa-scrollable > div::-webkit-scrollbar-track {\n background: #f1f1f1;\n}\n\n.goa-scrollable > div::-webkit-scrollbar-thumb {\n background: #888;\n}\n\n.goa-scrollable > div::-webkit-scrollbar-thumb:hover {\n background: #555;\n}\n";
|
|
@@ -2098,10 +2098,10 @@ styleInject(css_248z$g);
|
|
|
2098
2098
|
var css_248z$h = "/* Root ============================================================================== */\n\n.modal-root {\n position: fixed;\n top: 0;\n left: 0;\n bottom: 0;\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n}\n\n/* Modal ============================================================================== */\n\n.modal {\n position: relative;\n background: #fff;\n z-index: 1002;\n box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.2);\n border-radius: 4px;\n}\n\n@media (max-width: 639px) {\n .modal {\n width: 90%;\n max-height: 90%;\n }\n}\n\n@media (min-width: 640px) {\n .modal {\n margin: 1rem;\n max-height: 80%;\n width: 600px;\n }\n}\n@media (min-width: 1024px) {\n .modal {\n width: 65ch;\n }\n}\n\n/* Modal Content ============================================================================== */\n\n.modal-content {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n\n/* Modal Actions ============================================================================== */\n\n.modal-actions {\n text-align: right;\n margin: 1.5rem;\n}\n\n@media (max-width: 639px) {\n .modal-actions button + button {\n margin-top: 0.5rem;\n }\n .modal-actions button {\n display: block;\n width: 100%;\n }\n}\n\n@media (min-width: 640px) {\n .modal-actions > button {\n margin-right: 0;\n }\n .modal-actions > button + button {\n margin-left: 0.5rem;\n }\n}\n\n/* Modal Title ============================================================================ */\n\n.modal-title {\n font-size: var(--fs-xl);\n padding: 1rem 1.5rem;\n margin-right: 40px; /* close icon spacing */\n}\n\n/* Modal Background ======================================================================= */\n\n.modal-background {\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, 0.5);\n z-index: 1001;\n}\n\n/* Modal Close Icon ======================================================================= */\n\n.modal-close {\n position: absolute;\n top: 0.5rem;\n right: 0.5rem;\n}\n";
|
|
2099
2099
|
styleInject(css_248z$h);
|
|
2100
2100
|
|
|
2101
|
-
var css_248z$i = "/*
|
|
2101
|
+
var css_248z$i = ":root {\n --color-white: #fff;\n --color-black: #333;\n --color-gray-l5: #f1f1f1;\n --color-gray-l2: #adadad;\n --color-gray-l1: #dcdcdc;\n --color-gray-d1: #666;\n --color-gray-d3: #333;\n --color-orange: #feba35;\n --color-red: #ec040b;\n --color-green: hsl(148, 100%, 26%);\n --color-primary: #0070c4;\n --color-primary-d1: #004f84;\n --color-primary--hover: var(--color-primary-d1);\n --color-text: var(--color-gray-d3);\n --color-error: var(--color-red);\n --color-disabled: var(--color-gray-l2);\n --color-input-background: var(--color-white);\n --color-input-border: var(--color-gray-d1);\n --color-input-border--hover: var(--color-primary-d1);\n --color-input: var(--color-gray-d3);\n --color-input--focused: var(--color-orange);\n --color-button-primary: var(--color-primary);\n --color-button-primary--hover: var(--color-primary-d1);\n --color-button-tertiary: var(--color-gray-l2);\n --color-button-tertiary--hover: var(--color-gray-l5); }\n\n:root {\n /* font-size */\n --fs-xs: 0.75rem;\n --fs-sm: 0.875rem;\n --fs-base: 1.125rem;\n --fs-lg: 1.25rem;\n --fs-xl: 1.5rem;\n --fs-2xl: 2.25rem;\n --fs-3xl: 3rem;\n /* font-weight */\n --fw-thin: 100;\n --fw-light: 300;\n --fw-regular: 400;\n --fw-medium: 500;\n --fw-bold: 700;\n --fw-black: 900;\n --input-padding: 0.5rem;\n --input-border-radius: 0.25rem;\n --input-font-size: var(--fs-base); }\n\n.goa-form {\n box-sizing: border-box; }\n\n.goa-form *,\n.goa-form *:before,\n.goa-form *:after {\n box-sizing: inherit; }\n\n.goa-form-row {\n display: flex;\n flex-direction: column;\n justify-content: space-between; }\n\n@media screen and (min-width: 640px) {\n .goa-form-row {\n gap: 1.75rem;\n flex-direction: row; } }\n\n.goa-form-item {\n flex: 1 1 auto;\n margin-bottom: 1rem; }\n .goa-form-item label {\n display: block;\n font-weight: bold;\n color: #333;\n font-size: var(--fs-base);\n line-height: calc(var(--fs-base) + 1rem); }\n .goa-form-item label em {\n color: var(--color-gray-d1);\n font-style: normal;\n font-weight: var(--fw-regular);\n font-size: var(--fs-sm); }\n .goa-form-item input,\n .goa-form-item textarea {\n display: block;\n width: 100%;\n font-size: var(--fs-base); }\n .goa-form-item.goa-state--error .error-msg {\n font-size: var(--fs-sm);\n line-height: calc(var(--fs-sm) + 0.5rem);\n color: var(--color-red); }\n\n.help-msg {\n font-size: var(--fs-sm);\n color: var(--color-gray-d3);\n line-height: calc(var(--fs-sm) + 0.5rem); }\n\n.goa-form-actions {\n display: flex;\n flex-wrap: wrap;\n margin-top: 2rem; }\n .goa-form-actions button,\n .goa-form-actions .goa-link-button {\n margin: 0; }\n @media (max-width: 639px) {\n .goa-form-actions button,\n .goa-form-actions .goa-link-button {\n width: 100%; }\n .goa-form-actions button + button,\n .goa-form-actions button + .goa-link-button,\n .goa-form-actions .goa-link-button + button,\n .goa-form-actions .goa-link-button + .goa-link-button {\n margin-top: 0.5rem; } }\n @media (min-width: 640px) {\n .goa-form-actions button,\n .goa-form-actions .goa-link-button {\n min-width: 6rem; }\n .goa-form-actions button + button,\n .goa-form-actions button + .goa-link-button,\n .goa-form-actions .goa-link-button + button,\n .goa-form-actions .goa-link-button + .goa-link-button {\n margin-left: 0.5rem; } }\n\n.goa-form-actions--left {\n justify-content: flex-start; }\n\n.goa-form-actions--right {\n justify-content: flex-end; }\n";
|
|
2102
2102
|
styleInject(css_248z$i);
|
|
2103
2103
|
|
|
2104
|
-
var css_248z$j = ":root {\n --color-white: #fff;\n --color-black: #333;\n --color-gray-l5: #f1f1f1;\n --color-gray-l2: #adadad;\n --color-gray-l1: #dcdcdc;\n --color-gray-d1: #666;\n --color-gray-d3: #333;\n --color-orange: #feba35;\n --color-red:
|
|
2104
|
+
var css_248z$j = ":root {\n --color-white: #fff;\n --color-black: #333;\n --color-gray-l5: #f1f1f1;\n --color-gray-l2: #adadad;\n --color-gray-l1: #dcdcdc;\n --color-gray-d1: #666;\n --color-gray-d3: #333;\n --color-orange: #feba35;\n --color-red: #ec040b;\n --color-green: hsl(148, 100%, 26%);\n --color-primary: #0070c4;\n --color-primary-d1: #004f84;\n --color-primary--hover: var(--color-primary-d1);\n --color-text: var(--color-gray-d3);\n --color-error: var(--color-red);\n --color-disabled: var(--color-gray-l2);\n --color-input-background: var(--color-white);\n --color-input-border: var(--color-gray-d1);\n --color-input-border--hover: var(--color-primary-d1);\n --color-input: var(--color-gray-d3);\n --color-input--focused: var(--color-orange);\n --color-button-primary: var(--color-primary);\n --color-button-primary--hover: var(--color-primary-d1);\n --color-button-tertiary: var(--color-gray-l2);\n --color-button-tertiary--hover: var(--color-gray-l5); }\n\n:root {\n /* font-size */\n --fs-xs: 0.75rem;\n --fs-sm: 0.875rem;\n --fs-base: 1.125rem;\n --fs-lg: 1.25rem;\n --fs-xl: 1.5rem;\n --fs-2xl: 2.25rem;\n --fs-3xl: 3rem;\n /* font-weight */\n --fw-thin: 100;\n --fw-light: 300;\n --fw-regular: 400;\n --fw-medium: 500;\n --fw-bold: 700;\n --fw-black: 900;\n --input-padding: 0.5rem;\n --input-border-radius: 0.25rem;\n --input-font-size: var(--fs-base); }\n\n.goa-dropdown-box {\n --color-selected-bg--hover: var(--color-gray-l5);\n --color-selected-text--hover: var(--color-gray-d1);\n position: relative; }\n\n.goa-dropdown-background {\n position: fixed;\n inset: 0;\n opacity: 1; }\n\n.goa-dropdown-input {\n outline: none;\n transition: box-shadow 0.1s ease-in;\n border: 1px solid var(--color-input-border);\n border-radius: 3px;\n background: white;\n color: var(--color-input);\n padding: var(--input-padding);\n font-size: var(--input-font-size);\n display: flex;\n align-items: center;\n justify-content: space-between;\n cursor: pointer; }\n .goa-dropdown-input:hover {\n border-color: var(--color-input-border--hover); }\n .goa-dropdown-input:active, .goa-dropdown-input:focus {\n box-shadow: 0 0 0 3px var(--color-input--focused); }\n .goa-dropdown-input:disabled {\n border-color: var(--color-disabled); }\n .goa-dropdown-input:disabled:hover {\n border-color: var(--color-disabled); }\n .goa-dropdown-input:disabled:focus {\n box-shadow: none; }\n .goa-dropdown-input input {\n line-height: 1.5rem;\n padding: 0;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none; }\n .goa-dropdown-input input,\n .goa-dropdown-input input:hover,\n .goa-dropdown-input input:focus {\n box-shadow: none; }\n\n.goa-dropdown-input--disabled {\n opacity: 0.5;\n cursor: default; }\n .goa-dropdown-input--disabled:hover, .goa-dropdown-input--disabled:focus {\n cursor: default;\n box-shadow: none; }\n\n.goa-dropdown-leading-icon svg {\n width: 80%; }\n\n.goa-dropdown-input input {\n flex: 1 1 auto;\n border: none;\n outline: none;\n cursor: pointer; }\n .goa-dropdown-input input ::-moz-placeholder {\n text-overflow: ellipsis; }\n .goa-dropdown-input input :-ms-input-placeholder {\n text-overflow: ellipsis; }\n .goa-dropdown-input input ::placeholder {\n text-overflow: ellipsis; }\n\n.goa-icon ~ input {\n padding-left: 0.5rem; }\n\n.goa-dropdown-input--disabled input {\n cursor: default; }\n\n.goa-dropdown-list {\n position: absolute;\n left: 0;\n right: 0;\n margin: 0;\n padding: 0;\n list-style-type: none;\n background: var(--color-input-background);\n border-bottom-left-radius: var(--input-border-radius);\n border-bottom-right-radius: var(--input-border-radius);\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n z-index: 99; }\n\n.goa-dropdown-list hr {\n border: none;\n border-top: 1px solid var(--color-gray-l5);\n margin: 0; }\n\n.goa-dropdown-list label {\n font-size: var(--fs-sm);\n font-weight: var(--fw-bold);\n padding-left: 0.5rem; }\n\n.goa-dropdown-option {\n margin: 0;\n padding: 0.5rem;\n cursor: pointer;\n color: var(--color-input); }\n .goa-dropdown-option:hover {\n background: var(--color-selected-bg--hover);\n color: var(--color-primary-d1); }\n\n.goa-dropdown-option--disabled {\n opacity: 0.5;\n cursor: default; }\n .goa-dropdown-option--disabled:hover {\n cursor: default;\n color: var(--color-selected-text--hover); }\n\n.goa-dropdown-option--selected {\n background: var(--color-primary);\n color: var(--color-white); }\n .goa-dropdown-option--selected:hover {\n background: var(--color-primary-d1);\n color: var(--color-white); }\n\n.dropdown-group-content .goa-dropdown-option {\n padding-left: 1.5rem; }\n\n.goa-state--error .goa-dropdown-input {\n border: 2px solid var(--color-error); }\n";
|
|
2105
2105
|
styleInject(css_248z$j);
|
|
2106
2106
|
|
|
2107
2107
|
var GoADropdownOption = function GoADropdownOption(props) {
|
|
@@ -2119,7 +2119,11 @@ var GoADropdownOption = function GoADropdownOption(props) {
|
|
|
2119
2119
|
};
|
|
2120
2120
|
|
|
2121
2121
|
var MAX_HEIGHT = 300;
|
|
2122
|
-
var GoADropdown = function GoADropdown(
|
|
2122
|
+
var GoADropdown = function GoADropdown(_ref) {
|
|
2123
|
+
var _ref$selectedValues = _ref.selectedValues,
|
|
2124
|
+
selectedValues = _ref$selectedValues === void 0 ? [] : _ref$selectedValues,
|
|
2125
|
+
props = _objectWithoutProperties(_ref, ["selectedValues"]);
|
|
2126
|
+
|
|
2123
2127
|
var _useState = useState(false),
|
|
2124
2128
|
_useState2 = _slicedToArray(_useState, 2),
|
|
2125
2129
|
isMenuVisible = _useState2[0],
|
|
@@ -2144,7 +2148,7 @@ var GoADropdown = function GoADropdown(props) {
|
|
|
2144
2148
|
if (child.props.value) {
|
|
2145
2149
|
return React.cloneElement(child, _objectSpread2(_objectSpread2({}, child.props), {}, {
|
|
2146
2150
|
onClick: handleSelection,
|
|
2147
|
-
selected:
|
|
2151
|
+
selected: selectedValues.includes(child.props.value),
|
|
2148
2152
|
_testId: "".concat(props.name, "-dropdown-option--").concat(child.props.value)
|
|
2149
2153
|
}));
|
|
2150
2154
|
}
|
|
@@ -2161,12 +2165,12 @@ var GoADropdown = function GoADropdown(props) {
|
|
|
2161
2165
|
var values;
|
|
2162
2166
|
|
|
2163
2167
|
if (props.multiSelect) {
|
|
2164
|
-
if (
|
|
2165
|
-
values =
|
|
2168
|
+
if (selectedValues.includes(value)) {
|
|
2169
|
+
values = selectedValues.filter(function (v) {
|
|
2166
2170
|
return v !== value;
|
|
2167
2171
|
});
|
|
2168
2172
|
} else {
|
|
2169
|
-
values = [].concat(_toConsumableArray(
|
|
2173
|
+
values = [].concat(_toConsumableArray(selectedValues), [value]);
|
|
2170
2174
|
}
|
|
2171
2175
|
} else {
|
|
2172
2176
|
values = [value];
|
|
@@ -2200,7 +2204,7 @@ var GoADropdown = function GoADropdown(props) {
|
|
|
2200
2204
|
var selectedLabels = React.Children.map(props.children, function (child) {
|
|
2201
2205
|
return child;
|
|
2202
2206
|
}).filter(function (child) {
|
|
2203
|
-
return
|
|
2207
|
+
return selectedValues.includes(child.props.value);
|
|
2204
2208
|
}).map(function (child) {
|
|
2205
2209
|
return child.props.label;
|
|
2206
2210
|
});
|
|
@@ -2248,19 +2252,14 @@ var GoADropdown = function GoADropdown(props) {
|
|
|
2248
2252
|
}, bindChildren())));
|
|
2249
2253
|
};
|
|
2250
2254
|
|
|
2251
|
-
var css_248z$k = ":root {\n --color-white: #fff;\n --color-black: #333;\n --color-gray-l5: #f1f1f1;\n --color-gray-l2: #adadad;\n --color-gray-l1: #dcdcdc;\n --color-gray-d1: #666;\n --color-gray-d3: #333;\n --color-orange: #feba35;\n --color-red:
|
|
2255
|
+
var css_248z$k = ":root {\n --color-white: #fff;\n --color-black: #333;\n --color-gray-l5: #f1f1f1;\n --color-gray-l2: #adadad;\n --color-gray-l1: #dcdcdc;\n --color-gray-d1: #666;\n --color-gray-d3: #333;\n --color-orange: #feba35;\n --color-red: #ec040b;\n --color-green: hsl(148, 100%, 26%);\n --color-primary: #0070c4;\n --color-primary-d1: #004f84;\n --color-primary--hover: var(--color-primary-d1);\n --color-text: var(--color-gray-d3);\n --color-error: var(--color-red);\n --color-disabled: var(--color-gray-l2);\n --color-input-background: var(--color-white);\n --color-input-border: var(--color-gray-d1);\n --color-input-border--hover: var(--color-primary-d1);\n --color-input: var(--color-gray-d3);\n --color-input--focused: var(--color-orange);\n --color-button-primary: var(--color-primary);\n --color-button-primary--hover: var(--color-primary-d1);\n --color-button-tertiary: var(--color-gray-l2);\n --color-button-tertiary--hover: var(--color-gray-l5); }\n\n/* Radio Group */\n.goa-radio-group--horizontal {\n display: flex;\n flex-direction: row; }\n\n.goa-radio-group--vertical {\n display: inline-flex;\n flex-direction: column; }\n\n/* Radio */\nlabel.goa-radio {\n --goa-border-color: var(--color-input-border);\n --goa-border-color--checked: var(--color-primary);\n --goa-radio-color--error: var(--color-error);\n --goa-radio-outline-color: var(--color-input--focused);\n --goa-radio-outline-width: 3px;\n --goa-radio-diameter: 1.5rem;\n --goa-radio-border-width: 1px;\n --goa-radio-border-width--checked: 7px;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n min-height: 3rem; }\n\n.goa-radio:hover {\n cursor: pointer; }\n\n.goa-radio *,\n.goa-radio *:before,\n.goa-radio *:after {\n box-sizing: border-box; }\n\n.goa-radio input[type='radio'] {\n display: none; }\n\n.goa-radio-label {\n padding: 0.5rem 1.5rem 0.5rem 0.5rem; }\n\n.goa-radio-icon {\n display: inline-block;\n height: var(--goa-radio-diameter);\n width: var(--goa-radio-diameter);\n border-radius: 50%;\n transition: box-shadow 100ms ease-in-out; }\n\n.goa-radio:hover > input:not(:disabled) ~ .goa-radio-icon {\n box-shadow: 0 0 0 var(--goa-radio-outline-width) var(--goa-radio-outline-color); }\n\n.goa-radio--disabled:hover {\n cursor: default; }\n\n/* States */\n/* Checked */\ninput[type='radio']:checked ~ .goa-radio-icon {\n border: var(--goa-radio-border-width--checked) solid var(--goa-border-color--checked); }\n\n/* Not checked */\ninput[type='radio']:not(:checked) ~ .goa-radio-icon {\n border: var(--goa-radio-border-width) solid var(--goa-border-color); }\n\n/* Disabled */\ninput[type='radio']:disabled ~ .goa-radio-icon {\n border: var(--goa-radio-border-width) solid var(--goa-border-color);\n opacity: 0.3; }\n\n/* Disabled and checked */\ninput[type='radio']:disabled:checked ~ .goa-radio-icon {\n border: var(--goa-radio-border-width--checked) solid var(--goa-border-color--checked);\n opacity: 0.3; }\n\n/* Error */\n.goa-state--error input[type='radio']:checked ~ .goa-radio-icon {\n border: 7px solid var(--goa-radio-color--error); }\n\n.goa-state--error input[type='radio']:not(:checked) ~ .goa-radio-icon {\n border: 2px solid var(--goa-radio-color--error); }\n";
|
|
2252
2256
|
styleInject(css_248z$k);
|
|
2253
2257
|
|
|
2254
|
-
var GoARadio = function GoARadio(
|
|
2255
|
-
var _ref$state = _ref.state,
|
|
2256
|
-
state = _ref$state === void 0 ? 'valid' : _ref$state,
|
|
2257
|
-
props = _objectWithoutProperties(_ref, ["state"]);
|
|
2258
|
-
|
|
2258
|
+
var GoARadio = function GoARadio(props) {
|
|
2259
2259
|
function getCss() {
|
|
2260
2260
|
return classnames({
|
|
2261
2261
|
'goa-radio': true,
|
|
2262
|
-
'goa-radio--disabled': props.disabled
|
|
2263
|
-
'goa-error': state === 'error'
|
|
2262
|
+
'goa-radio--disabled': props.disabled
|
|
2264
2263
|
});
|
|
2265
2264
|
}
|
|
2266
2265
|
|
|
@@ -2281,14 +2280,15 @@ var GoARadio = function GoARadio(_ref) {
|
|
|
2281
2280
|
className: "goa-radio-icon"
|
|
2282
2281
|
}), /*#__PURE__*/React.createElement("span", {
|
|
2283
2282
|
className: "goa-radio-label"
|
|
2284
|
-
}, props.children));
|
|
2283
|
+
}, props.children || props.label));
|
|
2285
2284
|
};
|
|
2286
2285
|
|
|
2287
2286
|
var GoARadioGroup = function GoARadioGroup(_ref) {
|
|
2288
2287
|
var name = _ref.name,
|
|
2289
2288
|
value = _ref.value,
|
|
2290
2289
|
children = _ref.children,
|
|
2291
|
-
orientation = _ref.orientation,
|
|
2290
|
+
_ref$orientation = _ref.orientation,
|
|
2291
|
+
orientation = _ref$orientation === void 0 ? 'vertical' : _ref$orientation,
|
|
2292
2292
|
onChange = _ref.onChange,
|
|
2293
2293
|
childAttrs = _objectWithoutProperties(_ref, ["name", "value", "children", "orientation", "onChange"]);
|
|
2294
2294
|
|
|
@@ -2474,7 +2474,7 @@ var GoACardGroup = function GoACardGroup(_ref) {
|
|
|
2474
2474
|
}, getCards()));
|
|
2475
2475
|
};
|
|
2476
2476
|
|
|
2477
|
-
var css_248z$o = "/* Palette */\n/* Semantic usages */\n.goa-checkbox input[type='checkbox'] {\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n width: 1px;\n outline: 0;\n -webkit-appearance: none; }\n\n.goa-checkbox .goa-checkbox-label {\n z-index: 2;\n box-sizing: border-box;\n margin: 0;\n padding: 0 0 0 8px;\n cursor: pointer;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n height: 46px;\n display: flex;\n align-items: center; }\n\n.goa-checkbox.goa-checkbox-disabled {\n opacity: 30%; }\n .goa-checkbox.goa-checkbox-disabled .goa-checkbox-label {\n cursor: default; }\n\n.goa-checkbox.has-error .goa-checkbox-container {\n border: solid 2px #fc1921;\n color: #fc1921; }\n .goa-checkbox.has-error .goa-checkbox-container svg {\n fill: #fc1921; }\n\n.goa-checkbox .goa-checkbox-container {\n box-sizing: border-box;\n border: 1px solid #666;\n border-radius: 2px;\n height: 24px;\n line-height: 24px;\n width: 24px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding: 3px; }\n .goa-checkbox .goa-checkbox-container svg {\n display: none;\n flex: 1 1 auto;\n fill: #fff; }\n .goa-checkbox .goa-checkbox-container.goa-checkbox-selected {\n background-color: #0070c4; }\n .goa-checkbox .goa-checkbox-container.goa-checkbox-selected .goa-checkmark {\n display: block !important; }\n .goa-checkbox .goa-checkbox-container.goa-checkbox-selected .goa-indeterminate {\n display: none !important; }\n .goa-checkbox .goa-checkbox-container.goa-checkbox-indeterminate {\n background-color: #0070c4; }\n .goa-checkbox .goa-checkbox-container.goa-checkbox-indeterminate .goa-checkmark {\n display: none; }\n .goa-checkbox .goa-checkbox-container.goa-checkbox-indeterminate .goa-indeterminate {\n display: block; }\n .goa-checkbox .goa-checkbox-container:hover:not(.goa-checkbox-selected):not(.goa-checkbox-indeterminate) {\n background-color: #f1f1f1; }\n .goa-checkbox .goa-checkbox-container:focus-within {\n box-shadow: 0 0 0 3px #feba35;\n outline: none; }\n\n.goa-checkbox.goa-checkbox-label-before .goa-checkbox-container {\n order: 1;\n margin-left: 8px;\n margin-right: auto; }\n\n.goa-checkbox-layout {\n display: inline-flex;\n align-items: center; }\n";
|
|
2477
|
+
var css_248z$o = "/* Palette */\n/* Semantic usages */\n.goa-checkbox input[type='checkbox'] {\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n width: 1px;\n outline: 0;\n -webkit-appearance: none; }\n\n.goa-checkbox .goa-checkbox-label {\n z-index: 2;\n box-sizing: border-box;\n margin: 0;\n padding: 0 0 0 8px;\n cursor: pointer;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n height: 46px;\n display: flex;\n align-items: center; }\n\n.goa-checkbox.goa-checkbox-disabled {\n opacity: 30%; }\n .goa-checkbox.goa-checkbox-disabled .goa-checkbox-label {\n cursor: default; }\n\n.goa-checkbox.has-error .goa-checkbox-container {\n border: solid 2px #fc1921;\n color: #fc1921; }\n .goa-checkbox.has-error .goa-checkbox-container svg {\n fill: #fc1921; }\n\n.goa-checkbox .goa-checkbox-container {\n box-sizing: border-box;\n border: 1px solid #666;\n border-radius: 2px;\n height: 24px;\n line-height: 24px;\n width: 24px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding: 3px; }\n .goa-checkbox .goa-checkbox-container svg {\n display: none;\n flex: 1 1 auto;\n fill: #fff; }\n .goa-checkbox .goa-checkbox-container.goa-checkbox-selected {\n background-color: #0070c4; }\n .goa-checkbox .goa-checkbox-container.goa-checkbox-selected .goa-checkmark {\n display: block !important; }\n .goa-checkbox .goa-checkbox-container.goa-checkbox-selected .goa-indeterminate {\n display: none !important; }\n .goa-checkbox .goa-checkbox-container.goa-checkbox-indeterminate {\n background-color: #0070c4; }\n .goa-checkbox .goa-checkbox-container.goa-checkbox-indeterminate .goa-checkmark {\n display: none; }\n .goa-checkbox .goa-checkbox-container.goa-checkbox-indeterminate .goa-indeterminate {\n display: block; }\n .goa-checkbox .goa-checkbox-container:hover:not(.goa-checkbox-selected):not(.goa-checkbox-indeterminate) {\n background-color: #f1f1f1; }\n .goa-checkbox .goa-checkbox-container:focus-within {\n box-shadow: 0 0 0 3px #feba35;\n outline: none; }\n\n.goa-checkbox.goa-checkbox-label-before .goa-checkbox-container {\n order: 1;\n margin-left: 8px;\n margin-right: auto; }\n\n.goa-checkbox-layout {\n display: inline-flex;\n align-items: center;\n line-height: 2.5rem; }\n";
|
|
2478
2478
|
styleInject(css_248z$o);
|
|
2479
2479
|
|
|
2480
2480
|
var GoACheckbox = function GoACheckbox(_ref) {
|
package/react-components.umd.js
CHANGED
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
}
|
|
35
35
|
}
|
|
36
36
|
|
|
37
|
-
var css_248z = ":root {\n --color-white: #fff;\n --color-black: #333;\n --color-gray-l5: #f1f1f1;\n --color-gray-l2: #adadad;\n --color-gray-l1: #dcdcdc;\n --color-gray-d1: #666;\n --color-gray-d3: #333;\n --color-orange: #feba35;\n --color-red:
|
|
37
|
+
var css_248z = ":root {\n --color-white: #fff;\n --color-black: #333;\n --color-gray-l5: #f1f1f1;\n --color-gray-l2: #adadad;\n --color-gray-l1: #dcdcdc;\n --color-gray-d1: #666;\n --color-gray-d3: #333;\n --color-orange: #feba35;\n --color-red: #ec040b;\n --color-green: hsl(148, 100%, 26%);\n --color-primary: #0070c4;\n --color-primary-d1: #004f84;\n --color-primary--hover: var(--color-primary-d1);\n --color-text: var(--color-gray-d3);\n --color-error: var(--color-red);\n --color-disabled: var(--color-gray-l2);\n --color-input-background: var(--color-white);\n --color-input-border: var(--color-gray-d1);\n --color-input-border--hover: var(--color-primary-d1);\n --color-input: var(--color-gray-d3);\n --color-input--focused: var(--color-orange);\n --color-button-primary: var(--color-primary);\n --color-button-primary--hover: var(--color-primary-d1);\n --color-button-tertiary: var(--color-gray-l2);\n --color-button-tertiary--hover: var(--color-gray-l5); }\n\n:root {\n /* font-size */\n --fs-xs: 0.75rem;\n --fs-sm: 0.875rem;\n --fs-base: 1.125rem;\n --fs-lg: 1.25rem;\n --fs-xl: 1.5rem;\n --fs-2xl: 2.25rem;\n --fs-3xl: 3rem;\n /* font-weight */\n --fw-thin: 100;\n --fw-light: 300;\n --fw-regular: 400;\n --fw-medium: 500;\n --fw-bold: 700;\n --fw-black: 900;\n --input-padding: 0.5rem;\n --input-border-radius: 0.25rem;\n --input-font-size: var(--fs-base); }\n\nbody,\ninput,\nbutton,\ntextarea {\n background: #fff;\n font-family: acumin-pro-semi-condensed, sans-serif;\n font-weight: 400;\n font-size: var(--fs-base);\n color: #333; }\n\nbody {\n margin: 0; }\n\n*,\n*:before,\n*:after {\n box-sizing: border-box; }\n\np {\n margin: 0;\n margin-bottom: 1rem; }\n\nhr {\n border-width: 0;\n border-top: 1px solid #ccc;\n padding: 0;\n margin: 0; }\n\nem {\n font-size: var(--fs-xs);\n color: var(--color-gray-l1); }\n\nul,\nol {\n padding-left: 0; }\n\nli > ul,\nli > ol,\nli > ul,\nli > ol {\n padding-left: 0;\n margin-top: 0; }\n\na {\n color: var(--color-primary);\n cursor: pointer; }\n\na:hover {\n color: var(--color-primary--hover); }\n\na:focus {\n outline-width: thin;\n outline-style: solid;\n outline-color: var(--color-primary-d1);\n outline-offset: 0px; }\n\n::-moz-placeholder {\n /* Chrome, Firefox, Opera, Safari 10.1+ */\n color: #999;\n opacity: 1;\n /* Firefox */ }\n\n:-ms-input-placeholder {\n /* Chrome, Firefox, Opera, Safari 10.1+ */\n color: #999;\n opacity: 1;\n /* Firefox */ }\n\n::placeholder {\n /* Chrome, Firefox, Opera, Safari 10.1+ */\n color: #999;\n opacity: 1;\n /* Firefox */ }\n\n:-ms-input-placeholder {\n /* Internet Explorer 10-11 */\n color: #999; }\n\n::-ms-input-placeholder {\n /* Microsoft Edge */\n color: #999; }\n";
|
|
38
38
|
styleInject(css_248z);
|
|
39
39
|
|
|
40
40
|
var css_248z$1 = "/* typekit ***/\n/* This style is from the alberta design system */\n@import url(\"https://p.typekit.net/p.css?s=1&k=nur5yta&ht=tk&f=26036.26037.26044.26046.26047&a=14638192&app=typekit&e=css\");\n@font-face {\n font-family: 'acumin-pro-semi-condensed';\n src: url(\"https://use.typekit.net/af/3f7b4d/00000000000000003b9acb2d/27/l?subset_id=1&fvd=n4&v=3\") format(\"woff2\"), url(\"https://use.typekit.net/af/3f7b4d/00000000000000003b9acb2d/27/d?subset_id=1&fvd=n4&v=3\") format(\"woff\"), url(\"https://use.typekit.net/af/3f7b4d/00000000000000003b9acb2d/27/a?subset_id=1&fvd=n4&v=3\") format(\"opentype\");\n font-style: normal;\n font-weight: 400; }\n\n@font-face {\n font-family: 'acumin-pro-semi-condensed';\n src: url(\"https://use.typekit.net/af/761912/00000000000000003b9acb2e/27/l?subset_id=1&fvd=i4&v=3\") format(\"woff2\"), url(\"https://use.typekit.net/af/761912/00000000000000003b9acb2e/27/d?subset_id=1&fvd=i4&v=3\") format(\"woff\"), url(\"https://use.typekit.net/af/761912/00000000000000003b9acb2e/27/a?subset_id=1&fvd=i4&v=3\") format(\"opentype\");\n font-style: italic;\n font-weight: 400; }\n\n@font-face {\n font-family: 'acumin-pro-semi-condensed';\n src: url(\"https://use.typekit.net/af/ee7f3d/00000000000000003b9acb33/27/l?subset_id=1&fvd=n7&v=3\") format(\"woff2\"), url(\"https://use.typekit.net/af/ee7f3d/00000000000000003b9acb33/27/d?subset_id=1&fvd=n7&v=3\") format(\"woff\"), url(\"https://use.typekit.net/af/ee7f3d/00000000000000003b9acb33/27/a?subset_id=1&fvd=n7&v=3\") format(\"opentype\");\n font-style: normal;\n font-weight: 700; }\n\n@font-face {\n font-family: 'acumin-pro-semi-condensed';\n src: url(\"https://use.typekit.net/af/503f80/00000000000000003b9acb34/27/l?subset_id=1&fvd=i7&v=3\") format(\"woff2\"), url(\"https://use.typekit.net/af/503f80/00000000000000003b9acb34/27/d?subset_id=1&fvd=i7&v=3\") format(\"woff\"), url(\"https://use.typekit.net/af/503f80/00000000000000003b9acb34/27/a?subset_id=1&fvd=i7&v=3\") format(\"opentype\");\n font-style: italic;\n font-weight: 700; }\n\n@font-face {\n font-family: 'acumin-pro-semi-condensed';\n src: url(\"https://use.typekit.net/af/e60e87/00000000000000003b9acb31/27/l?subset_id=1&fvd=n6&v=3\") format(\"woff2\"), url(\"https://use.typekit.net/af/e60e87/00000000000000003b9acb31/27/d?subset_id=1&fvd=n6&v=3\") format(\"woff\"), url(\"https://use.typekit.net/af/e60e87/00000000000000003b9acb31/27/a?subset_id=1&fvd=n6&v=3\") format(\"opentype\");\n font-style: normal;\n font-weight: 600; }\n";
|
|
@@ -2067,10 +2067,10 @@
|
|
|
2067
2067
|
}
|
|
2068
2068
|
}
|
|
2069
2069
|
|
|
2070
|
-
var css_248z$d = ":root {\n /* font-size */\n --fs-xs: 0.75rem;\n --fs-sm: 0.875rem;\n --fs-base: 1.125rem;\n
|
|
2070
|
+
var css_248z$d = ":root {\n /* font-size */\n --fs-xs: 0.75rem;\n --fs-sm: 0.875rem;\n --fs-base: 1.125rem;\n --fs-lg: 1.25rem;\n --fs-xl: 1.5rem;\n --fs-2xl: 2.25rem;\n --fs-3xl: 3rem;\n /* font-weight */\n --fw-thin: 100;\n --fw-light: 300;\n --fw-regular: 400;\n --fw-medium: 500;\n --fw-bold: 700;\n --fw-black: 900;\n --input-padding: 0.5rem;\n --input-border-radius: 0.25rem;\n --input-font-size: var(--fs-base); }\n\n:root {\n --color-white: #fff;\n --color-black: #333;\n --color-gray-l5: #f1f1f1;\n --color-gray-l2: #adadad;\n --color-gray-l1: #dcdcdc;\n --color-gray-d1: #666;\n --color-gray-d3: #333;\n --color-orange: #feba35;\n --color-red: #ec040b;\n --color-green: hsl(148, 100%, 26%);\n --color-primary: #0070c4;\n --color-primary-d1: #004f84;\n --color-primary--hover: var(--color-primary-d1);\n --color-text: var(--color-gray-d3);\n --color-error: var(--color-red);\n --color-disabled: var(--color-gray-l2);\n --color-input-background: var(--color-white);\n --color-input-border: var(--color-gray-d1);\n --color-input-border--hover: var(--color-primary-d1);\n --color-input: var(--color-gray-d3);\n --color-input--focused: var(--color-orange);\n --color-button-primary: var(--color-primary);\n --color-button-primary--hover: var(--color-primary-d1);\n --color-button-tertiary: var(--color-gray-l2);\n --color-button-tertiary--hover: var(--color-gray-l5); }\n\n.goa-input {\n position: relative; }\n\n.goa-input-leading-icon {\n position: absolute;\n display: flex;\n align-items: center;\n top: 0;\n bottom: 0;\n left: 0.5rem; }\n\n.goa-input input {\n outline: none;\n transition: box-shadow 0.1s ease-in;\n border: 1px solid var(--color-input-border);\n border-radius: 3px;\n background: white;\n color: var(--color-input);\n padding: var(--input-padding);\n font-size: var(--input-font-size);\n display: block;\n width: 100%;\n line-height: 1.5rem;\n padding: 0.5rem 2rem 0.5rem 0.5rem; }\n .goa-input input:hover {\n border-color: var(--color-input-border--hover); }\n .goa-input input:active, .goa-input input:focus {\n box-shadow: 0 0 0 3px var(--color-input--focused); }\n .goa-input input:disabled {\n border-color: var(--color-disabled); }\n .goa-input input:disabled:hover {\n border-color: var(--color-disabled); }\n .goa-input input:disabled:focus {\n box-shadow: none; }\n\n.goa-input input:disabled {\n border-color: var(--color-disabled); }\n .goa-input input:disabled:hover {\n border-color: var(--color-disabled); }\n .goa-input input:disabled:focus {\n box-shadow: none; }\n\n.goa-input svg {\n width: 80%; }\n\n.goa-input .input--leading-icon {\n padding-left: 2rem; }\n\n.goa-state--error .goa-input input {\n border: 2px solid var(--color-error); }\n";
|
|
2071
2071
|
styleInject(css_248z$d);
|
|
2072
2072
|
|
|
2073
|
-
var css_248z$e = ":root {\n /* font-size */\n --fs-xs: 0.75rem;\n --fs-sm: 0.875rem;\n --fs-base: 1.125rem;\n
|
|
2073
|
+
var css_248z$e = ":root {\n /* font-size */\n --fs-xs: 0.75rem;\n --fs-sm: 0.875rem;\n --fs-base: 1.125rem;\n --fs-lg: 1.25rem;\n --fs-xl: 1.5rem;\n --fs-2xl: 2.25rem;\n --fs-3xl: 3rem;\n /* font-weight */\n --fw-thin: 100;\n --fw-light: 300;\n --fw-regular: 400;\n --fw-medium: 500;\n --fw-bold: 700;\n --fw-black: 900;\n --input-padding: 0.5rem;\n --input-border-radius: 0.25rem;\n --input-font-size: var(--fs-base); }\n\n:root {\n --color-white: #fff;\n --color-black: #333;\n --color-gray-l5: #f1f1f1;\n --color-gray-l2: #adadad;\n --color-gray-l1: #dcdcdc;\n --color-gray-d1: #666;\n --color-gray-d3: #333;\n --color-orange: #feba35;\n --color-red: #ec040b;\n --color-green: hsl(148, 100%, 26%);\n --color-primary: #0070c4;\n --color-primary-d1: #004f84;\n --color-primary--hover: var(--color-primary-d1);\n --color-text: var(--color-gray-d3);\n --color-error: var(--color-red);\n --color-disabled: var(--color-gray-l2);\n --color-input-background: var(--color-white);\n --color-input-border: var(--color-gray-d1);\n --color-input-border--hover: var(--color-primary-d1);\n --color-input: var(--color-gray-d3);\n --color-input--focused: var(--color-orange);\n --color-button-primary: var(--color-primary);\n --color-button-primary--hover: var(--color-primary-d1);\n --color-button-tertiary: var(--color-gray-l2);\n --color-button-tertiary--hover: var(--color-gray-l5); }\n\n.goa-textarea {\n outline: none;\n transition: box-shadow 0.1s ease-in;\n border: 1px solid var(--color-input-border);\n border-radius: 3px;\n background: white;\n color: var(--color-input);\n padding: var(--input-padding);\n font-size: var(--input-font-size);\n display: block;\n width: 100%; }\n .goa-textarea:hover {\n border-color: var(--color-input-border--hover); }\n .goa-textarea:active, .goa-textarea:focus {\n box-shadow: 0 0 0 3px var(--color-input--focused); }\n .goa-textarea:disabled {\n border-color: var(--color-disabled); }\n .goa-textarea:disabled:hover {\n border-color: var(--color-disabled); }\n .goa-textarea:disabled:focus {\n box-shadow: none; }\n\n.goa-textarea:disabled {\n border-color: var(--color-disabled); }\n .goa-textarea:disabled:hover {\n border-color: var(--color-disabled); }\n .goa-textarea:disabled:focus {\n box-shadow: none; }\n\n.goa-state--error textarea,\n.goa-state--error textarea:hover {\n border: 2px solid var(--color-red); }\n";
|
|
2074
2074
|
styleInject(css_248z$e);
|
|
2075
2075
|
|
|
2076
2076
|
var css_248z$f = ".goa-scrollable {\n overflow: hidden;\n height: 100%;\n}\n\n.goa-scrollable > div::-webkit-scrollbar {\n width: 6px;\n}\n\n.goa-scrollable > div::-webkit-scrollbar-track {\n background: #f1f1f1;\n}\n\n.goa-scrollable > div::-webkit-scrollbar-thumb {\n background: #888;\n}\n\n.goa-scrollable > div::-webkit-scrollbar-thumb:hover {\n background: #555;\n}\n";
|
|
@@ -2104,10 +2104,10 @@
|
|
|
2104
2104
|
var css_248z$h = "/* Root ============================================================================== */\n\n.modal-root {\n position: fixed;\n top: 0;\n left: 0;\n bottom: 0;\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n}\n\n/* Modal ============================================================================== */\n\n.modal {\n position: relative;\n background: #fff;\n z-index: 1002;\n box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.2);\n border-radius: 4px;\n}\n\n@media (max-width: 639px) {\n .modal {\n width: 90%;\n max-height: 90%;\n }\n}\n\n@media (min-width: 640px) {\n .modal {\n margin: 1rem;\n max-height: 80%;\n width: 600px;\n }\n}\n@media (min-width: 1024px) {\n .modal {\n width: 65ch;\n }\n}\n\n/* Modal Content ============================================================================== */\n\n.modal-content {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n\n/* Modal Actions ============================================================================== */\n\n.modal-actions {\n text-align: right;\n margin: 1.5rem;\n}\n\n@media (max-width: 639px) {\n .modal-actions button + button {\n margin-top: 0.5rem;\n }\n .modal-actions button {\n display: block;\n width: 100%;\n }\n}\n\n@media (min-width: 640px) {\n .modal-actions > button {\n margin-right: 0;\n }\n .modal-actions > button + button {\n margin-left: 0.5rem;\n }\n}\n\n/* Modal Title ============================================================================ */\n\n.modal-title {\n font-size: var(--fs-xl);\n padding: 1rem 1.5rem;\n margin-right: 40px; /* close icon spacing */\n}\n\n/* Modal Background ======================================================================= */\n\n.modal-background {\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, 0.5);\n z-index: 1001;\n}\n\n/* Modal Close Icon ======================================================================= */\n\n.modal-close {\n position: absolute;\n top: 0.5rem;\n right: 0.5rem;\n}\n";
|
|
2105
2105
|
styleInject(css_248z$h);
|
|
2106
2106
|
|
|
2107
|
-
var css_248z$i = "/*
|
|
2107
|
+
var css_248z$i = ":root {\n --color-white: #fff;\n --color-black: #333;\n --color-gray-l5: #f1f1f1;\n --color-gray-l2: #adadad;\n --color-gray-l1: #dcdcdc;\n --color-gray-d1: #666;\n --color-gray-d3: #333;\n --color-orange: #feba35;\n --color-red: #ec040b;\n --color-green: hsl(148, 100%, 26%);\n --color-primary: #0070c4;\n --color-primary-d1: #004f84;\n --color-primary--hover: var(--color-primary-d1);\n --color-text: var(--color-gray-d3);\n --color-error: var(--color-red);\n --color-disabled: var(--color-gray-l2);\n --color-input-background: var(--color-white);\n --color-input-border: var(--color-gray-d1);\n --color-input-border--hover: var(--color-primary-d1);\n --color-input: var(--color-gray-d3);\n --color-input--focused: var(--color-orange);\n --color-button-primary: var(--color-primary);\n --color-button-primary--hover: var(--color-primary-d1);\n --color-button-tertiary: var(--color-gray-l2);\n --color-button-tertiary--hover: var(--color-gray-l5); }\n\n:root {\n /* font-size */\n --fs-xs: 0.75rem;\n --fs-sm: 0.875rem;\n --fs-base: 1.125rem;\n --fs-lg: 1.25rem;\n --fs-xl: 1.5rem;\n --fs-2xl: 2.25rem;\n --fs-3xl: 3rem;\n /* font-weight */\n --fw-thin: 100;\n --fw-light: 300;\n --fw-regular: 400;\n --fw-medium: 500;\n --fw-bold: 700;\n --fw-black: 900;\n --input-padding: 0.5rem;\n --input-border-radius: 0.25rem;\n --input-font-size: var(--fs-base); }\n\n.goa-form {\n box-sizing: border-box; }\n\n.goa-form *,\n.goa-form *:before,\n.goa-form *:after {\n box-sizing: inherit; }\n\n.goa-form-row {\n display: flex;\n flex-direction: column;\n justify-content: space-between; }\n\n@media screen and (min-width: 640px) {\n .goa-form-row {\n gap: 1.75rem;\n flex-direction: row; } }\n\n.goa-form-item {\n flex: 1 1 auto;\n margin-bottom: 1rem; }\n .goa-form-item label {\n display: block;\n font-weight: bold;\n color: #333;\n font-size: var(--fs-base);\n line-height: calc(var(--fs-base) + 1rem); }\n .goa-form-item label em {\n color: var(--color-gray-d1);\n font-style: normal;\n font-weight: var(--fw-regular);\n font-size: var(--fs-sm); }\n .goa-form-item input,\n .goa-form-item textarea {\n display: block;\n width: 100%;\n font-size: var(--fs-base); }\n .goa-form-item.goa-state--error .error-msg {\n font-size: var(--fs-sm);\n line-height: calc(var(--fs-sm) + 0.5rem);\n color: var(--color-red); }\n\n.help-msg {\n font-size: var(--fs-sm);\n color: var(--color-gray-d3);\n line-height: calc(var(--fs-sm) + 0.5rem); }\n\n.goa-form-actions {\n display: flex;\n flex-wrap: wrap;\n margin-top: 2rem; }\n .goa-form-actions button,\n .goa-form-actions .goa-link-button {\n margin: 0; }\n @media (max-width: 639px) {\n .goa-form-actions button,\n .goa-form-actions .goa-link-button {\n width: 100%; }\n .goa-form-actions button + button,\n .goa-form-actions button + .goa-link-button,\n .goa-form-actions .goa-link-button + button,\n .goa-form-actions .goa-link-button + .goa-link-button {\n margin-top: 0.5rem; } }\n @media (min-width: 640px) {\n .goa-form-actions button,\n .goa-form-actions .goa-link-button {\n min-width: 6rem; }\n .goa-form-actions button + button,\n .goa-form-actions button + .goa-link-button,\n .goa-form-actions .goa-link-button + button,\n .goa-form-actions .goa-link-button + .goa-link-button {\n margin-left: 0.5rem; } }\n\n.goa-form-actions--left {\n justify-content: flex-start; }\n\n.goa-form-actions--right {\n justify-content: flex-end; }\n";
|
|
2108
2108
|
styleInject(css_248z$i);
|
|
2109
2109
|
|
|
2110
|
-
var css_248z$j = ":root {\n --color-white: #fff;\n --color-black: #333;\n --color-gray-l5: #f1f1f1;\n --color-gray-l2: #adadad;\n --color-gray-l1: #dcdcdc;\n --color-gray-d1: #666;\n --color-gray-d3: #333;\n --color-orange: #feba35;\n --color-red:
|
|
2110
|
+
var css_248z$j = ":root {\n --color-white: #fff;\n --color-black: #333;\n --color-gray-l5: #f1f1f1;\n --color-gray-l2: #adadad;\n --color-gray-l1: #dcdcdc;\n --color-gray-d1: #666;\n --color-gray-d3: #333;\n --color-orange: #feba35;\n --color-red: #ec040b;\n --color-green: hsl(148, 100%, 26%);\n --color-primary: #0070c4;\n --color-primary-d1: #004f84;\n --color-primary--hover: var(--color-primary-d1);\n --color-text: var(--color-gray-d3);\n --color-error: var(--color-red);\n --color-disabled: var(--color-gray-l2);\n --color-input-background: var(--color-white);\n --color-input-border: var(--color-gray-d1);\n --color-input-border--hover: var(--color-primary-d1);\n --color-input: var(--color-gray-d3);\n --color-input--focused: var(--color-orange);\n --color-button-primary: var(--color-primary);\n --color-button-primary--hover: var(--color-primary-d1);\n --color-button-tertiary: var(--color-gray-l2);\n --color-button-tertiary--hover: var(--color-gray-l5); }\n\n:root {\n /* font-size */\n --fs-xs: 0.75rem;\n --fs-sm: 0.875rem;\n --fs-base: 1.125rem;\n --fs-lg: 1.25rem;\n --fs-xl: 1.5rem;\n --fs-2xl: 2.25rem;\n --fs-3xl: 3rem;\n /* font-weight */\n --fw-thin: 100;\n --fw-light: 300;\n --fw-regular: 400;\n --fw-medium: 500;\n --fw-bold: 700;\n --fw-black: 900;\n --input-padding: 0.5rem;\n --input-border-radius: 0.25rem;\n --input-font-size: var(--fs-base); }\n\n.goa-dropdown-box {\n --color-selected-bg--hover: var(--color-gray-l5);\n --color-selected-text--hover: var(--color-gray-d1);\n position: relative; }\n\n.goa-dropdown-background {\n position: fixed;\n inset: 0;\n opacity: 1; }\n\n.goa-dropdown-input {\n outline: none;\n transition: box-shadow 0.1s ease-in;\n border: 1px solid var(--color-input-border);\n border-radius: 3px;\n background: white;\n color: var(--color-input);\n padding: var(--input-padding);\n font-size: var(--input-font-size);\n display: flex;\n align-items: center;\n justify-content: space-between;\n cursor: pointer; }\n .goa-dropdown-input:hover {\n border-color: var(--color-input-border--hover); }\n .goa-dropdown-input:active, .goa-dropdown-input:focus {\n box-shadow: 0 0 0 3px var(--color-input--focused); }\n .goa-dropdown-input:disabled {\n border-color: var(--color-disabled); }\n .goa-dropdown-input:disabled:hover {\n border-color: var(--color-disabled); }\n .goa-dropdown-input:disabled:focus {\n box-shadow: none; }\n .goa-dropdown-input input {\n line-height: 1.5rem;\n padding: 0;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none; }\n .goa-dropdown-input input,\n .goa-dropdown-input input:hover,\n .goa-dropdown-input input:focus {\n box-shadow: none; }\n\n.goa-dropdown-input--disabled {\n opacity: 0.5;\n cursor: default; }\n .goa-dropdown-input--disabled:hover, .goa-dropdown-input--disabled:focus {\n cursor: default;\n box-shadow: none; }\n\n.goa-dropdown-leading-icon svg {\n width: 80%; }\n\n.goa-dropdown-input input {\n flex: 1 1 auto;\n border: none;\n outline: none;\n cursor: pointer; }\n .goa-dropdown-input input ::-moz-placeholder {\n text-overflow: ellipsis; }\n .goa-dropdown-input input :-ms-input-placeholder {\n text-overflow: ellipsis; }\n .goa-dropdown-input input ::placeholder {\n text-overflow: ellipsis; }\n\n.goa-icon ~ input {\n padding-left: 0.5rem; }\n\n.goa-dropdown-input--disabled input {\n cursor: default; }\n\n.goa-dropdown-list {\n position: absolute;\n left: 0;\n right: 0;\n margin: 0;\n padding: 0;\n list-style-type: none;\n background: var(--color-input-background);\n border-bottom-left-radius: var(--input-border-radius);\n border-bottom-right-radius: var(--input-border-radius);\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n z-index: 99; }\n\n.goa-dropdown-list hr {\n border: none;\n border-top: 1px solid var(--color-gray-l5);\n margin: 0; }\n\n.goa-dropdown-list label {\n font-size: var(--fs-sm);\n font-weight: var(--fw-bold);\n padding-left: 0.5rem; }\n\n.goa-dropdown-option {\n margin: 0;\n padding: 0.5rem;\n cursor: pointer;\n color: var(--color-input); }\n .goa-dropdown-option:hover {\n background: var(--color-selected-bg--hover);\n color: var(--color-primary-d1); }\n\n.goa-dropdown-option--disabled {\n opacity: 0.5;\n cursor: default; }\n .goa-dropdown-option--disabled:hover {\n cursor: default;\n color: var(--color-selected-text--hover); }\n\n.goa-dropdown-option--selected {\n background: var(--color-primary);\n color: var(--color-white); }\n .goa-dropdown-option--selected:hover {\n background: var(--color-primary-d1);\n color: var(--color-white); }\n\n.dropdown-group-content .goa-dropdown-option {\n padding-left: 1.5rem; }\n\n.goa-state--error .goa-dropdown-input {\n border: 2px solid var(--color-error); }\n";
|
|
2111
2111
|
styleInject(css_248z$j);
|
|
2112
2112
|
|
|
2113
2113
|
var GoADropdownOption = function GoADropdownOption(props) {
|
|
@@ -2125,7 +2125,11 @@
|
|
|
2125
2125
|
};
|
|
2126
2126
|
|
|
2127
2127
|
var MAX_HEIGHT = 300;
|
|
2128
|
-
var GoADropdown = function GoADropdown(
|
|
2128
|
+
var GoADropdown = function GoADropdown(_ref) {
|
|
2129
|
+
var _ref$selectedValues = _ref.selectedValues,
|
|
2130
|
+
selectedValues = _ref$selectedValues === void 0 ? [] : _ref$selectedValues,
|
|
2131
|
+
props = _objectWithoutProperties(_ref, ["selectedValues"]);
|
|
2132
|
+
|
|
2129
2133
|
var _useState = React.useState(false),
|
|
2130
2134
|
_useState2 = _slicedToArray(_useState, 2),
|
|
2131
2135
|
isMenuVisible = _useState2[0],
|
|
@@ -2150,7 +2154,7 @@
|
|
|
2150
2154
|
if (child.props.value) {
|
|
2151
2155
|
return React__default.cloneElement(child, _objectSpread2(_objectSpread2({}, child.props), {}, {
|
|
2152
2156
|
onClick: handleSelection,
|
|
2153
|
-
selected:
|
|
2157
|
+
selected: selectedValues.includes(child.props.value),
|
|
2154
2158
|
_testId: "".concat(props.name, "-dropdown-option--").concat(child.props.value)
|
|
2155
2159
|
}));
|
|
2156
2160
|
}
|
|
@@ -2167,12 +2171,12 @@
|
|
|
2167
2171
|
var values;
|
|
2168
2172
|
|
|
2169
2173
|
if (props.multiSelect) {
|
|
2170
|
-
if (
|
|
2171
|
-
values =
|
|
2174
|
+
if (selectedValues.includes(value)) {
|
|
2175
|
+
values = selectedValues.filter(function (v) {
|
|
2172
2176
|
return v !== value;
|
|
2173
2177
|
});
|
|
2174
2178
|
} else {
|
|
2175
|
-
values = [].concat(_toConsumableArray(
|
|
2179
|
+
values = [].concat(_toConsumableArray(selectedValues), [value]);
|
|
2176
2180
|
}
|
|
2177
2181
|
} else {
|
|
2178
2182
|
values = [value];
|
|
@@ -2206,7 +2210,7 @@
|
|
|
2206
2210
|
var selectedLabels = React__default.Children.map(props.children, function (child) {
|
|
2207
2211
|
return child;
|
|
2208
2212
|
}).filter(function (child) {
|
|
2209
|
-
return
|
|
2213
|
+
return selectedValues.includes(child.props.value);
|
|
2210
2214
|
}).map(function (child) {
|
|
2211
2215
|
return child.props.label;
|
|
2212
2216
|
});
|
|
@@ -2254,19 +2258,14 @@
|
|
|
2254
2258
|
}, bindChildren())));
|
|
2255
2259
|
};
|
|
2256
2260
|
|
|
2257
|
-
var css_248z$k = ":root {\n --color-white: #fff;\n --color-black: #333;\n --color-gray-l5: #f1f1f1;\n --color-gray-l2: #adadad;\n --color-gray-l1: #dcdcdc;\n --color-gray-d1: #666;\n --color-gray-d3: #333;\n --color-orange: #feba35;\n --color-red:
|
|
2261
|
+
var css_248z$k = ":root {\n --color-white: #fff;\n --color-black: #333;\n --color-gray-l5: #f1f1f1;\n --color-gray-l2: #adadad;\n --color-gray-l1: #dcdcdc;\n --color-gray-d1: #666;\n --color-gray-d3: #333;\n --color-orange: #feba35;\n --color-red: #ec040b;\n --color-green: hsl(148, 100%, 26%);\n --color-primary: #0070c4;\n --color-primary-d1: #004f84;\n --color-primary--hover: var(--color-primary-d1);\n --color-text: var(--color-gray-d3);\n --color-error: var(--color-red);\n --color-disabled: var(--color-gray-l2);\n --color-input-background: var(--color-white);\n --color-input-border: var(--color-gray-d1);\n --color-input-border--hover: var(--color-primary-d1);\n --color-input: var(--color-gray-d3);\n --color-input--focused: var(--color-orange);\n --color-button-primary: var(--color-primary);\n --color-button-primary--hover: var(--color-primary-d1);\n --color-button-tertiary: var(--color-gray-l2);\n --color-button-tertiary--hover: var(--color-gray-l5); }\n\n/* Radio Group */\n.goa-radio-group--horizontal {\n display: flex;\n flex-direction: row; }\n\n.goa-radio-group--vertical {\n display: inline-flex;\n flex-direction: column; }\n\n/* Radio */\nlabel.goa-radio {\n --goa-border-color: var(--color-input-border);\n --goa-border-color--checked: var(--color-primary);\n --goa-radio-color--error: var(--color-error);\n --goa-radio-outline-color: var(--color-input--focused);\n --goa-radio-outline-width: 3px;\n --goa-radio-diameter: 1.5rem;\n --goa-radio-border-width: 1px;\n --goa-radio-border-width--checked: 7px;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n min-height: 3rem; }\n\n.goa-radio:hover {\n cursor: pointer; }\n\n.goa-radio *,\n.goa-radio *:before,\n.goa-radio *:after {\n box-sizing: border-box; }\n\n.goa-radio input[type='radio'] {\n display: none; }\n\n.goa-radio-label {\n padding: 0.5rem 1.5rem 0.5rem 0.5rem; }\n\n.goa-radio-icon {\n display: inline-block;\n height: var(--goa-radio-diameter);\n width: var(--goa-radio-diameter);\n border-radius: 50%;\n transition: box-shadow 100ms ease-in-out; }\n\n.goa-radio:hover > input:not(:disabled) ~ .goa-radio-icon {\n box-shadow: 0 0 0 var(--goa-radio-outline-width) var(--goa-radio-outline-color); }\n\n.goa-radio--disabled:hover {\n cursor: default; }\n\n/* States */\n/* Checked */\ninput[type='radio']:checked ~ .goa-radio-icon {\n border: var(--goa-radio-border-width--checked) solid var(--goa-border-color--checked); }\n\n/* Not checked */\ninput[type='radio']:not(:checked) ~ .goa-radio-icon {\n border: var(--goa-radio-border-width) solid var(--goa-border-color); }\n\n/* Disabled */\ninput[type='radio']:disabled ~ .goa-radio-icon {\n border: var(--goa-radio-border-width) solid var(--goa-border-color);\n opacity: 0.3; }\n\n/* Disabled and checked */\ninput[type='radio']:disabled:checked ~ .goa-radio-icon {\n border: var(--goa-radio-border-width--checked) solid var(--goa-border-color--checked);\n opacity: 0.3; }\n\n/* Error */\n.goa-state--error input[type='radio']:checked ~ .goa-radio-icon {\n border: 7px solid var(--goa-radio-color--error); }\n\n.goa-state--error input[type='radio']:not(:checked) ~ .goa-radio-icon {\n border: 2px solid var(--goa-radio-color--error); }\n";
|
|
2258
2262
|
styleInject(css_248z$k);
|
|
2259
2263
|
|
|
2260
|
-
var GoARadio = function GoARadio(
|
|
2261
|
-
var _ref$state = _ref.state,
|
|
2262
|
-
state = _ref$state === void 0 ? 'valid' : _ref$state,
|
|
2263
|
-
props = _objectWithoutProperties(_ref, ["state"]);
|
|
2264
|
-
|
|
2264
|
+
var GoARadio = function GoARadio(props) {
|
|
2265
2265
|
function getCss() {
|
|
2266
2266
|
return classnames({
|
|
2267
2267
|
'goa-radio': true,
|
|
2268
|
-
'goa-radio--disabled': props.disabled
|
|
2269
|
-
'goa-error': state === 'error'
|
|
2268
|
+
'goa-radio--disabled': props.disabled
|
|
2270
2269
|
});
|
|
2271
2270
|
}
|
|
2272
2271
|
|
|
@@ -2287,14 +2286,15 @@
|
|
|
2287
2286
|
className: "goa-radio-icon"
|
|
2288
2287
|
}), /*#__PURE__*/React__default.createElement("span", {
|
|
2289
2288
|
className: "goa-radio-label"
|
|
2290
|
-
}, props.children));
|
|
2289
|
+
}, props.children || props.label));
|
|
2291
2290
|
};
|
|
2292
2291
|
|
|
2293
2292
|
var GoARadioGroup = function GoARadioGroup(_ref) {
|
|
2294
2293
|
var name = _ref.name,
|
|
2295
2294
|
value = _ref.value,
|
|
2296
2295
|
children = _ref.children,
|
|
2297
|
-
orientation = _ref.orientation,
|
|
2296
|
+
_ref$orientation = _ref.orientation,
|
|
2297
|
+
orientation = _ref$orientation === void 0 ? 'vertical' : _ref$orientation,
|
|
2298
2298
|
onChange = _ref.onChange,
|
|
2299
2299
|
childAttrs = _objectWithoutProperties(_ref, ["name", "value", "children", "orientation", "onChange"]);
|
|
2300
2300
|
|
|
@@ -2480,7 +2480,7 @@
|
|
|
2480
2480
|
}, getCards()));
|
|
2481
2481
|
};
|
|
2482
2482
|
|
|
2483
|
-
var css_248z$o = "/* Palette */\n/* Semantic usages */\n.goa-checkbox input[type='checkbox'] {\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n width: 1px;\n outline: 0;\n -webkit-appearance: none; }\n\n.goa-checkbox .goa-checkbox-label {\n z-index: 2;\n box-sizing: border-box;\n margin: 0;\n padding: 0 0 0 8px;\n cursor: pointer;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n height: 46px;\n display: flex;\n align-items: center; }\n\n.goa-checkbox.goa-checkbox-disabled {\n opacity: 30%; }\n .goa-checkbox.goa-checkbox-disabled .goa-checkbox-label {\n cursor: default; }\n\n.goa-checkbox.has-error .goa-checkbox-container {\n border: solid 2px #fc1921;\n color: #fc1921; }\n .goa-checkbox.has-error .goa-checkbox-container svg {\n fill: #fc1921; }\n\n.goa-checkbox .goa-checkbox-container {\n box-sizing: border-box;\n border: 1px solid #666;\n border-radius: 2px;\n height: 24px;\n line-height: 24px;\n width: 24px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding: 3px; }\n .goa-checkbox .goa-checkbox-container svg {\n display: none;\n flex: 1 1 auto;\n fill: #fff; }\n .goa-checkbox .goa-checkbox-container.goa-checkbox-selected {\n background-color: #0070c4; }\n .goa-checkbox .goa-checkbox-container.goa-checkbox-selected .goa-checkmark {\n display: block !important; }\n .goa-checkbox .goa-checkbox-container.goa-checkbox-selected .goa-indeterminate {\n display: none !important; }\n .goa-checkbox .goa-checkbox-container.goa-checkbox-indeterminate {\n background-color: #0070c4; }\n .goa-checkbox .goa-checkbox-container.goa-checkbox-indeterminate .goa-checkmark {\n display: none; }\n .goa-checkbox .goa-checkbox-container.goa-checkbox-indeterminate .goa-indeterminate {\n display: block; }\n .goa-checkbox .goa-checkbox-container:hover:not(.goa-checkbox-selected):not(.goa-checkbox-indeterminate) {\n background-color: #f1f1f1; }\n .goa-checkbox .goa-checkbox-container:focus-within {\n box-shadow: 0 0 0 3px #feba35;\n outline: none; }\n\n.goa-checkbox.goa-checkbox-label-before .goa-checkbox-container {\n order: 1;\n margin-left: 8px;\n margin-right: auto; }\n\n.goa-checkbox-layout {\n display: inline-flex;\n align-items: center; }\n";
|
|
2483
|
+
var css_248z$o = "/* Palette */\n/* Semantic usages */\n.goa-checkbox input[type='checkbox'] {\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n width: 1px;\n outline: 0;\n -webkit-appearance: none; }\n\n.goa-checkbox .goa-checkbox-label {\n z-index: 2;\n box-sizing: border-box;\n margin: 0;\n padding: 0 0 0 8px;\n cursor: pointer;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n height: 46px;\n display: flex;\n align-items: center; }\n\n.goa-checkbox.goa-checkbox-disabled {\n opacity: 30%; }\n .goa-checkbox.goa-checkbox-disabled .goa-checkbox-label {\n cursor: default; }\n\n.goa-checkbox.has-error .goa-checkbox-container {\n border: solid 2px #fc1921;\n color: #fc1921; }\n .goa-checkbox.has-error .goa-checkbox-container svg {\n fill: #fc1921; }\n\n.goa-checkbox .goa-checkbox-container {\n box-sizing: border-box;\n border: 1px solid #666;\n border-radius: 2px;\n height: 24px;\n line-height: 24px;\n width: 24px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding: 3px; }\n .goa-checkbox .goa-checkbox-container svg {\n display: none;\n flex: 1 1 auto;\n fill: #fff; }\n .goa-checkbox .goa-checkbox-container.goa-checkbox-selected {\n background-color: #0070c4; }\n .goa-checkbox .goa-checkbox-container.goa-checkbox-selected .goa-checkmark {\n display: block !important; }\n .goa-checkbox .goa-checkbox-container.goa-checkbox-selected .goa-indeterminate {\n display: none !important; }\n .goa-checkbox .goa-checkbox-container.goa-checkbox-indeterminate {\n background-color: #0070c4; }\n .goa-checkbox .goa-checkbox-container.goa-checkbox-indeterminate .goa-checkmark {\n display: none; }\n .goa-checkbox .goa-checkbox-container.goa-checkbox-indeterminate .goa-indeterminate {\n display: block; }\n .goa-checkbox .goa-checkbox-container:hover:not(.goa-checkbox-selected):not(.goa-checkbox-indeterminate) {\n background-color: #f1f1f1; }\n .goa-checkbox .goa-checkbox-container:focus-within {\n box-shadow: 0 0 0 3px #feba35;\n outline: none; }\n\n.goa-checkbox.goa-checkbox-label-before .goa-checkbox-container {\n order: 1;\n margin-left: 8px;\n margin-right: auto; }\n\n.goa-checkbox-layout {\n display: inline-flex;\n align-items: center;\n line-height: 2.5rem; }\n";
|
|
2484
2484
|
styleInject(css_248z$o);
|
|
2485
2485
|
|
|
2486
2486
|
var GoACheckbox = function GoACheckbox(_ref) {
|