@abgov/react-components 3.4.0-beta.61 → 3.4.0-beta.65
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 +1 -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 -616
- package/experimental/react-components.umd.js +879 -907
- 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/hero-banner/hero-banner.component.d.ts +1 -1
- package/package.json +4 -3
- package/react-components.esm.js +941 -987
- package/react-components.umd.js +955 -933
- 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.5rem;\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.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,582 +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
|
-
|
|
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);
|
|
517
470
|
};
|
|
518
|
-
|
|
519
|
-
return
|
|
471
|
+
const GoAInputText = props => {
|
|
472
|
+
return jsx(GoAInput, Object.assign({}, props, {
|
|
520
473
|
type: "text"
|
|
521
|
-
}));
|
|
474
|
+
}), void 0);
|
|
522
475
|
};
|
|
523
|
-
|
|
524
|
-
return
|
|
476
|
+
const GoAInputPassword = props => {
|
|
477
|
+
return jsx(GoAInput, Object.assign({}, props, {
|
|
525
478
|
type: "password"
|
|
526
|
-
}));
|
|
479
|
+
}), void 0);
|
|
527
480
|
};
|
|
528
|
-
|
|
529
|
-
return
|
|
481
|
+
const GoAInputDate = props => {
|
|
482
|
+
return jsx(GoAInput, Object.assign({}, props, {
|
|
530
483
|
type: "date",
|
|
531
484
|
trailingIcon: "calendar"
|
|
532
|
-
}));
|
|
485
|
+
}), void 0);
|
|
533
486
|
};
|
|
534
|
-
|
|
535
|
-
return
|
|
487
|
+
const GoAInputTime = props => {
|
|
488
|
+
return jsx(GoAInput, Object.assign({}, props, {
|
|
536
489
|
type: "time"
|
|
537
|
-
}));
|
|
490
|
+
}), void 0);
|
|
538
491
|
};
|
|
539
|
-
|
|
540
|
-
return
|
|
492
|
+
const GoAInputDateTime = props => {
|
|
493
|
+
return jsx(GoAInput, Object.assign({}, props, {
|
|
541
494
|
type: "datetime-local",
|
|
542
495
|
trailingIcon: "calendar"
|
|
543
|
-
}));
|
|
496
|
+
}), void 0);
|
|
544
497
|
};
|
|
545
|
-
|
|
546
|
-
return
|
|
498
|
+
const GoAInputEmail = props => {
|
|
499
|
+
return jsx(GoAInput, Object.assign({}, props, {
|
|
547
500
|
type: "email"
|
|
548
|
-
}));
|
|
501
|
+
}), void 0);
|
|
549
502
|
};
|
|
550
|
-
|
|
551
|
-
return
|
|
503
|
+
const GoAInputSearch = props => {
|
|
504
|
+
return jsx(GoAInput, Object.assign({}, props, {
|
|
552
505
|
type: "text",
|
|
553
506
|
trailingIcon: "search"
|
|
554
|
-
}));
|
|
507
|
+
}), void 0);
|
|
555
508
|
};
|
|
556
|
-
|
|
557
|
-
return
|
|
509
|
+
const GoAInputUrl = props => {
|
|
510
|
+
return jsx(GoAInput, Object.assign({}, props, {
|
|
558
511
|
type: "url"
|
|
559
|
-
}));
|
|
512
|
+
}), void 0);
|
|
560
513
|
};
|
|
561
|
-
|
|
562
|
-
return
|
|
514
|
+
const GoAInputTel = props => {
|
|
515
|
+
return jsx(GoAInput, Object.assign({}, props, {
|
|
563
516
|
type: "tel"
|
|
564
|
-
}));
|
|
517
|
+
}), void 0);
|
|
565
518
|
};
|
|
566
|
-
|
|
567
|
-
return
|
|
519
|
+
const GoAInputFile = props => {
|
|
520
|
+
return jsx("input", {
|
|
568
521
|
id: props.id,
|
|
569
522
|
name: props.name,
|
|
570
523
|
type: "file",
|
|
571
|
-
onChange:
|
|
572
|
-
return props.onChange(e.target.name, e.target.value);
|
|
573
|
-
},
|
|
524
|
+
onChange: e => props.onChange(e.target.name, e.target.value),
|
|
574
525
|
style: {
|
|
575
526
|
backgroundColor: 'revert'
|
|
576
527
|
}
|
|
577
|
-
});
|
|
528
|
+
}, void 0);
|
|
578
529
|
};
|
|
579
|
-
|
|
580
|
-
return
|
|
530
|
+
const GoAInputMonth = props => {
|
|
531
|
+
return jsx(GoAInput, Object.assign({}, props, {
|
|
581
532
|
type: "month",
|
|
582
533
|
trailingIcon: "calendar"
|
|
583
|
-
}));
|
|
534
|
+
}), void 0);
|
|
584
535
|
};
|
|
585
|
-
|
|
586
|
-
return
|
|
536
|
+
const GoAInputNumber = props => {
|
|
537
|
+
return jsx(GoAInput, Object.assign({}, props, {
|
|
587
538
|
type: "number"
|
|
588
|
-
}));
|
|
539
|
+
}), void 0);
|
|
589
540
|
};
|
|
590
|
-
|
|
591
|
-
var
|
|
592
|
-
step = _ref2$step === void 0 ? 1 : _ref2$step,
|
|
593
|
-
props = _objectWithoutProperties(_ref2, ["step"]);
|
|
541
|
+
const GoAInputRange = _a => {
|
|
542
|
+
var props = __rest(_a, ["step"]);
|
|
594
543
|
|
|
595
|
-
return
|
|
596
|
-
id: props.id,
|
|
597
|
-
min: props.min,
|
|
598
|
-
max: props.max,
|
|
599
|
-
step: step,
|
|
600
|
-
name: props.name,
|
|
544
|
+
return jsx("input", Object.assign({}, props, {
|
|
601
545
|
type: "range",
|
|
602
|
-
onChange:
|
|
603
|
-
|
|
604
|
-
}
|
|
605
|
-
});
|
|
546
|
+
onChange: e => props.onChange(e.target.name, e.target.value)
|
|
547
|
+
}), void 0);
|
|
606
548
|
};
|
|
607
549
|
|
|
608
|
-
var css_248z$
|
|
609
|
-
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);
|
|
610
552
|
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
553
|
+
const GoAScrollable = ({
|
|
554
|
+
vertical,
|
|
555
|
+
horizontal,
|
|
556
|
+
hPadding,
|
|
557
|
+
vPadding,
|
|
558
|
+
height,
|
|
559
|
+
children,
|
|
560
|
+
testId
|
|
561
|
+
}) => {
|
|
562
|
+
const style = {
|
|
620
563
|
overflowY: vertical ? 'auto' : 'hidden',
|
|
621
564
|
overflowX: horizontal ? 'auto' : 'hidden',
|
|
622
565
|
maxHeight: height !== null && height !== void 0 ? height : '100%',
|
|
623
|
-
padding:
|
|
566
|
+
padding: `${vPadding !== null && vPadding !== void 0 ? vPadding : 0}rem ${hPadding !== null && hPadding !== void 0 ? hPadding : 0}rem`
|
|
624
567
|
};
|
|
625
|
-
return
|
|
626
|
-
className:
|
|
568
|
+
return jsx("div", Object.assign({
|
|
569
|
+
className: 'goa-scrollable',
|
|
627
570
|
style: style,
|
|
628
571
|
"data-testid": testId
|
|
629
|
-
},
|
|
572
|
+
}, {
|
|
573
|
+
children: children
|
|
574
|
+
}), void 0);
|
|
630
575
|
};
|
|
631
576
|
|
|
632
|
-
var css_248z$
|
|
633
|
-
styleInject(css_248z$
|
|
634
|
-
|
|
635
|
-
var GoATransition = function GoATransition(_ref) {
|
|
636
|
-
var name = _ref.name,
|
|
637
|
-
active = _ref.active,
|
|
638
|
-
onComplete = _ref.onComplete,
|
|
639
|
-
children = _ref.children;
|
|
640
|
-
|
|
641
|
-
var _useState = useState('init'),
|
|
642
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
643
|
-
state = _useState2[0],
|
|
644
|
-
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);
|
|
645
579
|
|
|
646
|
-
|
|
580
|
+
const GoATransition = ({
|
|
581
|
+
name,
|
|
582
|
+
active,
|
|
583
|
+
onComplete,
|
|
584
|
+
children
|
|
585
|
+
}) => {
|
|
586
|
+
const [state, setState] = useState('init');
|
|
587
|
+
useEffect(() => {
|
|
647
588
|
if (active) {
|
|
648
589
|
setState('start');
|
|
649
|
-
setTimeout(
|
|
650
|
-
|
|
651
|
-
}, 100);
|
|
652
|
-
setTimeout(function () {
|
|
590
|
+
setTimeout(() => setState('active'), 100);
|
|
591
|
+
setTimeout(() => {
|
|
653
592
|
onComplete === null || onComplete === void 0 ? void 0 : onComplete();
|
|
654
593
|
}, 500);
|
|
655
594
|
} else {
|
|
@@ -660,74 +599,68 @@ var GoATransition = function GoATransition(_ref) {
|
|
|
660
599
|
function getCss() {
|
|
661
600
|
switch (state) {
|
|
662
601
|
case 'init':
|
|
663
|
-
return
|
|
602
|
+
return `${name}-init`;
|
|
664
603
|
|
|
665
604
|
case 'start':
|
|
666
|
-
return
|
|
605
|
+
return `${name}-start`;
|
|
667
606
|
|
|
668
607
|
case 'active':
|
|
669
|
-
return
|
|
608
|
+
return `${name}-start ${name}-active`;
|
|
670
609
|
}
|
|
671
610
|
}
|
|
672
611
|
|
|
673
|
-
return
|
|
612
|
+
return jsx("div", Object.assign({
|
|
674
613
|
className: getCss()
|
|
675
|
-
},
|
|
614
|
+
}, {
|
|
615
|
+
children: children
|
|
616
|
+
}), void 0);
|
|
676
617
|
};
|
|
677
618
|
|
|
678
|
-
|
|
619
|
+
const GoATransitionSequence = props => {
|
|
679
620
|
function createTransition(props, children) {
|
|
680
|
-
return
|
|
621
|
+
return jsx(GoATransition, Object.assign({}, props, {
|
|
622
|
+
children: children
|
|
623
|
+
}), void 0);
|
|
681
624
|
}
|
|
682
625
|
|
|
683
626
|
return props.transitions // create components for the transitions
|
|
684
|
-
.map(
|
|
627
|
+
.map((state, index) => {
|
|
685
628
|
return createTransition({
|
|
686
629
|
active: props.transitionIndex % (props.transitions.length + 1) > index,
|
|
687
630
|
name: state,
|
|
688
|
-
onComplete:
|
|
689
|
-
return props === null || props === void 0 ? void 0 : props.onTransitionComplete(index, index === props.transitions.length - 1);
|
|
690
|
-
}
|
|
631
|
+
onComplete: () => props === null || props === void 0 ? void 0 : props.onTransitionComplete(index, index === props.transitions.length - 1)
|
|
691
632
|
});
|
|
692
633
|
}) // on `reduce` we need to start with the innermost child
|
|
693
634
|
.reverse() // create parent/child relationship between components
|
|
694
|
-
.reduce(
|
|
635
|
+
.reduce((child, parent) => {
|
|
695
636
|
if (!child) {
|
|
696
637
|
// the original children (user defined content to be transitioned)
|
|
697
|
-
return React.cloneElement(parent, {
|
|
638
|
+
return /*#__PURE__*/React.cloneElement(parent, {
|
|
698
639
|
children: props.children
|
|
699
640
|
});
|
|
700
641
|
}
|
|
701
642
|
|
|
702
|
-
return React.cloneElement(parent, {
|
|
643
|
+
return /*#__PURE__*/React.cloneElement(parent, {
|
|
703
644
|
children: child
|
|
704
645
|
});
|
|
705
646
|
}, null);
|
|
706
647
|
};
|
|
707
648
|
|
|
708
|
-
var css_248z$
|
|
709
|
-
styleInject(css_248z$
|
|
710
|
-
|
|
711
|
-
/**
|
|
712
|
-
* Modal - Main Component
|
|
713
|
-
*/
|
|
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);
|
|
714
651
|
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
transitionIndex = _useState2[0],
|
|
728
|
-
setTransitionIndex = _useState2[1];
|
|
729
|
-
|
|
730
|
-
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(() => {
|
|
731
664
|
if (isOpen) {
|
|
732
665
|
show();
|
|
733
666
|
} else if (transitionIndex !== 0) {
|
|
@@ -742,14 +675,14 @@ var GoAModal = function GoAModal(_ref) {
|
|
|
742
675
|
}, [isOpen]);
|
|
743
676
|
|
|
744
677
|
function hideScrollbars() {
|
|
745
|
-
|
|
678
|
+
const scrollbarWidth = calculateScrollbarWidth();
|
|
746
679
|
document.body.style.overflow = 'hidden';
|
|
747
680
|
document.body.style.paddingRight = scrollbarWidth + 'px';
|
|
748
681
|
}
|
|
749
682
|
|
|
750
683
|
function resetScrollbars() {
|
|
751
684
|
// need to perform on the next render cycle to allow the css transitions to take place
|
|
752
|
-
setTimeout(
|
|
685
|
+
setTimeout(() => {
|
|
753
686
|
document.body.style.overflow = '';
|
|
754
687
|
document.body.style.paddingRight = '0';
|
|
755
688
|
}, 300); // 300ms allows for any close animations to complete
|
|
@@ -770,24 +703,26 @@ var GoAModal = function GoAModal(_ref) {
|
|
|
770
703
|
return ['init', 'visible', 'hidden'][transitionIndex];
|
|
771
704
|
}
|
|
772
705
|
|
|
773
|
-
return
|
|
706
|
+
return jsx(GoATransitionSequence, Object.assign({
|
|
774
707
|
transitions: ['fade-in', 'fade-out'],
|
|
775
708
|
transitionIndex: transitionIndex,
|
|
776
|
-
onTransitionComplete:
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
|
|
790
|
-
|
|
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);
|
|
791
726
|
};
|
|
792
727
|
// Public Child Components
|
|
793
728
|
// ******************************************************************************
|
|
@@ -795,88 +730,95 @@ var GoAModal = function GoAModal(_ref) {
|
|
|
795
730
|
// GoAModalActions
|
|
796
731
|
// ***************
|
|
797
732
|
|
|
798
|
-
|
|
799
|
-
|
|
800
|
-
|
|
733
|
+
const GoAModalActions = ({
|
|
734
|
+
children
|
|
735
|
+
}) => {
|
|
736
|
+
return jsx("div", Object.assign({
|
|
801
737
|
className: "modal-actions"
|
|
802
|
-
},
|
|
803
|
-
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
|
|
811
|
-
|
|
738
|
+
}, {
|
|
739
|
+
children: children
|
|
740
|
+
}), void 0);
|
|
741
|
+
};
|
|
742
|
+
const GoAModalContent = ({
|
|
743
|
+
disableScroll,
|
|
744
|
+
children,
|
|
745
|
+
testId
|
|
746
|
+
}) => {
|
|
812
747
|
if (disableScroll) {
|
|
813
|
-
return
|
|
748
|
+
return jsx("div", Object.assign({
|
|
814
749
|
"data-testid": testId,
|
|
815
750
|
style: {
|
|
816
751
|
padding: "0 1.75rem"
|
|
817
752
|
}
|
|
818
|
-
},
|
|
753
|
+
}, {
|
|
754
|
+
children: children
|
|
755
|
+
}), void 0);
|
|
819
756
|
}
|
|
820
757
|
|
|
821
|
-
return
|
|
758
|
+
return jsx(GoAScrollable, Object.assign({
|
|
822
759
|
testId: testId,
|
|
823
760
|
vertical: true,
|
|
824
761
|
hPadding: 1.75
|
|
825
|
-
},
|
|
762
|
+
}, {
|
|
763
|
+
children: children
|
|
764
|
+
}), void 0);
|
|
826
765
|
}; // *************
|
|
827
766
|
// GoAModalTitle
|
|
828
767
|
// *************
|
|
829
768
|
|
|
830
|
-
|
|
831
|
-
|
|
832
|
-
|
|
833
|
-
|
|
769
|
+
const GoAModalTitle = ({
|
|
770
|
+
children,
|
|
771
|
+
testId
|
|
772
|
+
}) => {
|
|
773
|
+
return jsx("div", Object.assign({
|
|
834
774
|
"data-testid": testId,
|
|
835
775
|
className: "modal-title"
|
|
836
|
-
},
|
|
837
|
-
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
// ******************************************
|
|
841
|
-
// Container - Contains all the content items
|
|
842
|
-
// ******************************************
|
|
843
|
-
|
|
844
|
-
var Container = function Container(_ref5) {
|
|
845
|
-
var children = _ref5.children,
|
|
846
|
-
onClick = _ref5.onClick;
|
|
847
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
848
|
-
className: "modal"
|
|
849
|
-
}, onClick && /*#__PURE__*/React.createElement("div", {
|
|
850
|
-
className: "modal-close"
|
|
851
|
-
}, /*#__PURE__*/React.createElement(GoAIconButton, {
|
|
852
|
-
type: "close",
|
|
853
|
-
onClick: onClick
|
|
854
|
-
})), /*#__PURE__*/React.createElement("div", {
|
|
855
|
-
className: "modal-container"
|
|
856
|
-
}, children), onClick && /*#__PURE__*/React.createElement("div", {
|
|
857
|
-
style: {
|
|
858
|
-
minHeight: '1.75rem'
|
|
859
|
-
}
|
|
860
|
-
}));
|
|
861
|
-
}; // ****************
|
|
862
|
-
// Background
|
|
863
|
-
// ****************
|
|
776
|
+
}, {
|
|
777
|
+
children: children
|
|
778
|
+
}), void 0);
|
|
779
|
+
};
|
|
864
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
|
+
};
|
|
865
806
|
|
|
866
|
-
|
|
867
|
-
|
|
868
|
-
|
|
869
|
-
|
|
807
|
+
const Background = ({
|
|
808
|
+
onClick,
|
|
809
|
+
testId
|
|
810
|
+
}) => {
|
|
811
|
+
return jsx("div", {
|
|
870
812
|
className: "modal-background",
|
|
871
813
|
onClick: onClick,
|
|
872
814
|
"data-testid": testId
|
|
873
|
-
});
|
|
815
|
+
}, void 0);
|
|
874
816
|
}; // *******
|
|
875
817
|
// Helpers
|
|
876
818
|
// *******
|
|
877
819
|
|
|
878
|
-
/**
|
|
879
|
-
* 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
|
|
880
822
|
*/
|
|
881
823
|
|
|
882
824
|
|
|
@@ -886,39 +828,38 @@ function calculateScrollbarWidth() {
|
|
|
886
828
|
return 0;
|
|
887
829
|
}
|
|
888
830
|
|
|
889
|
-
|
|
831
|
+
const outer = document.createElement('div');
|
|
890
832
|
outer.style.visibility = 'hidden';
|
|
891
833
|
outer.style.overflow = 'scroll';
|
|
892
834
|
document.body.appendChild(outer); // Creating inner element and placing it in the container
|
|
893
835
|
|
|
894
|
-
|
|
836
|
+
const inner = document.createElement('div');
|
|
895
837
|
outer.appendChild(inner); // Calculating difference between container's full width and the child width
|
|
896
838
|
|
|
897
|
-
|
|
839
|
+
const scrollbarWidth = outer.offsetWidth - inner.offsetWidth; // Removing temporary elements from the DOM
|
|
898
840
|
|
|
899
841
|
outer.parentNode.removeChild(outer);
|
|
900
842
|
return scrollbarWidth;
|
|
901
843
|
}
|
|
902
844
|
|
|
903
|
-
var css_248z
|
|
904
|
-
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);
|
|
905
847
|
|
|
906
|
-
|
|
907
|
-
|
|
908
|
-
|
|
909
|
-
|
|
910
|
-
|
|
911
|
-
|
|
912
|
-
|
|
848
|
+
const GoATextArea = ({
|
|
849
|
+
id,
|
|
850
|
+
name,
|
|
851
|
+
value,
|
|
852
|
+
placeholder,
|
|
853
|
+
onChange
|
|
854
|
+
}) => {
|
|
855
|
+
return jsx("textarea", {
|
|
913
856
|
id: id,
|
|
914
857
|
name: name,
|
|
915
858
|
className: "goa-textarea",
|
|
916
859
|
placeholder: placeholder,
|
|
917
|
-
onChange:
|
|
918
|
-
return _onChange(name, e.target.value);
|
|
919
|
-
},
|
|
860
|
+
onChange: e => onChange(name, e.target.value),
|
|
920
861
|
value: value
|
|
921
|
-
});
|
|
862
|
+
}, void 0);
|
|
922
863
|
};
|
|
923
864
|
|
|
924
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 };
|