@abgov/react-components 3.4.0-beta.29 → 3.4.0-beta.32
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/experimental/experimental/form/form.row.d.ts +2 -0
- package/experimental/experimental/form/index.d.ts +2 -0
- package/experimental/experimental/form/validators.d.ts +10 -2
- package/experimental/experimental/input/input.component.d.ts +1 -1
- package/experimental/react-components.esm.js +9 -8
- package/experimental/react-components.umd.js +9 -8
- package/index.d.ts +2 -1
- package/lib/radio-group/radio-group.d.ts +2 -2
- package/lib/radio-group/radio.d.ts +2 -2
- package/package.json +1 -1
- package/react-components.esm.js +79 -67
- package/react-components.umd.js +79 -67
- package/lib/_common/errorState.d.ts +0 -5
|
@@ -1,2 +1,10 @@
|
|
|
1
|
-
export declare
|
|
2
|
-
export declare
|
|
1
|
+
export declare type FormValidatorFn = (val: string) => [boolean, string];
|
|
2
|
+
export declare class FormValidator {
|
|
3
|
+
private items;
|
|
4
|
+
constructor();
|
|
5
|
+
add(fieldName: string, validators: FormValidatorFn[]): void;
|
|
6
|
+
validate(data: Record<string, string>): Record<string, string>;
|
|
7
|
+
}
|
|
8
|
+
export declare const requiredFieldValidator: FormValidatorFn;
|
|
9
|
+
export declare const emailFormatValidator: FormValidatorFn;
|
|
10
|
+
export declare const phoneNumberFormatValidator: FormValidatorFn;
|
|
@@ -595,7 +595,7 @@ function GoAIconButton(_ref) {
|
|
|
595
595
|
}));
|
|
596
596
|
}
|
|
597
597
|
|
|
598
|
-
var css_248z$2 = ":root {\n /* font-size */\n --fs-xs: 0.75rem;\n --fs-sm: 0.875rem;\n --fs-base: 1.125rem;\n
|
|
598
|
+
var css_248z$2 = ":root {\n /* font-size */\n --fs-xs: 0.75rem;\n --fs-sm: 0.875rem;\n --fs-base: 1.125rem;\n --fs-lg: 1.25rem;\n --fs-xl: 1.5rem;\n --fs-2xl: 2.25rem;\n --fs-3xl: 3rem;\n /* font-weight */\n --fw-thin: 100;\n --fw-light: 300;\n --fw-regular: 400;\n --fw-medium: 500;\n --fw-bold: 700;\n --fw-black: 900;\n --input-padding: 0.5rem;\n --input-border-radius: 0.25rem;\n --input-font-size: var(--fs-base); }\n\n:root {\n --color-white: #fff;\n --color-black: #333;\n --color-gray-l5: #f1f1f1;\n --color-gray-l2: #adadad;\n --color-gray-l1: #dcdcdc;\n --color-gray-d1: #666;\n --color-gray-d3: #333;\n --color-orange: #feba35;\n --color-red: #ec040b;\n --color-green: hsl(148, 100%, 26%);\n --color-primary: #0070c4;\n --color-primary-d1: #004f84;\n --color-primary--hover: var(--color-primary-d1);\n --color-text: var(--color-gray-d3);\n --color-error: var(--color-red);\n --color-disabled: var(--color-gray-l2);\n --color-input-background: var(--color-white);\n --color-input-border: var(--color-gray-d1);\n --color-input-border--hover: var(--color-primary-d1);\n --color-input: var(--color-gray-d3);\n --color-input--focused: var(--color-orange);\n --color-button-primary: var(--color-primary);\n --color-button-primary--hover: var(--color-primary-d1);\n --color-button-tertiary: var(--color-gray-l2);\n --color-button-tertiary--hover: var(--color-gray-l5); }\n\n.goa-input {\n position: relative; }\n\n.goa-input-leading-icon {\n position: absolute;\n display: flex;\n align-items: center;\n top: 0;\n bottom: 0;\n left: 0.5rem; }\n\n.goa-input input {\n outline: none;\n transition: box-shadow 0.1s ease-in;\n border: 1px solid var(--color-input-border);\n border-radius: 3px;\n background: white;\n color: var(--color-input);\n padding: var(--input-padding);\n font-size: var(--input-font-size);\n display: block;\n width: 100%;\n line-height: 1.5rem;\n padding: 0.5rem 2rem 0.5rem 0.5rem; }\n .goa-input input:hover {\n border-color: var(--color-input-border--hover); }\n .goa-input input:active, .goa-input input:focus {\n box-shadow: 0 0 0 3px var(--color-input--focused); }\n .goa-input input:disabled {\n border-color: var(--color-disabled); }\n .goa-input input:disabled:hover {\n border-color: var(--color-disabled); }\n .goa-input input:disabled:focus {\n box-shadow: none; }\n\n.goa-input input:disabled {\n border-color: var(--color-disabled); }\n .goa-input input:disabled:hover {\n border-color: var(--color-disabled); }\n .goa-input input:disabled:focus {\n box-shadow: none; }\n\n.goa-input svg {\n width: 80%; }\n\n.goa-input .input--leading-icon {\n padding-left: 2rem; }\n\n.goa-state--error .goa-input input {\n border: 2px solid var(--color-error); }\n";
|
|
599
599
|
styleInject(css_248z$2);
|
|
600
600
|
|
|
601
601
|
var GoAInput = function GoAInput(_ref) {
|
|
@@ -625,7 +625,7 @@ var GoAInput = function GoAInput(_ref) {
|
|
|
625
625
|
}));
|
|
626
626
|
};
|
|
627
627
|
|
|
628
|
-
var css_248z$3 = ":root {\n /* font-size */\n --fs-xs: 0.75rem;\n --fs-sm: 0.875rem;\n --fs-base: 1.125rem;\n
|
|
628
|
+
var css_248z$3 = ":root {\n /* font-size */\n --fs-xs: 0.75rem;\n --fs-sm: 0.875rem;\n --fs-base: 1.125rem;\n --fs-lg: 1.25rem;\n --fs-xl: 1.5rem;\n --fs-2xl: 2.25rem;\n --fs-3xl: 3rem;\n /* font-weight */\n --fw-thin: 100;\n --fw-light: 300;\n --fw-regular: 400;\n --fw-medium: 500;\n --fw-bold: 700;\n --fw-black: 900;\n --input-padding: 0.5rem;\n --input-border-radius: 0.25rem;\n --input-font-size: var(--fs-base); }\n\n:root {\n --color-white: #fff;\n --color-black: #333;\n --color-gray-l5: #f1f1f1;\n --color-gray-l2: #adadad;\n --color-gray-l1: #dcdcdc;\n --color-gray-d1: #666;\n --color-gray-d3: #333;\n --color-orange: #feba35;\n --color-red: #ec040b;\n --color-green: hsl(148, 100%, 26%);\n --color-primary: #0070c4;\n --color-primary-d1: #004f84;\n --color-primary--hover: var(--color-primary-d1);\n --color-text: var(--color-gray-d3);\n --color-error: var(--color-red);\n --color-disabled: var(--color-gray-l2);\n --color-input-background: var(--color-white);\n --color-input-border: var(--color-gray-d1);\n --color-input-border--hover: var(--color-primary-d1);\n --color-input: var(--color-gray-d3);\n --color-input--focused: var(--color-orange);\n --color-button-primary: var(--color-primary);\n --color-button-primary--hover: var(--color-primary-d1);\n --color-button-tertiary: var(--color-gray-l2);\n --color-button-tertiary--hover: var(--color-gray-l5); }\n\n.goa-textarea {\n outline: none;\n transition: box-shadow 0.1s ease-in;\n border: 1px solid var(--color-input-border);\n border-radius: 3px;\n background: white;\n color: var(--color-input);\n padding: var(--input-padding);\n font-size: var(--input-font-size);\n display: block;\n width: 100%; }\n .goa-textarea:hover {\n border-color: var(--color-input-border--hover); }\n .goa-textarea:active, .goa-textarea:focus {\n box-shadow: 0 0 0 3px var(--color-input--focused); }\n .goa-textarea:disabled {\n border-color: var(--color-disabled); }\n .goa-textarea:disabled:hover {\n border-color: var(--color-disabled); }\n .goa-textarea:disabled:focus {\n box-shadow: none; }\n\n.goa-textarea:disabled {\n border-color: var(--color-disabled); }\n .goa-textarea:disabled:hover {\n border-color: var(--color-disabled); }\n .goa-textarea:disabled:focus {\n box-shadow: none; }\n\n.goa-state--error textarea,\n.goa-state--error textarea:hover {\n border: 2px solid var(--color-red); }\n";
|
|
629
629
|
styleInject(css_248z$3);
|
|
630
630
|
|
|
631
631
|
var GoATextArea = function GoATextArea(_ref) {
|
|
@@ -639,8 +639,9 @@ var GoATextArea = function GoATextArea(_ref) {
|
|
|
639
639
|
placeholder: placeholder,
|
|
640
640
|
onChange: function onChange(e) {
|
|
641
641
|
return _onChange(name, e.target.value);
|
|
642
|
-
}
|
|
643
|
-
|
|
642
|
+
},
|
|
643
|
+
value: value
|
|
644
|
+
});
|
|
644
645
|
};
|
|
645
646
|
|
|
646
647
|
function _slicedToArray(arr, i) {
|
|
@@ -976,12 +977,12 @@ var GoAFormItem = function GoAFormItem(_ref) {
|
|
|
976
977
|
var children = _ref.children,
|
|
977
978
|
helpText = _ref.helpText,
|
|
978
979
|
error = _ref.error;
|
|
979
|
-
var className = error ? "goa-form-item error" : "goa-form-item";
|
|
980
|
+
var className = error ? "goa-form-item goa-state--error" : "goa-form-item";
|
|
980
981
|
return /*#__PURE__*/React.createElement("div", {
|
|
981
982
|
className: className
|
|
982
|
-
}, children, /*#__PURE__*/React.createElement("div", {
|
|
983
|
+
}, children, error && /*#__PURE__*/React.createElement("div", {
|
|
983
984
|
className: "error-msg"
|
|
984
|
-
}, error), helpText &&
|
|
985
|
+
}, error), helpText && /*#__PURE__*/React.createElement("div", {
|
|
985
986
|
id: "helpText",
|
|
986
987
|
className: "help-msg"
|
|
987
988
|
}, helpText));
|
|
@@ -996,7 +997,7 @@ var GoAFormActions = function GoAFormActions(_ref) {
|
|
|
996
997
|
}, children);
|
|
997
998
|
};
|
|
998
999
|
|
|
999
|
-
var css_248z$7 = "/*
|
|
1000
|
+
var css_248z$7 = ":root {\n --color-white: #fff;\n --color-black: #333;\n --color-gray-l5: #f1f1f1;\n --color-gray-l2: #adadad;\n --color-gray-l1: #dcdcdc;\n --color-gray-d1: #666;\n --color-gray-d3: #333;\n --color-orange: #feba35;\n --color-red: #ec040b;\n --color-green: hsl(148, 100%, 26%);\n --color-primary: #0070c4;\n --color-primary-d1: #004f84;\n --color-primary--hover: var(--color-primary-d1);\n --color-text: var(--color-gray-d3);\n --color-error: var(--color-red);\n --color-disabled: var(--color-gray-l2);\n --color-input-background: var(--color-white);\n --color-input-border: var(--color-gray-d1);\n --color-input-border--hover: var(--color-primary-d1);\n --color-input: var(--color-gray-d3);\n --color-input--focused: var(--color-orange);\n --color-button-primary: var(--color-primary);\n --color-button-primary--hover: var(--color-primary-d1);\n --color-button-tertiary: var(--color-gray-l2);\n --color-button-tertiary--hover: var(--color-gray-l5); }\n\n:root {\n /* font-size */\n --fs-xs: 0.75rem;\n --fs-sm: 0.875rem;\n --fs-base: 1.125rem;\n --fs-lg: 1.25rem;\n --fs-xl: 1.5rem;\n --fs-2xl: 2.25rem;\n --fs-3xl: 3rem;\n /* font-weight */\n --fw-thin: 100;\n --fw-light: 300;\n --fw-regular: 400;\n --fw-medium: 500;\n --fw-bold: 700;\n --fw-black: 900;\n --input-padding: 0.5rem;\n --input-border-radius: 0.25rem;\n --input-font-size: var(--fs-base); }\n\n.goa-form {\n box-sizing: border-box; }\n\n.goa-form *,\n.goa-form *:before,\n.goa-form *:after {\n box-sizing: inherit; }\n\n.goa-form-row {\n display: flex;\n flex-direction: column;\n justify-content: space-between; }\n\n@media screen and (min-width: 640px) {\n .goa-form-row {\n gap: 1.75rem;\n flex-direction: row; } }\n\n.goa-form-item {\n flex: 1 1 auto;\n margin-bottom: 1rem; }\n .goa-form-item label {\n display: block;\n font-weight: bold;\n color: #333;\n font-size: var(--fs-base);\n line-height: calc(var(--fs-base) + 1rem); }\n .goa-form-item label em {\n color: var(--color-gray-d1);\n font-style: normal;\n font-weight: var(--fw-regular);\n font-size: var(--fs-sm); }\n .goa-form-item input,\n .goa-form-item textarea {\n display: block;\n width: 100%;\n font-size: var(--fs-base); }\n .goa-form-item.goa-state--error .error-msg {\n font-size: var(--fs-sm);\n line-height: calc(var(--fs-sm) + 0.5rem);\n color: var(--color-red); }\n\n.help-msg {\n font-size: var(--fs-sm);\n color: var(--color-gray-d3);\n line-height: calc(var(--fs-sm) + 0.5rem); }\n\n.goa-form-actions {\n display: flex;\n flex-wrap: wrap;\n margin-top: 2rem; }\n .goa-form-actions button,\n .goa-form-actions .goa-link-button {\n margin: 0; }\n @media (max-width: 639px) {\n .goa-form-actions button,\n .goa-form-actions .goa-link-button {\n width: 100%; }\n .goa-form-actions button + button,\n .goa-form-actions button + .goa-link-button,\n .goa-form-actions .goa-link-button + button,\n .goa-form-actions .goa-link-button + .goa-link-button {\n margin-top: 0.5rem; } }\n @media (min-width: 640px) {\n .goa-form-actions button,\n .goa-form-actions .goa-link-button {\n min-width: 6rem; }\n .goa-form-actions button + button,\n .goa-form-actions button + .goa-link-button,\n .goa-form-actions .goa-link-button + button,\n .goa-form-actions .goa-link-button + .goa-link-button {\n margin-left: 0.5rem; } }\n\n.goa-form-actions--left {\n justify-content: flex-start; }\n\n.goa-form-actions--right {\n justify-content: flex-end; }\n";
|
|
1000
1001
|
styleInject(css_248z$7);
|
|
1001
1002
|
|
|
1002
1003
|
var GoAForm = function GoAForm(_ref) {
|
|
@@ -601,7 +601,7 @@
|
|
|
601
601
|
}));
|
|
602
602
|
}
|
|
603
603
|
|
|
604
|
-
var css_248z$2 = ":root {\n /* font-size */\n --fs-xs: 0.75rem;\n --fs-sm: 0.875rem;\n --fs-base: 1.125rem;\n
|
|
604
|
+
var css_248z$2 = ":root {\n /* font-size */\n --fs-xs: 0.75rem;\n --fs-sm: 0.875rem;\n --fs-base: 1.125rem;\n --fs-lg: 1.25rem;\n --fs-xl: 1.5rem;\n --fs-2xl: 2.25rem;\n --fs-3xl: 3rem;\n /* font-weight */\n --fw-thin: 100;\n --fw-light: 300;\n --fw-regular: 400;\n --fw-medium: 500;\n --fw-bold: 700;\n --fw-black: 900;\n --input-padding: 0.5rem;\n --input-border-radius: 0.25rem;\n --input-font-size: var(--fs-base); }\n\n:root {\n --color-white: #fff;\n --color-black: #333;\n --color-gray-l5: #f1f1f1;\n --color-gray-l2: #adadad;\n --color-gray-l1: #dcdcdc;\n --color-gray-d1: #666;\n --color-gray-d3: #333;\n --color-orange: #feba35;\n --color-red: #ec040b;\n --color-green: hsl(148, 100%, 26%);\n --color-primary: #0070c4;\n --color-primary-d1: #004f84;\n --color-primary--hover: var(--color-primary-d1);\n --color-text: var(--color-gray-d3);\n --color-error: var(--color-red);\n --color-disabled: var(--color-gray-l2);\n --color-input-background: var(--color-white);\n --color-input-border: var(--color-gray-d1);\n --color-input-border--hover: var(--color-primary-d1);\n --color-input: var(--color-gray-d3);\n --color-input--focused: var(--color-orange);\n --color-button-primary: var(--color-primary);\n --color-button-primary--hover: var(--color-primary-d1);\n --color-button-tertiary: var(--color-gray-l2);\n --color-button-tertiary--hover: var(--color-gray-l5); }\n\n.goa-input {\n position: relative; }\n\n.goa-input-leading-icon {\n position: absolute;\n display: flex;\n align-items: center;\n top: 0;\n bottom: 0;\n left: 0.5rem; }\n\n.goa-input input {\n outline: none;\n transition: box-shadow 0.1s ease-in;\n border: 1px solid var(--color-input-border);\n border-radius: 3px;\n background: white;\n color: var(--color-input);\n padding: var(--input-padding);\n font-size: var(--input-font-size);\n display: block;\n width: 100%;\n line-height: 1.5rem;\n padding: 0.5rem 2rem 0.5rem 0.5rem; }\n .goa-input input:hover {\n border-color: var(--color-input-border--hover); }\n .goa-input input:active, .goa-input input:focus {\n box-shadow: 0 0 0 3px var(--color-input--focused); }\n .goa-input input:disabled {\n border-color: var(--color-disabled); }\n .goa-input input:disabled:hover {\n border-color: var(--color-disabled); }\n .goa-input input:disabled:focus {\n box-shadow: none; }\n\n.goa-input input:disabled {\n border-color: var(--color-disabled); }\n .goa-input input:disabled:hover {\n border-color: var(--color-disabled); }\n .goa-input input:disabled:focus {\n box-shadow: none; }\n\n.goa-input svg {\n width: 80%; }\n\n.goa-input .input--leading-icon {\n padding-left: 2rem; }\n\n.goa-state--error .goa-input input {\n border: 2px solid var(--color-error); }\n";
|
|
605
605
|
styleInject(css_248z$2);
|
|
606
606
|
|
|
607
607
|
var GoAInput = function GoAInput(_ref) {
|
|
@@ -631,7 +631,7 @@
|
|
|
631
631
|
}));
|
|
632
632
|
};
|
|
633
633
|
|
|
634
|
-
var css_248z$3 = ":root {\n /* font-size */\n --fs-xs: 0.75rem;\n --fs-sm: 0.875rem;\n --fs-base: 1.125rem;\n
|
|
634
|
+
var css_248z$3 = ":root {\n /* font-size */\n --fs-xs: 0.75rem;\n --fs-sm: 0.875rem;\n --fs-base: 1.125rem;\n --fs-lg: 1.25rem;\n --fs-xl: 1.5rem;\n --fs-2xl: 2.25rem;\n --fs-3xl: 3rem;\n /* font-weight */\n --fw-thin: 100;\n --fw-light: 300;\n --fw-regular: 400;\n --fw-medium: 500;\n --fw-bold: 700;\n --fw-black: 900;\n --input-padding: 0.5rem;\n --input-border-radius: 0.25rem;\n --input-font-size: var(--fs-base); }\n\n:root {\n --color-white: #fff;\n --color-black: #333;\n --color-gray-l5: #f1f1f1;\n --color-gray-l2: #adadad;\n --color-gray-l1: #dcdcdc;\n --color-gray-d1: #666;\n --color-gray-d3: #333;\n --color-orange: #feba35;\n --color-red: #ec040b;\n --color-green: hsl(148, 100%, 26%);\n --color-primary: #0070c4;\n --color-primary-d1: #004f84;\n --color-primary--hover: var(--color-primary-d1);\n --color-text: var(--color-gray-d3);\n --color-error: var(--color-red);\n --color-disabled: var(--color-gray-l2);\n --color-input-background: var(--color-white);\n --color-input-border: var(--color-gray-d1);\n --color-input-border--hover: var(--color-primary-d1);\n --color-input: var(--color-gray-d3);\n --color-input--focused: var(--color-orange);\n --color-button-primary: var(--color-primary);\n --color-button-primary--hover: var(--color-primary-d1);\n --color-button-tertiary: var(--color-gray-l2);\n --color-button-tertiary--hover: var(--color-gray-l5); }\n\n.goa-textarea {\n outline: none;\n transition: box-shadow 0.1s ease-in;\n border: 1px solid var(--color-input-border);\n border-radius: 3px;\n background: white;\n color: var(--color-input);\n padding: var(--input-padding);\n font-size: var(--input-font-size);\n display: block;\n width: 100%; }\n .goa-textarea:hover {\n border-color: var(--color-input-border--hover); }\n .goa-textarea:active, .goa-textarea:focus {\n box-shadow: 0 0 0 3px var(--color-input--focused); }\n .goa-textarea:disabled {\n border-color: var(--color-disabled); }\n .goa-textarea:disabled:hover {\n border-color: var(--color-disabled); }\n .goa-textarea:disabled:focus {\n box-shadow: none; }\n\n.goa-textarea:disabled {\n border-color: var(--color-disabled); }\n .goa-textarea:disabled:hover {\n border-color: var(--color-disabled); }\n .goa-textarea:disabled:focus {\n box-shadow: none; }\n\n.goa-state--error textarea,\n.goa-state--error textarea:hover {\n border: 2px solid var(--color-red); }\n";
|
|
635
635
|
styleInject(css_248z$3);
|
|
636
636
|
|
|
637
637
|
var GoATextArea = function GoATextArea(_ref) {
|
|
@@ -645,8 +645,9 @@
|
|
|
645
645
|
placeholder: placeholder,
|
|
646
646
|
onChange: function onChange(e) {
|
|
647
647
|
return _onChange(name, e.target.value);
|
|
648
|
-
}
|
|
649
|
-
|
|
648
|
+
},
|
|
649
|
+
value: value
|
|
650
|
+
});
|
|
650
651
|
};
|
|
651
652
|
|
|
652
653
|
function _slicedToArray(arr, i) {
|
|
@@ -982,12 +983,12 @@
|
|
|
982
983
|
var children = _ref.children,
|
|
983
984
|
helpText = _ref.helpText,
|
|
984
985
|
error = _ref.error;
|
|
985
|
-
var className = error ? "goa-form-item error" : "goa-form-item";
|
|
986
|
+
var className = error ? "goa-form-item goa-state--error" : "goa-form-item";
|
|
986
987
|
return /*#__PURE__*/React__default.createElement("div", {
|
|
987
988
|
className: className
|
|
988
|
-
}, children, /*#__PURE__*/React__default.createElement("div", {
|
|
989
|
+
}, children, error && /*#__PURE__*/React__default.createElement("div", {
|
|
989
990
|
className: "error-msg"
|
|
990
|
-
}, error), helpText &&
|
|
991
|
+
}, error), helpText && /*#__PURE__*/React__default.createElement("div", {
|
|
991
992
|
id: "helpText",
|
|
992
993
|
className: "help-msg"
|
|
993
994
|
}, helpText));
|
|
@@ -1002,7 +1003,7 @@
|
|
|
1002
1003
|
}, children);
|
|
1003
1004
|
};
|
|
1004
1005
|
|
|
1005
|
-
var css_248z$7 = "/*
|
|
1006
|
+
var css_248z$7 = ":root {\n --color-white: #fff;\n --color-black: #333;\n --color-gray-l5: #f1f1f1;\n --color-gray-l2: #adadad;\n --color-gray-l1: #dcdcdc;\n --color-gray-d1: #666;\n --color-gray-d3: #333;\n --color-orange: #feba35;\n --color-red: #ec040b;\n --color-green: hsl(148, 100%, 26%);\n --color-primary: #0070c4;\n --color-primary-d1: #004f84;\n --color-primary--hover: var(--color-primary-d1);\n --color-text: var(--color-gray-d3);\n --color-error: var(--color-red);\n --color-disabled: var(--color-gray-l2);\n --color-input-background: var(--color-white);\n --color-input-border: var(--color-gray-d1);\n --color-input-border--hover: var(--color-primary-d1);\n --color-input: var(--color-gray-d3);\n --color-input--focused: var(--color-orange);\n --color-button-primary: var(--color-primary);\n --color-button-primary--hover: var(--color-primary-d1);\n --color-button-tertiary: var(--color-gray-l2);\n --color-button-tertiary--hover: var(--color-gray-l5); }\n\n:root {\n /* font-size */\n --fs-xs: 0.75rem;\n --fs-sm: 0.875rem;\n --fs-base: 1.125rem;\n --fs-lg: 1.25rem;\n --fs-xl: 1.5rem;\n --fs-2xl: 2.25rem;\n --fs-3xl: 3rem;\n /* font-weight */\n --fw-thin: 100;\n --fw-light: 300;\n --fw-regular: 400;\n --fw-medium: 500;\n --fw-bold: 700;\n --fw-black: 900;\n --input-padding: 0.5rem;\n --input-border-radius: 0.25rem;\n --input-font-size: var(--fs-base); }\n\n.goa-form {\n box-sizing: border-box; }\n\n.goa-form *,\n.goa-form *:before,\n.goa-form *:after {\n box-sizing: inherit; }\n\n.goa-form-row {\n display: flex;\n flex-direction: column;\n justify-content: space-between; }\n\n@media screen and (min-width: 640px) {\n .goa-form-row {\n gap: 1.75rem;\n flex-direction: row; } }\n\n.goa-form-item {\n flex: 1 1 auto;\n margin-bottom: 1rem; }\n .goa-form-item label {\n display: block;\n font-weight: bold;\n color: #333;\n font-size: var(--fs-base);\n line-height: calc(var(--fs-base) + 1rem); }\n .goa-form-item label em {\n color: var(--color-gray-d1);\n font-style: normal;\n font-weight: var(--fw-regular);\n font-size: var(--fs-sm); }\n .goa-form-item input,\n .goa-form-item textarea {\n display: block;\n width: 100%;\n font-size: var(--fs-base); }\n .goa-form-item.goa-state--error .error-msg {\n font-size: var(--fs-sm);\n line-height: calc(var(--fs-sm) + 0.5rem);\n color: var(--color-red); }\n\n.help-msg {\n font-size: var(--fs-sm);\n color: var(--color-gray-d3);\n line-height: calc(var(--fs-sm) + 0.5rem); }\n\n.goa-form-actions {\n display: flex;\n flex-wrap: wrap;\n margin-top: 2rem; }\n .goa-form-actions button,\n .goa-form-actions .goa-link-button {\n margin: 0; }\n @media (max-width: 639px) {\n .goa-form-actions button,\n .goa-form-actions .goa-link-button {\n width: 100%; }\n .goa-form-actions button + button,\n .goa-form-actions button + .goa-link-button,\n .goa-form-actions .goa-link-button + button,\n .goa-form-actions .goa-link-button + .goa-link-button {\n margin-top: 0.5rem; } }\n @media (min-width: 640px) {\n .goa-form-actions button,\n .goa-form-actions .goa-link-button {\n min-width: 6rem; }\n .goa-form-actions button + button,\n .goa-form-actions button + .goa-link-button,\n .goa-form-actions .goa-link-button + button,\n .goa-form-actions .goa-link-button + .goa-link-button {\n margin-left: 0.5rem; } }\n\n.goa-form-actions--left {\n justify-content: flex-start; }\n\n.goa-form-actions--right {\n justify-content: flex-end; }\n";
|
|
1006
1007
|
styleInject(css_248z$7);
|
|
1007
1008
|
|
|
1008
1009
|
var GoAForm = function GoAForm(_ref) {
|
package/index.d.ts
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* IMPORTANT: Do NOT export experimental components in this file.
|
|
3
3
|
*/
|
|
4
|
-
import '
|
|
4
|
+
import '../../core-css/src/lib/styles/v2/reset.scss';
|
|
5
|
+
import '../../core-css/src/lib/styles/fonts/fonts.scss';
|
|
5
6
|
import GoACallout from './lib/callout/callout';
|
|
6
7
|
import GoANotification from './lib/notification/notification';
|
|
7
8
|
import GoAButton from './lib/button/button';
|
|
@@ -16,11 +16,11 @@ interface Props {
|
|
|
16
16
|
/**
|
|
17
17
|
* Orientation of the radio buttons
|
|
18
18
|
*/
|
|
19
|
-
orientation
|
|
19
|
+
orientation?: 'horizontal' | 'vertical';
|
|
20
20
|
/**
|
|
21
21
|
* Callback function containing the newly selected value
|
|
22
22
|
*/
|
|
23
|
-
onChange: (value: string) => void;
|
|
23
|
+
onChange: (name: string, value: string) => void;
|
|
24
24
|
}
|
|
25
25
|
export declare const GoARadioGroup: FC<Props>;
|
|
26
26
|
export default GoARadioGroup;
|
|
@@ -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