oa-componentbook 0.17.47 → 0.17.49
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/build/components/GridSystem.js +34 -0
- package/build/components/grid-system.css +205 -0
- package/build/components/oa-component-button/styles.js +2 -2
- package/build/components/oa-component-checkbox/CustomCheckBox.js +4 -3
- package/build/components/oa-component-checkbox/styles.js +15 -0
- package/build/components/oa-component-drawer/CustomDrawer.js +7 -1
- package/build/components/oa-component-drawer/styles.js +1 -1
- package/build/components/oa-component-modal/CustomModal.js +21 -11
- package/build/components/oa-component-modal/usage-example.md +0 -0
- package/build/components/oa-component-radio/CustomRadio.js +3 -2
- package/build/components/oa-component-radio/styles.js +1 -1
- package/build/components/oa-component-table/styles.js +1 -1
- package/build/components/oa-component-toggle/CustomToggle.js +5 -4
- package/build/components/oa-component-typography/styles.js +1 -1
- package/build/global-css/Typographies.js +1 -1
- package/build/widgets/oa-widget-add-spare-part/AddSparePartWidget.js +1 -1
- package/build/widgets/oa-widget-approval/styles.js +1 -1
- package/build/widgets/oa-widget-close-claim/styles.js +1 -1
- package/build/widgets/oa-widget-key-value/styles.js +1 -1
- package/build/widgets/oa-widget-notes/styles.js +1 -1
- package/build/widgets/oa-widget-send-payment-link/styles.js +1 -1
- package/build/widgets/oa-widget-stage-timeline/styles.js +2 -2
- package/build/widgets/oa-widget-upload-download/styles.js +2 -2
- package/build/widgets/oa-widget-view-previous-description/ViewPreviousDescriptionWidget.js +2 -2
- package/build/x.css +0 -0
- package/package.json +1 -1
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = GridSystem;
|
|
7
|
+
var _react = _interopRequireDefault(require("react"));
|
|
8
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
|
+
require("./grid-system.css");
|
|
10
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
11
|
+
var _templateObject, _templateObject2, _templateObject3;
|
|
12
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
|
+
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
14
|
+
function GridSystem(_ref) {
|
|
15
|
+
let {
|
|
16
|
+
children,
|
|
17
|
+
isFluid
|
|
18
|
+
} = _ref;
|
|
19
|
+
const BasicGrid = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: grid;\n /* \n Small breakpoint: 4 columns.\n */\n grid-template-columns: repeat(4, 1fr);\n gap: 16px;\n\n /* \n Medium breakpoint: 8 columns.\n */\n @media screen and (min-width: 768px) {\n grid-template-columns: repeat(8, 1fr);\n gap: 16px;\n }\n\n /* \n Large breakpoint : 12 columns.\n */\n @media screen and (min-width: 992px) {\n grid-template-columns: repeat(12, 1fr);\n gap: 24px;\n }\n\n /* \n Extra Large breakpoint: 12 columns.\n */\n @media screen and (min-width: 1200px) {\n grid-template-columns: repeat(12, 1fr);\n gap: 24px;\n }\n "])));
|
|
20
|
+
let FluidOrFixedGrid;
|
|
21
|
+
if (isFluid) {
|
|
22
|
+
FluidOrFixedGrid = (0, _styledComponents.default)(BasicGrid)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n width: 100%;\n "])));
|
|
23
|
+
} else {
|
|
24
|
+
FluidOrFixedGrid = (0, _styledComponents.default)(BasicGrid)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n margin: 0 16px;\n\n /* \n Medium breakpoint: 8 columns.\n */\n @media screen and (min-width: 768px) {\n margin: 0 32px;\n }\n\n /* \n Large breakpoint : 12 columns.\n */\n @media screen and (min-width: 992px) {\n margin: 0 32px;\n }\n\n /* \n Extra Large breakpoint: 12 columns.\n */\n @media screen and (min-width: 1200px) {\n width: 1128px;\n margin: 0 auto;\n } \n "])));
|
|
25
|
+
}
|
|
26
|
+
return /*#__PURE__*/_react.default.createElement(FluidOrFixedGrid, null, children);
|
|
27
|
+
}
|
|
28
|
+
GridSystem.propTypes = {
|
|
29
|
+
children: _propTypes.default.node.isRequired,
|
|
30
|
+
isFluid: _propTypes.default.bool
|
|
31
|
+
};
|
|
32
|
+
GridSystem.defaultProps = {
|
|
33
|
+
isFluid: false
|
|
34
|
+
};
|
|
@@ -0,0 +1,205 @@
|
|
|
1
|
+
/*
|
|
2
|
+
Small breakpoint.
|
|
3
|
+
|
|
4
|
+
On small screens, there are only 4 columns, so an element can take 4 columns at max.
|
|
5
|
+
*/
|
|
6
|
+
.col-s-1 {
|
|
7
|
+
/* No start or end defined. Span 1 columns. */
|
|
8
|
+
grid-column: span 1 / auto;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.col-s-2 {
|
|
12
|
+
/* No start or end defined. Span 2 columns. */
|
|
13
|
+
grid-column: span 2 / auto;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.col-s-3 {
|
|
17
|
+
/* No start or end defined. Span 3 columns. */
|
|
18
|
+
grid-column: span 3 / auto;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.col-s-4 {
|
|
22
|
+
/* No start or end defined. Span 4 columns. */
|
|
23
|
+
grid-column: span 4 / auto;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
/*
|
|
27
|
+
Medium breakpoint.
|
|
28
|
+
|
|
29
|
+
On medium screens, there are 8 columns, so an element can take 8 columns at max.
|
|
30
|
+
*/
|
|
31
|
+
@media screen and (min-width: 768px) {
|
|
32
|
+
.col-m-1 {
|
|
33
|
+
/* No start or end defined. Span 1 columns. */
|
|
34
|
+
grid-column: span 1 / auto;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.col-m-2 {
|
|
38
|
+
/* No start or end defined. Span 2 columns. */
|
|
39
|
+
grid-column: span 2 / auto;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.col-m-3 {
|
|
43
|
+
/* No start or end defined. Span 3 columns. */
|
|
44
|
+
grid-column: span 3 / auto;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.col-m-4 {
|
|
48
|
+
/* No start or end defined. Span 4 columns. */
|
|
49
|
+
grid-column: span 4 / auto;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.col-m-5 {
|
|
53
|
+
/* No start or end defined. Span 5 columns. */
|
|
54
|
+
grid-column: span 5 / auto;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.col-m-6 {
|
|
58
|
+
/* No start or end defined. Span 6 columns. */
|
|
59
|
+
grid-column: span 6 / auto;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.col-m-7 {
|
|
63
|
+
/* No start or end defined. Span 7 columns. */
|
|
64
|
+
grid-column: span 7 / auto;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.col-m-8 {
|
|
68
|
+
/* No start or end defined. Span 8 columns. */
|
|
69
|
+
grid-column: span 8 / auto;
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
/*
|
|
74
|
+
Large breakpoint.
|
|
75
|
+
|
|
76
|
+
On large screens, there are 12 columns, so an element can take 12 columns at max.
|
|
77
|
+
*/
|
|
78
|
+
@media screen and (min-width: 992px) {
|
|
79
|
+
.col-l-1 {
|
|
80
|
+
/* No start or end defined. Span 1 columns. */
|
|
81
|
+
grid-column: span 1 / auto;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.col-l-2 {
|
|
85
|
+
/* No start or end defined. Span 2 columns. */
|
|
86
|
+
grid-column: span 2 / auto;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.col-l-3 {
|
|
90
|
+
/* No start or end defined. Span 3 columns. */
|
|
91
|
+
grid-column: span 3 / auto;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.col-l-4 {
|
|
95
|
+
/* No start or end defined. Span 4 columns. */
|
|
96
|
+
grid-column: span 4 / auto;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.col-l-5 {
|
|
100
|
+
/* No start or end defined. Span 5 columns. */
|
|
101
|
+
grid-column: span 5 / auto;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.col-l-6 {
|
|
105
|
+
/* No start or end defined. Span 6 columns. */
|
|
106
|
+
grid-column: span 6 / auto;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.col-l-7 {
|
|
110
|
+
/* No start or end defined. Span 7 columns. */
|
|
111
|
+
grid-column: span 7 / auto;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.col-l-8 {
|
|
115
|
+
/* No start or end defined. Span 8 columns. */
|
|
116
|
+
grid-column: span 8 / auto;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.col-l-9 {
|
|
120
|
+
/* No start or end defined. Span 9 columns. */
|
|
121
|
+
grid-column: span 9 / auto;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
.col-l-10 {
|
|
125
|
+
/* No start or end defined. Span 10 columns. */
|
|
126
|
+
grid-column: span 10 / auto;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.col-l-11 {
|
|
130
|
+
/* No start or end defined. Span 11 columns. */
|
|
131
|
+
grid-column: span 11 / auto;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.col-l-12 {
|
|
135
|
+
/* No start or end defined. Span 12 columns. */
|
|
136
|
+
grid-column: span 12 / auto;
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
/*
|
|
141
|
+
Extra Large breakpoint.
|
|
142
|
+
|
|
143
|
+
On extra large screens, there are 12 columns, so an element can take 12 columns at max.
|
|
144
|
+
*/
|
|
145
|
+
@media screen and (min-width: 1200px) {
|
|
146
|
+
.col-xl-1 {
|
|
147
|
+
/* No start or end defined. Span 1 columns. */
|
|
148
|
+
grid-column: span 1 / auto;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
.col-xl-2 {
|
|
152
|
+
/* No start or end defined. Span 2 columns. */
|
|
153
|
+
grid-column: span 2 / auto;
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
.col-xl-3 {
|
|
157
|
+
/* No start or end defined. Span 3 columns. */
|
|
158
|
+
grid-column: span 3 / auto;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.col-xl-4 {
|
|
162
|
+
/* No start or end defined. Span 4 columns. */
|
|
163
|
+
grid-column: span 4 / auto;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
.col-xl-5 {
|
|
167
|
+
/* No start or end defined. Span 5 columns. */
|
|
168
|
+
grid-column: span 5 / auto;
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
.col-xl-6 {
|
|
172
|
+
/* No start or end defined. Span 6 columns. */
|
|
173
|
+
grid-column: span 6 / auto;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
.col-xl-7 {
|
|
177
|
+
/* No start or end defined. Span 7 columns. */
|
|
178
|
+
grid-column: span 7 / auto;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
.col-xl-8 {
|
|
182
|
+
/* No start or end defined. Span 8 columns. */
|
|
183
|
+
grid-column: span 8 / auto;
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
.col-xl-9 {
|
|
187
|
+
/* No start or end defined. Span 9 columns. */
|
|
188
|
+
grid-column: span 9 / auto;
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
.col-xl-10 {
|
|
192
|
+
/* No start or end defined. Span 10 columns. */
|
|
193
|
+
grid-column: span 10 / auto;
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
.col-xl-11 {
|
|
197
|
+
/* No start or end defined. Span 11 columns. */
|
|
198
|
+
grid-column: span 11 / auto;
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
.col-xl-12 {
|
|
202
|
+
/* No start or end defined. Span 12 columns. */
|
|
203
|
+
grid-column: span 12 / auto;
|
|
204
|
+
}
|
|
205
|
+
}
|
|
@@ -11,8 +11,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
11
11
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
12
12
|
var _default = {};
|
|
13
13
|
exports.default = _default;
|
|
14
|
-
const StyledButton = _styledComponents.default.button(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n border-radius: 4px;\n cursor: pointer;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n .text-container {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px; \n }\n"])));
|
|
15
|
-
const ColoredStyledButton = (0, _styledComponents.default)(StyledButton)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\n height: 2.25rem;\n /* min-width: 100px; */\n padding: 0.625rem 1rem;\n\n &.small {\n height: 1.875rem;\n /* min-width: 80px; */\n padding: 0.625rem 1rem;\n }\n\n &.medium {\n height: 2.25rem;\n /* min-width: 100px; */\n padding: 0.625rem 1rem;\n }\n\n &.large {\n height: 3rem;\n /* min-width: 136px; */\n padding: 0.625rem 1.5rem;\n }\n\n &.text-only-size {\n height: auto;\n padding: 0;\n }\n\n &.primary {\n background: var(--color-primary);\n border: 1px solid var(--color-primary);\n color: var(--color-primary-background);\n }\n &.primary:hover {\n background: var(--color-primary-hover);\n border: 1px solid var(--color-primary-hover);\n }\n\n &.primary-disabled {\n background: var(--color-disabled-button);\n cursor: not-allowed;\n color: var(--color-primary-background);\n border: 1px solid var(--color-disabled-button);\n }\n\n &.secondary {\n background: var(--color-primary-background);\n border: 1px solid var(--color-primary);\n color: var(--color-primary);\n }\n &.secondary:hover {\n border: 1px solid var(--color-primary-hover);\n color: var(--color-primary-hover);\n }\n\n &.secondary-disabled {\n background: var(--color-primary-background);\n border: 1px solid var(--color-disabled-button);\n color: var(--color-disabled-button);\n cursor: not-allowed;\n }\n\n &.text-only {\n border: none;\n background:
|
|
14
|
+
const StyledButton = _styledComponents.default.button(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n border-radius: 4px;\n cursor: pointer;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n .text-container {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px; \n text-align: left;\n }\n"])));
|
|
15
|
+
const ColoredStyledButton = (0, _styledComponents.default)(StyledButton)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\n height: 2.25rem;\n /* min-width: 100px; */\n padding: 0.625rem 1rem;\n\n &.small {\n height: 1.875rem;\n /* min-width: 80px; */\n padding: 0.625rem 1rem;\n }\n\n &.medium {\n height: 2.25rem;\n /* min-width: 100px; */\n padding: 0.625rem 1rem;\n }\n\n &.large {\n height: 3rem;\n /* min-width: 136px; */\n padding: 0.625rem 1.5rem;\n }\n\n &.text-only-size {\n height: auto;\n padding: 0;\n }\n\n &.primary {\n background: var(--color-primary);\n border: 1px solid var(--color-primary);\n color: var(--color-primary-background);\n }\n &.primary:hover {\n background: var(--color-primary-hover);\n border: 1px solid var(--color-primary-hover);\n }\n\n &.primary-disabled {\n background: var(--color-disabled-button);\n cursor: not-allowed;\n color: var(--color-primary-background);\n border: 1px solid var(--color-disabled-button);\n }\n\n &.secondary {\n background: var(--color-primary-background);\n border: 1px solid var(--color-primary);\n color: var(--color-primary);\n }\n &.secondary:hover {\n border: 1px solid var(--color-primary-hover);\n color: var(--color-primary-hover);\n }\n\n &.secondary-disabled {\n background: var(--color-primary-background);\n border: 1px solid var(--color-disabled-button);\n color: var(--color-disabled-button);\n cursor: not-allowed;\n }\n \n &.text-only {\n border: none;\n background: transparent;\n color: var(--color-primary);\n }\n &.text-only:hover {\n color: var(--color-primary-hover);\n }\n\n &.text-only-disabled {\n border: none;\n background: var(--color-primary-background);\n color: var(--color-disabled-button);\n cursor: not-allowed;\n }\n \n &.danger-primary {\n background: var(--color-negative);\n color: var(--color-primary-background);\n border: 1px solid var(--color-negative);\n }\n &.danger-primary:hover {\n background: var(--color-hover-negative);\n color: var(--color-primary-background);\n border: 1px solid var(--color-hover-negative);\n }\n\n &.danger-secondary {\n color: var(--color-negative);\n border: 1px solid var(--color-negative);\n background: var(--color-primary-background);\n }\n &.danger-secondary:hover {\n color: var(--color-hover-negative);\n border: 1px solid var(--color-hover-negative);\n background: var(--color-primary-background);\n }\n\n &.danger-text-only {\n border: none;\n color: var(--color-negative);\n background: var(--color-primary-background);\n }\n &.danger-text-only:hover {\n border: none;\n color: var(--color-hover-negative);\n background: var(--color-primary-background);\n }\n"])));
|
|
16
16
|
exports.ColoredStyledButton = ColoredStyledButton;
|
|
17
17
|
function getButtonTypography(size) {
|
|
18
18
|
switch (size) {
|
|
@@ -8,6 +8,7 @@ exports.default = void 0;
|
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
9
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
10
10
|
var _antd = require("antd");
|
|
11
|
+
var _styles = require("./styles");
|
|
11
12
|
var _Typography = _interopRequireDefault(require("../oa-component-typography/Typography"));
|
|
12
13
|
var _utils = require("../../utils");
|
|
13
14
|
const _excluded = ["data-test", "disabled", "label", "onChange", "size"];
|
|
@@ -33,17 +34,17 @@ function CustomCheckBox(_ref) {
|
|
|
33
34
|
// Call to `onChange` callback received from props.
|
|
34
35
|
onChange(event);
|
|
35
36
|
};
|
|
36
|
-
return /*#__PURE__*/_react.default.createElement(
|
|
37
|
-
"data-test": dataTest,
|
|
37
|
+
return /*#__PURE__*/_react.default.createElement(_styles.StyledCheckbox, _extends({
|
|
38
38
|
disabled: disabled,
|
|
39
39
|
onChange: handleChange
|
|
40
40
|
}, antDesignProps),
|
|
41
41
|
// The label is a string or a number
|
|
42
42
|
((0, _utils.isString)(label) || (0, _utils.isNumber)(label)) && /*#__PURE__*/_react.default.createElement(_Typography.default, {
|
|
43
|
+
color: "primary-content",
|
|
43
44
|
typography: size === 'large' ? 'type-b1-400' : 'type-b2-400'
|
|
44
45
|
}, label) ||
|
|
45
46
|
// The label is a node
|
|
46
|
-
|
|
47
|
+
/*#__PURE__*/_react.default.isValidElement(label) && label || undefined);
|
|
47
48
|
}
|
|
48
49
|
|
|
49
50
|
// This allows us referencing the Group container in our Checkbox component
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = exports.StyledCheckbox = void 0;
|
|
7
|
+
var _antd = require("antd");
|
|
8
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
9
|
+
var _templateObject;
|
|
10
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
11
|
+
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
12
|
+
var _default = {};
|
|
13
|
+
exports.default = _default;
|
|
14
|
+
const StyledCheckbox = (0, _styledComponents.default)(_antd.Checkbox)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .ant-checkbox-inner{\n border: 1px solid #717171;\n }\n .ant-checkbox-checked .ant-checkbox-inner{\n border: 1px solid #014FC5;\n background-color: #014FC5;\n }\n .ant-checkbox:hover{\n border: 1px solid #014FC5;\n }\n"])));
|
|
15
|
+
exports.StyledCheckbox = StyledCheckbox;
|
|
@@ -21,7 +21,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
|
|
|
21
21
|
function DrawerTitle(title) {
|
|
22
22
|
return ((0, _utils.isString)(title) || (0, _utils.isNumber)(title)) && /*#__PURE__*/_react.default.createElement(_Typography.default, {
|
|
23
23
|
typography: "type-sl1-700"
|
|
24
|
-
}, title) ||
|
|
24
|
+
}, title) || /*#__PURE__*/_react.default.isValidElement(title) && title || undefined;
|
|
25
25
|
}
|
|
26
26
|
function CustomDrawer(_ref) {
|
|
27
27
|
let {
|
|
@@ -75,6 +75,7 @@ function CustomDrawer(_ref) {
|
|
|
75
75
|
Object.prototype.hasOwnProperty.call(button, 'disabled') ? button.disabled
|
|
76
76
|
// If it doesn't we hardcode the button to never be disabled.
|
|
77
77
|
: false,
|
|
78
|
+
iconConfig: button === null || button === void 0 ? void 0 : button.iconConfig,
|
|
78
79
|
key: (0, _nanoid.nanoid)(),
|
|
79
80
|
label: button.label,
|
|
80
81
|
onClick: button.callback,
|
|
@@ -90,6 +91,11 @@ CustomDrawer.propTypes = {
|
|
|
90
91
|
'data-test': _propTypes.default.string,
|
|
91
92
|
disabled: _propTypes.default.bool,
|
|
92
93
|
callback: _propTypes.default.func.isRequired,
|
|
94
|
+
iconConfig: _propTypes.default.shape({
|
|
95
|
+
icon: _propTypes.default.node,
|
|
96
|
+
position: _propTypes.default.oneOf(['left', 'right']),
|
|
97
|
+
style: _propTypes.default.objectOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]))
|
|
98
|
+
}),
|
|
93
99
|
label: _propTypes.default.string.isRequired,
|
|
94
100
|
type: _propTypes.default.oneOf(['secondary', 'primary']).isRequired
|
|
95
101
|
})),
|
|
@@ -11,7 +11,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
11
11
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
12
12
|
const DrawerFooter = _styledComponents.default.aside(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n justify-content: flex-end;\n gap: 12px;\n"])));
|
|
13
13
|
exports.DrawerFooter = DrawerFooter;
|
|
14
|
-
const CustomStyledDrawer = (0, _styledComponents.default)(_antd.Drawer)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n .ant-drawer-header {\n padding:
|
|
14
|
+
const CustomStyledDrawer = (0, _styledComponents.default)(_antd.Drawer)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n .ant-drawer-header {\n padding: 20px 24px;\n background: #F6F6F6;\n height: 56px;\n }\n label{\n position: relative;\n }\n .ant-drawer-body{\n\n }\n .ant-drawer-footer {\n padding: 16px\n }\n"])));
|
|
15
15
|
exports.CustomStyledDrawer = CustomStyledDrawer;
|
|
16
16
|
const BaseDrawerTitle = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: flex;\n justify-content: space-between;\n"])));
|
|
17
17
|
exports.BaseDrawerTitle = BaseDrawerTitle;
|
|
@@ -6,16 +6,17 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
8
|
exports.default = void 0;
|
|
9
|
-
var _react =
|
|
9
|
+
var _react = _interopRequireDefault(require("react"));
|
|
10
10
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
11
|
var _antd = require("antd");
|
|
12
|
+
var _nanoid = require("nanoid");
|
|
12
13
|
var _CustomButton = _interopRequireDefault(require("../oa-component-button/CustomButton"));
|
|
13
14
|
var _Typography = _interopRequireWildcard(require("../oa-component-typography/Typography"));
|
|
14
15
|
var _utils = require("../../utils");
|
|
15
16
|
var _styles = require("./styles");
|
|
16
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
17
17
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
18
18
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
19
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
19
20
|
function CustomModal(_ref) {
|
|
20
21
|
let {
|
|
21
22
|
buttonConfig,
|
|
@@ -41,14 +42,15 @@ function CustomModal(_ref) {
|
|
|
41
42
|
|
|
42
43
|
return /*#__PURE__*/_react.default.createElement(_antd.Modal, {
|
|
43
44
|
onCancel: handleCancel,
|
|
44
|
-
title: /*#__PURE__*/_react.default.createElement(_styles.TitleContainer, null, imgSrc && /*#__PURE__*/_react.default.createElement("img", {
|
|
45
|
+
title: (title || imgSrc) && /*#__PURE__*/_react.default.createElement(_styles.TitleContainer, null, imgSrc && /*#__PURE__*/_react.default.createElement("img", {
|
|
45
46
|
src: imgSrc,
|
|
46
47
|
alt: ""
|
|
47
|
-
}), /*#__PURE__*/_react.default.createElement(_Typography.default, {
|
|
48
|
+
}), /*#__PURE__*/_react.default.isValidElement(title) && /*#__PURE__*/_react.default.createElement(_Typography.default, {
|
|
48
49
|
typography: typographies.title
|
|
49
50
|
}, title)),
|
|
50
|
-
footer: /*#__PURE__*/_react.default.createElement(_styles.ButtonContainer, null, buttonConfig.map(button => /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
|
|
51
|
-
key:
|
|
51
|
+
footer: (buttonConfig === null || buttonConfig === void 0 ? void 0 : buttonConfig.length) > 0 && /*#__PURE__*/_react.default.createElement(_styles.ButtonContainer, null, buttonConfig === null || buttonConfig === void 0 ? void 0 : buttonConfig.map(button => /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
|
|
52
|
+
key: (0, _nanoid.nanoid)(),
|
|
53
|
+
iconConfig: button === null || button === void 0 ? void 0 : button.iconConfig,
|
|
52
54
|
label: button.label,
|
|
53
55
|
onClick: button.callback,
|
|
54
56
|
size: "large",
|
|
@@ -66,24 +68,32 @@ function CustomModal(_ref) {
|
|
|
66
68
|
CustomModal.propTypes = {
|
|
67
69
|
// Array of button configurations
|
|
68
70
|
buttonConfig: _propTypes.default.arrayOf(_propTypes.default.shape({
|
|
69
|
-
callback: _propTypes.default.
|
|
71
|
+
callback: _propTypes.default.func.isRequired,
|
|
70
72
|
label: _propTypes.default.string.isRequired,
|
|
73
|
+
iconConfig: _propTypes.default.shape({
|
|
74
|
+
icon: _propTypes.default.node,
|
|
75
|
+
position: _propTypes.default.oneOf(['left', 'right']),
|
|
76
|
+
style: _propTypes.default.objectOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]))
|
|
77
|
+
}),
|
|
71
78
|
type: _propTypes.default.oneOf(['secondary', 'primary']).isRequired
|
|
72
|
-
}))
|
|
73
|
-
children: _propTypes.default.
|
|
74
|
-
title: _propTypes.default.string
|
|
79
|
+
})),
|
|
80
|
+
children: _propTypes.default.node,
|
|
81
|
+
title: _propTypes.default.string,
|
|
75
82
|
typographies: _propTypes.default.shape({
|
|
76
83
|
title: _propTypes.default.oneOf(_Typography.typographyOptions),
|
|
77
84
|
children: _propTypes.default.oneOf(_Typography.typographyOptions)
|
|
78
85
|
}),
|
|
79
|
-
imgSrc: _propTypes.default.string
|
|
86
|
+
imgSrc: _propTypes.default.string,
|
|
80
87
|
onCancel: _propTypes.default.func.isRequired,
|
|
81
88
|
open: _propTypes.default.bool,
|
|
82
89
|
width: _propTypes.default.string || _propTypes.default.number
|
|
83
90
|
};
|
|
84
91
|
CustomModal.defaultProps = {
|
|
92
|
+
buttonConfig: [],
|
|
85
93
|
children: null,
|
|
94
|
+
imgSrc: null,
|
|
86
95
|
open: true,
|
|
96
|
+
title: null,
|
|
87
97
|
typographies: {
|
|
88
98
|
title: 'type-t1-500',
|
|
89
99
|
children: 'type-b2-400'
|
|
File without changes
|
|
@@ -49,8 +49,9 @@ function CustomRadio(_ref) {
|
|
|
49
49
|
value: value,
|
|
50
50
|
"data-test": dataTest
|
|
51
51
|
}, antDesignProps), ((0, _utils.isString)(label) || (0, _utils.isNumber)(label)) && /*#__PURE__*/_react.default.createElement(_Typography.default, {
|
|
52
|
-
typography: size === 'large' ? 'type-b1-400' : 'type-b2-400'
|
|
53
|
-
|
|
52
|
+
typography: size === 'large' ? 'type-b1-400' : 'type-b2-400',
|
|
53
|
+
color: "primary-content"
|
|
54
|
+
}, label) || /*#__PURE__*/_react.default.isValidElement(label) && label || undefined));
|
|
54
55
|
}
|
|
55
56
|
|
|
56
57
|
// This allows us referencing the Group container and Button component in our Checkbox component
|
|
@@ -11,5 +11,5 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
11
11
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
12
12
|
var _default = {};
|
|
13
13
|
exports.default = _default;
|
|
14
|
-
const StyledRadio = (0, _styledComponents.default)(_antd.Radio)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .ant-radio-checked .ant-radio-inner{\n background: #fff;\n border:1px solid #1677ff;\n }\n .ant-radio-inner::after{\n background: #1677ff;\n }\n"])));
|
|
14
|
+
const StyledRadio = (0, _styledComponents.default)(_antd.Radio)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .ant-radio-checked .ant-radio-inner {\n background: #fff;\n border: 1px solid #1677ff;\n }\n\n .ant-radio-inner::after{\n background: #1677ff;\n }\n\n & disabled {\n color: rgba(0, 0, 0, 0.25);\n }\n\n .ant-radio-checked .ant-radio-inner {\n background: #fff;\n border:1px solid #014FC5;\n }\n\n .ant-radio-inner::after {\n background: #014FC5;\n }\n\n .ant-radio-inner:hover {\n color: #014FC5;\n } \n \n .ant-radio-inner {\n border-color: #717171;\n }\n\n .ant-radio-checked .ant-radio-inner {\n background: #fff;\n border:1px solid #014FC5;\n }\n\n .ant-radio-inner::after{\n background: #014FC5;\n }\n\n .ant-radio-inner:hover{\n color: #014FC5;\n }\n\n .ant-radio-inner{\n border-color: #717171;\n }\n"])));
|
|
15
15
|
exports.StyledRadio = StyledRadio;
|
|
@@ -11,5 +11,5 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
11
11
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
12
12
|
var _default = {};
|
|
13
13
|
exports.default = _default;
|
|
14
|
-
const StyledTable = (0, _styledComponents.default)(_antd.Table)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n border: 1px solid #e8e8e8;\n border-radius: 4px;\n th.ant-table-cell{\n font-size: 10px;\n letter-spacing: 1px;\n text-transform: uppercase;\n color:
|
|
14
|
+
const StyledTable = (0, _styledComponents.default)(_antd.Table)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n border: 1px solid #e8e8e8;\n border-radius: 4px;\n th.ant-table-cell{\n font-size: 10px;\n letter-spacing: 1px;\n text-transform: uppercase;\n color: var(--color-secondarygrey-text) !important;\n line-height: 10px;\n }\n .ant-table-tbody > tr > td{\n font-size: 14px;\n letter-spacing: 0;\n line-height: 22px;\n color: var(--color-primarygrey-text) !important;\n }\n .ant-table-cell-row-hover {\n background: var(--color-lightblue-background) !important;\n }\n .ant-table-thead >tr>th:not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not([colspan])::before{\n display: none;\n }\n .ant-pagination-item{\n border-radius: 0;\n }\n .ant-pagination-item-link{\n border: 1px solid #d9d9d9 !important;\n border-radius: 0 !important;\n }\n .ant-table-thead > tr > th{\n background: #f6f6f6;\n white-space: nowrap;\n }\n"])));
|
|
15
15
|
exports.StyledTable = StyledTable;
|
|
@@ -64,10 +64,11 @@ function CustomToggle(_ref) {
|
|
|
64
64
|
}
|
|
65
65
|
}
|
|
66
66
|
}, /*#__PURE__*/_react.default.createElement(_antd.Switch, _extends({
|
|
67
|
-
"data-test": dataTest
|
|
68
|
-
style
|
|
69
|
-
|
|
70
|
-
}
|
|
67
|
+
"data-test": dataTest
|
|
68
|
+
// style={{
|
|
69
|
+
// transform: `scale(${size === 'large' ? '1.45' : '1.25'})`,
|
|
70
|
+
// }}
|
|
71
|
+
,
|
|
71
72
|
checkedChildren: checkedLabel,
|
|
72
73
|
unCheckedChildren: uncheckedLabel,
|
|
73
74
|
disabled: disabled,
|
|
@@ -10,5 +10,5 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
10
10
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
11
11
|
var _default = {};
|
|
12
12
|
exports.default = _default;
|
|
13
|
-
const StyledTypography = _styledComponents.default.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n // If a color is provided then that is used, otherwise the color is inherited from parent.\n color: ", ";\n\n &.type-d1-500 {\n font-size: 56px;\n font-weight: 500;\n line-height: 68px;\n }\n \n &.type-d2-500 {\n font-size: 40px;\n font-weight: 500;\n line-height: 52px;\n }\n \n &.type-h1-500 {\n font-size: 32px;\n font-weight: 500;\n line-height: 40px;\n }\n \n &.type-h2-500 {\n font-size: 28px;\n font-weight:
|
|
13
|
+
const StyledTypography = _styledComponents.default.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n // If a color is provided then that is used, otherwise the color is inherited from parent.\n color: ", ";\n\n &.type-d1-500 {\n font-size: 56px;\n font-weight: 500;\n line-height: 68px;\n }\n \n &.type-d2-500 {\n font-size: 40px;\n font-weight: 500;\n line-height: 52px;\n }\n \n &.type-h1-500 {\n font-size: 32px;\n font-weight: 500;\n line-height: 40px;\n }\n \n &.type-h2-500 {\n font-size: 28px;\n font-weight: 500;\n line-height: 36px;\n }\n \n &.type-h3-500 {\n font-size: 24px;\n font-weight: 500;\n line-height: 32px;\n }\n \n &.type-t1-500 {\n font-size: 20px;\n font-weight: 500;\n line-height: 28px;\n }\n \n &.type-t2-700 {\n font-size: 16px;\n font-weight: 700;\n line-height: 24px;\n }\n \n &.type-b1-400 {\n font-size: 16px;\n font-weight: 400;\n line-height: 24px;\n }\n \n &.type-b2-400 {\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n }\n \n &.type-b3-400 {\n font-size: 12px;\n font-weight: 400;\n line-height: 16px;\n }\n \n &.type-button-500 {\n font-size: 14px;\n font-weight: 500;\n line-height: 20px;\n }\n \n &.type-sl1-700 {\n font-size: 12px;\n font-weight: 700;\n line-height: 16px;\n letter-spacing: 0.24px;\n text-transform: uppercase;\n }\n"])), props => props.color !== null ? "var(--color-".concat(props.color, ")") : 'inherit');
|
|
14
14
|
exports.StyledTypography = StyledTypography;
|
|
@@ -20,6 +20,6 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
|
|
|
20
20
|
|
|
21
21
|
// TODO: Figure out a way to make this work with storybook.
|
|
22
22
|
// Can be used to wrap the entire application, to make these styles available to every component
|
|
23
|
-
const Typographies = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');\n\n * {\n font-family: 'Roboto', sans-serif;\n }\n\n .type-d1-500 {\n font-size: 56px;\n font-weight: 500;\n line-height: 68px;\n }\n \n .type-d2-500 {\n font-size: 40px;\n font-weight: 500;\n line-height: 52px;\n }\n \n .type-h1-500 {\n font-size: 32px;\n font-weight: 500;\n line-height: 40px;\n }\n \n .type-h2-500 {\n font-size: 28px;\n font-weight:
|
|
23
|
+
const Typographies = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');\n\n * {\n font-family: 'Roboto', sans-serif;\n }\n\n .type-d1-500 {\n font-size: 56px;\n font-weight: 500;\n line-height: 68px;\n }\n \n .type-d2-500 {\n font-size: 40px;\n font-weight: 500;\n line-height: 52px;\n }\n \n .type-h1-500 {\n font-size: 32px;\n font-weight: 500;\n line-height: 40px;\n }\n \n .type-h2-500 {\n font-size: 28px;\n font-weight: 500;\n line-height: 36px;\n }\n \n .type-h3-500 {\n font-size: 24px;\n font-weight: 500;\n line-height: 32px;\n }\n\n .type-t1-500 {\n font-size: 20px;\n font-weight: 500;\n line-height: 28px;\n }\n \n .type-t2-700 {\n font-size: 16px;\n font-weight: 700;\n line-height: 24px;\n }\n \n .type-b1-400 {\n font-size: 16px;\n font-weight: 400;\n line-height: 24px;\n }\n \n .type-b2-400 {\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n }\n \n .type-b3-400 {\n font-size: 12px;\n font-weight: 400;\n line-height: 16px;\n }\n \n .type-button-500 {\n font-size: 14px;\n font-weight: 500;\n line-height: 20px;\n }\n \n .type-sl1-700 {\n font-size: 12px;\n font-weight: 700;\n line-height: 16px;\n letter-spacing: 0.24px;\n text-transform: uppercase;\n } \n"])));
|
|
24
24
|
var _default = Typographies;
|
|
25
25
|
exports.default = _default;
|
|
@@ -12,9 +12,9 @@ require("core-js/modules/es.string.includes.js");
|
|
|
12
12
|
var _react = _interopRequireWildcard(require("react"));
|
|
13
13
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
14
14
|
var _antd = require("antd");
|
|
15
|
+
var _styles = require("./styles");
|
|
15
16
|
var _CustomDrawer = _interopRequireDefault(require("../../components/oa-component-drawer/CustomDrawer"));
|
|
16
17
|
var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
|
|
17
|
-
var _styles = require("./styles");
|
|
18
18
|
const _excluded = ["onClose", "onSave", "addedSpareList", "allSpareList", "open"];
|
|
19
19
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
20
20
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
@@ -8,7 +8,7 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
|
8
8
|
var _templateObject, _templateObject2;
|
|
9
9
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
10
10
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
11
|
-
const StyledContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .container {\n margin-bottom:
|
|
11
|
+
const StyledContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .container {\n margin-bottom: 16px;\n }\n\n .ant-form-item.custom-radio-group {\n margin-bottom: 12px;\n }\n\n .ant-divider-horizontal {\n margin: 0px 0px 16px 0px;\n }\n\n .ant-form-item .ant-form-item-control-input {\n min-height: auto;\n }\n\n .ant-radio-group-outline {\n display: flex;\n justify-content: space-between;\n }\n\n textarea {\n padding: 16px; \n min-height: 88px;\n resize: none;\n border-radius: 4px;\n border: 1px solid #959595;\n }\nh5{\n margin: 0 0 4px;\n color: #212121;\n}\n radiofield label {\n white-space: nowrap;\n }\n\n docdetailstag a {\n white-space: nowrap;\n }\n\n .view-button {\n margin: 8px 0 0 0;\n }\n"])));
|
|
12
12
|
exports.StyledContainer = StyledContainer;
|
|
13
13
|
const RedText = _styledComponents.default.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: inline-block;\n color: red;\n margin-left: 4px;\n"])));
|
|
14
14
|
exports.RedText = RedText;
|
|
@@ -10,5 +10,5 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
10
10
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
11
11
|
var _default = {};
|
|
12
12
|
exports.default = _default;
|
|
13
|
-
const AsideContainer = _styledComponents.default.aside(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n
|
|
13
|
+
const AsideContainer = _styledComponents.default.aside(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n h1 {\n font-size: 20px;\n font-style: normal;\n font-weight: 600;\n line-height: 28px; \n padding: 0 0 10px;\n margin: 0;\n color: #212121;\n }\n\n p {\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 20px;\n padding: 0 0 32px;\n margin: 0;\n color: #212121;\n }\n .ant-form-item .ant-form-item-label >label.ant-form-item-required:not(.ant-form-item-required-mark-optional)::before {\n position: absolute;\n right:0;\n color: var(--color-red-error);\n padding: 0;\n }\n{\n \n}\n .ant-form-item {\n margin-bottom: 36px;\n }\n\n textarea {\n min-height: 108px;\n resize: none;\n border-radius: 4px;\n padding: 12px;\n border: 1px solid var(--color-grey1-placeholder);\n }\n ::-ms-input-placeholder { \n color: var(--color-grey1-placeholder);\n}\n.type-b1-400{\n color: var(--color-primarygrey-text);\n}\n.ant-table-wrapper .ant-table-container table>thead>tr:first-child >*:first-child {\n border-start-start-radius: 0px;\n}\n.ant-table-wrapper .ant-table-container table>thead>tr:first-child >*:last-child {\n border-start-end-radius: 0px;\n}\n::placeholder,.ant-select-selection-placeholder {\n color: var(--color-grey1-placeholder);\n}\n .ant-select:not(.ant-select-customize-input) .ant-select-selector{\n border: 1px solid var(--color-grey1-placeholder);\n }\n label {\n padding: 0 0 4px;\n height: auto !important;\n }\n\n .ant-select-selector {\n min-height: 48px;\n height: 100%;\n }\n\n form .ant-radio-wrapper {\n width: 140px;\n }\n"])));
|
|
14
14
|
exports.AsideContainer = AsideContainer;
|
|
@@ -10,7 +10,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
10
10
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
11
11
|
const KeyValueGroup = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .col-md-4:last-child{\n margin: 0;\n }\n valuestyle{\n display: flex;\n gap: 16px;\n padding: 0 0 8px;\n }\n valuestyle span{\n width: 60%;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 20px;\n color: #717171;\n }\n valuestyle b{\n width: 40%;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 20px;\n color: #212121;\n\n }\n .emailText{\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n"])));
|
|
12
12
|
exports.KeyValueGroup = KeyValueGroup;
|
|
13
|
-
const KeyValueGroups = _styledComponents.default.section(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n.container {\n max-width: 1120px;\n margin: 0 auto;\n padding: 0 16px;\n}\n.container-fluid{\n width: 100%;\n padding: 0 16px;\n}\n.row {\n display: flex;\n flex-direction: column;\n}\n.
|
|
13
|
+
const KeyValueGroups = _styledComponents.default.section(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n.container {\n max-width: 1120px;\n margin: 0 auto;\n padding: 0 16px;\n}\n.container-fluid{\n width: 100%;\n padding: 0 16px;\n}\n.row {\n display: flex;\n flex-direction: column;\n}\n.row::after {\n content: \"\";\n clear: both;\n display: table;\n}\n.col-xs-1 {\n width: 8.33333%;\n}\n\n.col-xs-2 {\n width: 16.66667%;\n}\n\n.col-xs-3 {\n width: 25%;\n}\n\n.col-xs-4 {\n width: 33.33333%;\n}\n\n.col-xs-5 {\n width: 41.66667%;\n}\n\n.col-xs-6 {\n width: 50%;\n}\n\n.col-xs-7 {\n width: 58.33333%;\n}\n\n.col-xs-8 {\n width: 66.66667%;\n}\n\n.col-xs-9 {\n width: 75%;\n}\n\n.col-xs-10 {\n width: 83.33333%;\n}\n\n.col-xs-11 {\n width: 91.66667%;\n}\n\n.col-xs-12 {\n width: 100%;\n}\n@media (min-width: 768px) {\n .row {\n flex-direction: row;\n}\n .col-sm-1 {\n width: 8.33333%;\n }\n\n .col-sm-2 {\n width: 16.66667%;\n }\n\n .col-sm-3 {\n width: 25%;\n }\n\n .col-sm-4 {\n width: 33.33333%;\n }\n\n .col-sm-5 {\n width: 41.66667%;\n }\n\n .col-sm-6 {\n width: 50%;\n }\n .col-sm-7 {\n width: 58.33333%;\n }\n .col-sm-8 {\n width: 66.66667%;\n }\n .col-sm-9 {\n width: 75%;\n }\n .col-sm-10 {\n width: 83.33333%;\n }\n .col-sm-11 {\n width: 91.66667%;\n }\n .col-sm-12 {\n width: 100%;\n }\n}\n\n@media (min-width: 768px) {\n .col-md-1 {\n width: 8.33333%;\n }\n .col-md-2 {\n width: 16.66667%;\n }\n .col-md-3 {\n width: 25%;\n }\n .col-md-4 {\n width: 33.33333%;\n float: left;\n }\n\n .col-md-5 {\n width: 41.66667%;\n }\n\n .col-md-6 {\n width: 50%;\n }\n\n .col-md-7 {\n width: 58.33333%;\n }\n\n .col-md-8 {\n width: 66.66667%;\n }\n\n .col-md-9 {\n width: 75%;\n }\n\n .col-md-10 {\n width: 83.33333%;\n }\n .col-md-11 {\n width: 91.66667%;\n }\n\n .col-md-12 {\n width: 100%;\n }\n\n}\n/* Large Devices (desktops) */\n@media (min-width: 992px) {\n .gutter{\n margin: 0 24px 0 0;\n }\n .col-lg-1 {\n width: 8.33333%;\n }\n .col-lg-2 {\n width: 16.66667%;\n }\n .col-lg-3 {\n width: 25%;\n float: left;\n }\n .col-lg-4 {\n width: 33.33333%;\n float: left;\n }\n .col-lg-5 {\n width: 41.66667%;\n }\n .col-lg-6 {\n width: 50%;\n }\n .col-lg-7 {\n width: 58.33333%;\n }\n .col-lg-8 {\n width: 66.66667%;\n }\n .col-lg-9 {\n width: 75%;\n }\n .col-lg-10 {\n width: 83.33333%;\n }\n\n .col-lg-11 {\n width: 91.66667%;\n }\n\n .col-lg-12 {\n width: 100%;\n }\n}\n\n@media (min-width: 1200px) {\n .gutter{\n margin: 0 32px 0 0;\n }\n .col-xl-1 {\n width: 8.33333%;\n }\n\n \n}\n@media (max-width: 767px) {\n .gutter{\n margin: 0;\n }\n}\n"])));
|
|
14
14
|
exports.KeyValueGroups = KeyValueGroups;
|
|
15
15
|
const StyledBold = _styledComponents.default.b(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n color: var(--color-primary-content);\n font-weight: 400;\n"])));
|
|
16
16
|
exports.StyledBold = StyledBold;
|
|
@@ -10,7 +10,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
10
10
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
11
11
|
var _default = {};
|
|
12
12
|
exports.default = _default;
|
|
13
|
-
const StyledAside = _styledComponents.default.aside(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: relative;\n\n .ant-table-thead > tr > th {\n padding: 4px 16px;\n }\n .ant-table-tbody > tr > td {\n padding: 8px 16px;\n }\n input {\n height: 30px;\n }\n"])));
|
|
13
|
+
const StyledAside = _styledComponents.default.aside(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: relative;\n.ant-table-wrapper .ant-table.ant-table-small .ant-table-tbody>tr>td{\n padding: 16px 8px !important;\n}\n .ant-table-thead > tr > th {\n padding: 4px 16px;\n }\n .ant-table-tbody > tr > td {\n padding: 8px 16px;\n }\n input {\n height: 30px;\n border: 1px solid var(--color-grey1-placeholder);\n }\n ::-ms-input-placeholder { \n color: var(--color-grey1-placeholder);\n}\n\n::placeholder {\n color: var(--color-grey1-placeholder);\n}\n.ant-table-wrapper .ant-table-container table>thead>tr:first-child >*:first-child {\n border-start-start-radius: 0px;\n}\n.ant-table-wrapper .ant-table-container table>thead>tr:first-child >*:last-child {\n border-start-end-radius: 0px;\n}\n.ant-table-wrapper .ant-table-tbody .ant-table-row >.ant-table-cell-row-hover {\n background: var(--color-lightblue-background);\n}\n"])));
|
|
14
14
|
exports.StyledAside = StyledAside;
|
|
15
15
|
const NoNotesMessage = _styledComponents.default.section(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translateX(-50%) translateY(-50%);\n"])));
|
|
16
16
|
exports.NoNotesMessage = NoNotesMessage;
|
|
@@ -8,7 +8,7 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
|
8
8
|
var _templateObject, _templateObject2;
|
|
9
9
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
10
10
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
11
|
-
const RadioContainer = _styledComponents.default.section(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n gap: 20px;\n margin-bottom: 20px;\n"])));
|
|
11
|
+
const RadioContainer = _styledComponents.default.section(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n gap: 20px;\n margin-bottom: 20px;\n .ant-form-item .ant-form-item-label >label.ant-form-item-required:not(.ant-form-item-required-mark-optional)::before{\n position: absolute;\n right: 0;\n }\n"])));
|
|
12
12
|
|
|
13
13
|
// This helps make the radio buttons aligned in uniform columns
|
|
14
14
|
exports.RadioContainer = RadioContainer;
|
|
@@ -14,7 +14,7 @@ const CheckIcon = (0, _styledComponents.default)(_icons.CheckOutlined)(_template
|
|
|
14
14
|
exports.CheckIcon = CheckIcon;
|
|
15
15
|
const CollapsibleStage = (0, _styledComponents.default)(_antd.Collapse)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n \n /* Removes default ant design font */\n font-family: inherit;\n\n border-radius: 28px 28px 0px 0px !important;\n\n \n\n &.notstarted .ant-collapse-header .ant-collapse-arrow {\n color: var(--color-disabled-button);\n }\n \n &.inprogress--active .ant-collapse-header .ant-collapse-arrow {\n color: var(--color-primary);\n }\n\n // This is for the arrow\n &.completed .ant-collapse-header .ant-collapse-arrow, \n &.inprogress .ant-collapse-header .ant-collapse-arrow, \n &.completed--active .ant-collapse-header .ant-collapse-arrow {\n color: var(--color-secondary-content);\n }\n\n & .ant-collapse-header {\n /* !important needed to override pre-existing ant design styles */\n padding: 12px 24px 12px 24px !important;\n border-radius: 28px !important;\n border: 1px solid transparent;\n cursor: pointer;\n } \n\n &.notstarted .ant-collapse-header {\n cursor: not-allowed;\n }\n\n &.inprogress .ant-collapse-header, \n &.completed .ant-collapse-header {\n border: 1px solid var(--color-divider);\n background: var(--color-primary-background);\n }\n\n\n &.inprogress--active .ant-collapse-header, \n &.completed--active .ant-collapse-header {\n background: var(--color-background-info);\n border: 1px solid var(--color-background-info);\n }\n"])));
|
|
16
16
|
exports.CollapsibleStage = CollapsibleStage;
|
|
17
|
-
const DotIcon = _styledComponents.default.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n width: 12px;\n height: 12px;\n \n /* Space between the icon and the stage name. */\n margin: 0
|
|
17
|
+
const DotIcon = _styledComponents.default.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n width: 12px;\n height: 12px;\n \n /* Space between the icon and the stage name. */\n margin: 0 8px 0 0;\n \n border-radius: 50px;\n\n display: flex;\n\n background: ", ";\n"])), props => {
|
|
18
18
|
switch (props.className) {
|
|
19
19
|
case 'inprogress--active':
|
|
20
20
|
return 'var(--color-primary)';
|
|
@@ -29,7 +29,7 @@ const DotIcon = _styledComponents.default.span(_templateObject3 || (_templateObj
|
|
|
29
29
|
exports.DotIcon = DotIcon;
|
|
30
30
|
const StageDetails = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n \n &.notstarted {\n color: var(--color-disabled-button);\n }\n\n &.inprogress--active {\n color: var(--color-primary);\n }\n\n &.completed, &.inprogress, &.completed--active {\n color: var(--color-secondary-content);\n }\n"])));
|
|
31
31
|
exports.StageDetails = StageDetails;
|
|
32
|
-
const StaticStage = _styledComponents.default.a(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n
|
|
32
|
+
const StaticStage = _styledComponents.default.a(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n height: 52px;\n padding: 16px 24px 16px 24px; \n cursor: pointer;\n border: 1px solid transparent;\n color: var(--color-disabled-button); \n text-decoration: none;\n border-radius: 28px;\n\n \n \n &.completed, &.inprogress {\n border-color: var(--color-divider);\n background: var(--color-primary-background);\n }\n \n &.completed--active {\n color: var(--color-secondary-content);\n background: var(--color-background-info);\n border-color: var(--color-background-info);\n }\n\n &.inprogress--active {\n color: var(--color-primary);\n background: var(--color-background-info);\n border-color: var(--color-background-info);\n }\n"])));
|
|
33
33
|
exports.StaticStage = StaticStage;
|
|
34
34
|
const StagesList = _styledComponents.default.ul(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n gap: 12px;\n list-style-type: none;\n \n /* Since width is 100%, it'll take up all of its container */\n /* width: 100%; */\n"])));
|
|
35
35
|
exports.StagesList = StagesList;
|
|
@@ -11,7 +11,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
11
11
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
12
12
|
const StyledSection = _styledComponents.default.section(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n .anticon-delete {\n margin: 0 0 0 4px;\n }\n\n .ant-btn-link{\n display: flex;\n padding: 0!important;\n height: auto !important;\n align-items: center;\n }\n\n .ant-btn >.anticon+span {\n margin-inline-start: 4px;\n }\n"])));
|
|
13
13
|
exports.StyledSection = StyledSection;
|
|
14
|
-
const EllipsisLabel = _styledComponents.default.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: block;\n \n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n
|
|
14
|
+
const EllipsisLabel = _styledComponents.default.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: block;\n \n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 102px;\n"])));
|
|
15
15
|
exports.EllipsisLabel = EllipsisLabel;
|
|
16
|
-
const StyledUpload = (0, _styledComponents.default)(_antd.Upload)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n button{\n border: 1px solid #014FC5;\n color: #014FC5;\n } \n\n display: flex;\n gap: 4px;\n\n .ant-upload-icon {\n display: none;\n }\n\n .ant-upload-list-item-progress {\n display: none;\n }\n\n .ant-upload-list-item-name {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n
|
|
16
|
+
const StyledUpload = (0, _styledComponents.default)(_antd.Upload)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n button{\n border: 1px solid #014FC5;\n color: #014FC5;\n } \n\n display: flex;\n gap: 4px;\n\n .ant-upload-icon {\n display: none;\n }\n\n .ant-upload-list-item-progress {\n display: none;\n }\n\n .ant-upload-list-item-name {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 102px;\n text-align: left;\n }\n"])));
|
|
17
17
|
exports.StyledUpload = StyledUpload;
|
|
@@ -24,7 +24,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
|
|
|
24
24
|
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
25
25
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
26
26
|
function ViewPreviousDescriptionWidget(_ref) {
|
|
27
|
-
var _translatedText
|
|
27
|
+
var _translatedText$, _translatedText$2, _currentDescription$d;
|
|
28
28
|
let {
|
|
29
29
|
currentDescription,
|
|
30
30
|
'data-test': dataTest,
|
|
@@ -109,7 +109,7 @@ function ViewPreviousDescriptionWidget(_ref) {
|
|
|
109
109
|
, {
|
|
110
110
|
"data-test": dataTest ? "".concat(dataTest, "--current-description") : undefined,
|
|
111
111
|
typography: "type-b2-400"
|
|
112
|
-
}, "".concat(isTranslationOn && ((_translatedText$ = translatedText[0]) === null || _translatedText$ === void 0 ? void 0 : _translatedText$.length) > 0 ? translatedText[0] : currentDescription.description)), currentDescription.dateSubmitted && /*#__PURE__*/_react.default.createElement(_Typography.default, {
|
|
112
|
+
}, "".concat(isTranslationOn && ((_translatedText$ = translatedText[0]) === null || _translatedText$ === void 0 ? void 0 : _translatedText$.length) > 0 ? (_translatedText$2 = translatedText[0]) !== null && _translatedText$2 !== void 0 ? _translatedText$2 : 'No description submitted yet.' : (_currentDescription$d = currentDescription.description) !== null && _currentDescription$d !== void 0 ? _currentDescription$d : 'No description submitted yet.')), currentDescription.dateSubmitted && /*#__PURE__*/_react.default.createElement(_Typography.default, {
|
|
113
113
|
color: "secondary-content",
|
|
114
114
|
typography: "type-b2-400"
|
|
115
115
|
}, "Updated on:", ' ', "".concat(currentDescription.dateSubmitted))))), /*#__PURE__*/_react.default.createElement(_styles.Container, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
|
package/build/x.css
ADDED
|
File without changes
|