@carbon/ibm-products 2.28.1 → 2.29.0
Sign up to get free protection for your applications and to get access to all the features.
- package/css/index-full-carbon.css +1804 -233
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +1 -1
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon-released-only.css +40 -8
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css +1 -1
- package/css/index-without-carbon-released-only.min.css.map +1 -1
- package/css/index-without-carbon.css +1804 -233
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +1 -1
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +1785 -243
- package/css/index.css.map +1 -1
- package/css/index.min.css +1 -1
- package/css/index.min.css.map +1 -1
- package/es/components/APIKeyModal/APIKeyModal.d.ts +2 -1
- package/es/components/APIKeyModal/APIKeyModal.js +13 -9
- package/es/components/APIKeyModal/APIKeyModal.types.d.ts +206 -0
- package/es/components/AboutModal/AboutModal.d.ts +73 -2
- package/es/components/AboutModal/AboutModal.js +16 -12
- package/es/components/Datagrid/Datagrid/DatagridHeaderRow.js +2 -0
- package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.d.ts +1 -2
- package/es/components/Datagrid/useInitialColumnSort.d.ts +1 -0
- package/es/components/Datagrid/useInitialColumnSort.js +42 -0
- package/es/components/Datagrid/useSortableColumns.d.ts +4 -0
- package/es/components/Datagrid/useSortableColumns.js +16 -16
- package/es/components/Decorator/Decorator.d.ts +5 -0
- package/es/components/Decorator/Decorator.js +348 -0
- package/es/components/Decorator/DecoratorIcon.d.ts +5 -0
- package/es/components/Decorator/DecoratorIcon.js +95 -0
- package/es/components/Decorator/index.d.ts +1 -0
- package/es/components/Decorator/utils.d.ts +8 -0
- package/es/components/Decorator/utils.js +43 -0
- package/es/components/DescriptionList/DescriptionList.d.ts +42 -0
- package/es/components/DescriptionList/DescriptionList.js +88 -0
- package/es/components/DescriptionList/constants.d.ts +6 -0
- package/es/components/DescriptionList/constants.js +16 -0
- package/es/components/DescriptionList/index.d.ts +1 -0
- package/es/components/EmptyStates/EmptyStateContent.d.ts +1 -287
- package/es/components/HTTPErrors/HTTPErrorContent.d.ts +1 -293
- package/es/components/StatusIndicator/StatusIndicator.d.ts +5 -0
- package/es/components/StatusIndicator/StatusIndicator.js +100 -0
- package/es/components/StatusIndicator/StatusIndicatorStep.d.ts +5 -0
- package/es/components/StatusIndicator/index.d.ts +2 -0
- package/es/components/index.d.ts +3 -0
- package/es/global/js/package-settings.d.ts +4 -0
- package/es/global/js/package-settings.js +4 -0
- package/es/index.js +3 -0
- package/es/settings.d.ts +4 -0
- package/lib/components/APIKeyModal/APIKeyModal.d.ts +2 -1
- package/lib/components/APIKeyModal/APIKeyModal.js +13 -9
- package/lib/components/APIKeyModal/APIKeyModal.types.d.ts +206 -0
- package/lib/components/AboutModal/AboutModal.d.ts +73 -2
- package/lib/components/AboutModal/AboutModal.js +16 -12
- package/lib/components/Datagrid/Datagrid/DatagridHeaderRow.js +2 -0
- package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.d.ts +1 -2
- package/lib/components/Datagrid/useInitialColumnSort.d.ts +1 -0
- package/lib/components/Datagrid/useInitialColumnSort.js +46 -0
- package/lib/components/Datagrid/useSortableColumns.d.ts +4 -0
- package/lib/components/Datagrid/useSortableColumns.js +16 -15
- package/lib/components/Decorator/Decorator.d.ts +5 -0
- package/lib/components/Decorator/Decorator.js +355 -0
- package/lib/components/Decorator/DecoratorIcon.d.ts +5 -0
- package/lib/components/Decorator/DecoratorIcon.js +102 -0
- package/lib/components/Decorator/index.d.ts +1 -0
- package/lib/components/Decorator/utils.d.ts +8 -0
- package/lib/components/Decorator/utils.js +48 -0
- package/lib/components/DescriptionList/DescriptionList.d.ts +42 -0
- package/lib/components/DescriptionList/DescriptionList.js +95 -0
- package/lib/components/DescriptionList/constants.d.ts +6 -0
- package/lib/components/DescriptionList/constants.js +20 -0
- package/lib/components/DescriptionList/index.d.ts +1 -0
- package/lib/components/EmptyStates/EmptyStateContent.d.ts +1 -287
- package/lib/components/HTTPErrors/HTTPErrorContent.d.ts +1 -293
- package/lib/components/StatusIndicator/StatusIndicator.d.ts +5 -0
- package/lib/components/StatusIndicator/StatusIndicator.js +107 -0
- package/lib/components/StatusIndicator/StatusIndicatorStep.d.ts +5 -0
- package/lib/components/StatusIndicator/index.d.ts +2 -0
- package/lib/components/index.d.ts +3 -0
- package/lib/global/js/package-settings.d.ts +4 -0
- package/lib/global/js/package-settings.js +4 -0
- package/lib/index.js +15 -0
- package/lib/settings.d.ts +4 -0
- package/package.json +4 -4
- package/scss/components/Decorator/_carbon-imports.scss +9 -0
- package/scss/components/Decorator/_decorator.scss +400 -0
- package/scss/components/Decorator/_index-with-carbon.scss +9 -0
- package/scss/components/Decorator/_index.scss +8 -0
- package/scss/components/DescriptionList/_carbon-imports.scss +9 -0
- package/scss/components/DescriptionList/_description-list.scss +103 -0
- package/scss/components/DescriptionList/_index-with-carbon.scss +9 -0
- package/scss/components/DescriptionList/_index.scss +8 -0
- package/scss/components/SidePanel/_side-panel.scss +6 -1
- package/scss/components/StatusIndicator/_carbon-imports.scss +12 -0
- package/scss/components/StatusIndicator/_index-with-carbon.scss +9 -0
- package/scss/components/StatusIndicator/_index.scss +8 -0
- package/scss/components/StatusIndicator/_status-indicator.scss +93 -0
- package/scss/components/Tearsheet/_tearsheet.scss +41 -15
- package/scss/components/_index-with-carbon.scss +3 -0
- package/scss/components/_index.scss +3 -0
@@ -0,0 +1,348 @@
|
|
1
|
+
/**
|
2
|
+
* Copyright IBM Corp. 2020, 2024
|
3
|
+
*
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
6
|
+
*/
|
7
|
+
|
8
|
+
import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
9
|
+
import React__default from 'react';
|
10
|
+
import PropTypes from '../../node_modules/prop-types/index.js';
|
11
|
+
import cx from 'classnames';
|
12
|
+
import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
|
13
|
+
import { pkg } from '../../settings.js';
|
14
|
+
import { getMagnitude, truncate } from './utils.js';
|
15
|
+
import { DecoratorIcon } from './DecoratorIcon.js';
|
16
|
+
|
17
|
+
var _excluded = ["className", "disabled", "hideIcon", "href", "kind", "label", "setLabelTitle", "onClick", "onClickLabel", "onClickValue", "onContextMenu", "onContextMenuLabel", "onContextMenuValue", "score", "scoreThresholds", "small", "theme", "truncateValue", "value", "valueTitle"];
|
18
|
+
var blockClass = "".concat(pkg.prefix, "--decorator");
|
19
|
+
var componentName = 'Decorator';
|
20
|
+
var defaults = {
|
21
|
+
kind: 'default',
|
22
|
+
onClick: function onClick() {},
|
23
|
+
onClickLabel: function onClickLabel() {},
|
24
|
+
onClickValue: function onClickValue() {},
|
25
|
+
onContextMenu: function onContextMenu() {},
|
26
|
+
onContextMenuLabel: function onContextMenuLabel() {},
|
27
|
+
onContextMenuValue: function onContextMenuValue() {},
|
28
|
+
scoreThresholds: [0, 4, 7, 10],
|
29
|
+
theme: 'light'
|
30
|
+
};
|
31
|
+
|
32
|
+
/**
|
33
|
+
* The Decorator groups a key/value pair to look and behave like a single UI element.
|
34
|
+
*/
|
35
|
+
var Decorator = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
36
|
+
var className = _ref.className,
|
37
|
+
disabled = _ref.disabled,
|
38
|
+
hideIcon = _ref.hideIcon,
|
39
|
+
href = _ref.href,
|
40
|
+
_ref$kind = _ref.kind,
|
41
|
+
kind = _ref$kind === void 0 ? defaults.kind : _ref$kind,
|
42
|
+
label = _ref.label,
|
43
|
+
setLabelTitle = _ref.setLabelTitle,
|
44
|
+
_ref$onClick = _ref.onClick,
|
45
|
+
onClick = _ref$onClick === void 0 ? defaults.onClick : _ref$onClick,
|
46
|
+
_ref$onClickLabel = _ref.onClickLabel,
|
47
|
+
onClickLabel = _ref$onClickLabel === void 0 ? defaults.onClickLabel : _ref$onClickLabel,
|
48
|
+
_ref$onClickValue = _ref.onClickValue,
|
49
|
+
onClickValue = _ref$onClickValue === void 0 ? defaults.onClickValue : _ref$onClickValue,
|
50
|
+
_ref$onContextMenu = _ref.onContextMenu,
|
51
|
+
onContextMenu = _ref$onContextMenu === void 0 ? defaults.onContextMenu : _ref$onContextMenu,
|
52
|
+
_ref$onContextMenuLab = _ref.onContextMenuLabel,
|
53
|
+
onContextMenuLabel = _ref$onContextMenuLab === void 0 ? defaults.onContextMenuLabel : _ref$onContextMenuLab,
|
54
|
+
_ref$onContextMenuVal = _ref.onContextMenuValue,
|
55
|
+
onContextMenuValue = _ref$onContextMenuVal === void 0 ? defaults.onContextMenuValue : _ref$onContextMenuVal,
|
56
|
+
score = _ref.score,
|
57
|
+
_ref$scoreThresholds = _ref.scoreThresholds,
|
58
|
+
scoreThresholds = _ref$scoreThresholds === void 0 ? defaults.scoreThresholds : _ref$scoreThresholds,
|
59
|
+
small = _ref.small,
|
60
|
+
_ref$theme = _ref.theme,
|
61
|
+
theme = _ref$theme === void 0 ? defaults.theme : _ref$theme,
|
62
|
+
truncateValue = _ref.truncateValue,
|
63
|
+
value = _ref.value,
|
64
|
+
valueTitle = _ref.valueTitle,
|
65
|
+
rest = _objectWithoutProperties(_ref, _excluded);
|
66
|
+
var magnitude = getMagnitude(score, scoreThresholds);
|
67
|
+
var _labelTitle = setLabelTitle && setLabelTitle(score, scoreThresholds, magnitude);
|
68
|
+
var _value = truncate(value, truncateValue);
|
69
|
+
|
70
|
+
// These class names apply to all types of Decorator.
|
71
|
+
var classNames = cx(blockClass, className, "".concat(blockClass, "--").concat(theme), _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "--sm"), small), "".concat(blockClass, "--truncate-end"), truncateValue === 'end'), "".concat(blockClass, "--truncate-start"), truncateValue === 'start'), "".concat(blockClass, "--truncate-midline"), truncateValue === null || truncateValue === void 0 ? void 0 : truncateValue.maxLength));
|
72
|
+
|
73
|
+
// These properties apply to all <DecoratorIcons>.
|
74
|
+
var decoratorIconsProps = {
|
75
|
+
className: "".concat(blockClass, "__icon"),
|
76
|
+
magnitude: magnitude.toLowerCase(),
|
77
|
+
// e.g. "Medium" -> "medium"
|
78
|
+
small: small
|
79
|
+
};
|
80
|
+
|
81
|
+
// Optional callback functions if `kind` is "link" or "single-button".
|
82
|
+
var handleOnClick = function handleOnClick(event) {
|
83
|
+
onClick(event, {
|
84
|
+
score: score,
|
85
|
+
label: label,
|
86
|
+
value: value,
|
87
|
+
magnitude: magnitude
|
88
|
+
});
|
89
|
+
};
|
90
|
+
var handleOnContextMenu = function handleOnContextMenu(event) {
|
91
|
+
onContextMenu(event, {
|
92
|
+
score: score,
|
93
|
+
label: label,
|
94
|
+
value: value,
|
95
|
+
magnitude: magnitude
|
96
|
+
});
|
97
|
+
};
|
98
|
+
|
99
|
+
// RETURN DUAL BUTTONS
|
100
|
+
if (kind === 'dual-button') {
|
101
|
+
// Optional callback functions if `kind` is "dual-button" only.
|
102
|
+
var handleOnClickLabel = function handleOnClickLabel(event) {
|
103
|
+
onClickLabel(event, {
|
104
|
+
score: score,
|
105
|
+
label: label,
|
106
|
+
value: value,
|
107
|
+
magnitude: magnitude
|
108
|
+
});
|
109
|
+
};
|
110
|
+
var handleOnClickValue = function handleOnClickValue(event) {
|
111
|
+
onClickValue(event, {
|
112
|
+
score: score,
|
113
|
+
label: label,
|
114
|
+
value: value,
|
115
|
+
magnitude: magnitude
|
116
|
+
});
|
117
|
+
};
|
118
|
+
var handleOnContextMenuLabel = function handleOnContextMenuLabel(event) {
|
119
|
+
onContextMenuLabel(event, {
|
120
|
+
score: score,
|
121
|
+
label: label,
|
122
|
+
value: value,
|
123
|
+
magnitude: magnitude
|
124
|
+
});
|
125
|
+
};
|
126
|
+
var handleOnContextMenuValue = function handleOnContextMenuValue(event) {
|
127
|
+
onContextMenuValue(event, {
|
128
|
+
score: score,
|
129
|
+
label: label,
|
130
|
+
value: value,
|
131
|
+
magnitude: magnitude
|
132
|
+
});
|
133
|
+
};
|
134
|
+
return /*#__PURE__*/React__default.createElement("span", _extends({}, rest, getDevtoolsProps(componentName), {
|
135
|
+
className: cx(classNames, "".concat(blockClass, "--buttons"), _defineProperty({}, "".concat(blockClass, "-disabled"), disabled)),
|
136
|
+
ref: ref
|
137
|
+
}), /*#__PURE__*/React__default.createElement("button", {
|
138
|
+
className: "".concat(blockClass, "__label"),
|
139
|
+
disabled: disabled,
|
140
|
+
onClick: !disabled && handleOnClickLabel,
|
141
|
+
onContextMenu: !disabled && handleOnContextMenuLabel,
|
142
|
+
title: _labelTitle || label,
|
143
|
+
type: "button"
|
144
|
+
}, !hideIcon && /*#__PURE__*/React__default.createElement(DecoratorIcon, decoratorIconsProps), !!label && label), /*#__PURE__*/React__default.createElement("button", {
|
145
|
+
className: "".concat(blockClass, "__value"),
|
146
|
+
disabled: disabled,
|
147
|
+
onClick: !disabled && handleOnClickValue,
|
148
|
+
onContextMenu: !disabled && handleOnContextMenuValue,
|
149
|
+
title: valueTitle || value,
|
150
|
+
type: "button"
|
151
|
+
}, _value));
|
152
|
+
}
|
153
|
+
|
154
|
+
// RETURN SINGLE BUTTON
|
155
|
+
if (kind === 'single-button') {
|
156
|
+
return /*#__PURE__*/React__default.createElement("button", _extends({}, rest, getDevtoolsProps(componentName), {
|
157
|
+
className: cx(classNames, "".concat(blockClass, "--button"), _defineProperty({}, "".concat(blockClass, "-disabled"), disabled)),
|
158
|
+
disabled: disabled,
|
159
|
+
onClick: !disabled && handleOnClick,
|
160
|
+
onContextMenu: !disabled && handleOnContextMenu,
|
161
|
+
ref: ref,
|
162
|
+
type: "button"
|
163
|
+
}), /*#__PURE__*/React__default.createElement("span", {
|
164
|
+
className: "".concat(blockClass, "__label"),
|
165
|
+
title: _labelTitle || label
|
166
|
+
}, !hideIcon && /*#__PURE__*/React__default.createElement(DecoratorIcon, decoratorIconsProps), !!label && label), /*#__PURE__*/React__default.createElement("span", {
|
167
|
+
className: "".concat(blockClass, "__value"),
|
168
|
+
title: valueTitle || value
|
169
|
+
}, _value));
|
170
|
+
}
|
171
|
+
|
172
|
+
// RETURN LINK
|
173
|
+
if (kind === 'link') {
|
174
|
+
return /*#__PURE__*/React__default.createElement("a", _extends({}, rest, getDevtoolsProps(componentName), {
|
175
|
+
href: href,
|
176
|
+
className: cx(classNames, "".concat(blockClass, "--link")),
|
177
|
+
onClick: handleOnClick,
|
178
|
+
onContextMenu: handleOnContextMenu,
|
179
|
+
ref: ref
|
180
|
+
}), /*#__PURE__*/React__default.createElement("span", {
|
181
|
+
className: "".concat(blockClass, "__label"),
|
182
|
+
title: _labelTitle || label
|
183
|
+
}, !hideIcon && /*#__PURE__*/React__default.createElement(DecoratorIcon, decoratorIconsProps), !!label && label), /*#__PURE__*/React__default.createElement("span", {
|
184
|
+
className: "".concat(blockClass, "__value"),
|
185
|
+
title: valueTitle || value
|
186
|
+
}, _value));
|
187
|
+
}
|
188
|
+
|
189
|
+
// RETURN DEFAULT (NON-INTERACTIVE)
|
190
|
+
if (kind === 'default') {
|
191
|
+
return /*#__PURE__*/React__default.createElement("span", _extends({}, rest, getDevtoolsProps(componentName), {
|
192
|
+
className: cx(classNames, "".concat(blockClass, "--default")),
|
193
|
+
ref: ref
|
194
|
+
}), /*#__PURE__*/React__default.createElement("span", {
|
195
|
+
className: "".concat(blockClass, "__label"),
|
196
|
+
title: _labelTitle || label
|
197
|
+
}, !hideIcon && /*#__PURE__*/React__default.createElement(DecoratorIcon, decoratorIconsProps), !!label && label), /*#__PURE__*/React__default.createElement("span", {
|
198
|
+
className: "".concat(blockClass, "__value"),
|
199
|
+
title: valueTitle || value
|
200
|
+
}, _value));
|
201
|
+
}
|
202
|
+
});
|
203
|
+
|
204
|
+
// Return a placeholder if not released and not enabled by feature flag
|
205
|
+
Decorator = pkg.checkComponentEnabled(Decorator, componentName);
|
206
|
+
|
207
|
+
// The display name of the component, used by React. Note that displayName
|
208
|
+
// is used in preference to relying on function.name.
|
209
|
+
Decorator.displayName = componentName;
|
210
|
+
|
211
|
+
// The types and DocGen commentary for the component props,
|
212
|
+
// in alphabetical order (for consistency).
|
213
|
+
// See https://www.npmjs.com/package/prop-types#usage.
|
214
|
+
Decorator.propTypes = {
|
215
|
+
/**
|
216
|
+
* Provide an optional class to be applied to the containing node.
|
217
|
+
*/
|
218
|
+
className: PropTypes.string,
|
219
|
+
/**
|
220
|
+
* `disabled` only applies if `kind` is "single-button" or "dual-button".
|
221
|
+
*/
|
222
|
+
disabled: PropTypes.bool,
|
223
|
+
/**
|
224
|
+
* Do not show the icon, regardless of score.
|
225
|
+
*/
|
226
|
+
hideIcon: PropTypes.bool,
|
227
|
+
/**
|
228
|
+
* `href` is req'd if `kind` is "link".
|
229
|
+
*
|
230
|
+
* These two properties together will render the `label` and `value` as a single anchor tag.
|
231
|
+
*/
|
232
|
+
href: PropTypes.string,
|
233
|
+
/**
|
234
|
+
* If `kind` is "dual-button" then refer to the `onClickLabel`, `onClickValue`, `onContextMenuLabel`, and `onContextMenuValue` callback functions.
|
235
|
+
*
|
236
|
+
* If `kind` is "single-button" then refer to the `onClick` and `onContextMenu` callback functions.
|
237
|
+
*
|
238
|
+
* If `kind` is "link" then also populate `href`.
|
239
|
+
*
|
240
|
+
* `kind's` default value is "default" and has no other requirements.
|
241
|
+
*/
|
242
|
+
kind: PropTypes.oneOf(['default', 'link', 'single-button', 'dual-button']),
|
243
|
+
/**
|
244
|
+
* The label for the data.
|
245
|
+
*/
|
246
|
+
label: PropTypes.string,
|
247
|
+
/**
|
248
|
+
* Optional callback function if `kind` is "link" or "single-button".
|
249
|
+
*
|
250
|
+
* Returns two objects: `event` and `{ score, label, value, magnitude }`
|
251
|
+
*/
|
252
|
+
onClick: PropTypes.func,
|
253
|
+
/**
|
254
|
+
* Optional callback functions if `kind` is "dual-button" only.
|
255
|
+
*
|
256
|
+
* Returns two objects: `event` and `{ score, label, value, magnitude }`
|
257
|
+
*/
|
258
|
+
onClickLabel: PropTypes.func,
|
259
|
+
/**
|
260
|
+
* Optional callback functions if `kind` is "dual-button" only.
|
261
|
+
*
|
262
|
+
* Returns two objects: `event` and `{ score, label, value, magnitude }`
|
263
|
+
*/
|
264
|
+
onClickValue: PropTypes.func,
|
265
|
+
/**
|
266
|
+
* Optional callback function if `kind` is "link" or "single-button".
|
267
|
+
*
|
268
|
+
* Returns two objects: `event` and `{ score, label, value, magnitude }`
|
269
|
+
*/
|
270
|
+
onContextMenu: PropTypes.func,
|
271
|
+
/**
|
272
|
+
* Optional callback functions if `kind` is "dual-button" only.
|
273
|
+
*
|
274
|
+
* Returns two objects: `event` and `{ score, label, value, magnitude }`
|
275
|
+
*/
|
276
|
+
onContextMenuLabel: PropTypes.func,
|
277
|
+
/**
|
278
|
+
* Optional callback functions if `kind` is "dual-button" only.
|
279
|
+
*
|
280
|
+
* Returns two objects: `event` and `{ score, label, value, magnitude }`
|
281
|
+
*/
|
282
|
+
onContextMenuValue: PropTypes.func,
|
283
|
+
/**
|
284
|
+
* Used in conjunction with `scoreThresholds`, determines the color, shape, and type of magnitude of the icon.
|
285
|
+
*
|
286
|
+
* If you don't want to show the icon at all, set `hideIcon={true}`.
|
287
|
+
*/
|
288
|
+
score: PropTypes.number,
|
289
|
+
/**
|
290
|
+
* Used in conjunction with `score`, determines the color, shape, and type of magnitude of the icon.
|
291
|
+
*
|
292
|
+
* An array of 4 numbers determines the range of thresholds.
|
293
|
+
*
|
294
|
+
* Example using `[0, 4, 7, 10]`:
|
295
|
+
* <br/>- `<= 0` "Benign"
|
296
|
+
* <br/>- `1-3` "Low"
|
297
|
+
* <br/>- `4-6` "Medium"
|
298
|
+
* <br/>- `7-9` "High"
|
299
|
+
* <br/>- `>= 10` "Critical"
|
300
|
+
* <br/>- `NaN` "Unknown"
|
301
|
+
*/
|
302
|
+
scoreThresholds: PropTypes.arrayOf(PropTypes.number),
|
303
|
+
/**
|
304
|
+
* Callback function for building the label's descriptive text for screen readers.
|
305
|
+
*
|
306
|
+
* The default description is in the form of `"(magnitude)" magnitude: score X out of Y"`.
|
307
|
+
* E.g. `"Medium" magnitude: score 5 out of 10`.
|
308
|
+
*
|
309
|
+
* Where `magnitude` is the label associated with the specific score,
|
310
|
+
* X is the `score`, and Y is the last element of the `setLabelTitle` array.
|
311
|
+
*
|
312
|
+
* If not defined, the title will default to the `label` prop.
|
313
|
+
*/
|
314
|
+
setLabelTitle: PropTypes.func,
|
315
|
+
/**
|
316
|
+
* Styled smaller to better fit inline with text.
|
317
|
+
*/
|
318
|
+
small: PropTypes.bool,
|
319
|
+
/**
|
320
|
+
* Determines the theme of the component.
|
321
|
+
*/
|
322
|
+
theme: PropTypes.oneOf(['light', 'dark']),
|
323
|
+
/**
|
324
|
+
* If not defined, it will behave as `display:inline-block`.
|
325
|
+
*
|
326
|
+
* If `end` it will append "..." to the `value` if there is not enough space.
|
327
|
+
*
|
328
|
+
* If `start` it will prepend "..." to the `value` if there is not enough space.
|
329
|
+
*
|
330
|
+
* If `{maxLength, front, back}` it will inject "..." in the middle
|
331
|
+
* of the `value` regardless of available space.
|
332
|
+
*/
|
333
|
+
truncateValue: PropTypes.oneOfType([PropTypes.oneOf(['end', 'start']), PropTypes.shape({
|
334
|
+
maxLength: PropTypes.number,
|
335
|
+
front: PropTypes.number,
|
336
|
+
back: PropTypes.number
|
337
|
+
})]),
|
338
|
+
/**
|
339
|
+
* The value of the data.
|
340
|
+
*/
|
341
|
+
value: PropTypes.string.isRequired,
|
342
|
+
/**
|
343
|
+
* Overrides the default title for the Decorator's value.
|
344
|
+
*/
|
345
|
+
valueTitle: PropTypes.string
|
346
|
+
};
|
347
|
+
|
348
|
+
export { Decorator };
|
@@ -0,0 +1,95 @@
|
|
1
|
+
/**
|
2
|
+
* Copyright IBM Corp. 2020, 2024
|
3
|
+
*
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
6
|
+
*/
|
7
|
+
|
8
|
+
import { objectWithoutProperties as _objectWithoutProperties, extends as _extends, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
9
|
+
import React__default from 'react';
|
10
|
+
import PropTypes from '../../node_modules/prop-types/index.js';
|
11
|
+
import cx from 'classnames';
|
12
|
+
import { CircleStroke, ChevronMini, Caution, DiamondFill, SquareFill, CircleFill } from '@carbon/react/icons';
|
13
|
+
import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
|
14
|
+
import { pkg } from '../../settings.js';
|
15
|
+
|
16
|
+
var _excluded = ["className", "magnitude", "small"];
|
17
|
+
|
18
|
+
// The block part of our conventional BEM class names (blockClass__E--M).
|
19
|
+
var blockClass = "".concat(pkg.prefix, "--decorator-icon");
|
20
|
+
var componentName = 'DecoratorIcon';
|
21
|
+
var defaults = {
|
22
|
+
magnitude: 'unknown',
|
23
|
+
small: false
|
24
|
+
};
|
25
|
+
|
26
|
+
/**
|
27
|
+
* The shape and color of the Decorator's icon.
|
28
|
+
*/
|
29
|
+
var DecoratorIcon = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
30
|
+
var className = _ref.className,
|
31
|
+
_ref$magnitude = _ref.magnitude,
|
32
|
+
magnitude = _ref$magnitude === void 0 ? defaults.magnitude : _ref$magnitude,
|
33
|
+
_ref$small = _ref.small,
|
34
|
+
small = _ref$small === void 0 ? defaults.small : _ref$small,
|
35
|
+
rest = _objectWithoutProperties(_ref, _excluded);
|
36
|
+
var Icon;
|
37
|
+
switch (magnitude) {
|
38
|
+
case 'benign':
|
39
|
+
Icon = CircleFill;
|
40
|
+
break;
|
41
|
+
case 'low':
|
42
|
+
Icon = SquareFill;
|
43
|
+
break;
|
44
|
+
case 'medium':
|
45
|
+
Icon = DiamondFill;
|
46
|
+
break;
|
47
|
+
case 'high':
|
48
|
+
Icon = Caution;
|
49
|
+
break;
|
50
|
+
case 'critical':
|
51
|
+
Icon = ChevronMini;
|
52
|
+
break;
|
53
|
+
default:
|
54
|
+
Icon = CircleStroke;
|
55
|
+
break;
|
56
|
+
}
|
57
|
+
return /*#__PURE__*/React__default.createElement(Icon, _extends({}, rest, {
|
58
|
+
"aria-hidden": true,
|
59
|
+
className: cx(blockClass, className, "".concat(blockClass, "__magnitude-").concat(magnitude), _defineProperty({}, "".concat(blockClass, "--sm"), small)),
|
60
|
+
focusable: false,
|
61
|
+
ref: ref
|
62
|
+
// Adding viewBox allows resizing `svg` elements via CSS.
|
63
|
+
// The "ChevronMini" icon is half size,
|
64
|
+
// so set to '8 8 8 8' to match the size of the other icons.
|
65
|
+
,
|
66
|
+
viewBox: magnitude === 'critical' ? '8 8 8 8' : '0 0 16 16'
|
67
|
+
}, getDevtoolsProps(componentName)));
|
68
|
+
});
|
69
|
+
|
70
|
+
// Return a placeholder if not released and not enabled by feature flag
|
71
|
+
DecoratorIcon = pkg.checkComponentEnabled(DecoratorIcon, componentName);
|
72
|
+
|
73
|
+
// The display name of the component, used by React. Note that displayName
|
74
|
+
// is used in preference to relying on function.name.
|
75
|
+
DecoratorIcon.displayName = componentName;
|
76
|
+
|
77
|
+
// The types and DocGen commentary for the component props,
|
78
|
+
// in alphabetical order (for consistency).
|
79
|
+
// See https://www.npmjs.com/package/prop-types#usage.
|
80
|
+
DecoratorIcon.propTypes = {
|
81
|
+
/**
|
82
|
+
* Provide an optional class to be applied to the containing node.
|
83
|
+
*/
|
84
|
+
className: PropTypes.string,
|
85
|
+
/**
|
86
|
+
* Determines the shape and color of the icon.
|
87
|
+
*/
|
88
|
+
magnitude: PropTypes.oneOf(['unknown', 'benign', 'low', 'medium', 'high', 'critical']),
|
89
|
+
/**
|
90
|
+
* Reduce the size of the icon in proportion to a smaller Decorator.
|
91
|
+
*/
|
92
|
+
small: PropTypes.bool
|
93
|
+
};
|
94
|
+
|
95
|
+
export { DecoratorIcon };
|
@@ -0,0 +1 @@
|
|
1
|
+
export { Decorator } from "./Decorator";
|
@@ -0,0 +1,8 @@
|
|
1
|
+
/**
|
2
|
+
* Copyright IBM Corp. 2024, 2024
|
3
|
+
*
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
6
|
+
*/
|
7
|
+
export function getMagnitude(score: any, thresholds: any): "Medium" | "Unknown" | "Benign" | "Low" | "High" | "Critical";
|
8
|
+
export function truncate(inputText: any, truncateValue?: {}): any;
|
@@ -0,0 +1,43 @@
|
|
1
|
+
/**
|
2
|
+
* Copyright IBM Corp. 2020, 2024
|
3
|
+
*
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
6
|
+
*/
|
7
|
+
|
8
|
+
var getMagnitude = function getMagnitude(score, thresholds) {
|
9
|
+
if (typeof score === 'number') {
|
10
|
+
if (score <= thresholds[0]) {
|
11
|
+
return 'Benign';
|
12
|
+
}
|
13
|
+
if (score < thresholds[1]) {
|
14
|
+
return 'Low';
|
15
|
+
}
|
16
|
+
if (score < thresholds[2]) {
|
17
|
+
return 'Medium';
|
18
|
+
}
|
19
|
+
if (score < thresholds[3]) {
|
20
|
+
return 'High';
|
21
|
+
}
|
22
|
+
if (score >= thresholds[3]) {
|
23
|
+
return 'Critical';
|
24
|
+
}
|
25
|
+
}
|
26
|
+
return 'Unknown';
|
27
|
+
};
|
28
|
+
|
29
|
+
// If a "midline" truncation has been defined,
|
30
|
+
// then return the formatted midline value generated here,
|
31
|
+
// else return to the original value.
|
32
|
+
var truncate = function truncate(inputText) {
|
33
|
+
var truncateValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
34
|
+
var maxLength = truncateValue.maxLength,
|
35
|
+
front = truncateValue.front,
|
36
|
+
back = truncateValue.back;
|
37
|
+
if (maxLength && inputText.length > maxLength) {
|
38
|
+
return "".concat(inputText.substring(0, front), "\u2026").concat(inputText.substr(inputText.length - back));
|
39
|
+
}
|
40
|
+
return inputText;
|
41
|
+
};
|
42
|
+
|
43
|
+
export { getMagnitude, truncate };
|
@@ -0,0 +1,42 @@
|
|
1
|
+
/**
|
2
|
+
* Type layouts provide an orderly layout of terms and definitions.
|
3
|
+
*/
|
4
|
+
export let DescriptionList: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
|
5
|
+
export function DescriptionListBody({ children, className, ...rest }: {
|
6
|
+
[x: string]: any;
|
7
|
+
children: any;
|
8
|
+
className: any;
|
9
|
+
}): import("react/jsx-runtime").JSX.Element;
|
10
|
+
export namespace DescriptionListBody {
|
11
|
+
export namespace propTypes {
|
12
|
+
let children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
|
13
|
+
let className: PropTypes.Requireable<string>;
|
14
|
+
}
|
15
|
+
export { componentNameBody as displayName };
|
16
|
+
}
|
17
|
+
export function DescriptionListRow({ children, className, ...other }: {
|
18
|
+
[x: string]: any;
|
19
|
+
children: any;
|
20
|
+
className: any;
|
21
|
+
}): import("react/jsx-runtime").JSX.Element;
|
22
|
+
export namespace DescriptionListRow {
|
23
|
+
export namespace propTypes_1 { }
|
24
|
+
export { propTypes_1 as propTypes };
|
25
|
+
export { componentNameRow as displayName };
|
26
|
+
}
|
27
|
+
export function DescriptionListCell({ children, className, ...rest }: {
|
28
|
+
[x: string]: any;
|
29
|
+
children: any;
|
30
|
+
className: any;
|
31
|
+
}): import("react/jsx-runtime").JSX.Element;
|
32
|
+
export namespace DescriptionListCell {
|
33
|
+
export namespace propTypes_2 { }
|
34
|
+
export { propTypes_2 as propTypes };
|
35
|
+
export { componentNameCell as displayName };
|
36
|
+
}
|
37
|
+
import React from 'react';
|
38
|
+
import PropTypes from 'prop-types';
|
39
|
+
declare const componentNameBody: "DescriptionListBody";
|
40
|
+
declare const componentNameRow: "DescriptionListRow";
|
41
|
+
declare const componentNameCell: "DescriptionListCell";
|
42
|
+
export {};
|
@@ -0,0 +1,88 @@
|
|
1
|
+
/**
|
2
|
+
* Copyright IBM Corp. 2020, 2024
|
3
|
+
*
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
6
|
+
*/
|
7
|
+
|
8
|
+
import { objectWithoutProperties as _objectWithoutProperties, extends as _extends, defineProperty as _defineProperty, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
9
|
+
import React__default from 'react';
|
10
|
+
import PropTypes from '../../node_modules/prop-types/index.js';
|
11
|
+
import cx from 'classnames';
|
12
|
+
import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
|
13
|
+
import { pkg } from '../../settings.js';
|
14
|
+
import { DescriptionListSize } from './constants.js';
|
15
|
+
import { StructuredListWrapper } from '@carbon/react';
|
16
|
+
|
17
|
+
var _excluded = ["border", "children", "className", "size"];
|
18
|
+
|
19
|
+
// The block part of our conventional BEM class names (blockClass__E--M).
|
20
|
+
var blockClass = "".concat(pkg.prefix, "--description-list");
|
21
|
+
var componentName = 'DescriptionList';
|
22
|
+
|
23
|
+
// NOTE: the component SCSS is not imported here: it is rolled up separately.
|
24
|
+
|
25
|
+
// Default values can be included here and then assigned to the prop params,
|
26
|
+
// e.g. prop = defaults.prop,
|
27
|
+
// This gathers default values together neatly and ensures non-primitive
|
28
|
+
// values are initialized early to avoid react making unnecessary re-renders.
|
29
|
+
// Note that default values are not required for props that are 'required',
|
30
|
+
// nor for props where the component can apply undefined values reasonably.
|
31
|
+
// Default values should be provided when the component needs to make a choice
|
32
|
+
// or assumption when a prop is not supplied.
|
33
|
+
|
34
|
+
// Default values for props
|
35
|
+
var defaults = {
|
36
|
+
border: false,
|
37
|
+
size: DescriptionListSize.Medium
|
38
|
+
};
|
39
|
+
|
40
|
+
/**
|
41
|
+
* Type layouts provide an orderly layout of terms and definitions.
|
42
|
+
*/
|
43
|
+
var DescriptionList = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
44
|
+
var _ref$border = _ref.border,
|
45
|
+
border = _ref$border === void 0 ? defaults.border : _ref$border,
|
46
|
+
children = _ref.children,
|
47
|
+
className = _ref.className,
|
48
|
+
_ref$size = _ref.size,
|
49
|
+
size = _ref$size === void 0 ? defaults.size : _ref$size,
|
50
|
+
rest = _objectWithoutProperties(_ref, _excluded);
|
51
|
+
return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
|
52
|
+
className: cx(blockClass, // Apply the block class to the main HTML element
|
53
|
+
_defineProperty(_defineProperty({}, "".concat(blockClass, "--bordered"), border), "".concat(blockClass, "--").concat(size), size), className // Apply any supplied class names to the main HTML element.
|
54
|
+
),
|
55
|
+
ref: ref
|
56
|
+
}, getDevtoolsProps(componentName)), /*#__PURE__*/React__default.createElement(StructuredListWrapper, {
|
57
|
+
role: "table",
|
58
|
+
selection: false
|
59
|
+
}, children));
|
60
|
+
});
|
61
|
+
|
62
|
+
// Return a placeholder if not released and not enabled by feature flag
|
63
|
+
DescriptionList = pkg.checkComponentEnabled(DescriptionList, componentName);
|
64
|
+
|
65
|
+
// The display name of the component, used by React. Note that displayName
|
66
|
+
// is used in preference to relying on function.name.
|
67
|
+
DescriptionList.displayName = componentName;
|
68
|
+
var propTypes = {
|
69
|
+
/** Provide the contents of the node */
|
70
|
+
children: PropTypes.node,
|
71
|
+
/** Provide an optional class to be applied to the containing node */
|
72
|
+
className: PropTypes.string
|
73
|
+
};
|
74
|
+
|
75
|
+
// The types and DocGen commentary for the component props,
|
76
|
+
// in alphabetical order (for consistency).
|
77
|
+
// See https://www.npmjs.com/package/prop-types#usage.
|
78
|
+
DescriptionList.propTypes = _objectSpread2(_objectSpread2({}, propTypes), {}, {
|
79
|
+
/** Specify if the type layout has a border */
|
80
|
+
border: PropTypes.bool,
|
81
|
+
/** Specify the size of the type layout, from a list of available sizes */
|
82
|
+
size: PropTypes.oneOf(Object.values(DescriptionListSize))
|
83
|
+
});
|
84
|
+
_objectSpread2({}, propTypes);
|
85
|
+
_objectSpread2({}, propTypes);
|
86
|
+
_objectSpread2({}, propTypes);
|
87
|
+
|
88
|
+
export { DescriptionList };
|
@@ -0,0 +1,16 @@
|
|
1
|
+
/**
|
2
|
+
* Copyright IBM Corp. 2020, 2024
|
3
|
+
*
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
6
|
+
*/
|
7
|
+
|
8
|
+
var DescriptionListSize = {
|
9
|
+
XSmall: 'xs',
|
10
|
+
Small: 'sm',
|
11
|
+
Medium: 'md',
|
12
|
+
// default
|
13
|
+
Large: 'lg'
|
14
|
+
};
|
15
|
+
|
16
|
+
export { DescriptionListSize };
|
@@ -0,0 +1 @@
|
|
1
|
+
export { DescriptionList, DescriptionListBody, DescriptionListRow, DescriptionListCell } from "./DescriptionList";
|