carbon-react 106.6.6 → 106.6.9
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/esm/__internal__/utils/argTypes/specialCharacters.d.ts +36 -0
- package/esm/__internal__/utils/argTypes/specialCharacters.js +36 -0
- package/esm/components/accordion/accordion-group/accordion-group.component.d.ts +9 -23
- package/esm/components/accordion/accordion-group/accordion-group.component.js +222 -25
- package/esm/components/accordion/accordion.component.d.ts +44 -2
- package/esm/components/accordion/accordion.component.js +648 -68
- package/esm/components/accordion/accordion.style.d.ts +45 -9
- package/esm/components/accordion/index.d.ts +4 -2
- package/esm/components/decimal/decimal.component.js +12 -10
- package/esm/components/menu/menu-item/menu-item.style.js +6 -3
- package/esm/components/multi-action-button/index.d.ts +2 -1
- package/esm/components/multi-action-button/multi-action-button.component.d.ts +9 -52
- package/esm/components/multi-action-button/multi-action-button.component.js +471 -67
- package/esm/components/multi-action-button/multi-action-button.config.d.ts +3 -3
- package/esm/components/multi-action-button/multi-action-button.style.d.ts +10 -2
- package/esm/components/multi-action-button/multi-action-button.style.js +4 -7
- package/esm/components/portal/portal.js +0 -5
- package/esm/components/portrait/portrait-initials.component.js +1 -2
- package/esm/components/tile-select/__internal__/accordion/accordion.style.d.ts +2 -2
- package/esm/components/tooltip/tooltip.component.d.ts +3 -0
- package/esm/style/utils/filter-out-styled-system-spacing-props.d.ts +1 -1
- package/esm/style/utils/filter-out-styled-system-spacing-props.js +1 -1
- package/lib/__internal__/utils/argTypes/specialCharacters.d.ts +36 -0
- package/lib/__internal__/utils/argTypes/specialCharacters.js +46 -0
- package/lib/components/accordion/accordion-group/accordion-group.component.d.ts +9 -23
- package/lib/components/accordion/accordion-group/accordion-group.component.js +225 -29
- package/lib/components/accordion/accordion.component.d.ts +44 -2
- package/lib/components/accordion/accordion.component.js +649 -70
- package/lib/components/accordion/accordion.style.d.ts +45 -9
- package/lib/components/accordion/index.d.ts +4 -2
- package/lib/components/decimal/decimal.component.js +12 -10
- package/lib/components/menu/menu-item/menu-item.style.js +6 -3
- package/lib/components/multi-action-button/index.d.ts +2 -1
- package/lib/components/multi-action-button/multi-action-button.component.d.ts +9 -52
- package/lib/components/multi-action-button/multi-action-button.component.js +471 -70
- package/lib/components/multi-action-button/multi-action-button.config.d.ts +3 -3
- package/lib/components/multi-action-button/multi-action-button.style.d.ts +10 -2
- package/lib/components/multi-action-button/multi-action-button.style.js +4 -7
- package/lib/components/portal/portal.js +0 -6
- package/lib/components/portrait/portrait-initials.component.js +1 -5
- package/lib/components/tile-select/__internal__/accordion/accordion.style.d.ts +2 -2
- package/lib/components/tooltip/tooltip.component.d.ts +3 -0
- package/lib/style/utils/filter-out-styled-system-spacing-props.d.ts +1 -1
- package/lib/style/utils/filter-out-styled-system-spacing-props.js +1 -1
- package/package.json +2 -1
- package/esm/__internal__/utils/helpers/browser/index.d.ts +0 -15
- package/esm/__internal__/utils/helpers/browser/index.js +0 -33
- package/esm/components/accordion/accordion-group/accordion-group.d.ts +0 -17
- package/esm/components/accordion/accordion.d.ts +0 -54
- package/esm/components/action-popover/action-popover-test.stories.js +0 -76
- package/esm/components/button-bar/button-bar-test.stories.js +0 -122
- package/esm/components/draggable/draggable-test.stories.js +0 -48
- package/esm/components/duelling-picklist/duelling-picklist-test.stories.js +0 -539
- package/esm/components/menu/menu-test.stories.js +0 -109
- package/esm/components/multi-action-button/multi-action-button.d.ts +0 -10
- package/esm/components/profile/profile-test.stories.js +0 -55
- package/esm/components/progress-tracker/progress-tracker-test.stories.js +0 -63
- package/esm/components/select/simple-select/simple-select-test.stories.js +0 -193
- package/esm/components/show-edit-pod/show-edit-pod-test.stories.js +0 -143
- package/esm/components/textarea/textarea-test.stories.js +0 -154
- package/lib/__internal__/utils/helpers/browser/index.d.ts +0 -15
- package/lib/__internal__/utils/helpers/browser/index.js +0 -40
- package/lib/__internal__/utils/helpers/browser/package.json +0 -6
- package/lib/components/accordion/accordion-group/accordion-group.d.ts +0 -17
- package/lib/components/accordion/accordion.d.ts +0 -54
- package/lib/components/action-popover/action-popover-test.stories.js +0 -95
- package/lib/components/button-bar/button-bar-test.stories.js +0 -145
- package/lib/components/draggable/draggable-test.stories.js +0 -66
- package/lib/components/duelling-picklist/duelling-picklist-test.stories.js +0 -573
- package/lib/components/menu/menu-test.stories.js +0 -132
- package/lib/components/multi-action-button/multi-action-button.d.ts +0 -10
- package/lib/components/profile/profile-test.stories.js +0 -75
- package/lib/components/progress-tracker/progress-tracker-test.stories.js +0 -79
- package/lib/components/select/simple-select/simple-select-test.stories.js +0 -206
- package/lib/components/show-edit-pod/show-edit-pod-test.stories.js +0 -165
- package/lib/components/textarea/textarea-test.stories.js +0 -173
|
@@ -1,63 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import ProgressTracker from ".";
|
|
3
|
-
import { PROGRESS_TRACKER_SIZES } from "./progress-tracker.config";
|
|
4
|
-
export default {
|
|
5
|
-
component: ProgressTracker,
|
|
6
|
-
title: "Progress Tracker/Test",
|
|
7
|
-
parameters: {
|
|
8
|
-
info: {
|
|
9
|
-
disable: true
|
|
10
|
-
},
|
|
11
|
-
chromatic: {
|
|
12
|
-
disable: true
|
|
13
|
-
}
|
|
14
|
-
},
|
|
15
|
-
argTypes: {
|
|
16
|
-
size: {
|
|
17
|
-
options: PROGRESS_TRACKER_SIZES,
|
|
18
|
-
control: {
|
|
19
|
-
type: "select"
|
|
20
|
-
}
|
|
21
|
-
},
|
|
22
|
-
progress: {
|
|
23
|
-
control: {
|
|
24
|
-
type: "number"
|
|
25
|
-
}
|
|
26
|
-
},
|
|
27
|
-
currentProgressLabel: {
|
|
28
|
-
options: ["", "$100", "100ml"],
|
|
29
|
-
control: {
|
|
30
|
-
type: "select"
|
|
31
|
-
}
|
|
32
|
-
},
|
|
33
|
-
maxProgressLabel: {
|
|
34
|
-
options: ["", "$200", "200ml"],
|
|
35
|
-
control: {
|
|
36
|
-
type: "select"
|
|
37
|
-
}
|
|
38
|
-
},
|
|
39
|
-
orientation: {
|
|
40
|
-
options: ["horizontal", "vertical"],
|
|
41
|
-
control: {
|
|
42
|
-
type: "select"
|
|
43
|
-
}
|
|
44
|
-
},
|
|
45
|
-
direction: {
|
|
46
|
-
options: ["up", "down"],
|
|
47
|
-
control: {
|
|
48
|
-
type: "select"
|
|
49
|
-
}
|
|
50
|
-
},
|
|
51
|
-
labelsPosition: {
|
|
52
|
-
options: ["top", "bottom", "left", "right"],
|
|
53
|
-
control: {
|
|
54
|
-
type: "select"
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
};
|
|
59
|
-
export const Default = ({ ...args
|
|
60
|
-
}) => {
|
|
61
|
-
return /*#__PURE__*/React.createElement(ProgressTracker, args);
|
|
62
|
-
};
|
|
63
|
-
Default.storyName = "default";
|
|
@@ -1,193 +0,0 @@
|
|
|
1
|
-
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
-
|
|
3
|
-
import React from "react";
|
|
4
|
-
import { Select, Option } from "..";
|
|
5
|
-
export default {
|
|
6
|
-
component: Select,
|
|
7
|
-
title: "Select/Test",
|
|
8
|
-
parameters: {
|
|
9
|
-
info: {
|
|
10
|
-
disable: true
|
|
11
|
-
},
|
|
12
|
-
chromatic: {
|
|
13
|
-
disable: true
|
|
14
|
-
}
|
|
15
|
-
},
|
|
16
|
-
argTypes: {
|
|
17
|
-
value: {
|
|
18
|
-
table: {
|
|
19
|
-
disable: true
|
|
20
|
-
},
|
|
21
|
-
control: false
|
|
22
|
-
},
|
|
23
|
-
disablePortal: {
|
|
24
|
-
table: {
|
|
25
|
-
disable: true
|
|
26
|
-
},
|
|
27
|
-
control: false
|
|
28
|
-
},
|
|
29
|
-
defaultValue: {
|
|
30
|
-
table: {
|
|
31
|
-
disable: true
|
|
32
|
-
},
|
|
33
|
-
control: false
|
|
34
|
-
},
|
|
35
|
-
children: {
|
|
36
|
-
table: {
|
|
37
|
-
disable: true
|
|
38
|
-
},
|
|
39
|
-
control: false
|
|
40
|
-
},
|
|
41
|
-
openOnFocus: {
|
|
42
|
-
table: {
|
|
43
|
-
disable: true
|
|
44
|
-
},
|
|
45
|
-
control: false
|
|
46
|
-
},
|
|
47
|
-
transparent: {
|
|
48
|
-
table: {
|
|
49
|
-
disable: true
|
|
50
|
-
},
|
|
51
|
-
control: false
|
|
52
|
-
},
|
|
53
|
-
tableHeader: {
|
|
54
|
-
table: {
|
|
55
|
-
disable: true
|
|
56
|
-
},
|
|
57
|
-
control: false
|
|
58
|
-
},
|
|
59
|
-
multiColumn: {
|
|
60
|
-
table: {
|
|
61
|
-
disable: true
|
|
62
|
-
},
|
|
63
|
-
control: false
|
|
64
|
-
},
|
|
65
|
-
isLoading: {
|
|
66
|
-
table: {
|
|
67
|
-
disable: true
|
|
68
|
-
},
|
|
69
|
-
control: false
|
|
70
|
-
},
|
|
71
|
-
onListScrollBottom: {
|
|
72
|
-
table: {
|
|
73
|
-
disable: true
|
|
74
|
-
},
|
|
75
|
-
control: false
|
|
76
|
-
},
|
|
77
|
-
tooltipPosition: {
|
|
78
|
-
table: {
|
|
79
|
-
disable: true
|
|
80
|
-
},
|
|
81
|
-
control: false
|
|
82
|
-
},
|
|
83
|
-
"data-component": {
|
|
84
|
-
table: {
|
|
85
|
-
disable: true
|
|
86
|
-
},
|
|
87
|
-
control: false
|
|
88
|
-
},
|
|
89
|
-
"data-element": {
|
|
90
|
-
table: {
|
|
91
|
-
disable: true
|
|
92
|
-
},
|
|
93
|
-
control: false
|
|
94
|
-
},
|
|
95
|
-
"data-role": {
|
|
96
|
-
table: {
|
|
97
|
-
disable: true
|
|
98
|
-
},
|
|
99
|
-
control: false
|
|
100
|
-
},
|
|
101
|
-
listPlacement: {
|
|
102
|
-
options: ["auto", "auto-start", "auto-end", "top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end", "right", "right-start", "right-end", "left", "left-start", "left-end"],
|
|
103
|
-
control: {
|
|
104
|
-
type: "select"
|
|
105
|
-
}
|
|
106
|
-
},
|
|
107
|
-
onOpen: {
|
|
108
|
-
action: "onOpen",
|
|
109
|
-
table: {
|
|
110
|
-
disable: true
|
|
111
|
-
},
|
|
112
|
-
control: false
|
|
113
|
-
},
|
|
114
|
-
onChange: {
|
|
115
|
-
action: "onChange",
|
|
116
|
-
table: {
|
|
117
|
-
disable: true
|
|
118
|
-
},
|
|
119
|
-
control: false
|
|
120
|
-
},
|
|
121
|
-
onClick: {
|
|
122
|
-
action: "onClick",
|
|
123
|
-
table: {
|
|
124
|
-
disable: true
|
|
125
|
-
},
|
|
126
|
-
control: false
|
|
127
|
-
},
|
|
128
|
-
onFocus: {
|
|
129
|
-
action: "onFocus",
|
|
130
|
-
table: {
|
|
131
|
-
disable: true
|
|
132
|
-
},
|
|
133
|
-
control: false
|
|
134
|
-
},
|
|
135
|
-
onBlur: {
|
|
136
|
-
action: "onBlur",
|
|
137
|
-
table: {
|
|
138
|
-
disable: true
|
|
139
|
-
},
|
|
140
|
-
control: false
|
|
141
|
-
},
|
|
142
|
-
onKeyDown: {
|
|
143
|
-
action: "onKeyDown",
|
|
144
|
-
table: {
|
|
145
|
-
disable: true
|
|
146
|
-
},
|
|
147
|
-
control: false
|
|
148
|
-
}
|
|
149
|
-
}
|
|
150
|
-
};
|
|
151
|
-
|
|
152
|
-
const Template = args => {
|
|
153
|
-
return /*#__PURE__*/React.createElement(Select, _extends({
|
|
154
|
-
name: "simple",
|
|
155
|
-
id: "simple",
|
|
156
|
-
label: "label",
|
|
157
|
-
labelInline: true
|
|
158
|
-
}, args), /*#__PURE__*/React.createElement(Option, {
|
|
159
|
-
text: "Amber",
|
|
160
|
-
value: "1"
|
|
161
|
-
}), /*#__PURE__*/React.createElement(Option, {
|
|
162
|
-
text: "Black",
|
|
163
|
-
value: "2"
|
|
164
|
-
}), /*#__PURE__*/React.createElement(Option, {
|
|
165
|
-
text: "Blue",
|
|
166
|
-
value: "3"
|
|
167
|
-
}), /*#__PURE__*/React.createElement(Option, {
|
|
168
|
-
text: "White",
|
|
169
|
-
value: "4"
|
|
170
|
-
}), /*#__PURE__*/React.createElement(Option, {
|
|
171
|
-
text: "Green",
|
|
172
|
-
value: "5"
|
|
173
|
-
}), /*#__PURE__*/React.createElement(Option, {
|
|
174
|
-
text: "Like a lot of intelligent animals, most crows are quite social. For instance, American crows spend most of the year living in pairs or small family groups. During the winter months, they will congregate with hundreds or even thousands of their peers to sleep together at night",
|
|
175
|
-
value: "6"
|
|
176
|
-
}), /*#__PURE__*/React.createElement(Option, {
|
|
177
|
-
text: "Pink",
|
|
178
|
-
value: "7"
|
|
179
|
-
}), /*#__PURE__*/React.createElement(Option, {
|
|
180
|
-
text: "Red",
|
|
181
|
-
value: "8"
|
|
182
|
-
}), /*#__PURE__*/React.createElement(Option, {
|
|
183
|
-
text: "Yellow",
|
|
184
|
-
value: "9"
|
|
185
|
-
}));
|
|
186
|
-
};
|
|
187
|
-
|
|
188
|
-
export const Default = Template.bind({});
|
|
189
|
-
Default.args = {
|
|
190
|
-
mt: 0,
|
|
191
|
-
listPlacement: undefined,
|
|
192
|
-
flipEnabled: true
|
|
193
|
-
};
|
|
@@ -1,143 +0,0 @@
|
|
|
1
|
-
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
-
|
|
3
|
-
/* eslint-disable react/prop-types */
|
|
4
|
-
import React, { useState } from "react";
|
|
5
|
-
import { action } from "@storybook/addon-actions";
|
|
6
|
-
import ShowEditPod from "./show-edit-pod.component";
|
|
7
|
-
import Content from "../content";
|
|
8
|
-
import specialCharacters from "../../../.storybook/utils/argTypes/specialCharacters";
|
|
9
|
-
import Textbox from "../textbox";
|
|
10
|
-
import Fieldset from "../fieldset";
|
|
11
|
-
import { SHOW_EDIT_POD_ALIGNMENTS, SHOW_EDIT_POD_THEMES } from "./show-edit-pod.config";
|
|
12
|
-
export default {
|
|
13
|
-
component: ShowEditPod,
|
|
14
|
-
title: "ShowEditPod/Test",
|
|
15
|
-
parameters: {
|
|
16
|
-
info: {
|
|
17
|
-
disable: true
|
|
18
|
-
},
|
|
19
|
-
chromatic: {
|
|
20
|
-
disable: true
|
|
21
|
-
}
|
|
22
|
-
},
|
|
23
|
-
argTypes: {
|
|
24
|
-
buttonAlign: {
|
|
25
|
-
options: SHOW_EDIT_POD_ALIGNMENTS,
|
|
26
|
-
control: {
|
|
27
|
-
type: "select"
|
|
28
|
-
}
|
|
29
|
-
},
|
|
30
|
-
variant: {
|
|
31
|
-
options: SHOW_EDIT_POD_THEMES,
|
|
32
|
-
control: {
|
|
33
|
-
type: "select"
|
|
34
|
-
}
|
|
35
|
-
},
|
|
36
|
-
cancelTextSpecialCharacters: specialCharacters,
|
|
37
|
-
deleteTextSpecialCharacters: specialCharacters,
|
|
38
|
-
saveTextSpecialCharacters: specialCharacters,
|
|
39
|
-
titleSpecialCharacters: specialCharacters
|
|
40
|
-
},
|
|
41
|
-
args: {
|
|
42
|
-
border: false,
|
|
43
|
-
buttonAlign: "right",
|
|
44
|
-
cancel: true,
|
|
45
|
-
cancelText: "Cancel",
|
|
46
|
-
cancelTextSpecialCharacters: undefined,
|
|
47
|
-
deleteText: "Delete",
|
|
48
|
-
deleteTextSpecialCharacters: undefined,
|
|
49
|
-
saveText: "Save",
|
|
50
|
-
saveTextSpecialCharacters: undefined,
|
|
51
|
-
saving: false,
|
|
52
|
-
title: "Person",
|
|
53
|
-
titleSpecialCharacters: undefined,
|
|
54
|
-
transitionName: "carbon-show-edit-pod__transition",
|
|
55
|
-
variant: "transparent"
|
|
56
|
-
}
|
|
57
|
-
};
|
|
58
|
-
|
|
59
|
-
const ShowEditPodStory = ({
|
|
60
|
-
cancelTextSpecialCharacters,
|
|
61
|
-
cancelText,
|
|
62
|
-
deleteTextSpecialCharacters,
|
|
63
|
-
deleteText,
|
|
64
|
-
saveTextSpecialCharacters,
|
|
65
|
-
saveText,
|
|
66
|
-
titleSpecialCharacters,
|
|
67
|
-
title,
|
|
68
|
-
...args
|
|
69
|
-
}) => {
|
|
70
|
-
const [isEditing, setIsEditing] = useState(false);
|
|
71
|
-
const [state, setState] = useState({
|
|
72
|
-
edit_first_name: "Alan",
|
|
73
|
-
edit_second_name: "Smith",
|
|
74
|
-
edit_telephone: "000 000 0000"
|
|
75
|
-
});
|
|
76
|
-
const fieldProps = [{
|
|
77
|
-
key: "edit_first_name",
|
|
78
|
-
label: "First Name"
|
|
79
|
-
}, {
|
|
80
|
-
key: "edit_second_name",
|
|
81
|
-
label: "Second Name"
|
|
82
|
-
}, {
|
|
83
|
-
key: "edit_telephone",
|
|
84
|
-
label: "Telephone"
|
|
85
|
-
}];
|
|
86
|
-
|
|
87
|
-
const onEdit = () => {
|
|
88
|
-
setIsEditing(true);
|
|
89
|
-
action("edit")();
|
|
90
|
-
};
|
|
91
|
-
|
|
92
|
-
const onCancel = () => {
|
|
93
|
-
setIsEditing(false);
|
|
94
|
-
action("cancel")();
|
|
95
|
-
};
|
|
96
|
-
|
|
97
|
-
const onDelete = () => {
|
|
98
|
-
setIsEditing(false);
|
|
99
|
-
action("delete")();
|
|
100
|
-
};
|
|
101
|
-
|
|
102
|
-
const onSave = () => {
|
|
103
|
-
setIsEditing(false);
|
|
104
|
-
action("onSave")();
|
|
105
|
-
};
|
|
106
|
-
|
|
107
|
-
const setField = fieldName => e => {
|
|
108
|
-
setState({ ...state,
|
|
109
|
-
[fieldName]: e.target.value
|
|
110
|
-
});
|
|
111
|
-
};
|
|
112
|
-
|
|
113
|
-
return /*#__PURE__*/React.createElement(ShowEditPod, _extends({}, args, {
|
|
114
|
-
editing: isEditing,
|
|
115
|
-
onDelete: onDelete,
|
|
116
|
-
onCancel: onCancel,
|
|
117
|
-
onEdit: onEdit,
|
|
118
|
-
editFields: /*#__PURE__*/React.createElement(Fieldset, null, fieldProps.map(({
|
|
119
|
-
key,
|
|
120
|
-
label
|
|
121
|
-
}) => /*#__PURE__*/React.createElement(Textbox, {
|
|
122
|
-
label: label,
|
|
123
|
-
key: key,
|
|
124
|
-
onChange: setField(key),
|
|
125
|
-
value: state[key],
|
|
126
|
-
labelInline: true,
|
|
127
|
-
labelAlign: "right"
|
|
128
|
-
}))),
|
|
129
|
-
onSave: onSave,
|
|
130
|
-
cancelText: cancelTextSpecialCharacters || cancelText,
|
|
131
|
-
deleteText: deleteTextSpecialCharacters || deleteText,
|
|
132
|
-
saveText: saveTextSpecialCharacters || saveText,
|
|
133
|
-
title: titleSpecialCharacters || title
|
|
134
|
-
}), fieldProps.map(({
|
|
135
|
-
key,
|
|
136
|
-
label
|
|
137
|
-
}) => /*#__PURE__*/React.createElement(Content, {
|
|
138
|
-
key: key,
|
|
139
|
-
title: label
|
|
140
|
-
}, state[key])));
|
|
141
|
-
};
|
|
142
|
-
|
|
143
|
-
export const Default = ShowEditPodStory.bind({});
|
|
@@ -1,154 +0,0 @@
|
|
|
1
|
-
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
-
|
|
3
|
-
/* eslint-disable react/prop-types */
|
|
4
|
-
import React, { useState } from "react";
|
|
5
|
-
import specialCharacters, { number } from "../../../.storybook/utils/argTypes/specialCharacters";
|
|
6
|
-
import Textarea from ".";
|
|
7
|
-
export default {
|
|
8
|
-
component: Textarea,
|
|
9
|
-
title: "Textarea/Test",
|
|
10
|
-
parameters: {
|
|
11
|
-
info: {
|
|
12
|
-
disable: true
|
|
13
|
-
},
|
|
14
|
-
chromatic: {
|
|
15
|
-
disable: true
|
|
16
|
-
}
|
|
17
|
-
},
|
|
18
|
-
argTypes: {
|
|
19
|
-
labelAlign: {
|
|
20
|
-
options: ["left", "right"],
|
|
21
|
-
control: {
|
|
22
|
-
type: "select"
|
|
23
|
-
}
|
|
24
|
-
},
|
|
25
|
-
cols: {
|
|
26
|
-
control: {
|
|
27
|
-
min: 0,
|
|
28
|
-
max: 100,
|
|
29
|
-
step: 1,
|
|
30
|
-
type: "range"
|
|
31
|
-
}
|
|
32
|
-
},
|
|
33
|
-
rows: {
|
|
34
|
-
control: {
|
|
35
|
-
min: 0,
|
|
36
|
-
max: 100,
|
|
37
|
-
step: 1,
|
|
38
|
-
type: "range"
|
|
39
|
-
}
|
|
40
|
-
},
|
|
41
|
-
inputWidth: {
|
|
42
|
-
control: {
|
|
43
|
-
min: 0,
|
|
44
|
-
max: 100,
|
|
45
|
-
step: 1,
|
|
46
|
-
type: "range"
|
|
47
|
-
}
|
|
48
|
-
},
|
|
49
|
-
labelWidth: {
|
|
50
|
-
control: {
|
|
51
|
-
min: 0,
|
|
52
|
-
max: 100,
|
|
53
|
-
step: 1,
|
|
54
|
-
type: "range"
|
|
55
|
-
}
|
|
56
|
-
},
|
|
57
|
-
adaptiveLabelBreakpoint: {
|
|
58
|
-
control: {
|
|
59
|
-
type: "number"
|
|
60
|
-
}
|
|
61
|
-
},
|
|
62
|
-
placeholderSpecialCharacters: specialCharacters,
|
|
63
|
-
labelSpecialCharacters: specialCharacters,
|
|
64
|
-
labelHelpSpecialCharacters: specialCharacters,
|
|
65
|
-
characterLimitSpecialCharacters: {
|
|
66
|
-
options: [...specialCharacters.options, ...number.options],
|
|
67
|
-
mapping: { ...specialCharacters.mapping,
|
|
68
|
-
...number.mapping
|
|
69
|
-
}
|
|
70
|
-
},
|
|
71
|
-
fieldHelpSpecialCharacters: specialCharacters,
|
|
72
|
-
children: {
|
|
73
|
-
control: {
|
|
74
|
-
type: "text"
|
|
75
|
-
}
|
|
76
|
-
},
|
|
77
|
-
error: {
|
|
78
|
-
control: {
|
|
79
|
-
type: "text"
|
|
80
|
-
}
|
|
81
|
-
},
|
|
82
|
-
warning: {
|
|
83
|
-
control: {
|
|
84
|
-
type: "text"
|
|
85
|
-
}
|
|
86
|
-
},
|
|
87
|
-
info: {
|
|
88
|
-
control: {
|
|
89
|
-
type: "text"
|
|
90
|
-
}
|
|
91
|
-
}
|
|
92
|
-
},
|
|
93
|
-
args: {
|
|
94
|
-
expandable: false,
|
|
95
|
-
cols: 0,
|
|
96
|
-
rows: 0,
|
|
97
|
-
disabled: false,
|
|
98
|
-
autoFocus: false,
|
|
99
|
-
readOnly: false,
|
|
100
|
-
placeholder: "",
|
|
101
|
-
fieldHelp: "",
|
|
102
|
-
characterLimit: "",
|
|
103
|
-
inputWidth: 100,
|
|
104
|
-
warnOverLimit: false,
|
|
105
|
-
enforceCharacterLimit: true,
|
|
106
|
-
label: "Textarea",
|
|
107
|
-
labelHelp: "",
|
|
108
|
-
labelInline: false,
|
|
109
|
-
labelWidth: 30,
|
|
110
|
-
labelAlign: undefined,
|
|
111
|
-
adaptiveLabelBreakpoint: undefined,
|
|
112
|
-
required: false,
|
|
113
|
-
placeholderSpecialCharacters: undefined,
|
|
114
|
-
labelSpecialCharacters: undefined,
|
|
115
|
-
labelHelpSpecialCharacters: undefined,
|
|
116
|
-
characterLimitSpecialCharacters: undefined,
|
|
117
|
-
fieldHelpSpecialCharacters: undefined
|
|
118
|
-
}
|
|
119
|
-
};
|
|
120
|
-
export const Default = ({
|
|
121
|
-
placeholder,
|
|
122
|
-
placeholderSpecialCharacters,
|
|
123
|
-
label,
|
|
124
|
-
labelSpecialCharacters,
|
|
125
|
-
labelHelp,
|
|
126
|
-
labelHelpSpecialCharacters,
|
|
127
|
-
characterLimit,
|
|
128
|
-
characterLimitSpecialCharacters,
|
|
129
|
-
fieldHelp,
|
|
130
|
-
fieldHelpSpecialCharacters,
|
|
131
|
-
...args
|
|
132
|
-
}) => {
|
|
133
|
-
const [state, setState] = useState("");
|
|
134
|
-
|
|
135
|
-
const handleChange = ({
|
|
136
|
-
target: {
|
|
137
|
-
value
|
|
138
|
-
}
|
|
139
|
-
}) => {
|
|
140
|
-
setState(value);
|
|
141
|
-
};
|
|
142
|
-
|
|
143
|
-
return /*#__PURE__*/React.createElement(Textarea, _extends({}, args, {
|
|
144
|
-
name: "textarea",
|
|
145
|
-
onChange: handleChange,
|
|
146
|
-
value: state,
|
|
147
|
-
placeholder: placeholder || placeholderSpecialCharacters,
|
|
148
|
-
label: label || labelSpecialCharacters,
|
|
149
|
-
labelHelp: labelHelp || labelHelpSpecialCharacters,
|
|
150
|
-
helpAriaLabel: labelHelp || labelHelpSpecialCharacters,
|
|
151
|
-
characterLimit: characterLimit || characterLimitSpecialCharacters,
|
|
152
|
-
fieldHelp: fieldHelp || fieldHelpSpecialCharacters
|
|
153
|
-
}));
|
|
154
|
-
};
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Browser provides helper methods for working with Browser behavior.
|
|
3
|
-
*/
|
|
4
|
-
declare const Browser: {
|
|
5
|
-
isDomAvailable: () => boolean;
|
|
6
|
-
/**
|
|
7
|
-
* Get the current window
|
|
8
|
-
*/
|
|
9
|
-
getWindow: () => Window | undefined;
|
|
10
|
-
/**
|
|
11
|
-
* Get the current document
|
|
12
|
-
*/
|
|
13
|
-
getDocument: () => Document | undefined;
|
|
14
|
-
};
|
|
15
|
-
export default Browser;
|
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = void 0;
|
|
7
|
-
const globalNode = {
|
|
8
|
-
window,
|
|
9
|
-
document: window.document,
|
|
10
|
-
...global
|
|
11
|
-
};
|
|
12
|
-
/**
|
|
13
|
-
* Browser provides helper methods for working with Browser behavior.
|
|
14
|
-
*/
|
|
15
|
-
|
|
16
|
-
const Browser = {
|
|
17
|
-
isDomAvailable: () => {
|
|
18
|
-
const _window = Browser.getWindow();
|
|
19
|
-
|
|
20
|
-
const _document = Browser.getDocument();
|
|
21
|
-
|
|
22
|
-
return !!(typeof _window !== "undefined" && _document && _document.createElement);
|
|
23
|
-
},
|
|
24
|
-
|
|
25
|
-
/**
|
|
26
|
-
* Get the current window
|
|
27
|
-
*/
|
|
28
|
-
getWindow: () => {
|
|
29
|
-
return globalNode.window;
|
|
30
|
-
},
|
|
31
|
-
|
|
32
|
-
/**
|
|
33
|
-
* Get the current document
|
|
34
|
-
*/
|
|
35
|
-
getDocument: () => {
|
|
36
|
-
return globalNode.document;
|
|
37
|
-
}
|
|
38
|
-
};
|
|
39
|
-
var _default = Browser;
|
|
40
|
-
exports.default = _default;
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { MarginProps } from "styled-system";
|
|
3
|
-
import { AccordionProps } from "../accordion";
|
|
4
|
-
|
|
5
|
-
type AccordionElement =
|
|
6
|
-
| React.ReactElement<AccordionProps>
|
|
7
|
-
| boolean
|
|
8
|
-
| null
|
|
9
|
-
| undefined;
|
|
10
|
-
|
|
11
|
-
export interface AccordionGroupProps extends MarginProps {
|
|
12
|
-
children?: AccordionElement | AccordionElement[];
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
declare function AccordionGroup(props: AccordionGroupProps): JSX.Element;
|
|
16
|
-
|
|
17
|
-
export default AccordionGroup;
|
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { SpaceProps } from "styled-system";
|
|
3
|
-
|
|
4
|
-
export interface AccordionProps extends SpaceProps {
|
|
5
|
-
/** Toggles left and right borders */
|
|
6
|
-
borders?: "default" | "full" | "none";
|
|
7
|
-
/** Renders the accordion heading in the style of a tertiary button */
|
|
8
|
-
buttonHeading?: boolean;
|
|
9
|
-
/** Width of the buttonHeading when it's set, defaults to 150px */
|
|
10
|
-
buttonWidth?: number;
|
|
11
|
-
children?: React.ReactNode;
|
|
12
|
-
/** Set the default state of expansion of the Accordion if component is meant to be used as uncontrolled */
|
|
13
|
-
defaultExpanded?: boolean;
|
|
14
|
-
/** Disable padding for the content */
|
|
15
|
-
disableContentPadding?: boolean;
|
|
16
|
-
/** Sets the expansion state of the Accordion if component is meant to be used as controlled */
|
|
17
|
-
expanded?: boolean;
|
|
18
|
-
/** An error message to be displayed in the tooltip */
|
|
19
|
-
error?: string;
|
|
20
|
-
/** Styled system spacing props provided to Accordion Title */
|
|
21
|
-
headerSpacing?: SpaceProps;
|
|
22
|
-
id?: string;
|
|
23
|
-
/** Sets icon type - accepted values: 'chevron_down' (default), 'dropdown' */
|
|
24
|
-
iconType?: "chevron_down" | "dropdown";
|
|
25
|
-
/** Sets icon alignment - accepted values: 'left', 'right' (default) */
|
|
26
|
-
iconAlign?: "left" | "right";
|
|
27
|
-
/** Sets accordion title */
|
|
28
|
-
title: React.ReactNode;
|
|
29
|
-
/** An info message to be displayed in the tooltip */
|
|
30
|
-
info?: string;
|
|
31
|
-
/** Callback fired when expansion state changes */
|
|
32
|
-
onChange?: (
|
|
33
|
-
event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,
|
|
34
|
-
isExpanded: boolean
|
|
35
|
-
) => void;
|
|
36
|
-
/** When the Accordion is open the title can change to this */
|
|
37
|
-
openTitle?: string;
|
|
38
|
-
/** Sets background as white or transparent */
|
|
39
|
-
scheme?: "white" | "transparent";
|
|
40
|
-
/** Sets accordion size */
|
|
41
|
-
size?: "large" | "small";
|
|
42
|
-
/** Sets accordion sub title */
|
|
43
|
-
subTitle?: string;
|
|
44
|
-
/** A warning message to be displayed in the tooltip */
|
|
45
|
-
warning?: string;
|
|
46
|
-
/** Sets accordion width */
|
|
47
|
-
width?: string;
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
declare function Accordion(
|
|
51
|
-
props: AccordionProps & React.RefAttributes<HTMLDivElement>
|
|
52
|
-
): JSX.Element;
|
|
53
|
-
|
|
54
|
-
export default Accordion;
|