@abgov/react-components 3.4.0-beta.31 → 3.4.0-beta.35
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/experimental/input/input.component.d.ts +3 -2
- package/experimental/experimental/textarea/textarea.component.d.ts +3 -2
- package/experimental/react-components.esm.js +21 -17
- package/experimental/react-components.umd.js +21 -17
- package/lib/dropdown/dropdown.d.ts +3 -2
- package/lib/microsite-logo/microsite-logo.d.ts +3 -3
- 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 +27 -27
- package/react-components.umd.js +27 -27
- 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;
|
|
@@ -3,14 +3,15 @@ import { GoAIconType } from '../icons';
|
|
|
3
3
|
import { OnChange } from '../../lib/_common/input';
|
|
4
4
|
import './input.scss';
|
|
5
5
|
declare type InputType = 'text' | 'password' | 'email' | 'number' | 'tel' | 'url';
|
|
6
|
-
|
|
6
|
+
interface Props {
|
|
7
7
|
name: string;
|
|
8
8
|
value: string;
|
|
9
9
|
type: InputType;
|
|
10
|
+
id?: string;
|
|
10
11
|
disabled?: boolean;
|
|
11
12
|
placeholder?: string;
|
|
12
13
|
leadingIcon?: GoAIconType;
|
|
13
14
|
onChange: OnChange;
|
|
14
|
-
}
|
|
15
|
+
}
|
|
15
16
|
export declare const GoAInput: FC<Props>;
|
|
16
17
|
export default GoAInput;
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import { FC } from 'react';
|
|
2
2
|
import { OnChange } from '../../lib/_common/input';
|
|
3
3
|
import './textarea.scss';
|
|
4
|
-
|
|
4
|
+
interface Props {
|
|
5
5
|
name: string;
|
|
6
6
|
value: string;
|
|
7
|
+
id?: string;
|
|
7
8
|
placeholder?: string;
|
|
8
9
|
onChange: OnChange;
|
|
9
|
-
}
|
|
10
|
+
}
|
|
10
11
|
export declare const GoATextArea: FC<Props>;
|
|
11
12
|
export default GoATextArea;
|
|
@@ -595,11 +595,12 @@ 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) {
|
|
602
|
-
var
|
|
602
|
+
var id = _ref.id,
|
|
603
|
+
name = _ref.name,
|
|
603
604
|
value = _ref.value,
|
|
604
605
|
type = _ref.type,
|
|
605
606
|
disabled = _ref.disabled,
|
|
@@ -613,6 +614,7 @@ var GoAInput = function GoAInput(_ref) {
|
|
|
613
614
|
}, /*#__PURE__*/React.createElement(GoAIcon, {
|
|
614
615
|
type: leadingIcon
|
|
615
616
|
})), /*#__PURE__*/React.createElement("input", {
|
|
617
|
+
id: id,
|
|
616
618
|
className: leadingIcon ? 'input--leading-icon' : '',
|
|
617
619
|
type: type,
|
|
618
620
|
name: name,
|
|
@@ -625,15 +627,17 @@ var GoAInput = function GoAInput(_ref) {
|
|
|
625
627
|
}));
|
|
626
628
|
};
|
|
627
629
|
|
|
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
|
|
630
|
+
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
631
|
styleInject(css_248z$3);
|
|
630
632
|
|
|
631
633
|
var GoATextArea = function GoATextArea(_ref) {
|
|
632
|
-
var
|
|
634
|
+
var id = _ref.id,
|
|
635
|
+
name = _ref.name,
|
|
633
636
|
value = _ref.value,
|
|
634
637
|
placeholder = _ref.placeholder,
|
|
635
638
|
_onChange = _ref.onChange;
|
|
636
639
|
return /*#__PURE__*/React.createElement("textarea", {
|
|
640
|
+
id: id,
|
|
637
641
|
name: name,
|
|
638
642
|
className: "goa-textarea",
|
|
639
643
|
placeholder: placeholder,
|
|
@@ -801,7 +805,7 @@ var GoATransitionSequence = function GoATransitionSequence(props) {
|
|
|
801
805
|
}, null);
|
|
802
806
|
};
|
|
803
807
|
|
|
804
|
-
var css_248z$6 = "/* 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
|
|
808
|
+
var css_248z$6 = "/* 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 --modal-spacing: 1.75rem;\n --button-min-width: 5rem;\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 Container =========================================================================== */\n.modal-container {\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: var(--modal-spacing);\n flex: 0 0 auto;\n}\n\n.modal-actions button {\n min-width: var(--button-min-width);\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 var(--modal-spacing);\n margin-right: 40px; /* close icon spacing */\n flex: 0 0 auto;\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: 1rem;\n right: 1rem;\n}\n";
|
|
805
809
|
styleInject(css_248z$6);
|
|
806
810
|
|
|
807
811
|
/**
|
|
@@ -863,7 +867,7 @@ var GoAModal = function GoAModal(_ref) {
|
|
|
863
867
|
className: "modal-root",
|
|
864
868
|
"data-testid": testId,
|
|
865
869
|
"data-state": getState()
|
|
866
|
-
}, /*#__PURE__*/React.createElement(
|
|
870
|
+
}, /*#__PURE__*/React.createElement(Container, {
|
|
867
871
|
onClick: onClose
|
|
868
872
|
}, children), /*#__PURE__*/React.createElement(Background, {
|
|
869
873
|
onClick: function onClick() {
|
|
@@ -893,7 +897,7 @@ var GoAModalContent = function GoAModalContent(_ref3) {
|
|
|
893
897
|
return /*#__PURE__*/React.createElement(GoAScrollable, {
|
|
894
898
|
testId: testId,
|
|
895
899
|
vertical: true,
|
|
896
|
-
hPadding: 1.
|
|
900
|
+
hPadding: 1.75
|
|
897
901
|
}, children);
|
|
898
902
|
}; // *************
|
|
899
903
|
// GoAModalTitle
|
|
@@ -909,11 +913,11 @@ var GoAModalTitle = function GoAModalTitle(_ref4) {
|
|
|
909
913
|
}; // ******************************************************************************
|
|
910
914
|
// Private Components
|
|
911
915
|
// ******************************************************************************
|
|
912
|
-
//
|
|
913
|
-
//
|
|
914
|
-
//
|
|
916
|
+
// ******************************************
|
|
917
|
+
// Container - Contains all the content items
|
|
918
|
+
// ******************************************
|
|
915
919
|
|
|
916
|
-
var
|
|
920
|
+
var Container = function Container(_ref5) {
|
|
917
921
|
var children = _ref5.children,
|
|
918
922
|
onClick = _ref5.onClick;
|
|
919
923
|
return /*#__PURE__*/React.createElement("div", {
|
|
@@ -925,10 +929,10 @@ var Content = function Content(_ref5) {
|
|
|
925
929
|
variant: "simple",
|
|
926
930
|
onClick: onClick
|
|
927
931
|
})), /*#__PURE__*/React.createElement("div", {
|
|
928
|
-
className: "modal-
|
|
932
|
+
className: "modal-container"
|
|
929
933
|
}, children), onClick && /*#__PURE__*/React.createElement("div", {
|
|
930
934
|
style: {
|
|
931
|
-
minHeight: '
|
|
935
|
+
minHeight: '1.75rem'
|
|
932
936
|
}
|
|
933
937
|
}));
|
|
934
938
|
}; // ****************
|
|
@@ -977,12 +981,12 @@ var GoAFormItem = function GoAFormItem(_ref) {
|
|
|
977
981
|
var children = _ref.children,
|
|
978
982
|
helpText = _ref.helpText,
|
|
979
983
|
error = _ref.error;
|
|
980
|
-
var className = error ? "goa-form-item error" : "goa-form-item";
|
|
984
|
+
var className = error ? "goa-form-item goa-state--error" : "goa-form-item";
|
|
981
985
|
return /*#__PURE__*/React.createElement("div", {
|
|
982
986
|
className: className
|
|
983
|
-
}, children, /*#__PURE__*/React.createElement("div", {
|
|
987
|
+
}, children, error && /*#__PURE__*/React.createElement("div", {
|
|
984
988
|
className: "error-msg"
|
|
985
|
-
}, error), helpText &&
|
|
989
|
+
}, error), helpText && /*#__PURE__*/React.createElement("div", {
|
|
986
990
|
id: "helpText",
|
|
987
991
|
className: "help-msg"
|
|
988
992
|
}, helpText));
|
|
@@ -997,7 +1001,7 @@ var GoAFormActions = function GoAFormActions(_ref) {
|
|
|
997
1001
|
}, children);
|
|
998
1002
|
};
|
|
999
1003
|
|
|
1000
|
-
var css_248z$7 = "/*
|
|
1004
|
+
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
1005
|
styleInject(css_248z$7);
|
|
1002
1006
|
|
|
1003
1007
|
var GoAForm = function GoAForm(_ref) {
|
|
@@ -601,11 +601,12 @@
|
|
|
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) {
|
|
608
|
-
var
|
|
608
|
+
var id = _ref.id,
|
|
609
|
+
name = _ref.name,
|
|
609
610
|
value = _ref.value,
|
|
610
611
|
type = _ref.type,
|
|
611
612
|
disabled = _ref.disabled,
|
|
@@ -619,6 +620,7 @@
|
|
|
619
620
|
}, /*#__PURE__*/React__default.createElement(GoAIcon, {
|
|
620
621
|
type: leadingIcon
|
|
621
622
|
})), /*#__PURE__*/React__default.createElement("input", {
|
|
623
|
+
id: id,
|
|
622
624
|
className: leadingIcon ? 'input--leading-icon' : '',
|
|
623
625
|
type: type,
|
|
624
626
|
name: name,
|
|
@@ -631,15 +633,17 @@
|
|
|
631
633
|
}));
|
|
632
634
|
};
|
|
633
635
|
|
|
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
|
|
636
|
+
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
637
|
styleInject(css_248z$3);
|
|
636
638
|
|
|
637
639
|
var GoATextArea = function GoATextArea(_ref) {
|
|
638
|
-
var
|
|
640
|
+
var id = _ref.id,
|
|
641
|
+
name = _ref.name,
|
|
639
642
|
value = _ref.value,
|
|
640
643
|
placeholder = _ref.placeholder,
|
|
641
644
|
_onChange = _ref.onChange;
|
|
642
645
|
return /*#__PURE__*/React__default.createElement("textarea", {
|
|
646
|
+
id: id,
|
|
643
647
|
name: name,
|
|
644
648
|
className: "goa-textarea",
|
|
645
649
|
placeholder: placeholder,
|
|
@@ -807,7 +811,7 @@
|
|
|
807
811
|
}, null);
|
|
808
812
|
};
|
|
809
813
|
|
|
810
|
-
var css_248z$6 = "/* 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
|
|
814
|
+
var css_248z$6 = "/* 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 --modal-spacing: 1.75rem;\n --button-min-width: 5rem;\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 Container =========================================================================== */\n.modal-container {\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: var(--modal-spacing);\n flex: 0 0 auto;\n}\n\n.modal-actions button {\n min-width: var(--button-min-width);\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 var(--modal-spacing);\n margin-right: 40px; /* close icon spacing */\n flex: 0 0 auto;\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: 1rem;\n right: 1rem;\n}\n";
|
|
811
815
|
styleInject(css_248z$6);
|
|
812
816
|
|
|
813
817
|
/**
|
|
@@ -869,7 +873,7 @@
|
|
|
869
873
|
className: "modal-root",
|
|
870
874
|
"data-testid": testId,
|
|
871
875
|
"data-state": getState()
|
|
872
|
-
}, /*#__PURE__*/React__default.createElement(
|
|
876
|
+
}, /*#__PURE__*/React__default.createElement(Container, {
|
|
873
877
|
onClick: onClose
|
|
874
878
|
}, children), /*#__PURE__*/React__default.createElement(Background, {
|
|
875
879
|
onClick: function onClick() {
|
|
@@ -899,7 +903,7 @@
|
|
|
899
903
|
return /*#__PURE__*/React__default.createElement(GoAScrollable, {
|
|
900
904
|
testId: testId,
|
|
901
905
|
vertical: true,
|
|
902
|
-
hPadding: 1.
|
|
906
|
+
hPadding: 1.75
|
|
903
907
|
}, children);
|
|
904
908
|
}; // *************
|
|
905
909
|
// GoAModalTitle
|
|
@@ -915,11 +919,11 @@
|
|
|
915
919
|
}; // ******************************************************************************
|
|
916
920
|
// Private Components
|
|
917
921
|
// ******************************************************************************
|
|
918
|
-
//
|
|
919
|
-
//
|
|
920
|
-
//
|
|
922
|
+
// ******************************************
|
|
923
|
+
// Container - Contains all the content items
|
|
924
|
+
// ******************************************
|
|
921
925
|
|
|
922
|
-
var
|
|
926
|
+
var Container = function Container(_ref5) {
|
|
923
927
|
var children = _ref5.children,
|
|
924
928
|
onClick = _ref5.onClick;
|
|
925
929
|
return /*#__PURE__*/React__default.createElement("div", {
|
|
@@ -931,10 +935,10 @@
|
|
|
931
935
|
variant: "simple",
|
|
932
936
|
onClick: onClick
|
|
933
937
|
})), /*#__PURE__*/React__default.createElement("div", {
|
|
934
|
-
className: "modal-
|
|
938
|
+
className: "modal-container"
|
|
935
939
|
}, children), onClick && /*#__PURE__*/React__default.createElement("div", {
|
|
936
940
|
style: {
|
|
937
|
-
minHeight: '
|
|
941
|
+
minHeight: '1.75rem'
|
|
938
942
|
}
|
|
939
943
|
}));
|
|
940
944
|
}; // ****************
|
|
@@ -983,12 +987,12 @@
|
|
|
983
987
|
var children = _ref.children,
|
|
984
988
|
helpText = _ref.helpText,
|
|
985
989
|
error = _ref.error;
|
|
986
|
-
var className = error ? "goa-form-item error" : "goa-form-item";
|
|
990
|
+
var className = error ? "goa-form-item goa-state--error" : "goa-form-item";
|
|
987
991
|
return /*#__PURE__*/React__default.createElement("div", {
|
|
988
992
|
className: className
|
|
989
|
-
}, children, /*#__PURE__*/React__default.createElement("div", {
|
|
993
|
+
}, children, error && /*#__PURE__*/React__default.createElement("div", {
|
|
990
994
|
className: "error-msg"
|
|
991
|
-
}, error), helpText &&
|
|
995
|
+
}, error), helpText && /*#__PURE__*/React__default.createElement("div", {
|
|
992
996
|
id: "helpText",
|
|
993
997
|
className: "help-msg"
|
|
994
998
|
}, helpText));
|
|
@@ -1003,7 +1007,7 @@
|
|
|
1003
1007
|
}, children);
|
|
1004
1008
|
};
|
|
1005
1009
|
|
|
1006
|
-
var css_248z$7 = "/*
|
|
1010
|
+
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
1011
|
styleInject(css_248z$7);
|
|
1008
1012
|
|
|
1009
1013
|
var GoAForm = function GoAForm(_ref) {
|
|
@@ -6,10 +6,11 @@ interface Props {
|
|
|
6
6
|
name: string;
|
|
7
7
|
selectedValues: string[];
|
|
8
8
|
onChange: (name: string, values: string[]) => void;
|
|
9
|
-
leadingIcon?: GoAIconType;
|
|
10
|
-
multiSelect?: boolean;
|
|
11
9
|
disabled?: boolean;
|
|
10
|
+
leadingIcon?: GoAIconType;
|
|
12
11
|
maxHeight?: number;
|
|
12
|
+
multiSelect?: boolean;
|
|
13
|
+
placeholder?: string;
|
|
13
14
|
}
|
|
14
15
|
export declare const GoADropdown: FC<Props>;
|
|
15
16
|
export default GoADropdown;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
|
|
1
|
+
import { FunctionComponent } from 'react';
|
|
2
2
|
import './microsite-logo.scss';
|
|
3
3
|
export interface MicrositeLogoProps {
|
|
4
4
|
serviceName: string;
|
|
5
5
|
serviceHome: string;
|
|
6
6
|
}
|
|
7
|
-
export declare const
|
|
8
|
-
export default
|
|
7
|
+
export declare const GoaMicrositeLogo: FunctionComponent<MicrositeLogoProps>;
|
|
8
|
+
export default GoaMicrositeLogo;
|
|
@@ -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";
|
|
@@ -1432,7 +1432,7 @@ styleInject(css_248z$7);
|
|
|
1432
1432
|
|
|
1433
1433
|
/* eslint-disable-next-line */
|
|
1434
1434
|
|
|
1435
|
-
var
|
|
1435
|
+
var GoaMicrositeLogo = function GoaMicrositeLogo(props) {
|
|
1436
1436
|
return /*#__PURE__*/React.createElement("a", {
|
|
1437
1437
|
href: props.serviceHome,
|
|
1438
1438
|
"aria-label": props.serviceHome,
|
|
@@ -1469,7 +1469,7 @@ var GoAHeader = function GoAHeader(props) {
|
|
|
1469
1469
|
className: "web-link"
|
|
1470
1470
|
}, "Alberta Government"), " service")), /*#__PURE__*/React.createElement("div", {
|
|
1471
1471
|
className: "goa-header goa-microsite-header"
|
|
1472
|
-
}, /*#__PURE__*/React.createElement(
|
|
1472
|
+
}, /*#__PURE__*/React.createElement(GoaMicrositeLogo, {
|
|
1473
1473
|
serviceName: props.serviceName,
|
|
1474
1474
|
serviceHome: props.serviceHome
|
|
1475
1475
|
}), /*#__PURE__*/React.createElement("div", null, props.children)));
|
|
@@ -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";
|
|
@@ -2095,13 +2095,13 @@ var GoAScrollable = function GoAScrollable(_ref) {
|
|
|
2095
2095
|
var css_248z$g = "/* Fade in */\n.fade-in-init {\n display: none;\n}\n.fade-in-start {\n display: block;\n opacity: 0;\n transition: opacity 200ms ease-in;\n}\n.fade-in-active {\n opacity: 1;\n}\n\n/* Fade out */\n.fade-out-init {\n display: block;\n}\n.fade-out-start {\n display: block;\n opacity: 1;\n transition: opacity 200ms ease-in;\n}\n.fade-out-active {\n opacity: 0;\n}\n\n/* ======= Slide in/out Up */\n\n/* Slide in up */\n.slide-in-up-init {\n transition: translateY(0);\n display: none;\n}\n.slide-in-up-start {\n display: block;\n transform: translateY(100vh);\n transition: transform 300ms ease-out;\n}\n.slide-in-up-active {\n transform: translateY(0);\n}\n\n/* Slide out up */\n.slide-out-up-init {\n transform: translateY(0);\n display: block;\n}\n.slide-out-up-start {\n transition: transform 300ms ease-in;\n}\n.slide-out-up-active {\n transform: translateY(-100vh);\n}\n\n/* ======= Slide in/out Down */\n\n/* Slide in down */\n.slide-in-down-init {\n transition: translateY(0);\n display: none;\n}\n.slide-in-down-start {\n display: block;\n transform: translateY(-100vh);\n transition: transform 300ms ease-out;\n}\n.slide-in-down-active {\n transform: translateY(0);\n}\n\n/* Slide out down */\n.slide-out-down-init {\n transform: translateY(0);\n display: block;\n}\n.slide-out-down-start {\n transform: translateY(0);\n transition: transform 300ms ease-in;\n}\n.slide-out-down-active {\n transform: translateY(100vh);\n}\n/* ======= Slide in/out Left */\n\n/* Slide in left */\n.slide-in-left-init {\n transition: translateX(0);\n display: none;\n}\n.slide-in-left-start {\n display: block;\n transform: translateX(-100vw);\n transition: transform 300ms ease-out;\n}\n.slide-in-left-active {\n transform: translateX(0);\n}\n\n/* Slide out left */\n.slide-out-left-init {\n transform: translateX(0);\n display: block;\n}\n.slide-out-left-start {\n transform: translateX(0);\n transition: transform 300ms ease-in;\n}\n.slide-out-left-active {\n transform: translateX(-100vw);\n}\n\n/* ======= Slide in/out Right */\n\n/* Slide in left */\n.slide-in-right-init {\n transition: translateX(0);\n display: none;\n}\n.slide-in-right-start {\n display: block;\n transform: translateX(100vw);\n transition: transform 300ms ease-out;\n}\n.slide-in-right-active {\n transform: translateX(0);\n}\n\n/* Slide out right */\n.slide-out-right-init {\n transform: translateX(0);\n display: block;\n}\n.slide-out-right-start {\n transform: translateX(0);\n transition: transform 300ms ease-in;\n}\n.slide-out-right-active {\n transform: translateX(100vw);\n}\n";
|
|
2096
2096
|
styleInject(css_248z$g);
|
|
2097
2097
|
|
|
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
|
|
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 --modal-spacing: 1.75rem;\n --button-min-width: 5rem;\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 Container =========================================================================== */\n.modal-container {\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: var(--modal-spacing);\n flex: 0 0 auto;\n}\n\n.modal-actions button {\n min-width: var(--button-min-width);\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 var(--modal-spacing);\n margin-right: 40px; /* close icon spacing */\n flex: 0 0 auto;\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: 1rem;\n right: 1rem;\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
|
});
|
|
@@ -2236,7 +2240,7 @@ var GoADropdown = function GoADropdown(props) {
|
|
|
2236
2240
|
type: props.leadingIcon
|
|
2237
2241
|
})), /*#__PURE__*/React.createElement("input", {
|
|
2238
2242
|
readOnly: true,
|
|
2239
|
-
placeholder:
|
|
2243
|
+
placeholder: props.placeholder,
|
|
2240
2244
|
value: getSelectedLabel()
|
|
2241
2245
|
}), /*#__PURE__*/React.createElement(GoAIcon, {
|
|
2242
2246
|
type: "chevronDown"
|
|
@@ -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) {
|
|
@@ -2730,4 +2730,4 @@ GoAElementLoader.propTypes = {
|
|
|
2730
2730
|
size: propTypes.number
|
|
2731
2731
|
};
|
|
2732
2732
|
|
|
2733
|
-
export { GoAButton, GoACallout, GoACard, GoACardGroup, GoACheckbox, GoADropdown, GoADropdownOption, GoAElementLoader, GoAHeader, GoAHeroBanner, GoAHeroBannerContent, GoAHeroBannerLink,
|
|
2733
|
+
export { GoAButton, GoACallout, GoACard, GoACardGroup, GoACheckbox, GoADropdown, GoADropdownOption, GoAElementLoader, GoAHeader, GoAHeroBanner, GoAHeroBannerContent, GoAHeroBannerLink, GoaMicrositeLogo as GoAMicrositeLogo, GoANotification, GoAPageLoader, GoARadio, GoARadioGroup, GoASkeletonContent, GoASkeletonGridColumnContent, GoASkeletonImageContent };
|
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";
|
|
@@ -1438,7 +1438,7 @@
|
|
|
1438
1438
|
|
|
1439
1439
|
/* eslint-disable-next-line */
|
|
1440
1440
|
|
|
1441
|
-
var
|
|
1441
|
+
var GoaMicrositeLogo = function GoaMicrositeLogo(props) {
|
|
1442
1442
|
return /*#__PURE__*/React__default.createElement("a", {
|
|
1443
1443
|
href: props.serviceHome,
|
|
1444
1444
|
"aria-label": props.serviceHome,
|
|
@@ -1475,7 +1475,7 @@
|
|
|
1475
1475
|
className: "web-link"
|
|
1476
1476
|
}, "Alberta Government"), " service")), /*#__PURE__*/React__default.createElement("div", {
|
|
1477
1477
|
className: "goa-header goa-microsite-header"
|
|
1478
|
-
}, /*#__PURE__*/React__default.createElement(
|
|
1478
|
+
}, /*#__PURE__*/React__default.createElement(GoaMicrositeLogo, {
|
|
1479
1479
|
serviceName: props.serviceName,
|
|
1480
1480
|
serviceHome: props.serviceHome
|
|
1481
1481
|
}), /*#__PURE__*/React__default.createElement("div", null, props.children)));
|
|
@@ -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";
|
|
@@ -2101,13 +2101,13 @@
|
|
|
2101
2101
|
var css_248z$g = "/* Fade in */\n.fade-in-init {\n display: none;\n}\n.fade-in-start {\n display: block;\n opacity: 0;\n transition: opacity 200ms ease-in;\n}\n.fade-in-active {\n opacity: 1;\n}\n\n/* Fade out */\n.fade-out-init {\n display: block;\n}\n.fade-out-start {\n display: block;\n opacity: 1;\n transition: opacity 200ms ease-in;\n}\n.fade-out-active {\n opacity: 0;\n}\n\n/* ======= Slide in/out Up */\n\n/* Slide in up */\n.slide-in-up-init {\n transition: translateY(0);\n display: none;\n}\n.slide-in-up-start {\n display: block;\n transform: translateY(100vh);\n transition: transform 300ms ease-out;\n}\n.slide-in-up-active {\n transform: translateY(0);\n}\n\n/* Slide out up */\n.slide-out-up-init {\n transform: translateY(0);\n display: block;\n}\n.slide-out-up-start {\n transition: transform 300ms ease-in;\n}\n.slide-out-up-active {\n transform: translateY(-100vh);\n}\n\n/* ======= Slide in/out Down */\n\n/* Slide in down */\n.slide-in-down-init {\n transition: translateY(0);\n display: none;\n}\n.slide-in-down-start {\n display: block;\n transform: translateY(-100vh);\n transition: transform 300ms ease-out;\n}\n.slide-in-down-active {\n transform: translateY(0);\n}\n\n/* Slide out down */\n.slide-out-down-init {\n transform: translateY(0);\n display: block;\n}\n.slide-out-down-start {\n transform: translateY(0);\n transition: transform 300ms ease-in;\n}\n.slide-out-down-active {\n transform: translateY(100vh);\n}\n/* ======= Slide in/out Left */\n\n/* Slide in left */\n.slide-in-left-init {\n transition: translateX(0);\n display: none;\n}\n.slide-in-left-start {\n display: block;\n transform: translateX(-100vw);\n transition: transform 300ms ease-out;\n}\n.slide-in-left-active {\n transform: translateX(0);\n}\n\n/* Slide out left */\n.slide-out-left-init {\n transform: translateX(0);\n display: block;\n}\n.slide-out-left-start {\n transform: translateX(0);\n transition: transform 300ms ease-in;\n}\n.slide-out-left-active {\n transform: translateX(-100vw);\n}\n\n/* ======= Slide in/out Right */\n\n/* Slide in left */\n.slide-in-right-init {\n transition: translateX(0);\n display: none;\n}\n.slide-in-right-start {\n display: block;\n transform: translateX(100vw);\n transition: transform 300ms ease-out;\n}\n.slide-in-right-active {\n transform: translateX(0);\n}\n\n/* Slide out right */\n.slide-out-right-init {\n transform: translateX(0);\n display: block;\n}\n.slide-out-right-start {\n transform: translateX(0);\n transition: transform 300ms ease-in;\n}\n.slide-out-right-active {\n transform: translateX(100vw);\n}\n";
|
|
2102
2102
|
styleInject(css_248z$g);
|
|
2103
2103
|
|
|
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
|
|
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 --modal-spacing: 1.75rem;\n --button-min-width: 5rem;\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 Container =========================================================================== */\n.modal-container {\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: var(--modal-spacing);\n flex: 0 0 auto;\n}\n\n.modal-actions button {\n min-width: var(--button-min-width);\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 var(--modal-spacing);\n margin-right: 40px; /* close icon spacing */\n flex: 0 0 auto;\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: 1rem;\n right: 1rem;\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
|
});
|
|
@@ -2242,7 +2246,7 @@
|
|
|
2242
2246
|
type: props.leadingIcon
|
|
2243
2247
|
})), /*#__PURE__*/React__default.createElement("input", {
|
|
2244
2248
|
readOnly: true,
|
|
2245
|
-
placeholder:
|
|
2249
|
+
placeholder: props.placeholder,
|
|
2246
2250
|
value: getSelectedLabel()
|
|
2247
2251
|
}), /*#__PURE__*/React__default.createElement(GoAIcon, {
|
|
2248
2252
|
type: "chevronDown"
|
|
@@ -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) {
|
|
@@ -2748,7 +2748,7 @@
|
|
|
2748
2748
|
exports.GoAHeroBanner = GoAHeroBanner;
|
|
2749
2749
|
exports.GoAHeroBannerContent = GoAHeroBannerContent;
|
|
2750
2750
|
exports.GoAHeroBannerLink = GoAHeroBannerLink;
|
|
2751
|
-
exports.GoAMicrositeLogo =
|
|
2751
|
+
exports.GoAMicrositeLogo = GoaMicrositeLogo;
|
|
2752
2752
|
exports.GoANotification = GoANotification;
|
|
2753
2753
|
exports.GoAPageLoader = GoAPageLoader;
|
|
2754
2754
|
exports.GoARadio = GoARadio;
|