@abgov/react-components 3.4.0-beta.60 → 3.4.0-beta.64
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/app-version-header → app-version-header}/app-version-header.component.d.ts +0 -0
- package/experimental/{experimental/badge → badge}/badge.component.d.ts +0 -0
- package/experimental/{experimental/button → button}/button.d.ts +0 -0
- package/experimental/{experimental/card → card}/card.component.d.ts +0 -0
- package/{lib/_common/input.d.ts → experimental/common.d.ts} +3 -0
- package/experimental/{experimental/flex → flex}/index.d.ts +0 -0
- package/experimental/{experimental/flex → flex}/row.d.ts +0 -0
- package/experimental/{experimental/form → form}/form.actions.component.d.ts +0 -0
- package/experimental/{experimental/form → form}/form.component.d.ts +0 -0
- package/experimental/{experimental/form → form}/form.item.component.d.ts +0 -0
- package/experimental/{experimental/form → form}/index.d.ts +0 -0
- package/experimental/{experimental/form → form}/validators.d.ts +0 -0
- package/experimental/{experimental/icons → icons}/icon.component.d.ts +14 -1
- package/experimental/{experimental/icons → icons}/iconButton.component.d.ts +2 -1
- package/experimental/{experimental/icons → icons}/index.d.ts +0 -0
- package/experimental/{experimental/index.d.ts → index.d.ts} +0 -0
- package/experimental/{experimental/input → input}/input.component.d.ts +2 -1
- package/experimental/{experimental/modal → modal}/modal.component.d.ts +0 -0
- package/experimental/package.json +1 -1
- package/experimental/react-components.esm.js +557 -617
- package/experimental/react-components.umd.js +879 -908
- package/experimental/{experimental/scrollable → scrollable}/scrollable.component.d.ts +0 -0
- package/experimental/{experimental/textarea → textarea}/textarea.component.d.ts +1 -1
- package/experimental/{experimental/transitions → transitions}/index.d.ts +0 -0
- package/experimental/{experimental/transitions → transitions}/transition.d.ts +0 -0
- package/experimental/{experimental/transitions → transitions}/transitionSequence.d.ts +0 -0
- package/lib/dropdown/dropdown.d.ts +1 -1
- package/package.json +4 -3
- package/react-components.esm.js +941 -991
- package/react-components.umd.js +955 -937
- package/experimental/experimental/common.d.ts +0 -3
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
2
|
import classnames from 'classnames';
|
|
3
|
+
import React, { useRef, useState, useEffect } from 'react';
|
|
3
4
|
|
|
4
5
|
function styleInject(css, ref) {
|
|
5
6
|
if ( ref === void 0 ) ref = {};
|
|
@@ -28,34 +29,34 @@ function styleInject(css, ref) {
|
|
|
28
29
|
}
|
|
29
30
|
}
|
|
30
31
|
|
|
31
|
-
var css_248z = ":host, :root {\n --color-white: #fff;\n --color-black: #333;\n --color-gray-100: #f1f1f1;\n --color-gray-200: #dcdcdc;\n --color-gray-500: #adadad;\n --color-gray-600: #767676;\n --color-gray-700: #666;\n --color-gray-900: #333;\n --color-tealblue-100: #c8eefa;\n --color-tealblue-500: #0081a2;\n --color-tealblue-900: #005072;\n --color-orange: #feba35;\n --color-orange-100: hsl(39.7, 99.01%, 98%);\n --color-orange-500: hsl(39.7, 99.01%, 60.2%);\n --color-orange-900: hsl(39.7, 99.01%, 30%);\n --color-red: #ec040b;\n --color-red-100: hsl(358.19, 96.67%, 98%);\n --color-red-500: hsl(358.19, 96.67%, 47.06%);\n --color-red-600: hsl(358.19, 96.67%, 40%);\n --color-red-900: hsl(358.19, 96.67%, 20%);\n --color-green: #00853F;\n --color-green-100: hsl(148, 100%, 95%);\n --color-green-500: hsl(148.42, 100%, 26.08%);\n --color-green-900: hsl(148, 100%, 10%);\n --color-blue-100: #e3f2ff;\n --color-blue-500: #0070c4;\n --color-blue-600: #004f84
|
|
32
|
-
var styles = {"goa-badge":"badge-module_goa-badge__3F6Ve","goa-badge-content":"badge-module_goa-badge-content__3UN-3","badge-information":"badge-module_badge-information__2r_Eq","badge-success":"badge-module_badge-success__18wcm","badge-warning":"badge-module_badge-warning__20BNM","badge-emergency":"badge-module_badge-emergency__E4mHn","badge-dark":"badge-module_badge-dark__1thw-","badge-midtone":"badge-module_badge-midtone__1Gt4T","badge-light":"badge-module_badge-light__B8ZMt","badge-inactive":"badge-module_badge-inactive__35PEw"};
|
|
33
|
-
styleInject(css_248z);
|
|
34
|
-
|
|
35
|
-
var css_248z$1 = ".goa-icon {\n display: flex; }\n\n.goa-icon-button {\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n justify-content: center; }\n\n/* Primary */\n.goa-icon-button-primary {\n padding: 0.5rem;\n border-radius: 0.5rem;\n color: var(--color-blue-500);\n fill: var(--color-blue-500);\n cursor: pointer;\n transition: background-color 100ms ease-in, transform 100ms ease-in; }\n\n.goa-icon-button-primary:active {\n transform: scale(0.9); }\n\n.goa-icon-button-primary:hover {\n background-color: var(--color-blue-100); }\n\n/* Secondary */\n.goa-icon-button-secondary {\n padding: 0.4rem;\n border-radius: 0.5rem;\n transition: background-color 100ms ease-in, transform 100ms ease-in;\n cursor: pointer; }\n\n.goa-icon-button-secondary:active {\n transform: scale(0.9); }\n\n.goa-icon-button-secondary:hover {\n background: rgba(0, 0, 0, 0.1);\n color: #000;\n fill: #000; }\n\n/* tertiary */\n.goa-icon-button-tertiary {\n padding: 0.4rem;\n border-radius: 0.5rem;\n transition: background-color 100ms ease-in, transform 100ms ease-in;\n cursor: pointer; }\n\n.goa-icon-button-tertiary:active {\n transform: scale(0.9); }\n\n.goa-icon-button-tertiary:hover {\n color: #000;\n fill: #000; }\n";
|
|
36
|
-
styleInject(css_248z$1);
|
|
32
|
+
var css_248z$b = ":host, :root {\n --color-white: #fff;\n --color-black: #333;\n --color-gray-100: #f1f1f1;\n --color-gray-200: #dcdcdc;\n --color-gray-500: #adadad;\n --color-gray-600: #767676;\n --color-gray-700: #666;\n --color-gray-900: #333;\n --color-tealblue-100: #c8eefa;\n --color-tealblue-500: #0081a2;\n --color-tealblue-900: #005072;\n --color-orange: #feba35;\n --color-orange-100: hsl(39.7, 99.01%, 98%);\n --color-orange-500: hsl(39.7, 99.01%, 60.2%);\n --color-orange-900: hsl(39.7, 99.01%, 30%);\n --color-red: #ec040b;\n --color-red-100: hsl(358.19, 96.67%, 98%);\n --color-red-500: hsl(358.19, 96.67%, 47.06%);\n --color-red-600: hsl(358.19, 96.67%, 40%);\n --color-red-900: hsl(358.19, 96.67%, 20%);\n --color-green: #00853F;\n --color-green-100: hsl(148, 100%, 95%);\n --color-green-500: hsl(148.42, 100%, 26.08%);\n --color-green-900: hsl(148, 100%, 10%);\n --color-blue-100: #e3f2ff;\n --color-blue-500: #0070c4;\n --color-blue-600: #004f84;\n}\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 /* line-height */\n --lh-xs: 0.875rem;\n --lh-sm: 1rem;\n --lh-base: 1.5rem;\n --lh-lg: 2rem;\n --lh-xl: 2.75rem;\n --lh-2xl: 3.5rem;\n --border-radius-sm: 0.15rem;\n --border-radius: 0.25rem;\n --border-radius-base: 0.25rem;\n --border-radius-lg: 0.5rem;\n --spacing-1: 0.5rem;\n --spacing-2: 0.875rem;\n --spacing-3: 1.75rem;\n --input-height: 2.625rem;\n --input-padding: 0.5rem;\n --input-border-radius: 0.25rem;\n --input-font-size: var(--fs-base);\n}\n\n.goa-badge-icon {\n font-size: var(--fs-sm);\n}\n\n.badge-module_goa-badge__3F6Ve {\n display: inline-flex;\n align-items: center;\n border-radius: 0.25rem;\n padding: 0 0.5rem;\n gap: 0.25rem;\n}\n\n.badge-module_goa-badge__3F6Ve + .badge-module_goa-badge__3F6Ve {\n margin-left: 0.25rem;\n}\n\n.badge-module_goa-badge-content__3UN-3 {\n text-transform: capitalize;\n font-size: var(--fs-sm);\n font-weight: var(--fw-regular);\n line-height: var(--lh-base);\n}\n\n.badge-module_goa-badge__3F6Ve.badge-module_badge-information__2r_Eq {\n background-color: var(--color-gray-100);\n color: var(--color-tealblue-900);\n}\n\n.badge-module_goa-badge__3F6Ve.badge-module_badge-success__18wcm {\n background-color: var(--color-green-500);\n color: var(--color-white);\n}\n\n.badge-module_goa-badge__3F6Ve.badge-module_badge-warning__20BNM {\n background-color: var(--color-orange-500);\n color: var(--color-black);\n}\n\n.badge-module_goa-badge__3F6Ve.badge-module_badge-emergency__E4mHn {\n background-color: var(--color-red-500);\n color: var(--color-white);\n}\n\n.badge-module_goa-badge__3F6Ve.badge-module_badge-dark__1thw- {\n background-color: var(--color-black);\n color: var(--color-white);\n}\n\n.badge-module_goa-badge__3F6Ve.badge-module_badge-midtone__1Gt4T {\n background-color: var(--color-gray-600);\n color: var(--color-white);\n}\n\n.badge-module_goa-badge__3F6Ve.badge-module_badge-light__B8ZMt {\n background-color: var(--color-white);\n color: var(--color-black);\n}\n\n.badge-module_goa-badge__3F6Ve.badge-module_badge-inactive__35PEw {\n background-color: var(--color-white);\n color: var(--color-black);\n}";
|
|
33
|
+
var styles$2 = {"goa-badge":"badge-module_goa-badge__3F6Ve","goa-badge-content":"badge-module_goa-badge-content__3UN-3","badge-information":"badge-module_badge-information__2r_Eq","badge-success":"badge-module_badge-success__18wcm","badge-warning":"badge-module_badge-warning__20BNM","badge-emergency":"badge-module_badge-emergency__E4mHn","badge-dark":"badge-module_badge-dark__1thw-","badge-midtone":"badge-module_badge-midtone__1Gt4T","badge-light":"badge-module_badge-light__B8ZMt","badge-inactive":"badge-module_badge-inactive__35PEw"};
|
|
34
|
+
styleInject(css_248z$b);
|
|
37
35
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
_ref$style = _ref.style,
|
|
41
|
-
style = _ref$style === void 0 ? 'outline' : _ref$style,
|
|
42
|
-
_ref$size = _ref.size,
|
|
43
|
-
size = _ref$size === void 0 ? 'medium' : _ref$size;
|
|
36
|
+
var css_248z$a = ".goa-icon {\n display: flex;\n}\n\n.goa-icon-button {\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border: none;\n}\n\n/* Primary */\n.goa-icon-button-primary {\n padding: 0.5rem;\n border-radius: 0.5rem;\n color: var(--color-blue-500);\n fill: var(--color-blue-500);\n cursor: pointer;\n transition: background-color 100ms ease-in, transform 100ms ease-in;\n}\n\n.goa-icon-button-primary:active {\n transform: scale(0.9);\n}\n\n.goa-icon-button-primary:hover {\n background-color: var(--color-blue-100);\n}\n\n/* Secondary */\n.goa-icon-button-secondary {\n padding: 0.5rem;\n border-radius: 0.5rem;\n transition: background-color 100ms ease-in, transform 100ms ease-in;\n cursor: pointer;\n}\n\n.goa-icon-button-secondary:active {\n transform: scale(0.9);\n}\n\n.goa-icon-button-secondary:hover {\n background: rgba(0, 0, 0, 0.1);\n color: #000;\n fill: #000;\n}\n\n/* tertiary */\n.goa-icon-button-tertiary {\n padding: 0.5rem;\n transition: background-color 100ms ease-in, transform 100ms ease-in;\n cursor: pointer;\n}\n\n.goa-icon-button-tertiary:active {\n transform: scale(0.9);\n}\n\n.goa-icon-button-tertiary:hover {\n color: #000;\n fill: #000;\n}";
|
|
37
|
+
styleInject(css_248z$a);
|
|
44
38
|
|
|
45
|
-
|
|
39
|
+
function GoAIcon({
|
|
40
|
+
type,
|
|
41
|
+
style = 'outline',
|
|
42
|
+
size = 'medium'
|
|
43
|
+
}) {
|
|
44
|
+
const _size = getSize(size);
|
|
46
45
|
|
|
47
|
-
return
|
|
46
|
+
return jsx("div", Object.assign({
|
|
48
47
|
style: {
|
|
49
48
|
width: _size
|
|
50
49
|
},
|
|
51
50
|
className: "goa-icon",
|
|
52
|
-
"data-testid":
|
|
53
|
-
},
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
51
|
+
"data-testid": `icon-${type}`
|
|
52
|
+
}, {
|
|
53
|
+
children: jsx("ion-icon", {
|
|
54
|
+
style: {
|
|
55
|
+
fontSize: _size
|
|
56
|
+
},
|
|
57
|
+
name: style === 'filled' ? type : `${type}-${style}`
|
|
58
|
+
}, void 0)
|
|
59
|
+
}), void 0);
|
|
59
60
|
}
|
|
60
61
|
|
|
61
62
|
function getSize(size) {
|
|
@@ -74,583 +75,520 @@ function getSize(size) {
|
|
|
74
75
|
}
|
|
75
76
|
}
|
|
76
77
|
|
|
77
|
-
function GoAIconButton(
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
return
|
|
78
|
+
function GoAIconButton({
|
|
79
|
+
type,
|
|
80
|
+
disabled,
|
|
81
|
+
variant = 'primary',
|
|
82
|
+
onClick,
|
|
83
|
+
size = 'medium',
|
|
84
|
+
title,
|
|
85
|
+
testId
|
|
86
|
+
}) {
|
|
87
|
+
return jsx("button", Object.assign({
|
|
87
88
|
title: title,
|
|
88
|
-
|
|
89
|
+
disabled: disabled,
|
|
90
|
+
className: `goa-icon-button goa-icon-button-${variant}`,
|
|
89
91
|
"data-testid": testId,
|
|
90
92
|
onClick: onClick
|
|
91
|
-
},
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
93
|
+
}, {
|
|
94
|
+
children: jsx(GoAIcon, {
|
|
95
|
+
type: type,
|
|
96
|
+
size: size
|
|
97
|
+
}, void 0)
|
|
98
|
+
}), void 0);
|
|
95
99
|
}
|
|
96
100
|
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
101
|
+
const GoABadge = ({
|
|
102
|
+
type,
|
|
103
|
+
content,
|
|
104
|
+
icon,
|
|
105
|
+
testId
|
|
106
|
+
}) => {
|
|
107
|
+
return jsxs("div", Object.assign({
|
|
103
108
|
"data-testid": testId,
|
|
104
|
-
className: classnames(styles['goa-badge'], styles[
|
|
105
|
-
},
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
109
|
+
className: classnames(styles$2['goa-badge'], styles$2[`badge-${type}`])
|
|
110
|
+
}, {
|
|
111
|
+
children: [icon && jsx(GoAIcon, {
|
|
112
|
+
type: icon
|
|
113
|
+
}, void 0), jsx("div", Object.assign({
|
|
114
|
+
className: classnames(styles$2['goa-badge-content'])
|
|
115
|
+
}, {
|
|
116
|
+
children: content
|
|
117
|
+
}), void 0)]
|
|
118
|
+
}), void 0);
|
|
119
|
+
};
|
|
120
|
+
const GoAInfoBadge = ({
|
|
121
|
+
content,
|
|
122
|
+
testId
|
|
123
|
+
}) => {
|
|
124
|
+
return jsxs("div", Object.assign({
|
|
115
125
|
"data-testid": testId,
|
|
116
|
-
className: classnames(styles['goa-badge'], styles[
|
|
117
|
-
},
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
}
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
126
|
+
className: classnames(styles$2['goa-badge'], styles$2[`badge-information`])
|
|
127
|
+
}, {
|
|
128
|
+
children: [jsx(GoAIcon, {
|
|
129
|
+
type: "information-circle"
|
|
130
|
+
}, void 0), jsx("div", Object.assign({
|
|
131
|
+
className: classnames(styles$2['goa-badge-content'])
|
|
132
|
+
}, {
|
|
133
|
+
children: content
|
|
134
|
+
}), void 0)]
|
|
135
|
+
}), void 0);
|
|
136
|
+
};
|
|
137
|
+
const GoASuccessBadge = ({
|
|
138
|
+
content,
|
|
139
|
+
testId
|
|
140
|
+
}) => {
|
|
141
|
+
return jsxs("div", Object.assign({
|
|
127
142
|
"data-testid": testId,
|
|
128
|
-
className: classnames(styles['goa-badge'], styles[
|
|
129
|
-
},
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
143
|
+
className: classnames(styles$2['goa-badge'], styles$2[`badge-success`])
|
|
144
|
+
}, {
|
|
145
|
+
children: [jsx(GoAIcon, {
|
|
146
|
+
type: "checkmark-circle"
|
|
147
|
+
}, void 0), jsx("div", Object.assign({
|
|
148
|
+
className: classnames(styles$2['goa-badge-content'])
|
|
149
|
+
}, {
|
|
150
|
+
children: content
|
|
151
|
+
}), void 0)]
|
|
152
|
+
}), void 0);
|
|
153
|
+
};
|
|
154
|
+
const GoAWarningBadge = ({
|
|
155
|
+
content,
|
|
156
|
+
testId
|
|
157
|
+
}) => {
|
|
158
|
+
return jsxs("div", Object.assign({
|
|
139
159
|
"data-testid": testId,
|
|
140
|
-
className: classnames(styles['goa-badge'], styles[
|
|
141
|
-
},
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
}
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
160
|
+
className: classnames(styles$2['goa-badge'], styles$2[`badge-warning`])
|
|
161
|
+
}, {
|
|
162
|
+
children: [jsx(GoAIcon, {
|
|
163
|
+
type: "warning"
|
|
164
|
+
}, void 0), jsx("div", Object.assign({
|
|
165
|
+
className: classnames(styles$2['goa-badge-content'])
|
|
166
|
+
}, {
|
|
167
|
+
children: content
|
|
168
|
+
}), void 0)]
|
|
169
|
+
}), void 0);
|
|
170
|
+
};
|
|
171
|
+
const GoAEmergencyBadge = ({
|
|
172
|
+
content,
|
|
173
|
+
testId
|
|
174
|
+
}) => {
|
|
175
|
+
return jsxs("div", Object.assign({
|
|
151
176
|
"data-testid": testId,
|
|
152
|
-
className: classnames(styles['goa-badge'], styles[
|
|
153
|
-
},
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
}
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
value: value,
|
|
164
|
-
enumerable: true,
|
|
165
|
-
configurable: true,
|
|
166
|
-
writable: true
|
|
167
|
-
});
|
|
168
|
-
} else {
|
|
169
|
-
obj[key] = value;
|
|
170
|
-
}
|
|
171
|
-
|
|
172
|
-
return obj;
|
|
173
|
-
}
|
|
174
|
-
|
|
175
|
-
function ownKeys(object, enumerableOnly) {
|
|
176
|
-
var keys = Object.keys(object);
|
|
177
|
-
|
|
178
|
-
if (Object.getOwnPropertySymbols) {
|
|
179
|
-
var symbols = Object.getOwnPropertySymbols(object);
|
|
180
|
-
if (enumerableOnly) symbols = symbols.filter(function (sym) {
|
|
181
|
-
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
|
|
182
|
-
});
|
|
183
|
-
keys.push.apply(keys, symbols);
|
|
184
|
-
}
|
|
185
|
-
|
|
186
|
-
return keys;
|
|
187
|
-
}
|
|
188
|
-
|
|
189
|
-
function _objectSpread2(target) {
|
|
190
|
-
for (var i = 1; i < arguments.length; i++) {
|
|
191
|
-
var source = arguments[i] != null ? arguments[i] : {};
|
|
192
|
-
|
|
193
|
-
if (i % 2) {
|
|
194
|
-
ownKeys(Object(source), true).forEach(function (key) {
|
|
195
|
-
_defineProperty(target, key, source[key]);
|
|
196
|
-
});
|
|
197
|
-
} else if (Object.getOwnPropertyDescriptors) {
|
|
198
|
-
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
|
|
199
|
-
} else {
|
|
200
|
-
ownKeys(Object(source)).forEach(function (key) {
|
|
201
|
-
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
|
|
202
|
-
});
|
|
203
|
-
}
|
|
204
|
-
}
|
|
205
|
-
|
|
206
|
-
return target;
|
|
207
|
-
}
|
|
208
|
-
|
|
209
|
-
function _objectWithoutPropertiesLoose(source, excluded) {
|
|
210
|
-
if (source == null) return {};
|
|
211
|
-
var target = {};
|
|
212
|
-
var sourceKeys = Object.keys(source);
|
|
213
|
-
var key, i;
|
|
214
|
-
|
|
215
|
-
for (i = 0; i < sourceKeys.length; i++) {
|
|
216
|
-
key = sourceKeys[i];
|
|
217
|
-
if (excluded.indexOf(key) >= 0) continue;
|
|
218
|
-
target[key] = source[key];
|
|
219
|
-
}
|
|
220
|
-
|
|
221
|
-
return target;
|
|
222
|
-
}
|
|
223
|
-
|
|
224
|
-
function _objectWithoutProperties(source, excluded) {
|
|
225
|
-
if (source == null) return {};
|
|
226
|
-
|
|
227
|
-
var target = _objectWithoutPropertiesLoose(source, excluded);
|
|
228
|
-
|
|
229
|
-
var key, i;
|
|
230
|
-
|
|
231
|
-
if (Object.getOwnPropertySymbols) {
|
|
232
|
-
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
|
|
233
|
-
|
|
234
|
-
for (i = 0; i < sourceSymbolKeys.length; i++) {
|
|
235
|
-
key = sourceSymbolKeys[i];
|
|
236
|
-
if (excluded.indexOf(key) >= 0) continue;
|
|
237
|
-
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
|
|
238
|
-
target[key] = source[key];
|
|
239
|
-
}
|
|
240
|
-
}
|
|
241
|
-
|
|
242
|
-
return target;
|
|
243
|
-
}
|
|
244
|
-
|
|
245
|
-
function _slicedToArray(arr, i) {
|
|
246
|
-
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
|
|
247
|
-
}
|
|
248
|
-
|
|
249
|
-
function _arrayWithHoles(arr) {
|
|
250
|
-
if (Array.isArray(arr)) return arr;
|
|
251
|
-
}
|
|
252
|
-
|
|
253
|
-
function _iterableToArrayLimit(arr, i) {
|
|
254
|
-
if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
|
|
255
|
-
var _arr = [];
|
|
256
|
-
var _n = true;
|
|
257
|
-
var _d = false;
|
|
258
|
-
var _e = undefined;
|
|
259
|
-
|
|
260
|
-
try {
|
|
261
|
-
for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
|
|
262
|
-
_arr.push(_s.value);
|
|
263
|
-
|
|
264
|
-
if (i && _arr.length === i) break;
|
|
265
|
-
}
|
|
266
|
-
} catch (err) {
|
|
267
|
-
_d = true;
|
|
268
|
-
_e = err;
|
|
269
|
-
} finally {
|
|
270
|
-
try {
|
|
271
|
-
if (!_n && _i["return"] != null) _i["return"]();
|
|
272
|
-
} finally {
|
|
273
|
-
if (_d) throw _e;
|
|
274
|
-
}
|
|
275
|
-
}
|
|
276
|
-
|
|
277
|
-
return _arr;
|
|
278
|
-
}
|
|
279
|
-
|
|
280
|
-
function _unsupportedIterableToArray(o, minLen) {
|
|
281
|
-
if (!o) return;
|
|
282
|
-
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
|
|
283
|
-
var n = Object.prototype.toString.call(o).slice(8, -1);
|
|
284
|
-
if (n === "Object" && o.constructor) n = o.constructor.name;
|
|
285
|
-
if (n === "Map" || n === "Set") return Array.from(o);
|
|
286
|
-
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
|
|
287
|
-
}
|
|
288
|
-
|
|
289
|
-
function _arrayLikeToArray(arr, len) {
|
|
290
|
-
if (len == null || len > arr.length) len = arr.length;
|
|
291
|
-
|
|
292
|
-
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
|
|
293
|
-
|
|
294
|
-
return arr2;
|
|
295
|
-
}
|
|
177
|
+
className: classnames(styles$2['goa-badge'], styles$2[`badge-emergency`])
|
|
178
|
+
}, {
|
|
179
|
+
children: [jsx(GoAIcon, {
|
|
180
|
+
type: "alert-circle"
|
|
181
|
+
}, void 0), jsx("div", Object.assign({
|
|
182
|
+
className: classnames(styles$2['goa-badge-content'])
|
|
183
|
+
}, {
|
|
184
|
+
children: content
|
|
185
|
+
}), void 0)]
|
|
186
|
+
}), void 0);
|
|
187
|
+
};
|
|
296
188
|
|
|
297
|
-
|
|
298
|
-
|
|
189
|
+
/*! *****************************************************************************
|
|
190
|
+
Copyright (c) Microsoft Corporation.
|
|
191
|
+
|
|
192
|
+
Permission to use, copy, modify, and/or distribute this software for any
|
|
193
|
+
purpose with or without fee is hereby granted.
|
|
194
|
+
|
|
195
|
+
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
|
196
|
+
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
|
197
|
+
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
|
198
|
+
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
|
199
|
+
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
|
200
|
+
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
|
201
|
+
PERFORMANCE OF THIS SOFTWARE.
|
|
202
|
+
***************************************************************************** */
|
|
203
|
+
|
|
204
|
+
function __rest(s, e) {
|
|
205
|
+
var t = {};
|
|
206
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
207
|
+
t[p] = s[p];
|
|
208
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
209
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
210
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
211
|
+
t[p[i]] = s[p[i]];
|
|
212
|
+
}
|
|
213
|
+
return t;
|
|
299
214
|
}
|
|
300
215
|
|
|
301
|
-
var css_248z$
|
|
216
|
+
var css_248z$9 = ".button-module_goa-button__fikCc {\n border-radius: 0.25rem;\n border: 2px solid var(--color-blue-500);\n box-sizing: border-box;\n cursor: pointer;\n font-size: 18px;\n font-weight: 700;\n line-height: 1em;\n padding: 0 0.75rem;\n transition: transform 0.1s ease-in-out, background-color 0.2s ease-in-out;\n transform: scale(1);\n}\n.button-module_goa-button__fikCc:disabled {\n pointer-events: none;\n color: var(--color-gray-700);\n background-color: var(--color-gray-100);\n border-color: var(--color-gray-100);\n}\n.button-module_goa-button__fikCc:active {\n transform: scale(0.98);\n}\n\n.button-module_goa-button--primary__2V_nV {\n border: 2px solid var(--color-blue-500);\n background: var(--color-blue-500);\n color: var(--color-white);\n}\n.button-module_goa-button--primary__2V_nV:hover {\n border-color: var(--color-blue-600);\n background: var(--color-blue-600);\n}\n.button-module_goa-button--primary__2V_nV:focus, .button-module_goa-button--primary__2V_nV:active {\n border-color: var(--color-blue-600);\n box-shadow: 0 0 0 3px var(--color-orange-500);\n background: var(--color-blue-600);\n outline: none;\n}\n\n.button-module_goa-button--secondary__3_OjG {\n border: 2px solid var(--color-blue-500);\n background: var(--color-white);\n color: var(--color-blue-500);\n}\n.button-module_goa-button--secondary__3_OjG:hover {\n border-color: var(--color-blue-600);\n color: var(--color-blue-600);\n}\n.button-module_goa-button--secondary__3_OjG:focus, .button-module_goa-button--secondary__3_OjG:active {\n border-color: var(--color-blue-600);\n color: var(--color-blue-600);\n box-shadow: 0 0 0 3px var(--color-orange-500);\n outline: none;\n}\n\n.button-module_goa-button--tertiary__3mvRP {\n border-color: var(--color-gray-200);\n background: var(--color-white);\n color: var(--color-blue-500);\n}\n.button-module_goa-button--tertiary__3mvRP:hover {\n color: var(--color-blue-600);\n}\n.button-module_goa-button--tertiary__3mvRP:focus, .button-module_goa-button--tertiary__3mvRP:active {\n border-color: var(--color-blue-600);\n color: var(--color-blue-600);\n box-shadow: 0 0 0 3px var(--color-orange-500);\n outline: none;\n}\n\n.button-module_goa-button--borderless__2PWz1 {\n background: none;\n color: var(--color-blue-500);\n border: none;\n}\n.button-module_goa-button--borderless__2PWz1:hover {\n background-color: var(--color-blue-100);\n color: var(--color-blue-500);\n}\n.button-module_goa-button--borderless__2PWz1:focus, .button-module_goa-button--borderless__2PWz1:active {\n outline: none;\n box-shadow: none;\n background-color: var(--color-blue-100);\n}\n\n.button-module_goa-button--primary__2V_nV.button-module_goa-button--danger__2jXqa {\n color: var(--color-white);\n background: var(--color-red-500);\n border-color: var(--color-red-500);\n}\n.button-module_goa-button--primary__2V_nV.button-module_goa-button--danger__2jXqa:hover {\n background: var(--color-red-600);\n border-color: var(--color-red-600);\n}\n.button-module_goa-button--primary__2V_nV.button-module_goa-button--danger__2jXqa:focus, .button-module_goa-button--primary__2V_nV.button-module_goa-button--danger__2jXqa:active {\n background: var(--color-red-600);\n border-color: var(--color-red-600);\n}\n\n.button-module_goa-button--secondary__3_OjG.button-module_goa-button--danger__2jXqa {\n color: var(--color-red-500);\n border-color: var(--color-red-500);\n}\n.button-module_goa-button--secondary__3_OjG.button-module_goa-button--danger__2jXqa:hover {\n border-color: var(--color-red-600);\n color: var(--color-red-600);\n}\n.button-module_goa-button--secondary__3_OjG.button-module_goa-button--danger__2jXqa:focus, .button-module_goa-button--secondary__3_OjG.button-module_goa-button--danger__2jXqa:active {\n color: var(--color-red-600);\n border-color: var(--color-red-600);\n}\n\n.button-module_goa-button--tertiary__3mvRP.button-module_goa-button--danger__2jXqa {\n color: var(--color-red-500);\n border-color: var(--color-gray-200);\n}\n.button-module_goa-button--tertiary__3mvRP.button-module_goa-button--danger__2jXqa:hover {\n border-color: var(--color-red-600);\n color: var(--color-red-600);\n}\n.button-module_goa-button--tertiary__3mvRP.button-module_goa-button--danger__2jXqa:focus, .button-module_goa-button--tertiary__3mvRP.button-module_goa-button--danger__2jXqa:active {\n color: var(--color-red-600);\n border-color: var(--color-red-600);\n}\n\n.button-module_goa-button--borderless__2PWz1.button-module_goa-button--danger__2jXqa {\n color: var(--color-red-500);\n}\n.button-module_goa-button--borderless__2PWz1.button-module_goa-button--danger__2jXqa:hover {\n background: var(--color-red-100);\n color: var(--color-red-500);\n}\n.button-module_goa-button--borderless__2PWz1.button-module_goa-button--danger__2jXqa:focus, .button-module_goa-button--borderless__2PWz1.button-module_goa-button--danger__2jXqa:active {\n background: var(--color-red-100);\n color: var(--color-red-500);\n}\n\n.button-module_goa-button--large__1iRt7 {\n font-size: var(--fs-lg);\n line-height: 3rem;\n}\n\n.button-module_goa-button--large__1iRt7.button-module_goa-button--borderless__2PWz1 {\n line-height: calc(3rem + 4px);\n}\n\n.button-module_goa-button--medium__1xeCJ {\n font-size: var(--fs-base);\n line-height: 2.375rem;\n}\n\n.button-module_goa-button--medium__1xeCJ.button-module_goa-button--borderless__2PWz1 {\n line-height: calc(2.375rem + 4px);\n}\n\n.button-module_goa-button--small__1sl63 {\n font-size: var(--fs-sm);\n line-height: 1.75rem;\n}\n\n.button-module_goa-button--small__1sl63.button-module_goa-button--borderless__2PWz1 {\n line-height: calc(1.75rem + 4px);\n}\n\n.button-module_goa-button__fikCc {\n min-width: 100%;\n}\n\n.button-module_goa-button__fikCc + .button-module_goa-button__fikCc {\n margin: 0;\n margin-top: 0.5rem;\n}\n\n@media (min-width: 480px) {\n .button-module_goa-button__fikCc {\n min-width: 4rem;\n }\n\n .button-module_goa-button__fikCc + .button-module_goa-button__fikCc {\n margin: 0;\n margin-left: 0.5rem;\n }\n}";
|
|
302
217
|
var styles$1 = {"goa-button":"button-module_goa-button__fikCc","goa-button--primary":"button-module_goa-button--primary__2V_nV","goa-button--secondary":"button-module_goa-button--secondary__3_OjG","goa-button--tertiary":"button-module_goa-button--tertiary__3mvRP","goa-button--borderless":"button-module_goa-button--borderless__2PWz1","goa-button--danger":"button-module_goa-button--danger__2jXqa","goa-button--large":"button-module_goa-button--large__1iRt7","goa-button--medium":"button-module_goa-button--medium__1xeCJ","goa-button--small":"button-module_goa-button--small__1sl63"};
|
|
303
|
-
styleInject(css_248z$
|
|
218
|
+
styleInject(css_248z$9);
|
|
304
219
|
|
|
305
|
-
|
|
306
|
-
var
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
return /*#__PURE__*/React.createElement("button", Object.assign({
|
|
220
|
+
const GoAButton = _a => {
|
|
221
|
+
var {
|
|
222
|
+
type = 'primary',
|
|
223
|
+
size = 'medium',
|
|
224
|
+
variant = 'default',
|
|
225
|
+
title,
|
|
226
|
+
children,
|
|
227
|
+
onClick
|
|
228
|
+
} = _a,
|
|
229
|
+
props = __rest(_a, ["type", "size", "variant", "title", "children", "onClick"]);
|
|
230
|
+
|
|
231
|
+
const css = [styles$1[`goa-button--${type}`], styles$1[`goa-button--${size}`], styles$1[`goa-button--${variant}`], styles$1['goa-button']].join(' ');
|
|
232
|
+
const buttonRef = useRef();
|
|
233
|
+
return jsx("button", Object.assign({
|
|
320
234
|
className: css,
|
|
321
235
|
ref: buttonRef,
|
|
322
236
|
title: title,
|
|
323
237
|
onClick: onClick
|
|
324
|
-
}, props
|
|
238
|
+
}, props, {
|
|
239
|
+
children: children
|
|
240
|
+
}), void 0);
|
|
325
241
|
};
|
|
326
242
|
|
|
327
|
-
var css_248z$
|
|
328
|
-
var styles
|
|
329
|
-
styleInject(css_248z$
|
|
330
|
-
|
|
331
|
-
var GoAAppVersionHeader = function GoAAppVersionHeader(_ref) {
|
|
332
|
-
var isProdEnvironment = _ref.isProdEnvironment,
|
|
333
|
-
environment = _ref.environment,
|
|
334
|
-
version = _ref.version;
|
|
335
|
-
|
|
336
|
-
var _useState = useState(false),
|
|
337
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
338
|
-
closed = _useState2[0],
|
|
339
|
-
setClosed = _useState2[1];
|
|
243
|
+
var css_248z$8 = "/* Palette */\n/* Semantic usages */\n.app-version-header-module_goa-app-version-header__3ngyf {\n display: flex;\n justify-content: center;\n background-color: #dcdcdc;\n}\n.app-version-header-module_goa-app-version-header__3ngyf .app-version-header-module_content-wrapper__15exd {\n display: flex;\n flex: 1 1 auto;\n margin: 0 24px;\n max-width: 1200px;\n}\n@media (min-width: 768px) {\n .app-version-header-module_goa-app-version-header__3ngyf .app-version-header-module_content-wrapper__15exd {\n margin: 0 72px;\n }\n}\n.app-version-header-module_goa-app-version-header__3ngyf .app-version-header-module_content-wrapper__15exd .app-version-header-module_environment-and-version__1-GPd {\n display: flex;\n flex: 1 1 auto;\n justify-content: center;\n padding-left: 20px;\n}\n.app-version-header-module_goa-app-version-header__3ngyf .app-version-header-module_content-wrapper__15exd .app-version-header-module_close__1beXI {\n margin-left: auto;\n width: 20px;\n text-align: right;\n font-weight: bold;\n font-size: small;\n align-self: center;\n cursor: pointer;\n display: flex;\n}\n.app-version-header-module_goa-app-version-header__3ngyf .app-version-header-module_content-wrapper__15exd .app-version-header-module_close__1beXI svg {\n color: #0070c4;\n}";
|
|
244
|
+
var styles = {"goa-app-version-header":"app-version-header-module_goa-app-version-header__3ngyf","content-wrapper":"app-version-header-module_content-wrapper__15exd","environment-and-version":"app-version-header-module_environment-and-version__1-GPd","close":"app-version-header-module_close__1beXI"};
|
|
245
|
+
styleInject(css_248z$8);
|
|
340
246
|
|
|
247
|
+
const GoAAppVersionHeader = ({
|
|
248
|
+
isProdEnvironment,
|
|
249
|
+
environment,
|
|
250
|
+
version
|
|
251
|
+
}) => {
|
|
252
|
+
const [closed, setClosed] = useState(false);
|
|
341
253
|
if (closed || isProdEnvironment) return null;
|
|
342
|
-
return
|
|
343
|
-
className: classnames(styles
|
|
344
|
-
},
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
254
|
+
return jsx("div", Object.assign({
|
|
255
|
+
className: classnames(styles['goa-app-version-header'])
|
|
256
|
+
}, {
|
|
257
|
+
children: jsxs("span", Object.assign({
|
|
258
|
+
className: classnames(styles['content-wrapper']),
|
|
259
|
+
"data-testid": 'content-wrapper'
|
|
260
|
+
}, {
|
|
261
|
+
children: [jsxs("span", Object.assign({
|
|
262
|
+
className: classnames(styles['environment-and-version'])
|
|
263
|
+
}, {
|
|
264
|
+
children: [environment, " ", version]
|
|
265
|
+
}), void 0), jsx("span", Object.assign({
|
|
266
|
+
className: classnames(styles['close']),
|
|
267
|
+
"data-testid": 'close',
|
|
268
|
+
onClick: () => setClosed(true)
|
|
269
|
+
}, {
|
|
270
|
+
children: jsx(GoAIcon, {
|
|
271
|
+
type: "close"
|
|
272
|
+
}, void 0)
|
|
273
|
+
}), void 0)]
|
|
274
|
+
}), void 0)
|
|
275
|
+
}), void 0);
|
|
358
276
|
};
|
|
359
277
|
|
|
360
|
-
var css_248z$
|
|
278
|
+
var css_248z$7 = ":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 /* line-height */\n --lh-xs: 0.875rem;\n --lh-sm: 1rem;\n --lh-base: 1.5rem;\n --lh-lg: 2rem;\n --lh-xl: 2.75rem;\n --lh-2xl: 3.5rem;\n --border-radius-sm: 0.15rem;\n --border-radius: 0.25rem;\n --border-radius-base: 0.25rem;\n --border-radius-lg: 0.5rem;\n --spacing-1: 0.5rem;\n --spacing-2: 0.875rem;\n --spacing-3: 1.75rem;\n --input-height: 2.625rem;\n --input-padding: 0.5rem;\n --input-border-radius: 0.25rem;\n --input-font-size: var(--fs-base);\n}\n\n:host, :root {\n --color-white: #fff;\n --color-black: #333;\n --color-gray-100: #f1f1f1;\n --color-gray-200: #dcdcdc;\n --color-gray-500: #adadad;\n --color-gray-600: #767676;\n --color-gray-700: #666;\n --color-gray-900: #333;\n --color-tealblue-100: #c8eefa;\n --color-tealblue-500: #0081a2;\n --color-tealblue-900: #005072;\n --color-orange: #feba35;\n --color-orange-100: hsl(39.7, 99.01%, 98%);\n --color-orange-500: hsl(39.7, 99.01%, 60.2%);\n --color-orange-900: hsl(39.7, 99.01%, 30%);\n --color-red: #ec040b;\n --color-red-100: hsl(358.19, 96.67%, 98%);\n --color-red-500: hsl(358.19, 96.67%, 47.06%);\n --color-red-600: hsl(358.19, 96.67%, 40%);\n --color-red-900: hsl(358.19, 96.67%, 20%);\n --color-green: #00853F;\n --color-green-100: hsl(148, 100%, 95%);\n --color-green-500: hsl(148.42, 100%, 26.08%);\n --color-green-900: hsl(148, 100%, 10%);\n --color-blue-100: #e3f2ff;\n --color-blue-500: #0070c4;\n --color-blue-600: #004f84;\n}\n\nh1:first-child,\nh2:first-child,\nh3:first-child {\n margin-top: 0;\n}\n\n/* Base header margins */\nh1,\nh2,\nh3,\nh4 {\n margin-bottom: 1rem;\n}\n\n/* Font sizes */\nh1 {\n font-size: var(--fs-3xl);\n line-height: var(--lh-2xl);\n font-weight: var(--fw-bold);\n}\n\nh2 {\n font-size: var(--fs-2xl);\n line-height: var(--lh-xl);\n font-weight: var(--fw-regular);\n}\n\nh3 {\n font-size: var(--fs-xl);\n line-height: var(--lh-lg);\n font-weight: var(--fw-regular);\n}\n\nh4,\nh5,\nh6 {\n font-size: var(--fs-base);\n line-height: var(--lh-base);\n font-weight: var(--fw-bold);\n}\n\n/* Set top margin to subsequent headers */\nh1 + h2,\nh1 + h3,\nh1 + h4,\nh2 + h3,\nh2 + h4,\nh3 + h4 {\n margin-top: 2rem;\n}\n\np {\n margin-bottom: 1rem;\n font-size: var(--fs-base);\n}\n\nhr + h1,\nhr + h2,\nhr + h3 {\n margin-top: 0;\n}\n\nem {\n font-size: var(--fs-xs);\n line-height: var(--lh-sm);\n color: var(--color-gray);\n}\n\nsmall {\n font-size: var(--fs-xs);\n font-style: normal;\n color: var(--color-gray);\n}\n\n.card-module_goa-card__OjjJX {\n --card-spacing: 1rem;\n --card-child-spacing: 0.5rem;\n box-sizing: border-box;\n background: var(--color-white);\n transition: opacity 300ms ease-in-out;\n border-radius: var(--border-radius);\n}\n.card-module_goa-card__OjjJX a:hover {\n color: var(--color-blue-600);\n text-decoration: none;\n}\n.card-module_goa-card__OjjJX a:focus {\n outline: 3px solid var(--color-orange);\n outline-offset: 0;\n}\n.card-module_goa-card__OjjJX h6 {\n font-size: var(--fs-xs);\n line-height: var(--lh-sm);\n font-weight: var(--fw-base);\n color: var(--color-gray);\n margin: 0;\n padding: 0;\n}\n\n.card-module_goa-card--tertiary__1BV7k {\n border-radius: var(--border-radius-sm);\n}\n\n.card-module_goa-card-top__RM4IA {\n border-top-left-radius: var(--border-radius);\n border-top-right-radius: var(--border-radius);\n min-height: 0.5rem;\n}\n\n.card-module_goa-card-top--primary__g2XEU {\n background-color: var(--color-tealblue-500);\n}\n\n.card-module_goa-card-top--secondary__mSrLl {\n background-color: var(--color-gray-200);\n}\n\n.card-module_goa-card-top--tertiary__2fG-A {\n display: none;\n}\n\n.card-module_goa-card__OjjJX .card-module_goa-card__OjjJX .card-module_goa-card-top--primary__g2XEU,\n.card-module_goa-card__OjjJX .card-module_goa-card__OjjJX .card-module_goa-card-top--secondary__mSrLl {\n min-height: 0.2rem;\n}\n\n.card-module_goa-card-details__4KtfS > .card-module_goa-card__OjjJX:first-child {\n margin-top: 0;\n}\n\n.card-module_goa-card-details__4KtfS > .card-module_goa-card__OjjJX h3 {\n font-size: var(--fs-lg);\n}\n\n.card-module_goa-card-details__4KtfS > .card-module_goa-card__OjjJX {\n margin-top: 1rem;\n}\n\n.card-module_goa-card-content__3gE5R {\n padding: var(--card-spacing);\n border-top-width: 0;\n border: 1px solid var(--color-gray-200);\n border-bottom-left-radius: var(--border-radius);\n border-bottom-right-radius: var(--border-radius);\n}\n\n.card-module_goa-card-content--tertiary__1dbYr {\n border-radius: var(--border-radius-sm);\n padding: calc(var(--card-spacing) / 2);\n}\n\n.card-module_goa-card-details__4KtfS ul {\n margin-left: var(--card-spacing);\n}";
|
|
361
279
|
var css = {"goa-card":"card-module_goa-card__OjjJX","goa-card--tertiary":"card-module_goa-card--tertiary__1BV7k","goa-card-top":"card-module_goa-card-top__RM4IA","goa-card-top--primary":"card-module_goa-card-top--primary__g2XEU","goa-card-top--secondary":"card-module_goa-card-top--secondary__mSrLl","goa-card-top--tertiary":"card-module_goa-card-top--tertiary__2fG-A","goa-card-details":"card-module_goa-card-details__4KtfS","goa-card-content":"card-module_goa-card-content__3gE5R","goa-card-content--tertiary":"card-module_goa-card-content--tertiary__1dbYr"};
|
|
362
|
-
styleInject(css_248z$
|
|
280
|
+
styleInject(css_248z$7);
|
|
363
281
|
|
|
364
|
-
|
|
365
|
-
var
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
return _objectSpread2(_objectSpread2({}, previous), {}, _defineProperty({}, current[0], current[1]));
|
|
282
|
+
const GoACard = _a => {
|
|
283
|
+
var {
|
|
284
|
+
title,
|
|
285
|
+
children,
|
|
286
|
+
type = 'primary',
|
|
287
|
+
minWidth = 'auto',
|
|
288
|
+
maxWidth = 'auto'
|
|
289
|
+
} = _a,
|
|
290
|
+
other = __rest(_a, ["title", "children", "type", "minWidth", "maxWidth"]);
|
|
291
|
+
|
|
292
|
+
const dataProps = Object.entries(other).filter(item => item[0].startsWith('data-')).reduce((previous, current) => {
|
|
293
|
+
return Object.assign(Object.assign({}, previous), {
|
|
294
|
+
[current[0]]: current[1]
|
|
295
|
+
});
|
|
379
296
|
}, {});
|
|
380
|
-
return
|
|
381
|
-
className: classnames(css['goa-card'], css[
|
|
382
|
-
"data-testid":
|
|
297
|
+
return jsxs("div", Object.assign({}, dataProps, {
|
|
298
|
+
className: classnames(css['goa-card'], css[`goa-card--${type}`]),
|
|
299
|
+
"data-testid": 'card-container',
|
|
383
300
|
style: {
|
|
384
|
-
minWidth
|
|
385
|
-
maxWidth
|
|
301
|
+
minWidth,
|
|
302
|
+
maxWidth
|
|
386
303
|
}
|
|
387
|
-
}
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
}
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
304
|
+
}, {
|
|
305
|
+
children: [jsx("div", {
|
|
306
|
+
className: classnames(css['goa-card-top'], css[`goa-card-top--${type}`])
|
|
307
|
+
}, void 0), jsxs("div", Object.assign({
|
|
308
|
+
className: classnames(css['goa-card-content'], css[`goa-card-content--${type}`])
|
|
309
|
+
}, {
|
|
310
|
+
children: [title && jsx("h3", Object.assign({
|
|
311
|
+
className: css['goa-card-title']
|
|
312
|
+
}, {
|
|
313
|
+
children: title
|
|
314
|
+
}), void 0), jsx("div", Object.assign({
|
|
315
|
+
className: css['goa-card-details'],
|
|
316
|
+
"data-testid": 'card-content'
|
|
317
|
+
}, {
|
|
318
|
+
children: children
|
|
319
|
+
}), void 0)]
|
|
320
|
+
}), void 0)]
|
|
321
|
+
}), void 0);
|
|
322
|
+
};
|
|
401
323
|
|
|
402
|
-
var
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
324
|
+
var css_248z$6 = ".goa-flex-row {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n justify-content: space-between;\n align-items: top;\n margin-bottom: 1.5rem;\n}\n.goa-flex-row *:last-child {\n margin-bottom: 0;\n}\n\n.goa-flex-row > * {\n flex: 1 1 30ch;\n}";
|
|
325
|
+
styleInject(css_248z$6);
|
|
326
|
+
|
|
327
|
+
const GoAFlexRow = ({
|
|
328
|
+
gap,
|
|
329
|
+
minWidth,
|
|
330
|
+
children
|
|
331
|
+
}) => {
|
|
332
|
+
const style = {
|
|
407
333
|
gap: gap === 'small' ? '1rem' : gap === 'medium' ? '2rem' : gap === 'large' ? '3rem' : '0'
|
|
408
334
|
};
|
|
409
335
|
|
|
410
|
-
|
|
411
|
-
return React.Children.map(children,
|
|
412
|
-
return React.cloneElement(child, {
|
|
413
|
-
style:
|
|
336
|
+
const getChildren = () => {
|
|
337
|
+
return React.Children.map(children, child => {
|
|
338
|
+
return /*#__PURE__*/React.cloneElement(child, {
|
|
339
|
+
style: Object.assign({
|
|
414
340
|
flexBasis: minWidth
|
|
415
341
|
}, child.props.style)
|
|
416
342
|
});
|
|
417
343
|
});
|
|
418
344
|
};
|
|
419
345
|
|
|
420
|
-
return
|
|
346
|
+
return jsx("div", Object.assign({
|
|
421
347
|
className: "goa-flex-row",
|
|
422
348
|
style: style
|
|
423
|
-
},
|
|
349
|
+
}, {
|
|
350
|
+
children: getChildren()
|
|
351
|
+
}), void 0);
|
|
424
352
|
};
|
|
425
353
|
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
354
|
+
const GoAFormItem = ({
|
|
355
|
+
children,
|
|
356
|
+
helpText,
|
|
357
|
+
error
|
|
358
|
+
}) => {
|
|
359
|
+
const className = error ? "goa-form-item goa-state--error" : "goa-form-item";
|
|
360
|
+
return jsxs("div", Object.assign({
|
|
432
361
|
className: className
|
|
433
|
-
},
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
362
|
+
}, {
|
|
363
|
+
children: [children, error && jsx("div", Object.assign({
|
|
364
|
+
className: "error-msg"
|
|
365
|
+
}, {
|
|
366
|
+
children: error
|
|
367
|
+
}), void 0), helpText && jsx("div", Object.assign({
|
|
368
|
+
id: "helpText",
|
|
369
|
+
className: "help-msg"
|
|
370
|
+
}, {
|
|
371
|
+
children: helpText
|
|
372
|
+
}), void 0)]
|
|
373
|
+
}), void 0);
|
|
439
374
|
};
|
|
440
375
|
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
return
|
|
446
|
-
className:
|
|
447
|
-
},
|
|
376
|
+
const GoAFormActions = ({
|
|
377
|
+
alignment: _alignment = 'left',
|
|
378
|
+
children
|
|
379
|
+
}) => {
|
|
380
|
+
return jsx("div", Object.assign({
|
|
381
|
+
className: `goa-form-actions goa-form-actions--${_alignment}`
|
|
382
|
+
}, {
|
|
383
|
+
children: children
|
|
384
|
+
}), void 0);
|
|
448
385
|
};
|
|
449
386
|
|
|
450
|
-
var css_248z$
|
|
451
|
-
styleInject(css_248z$
|
|
387
|
+
var css_248z$5 = ":host, :root {\n --color-white: #fff;\n --color-black: #333;\n --color-gray-100: #f1f1f1;\n --color-gray-200: #dcdcdc;\n --color-gray-500: #adadad;\n --color-gray-600: #767676;\n --color-gray-700: #666;\n --color-gray-900: #333;\n --color-tealblue-100: #c8eefa;\n --color-tealblue-500: #0081a2;\n --color-tealblue-900: #005072;\n --color-orange: #feba35;\n --color-orange-100: hsl(39.7, 99.01%, 98%);\n --color-orange-500: hsl(39.7, 99.01%, 60.2%);\n --color-orange-900: hsl(39.7, 99.01%, 30%);\n --color-red: #ec040b;\n --color-red-100: hsl(358.19, 96.67%, 98%);\n --color-red-500: hsl(358.19, 96.67%, 47.06%);\n --color-red-600: hsl(358.19, 96.67%, 40%);\n --color-red-900: hsl(358.19, 96.67%, 20%);\n --color-green: #00853F;\n --color-green-100: hsl(148, 100%, 95%);\n --color-green-500: hsl(148.42, 100%, 26.08%);\n --color-green-900: hsl(148, 100%, 10%);\n --color-blue-100: #e3f2ff;\n --color-blue-500: #0070c4;\n --color-blue-600: #004f84;\n}\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 /* line-height */\n --lh-xs: 0.875rem;\n --lh-sm: 1rem;\n --lh-base: 1.5rem;\n --lh-lg: 2rem;\n --lh-xl: 2.75rem;\n --lh-2xl: 3.5rem;\n --border-radius-sm: 0.15rem;\n --border-radius: 0.25rem;\n --border-radius-base: 0.25rem;\n --border-radius-lg: 0.5rem;\n --spacing-1: 0.5rem;\n --spacing-2: 0.875rem;\n --spacing-3: 1.75rem;\n --input-height: 2.625rem;\n --input-padding: 0.5rem;\n --input-border-radius: 0.25rem;\n --input-font-size: var(--fs-base);\n}\n\n.goa-form {\n box-sizing: border-box;\n}\n\n.goa-form *,\n.goa-form *:before,\n.goa-form *:after {\n box-sizing: inherit;\n}\n\n.goa-form-row {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n}\n\n@media screen and (min-width: 640px) {\n .goa-form-row {\n gap: 1.75rem;\n flex-direction: row;\n }\n}\n.goa-form-item {\n flex: 1 1 auto;\n margin-bottom: 1rem;\n}\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}\n.goa-form-item label em {\n color: var(--color-gray-700);\n font-weight: var(--fw-regular);\n font-size: var(--fs-sm);\n}\n.goa-form-item input,\n.goa-form-item textarea {\n display: block;\n width: 100%;\n font-size: var(--fs-base);\n}\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\n.help-msg {\n font-size: var(--fs-sm);\n color: var(--color-gray-900);\n line-height: calc(var(--fs-sm) + 0.5rem);\n}\n\n.goa-form-actions {\n display: flex;\n flex-wrap: wrap;\n margin-top: 2rem;\n}\n.goa-form-actions button,\n.goa-form-actions .goa-link-button {\n margin: 0;\n}\n@media (max-width: 639px) {\n .goa-form-actions button,\n.goa-form-actions .goa-link-button {\n width: 100%;\n }\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 }\n}\n@media (min-width: 640px) {\n .goa-form-actions button,\n.goa-form-actions .goa-link-button {\n min-width: 6rem;\n }\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}\n\n.goa-form-actions--left {\n justify-content: flex-start;\n}\n\n.goa-form-actions--right {\n justify-content: flex-end;\n}";
|
|
388
|
+
styleInject(css_248z$5);
|
|
452
389
|
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
390
|
+
const GoAForm = ({
|
|
391
|
+
children
|
|
392
|
+
}) => {
|
|
393
|
+
return jsx("div", Object.assign({
|
|
456
394
|
className: "goa-form"
|
|
457
|
-
},
|
|
395
|
+
}, {
|
|
396
|
+
children: children
|
|
397
|
+
}), void 0);
|
|
458
398
|
};
|
|
459
399
|
|
|
460
|
-
var css_248z$
|
|
461
|
-
styleInject(css_248z$
|
|
400
|
+
var css_248z$4 = ":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 /* line-height */\n --lh-xs: 0.875rem;\n --lh-sm: 1rem;\n --lh-base: 1.5rem;\n --lh-lg: 2rem;\n --lh-xl: 2.75rem;\n --lh-2xl: 3.5rem;\n --border-radius-sm: 0.15rem;\n --border-radius: 0.25rem;\n --border-radius-base: 0.25rem;\n --border-radius-lg: 0.5rem;\n --spacing-1: 0.5rem;\n --spacing-2: 0.875rem;\n --spacing-3: 1.75rem;\n --input-height: 2.625rem;\n --input-padding: 0.5rem;\n --input-border-radius: 0.25rem;\n --input-font-size: var(--fs-base);\n}\n\n:host, :root {\n --color-white: #fff;\n --color-black: #333;\n --color-gray-100: #f1f1f1;\n --color-gray-200: #dcdcdc;\n --color-gray-500: #adadad;\n --color-gray-600: #767676;\n --color-gray-700: #666;\n --color-gray-900: #333;\n --color-tealblue-100: #c8eefa;\n --color-tealblue-500: #0081a2;\n --color-tealblue-900: #005072;\n --color-orange: #feba35;\n --color-orange-100: hsl(39.7, 99.01%, 98%);\n --color-orange-500: hsl(39.7, 99.01%, 60.2%);\n --color-orange-900: hsl(39.7, 99.01%, 30%);\n --color-red: #ec040b;\n --color-red-100: hsl(358.19, 96.67%, 98%);\n --color-red-500: hsl(358.19, 96.67%, 47.06%);\n --color-red-600: hsl(358.19, 96.67%, 40%);\n --color-red-900: hsl(358.19, 96.67%, 20%);\n --color-green: #00853F;\n --color-green-100: hsl(148, 100%, 95%);\n --color-green-500: hsl(148.42, 100%, 26.08%);\n --color-green-900: hsl(148, 100%, 10%);\n --color-blue-100: #e3f2ff;\n --color-blue-500: #0070c4;\n --color-blue-600: #004f84;\n}\n\n/* Forms */\n.goa-input {\n outline: none;\n transition: box-shadow 0.1s ease-in;\n border: 1px solid var(--color-gray-700);\n border-radius: 3px;\n background: white;\n color: var(--color-gray-900);\n padding: var(--input-padding);\n font-size: var(--input-font-size);\n display: flex;\n align-content: center;\n line-height: var(--input-height);\n height: var(--input-height);\n}\n.goa-input:hover {\n border-color: var(--color-blue-600);\n}\n.goa-input:active, .goa-input:focus, .goa-input:focus-within {\n box-shadow: 0 0 0 3px var(--color-orange);\n}\n.goa-input:disabled {\n border-color: var(--color-gray-500);\n}\n.goa-input:disabled:hover {\n border-color: var(--color-gray-500);\n}\n.goa-input:disabled:focus {\n box-shadow: none;\n}\n\n.goa-input-leading-icon {\n display: flex;\n align-items: center;\n}\n\n.goa-input-leading-icon ~ input {\n padding-left: 0.25rem;\n}\n\n.goa-input-trailing-icon {\n display: flex;\n align-items: center;\n}\n\n.goa-input-trailing-icon > .goa-icon-button {\n margin-right: -0.5rem;\n}\n\ninput.input--goa {\n display: block;\n border: none;\n flex: 1 1 auto;\n}\n\ninput.input--goa::-webkit-calendar-picker-indicator {\n display: none;\n}\n\n.goa-input input,\n.goa-input input:focus,\n.goa-input input:hover,\n.goa-input input:active,\n.goa-input input {\n display: block;\n width: 100%;\n outline: none;\n border: none;\n}\n\n.goa-input--disabled {\n opacity: 0.5;\n cursor: default;\n border-color: var(--color-black);\n}\n.goa-input--disabled:hover, .goa-input--disabled:active, .goa-input--disabled:focus {\n border-color: var(--color-black);\n cursor: default;\n box-shadow: none;\n}\n.goa-input--disabled input:hover {\n cursor: default !important;\n}\n\n.goa-input .input--bare {\n border: none;\n}\n\n.goa-state--error .goa-input {\n border: 2px solid var(--color-red);\n}";
|
|
401
|
+
styleInject(css_248z$4);
|
|
462
402
|
|
|
463
|
-
|
|
464
|
-
var
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
403
|
+
const GoAInput = _a => {
|
|
404
|
+
var {
|
|
405
|
+
name,
|
|
406
|
+
onTrailingIconClick,
|
|
407
|
+
onChange,
|
|
408
|
+
leadingIcon,
|
|
409
|
+
trailingIcon,
|
|
410
|
+
variant = 'goa',
|
|
411
|
+
focused,
|
|
412
|
+
disabled,
|
|
413
|
+
readonly
|
|
414
|
+
} = _a,
|
|
415
|
+
other = __rest(_a, ["name", "onTrailingIconClick", "onChange", "leadingIcon", "trailingIcon", "variant", "focused", "disabled", "readonly"]);
|
|
416
|
+
|
|
417
|
+
const inputRef = React.useRef(null);
|
|
418
|
+
useEffect(() => {
|
|
419
|
+
var _a, _b;
|
|
480
420
|
|
|
481
|
-
|
|
421
|
+
if (focused) {
|
|
422
|
+
(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
482
423
|
} else {
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
(_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.blur();
|
|
424
|
+
(_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.blur();
|
|
486
425
|
}
|
|
487
426
|
}, [focused, inputRef]);
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
}
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
427
|
+
const rootCss = classnames({
|
|
428
|
+
'goa-input': true,
|
|
429
|
+
'goa-input--disabled': disabled
|
|
430
|
+
});
|
|
431
|
+
return jsxs("div", Object.assign({
|
|
432
|
+
className: rootCss
|
|
433
|
+
}, {
|
|
434
|
+
children: [leadingIcon && jsx("div", Object.assign({
|
|
435
|
+
className: "goa-input-leading-icon"
|
|
436
|
+
}, {
|
|
437
|
+
children: jsx(GoAIcon, {
|
|
438
|
+
type: leadingIcon
|
|
439
|
+
}, void 0)
|
|
440
|
+
}), void 0), jsx("input", Object.assign({
|
|
441
|
+
ref: inputRef,
|
|
442
|
+
className: classnames({
|
|
443
|
+
[`input--${variant}`]: true,
|
|
444
|
+
'input--leading-icon': leadingIcon
|
|
445
|
+
}),
|
|
446
|
+
readOnly: readonly,
|
|
447
|
+
disabled: disabled,
|
|
448
|
+
onChange: e => onChange(name, e.target.value)
|
|
449
|
+
}, other), void 0), trailingIcon && !onTrailingIconClick && jsx("div", Object.assign({
|
|
450
|
+
className: "goa-input-trailing-icon"
|
|
451
|
+
}, {
|
|
452
|
+
children: jsx(GoAIcon, {
|
|
453
|
+
size: "medium",
|
|
454
|
+
type: trailingIcon
|
|
455
|
+
}, void 0)
|
|
456
|
+
}), void 0), trailingIcon && onTrailingIconClick && jsx("div", Object.assign({
|
|
457
|
+
onClick: onTrailingIconClick,
|
|
458
|
+
className: "goa-input-trailing-icon"
|
|
459
|
+
}, {
|
|
460
|
+
children: jsx(GoAIconButton, {
|
|
461
|
+
variant: "tertiary",
|
|
462
|
+
onClick: onTrailingIconClick,
|
|
463
|
+
disabled: disabled,
|
|
464
|
+
size: "medium",
|
|
465
|
+
type: trailingIcon,
|
|
466
|
+
testId: `${name}-input-trailing-button`
|
|
467
|
+
}, void 0)
|
|
468
|
+
}), void 0)]
|
|
469
|
+
}), void 0);
|
|
518
470
|
};
|
|
519
|
-
|
|
520
|
-
return
|
|
471
|
+
const GoAInputText = props => {
|
|
472
|
+
return jsx(GoAInput, Object.assign({}, props, {
|
|
521
473
|
type: "text"
|
|
522
|
-
}));
|
|
474
|
+
}), void 0);
|
|
523
475
|
};
|
|
524
|
-
|
|
525
|
-
return
|
|
476
|
+
const GoAInputPassword = props => {
|
|
477
|
+
return jsx(GoAInput, Object.assign({}, props, {
|
|
526
478
|
type: "password"
|
|
527
|
-
}));
|
|
479
|
+
}), void 0);
|
|
528
480
|
};
|
|
529
|
-
|
|
530
|
-
return
|
|
481
|
+
const GoAInputDate = props => {
|
|
482
|
+
return jsx(GoAInput, Object.assign({}, props, {
|
|
531
483
|
type: "date",
|
|
532
484
|
trailingIcon: "calendar"
|
|
533
|
-
}));
|
|
485
|
+
}), void 0);
|
|
534
486
|
};
|
|
535
|
-
|
|
536
|
-
return
|
|
487
|
+
const GoAInputTime = props => {
|
|
488
|
+
return jsx(GoAInput, Object.assign({}, props, {
|
|
537
489
|
type: "time"
|
|
538
|
-
}));
|
|
490
|
+
}), void 0);
|
|
539
491
|
};
|
|
540
|
-
|
|
541
|
-
return
|
|
492
|
+
const GoAInputDateTime = props => {
|
|
493
|
+
return jsx(GoAInput, Object.assign({}, props, {
|
|
542
494
|
type: "datetime-local",
|
|
543
495
|
trailingIcon: "calendar"
|
|
544
|
-
}));
|
|
496
|
+
}), void 0);
|
|
545
497
|
};
|
|
546
|
-
|
|
547
|
-
return
|
|
498
|
+
const GoAInputEmail = props => {
|
|
499
|
+
return jsx(GoAInput, Object.assign({}, props, {
|
|
548
500
|
type: "email"
|
|
549
|
-
}));
|
|
501
|
+
}), void 0);
|
|
550
502
|
};
|
|
551
|
-
|
|
552
|
-
return
|
|
503
|
+
const GoAInputSearch = props => {
|
|
504
|
+
return jsx(GoAInput, Object.assign({}, props, {
|
|
553
505
|
type: "text",
|
|
554
506
|
trailingIcon: "search"
|
|
555
|
-
}));
|
|
507
|
+
}), void 0);
|
|
556
508
|
};
|
|
557
|
-
|
|
558
|
-
return
|
|
509
|
+
const GoAInputUrl = props => {
|
|
510
|
+
return jsx(GoAInput, Object.assign({}, props, {
|
|
559
511
|
type: "url"
|
|
560
|
-
}));
|
|
512
|
+
}), void 0);
|
|
561
513
|
};
|
|
562
|
-
|
|
563
|
-
return
|
|
514
|
+
const GoAInputTel = props => {
|
|
515
|
+
return jsx(GoAInput, Object.assign({}, props, {
|
|
564
516
|
type: "tel"
|
|
565
|
-
}));
|
|
517
|
+
}), void 0);
|
|
566
518
|
};
|
|
567
|
-
|
|
568
|
-
return
|
|
519
|
+
const GoAInputFile = props => {
|
|
520
|
+
return jsx("input", {
|
|
569
521
|
id: props.id,
|
|
570
522
|
name: props.name,
|
|
571
523
|
type: "file",
|
|
572
|
-
onChange:
|
|
573
|
-
return props.onChange(e.target.name, e.target.value);
|
|
574
|
-
},
|
|
524
|
+
onChange: e => props.onChange(e.target.name, e.target.value),
|
|
575
525
|
style: {
|
|
576
526
|
backgroundColor: 'revert'
|
|
577
527
|
}
|
|
578
|
-
});
|
|
528
|
+
}, void 0);
|
|
579
529
|
};
|
|
580
|
-
|
|
581
|
-
return
|
|
530
|
+
const GoAInputMonth = props => {
|
|
531
|
+
return jsx(GoAInput, Object.assign({}, props, {
|
|
582
532
|
type: "month",
|
|
583
533
|
trailingIcon: "calendar"
|
|
584
|
-
}));
|
|
534
|
+
}), void 0);
|
|
585
535
|
};
|
|
586
|
-
|
|
587
|
-
return
|
|
536
|
+
const GoAInputNumber = props => {
|
|
537
|
+
return jsx(GoAInput, Object.assign({}, props, {
|
|
588
538
|
type: "number"
|
|
589
|
-
}));
|
|
539
|
+
}), void 0);
|
|
590
540
|
};
|
|
591
|
-
|
|
592
|
-
var
|
|
593
|
-
step = _ref2$step === void 0 ? 1 : _ref2$step,
|
|
594
|
-
props = _objectWithoutProperties(_ref2, ["step"]);
|
|
541
|
+
const GoAInputRange = _a => {
|
|
542
|
+
var props = __rest(_a, ["step"]);
|
|
595
543
|
|
|
596
|
-
return
|
|
597
|
-
id: props.id,
|
|
598
|
-
min: props.min,
|
|
599
|
-
max: props.max,
|
|
600
|
-
step: step,
|
|
601
|
-
name: props.name,
|
|
544
|
+
return jsx("input", Object.assign({}, props, {
|
|
602
545
|
type: "range",
|
|
603
|
-
onChange:
|
|
604
|
-
|
|
605
|
-
}
|
|
606
|
-
});
|
|
546
|
+
onChange: e => props.onChange(e.target.name, e.target.value)
|
|
547
|
+
}), void 0);
|
|
607
548
|
};
|
|
608
549
|
|
|
609
|
-
var css_248z$
|
|
610
|
-
styleInject(css_248z$
|
|
550
|
+
var css_248z$3 = ".goa-scrollable {\n scroll-behavior: smooth;\n}\n\n.goa-scrollable::-webkit-scrollbar {\n width: 6px;\n}\n\n.goa-scrollable::-webkit-scrollbar-track {\n background: #f1f1f1;\n}\n\n.goa-scrollable::-webkit-scrollbar-thumb {\n background: #888;\n}\n\n.goa-scrollable::-webkit-scrollbar-thumb:hover {\n background: #555;\n}";
|
|
551
|
+
styleInject(css_248z$3);
|
|
611
552
|
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
553
|
+
const GoAScrollable = ({
|
|
554
|
+
vertical,
|
|
555
|
+
horizontal,
|
|
556
|
+
hPadding,
|
|
557
|
+
vPadding,
|
|
558
|
+
height,
|
|
559
|
+
children,
|
|
560
|
+
testId
|
|
561
|
+
}) => {
|
|
562
|
+
const style = {
|
|
621
563
|
overflowY: vertical ? 'auto' : 'hidden',
|
|
622
564
|
overflowX: horizontal ? 'auto' : 'hidden',
|
|
623
565
|
maxHeight: height !== null && height !== void 0 ? height : '100%',
|
|
624
|
-
padding:
|
|
566
|
+
padding: `${vPadding !== null && vPadding !== void 0 ? vPadding : 0}rem ${hPadding !== null && hPadding !== void 0 ? hPadding : 0}rem`
|
|
625
567
|
};
|
|
626
|
-
return
|
|
627
|
-
className:
|
|
568
|
+
return jsx("div", Object.assign({
|
|
569
|
+
className: 'goa-scrollable',
|
|
628
570
|
style: style,
|
|
629
571
|
"data-testid": testId
|
|
630
|
-
},
|
|
572
|
+
}, {
|
|
573
|
+
children: children
|
|
574
|
+
}), void 0);
|
|
631
575
|
};
|
|
632
576
|
|
|
633
|
-
var css_248z$
|
|
634
|
-
styleInject(css_248z$
|
|
635
|
-
|
|
636
|
-
var GoATransition = function GoATransition(_ref) {
|
|
637
|
-
var name = _ref.name,
|
|
638
|
-
active = _ref.active,
|
|
639
|
-
onComplete = _ref.onComplete,
|
|
640
|
-
children = _ref.children;
|
|
641
|
-
|
|
642
|
-
var _useState = useState('init'),
|
|
643
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
644
|
-
state = _useState2[0],
|
|
645
|
-
setState = _useState2[1];
|
|
577
|
+
var css_248z$2 = "/* Fade in */\n.fade-in-init {\n display: none;\n}\n\n.fade-in-start {\n display: block;\n opacity: 0;\n transition: opacity 200ms ease-in;\n}\n\n.fade-in-active {\n opacity: 1;\n}\n\n/* Fade out */\n.fade-out-init {\n display: block;\n}\n\n.fade-out-start {\n display: block;\n opacity: 1;\n transition: opacity 200ms ease-in;\n}\n\n.fade-out-active {\n opacity: 0;\n}\n\n/* ======= Slide in/out Up */\n/* Slide in up */\n.slide-in-up-init {\n transition: translateY(0);\n display: none;\n}\n\n.slide-in-up-start {\n display: block;\n transform: translateY(100vh);\n transition: transform 300ms ease-out;\n}\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\n.slide-out-up-start {\n transition: transform 300ms ease-in;\n}\n\n.slide-out-up-active {\n transform: translateY(-100vh);\n}\n\n/* ======= Slide in/out Down */\n/* Slide in down */\n.slide-in-down-init {\n transition: translateY(0);\n display: none;\n}\n\n.slide-in-down-start {\n display: block;\n transform: translateY(-100vh);\n transition: transform 300ms ease-out;\n}\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\n.slide-out-down-start {\n transform: translateY(0);\n transition: transform 300ms ease-in;\n}\n\n.slide-out-down-active {\n transform: translateY(100vh);\n}\n\n/* ======= Slide in/out Left */\n/* Slide in left */\n.slide-in-left-init {\n transition: translateX(0);\n display: none;\n}\n\n.slide-in-left-start {\n display: block;\n transform: translateX(-100vw);\n transition: transform 300ms ease-out;\n}\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\n.slide-out-left-start {\n transform: translateX(0);\n transition: transform 300ms ease-in;\n}\n\n.slide-out-left-active {\n transform: translateX(-100vw);\n}\n\n/* ======= Slide in/out Right */\n/* Slide in left */\n.slide-in-right-init {\n transition: translateX(0);\n display: none;\n}\n\n.slide-in-right-start {\n display: block;\n transform: translateX(100vw);\n transition: transform 300ms ease-out;\n}\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\n.slide-out-right-start {\n transform: translateX(0);\n transition: transform 300ms ease-in;\n}\n\n.slide-out-right-active {\n transform: translateX(100vw);\n}";
|
|
578
|
+
styleInject(css_248z$2);
|
|
646
579
|
|
|
647
|
-
|
|
580
|
+
const GoATransition = ({
|
|
581
|
+
name,
|
|
582
|
+
active,
|
|
583
|
+
onComplete,
|
|
584
|
+
children
|
|
585
|
+
}) => {
|
|
586
|
+
const [state, setState] = useState('init');
|
|
587
|
+
useEffect(() => {
|
|
648
588
|
if (active) {
|
|
649
589
|
setState('start');
|
|
650
|
-
setTimeout(
|
|
651
|
-
|
|
652
|
-
}, 100);
|
|
653
|
-
setTimeout(function () {
|
|
590
|
+
setTimeout(() => setState('active'), 100);
|
|
591
|
+
setTimeout(() => {
|
|
654
592
|
onComplete === null || onComplete === void 0 ? void 0 : onComplete();
|
|
655
593
|
}, 500);
|
|
656
594
|
} else {
|
|
@@ -661,74 +599,68 @@ var GoATransition = function GoATransition(_ref) {
|
|
|
661
599
|
function getCss() {
|
|
662
600
|
switch (state) {
|
|
663
601
|
case 'init':
|
|
664
|
-
return
|
|
602
|
+
return `${name}-init`;
|
|
665
603
|
|
|
666
604
|
case 'start':
|
|
667
|
-
return
|
|
605
|
+
return `${name}-start`;
|
|
668
606
|
|
|
669
607
|
case 'active':
|
|
670
|
-
return
|
|
608
|
+
return `${name}-start ${name}-active`;
|
|
671
609
|
}
|
|
672
610
|
}
|
|
673
611
|
|
|
674
|
-
return
|
|
612
|
+
return jsx("div", Object.assign({
|
|
675
613
|
className: getCss()
|
|
676
|
-
},
|
|
614
|
+
}, {
|
|
615
|
+
children: children
|
|
616
|
+
}), void 0);
|
|
677
617
|
};
|
|
678
618
|
|
|
679
|
-
|
|
619
|
+
const GoATransitionSequence = props => {
|
|
680
620
|
function createTransition(props, children) {
|
|
681
|
-
return
|
|
621
|
+
return jsx(GoATransition, Object.assign({}, props, {
|
|
622
|
+
children: children
|
|
623
|
+
}), void 0);
|
|
682
624
|
}
|
|
683
625
|
|
|
684
626
|
return props.transitions // create components for the transitions
|
|
685
|
-
.map(
|
|
627
|
+
.map((state, index) => {
|
|
686
628
|
return createTransition({
|
|
687
629
|
active: props.transitionIndex % (props.transitions.length + 1) > index,
|
|
688
630
|
name: state,
|
|
689
|
-
onComplete:
|
|
690
|
-
return props === null || props === void 0 ? void 0 : props.onTransitionComplete(index, index === props.transitions.length - 1);
|
|
691
|
-
}
|
|
631
|
+
onComplete: () => props === null || props === void 0 ? void 0 : props.onTransitionComplete(index, index === props.transitions.length - 1)
|
|
692
632
|
});
|
|
693
633
|
}) // on `reduce` we need to start with the innermost child
|
|
694
634
|
.reverse() // create parent/child relationship between components
|
|
695
|
-
.reduce(
|
|
635
|
+
.reduce((child, parent) => {
|
|
696
636
|
if (!child) {
|
|
697
637
|
// the original children (user defined content to be transitioned)
|
|
698
|
-
return React.cloneElement(parent, {
|
|
638
|
+
return /*#__PURE__*/React.cloneElement(parent, {
|
|
699
639
|
children: props.children
|
|
700
640
|
});
|
|
701
641
|
}
|
|
702
642
|
|
|
703
|
-
return React.cloneElement(parent, {
|
|
643
|
+
return /*#__PURE__*/React.cloneElement(parent, {
|
|
704
644
|
children: child
|
|
705
645
|
});
|
|
706
646
|
}, null);
|
|
707
647
|
};
|
|
708
648
|
|
|
709
|
-
var css_248z$
|
|
710
|
-
styleInject(css_248z$
|
|
711
|
-
|
|
712
|
-
/**
|
|
713
|
-
* Modal - Main Component
|
|
714
|
-
*/
|
|
649
|
+
var css_248z$1 = "/* Root ============================================================================== */\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 --modal-spacing: 1.75rem;\n --button-min-width: 5rem;\n}\n\n/* Modal ============================================================================== */\n.modal {\n position: relative;\n background: #fff;\n z-index: 1002;\n box-shadow: 0 15px 25px rgba(0, 0, 0, 0.2), 0 5px 10px 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@media (min-width: 640px) {\n .modal {\n margin: 1rem;\n max-height: 80%;\n min-width: 60ch;\n }\n}\n/* Modal Container =========================================================================== */\n.modal-container {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n\n/* Modal Actions ============================================================================== */\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\n .modal-actions button {\n display: block;\n width: 100%;\n }\n}\n@media (min-width: 640px) {\n .modal-actions > button {\n margin-right: 0;\n }\n\n .modal-actions > button + button {\n margin-left: 0.5rem;\n }\n}\n/* Modal Title ============================================================================ */\n.modal-title {\n font-size: var(--fs-xl);\n padding: 1rem var(--modal-spacing);\n margin-right: 40px;\n /* close icon spacing */\n flex: 0 0 auto;\n}\n\n/* Modal Background ======================================================================= */\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.modal-close {\n position: absolute;\n top: 1rem;\n right: 1rem;\n}";
|
|
650
|
+
styleInject(css_248z$1);
|
|
715
651
|
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
transitionIndex = _useState2[0],
|
|
729
|
-
setTransitionIndex = _useState2[1];
|
|
730
|
-
|
|
731
|
-
useEffect(function () {
|
|
652
|
+
const TRANSITION_INIT = 0;
|
|
653
|
+
const TRANSITION_VISIBLE = 1;
|
|
654
|
+
const TRANSITION_HIDDEN = 2;
|
|
655
|
+
const GoAModal = ({
|
|
656
|
+
children,
|
|
657
|
+
isOpen,
|
|
658
|
+
onClose,
|
|
659
|
+
testId,
|
|
660
|
+
backgroundTestId
|
|
661
|
+
}) => {
|
|
662
|
+
const [transitionIndex, setTransitionIndex] = useState(TRANSITION_INIT);
|
|
663
|
+
useEffect(() => {
|
|
732
664
|
if (isOpen) {
|
|
733
665
|
show();
|
|
734
666
|
} else if (transitionIndex !== 0) {
|
|
@@ -743,14 +675,14 @@ var GoAModal = function GoAModal(_ref) {
|
|
|
743
675
|
}, [isOpen]);
|
|
744
676
|
|
|
745
677
|
function hideScrollbars() {
|
|
746
|
-
|
|
678
|
+
const scrollbarWidth = calculateScrollbarWidth();
|
|
747
679
|
document.body.style.overflow = 'hidden';
|
|
748
680
|
document.body.style.paddingRight = scrollbarWidth + 'px';
|
|
749
681
|
}
|
|
750
682
|
|
|
751
683
|
function resetScrollbars() {
|
|
752
684
|
// need to perform on the next render cycle to allow the css transitions to take place
|
|
753
|
-
setTimeout(
|
|
685
|
+
setTimeout(() => {
|
|
754
686
|
document.body.style.overflow = '';
|
|
755
687
|
document.body.style.paddingRight = '0';
|
|
756
688
|
}, 300); // 300ms allows for any close animations to complete
|
|
@@ -771,24 +703,26 @@ var GoAModal = function GoAModal(_ref) {
|
|
|
771
703
|
return ['init', 'visible', 'hidden'][transitionIndex];
|
|
772
704
|
}
|
|
773
705
|
|
|
774
|
-
return
|
|
706
|
+
return jsx(GoATransitionSequence, Object.assign({
|
|
775
707
|
transitions: ['fade-in', 'fade-out'],
|
|
776
708
|
transitionIndex: transitionIndex,
|
|
777
|
-
onTransitionComplete:
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
|
|
790
|
-
|
|
791
|
-
|
|
709
|
+
onTransitionComplete: (_index, done) => done && setTransitionIndex(0)
|
|
710
|
+
}, {
|
|
711
|
+
children: jsxs("div", Object.assign({
|
|
712
|
+
className: "modal-root",
|
|
713
|
+
"data-testid": testId,
|
|
714
|
+
"data-state": getState()
|
|
715
|
+
}, {
|
|
716
|
+
children: [jsx(Container, Object.assign({
|
|
717
|
+
onClick: onClose
|
|
718
|
+
}, {
|
|
719
|
+
children: children
|
|
720
|
+
}), void 0), jsx(Background, {
|
|
721
|
+
onClick: () => onClose === null || onClose === void 0 ? void 0 : onClose(),
|
|
722
|
+
testId: backgroundTestId
|
|
723
|
+
}, void 0)]
|
|
724
|
+
}), void 0)
|
|
725
|
+
}), void 0);
|
|
792
726
|
};
|
|
793
727
|
// Public Child Components
|
|
794
728
|
// ******************************************************************************
|
|
@@ -796,88 +730,95 @@ var GoAModal = function GoAModal(_ref) {
|
|
|
796
730
|
// GoAModalActions
|
|
797
731
|
// ***************
|
|
798
732
|
|
|
799
|
-
|
|
800
|
-
|
|
801
|
-
|
|
733
|
+
const GoAModalActions = ({
|
|
734
|
+
children
|
|
735
|
+
}) => {
|
|
736
|
+
return jsx("div", Object.assign({
|
|
802
737
|
className: "modal-actions"
|
|
803
|
-
},
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
|
|
811
|
-
|
|
812
|
-
|
|
738
|
+
}, {
|
|
739
|
+
children: children
|
|
740
|
+
}), void 0);
|
|
741
|
+
};
|
|
742
|
+
const GoAModalContent = ({
|
|
743
|
+
disableScroll,
|
|
744
|
+
children,
|
|
745
|
+
testId
|
|
746
|
+
}) => {
|
|
813
747
|
if (disableScroll) {
|
|
814
|
-
return
|
|
748
|
+
return jsx("div", Object.assign({
|
|
815
749
|
"data-testid": testId,
|
|
816
750
|
style: {
|
|
817
751
|
padding: "0 1.75rem"
|
|
818
752
|
}
|
|
819
|
-
},
|
|
753
|
+
}, {
|
|
754
|
+
children: children
|
|
755
|
+
}), void 0);
|
|
820
756
|
}
|
|
821
757
|
|
|
822
|
-
return
|
|
758
|
+
return jsx(GoAScrollable, Object.assign({
|
|
823
759
|
testId: testId,
|
|
824
760
|
vertical: true,
|
|
825
761
|
hPadding: 1.75
|
|
826
|
-
},
|
|
762
|
+
}, {
|
|
763
|
+
children: children
|
|
764
|
+
}), void 0);
|
|
827
765
|
}; // *************
|
|
828
766
|
// GoAModalTitle
|
|
829
767
|
// *************
|
|
830
768
|
|
|
831
|
-
|
|
832
|
-
|
|
833
|
-
|
|
834
|
-
|
|
769
|
+
const GoAModalTitle = ({
|
|
770
|
+
children,
|
|
771
|
+
testId
|
|
772
|
+
}) => {
|
|
773
|
+
return jsx("div", Object.assign({
|
|
835
774
|
"data-testid": testId,
|
|
836
775
|
className: "modal-title"
|
|
837
|
-
},
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
|
|
841
|
-
// ******************************************
|
|
842
|
-
// Container - Contains all the content items
|
|
843
|
-
// ******************************************
|
|
844
|
-
|
|
845
|
-
var Container = function Container(_ref5) {
|
|
846
|
-
var children = _ref5.children,
|
|
847
|
-
onClick = _ref5.onClick;
|
|
848
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
849
|
-
className: "modal"
|
|
850
|
-
}, onClick && /*#__PURE__*/React.createElement("div", {
|
|
851
|
-
className: "modal-close"
|
|
852
|
-
}, /*#__PURE__*/React.createElement(GoAIconButton, {
|
|
853
|
-
type: "close",
|
|
854
|
-
onClick: onClick
|
|
855
|
-
})), /*#__PURE__*/React.createElement("div", {
|
|
856
|
-
className: "modal-container"
|
|
857
|
-
}, children), onClick && /*#__PURE__*/React.createElement("div", {
|
|
858
|
-
style: {
|
|
859
|
-
minHeight: '1.75rem'
|
|
860
|
-
}
|
|
861
|
-
}));
|
|
862
|
-
}; // ****************
|
|
863
|
-
// Background
|
|
864
|
-
// ****************
|
|
776
|
+
}, {
|
|
777
|
+
children: children
|
|
778
|
+
}), void 0);
|
|
779
|
+
};
|
|
865
780
|
|
|
781
|
+
const Container = ({
|
|
782
|
+
children,
|
|
783
|
+
onClick
|
|
784
|
+
}) => {
|
|
785
|
+
return jsxs("div", Object.assign({
|
|
786
|
+
className: "modal"
|
|
787
|
+
}, {
|
|
788
|
+
children: [onClick && jsx("div", Object.assign({
|
|
789
|
+
className: "modal-close"
|
|
790
|
+
}, {
|
|
791
|
+
children: jsx(GoAIconButton, {
|
|
792
|
+
type: 'close',
|
|
793
|
+
onClick: onClick
|
|
794
|
+
}, void 0)
|
|
795
|
+
}), void 0), jsx("div", Object.assign({
|
|
796
|
+
className: "modal-container"
|
|
797
|
+
}, {
|
|
798
|
+
children: children
|
|
799
|
+
}), void 0), onClick && jsx("div", {
|
|
800
|
+
style: {
|
|
801
|
+
minHeight: '1.75rem'
|
|
802
|
+
}
|
|
803
|
+
}, void 0)]
|
|
804
|
+
}), void 0);
|
|
805
|
+
};
|
|
866
806
|
|
|
867
|
-
|
|
868
|
-
|
|
869
|
-
|
|
870
|
-
|
|
807
|
+
const Background = ({
|
|
808
|
+
onClick,
|
|
809
|
+
testId
|
|
810
|
+
}) => {
|
|
811
|
+
return jsx("div", {
|
|
871
812
|
className: "modal-background",
|
|
872
813
|
onClick: onClick,
|
|
873
814
|
"data-testid": testId
|
|
874
|
-
});
|
|
815
|
+
}, void 0);
|
|
875
816
|
}; // *******
|
|
876
817
|
// Helpers
|
|
877
818
|
// *******
|
|
878
819
|
|
|
879
|
-
/**
|
|
880
|
-
* Based on the an invisible container and the window width it calculates the scrollbar width
|
|
820
|
+
/**
|
|
821
|
+
* Based on the an invisible container and the window width it calculates the scrollbar width
|
|
881
822
|
*/
|
|
882
823
|
|
|
883
824
|
|
|
@@ -887,39 +828,38 @@ function calculateScrollbarWidth() {
|
|
|
887
828
|
return 0;
|
|
888
829
|
}
|
|
889
830
|
|
|
890
|
-
|
|
831
|
+
const outer = document.createElement('div');
|
|
891
832
|
outer.style.visibility = 'hidden';
|
|
892
833
|
outer.style.overflow = 'scroll';
|
|
893
834
|
document.body.appendChild(outer); // Creating inner element and placing it in the container
|
|
894
835
|
|
|
895
|
-
|
|
836
|
+
const inner = document.createElement('div');
|
|
896
837
|
outer.appendChild(inner); // Calculating difference between container's full width and the child width
|
|
897
838
|
|
|
898
|
-
|
|
839
|
+
const scrollbarWidth = outer.offsetWidth - inner.offsetWidth; // Removing temporary elements from the DOM
|
|
899
840
|
|
|
900
841
|
outer.parentNode.removeChild(outer);
|
|
901
842
|
return scrollbarWidth;
|
|
902
843
|
}
|
|
903
844
|
|
|
904
|
-
var css_248z
|
|
905
|
-
styleInject(css_248z
|
|
845
|
+
var css_248z = ":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 /* line-height */\n --lh-xs: 0.875rem;\n --lh-sm: 1rem;\n --lh-base: 1.5rem;\n --lh-lg: 2rem;\n --lh-xl: 2.75rem;\n --lh-2xl: 3.5rem;\n --border-radius-sm: 0.15rem;\n --border-radius: 0.25rem;\n --border-radius-base: 0.25rem;\n --border-radius-lg: 0.5rem;\n --spacing-1: 0.5rem;\n --spacing-2: 0.875rem;\n --spacing-3: 1.75rem;\n --input-height: 2.625rem;\n --input-padding: 0.5rem;\n --input-border-radius: 0.25rem;\n --input-font-size: var(--fs-base);\n}\n\n:host, :root {\n --color-white: #fff;\n --color-black: #333;\n --color-gray-100: #f1f1f1;\n --color-gray-200: #dcdcdc;\n --color-gray-500: #adadad;\n --color-gray-600: #767676;\n --color-gray-700: #666;\n --color-gray-900: #333;\n --color-tealblue-100: #c8eefa;\n --color-tealblue-500: #0081a2;\n --color-tealblue-900: #005072;\n --color-orange: #feba35;\n --color-orange-100: hsl(39.7, 99.01%, 98%);\n --color-orange-500: hsl(39.7, 99.01%, 60.2%);\n --color-orange-900: hsl(39.7, 99.01%, 30%);\n --color-red: #ec040b;\n --color-red-100: hsl(358.19, 96.67%, 98%);\n --color-red-500: hsl(358.19, 96.67%, 47.06%);\n --color-red-600: hsl(358.19, 96.67%, 40%);\n --color-red-900: hsl(358.19, 96.67%, 20%);\n --color-green: #00853F;\n --color-green-100: hsl(148, 100%, 95%);\n --color-green-500: hsl(148.42, 100%, 26.08%);\n --color-green-900: hsl(148, 100%, 10%);\n --color-blue-100: #e3f2ff;\n --color-blue-500: #0070c4;\n --color-blue-600: #004f84;\n}\n\n/* Forms */\n.goa-textarea {\n outline: none;\n transition: box-shadow 0.1s ease-in;\n border: 1px solid var(--color-gray-700);\n border-radius: 3px;\n background: white;\n color: var(--color-gray-900);\n padding: var(--input-padding);\n font-size: var(--input-font-size);\n display: block;\n width: 100%;\n}\n.goa-textarea:hover {\n border-color: var(--color-blue-600);\n}\n.goa-textarea:active, .goa-textarea:focus, .goa-textarea:focus-within {\n box-shadow: 0 0 0 3px var(--color-orange);\n}\n.goa-textarea:disabled {\n border-color: var(--color-gray-500);\n}\n.goa-textarea:disabled:hover {\n border-color: var(--color-gray-500);\n}\n.goa-textarea:disabled:focus {\n box-shadow: none;\n}\n\n.goa-state--error textarea,\n.goa-state--error textarea:hover {\n border: 2px solid var(--color-red);\n}";
|
|
846
|
+
styleInject(css_248z);
|
|
906
847
|
|
|
907
|
-
|
|
908
|
-
|
|
909
|
-
|
|
910
|
-
|
|
911
|
-
|
|
912
|
-
|
|
913
|
-
|
|
848
|
+
const GoATextArea = ({
|
|
849
|
+
id,
|
|
850
|
+
name,
|
|
851
|
+
value,
|
|
852
|
+
placeholder,
|
|
853
|
+
onChange
|
|
854
|
+
}) => {
|
|
855
|
+
return jsx("textarea", {
|
|
914
856
|
id: id,
|
|
915
857
|
name: name,
|
|
916
858
|
className: "goa-textarea",
|
|
917
859
|
placeholder: placeholder,
|
|
918
|
-
onChange:
|
|
919
|
-
return _onChange(name, e.target.value);
|
|
920
|
-
},
|
|
860
|
+
onChange: e => onChange(name, e.target.value),
|
|
921
861
|
value: value
|
|
922
|
-
});
|
|
862
|
+
}, void 0);
|
|
923
863
|
};
|
|
924
864
|
|
|
925
865
|
export { GoAAppVersionHeader, GoABadge, GoAButton, GoACard, GoAEmergencyBadge, GoAFlexRow, GoAForm, GoAFormActions, GoAFormItem, GoAIcon, GoAIconButton, GoAInfoBadge, GoAInput, GoAInputDate, GoAInputDateTime, GoAInputEmail, GoAInputFile, GoAInputMonth, GoAInputNumber, GoAInputPassword, GoAInputRange, GoAInputSearch, GoAInputTel, GoAInputText, GoAInputTime, GoAInputUrl, GoAModal, GoAModalActions, GoAModalContent, GoAModalTitle, GoAScrollable, GoASuccessBadge, GoATextArea, GoATransition, GoATransitionSequence, GoAWarningBadge };
|