@abgov/react-components 3.4.0-beta.63 → 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 +0 -0
- 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 +552 -614
- package/experimental/react-components.umd.js +879 -910
- 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/package.json +4 -3
- package/react-components.esm.js +934 -992
- package/react-components.umd.js +946 -936
- 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 border: none; }\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,585 +75,520 @@ function getSize(size) {
|
|
|
74
75
|
}
|
|
75
76
|
}
|
|
76
77
|
|
|
77
|
-
function GoAIconButton(
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
return /*#__PURE__*/React.createElement("button", {
|
|
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({
|
|
88
88
|
title: title,
|
|
89
89
|
disabled: disabled,
|
|
90
|
-
className:
|
|
90
|
+
className: `goa-icon-button goa-icon-button-${variant}`,
|
|
91
91
|
"data-testid": testId,
|
|
92
92
|
onClick: onClick
|
|
93
|
-
},
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
93
|
+
}, {
|
|
94
|
+
children: jsx(GoAIcon, {
|
|
95
|
+
type: type,
|
|
96
|
+
size: size
|
|
97
|
+
}, void 0)
|
|
98
|
+
}), void 0);
|
|
97
99
|
}
|
|
98
100
|
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
101
|
+
const GoABadge = ({
|
|
102
|
+
type,
|
|
103
|
+
content,
|
|
104
|
+
icon,
|
|
105
|
+
testId
|
|
106
|
+
}) => {
|
|
107
|
+
return jsxs("div", Object.assign({
|
|
105
108
|
"data-testid": testId,
|
|
106
|
-
className: classnames(styles['goa-badge'], styles[
|
|
107
|
-
},
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
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({
|
|
117
125
|
"data-testid": testId,
|
|
118
|
-
className: classnames(styles['goa-badge'], styles[
|
|
119
|
-
},
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
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({
|
|
129
142
|
"data-testid": testId,
|
|
130
|
-
className: classnames(styles['goa-badge'], styles[
|
|
131
|
-
},
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
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({
|
|
141
159
|
"data-testid": testId,
|
|
142
|
-
className: classnames(styles['goa-badge'], styles[
|
|
143
|
-
},
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
}
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
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({
|
|
153
176
|
"data-testid": testId,
|
|
154
|
-
className: classnames(styles['goa-badge'], styles[
|
|
155
|
-
},
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
}
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
value: value,
|
|
166
|
-
enumerable: true,
|
|
167
|
-
configurable: true,
|
|
168
|
-
writable: true
|
|
169
|
-
});
|
|
170
|
-
} else {
|
|
171
|
-
obj[key] = value;
|
|
172
|
-
}
|
|
173
|
-
|
|
174
|
-
return obj;
|
|
175
|
-
}
|
|
176
|
-
|
|
177
|
-
function ownKeys(object, enumerableOnly) {
|
|
178
|
-
var keys = Object.keys(object);
|
|
179
|
-
|
|
180
|
-
if (Object.getOwnPropertySymbols) {
|
|
181
|
-
var symbols = Object.getOwnPropertySymbols(object);
|
|
182
|
-
if (enumerableOnly) symbols = symbols.filter(function (sym) {
|
|
183
|
-
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
|
|
184
|
-
});
|
|
185
|
-
keys.push.apply(keys, symbols);
|
|
186
|
-
}
|
|
187
|
-
|
|
188
|
-
return keys;
|
|
189
|
-
}
|
|
190
|
-
|
|
191
|
-
function _objectSpread2(target) {
|
|
192
|
-
for (var i = 1; i < arguments.length; i++) {
|
|
193
|
-
var source = arguments[i] != null ? arguments[i] : {};
|
|
194
|
-
|
|
195
|
-
if (i % 2) {
|
|
196
|
-
ownKeys(Object(source), true).forEach(function (key) {
|
|
197
|
-
_defineProperty(target, key, source[key]);
|
|
198
|
-
});
|
|
199
|
-
} else if (Object.getOwnPropertyDescriptors) {
|
|
200
|
-
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
|
|
201
|
-
} else {
|
|
202
|
-
ownKeys(Object(source)).forEach(function (key) {
|
|
203
|
-
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
|
|
204
|
-
});
|
|
205
|
-
}
|
|
206
|
-
}
|
|
207
|
-
|
|
208
|
-
return target;
|
|
209
|
-
}
|
|
210
|
-
|
|
211
|
-
function _objectWithoutPropertiesLoose(source, excluded) {
|
|
212
|
-
if (source == null) return {};
|
|
213
|
-
var target = {};
|
|
214
|
-
var sourceKeys = Object.keys(source);
|
|
215
|
-
var key, i;
|
|
216
|
-
|
|
217
|
-
for (i = 0; i < sourceKeys.length; i++) {
|
|
218
|
-
key = sourceKeys[i];
|
|
219
|
-
if (excluded.indexOf(key) >= 0) continue;
|
|
220
|
-
target[key] = source[key];
|
|
221
|
-
}
|
|
222
|
-
|
|
223
|
-
return target;
|
|
224
|
-
}
|
|
225
|
-
|
|
226
|
-
function _objectWithoutProperties(source, excluded) {
|
|
227
|
-
if (source == null) return {};
|
|
228
|
-
|
|
229
|
-
var target = _objectWithoutPropertiesLoose(source, excluded);
|
|
230
|
-
|
|
231
|
-
var key, i;
|
|
232
|
-
|
|
233
|
-
if (Object.getOwnPropertySymbols) {
|
|
234
|
-
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
|
|
235
|
-
|
|
236
|
-
for (i = 0; i < sourceSymbolKeys.length; i++) {
|
|
237
|
-
key = sourceSymbolKeys[i];
|
|
238
|
-
if (excluded.indexOf(key) >= 0) continue;
|
|
239
|
-
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
|
|
240
|
-
target[key] = source[key];
|
|
241
|
-
}
|
|
242
|
-
}
|
|
243
|
-
|
|
244
|
-
return target;
|
|
245
|
-
}
|
|
246
|
-
|
|
247
|
-
function _slicedToArray(arr, i) {
|
|
248
|
-
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
|
|
249
|
-
}
|
|
250
|
-
|
|
251
|
-
function _arrayWithHoles(arr) {
|
|
252
|
-
if (Array.isArray(arr)) return arr;
|
|
253
|
-
}
|
|
254
|
-
|
|
255
|
-
function _iterableToArrayLimit(arr, i) {
|
|
256
|
-
if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
|
|
257
|
-
var _arr = [];
|
|
258
|
-
var _n = true;
|
|
259
|
-
var _d = false;
|
|
260
|
-
var _e = undefined;
|
|
261
|
-
|
|
262
|
-
try {
|
|
263
|
-
for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
|
|
264
|
-
_arr.push(_s.value);
|
|
265
|
-
|
|
266
|
-
if (i && _arr.length === i) break;
|
|
267
|
-
}
|
|
268
|
-
} catch (err) {
|
|
269
|
-
_d = true;
|
|
270
|
-
_e = err;
|
|
271
|
-
} finally {
|
|
272
|
-
try {
|
|
273
|
-
if (!_n && _i["return"] != null) _i["return"]();
|
|
274
|
-
} finally {
|
|
275
|
-
if (_d) throw _e;
|
|
276
|
-
}
|
|
277
|
-
}
|
|
278
|
-
|
|
279
|
-
return _arr;
|
|
280
|
-
}
|
|
281
|
-
|
|
282
|
-
function _unsupportedIterableToArray(o, minLen) {
|
|
283
|
-
if (!o) return;
|
|
284
|
-
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
|
|
285
|
-
var n = Object.prototype.toString.call(o).slice(8, -1);
|
|
286
|
-
if (n === "Object" && o.constructor) n = o.constructor.name;
|
|
287
|
-
if (n === "Map" || n === "Set") return Array.from(o);
|
|
288
|
-
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
|
|
289
|
-
}
|
|
290
|
-
|
|
291
|
-
function _arrayLikeToArray(arr, len) {
|
|
292
|
-
if (len == null || len > arr.length) len = arr.length;
|
|
293
|
-
|
|
294
|
-
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
|
|
295
|
-
|
|
296
|
-
return arr2;
|
|
297
|
-
}
|
|
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
|
+
};
|
|
298
188
|
|
|
299
|
-
|
|
300
|
-
|
|
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;
|
|
301
214
|
}
|
|
302
215
|
|
|
303
|
-
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}";
|
|
304
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"};
|
|
305
|
-
styleInject(css_248z$
|
|
218
|
+
styleInject(css_248z$9);
|
|
306
219
|
|
|
307
|
-
|
|
308
|
-
var
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
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({
|
|
322
234
|
className: css,
|
|
323
235
|
ref: buttonRef,
|
|
324
236
|
title: title,
|
|
325
237
|
onClick: onClick
|
|
326
|
-
}, props
|
|
238
|
+
}, props, {
|
|
239
|
+
children: children
|
|
240
|
+
}), void 0);
|
|
327
241
|
};
|
|
328
242
|
|
|
329
|
-
var css_248z$
|
|
330
|
-
var styles
|
|
331
|
-
styleInject(css_248z$
|
|
332
|
-
|
|
333
|
-
var GoAAppVersionHeader = function GoAAppVersionHeader(_ref) {
|
|
334
|
-
var isProdEnvironment = _ref.isProdEnvironment,
|
|
335
|
-
environment = _ref.environment,
|
|
336
|
-
version = _ref.version;
|
|
337
|
-
|
|
338
|
-
var _useState = useState(false),
|
|
339
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
340
|
-
closed = _useState2[0],
|
|
341
|
-
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);
|
|
342
246
|
|
|
247
|
+
const GoAAppVersionHeader = ({
|
|
248
|
+
isProdEnvironment,
|
|
249
|
+
environment,
|
|
250
|
+
version
|
|
251
|
+
}) => {
|
|
252
|
+
const [closed, setClosed] = useState(false);
|
|
343
253
|
if (closed || isProdEnvironment) return null;
|
|
344
|
-
return
|
|
345
|
-
className: classnames(styles
|
|
346
|
-
},
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
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);
|
|
360
276
|
};
|
|
361
277
|
|
|
362
|
-
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}";
|
|
363
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"};
|
|
364
|
-
styleInject(css_248z$
|
|
280
|
+
styleInject(css_248z$7);
|
|
365
281
|
|
|
366
|
-
|
|
367
|
-
var
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
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
|
+
});
|
|
381
296
|
}, {});
|
|
382
|
-
return
|
|
383
|
-
className: classnames(css['goa-card'], css[
|
|
384
|
-
"data-testid":
|
|
297
|
+
return jsxs("div", Object.assign({}, dataProps, {
|
|
298
|
+
className: classnames(css['goa-card'], css[`goa-card--${type}`]),
|
|
299
|
+
"data-testid": 'card-container',
|
|
385
300
|
style: {
|
|
386
|
-
minWidth
|
|
387
|
-
maxWidth
|
|
301
|
+
minWidth,
|
|
302
|
+
maxWidth
|
|
388
303
|
}
|
|
389
|
-
}
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
}
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
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
|
+
};
|
|
323
|
+
|
|
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);
|
|
403
326
|
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
327
|
+
const GoAFlexRow = ({
|
|
328
|
+
gap,
|
|
329
|
+
minWidth,
|
|
330
|
+
children
|
|
331
|
+
}) => {
|
|
332
|
+
const style = {
|
|
409
333
|
gap: gap === 'small' ? '1rem' : gap === 'medium' ? '2rem' : gap === 'large' ? '3rem' : '0'
|
|
410
334
|
};
|
|
411
335
|
|
|
412
|
-
|
|
413
|
-
return React.Children.map(children,
|
|
414
|
-
return React.cloneElement(child, {
|
|
415
|
-
style:
|
|
336
|
+
const getChildren = () => {
|
|
337
|
+
return React.Children.map(children, child => {
|
|
338
|
+
return /*#__PURE__*/React.cloneElement(child, {
|
|
339
|
+
style: Object.assign({
|
|
416
340
|
flexBasis: minWidth
|
|
417
341
|
}, child.props.style)
|
|
418
342
|
});
|
|
419
343
|
});
|
|
420
344
|
};
|
|
421
345
|
|
|
422
|
-
return
|
|
346
|
+
return jsx("div", Object.assign({
|
|
423
347
|
className: "goa-flex-row",
|
|
424
348
|
style: style
|
|
425
|
-
},
|
|
349
|
+
}, {
|
|
350
|
+
children: getChildren()
|
|
351
|
+
}), void 0);
|
|
426
352
|
};
|
|
427
353
|
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
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({
|
|
434
361
|
className: className
|
|
435
|
-
},
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
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);
|
|
441
374
|
};
|
|
442
375
|
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
return
|
|
448
|
-
className:
|
|
449
|
-
},
|
|
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);
|
|
450
385
|
};
|
|
451
386
|
|
|
452
|
-
var css_248z$
|
|
453
|
-
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);
|
|
454
389
|
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
390
|
+
const GoAForm = ({
|
|
391
|
+
children
|
|
392
|
+
}) => {
|
|
393
|
+
return jsx("div", Object.assign({
|
|
458
394
|
className: "goa-form"
|
|
459
|
-
},
|
|
395
|
+
}, {
|
|
396
|
+
children: children
|
|
397
|
+
}), void 0);
|
|
460
398
|
};
|
|
461
399
|
|
|
462
|
-
var css_248z$
|
|
463
|
-
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);
|
|
464
402
|
|
|
465
|
-
|
|
466
|
-
var
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
if (focused) {
|
|
483
|
-
var _inputRef$current;
|
|
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;
|
|
484
420
|
|
|
485
|
-
|
|
421
|
+
if (focused) {
|
|
422
|
+
(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
486
423
|
} else {
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
(_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();
|
|
490
425
|
}
|
|
491
426
|
}, [focused, inputRef]);
|
|
492
|
-
|
|
427
|
+
const rootCss = classnames({
|
|
493
428
|
'goa-input': true,
|
|
494
429
|
'goa-input--disabled': disabled
|
|
495
430
|
});
|
|
496
|
-
return
|
|
431
|
+
return jsxs("div", Object.assign({
|
|
497
432
|
className: rootCss
|
|
498
|
-
},
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
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);
|
|
526
470
|
};
|
|
527
|
-
|
|
528
|
-
return
|
|
471
|
+
const GoAInputText = props => {
|
|
472
|
+
return jsx(GoAInput, Object.assign({}, props, {
|
|
529
473
|
type: "text"
|
|
530
|
-
}));
|
|
474
|
+
}), void 0);
|
|
531
475
|
};
|
|
532
|
-
|
|
533
|
-
return
|
|
476
|
+
const GoAInputPassword = props => {
|
|
477
|
+
return jsx(GoAInput, Object.assign({}, props, {
|
|
534
478
|
type: "password"
|
|
535
|
-
}));
|
|
479
|
+
}), void 0);
|
|
536
480
|
};
|
|
537
|
-
|
|
538
|
-
return
|
|
481
|
+
const GoAInputDate = props => {
|
|
482
|
+
return jsx(GoAInput, Object.assign({}, props, {
|
|
539
483
|
type: "date",
|
|
540
484
|
trailingIcon: "calendar"
|
|
541
|
-
}));
|
|
485
|
+
}), void 0);
|
|
542
486
|
};
|
|
543
|
-
|
|
544
|
-
return
|
|
487
|
+
const GoAInputTime = props => {
|
|
488
|
+
return jsx(GoAInput, Object.assign({}, props, {
|
|
545
489
|
type: "time"
|
|
546
|
-
}));
|
|
490
|
+
}), void 0);
|
|
547
491
|
};
|
|
548
|
-
|
|
549
|
-
return
|
|
492
|
+
const GoAInputDateTime = props => {
|
|
493
|
+
return jsx(GoAInput, Object.assign({}, props, {
|
|
550
494
|
type: "datetime-local",
|
|
551
495
|
trailingIcon: "calendar"
|
|
552
|
-
}));
|
|
496
|
+
}), void 0);
|
|
553
497
|
};
|
|
554
|
-
|
|
555
|
-
return
|
|
498
|
+
const GoAInputEmail = props => {
|
|
499
|
+
return jsx(GoAInput, Object.assign({}, props, {
|
|
556
500
|
type: "email"
|
|
557
|
-
}));
|
|
501
|
+
}), void 0);
|
|
558
502
|
};
|
|
559
|
-
|
|
560
|
-
return
|
|
503
|
+
const GoAInputSearch = props => {
|
|
504
|
+
return jsx(GoAInput, Object.assign({}, props, {
|
|
561
505
|
type: "text",
|
|
562
506
|
trailingIcon: "search"
|
|
563
|
-
}));
|
|
507
|
+
}), void 0);
|
|
564
508
|
};
|
|
565
|
-
|
|
566
|
-
return
|
|
509
|
+
const GoAInputUrl = props => {
|
|
510
|
+
return jsx(GoAInput, Object.assign({}, props, {
|
|
567
511
|
type: "url"
|
|
568
|
-
}));
|
|
512
|
+
}), void 0);
|
|
569
513
|
};
|
|
570
|
-
|
|
571
|
-
return
|
|
514
|
+
const GoAInputTel = props => {
|
|
515
|
+
return jsx(GoAInput, Object.assign({}, props, {
|
|
572
516
|
type: "tel"
|
|
573
|
-
}));
|
|
517
|
+
}), void 0);
|
|
574
518
|
};
|
|
575
|
-
|
|
576
|
-
return
|
|
519
|
+
const GoAInputFile = props => {
|
|
520
|
+
return jsx("input", {
|
|
577
521
|
id: props.id,
|
|
578
522
|
name: props.name,
|
|
579
523
|
type: "file",
|
|
580
|
-
onChange:
|
|
581
|
-
return props.onChange(e.target.name, e.target.value);
|
|
582
|
-
},
|
|
524
|
+
onChange: e => props.onChange(e.target.name, e.target.value),
|
|
583
525
|
style: {
|
|
584
526
|
backgroundColor: 'revert'
|
|
585
527
|
}
|
|
586
|
-
});
|
|
528
|
+
}, void 0);
|
|
587
529
|
};
|
|
588
|
-
|
|
589
|
-
return
|
|
530
|
+
const GoAInputMonth = props => {
|
|
531
|
+
return jsx(GoAInput, Object.assign({}, props, {
|
|
590
532
|
type: "month",
|
|
591
533
|
trailingIcon: "calendar"
|
|
592
|
-
}));
|
|
534
|
+
}), void 0);
|
|
593
535
|
};
|
|
594
|
-
|
|
595
|
-
return
|
|
536
|
+
const GoAInputNumber = props => {
|
|
537
|
+
return jsx(GoAInput, Object.assign({}, props, {
|
|
596
538
|
type: "number"
|
|
597
|
-
}));
|
|
539
|
+
}), void 0);
|
|
598
540
|
};
|
|
599
|
-
|
|
600
|
-
var
|
|
601
|
-
props = _objectWithoutProperties(_ref2, ["step"]);
|
|
541
|
+
const GoAInputRange = _a => {
|
|
542
|
+
var props = __rest(_a, ["step"]);
|
|
602
543
|
|
|
603
|
-
return
|
|
544
|
+
return jsx("input", Object.assign({}, props, {
|
|
604
545
|
type: "range",
|
|
605
|
-
onChange:
|
|
606
|
-
|
|
607
|
-
}
|
|
608
|
-
}));
|
|
546
|
+
onChange: e => props.onChange(e.target.name, e.target.value)
|
|
547
|
+
}), void 0);
|
|
609
548
|
};
|
|
610
549
|
|
|
611
|
-
var css_248z$
|
|
612
|
-
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);
|
|
613
552
|
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
553
|
+
const GoAScrollable = ({
|
|
554
|
+
vertical,
|
|
555
|
+
horizontal,
|
|
556
|
+
hPadding,
|
|
557
|
+
vPadding,
|
|
558
|
+
height,
|
|
559
|
+
children,
|
|
560
|
+
testId
|
|
561
|
+
}) => {
|
|
562
|
+
const style = {
|
|
623
563
|
overflowY: vertical ? 'auto' : 'hidden',
|
|
624
564
|
overflowX: horizontal ? 'auto' : 'hidden',
|
|
625
565
|
maxHeight: height !== null && height !== void 0 ? height : '100%',
|
|
626
|
-
padding:
|
|
566
|
+
padding: `${vPadding !== null && vPadding !== void 0 ? vPadding : 0}rem ${hPadding !== null && hPadding !== void 0 ? hPadding : 0}rem`
|
|
627
567
|
};
|
|
628
|
-
return
|
|
629
|
-
className:
|
|
568
|
+
return jsx("div", Object.assign({
|
|
569
|
+
className: 'goa-scrollable',
|
|
630
570
|
style: style,
|
|
631
571
|
"data-testid": testId
|
|
632
|
-
},
|
|
572
|
+
}, {
|
|
573
|
+
children: children
|
|
574
|
+
}), void 0);
|
|
633
575
|
};
|
|
634
576
|
|
|
635
|
-
var css_248z$
|
|
636
|
-
styleInject(css_248z$
|
|
637
|
-
|
|
638
|
-
var GoATransition = function GoATransition(_ref) {
|
|
639
|
-
var name = _ref.name,
|
|
640
|
-
active = _ref.active,
|
|
641
|
-
onComplete = _ref.onComplete,
|
|
642
|
-
children = _ref.children;
|
|
643
|
-
|
|
644
|
-
var _useState = useState('init'),
|
|
645
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
646
|
-
state = _useState2[0],
|
|
647
|
-
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);
|
|
648
579
|
|
|
649
|
-
|
|
580
|
+
const GoATransition = ({
|
|
581
|
+
name,
|
|
582
|
+
active,
|
|
583
|
+
onComplete,
|
|
584
|
+
children
|
|
585
|
+
}) => {
|
|
586
|
+
const [state, setState] = useState('init');
|
|
587
|
+
useEffect(() => {
|
|
650
588
|
if (active) {
|
|
651
589
|
setState('start');
|
|
652
|
-
setTimeout(
|
|
653
|
-
|
|
654
|
-
}, 100);
|
|
655
|
-
setTimeout(function () {
|
|
590
|
+
setTimeout(() => setState('active'), 100);
|
|
591
|
+
setTimeout(() => {
|
|
656
592
|
onComplete === null || onComplete === void 0 ? void 0 : onComplete();
|
|
657
593
|
}, 500);
|
|
658
594
|
} else {
|
|
@@ -663,74 +599,68 @@ var GoATransition = function GoATransition(_ref) {
|
|
|
663
599
|
function getCss() {
|
|
664
600
|
switch (state) {
|
|
665
601
|
case 'init':
|
|
666
|
-
return
|
|
602
|
+
return `${name}-init`;
|
|
667
603
|
|
|
668
604
|
case 'start':
|
|
669
|
-
return
|
|
605
|
+
return `${name}-start`;
|
|
670
606
|
|
|
671
607
|
case 'active':
|
|
672
|
-
return
|
|
608
|
+
return `${name}-start ${name}-active`;
|
|
673
609
|
}
|
|
674
610
|
}
|
|
675
611
|
|
|
676
|
-
return
|
|
612
|
+
return jsx("div", Object.assign({
|
|
677
613
|
className: getCss()
|
|
678
|
-
},
|
|
614
|
+
}, {
|
|
615
|
+
children: children
|
|
616
|
+
}), void 0);
|
|
679
617
|
};
|
|
680
618
|
|
|
681
|
-
|
|
619
|
+
const GoATransitionSequence = props => {
|
|
682
620
|
function createTransition(props, children) {
|
|
683
|
-
return
|
|
621
|
+
return jsx(GoATransition, Object.assign({}, props, {
|
|
622
|
+
children: children
|
|
623
|
+
}), void 0);
|
|
684
624
|
}
|
|
685
625
|
|
|
686
626
|
return props.transitions // create components for the transitions
|
|
687
|
-
.map(
|
|
627
|
+
.map((state, index) => {
|
|
688
628
|
return createTransition({
|
|
689
629
|
active: props.transitionIndex % (props.transitions.length + 1) > index,
|
|
690
630
|
name: state,
|
|
691
|
-
onComplete:
|
|
692
|
-
return props === null || props === void 0 ? void 0 : props.onTransitionComplete(index, index === props.transitions.length - 1);
|
|
693
|
-
}
|
|
631
|
+
onComplete: () => props === null || props === void 0 ? void 0 : props.onTransitionComplete(index, index === props.transitions.length - 1)
|
|
694
632
|
});
|
|
695
633
|
}) // on `reduce` we need to start with the innermost child
|
|
696
634
|
.reverse() // create parent/child relationship between components
|
|
697
|
-
.reduce(
|
|
635
|
+
.reduce((child, parent) => {
|
|
698
636
|
if (!child) {
|
|
699
637
|
// the original children (user defined content to be transitioned)
|
|
700
|
-
return React.cloneElement(parent, {
|
|
638
|
+
return /*#__PURE__*/React.cloneElement(parent, {
|
|
701
639
|
children: props.children
|
|
702
640
|
});
|
|
703
641
|
}
|
|
704
642
|
|
|
705
|
-
return React.cloneElement(parent, {
|
|
643
|
+
return /*#__PURE__*/React.cloneElement(parent, {
|
|
706
644
|
children: child
|
|
707
645
|
});
|
|
708
646
|
}, null);
|
|
709
647
|
};
|
|
710
648
|
|
|
711
|
-
var css_248z$
|
|
712
|
-
styleInject(css_248z$
|
|
713
|
-
|
|
714
|
-
/**
|
|
715
|
-
* Modal - Main Component
|
|
716
|
-
*/
|
|
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);
|
|
717
651
|
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
transitionIndex = _useState2[0],
|
|
731
|
-
setTransitionIndex = _useState2[1];
|
|
732
|
-
|
|
733
|
-
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(() => {
|
|
734
664
|
if (isOpen) {
|
|
735
665
|
show();
|
|
736
666
|
} else if (transitionIndex !== 0) {
|
|
@@ -745,14 +675,14 @@ var GoAModal = function GoAModal(_ref) {
|
|
|
745
675
|
}, [isOpen]);
|
|
746
676
|
|
|
747
677
|
function hideScrollbars() {
|
|
748
|
-
|
|
678
|
+
const scrollbarWidth = calculateScrollbarWidth();
|
|
749
679
|
document.body.style.overflow = 'hidden';
|
|
750
680
|
document.body.style.paddingRight = scrollbarWidth + 'px';
|
|
751
681
|
}
|
|
752
682
|
|
|
753
683
|
function resetScrollbars() {
|
|
754
684
|
// need to perform on the next render cycle to allow the css transitions to take place
|
|
755
|
-
setTimeout(
|
|
685
|
+
setTimeout(() => {
|
|
756
686
|
document.body.style.overflow = '';
|
|
757
687
|
document.body.style.paddingRight = '0';
|
|
758
688
|
}, 300); // 300ms allows for any close animations to complete
|
|
@@ -773,24 +703,26 @@ var GoAModal = function GoAModal(_ref) {
|
|
|
773
703
|
return ['init', 'visible', 'hidden'][transitionIndex];
|
|
774
704
|
}
|
|
775
705
|
|
|
776
|
-
return
|
|
706
|
+
return jsx(GoATransitionSequence, Object.assign({
|
|
777
707
|
transitions: ['fade-in', 'fade-out'],
|
|
778
708
|
transitionIndex: transitionIndex,
|
|
779
|
-
onTransitionComplete:
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
|
|
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);
|
|
794
726
|
};
|
|
795
727
|
// Public Child Components
|
|
796
728
|
// ******************************************************************************
|
|
@@ -798,88 +730,95 @@ var GoAModal = function GoAModal(_ref) {
|
|
|
798
730
|
// GoAModalActions
|
|
799
731
|
// ***************
|
|
800
732
|
|
|
801
|
-
|
|
802
|
-
|
|
803
|
-
|
|
733
|
+
const GoAModalActions = ({
|
|
734
|
+
children
|
|
735
|
+
}) => {
|
|
736
|
+
return jsx("div", Object.assign({
|
|
804
737
|
className: "modal-actions"
|
|
805
|
-
},
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
|
|
811
|
-
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
|
|
738
|
+
}, {
|
|
739
|
+
children: children
|
|
740
|
+
}), void 0);
|
|
741
|
+
};
|
|
742
|
+
const GoAModalContent = ({
|
|
743
|
+
disableScroll,
|
|
744
|
+
children,
|
|
745
|
+
testId
|
|
746
|
+
}) => {
|
|
815
747
|
if (disableScroll) {
|
|
816
|
-
return
|
|
748
|
+
return jsx("div", Object.assign({
|
|
817
749
|
"data-testid": testId,
|
|
818
750
|
style: {
|
|
819
751
|
padding: "0 1.75rem"
|
|
820
752
|
}
|
|
821
|
-
},
|
|
753
|
+
}, {
|
|
754
|
+
children: children
|
|
755
|
+
}), void 0);
|
|
822
756
|
}
|
|
823
757
|
|
|
824
|
-
return
|
|
758
|
+
return jsx(GoAScrollable, Object.assign({
|
|
825
759
|
testId: testId,
|
|
826
760
|
vertical: true,
|
|
827
761
|
hPadding: 1.75
|
|
828
|
-
},
|
|
762
|
+
}, {
|
|
763
|
+
children: children
|
|
764
|
+
}), void 0);
|
|
829
765
|
}; // *************
|
|
830
766
|
// GoAModalTitle
|
|
831
767
|
// *************
|
|
832
768
|
|
|
833
|
-
|
|
834
|
-
|
|
835
|
-
|
|
836
|
-
|
|
769
|
+
const GoAModalTitle = ({
|
|
770
|
+
children,
|
|
771
|
+
testId
|
|
772
|
+
}) => {
|
|
773
|
+
return jsx("div", Object.assign({
|
|
837
774
|
"data-testid": testId,
|
|
838
775
|
className: "modal-title"
|
|
839
|
-
},
|
|
840
|
-
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
// ******************************************
|
|
844
|
-
// Container - Contains all the content items
|
|
845
|
-
// ******************************************
|
|
846
|
-
|
|
847
|
-
var Container = function Container(_ref5) {
|
|
848
|
-
var children = _ref5.children,
|
|
849
|
-
onClick = _ref5.onClick;
|
|
850
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
851
|
-
className: "modal"
|
|
852
|
-
}, onClick && /*#__PURE__*/React.createElement("div", {
|
|
853
|
-
className: "modal-close"
|
|
854
|
-
}, /*#__PURE__*/React.createElement(GoAIconButton, {
|
|
855
|
-
type: "close",
|
|
856
|
-
onClick: onClick
|
|
857
|
-
})), /*#__PURE__*/React.createElement("div", {
|
|
858
|
-
className: "modal-container"
|
|
859
|
-
}, children), onClick && /*#__PURE__*/React.createElement("div", {
|
|
860
|
-
style: {
|
|
861
|
-
minHeight: '1.75rem'
|
|
862
|
-
}
|
|
863
|
-
}));
|
|
864
|
-
}; // ****************
|
|
865
|
-
// Background
|
|
866
|
-
// ****************
|
|
776
|
+
}, {
|
|
777
|
+
children: children
|
|
778
|
+
}), void 0);
|
|
779
|
+
};
|
|
867
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
|
+
};
|
|
868
806
|
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
|
|
872
|
-
|
|
807
|
+
const Background = ({
|
|
808
|
+
onClick,
|
|
809
|
+
testId
|
|
810
|
+
}) => {
|
|
811
|
+
return jsx("div", {
|
|
873
812
|
className: "modal-background",
|
|
874
813
|
onClick: onClick,
|
|
875
814
|
"data-testid": testId
|
|
876
|
-
});
|
|
815
|
+
}, void 0);
|
|
877
816
|
}; // *******
|
|
878
817
|
// Helpers
|
|
879
818
|
// *******
|
|
880
819
|
|
|
881
|
-
/**
|
|
882
|
-
* 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
|
|
883
822
|
*/
|
|
884
823
|
|
|
885
824
|
|
|
@@ -889,39 +828,38 @@ function calculateScrollbarWidth() {
|
|
|
889
828
|
return 0;
|
|
890
829
|
}
|
|
891
830
|
|
|
892
|
-
|
|
831
|
+
const outer = document.createElement('div');
|
|
893
832
|
outer.style.visibility = 'hidden';
|
|
894
833
|
outer.style.overflow = 'scroll';
|
|
895
834
|
document.body.appendChild(outer); // Creating inner element and placing it in the container
|
|
896
835
|
|
|
897
|
-
|
|
836
|
+
const inner = document.createElement('div');
|
|
898
837
|
outer.appendChild(inner); // Calculating difference between container's full width and the child width
|
|
899
838
|
|
|
900
|
-
|
|
839
|
+
const scrollbarWidth = outer.offsetWidth - inner.offsetWidth; // Removing temporary elements from the DOM
|
|
901
840
|
|
|
902
841
|
outer.parentNode.removeChild(outer);
|
|
903
842
|
return scrollbarWidth;
|
|
904
843
|
}
|
|
905
844
|
|
|
906
|
-
var css_248z
|
|
907
|
-
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);
|
|
908
847
|
|
|
909
|
-
|
|
910
|
-
|
|
911
|
-
|
|
912
|
-
|
|
913
|
-
|
|
914
|
-
|
|
915
|
-
|
|
848
|
+
const GoATextArea = ({
|
|
849
|
+
id,
|
|
850
|
+
name,
|
|
851
|
+
value,
|
|
852
|
+
placeholder,
|
|
853
|
+
onChange
|
|
854
|
+
}) => {
|
|
855
|
+
return jsx("textarea", {
|
|
916
856
|
id: id,
|
|
917
857
|
name: name,
|
|
918
858
|
className: "goa-textarea",
|
|
919
859
|
placeholder: placeholder,
|
|
920
|
-
onChange:
|
|
921
|
-
return _onChange(name, e.target.value);
|
|
922
|
-
},
|
|
860
|
+
onChange: e => onChange(name, e.target.value),
|
|
923
861
|
value: value
|
|
924
|
-
});
|
|
862
|
+
}, void 0);
|
|
925
863
|
};
|
|
926
864
|
|
|
927
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 };
|