@decisiv/ui-components 2.0.1-alpha.223 → 2.0.1-alpha.225
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/lib/atoms/InputField/index.d.ts +3 -0
- package/lib/atoms/InputField/index.d.ts.map +1 -1
- package/lib/atoms/InputField/index.js +9 -2
- package/lib/atoms/InputField/styles.d.ts +7 -0
- package/lib/atoms/InputField/styles.d.ts.map +1 -0
- package/lib/atoms/InputField/styles.js +31 -0
- package/lib/components/TagInput/index.d.ts +3 -12
- package/lib/components/TagInput/index.d.ts.map +1 -1
- package/lib/components/TagInput/index.js +56 -13
- package/lib/components/TagInput/index.test.js +66 -0
- package/lib/components/TagInput/schema.d.ts.map +1 -1
- package/lib/components/TagInput/schema.js +8 -2
- package/lib/components/TagInput/types.d.ts +21 -0
- package/lib/components/TagInput/types.d.ts.map +1 -0
- package/lib/components/TagInput/types.js +5 -0
- package/lib/components/Wizard/index.d.ts +1 -0
- package/lib/components/Wizard/index.d.ts.map +1 -1
- package/lib/components/Wizard/index.js +3 -2
- package/lib/components/Wizard/index.test.js +68 -28
- package/lib/components/Wizard/schema.d.ts.map +1 -1
- package/lib/components/Wizard/schema.js +2 -1
- package/package.json +2 -2
|
@@ -47,6 +47,9 @@ export interface BaseInputFieldProps {
|
|
|
47
47
|
withWarningIntent?: boolean;
|
|
48
48
|
isTextArea?: boolean;
|
|
49
49
|
multiple?: boolean;
|
|
50
|
+
showContainerCount?: boolean;
|
|
51
|
+
containerMaxCount?: number;
|
|
52
|
+
containerCount?: number;
|
|
50
53
|
}
|
|
51
54
|
declare const InputFieldWithRef: RefForwardingComponent<Ref<any>, BaseInputFieldProps>;
|
|
52
55
|
export default InputFieldWithRef;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atoms/InputField/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EACZ,aAAa,EAEb,GAAG,EACH,sBAAsB,EAIvB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atoms/InputField/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -33,6 +33,8 @@ var _RequiredIcon = _interopRequireDefault(require("../RequiredIcon"));
|
|
|
33
33
|
|
|
34
34
|
var _HelpMessage = _interopRequireDefault(require("./HelpMessage"));
|
|
35
35
|
|
|
36
|
+
var _styles = require("./styles");
|
|
37
|
+
|
|
36
38
|
var _schema = _interopRequireDefault(require("./schema"));
|
|
37
39
|
|
|
38
40
|
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
|
|
@@ -90,7 +92,10 @@ function InputField(props, targetRef) {
|
|
|
90
92
|
isTextArea = _props$isTextArea === void 0 ? false : _props$isTextArea,
|
|
91
93
|
_props$multiple = props.multiple,
|
|
92
94
|
multiple = _props$multiple === void 0 ? false : _props$multiple,
|
|
93
|
-
|
|
95
|
+
showContainerCount = props.showContainerCount,
|
|
96
|
+
containerCount = props.containerCount,
|
|
97
|
+
containerMaxCount = props.containerMaxCount,
|
|
98
|
+
rest = _objectWithoutProperties(props, ["children", "cursor", "disabled", "hideLabel", "helpMessage", "icon", "secondaryElement", "id", "inputContainerRef", "label", "labelId", "maxLength", "onBlur", "onChange", "onClick", "onFocus", "onKeyDown", "overflow", "readOnly", "required", "requiredMessage", "showCharacterCount", "style", "value", "warningMessage", "withWarningIntent", "isTextArea", "multiple", "showContainerCount", "containerCount", "containerMaxCount"]);
|
|
94
99
|
|
|
95
100
|
var fallbackTargetRef = (0, _react.useRef)(null);
|
|
96
101
|
var finalTargetRef = targetRef || fallbackTargetRef;
|
|
@@ -194,7 +199,9 @@ function InputField(props, targetRef) {
|
|
|
194
199
|
target: _react.default.createElement(_RequiredIcon.default, {
|
|
195
200
|
"aria-label": requiredMessage
|
|
196
201
|
})
|
|
197
|
-
}, requiredMessage)
|
|
202
|
+
}, requiredMessage), showContainerCount && containerMaxCount !== undefined && _react.default.createElement(_styles.ContentCounter, {
|
|
203
|
+
surpassed: (containerCount || 0) > containerMaxCount
|
|
204
|
+
}, "".concat(containerCount || 0, "/").concat(containerMaxCount)))), children(_objectSpread({}, rest, {
|
|
198
205
|
'aria-labelledby': labelId,
|
|
199
206
|
disabled: disabled,
|
|
200
207
|
id: targetId,
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { HTMLAttributes } from 'react';
|
|
2
|
+
interface SpanProps extends HTMLAttributes<HTMLSpanElement> {
|
|
3
|
+
surpassed?: boolean;
|
|
4
|
+
}
|
|
5
|
+
export declare const ContentCounter: import("styled-components").StyledComponent<"span", any, SpanProps, never>;
|
|
6
|
+
export {};
|
|
7
|
+
//# sourceMappingURL=styles.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/atoms/InputField/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AASvC,UAAU,SAAU,SAAQ,cAAc,CAAC,eAAe,CAAC;IACzD,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAGD,eAAO,MAAM,cAAc,4EAS1B,CAAC"}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.ContentCounter = void 0;
|
|
7
|
+
|
|
8
|
+
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
9
|
+
|
|
10
|
+
var _toColorString = _interopRequireDefault(require("polished/lib/color/toColorString"));
|
|
11
|
+
|
|
12
|
+
var _rem = _interopRequireDefault(require("polished/lib/helpers/rem"));
|
|
13
|
+
|
|
14
|
+
var _color = _interopRequireDefault(require("@decisiv/design-tokens/lib/color"));
|
|
15
|
+
|
|
16
|
+
var _spacing = _interopRequireDefault(require("@decisiv/design-tokens/lib/spacing"));
|
|
17
|
+
|
|
18
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
19
|
+
|
|
20
|
+
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
|
|
21
|
+
|
|
22
|
+
// eslint-disable-next-line import/prefer-default-export
|
|
23
|
+
var ContentCounter = _styledComponents.default.span.withConfig({
|
|
24
|
+
displayName: "styles__ContentCounter",
|
|
25
|
+
componentId: "sc-1mkcosa-0"
|
|
26
|
+
})(["position:absolute;right:", ";", ""], (0, _rem.default)(_spacing.default.base), function (_ref) {
|
|
27
|
+
var surpassed = _ref.surpassed;
|
|
28
|
+
return surpassed && (0, _styledComponents.css)(["color:", ";"], (0, _toColorString.default)(_color.default.status.danger.medium));
|
|
29
|
+
});
|
|
30
|
+
|
|
31
|
+
exports.ContentCounter = ContentCounter;
|
|
@@ -1,14 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
export
|
|
5
|
-
hiddenLabel?: boolean;
|
|
6
|
-
defaultTags?: string[];
|
|
7
|
-
tags?: string[];
|
|
8
|
-
options: DropdownListItem[];
|
|
9
|
-
onChange?: (value: string[]) => void;
|
|
10
|
-
onSelect?: (item: string[]) => void;
|
|
11
|
-
zIndex?: number;
|
|
12
|
-
}
|
|
13
|
-
export default function TagInput({ defaultTags, tags, onChange, disabled, readOnly, label, hiddenLabel, options, onSelect, zIndex, ...props }: TagInputProps): JSX.Element;
|
|
2
|
+
import { TagInputProps, TagItem, TagObject } from './types';
|
|
3
|
+
export { TagInputProps, TagItem, TagObject };
|
|
4
|
+
export default function TagInput({ defaultTags, tags, onChange, disabled, readOnly, label, hiddenLabel, options, onSelect, maxTags, showMaxTagsCount, zIndex, ...props }: TagInputProps): JSX.Element;
|
|
14
5
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TagInput/index.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TagInput/index.tsx"],"names":[],"mappings":";AAyBA,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAI5D,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC;AAE7C,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC/B,WAAgB,EAChB,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,WAAW,EACX,OAAO,EACP,QAAQ,EACR,OAAO,EACP,gBAAgB,EAChB,MAAM,EACN,GAAG,KAAK,EACT,EAAE,aAAa,eAkUf"}
|
|
@@ -4,6 +4,24 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = TagInput;
|
|
7
|
+
Object.defineProperty(exports, "TagInputProps", {
|
|
8
|
+
enumerable: true,
|
|
9
|
+
get: function get() {
|
|
10
|
+
return _types.TagInputProps;
|
|
11
|
+
}
|
|
12
|
+
});
|
|
13
|
+
Object.defineProperty(exports, "TagItem", {
|
|
14
|
+
enumerable: true,
|
|
15
|
+
get: function get() {
|
|
16
|
+
return _types.TagItem;
|
|
17
|
+
}
|
|
18
|
+
});
|
|
19
|
+
Object.defineProperty(exports, "TagObject", {
|
|
20
|
+
enumerable: true,
|
|
21
|
+
get: function get() {
|
|
22
|
+
return _types.TagObject;
|
|
23
|
+
}
|
|
24
|
+
});
|
|
7
25
|
|
|
8
26
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
27
|
|
|
@@ -29,6 +47,8 @@ var _Button = _interopRequireDefault(require("../Button"));
|
|
|
29
47
|
|
|
30
48
|
var _DropdownList = _interopRequireDefault(require("../DropdownList"));
|
|
31
49
|
|
|
50
|
+
var _types = require("./types");
|
|
51
|
+
|
|
32
52
|
var _styles = require("./styles");
|
|
33
53
|
|
|
34
54
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
@@ -68,8 +88,10 @@ function TagInput(_ref) {
|
|
|
68
88
|
hiddenLabel = _ref.hiddenLabel,
|
|
69
89
|
options = _ref.options,
|
|
70
90
|
onSelect = _ref.onSelect,
|
|
91
|
+
maxTags = _ref.maxTags,
|
|
92
|
+
showMaxTagsCount = _ref.showMaxTagsCount,
|
|
71
93
|
zIndex = _ref.zIndex,
|
|
72
|
-
props = _objectWithoutProperties(_ref, ["defaultTags", "tags", "onChange", "disabled", "readOnly", "label", "hiddenLabel", "options", "onSelect", "zIndex"]);
|
|
94
|
+
props = _objectWithoutProperties(_ref, ["defaultTags", "tags", "onChange", "disabled", "readOnly", "label", "hiddenLabel", "options", "onSelect", "maxTags", "showMaxTagsCount", "zIndex"]);
|
|
73
95
|
|
|
74
96
|
var clearButtonRef = (0, _react.useRef)(null);
|
|
75
97
|
var listRef = (0, _react.useRef)(null);
|
|
@@ -102,6 +124,11 @@ function TagInput(_ref) {
|
|
|
102
124
|
var tagsToRender = (0, _react.useMemo)(function () {
|
|
103
125
|
return tags || innerTags;
|
|
104
126
|
}, [tags, innerTags]);
|
|
127
|
+
var flatenTagsToRender = (0, _react.useMemo)(function () {
|
|
128
|
+
return tagsToRender.map(function (tag) {
|
|
129
|
+
return typeof tag === 'string' ? tag : tag.text;
|
|
130
|
+
});
|
|
131
|
+
}, [tagsToRender]);
|
|
105
132
|
var isDisabled = disabled || readOnly;
|
|
106
133
|
var handleNotifyChange = (0, _react.useCallback)(function (value) {
|
|
107
134
|
if (!onChange) return;
|
|
@@ -112,7 +139,7 @@ function TagInput(_ref) {
|
|
|
112
139
|
}, [options]);
|
|
113
140
|
var handleAddTag = (0, _react.useCallback)(function (rawString) {
|
|
114
141
|
var text = rawString.replace(/\s+/g, ' ').trim();
|
|
115
|
-
if (!text ||
|
|
142
|
+
if (!text || flatenTagsToRender.includes(text)) return;
|
|
116
143
|
|
|
117
144
|
if (isControlled) {
|
|
118
145
|
handleNotifyChange([].concat(_toConsumableArray(tags), [text]));
|
|
@@ -124,7 +151,7 @@ function TagInput(_ref) {
|
|
|
124
151
|
handleNotifyChange(newState);
|
|
125
152
|
return newState;
|
|
126
153
|
});
|
|
127
|
-
}, [handleNotifyChange, tags,
|
|
154
|
+
}, [handleNotifyChange, tags, flatenTagsToRender, isControlled]);
|
|
128
155
|
var handleRemoveOnBackspace = (0, _react.useCallback)(function () {
|
|
129
156
|
if (isControlled) {
|
|
130
157
|
handleNotifyChange(_toConsumableArray(tags.slice(0, -1)));
|
|
@@ -144,14 +171,14 @@ function TagInput(_ref) {
|
|
|
144
171
|
|
|
145
172
|
if (isControlled) {
|
|
146
173
|
handleNotifyChange(_toConsumableArray(tags).filter(function (tag) {
|
|
147
|
-
return tag !== text;
|
|
174
|
+
return typeof tag === 'string' ? tag !== text : tag.text !== text;
|
|
148
175
|
}));
|
|
149
176
|
return;
|
|
150
177
|
}
|
|
151
178
|
|
|
152
179
|
setInnerTags(function (oldState) {
|
|
153
180
|
var newState = _toConsumableArray(oldState).filter(function (tag) {
|
|
154
|
-
return tag !== text;
|
|
181
|
+
return typeof tag === 'string' ? tag !== text : tag.text !== text;
|
|
155
182
|
});
|
|
156
183
|
|
|
157
184
|
handleNotifyChange(newState);
|
|
@@ -213,7 +240,7 @@ function TagInput(_ref) {
|
|
|
213
240
|
return newState;
|
|
214
241
|
});
|
|
215
242
|
setIsPopoverVisible(false);
|
|
216
|
-
}, [handleNotifyChange, tags, isControlled, options]);
|
|
243
|
+
}, [handleNotifyChange, tags, isControlled, options, onSelect]);
|
|
217
244
|
/**
|
|
218
245
|
* Toggle the dropdown list.
|
|
219
246
|
*/
|
|
@@ -274,20 +301,36 @@ function TagInput(_ref) {
|
|
|
274
301
|
label: label,
|
|
275
302
|
hideLabel: hiddenLabel,
|
|
276
303
|
inputContainerRef: inputContainerRef,
|
|
277
|
-
onClick: handleContainerClick
|
|
304
|
+
onClick: handleContainerClick,
|
|
305
|
+
containerMaxCount: maxTags,
|
|
306
|
+
containerCount: tagsToRender.length,
|
|
307
|
+
showContainerCount: showMaxTagsCount
|
|
278
308
|
}, props), function (innerProps) {
|
|
279
309
|
return _react.default.createElement(_styles.Container, null, tagsToRender.map(function (tag) {
|
|
310
|
+
var _ref2 = typeof tag === 'string' ? {
|
|
311
|
+
text: tag
|
|
312
|
+
} : {
|
|
313
|
+
text: tag.text,
|
|
314
|
+
color: tag.color,
|
|
315
|
+
palette: tag.palette
|
|
316
|
+
},
|
|
317
|
+
text = _ref2.text,
|
|
318
|
+
_ref2$color = _ref2.color,
|
|
319
|
+
color = _ref2$color === void 0 ? 'information' : _ref2$color,
|
|
320
|
+
_ref2$palette = _ref2.palette,
|
|
321
|
+
palette = _ref2$palette === void 0 ? 'pastel' : _ref2$palette;
|
|
322
|
+
|
|
280
323
|
return _react.default.createElement(_Tag.default, {
|
|
281
|
-
key:
|
|
324
|
+
key: text,
|
|
282
325
|
size: "small",
|
|
283
|
-
text:
|
|
284
|
-
palette:
|
|
285
|
-
color: isDisabled ? 'licoriceMousse' :
|
|
286
|
-
action: isDisabled ? undefined : handleRemoveTag(
|
|
326
|
+
text: text,
|
|
327
|
+
palette: palette,
|
|
328
|
+
color: isDisabled ? 'licoriceMousse' : color,
|
|
329
|
+
action: isDisabled ? undefined : handleRemoveTag(text),
|
|
287
330
|
actionIntent: "danger",
|
|
288
331
|
actionAttributes: {
|
|
289
332
|
'aria-label': translate(undefined, 'tagInput.tagAriaLabel', {
|
|
290
|
-
tagName:
|
|
333
|
+
tagName: text
|
|
291
334
|
})
|
|
292
335
|
},
|
|
293
336
|
actionIcon: isDisabled ? undefined : _Times.default
|
|
@@ -1074,4 +1074,70 @@ describe('TagInput', function () {
|
|
|
1074
1074
|
expect(onSelectMock).toHaveBeenCalledWith(['Option1']);
|
|
1075
1075
|
});
|
|
1076
1076
|
});
|
|
1077
|
+
describe('maxTags counter', function () {
|
|
1078
|
+
it('renders maxTags counter when showMaxTagsCount is true', function () {
|
|
1079
|
+
var _render34 = render(_react.default.createElement(_.default, {
|
|
1080
|
+
defaultTags: ['Tag1', 'Tag2'],
|
|
1081
|
+
maxTags: 5,
|
|
1082
|
+
showMaxTagsCount: true,
|
|
1083
|
+
label: "My Tag Input"
|
|
1084
|
+
})),
|
|
1085
|
+
getByText = _render34.getByText;
|
|
1086
|
+
|
|
1087
|
+
expect(getByText('2/5')).toBeInTheDocument();
|
|
1088
|
+
});
|
|
1089
|
+
it('does not render maxTags counter when showMaxTagsCount is false', function () {
|
|
1090
|
+
var _render35 = render(_react.default.createElement(_.default, {
|
|
1091
|
+
defaultTags: ['Tag1', 'Tag2'],
|
|
1092
|
+
maxTags: 5,
|
|
1093
|
+
showMaxTagsCount: false,
|
|
1094
|
+
label: "My Tag Input"
|
|
1095
|
+
})),
|
|
1096
|
+
queryByText = _render35.queryByText;
|
|
1097
|
+
|
|
1098
|
+
expect(queryByText('2/5')).not.toBeInTheDocument();
|
|
1099
|
+
});
|
|
1100
|
+
it('renders red counter when maxTags is reached', function () {
|
|
1101
|
+
var _render36 = render(_react.default.createElement(_.default, {
|
|
1102
|
+
defaultTags: ['Tag1', 'Tag2', 'Tag3', 'Tag4'],
|
|
1103
|
+
maxTags: 3,
|
|
1104
|
+
showMaxTagsCount: true,
|
|
1105
|
+
label: "My Tag Input"
|
|
1106
|
+
})),
|
|
1107
|
+
getByText = _render36.getByText;
|
|
1108
|
+
|
|
1109
|
+
expect(getByText('4/3')).toHaveStyle("\n color: #FF4142;\n ");
|
|
1110
|
+
});
|
|
1111
|
+
});
|
|
1112
|
+
describe('decorated tags', function () {
|
|
1113
|
+
it('renders tags with specified colors', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee33() {
|
|
1114
|
+
var _render37, getByText;
|
|
1115
|
+
|
|
1116
|
+
return regeneratorRuntime.wrap(function _callee33$(_context33) {
|
|
1117
|
+
while (1) {
|
|
1118
|
+
switch (_context33.prev = _context33.next) {
|
|
1119
|
+
case 0:
|
|
1120
|
+
_render37 = render(_react.default.createElement(_.default, {
|
|
1121
|
+
defaultTags: [{
|
|
1122
|
+
text: 'Red Tag',
|
|
1123
|
+
color: 'danger'
|
|
1124
|
+
}, {
|
|
1125
|
+
text: 'Green Tag',
|
|
1126
|
+
color: 'fizzyLime',
|
|
1127
|
+
palette: 'dark'
|
|
1128
|
+
}, 'default tag'],
|
|
1129
|
+
label: "My Tag Input"
|
|
1130
|
+
})), getByText = _render37.getByText;
|
|
1131
|
+
expect(getByText('Red Tag').parentElement.parentElement).toHaveStyle("\n background-color: #ffdfdf;\n ");
|
|
1132
|
+
expect(getByText('Green Tag').parentElement.parentElement).toHaveStyle("\n background-color: #6b7700;\n ");
|
|
1133
|
+
expect(getByText('default tag').parentElement.parentElement).toHaveStyle("\n background-color: #d4eefe;\n ");
|
|
1134
|
+
|
|
1135
|
+
case 4:
|
|
1136
|
+
case "end":
|
|
1137
|
+
return _context33.stop();
|
|
1138
|
+
}
|
|
1139
|
+
}
|
|
1140
|
+
}, _callee33);
|
|
1141
|
+
})));
|
|
1142
|
+
});
|
|
1077
1143
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/TagInput/schema.ts"],"names":[],"mappings":"AAOA,QAAA,MAAM,MAAM,KAAwC,CAAC;
|
|
1
|
+
{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/TagInput/schema.ts"],"names":[],"mappings":"AAOA,QAAA,MAAM,MAAM,KAAwC,CAAC;AAmCrD,eAAe,MAAM,CAAC"}
|
|
@@ -23,8 +23,14 @@ var schema = (0, _reactDesc.describe)({
|
|
|
23
23
|
displayName: 'TagInput'
|
|
24
24
|
});
|
|
25
25
|
schema.propTypes = _objectSpread({}, (0, _omit.default)(_InputField.schema.makePropTypes(), ['icon', 'children', 'value', 'onFocus', 'onBlur', 'showCharacterCount', 'maxLength']), {
|
|
26
|
-
tags: _reactDesc.PropTypes.arrayOf(_reactDesc.PropTypes.string
|
|
27
|
-
|
|
26
|
+
tags: _reactDesc.PropTypes.arrayOf(_reactDesc.PropTypes.oneOf([_reactDesc.PropTypes.string, _reactDesc.PropTypes.shape({
|
|
27
|
+
text: _reactDesc.PropTypes.string,
|
|
28
|
+
color: _reactDesc.PropTypes.string,
|
|
29
|
+
palette: _reactDesc.PropTypes.string
|
|
30
|
+
})])).description('An array of tags that represents the controlled value of the component. Array elements can be either strings or objects with `text`, `color` and `palette` properties.'),
|
|
31
|
+
defaultTags: _reactDesc.PropTypes.arrayOf(_reactDesc.PropTypes.string).description('An array of tags that represents the initial uncontrolled value of the component.'),
|
|
32
|
+
maxTags: _reactDesc.PropTypes.number.description('The maximum number of tags that should be added to the component. Used in conjuction with `showMaxTagsCount`.'),
|
|
33
|
+
showMaxTagsCount: _reactDesc.PropTypes.bool.description('Whether to show a counter with the number of added tags and the maximum allowed when `maxTags` is set.')
|
|
28
34
|
});
|
|
29
35
|
var _default = schema;
|
|
30
36
|
exports.default = _default;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { CommonUIColorKeys } from '../../utils/commonUIColors';
|
|
2
|
+
import { BaseInputFieldProps } from '../../atoms/InputField';
|
|
3
|
+
import { DropdownListItem } from '../DropdownList/types';
|
|
4
|
+
export interface TagObject {
|
|
5
|
+
text: string;
|
|
6
|
+
color?: CommonUIColorKeys;
|
|
7
|
+
palette?: 'pastel' | 'bright' | 'dark';
|
|
8
|
+
}
|
|
9
|
+
export declare type TagItem = TagObject | string;
|
|
10
|
+
export interface TagInputProps extends Omit<BaseInputFieldProps, 'onChange' | 'children' | 'value' | 'hideLabel'> {
|
|
11
|
+
hiddenLabel?: boolean;
|
|
12
|
+
defaultTags?: TagItem[];
|
|
13
|
+
tags?: TagItem[];
|
|
14
|
+
options: DropdownListItem[];
|
|
15
|
+
onChange?: (value: TagItem[]) => void;
|
|
16
|
+
onSelect?: (item: string[]) => void;
|
|
17
|
+
maxTags?: number;
|
|
18
|
+
showMaxTagsCount?: boolean;
|
|
19
|
+
zIndex?: number;
|
|
20
|
+
}
|
|
21
|
+
//# sourceMappingURL=types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/TagInput/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAEzD,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,OAAO,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAC;CACxC;AAED,oBAAY,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;AAEzC,MAAM,WAAW,aACf,SAAQ,IAAI,CACV,mBAAmB,EACnB,UAAU,GAAG,UAAU,GAAG,OAAO,GAAG,WAAW,CAChD;IACD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,EAAE,CAAC;IACxB,IAAI,CAAC,EAAE,OAAO,EAAE,CAAC;IACjB,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,IAAI,CAAC;IACtC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACpC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Wizard/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAW,MAAM,OAAO,CAAC;AAO1D,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAGxC,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAa5C,MAAM,WAAW,IAAI;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,eAAe,CAAC,EAAE,WAAW,CAAC;IAC9B,mBAAmB,CAAC,EAAE,WAAW,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Wizard/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAW,MAAM,OAAO,CAAC;AAO1D,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAGxC,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAa5C,MAAM,WAAW,IAAI;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,eAAe,CAAC,EAAE,WAAW,CAAC;IAC9B,mBAAmB,CAAC,EAAE,WAAW,CAAC;IAClC,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,UAAU,EAAE,IAAI,GAAG,SAAS,GAAG,QAAQ,CAAC;IACrD,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,QAAQ,GAAG,YAAY,CAAC;IAC/B,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,WAAW,CAAC;IAChC,QAAQ,EAAE,WAAW,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC,CAAC;IAC7C,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE;QACxB,IAAI,EAAE,IAAI,CAAC;QACX,SAAS,EAAE,MAAM,CAAC;QAClB,WAAW,EAAE,OAAO,CAAC;QACrB,UAAU,EAAE,OAAO,CAAC;QACpB,cAAc,EAAE,KAAK,CAAC,SAAS,CAAC;KACjC,KAAK,KAAK,CAAC,SAAS,CAAC;CACvB;AAsID,iBAAS,YAAY,CAAC,KAAK,EAAE,iBAAiB,CAAC,WAAW,CAAC,eAQ1D;kBARQ,YAAY;;;;AAiBrB,eAAe,YAAY,CAAC"}
|
|
@@ -85,7 +85,8 @@ var Wizard = function Wizard(_ref) {
|
|
|
85
85
|
var title = currentStep.title,
|
|
86
86
|
content = currentStep.content,
|
|
87
87
|
nextButtonProps = currentStep.nextButtonProps,
|
|
88
|
-
previousButtonProps = currentStep.previousButtonProps
|
|
88
|
+
previousButtonProps = currentStep.previousButtonProps,
|
|
89
|
+
hideBodyTitle = currentStep.hideBodyTitle;
|
|
89
90
|
var showPrevious = currentStepNumber > 1 && !!previousButtonProps;
|
|
90
91
|
var showSubmit = currentStepNumber === steps.length && !!submitButtonProps;
|
|
91
92
|
var showNext = currentStepNumber < steps.length && !showSubmit && !!nextButtonProps;
|
|
@@ -126,7 +127,7 @@ var Wizard = function Wizard(_ref) {
|
|
|
126
127
|
activeStep: currentStepNumber
|
|
127
128
|
})), _react.default.createElement(_styles.StepContainer, {
|
|
128
129
|
tabIndex: 0
|
|
129
|
-
}, _react.default.createElement(_.Flex, {
|
|
130
|
+
}, !hideBodyTitle && _react.default.createElement(_.Flex, {
|
|
130
131
|
marginBottom: 2
|
|
131
132
|
}, _react.default.createElement(_Typography.H3, null, title)), content)), _react.default.createElement(_styles.Footer, {
|
|
132
133
|
size: breakpoint,
|
|
@@ -119,6 +119,46 @@ describe('Wizard', function () {
|
|
|
119
119
|
});
|
|
120
120
|
});
|
|
121
121
|
});
|
|
122
|
+
describe('hideBodyTitle', function () {
|
|
123
|
+
it('hides the content title when hideBodyTitle is true for the step', function () {
|
|
124
|
+
var steps = [{
|
|
125
|
+
title: 'First Step',
|
|
126
|
+
content: _react.default.createElement(StepContent, {
|
|
127
|
+
text: "Step 1 Content"
|
|
128
|
+
}),
|
|
129
|
+
hideBodyTitle: true
|
|
130
|
+
}, {
|
|
131
|
+
title: 'Second Step',
|
|
132
|
+
content: _react.default.createElement(StepContent, {
|
|
133
|
+
text: "Step 2 Content"
|
|
134
|
+
})
|
|
135
|
+
}, {
|
|
136
|
+
title: 'Third Step',
|
|
137
|
+
content: _react.default.createElement(StepContent, {
|
|
138
|
+
text: "Step 3 Content"
|
|
139
|
+
})
|
|
140
|
+
}];
|
|
141
|
+
|
|
142
|
+
var _render3 = render(_react.default.createElement(_.default, {
|
|
143
|
+
title: "Wizard Title",
|
|
144
|
+
visible: true,
|
|
145
|
+
activeStep: 1,
|
|
146
|
+
submitButtonProps: {
|
|
147
|
+
onClick: function onClick() {
|
|
148
|
+
return null;
|
|
149
|
+
}
|
|
150
|
+
},
|
|
151
|
+
steps: steps
|
|
152
|
+
})),
|
|
153
|
+
getByRole = _render3.getByRole;
|
|
154
|
+
|
|
155
|
+
var modal = getByRole('dialog');
|
|
156
|
+
expect(modal).toBeInTheDocument();
|
|
157
|
+
expect((0, _react2.within)(modal).queryByText(/first step/i, {
|
|
158
|
+
selector: 'h3'
|
|
159
|
+
})).not.toBeInTheDocument();
|
|
160
|
+
});
|
|
161
|
+
});
|
|
122
162
|
describe('size', function () {
|
|
123
163
|
describe('normal / default', function () {
|
|
124
164
|
it('renders the modal with a max-width of 650px', function () {
|
|
@@ -139,7 +179,7 @@ describe('Wizard', function () {
|
|
|
139
179
|
})
|
|
140
180
|
}];
|
|
141
181
|
|
|
142
|
-
var
|
|
182
|
+
var _render4 = render(_react.default.createElement(_.default, {
|
|
143
183
|
title: "Wizard Title",
|
|
144
184
|
visible: true,
|
|
145
185
|
activeStep: 1,
|
|
@@ -150,7 +190,7 @@ describe('Wizard', function () {
|
|
|
150
190
|
},
|
|
151
191
|
steps: steps
|
|
152
192
|
})),
|
|
153
|
-
getByRole =
|
|
193
|
+
getByRole = _render4.getByRole;
|
|
154
194
|
|
|
155
195
|
var modal = getByRole('dialog');
|
|
156
196
|
expect(modal).toHaveStyle('max-width: 650px');
|
|
@@ -175,7 +215,7 @@ describe('Wizard', function () {
|
|
|
175
215
|
})
|
|
176
216
|
}];
|
|
177
217
|
|
|
178
|
-
var
|
|
218
|
+
var _render5 = render(_react.default.createElement(_.default, {
|
|
179
219
|
title: "Wizard Title",
|
|
180
220
|
size: "extraLarge",
|
|
181
221
|
visible: true,
|
|
@@ -187,7 +227,7 @@ describe('Wizard', function () {
|
|
|
187
227
|
},
|
|
188
228
|
steps: steps
|
|
189
229
|
})),
|
|
190
|
-
getByRole =
|
|
230
|
+
getByRole = _render5.getByRole;
|
|
191
231
|
|
|
192
232
|
var modal = getByRole('dialog');
|
|
193
233
|
expect(modal).toHaveStyle("max-width: ".concat((0, _polished.rem)(_designTokens.spacing.base * 90)));
|
|
@@ -212,7 +252,7 @@ describe('Wizard', function () {
|
|
|
212
252
|
})
|
|
213
253
|
}];
|
|
214
254
|
|
|
215
|
-
var
|
|
255
|
+
var _render6 = render(_react.default.createElement(_.default, {
|
|
216
256
|
title: "Wizard Title",
|
|
217
257
|
visible: true,
|
|
218
258
|
activeStep: 1,
|
|
@@ -223,7 +263,7 @@ describe('Wizard', function () {
|
|
|
223
263
|
},
|
|
224
264
|
steps: steps
|
|
225
265
|
})),
|
|
226
|
-
getByRole =
|
|
266
|
+
getByRole = _render6.getByRole;
|
|
227
267
|
|
|
228
268
|
var modal = getByRole('dialog');
|
|
229
269
|
expect(modal).toBeInTheDocument();
|
|
@@ -250,7 +290,7 @@ describe('Wizard', function () {
|
|
|
250
290
|
})
|
|
251
291
|
}];
|
|
252
292
|
|
|
253
|
-
var
|
|
293
|
+
var _render7 = render(_react.default.createElement(_.default, {
|
|
254
294
|
title: "Wizard Title",
|
|
255
295
|
visible: true,
|
|
256
296
|
activeStep: 1,
|
|
@@ -261,7 +301,7 @@ describe('Wizard', function () {
|
|
|
261
301
|
},
|
|
262
302
|
steps: steps
|
|
263
303
|
})),
|
|
264
|
-
getByRole =
|
|
304
|
+
getByRole = _render7.getByRole;
|
|
265
305
|
|
|
266
306
|
var modal = getByRole('dialog');
|
|
267
307
|
expect(modal).toBeInTheDocument();
|
|
@@ -291,7 +331,7 @@ describe('Wizard', function () {
|
|
|
291
331
|
})
|
|
292
332
|
}];
|
|
293
333
|
|
|
294
|
-
var
|
|
334
|
+
var _render8 = render(_react.default.createElement(_.default, {
|
|
295
335
|
title: "Wizard Title",
|
|
296
336
|
visible: true,
|
|
297
337
|
activeStep: activeStep,
|
|
@@ -302,7 +342,7 @@ describe('Wizard', function () {
|
|
|
302
342
|
},
|
|
303
343
|
steps: steps
|
|
304
344
|
})),
|
|
305
|
-
getByRole =
|
|
345
|
+
getByRole = _render8.getByRole;
|
|
306
346
|
|
|
307
347
|
var modal = getByRole('dialog');
|
|
308
348
|
expect(modal).toBeInTheDocument();
|
|
@@ -331,7 +371,7 @@ describe('Wizard', function () {
|
|
|
331
371
|
})
|
|
332
372
|
}];
|
|
333
373
|
|
|
334
|
-
var
|
|
374
|
+
var _render9 = render(_react.default.createElement(_.default, {
|
|
335
375
|
title: "Wizard Title",
|
|
336
376
|
visible: true,
|
|
337
377
|
onCancel: onCancelMock,
|
|
@@ -343,7 +383,7 @@ describe('Wizard', function () {
|
|
|
343
383
|
},
|
|
344
384
|
steps: steps
|
|
345
385
|
})),
|
|
346
|
-
getByRole =
|
|
386
|
+
getByRole = _render9.getByRole;
|
|
347
387
|
|
|
348
388
|
var modal = getByRole('dialog');
|
|
349
389
|
expect(modal).toBeInTheDocument();
|
|
@@ -374,7 +414,7 @@ describe('Wizard', function () {
|
|
|
374
414
|
})
|
|
375
415
|
}];
|
|
376
416
|
|
|
377
|
-
var
|
|
417
|
+
var _render10 = render(_react.default.createElement(_.default, {
|
|
378
418
|
title: "Wizard Title",
|
|
379
419
|
visible: true,
|
|
380
420
|
activeStep: 1,
|
|
@@ -385,7 +425,7 @@ describe('Wizard', function () {
|
|
|
385
425
|
},
|
|
386
426
|
steps: steps
|
|
387
427
|
})),
|
|
388
|
-
getByRole =
|
|
428
|
+
getByRole = _render10.getByRole;
|
|
389
429
|
|
|
390
430
|
var modal = getByRole('dialog');
|
|
391
431
|
expect(modal).toBeInTheDocument();
|
|
@@ -416,7 +456,7 @@ describe('Wizard', function () {
|
|
|
416
456
|
}
|
|
417
457
|
}];
|
|
418
458
|
|
|
419
|
-
var
|
|
459
|
+
var _render11 = render(_react.default.createElement(_.default, {
|
|
420
460
|
title: "Wizard Title",
|
|
421
461
|
visible: true,
|
|
422
462
|
activeStep: steps.length,
|
|
@@ -427,7 +467,7 @@ describe('Wizard', function () {
|
|
|
427
467
|
},
|
|
428
468
|
steps: steps
|
|
429
469
|
})),
|
|
430
|
-
getByRole =
|
|
470
|
+
getByRole = _render11.getByRole;
|
|
431
471
|
|
|
432
472
|
var modal = getByRole('dialog');
|
|
433
473
|
expect(modal).toBeInTheDocument();
|
|
@@ -460,7 +500,7 @@ describe('Wizard', function () {
|
|
|
460
500
|
})
|
|
461
501
|
}];
|
|
462
502
|
it('calls the onClick from the continueProps of the active step', function () {
|
|
463
|
-
var
|
|
503
|
+
var _render12 = render(_react.default.createElement(_.default, {
|
|
464
504
|
title: "Wizard Title",
|
|
465
505
|
visible: true,
|
|
466
506
|
activeStep: 1,
|
|
@@ -471,7 +511,7 @@ describe('Wizard', function () {
|
|
|
471
511
|
},
|
|
472
512
|
steps: steps
|
|
473
513
|
})),
|
|
474
|
-
getByRole =
|
|
514
|
+
getByRole = _render12.getByRole;
|
|
475
515
|
|
|
476
516
|
var modal = getByRole('dialog');
|
|
477
517
|
expect(modal).toBeInTheDocument();
|
|
@@ -510,7 +550,7 @@ describe('Wizard', function () {
|
|
|
510
550
|
})
|
|
511
551
|
}];
|
|
512
552
|
|
|
513
|
-
var
|
|
553
|
+
var _render13 = render(_react.default.createElement(_.default, {
|
|
514
554
|
title: "Wizard Title",
|
|
515
555
|
visible: true,
|
|
516
556
|
activeStep: 2,
|
|
@@ -521,7 +561,7 @@ describe('Wizard', function () {
|
|
|
521
561
|
},
|
|
522
562
|
steps: steps
|
|
523
563
|
})),
|
|
524
|
-
getByRole =
|
|
564
|
+
getByRole = _render13.getByRole;
|
|
525
565
|
|
|
526
566
|
var modal = getByRole('dialog');
|
|
527
567
|
expect(modal).toBeInTheDocument();
|
|
@@ -552,7 +592,7 @@ describe('Wizard', function () {
|
|
|
552
592
|
})
|
|
553
593
|
}];
|
|
554
594
|
|
|
555
|
-
var
|
|
595
|
+
var _render14 = render(_react.default.createElement(_.default, {
|
|
556
596
|
title: "Wizard Title",
|
|
557
597
|
visible: true,
|
|
558
598
|
activeStep: 1,
|
|
@@ -563,7 +603,7 @@ describe('Wizard', function () {
|
|
|
563
603
|
},
|
|
564
604
|
steps: steps
|
|
565
605
|
})),
|
|
566
|
-
getByRole =
|
|
606
|
+
getByRole = _render14.getByRole;
|
|
567
607
|
|
|
568
608
|
var modal = getByRole('dialog');
|
|
569
609
|
expect(modal).toBeInTheDocument();
|
|
@@ -597,7 +637,7 @@ describe('Wizard', function () {
|
|
|
597
637
|
}
|
|
598
638
|
}];
|
|
599
639
|
it('calls the onClick from the continueProps of the active step', function () {
|
|
600
|
-
var
|
|
640
|
+
var _render15 = render(_react.default.createElement(_.default, {
|
|
601
641
|
title: "Wizard Title",
|
|
602
642
|
visible: true,
|
|
603
643
|
activeStep: 2,
|
|
@@ -608,7 +648,7 @@ describe('Wizard', function () {
|
|
|
608
648
|
},
|
|
609
649
|
steps: steps
|
|
610
650
|
})),
|
|
611
|
-
getByRole =
|
|
651
|
+
getByRole = _render15.getByRole;
|
|
612
652
|
|
|
613
653
|
var modal = getByRole('dialog');
|
|
614
654
|
expect(modal).toBeInTheDocument();
|
|
@@ -643,7 +683,7 @@ describe('Wizard', function () {
|
|
|
643
683
|
it('doesnt render if im not in the last step', function () {
|
|
644
684
|
var submitCallbackMock = jest.fn();
|
|
645
685
|
|
|
646
|
-
var
|
|
686
|
+
var _render16 = render(_react.default.createElement(_.default, {
|
|
647
687
|
title: "Wizard Title",
|
|
648
688
|
visible: true,
|
|
649
689
|
activeStep: 1,
|
|
@@ -652,7 +692,7 @@ describe('Wizard', function () {
|
|
|
652
692
|
},
|
|
653
693
|
steps: steps
|
|
654
694
|
})),
|
|
655
|
-
getByRole =
|
|
695
|
+
getByRole = _render16.getByRole;
|
|
656
696
|
|
|
657
697
|
var modal = getByRole('dialog');
|
|
658
698
|
expect((0, _react2.within)(modal).queryByText(/submit/i)).not.toBeInTheDocument();
|
|
@@ -660,7 +700,7 @@ describe('Wizard', function () {
|
|
|
660
700
|
it('renders if im in the last step', function () {
|
|
661
701
|
var submitCallbackMock = jest.fn();
|
|
662
702
|
|
|
663
|
-
var
|
|
703
|
+
var _render17 = render(_react.default.createElement(_.default, {
|
|
664
704
|
title: "Wizard Title",
|
|
665
705
|
visible: true,
|
|
666
706
|
activeStep: steps.length,
|
|
@@ -669,7 +709,7 @@ describe('Wizard', function () {
|
|
|
669
709
|
},
|
|
670
710
|
steps: steps
|
|
671
711
|
})),
|
|
672
|
-
getByRole =
|
|
712
|
+
getByRole = _render17.getByRole;
|
|
673
713
|
|
|
674
714
|
var modal = getByRole('dialog');
|
|
675
715
|
expect((0, _react2.within)(modal).getByText(/submit/i)).toBeInTheDocument();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Wizard/schema.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,MAAM,KAAsC,CAAC;
|
|
1
|
+
{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Wizard/schema.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,MAAM,KAAsC,CAAC;AAiDnD,eAAe,MAAM,CAAC"}
|
|
@@ -27,7 +27,8 @@ schema.propTypes = {
|
|
|
27
27
|
}),
|
|
28
28
|
nextButtonProps: _reactDesc.PropTypes.shape({
|
|
29
29
|
onClick: _reactDesc.PropTypes.func
|
|
30
|
-
})
|
|
30
|
+
}),
|
|
31
|
+
hideBodyTitle: _reactDesc.PropTypes.bool
|
|
31
32
|
})).description('Define the steps to render in the wizard. For more info on the usage, see the Step Props table below').isRequired,
|
|
32
33
|
submitButtonProps: _reactDesc.PropTypes.shape({
|
|
33
34
|
onClick: _reactDesc.PropTypes.func.isRequired
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@decisiv/ui-components",
|
|
3
|
-
"version": "2.0.1-alpha.
|
|
3
|
+
"version": "2.0.1-alpha.225",
|
|
4
4
|
"description": "Decisiv's design system React components",
|
|
5
5
|
"author": "Decisiv UI Development Team",
|
|
6
6
|
"license": "MIT",
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
"dependencies": {
|
|
29
29
|
"@decisiv/breakpoint-observer": "1.8.9-alpha.3",
|
|
30
30
|
"@decisiv/design-tokens": "1.8.9-alpha.294",
|
|
31
|
-
"@decisiv/iconix": "2.0.1-alpha.
|
|
31
|
+
"@decisiv/iconix": "2.0.1-alpha.205",
|
|
32
32
|
"@decisiv/prop-types": "1.6.10-alpha.3",
|
|
33
33
|
"@seznam/compose-react-refs": "^1.0.2",
|
|
34
34
|
"csstype": "^2.6.5",
|