@carbon/ibm-products 2.11.3 → 2.12.0
Sign up to get free protection for your applications and to get access to all the features.
- package/css/index-full-carbon.css +40 -7
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +3 -3
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon-released-only.css +36 -7
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css +2 -2
- package/css/index-without-carbon-released-only.min.css.map +1 -1
- package/css/index-without-carbon.css +40 -7
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +3 -3
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +40 -7
- package/css/index.css.map +1 -1
- package/css/index.min.css +3 -3
- package/css/index.min.css.map +1 -1
- package/es/components/Card/Card.js +9 -1
- package/es/components/Card/CardFooter.js +8 -2
- package/es/components/Card/CardHeader.js +8 -2
- package/es/components/CreateFullPage/CreateFullPage.docs-page.js +6 -0
- package/es/components/CreateFullPage/CreateFullPage.js +66 -8
- package/es/components/Datagrid/Datagrid/Datagrid.js +2 -1
- package/es/components/Datagrid/Datagrid/DatagridContent.js +7 -1
- package/es/components/Datagrid/Datagrid/DatagridSelectAll.js +13 -1
- package/es/components/Datagrid/Datagrid/DraggableElement.js +1 -0
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.js +31 -10
- package/es/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +18 -17
- package/es/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.js +104 -18
- package/es/components/Datagrid/Datagrid/addons/Filtering/OverflowCheckboxes.js +68 -0
- package/es/components/Datagrid/Datagrid/addons/Filtering/constants.js +1 -0
- package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +120 -54
- package/es/components/Datagrid/Datagrid/addons/Filtering/utils.js +9 -3
- package/es/components/Datagrid/useActionsColumn.js +0 -2
- package/es/components/Datagrid/useFiltering.js +4 -1
- package/es/components/Datagrid/utils/DatagridActions.js +2 -3
- package/es/components/SimpleHeader/SimpleHeader.docs-page.js +17 -0
- package/es/components/SimpleHeader/SimpleHeader.js +92 -0
- package/es/components/SimpleHeader/index.js +8 -0
- package/es/components/StatusIcon/StatusIcon.js +13 -13
- package/es/global/js/utils/StoryDocsPage.js +3 -3
- package/lib/components/Card/Card.js +9 -1
- package/lib/components/Card/CardFooter.js +8 -2
- package/lib/components/Card/CardHeader.js +8 -2
- package/lib/components/CreateFullPage/CreateFullPage.docs-page.js +6 -0
- package/lib/components/CreateFullPage/CreateFullPage.js +65 -7
- package/lib/components/Datagrid/Datagrid/Datagrid.js +2 -1
- package/lib/components/Datagrid/Datagrid/DatagridContent.js +6 -0
- package/lib/components/Datagrid/Datagrid/DatagridSelectAll.js +13 -1
- package/lib/components/Datagrid/Datagrid/DraggableElement.js +1 -0
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.js +31 -10
- package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +40 -38
- package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.js +109 -24
- package/lib/components/Datagrid/Datagrid/addons/Filtering/OverflowCheckboxes.js +79 -0
- package/lib/components/Datagrid/Datagrid/addons/Filtering/constants.js +4 -2
- package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +136 -70
- package/lib/components/Datagrid/Datagrid/addons/Filtering/utils.js +10 -4
- package/lib/components/Datagrid/useActionsColumn.js +0 -2
- package/lib/components/Datagrid/useFiltering.js +4 -1
- package/lib/components/Datagrid/utils/DatagridActions.js +2 -3
- package/lib/components/SimpleHeader/SimpleHeader.docs-page.js +28 -0
- package/lib/components/SimpleHeader/SimpleHeader.js +102 -0
- package/lib/components/SimpleHeader/index.js +12 -0
- package/lib/components/StatusIcon/StatusIcon.js +12 -12
- package/lib/global/js/utils/StoryDocsPage.js +3 -3
- package/package.json +2 -2
- package/scss/components/Card/_card.scss +1 -1
- package/scss/components/CreateFullPage/_create-full-page.scss +11 -2
- package/scss/components/Datagrid/styles/addons/_FilterPanel.scss +4 -0
- package/scss/components/ProductiveCard/_productive-card.scss +0 -1
- package/scss/components/SimpleHeader/_carbon-imports.scss +11 -0
- package/scss/components/SimpleHeader/_index-with-carbon.scss +9 -0
- package/scss/components/SimpleHeader/_index.scss +10 -0
- package/scss/components/SimpleHeader/_simple-header.scss +37 -0
- package/scss/components/StatusIcon/_status-icon.scss +0 -1
- package/scss/components/_index-with-carbon.scss +1 -0
@@ -78,7 +78,6 @@ var useActionsColumn = function useActionsColumn(hooks) {
|
|
78
78
|
}, /*#__PURE__*/_react.default.createElement(_react2.OverflowMenu, (0, _extends2.default)({}, rest, {
|
79
79
|
align: align || 'top',
|
80
80
|
renderIcon: icon,
|
81
|
-
light: true,
|
82
81
|
iconDescription: itemText,
|
83
82
|
kind: "ghost",
|
84
83
|
className: (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(blockClass, "__disabled-row-action"), getDisabledState(row.index))),
|
@@ -94,7 +93,6 @@ var useActionsColumn = function useActionsColumn(hooks) {
|
|
94
93
|
})), !isFetching && rowActions.length > 2 && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_react2.OverflowMenu, {
|
95
94
|
align: "top-right",
|
96
95
|
size: "sm",
|
97
|
-
light: true,
|
98
96
|
flipped: true,
|
99
97
|
onClick: function onClick(e) {
|
100
98
|
e.stopPropagation();
|
@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
});
|
7
7
|
exports.default = void 0;
|
8
8
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
9
|
+
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
|
9
10
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
10
11
|
var _react = require("react");
|
11
12
|
var _settings = require("../../settings");
|
@@ -30,7 +31,9 @@ var useFiltering = function useFiltering(hooks) {
|
|
30
31
|
endDate = _ref2[1];
|
31
32
|
return rows.filter(function (row) {
|
32
33
|
var rowValue = row.values[id];
|
33
|
-
|
34
|
+
var startDateObj = (0, _typeof2.default)(startDate) === 'object' ? startDate : new Date(startDate);
|
35
|
+
var endDateObj = (0, _typeof2.default)(endDate) === 'object' ? endDate : new Date(endDate);
|
36
|
+
if (rowValue.getTime() <= endDateObj.getTime() && rowValue.getTime() >= startDateObj.getTime()) {
|
34
37
|
// In date range
|
35
38
|
return true;
|
36
39
|
} else {
|
@@ -136,7 +136,7 @@ var DatagridActions = function DatagridActions(datagridState) {
|
|
136
136
|
size: "lg",
|
137
137
|
id: "columnSearch",
|
138
138
|
persistent: true,
|
139
|
-
|
139
|
+
placeholder: searchForAColumn,
|
140
140
|
onChange: function onChange(e) {
|
141
141
|
return setGlobalFilter(e.target.value);
|
142
142
|
}
|
@@ -162,7 +162,6 @@ var DatagridActions = function DatagridActions(datagridState) {
|
|
162
162
|
style: style
|
163
163
|
}, /*#__PURE__*/_react2.default.createElement(CustomizeColumnsButton, null)), /*#__PURE__*/_react2.default.createElement(RowSizeDropdown, rowSizeDropdownProps), /*#__PURE__*/_react2.default.createElement(_react.MenuButton, {
|
164
164
|
label: "Primary button",
|
165
|
-
renderIcon: _icons.ChevronDown,
|
166
165
|
className: "".concat(blockClass, "__toolbar-options")
|
167
166
|
}, /*#__PURE__*/_react2.default.createElement(_react.MenuItem, {
|
168
167
|
label: "Option 1",
|
@@ -177,7 +176,7 @@ var DatagridActions = function DatagridActions(datagridState) {
|
|
177
176
|
size: "xl",
|
178
177
|
id: "columnSearch",
|
179
178
|
persistent: true,
|
180
|
-
|
179
|
+
placeholder: searchForAColumn,
|
181
180
|
onChange: function onChange(e) {
|
182
181
|
return setGlobalFilter(e.target.value);
|
183
182
|
}
|
@@ -0,0 +1,28 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
6
|
+
value: true
|
7
|
+
});
|
8
|
+
exports.default = void 0;
|
9
|
+
var _react = _interopRequireDefault(require("react"));
|
10
|
+
var _StoryDocsPage = require("../../global/js/utils/StoryDocsPage");
|
11
|
+
var stories = _interopRequireWildcard(require("./SimpleHeader.stories"));
|
12
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
13
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
14
|
+
var DocsPage = function DocsPage() {
|
15
|
+
return /*#__PURE__*/_react.default.createElement(_StoryDocsPage.StoryDocsPage, {
|
16
|
+
blocks: [{
|
17
|
+
story: stories.simpleHeader
|
18
|
+
}, {
|
19
|
+
story: stories.simpleHeaderWithBreadcrumbsOnly
|
20
|
+
}, {
|
21
|
+
story: stories.simpleHeaderWithTitleOnly
|
22
|
+
}, {
|
23
|
+
story: stories.simpleHeaderWithOverflowBreadcrumbs
|
24
|
+
}]
|
25
|
+
});
|
26
|
+
};
|
27
|
+
var _default = DocsPage;
|
28
|
+
exports.default = _default;
|
@@ -0,0 +1,102 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
6
|
+
value: true
|
7
|
+
});
|
8
|
+
exports.overflowAriaLabel_required_if_breadcrumbs_exist = exports.SimpleHeader = void 0;
|
9
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
10
|
+
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
11
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
12
|
+
var _react = _interopRequireWildcard(require("react"));
|
13
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
14
|
+
var _settings = require("../../settings");
|
15
|
+
var _pconsole = _interopRequireDefault(require("../../global/js/utils/pconsole"));
|
16
|
+
var _BreadcrumbWithOverflow = require("../BreadcrumbWithOverflow");
|
17
|
+
var _propsHelper = require("../../global/js/utils/props-helper");
|
18
|
+
var _excluded = ["breadcrumbs", "className", "title", "noTrailingSlash", "maxVisible", "overflowAriaLabel"];
|
19
|
+
/**
|
20
|
+
* Copyright IBM Corp. 2023, 2023
|
21
|
+
*
|
22
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
23
|
+
* LICENSE file in the root directory of this source tree.
|
24
|
+
*/
|
25
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
26
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
27
|
+
var blockClass = "".concat(_settings.pkg.prefix, "--simple-header");
|
28
|
+
var componentName = 'SimpleHeader';
|
29
|
+
/**
|
30
|
+
* The SimpleHeader is not public and only used internally by CreateFullPage.
|
31
|
+
*
|
32
|
+
* Component varieties:
|
33
|
+
* - Header with Breadcrumbs
|
34
|
+
* - Header with Title
|
35
|
+
* - Header with Breadcrumbs and Title
|
36
|
+
*
|
37
|
+
*
|
38
|
+
* The component will throw a warning message if neither a title or breadcrumbs are provided
|
39
|
+
* since it requires at least one of them.
|
40
|
+
* */
|
41
|
+
var SimpleHeader = function SimpleHeader(_ref) {
|
42
|
+
var breadcrumbs = _ref.breadcrumbs,
|
43
|
+
className = _ref.className,
|
44
|
+
title = _ref.title,
|
45
|
+
noTrailingSlash = _ref.noTrailingSlash,
|
46
|
+
maxVisible = _ref.maxVisible,
|
47
|
+
overflowAriaLabel = _ref.overflowAriaLabel,
|
48
|
+
rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
49
|
+
var warnIfNoTitleOrBreadcrumbs = (0, _react.useCallback)(function () {
|
50
|
+
if (!title && !(breadcrumbs !== null && breadcrumbs !== void 0 && breadcrumbs.length)) {
|
51
|
+
_pconsole.default.error("Warning: You have tried using a ".concat(componentName, " component without specifying a title or breadcrumbs props"));
|
52
|
+
}
|
53
|
+
}, [breadcrumbs, title]);
|
54
|
+
(0, _react.useEffect)(function () {
|
55
|
+
warnIfNoTitleOrBreadcrumbs();
|
56
|
+
}, [title, breadcrumbs, warnIfNoTitleOrBreadcrumbs]);
|
57
|
+
return /*#__PURE__*/_react.default.createElement("header", (0, _extends2.default)({
|
58
|
+
className: (0, _classnames.default)(blockClass, className)
|
59
|
+
}, rest), (breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.length) > 0 && /*#__PURE__*/_react.default.createElement(_BreadcrumbWithOverflow.BreadcrumbWithOverflow, {
|
60
|
+
noTrailingSlash: noTrailingSlash,
|
61
|
+
className: (0, _classnames.default)("".concat(blockClass, "__breadcrumbs")),
|
62
|
+
breadcrumbs: breadcrumbs,
|
63
|
+
maxVisible: maxVisible,
|
64
|
+
overflowAriaLabel: overflowAriaLabel
|
65
|
+
}), title && /*#__PURE__*/_react.default.createElement("h1", {
|
66
|
+
className: (0, _classnames.default)("".concat(blockClass, "__title"))
|
67
|
+
}, title));
|
68
|
+
};
|
69
|
+
exports.SimpleHeader = SimpleHeader;
|
70
|
+
var overflowAriaLabel_required_if_breadcrumbs_exist = (0, _propsHelper.isRequiredIf)(_propTypes.default.string, function (props) {
|
71
|
+
var _props$breadcrumbs;
|
72
|
+
return ((_props$breadcrumbs = props.breadcrumbs) === null || _props$breadcrumbs === void 0 ? void 0 : _props$breadcrumbs.length) > 0;
|
73
|
+
});
|
74
|
+
exports.overflowAriaLabel_required_if_breadcrumbs_exist = overflowAriaLabel_required_if_breadcrumbs_exist;
|
75
|
+
SimpleHeader.propTypes = {
|
76
|
+
/** Header breadcrumbs */
|
77
|
+
breadcrumbs: _propTypes.default.arrayOf(_propTypes.default.shape({
|
78
|
+
/** breadcrumb item key */
|
79
|
+
key: _propTypes.default.string.isRequired,
|
80
|
+
/** breadcrumb item label */
|
81
|
+
label: _propTypes.default.string.isRequired,
|
82
|
+
/** breadcrumb item link */
|
83
|
+
href: _propTypes.default.string,
|
84
|
+
/** breadcrumb item title tooltip */
|
85
|
+
title: _propTypes.default.string,
|
86
|
+
/** Provide if this breadcrumb item represents the current page */
|
87
|
+
isCurrentPage: _propTypes.default.bool
|
88
|
+
})),
|
89
|
+
/** Header classname */
|
90
|
+
className: _propTypes.default.string,
|
91
|
+
/** Maximum visible breadcrumb-items before overflow is used (values less than 1 are treated as 1) */
|
92
|
+
maxVisible: _propTypes.default.number,
|
93
|
+
/** A prop to omit the trailing slash for the breadcrumbs */
|
94
|
+
noTrailingSlash: _propTypes.default.bool,
|
95
|
+
/** Label for open/close overflow button used for breadcrumb items that do not fit */
|
96
|
+
overflowAriaLabel: overflowAriaLabel_required_if_breadcrumbs_exist,
|
97
|
+
/** Header title */
|
98
|
+
title: _propTypes.default.string
|
99
|
+
};
|
100
|
+
SimpleHeader.defaultProps = {
|
101
|
+
noTrailingSlash: true
|
102
|
+
};
|
@@ -0,0 +1,12 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
Object.defineProperty(exports, "CreateFullPageHeader", {
|
7
|
+
enumerable: true,
|
8
|
+
get: function get() {
|
9
|
+
return _SimpleHeader.CreateFullPageHeader;
|
10
|
+
}
|
11
|
+
});
|
12
|
+
var _SimpleHeader = require("./SimpleHeader");
|
@@ -255,25 +255,25 @@ var StatusIcon = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
255
255
|
},
|
256
256
|
'in-progress': {
|
257
257
|
sm: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
258
|
-
return /*#__PURE__*/_react.default.createElement(_icons.
|
258
|
+
return /*#__PURE__*/_react.default.createElement(_icons.InProgress, (0, _extends2.default)({
|
259
259
|
size: 16,
|
260
260
|
ref: ref
|
261
261
|
}, props));
|
262
262
|
}),
|
263
263
|
md: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
264
|
-
return /*#__PURE__*/_react.default.createElement(_icons.
|
264
|
+
return /*#__PURE__*/_react.default.createElement(_icons.InProgress, (0, _extends2.default)({
|
265
265
|
size: 20,
|
266
266
|
ref: ref
|
267
267
|
}, props));
|
268
268
|
}),
|
269
269
|
lg: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
270
|
-
return /*#__PURE__*/_react.default.createElement(_icons.
|
270
|
+
return /*#__PURE__*/_react.default.createElement(_icons.InProgress, (0, _extends2.default)({
|
271
271
|
size: 24,
|
272
272
|
ref: ref
|
273
273
|
}, props));
|
274
274
|
}),
|
275
275
|
xl: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
276
|
-
return /*#__PURE__*/_react.default.createElement(_icons.
|
276
|
+
return /*#__PURE__*/_react.default.createElement(_icons.InProgress, (0, _extends2.default)({
|
277
277
|
size: 32,
|
278
278
|
ref: ref
|
279
279
|
}, props));
|
@@ -281,25 +281,25 @@ var StatusIcon = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
281
281
|
},
|
282
282
|
running: {
|
283
283
|
sm: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
284
|
-
return /*#__PURE__*/_react.default.createElement(_icons.
|
284
|
+
return /*#__PURE__*/_react.default.createElement(_icons.CheckmarkOutline, (0, _extends2.default)({
|
285
285
|
size: 16,
|
286
286
|
ref: ref
|
287
287
|
}, props));
|
288
288
|
}),
|
289
289
|
md: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
290
|
-
return /*#__PURE__*/_react.default.createElement(_icons.
|
290
|
+
return /*#__PURE__*/_react.default.createElement(_icons.CheckmarkOutline, (0, _extends2.default)({
|
291
291
|
size: 20,
|
292
292
|
ref: ref
|
293
293
|
}, props));
|
294
294
|
}),
|
295
295
|
lg: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
296
|
-
return /*#__PURE__*/_react.default.createElement(_icons.
|
296
|
+
return /*#__PURE__*/_react.default.createElement(_icons.CheckmarkOutline, (0, _extends2.default)({
|
297
297
|
size: 24,
|
298
298
|
ref: ref
|
299
299
|
}, props));
|
300
300
|
}),
|
301
301
|
xl: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
302
|
-
return /*#__PURE__*/_react.default.createElement(_icons.
|
302
|
+
return /*#__PURE__*/_react.default.createElement(_icons.CheckmarkOutline, (0, _extends2.default)({
|
303
303
|
size: 32,
|
304
304
|
ref: ref
|
305
305
|
}, props));
|
@@ -307,25 +307,25 @@ var StatusIcon = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
307
307
|
},
|
308
308
|
pending: {
|
309
309
|
sm: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
310
|
-
return /*#__PURE__*/_react.default.createElement(_icons.
|
310
|
+
return /*#__PURE__*/_react.default.createElement(_icons.Pending, (0, _extends2.default)({
|
311
311
|
size: 16,
|
312
312
|
ref: ref
|
313
313
|
}, props));
|
314
314
|
}),
|
315
315
|
md: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
316
|
-
return /*#__PURE__*/_react.default.createElement(_icons.
|
316
|
+
return /*#__PURE__*/_react.default.createElement(_icons.Pending, (0, _extends2.default)({
|
317
317
|
size: 20,
|
318
318
|
ref: ref
|
319
319
|
}, props));
|
320
320
|
}),
|
321
321
|
lg: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
322
|
-
return /*#__PURE__*/_react.default.createElement(_icons.
|
322
|
+
return /*#__PURE__*/_react.default.createElement(_icons.Pending, (0, _extends2.default)({
|
323
323
|
size: 24,
|
324
324
|
ref: ref
|
325
325
|
}, props));
|
326
326
|
}),
|
327
327
|
xl: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
328
|
-
return /*#__PURE__*/_react.default.createElement(_icons.
|
328
|
+
return /*#__PURE__*/_react.default.createElement(_icons.Pending, (0, _extends2.default)({
|
329
329
|
size: 32,
|
330
330
|
ref: ref
|
331
331
|
}, props));
|
@@ -179,10 +179,10 @@ StoryDocsPage.propTypes = {
|
|
179
179
|
/**
|
180
180
|
* location if any of guidelines on the PAL site, constructed by default
|
181
181
|
*/
|
182
|
-
altGuidelinesHref: _propTypes.default.oneOfType(_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.shape({
|
182
|
+
altGuidelinesHref: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.shape({
|
183
183
|
href: _propTypes.default.string,
|
184
184
|
label: _propTypes.default.string
|
185
|
-
}))),
|
185
|
+
}))]),
|
186
186
|
/**
|
187
187
|
* Uses component name by default
|
188
188
|
*/
|
@@ -216,7 +216,7 @@ StoryDocsPage.propTypes = {
|
|
216
216
|
* default language `jsx`
|
217
217
|
*/
|
218
218
|
source: _propTypes.default.shape({
|
219
|
-
language: _propTypes.default.oneOf('javascript', 'css', 'jsx', 'json'),
|
219
|
+
language: _propTypes.default.oneOf(['javascript', 'css', 'jsx', 'json']),
|
220
220
|
code: _propTypes.default.string
|
221
221
|
})
|
222
222
|
})),
|
package/package.json
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
{
|
2
2
|
"name": "@carbon/ibm-products",
|
3
3
|
"description": "Carbon for IBM Products",
|
4
|
-
"version": "2.
|
4
|
+
"version": "2.12.0",
|
5
5
|
"license": "Apache-2.0",
|
6
6
|
"main": "lib/index.js",
|
7
7
|
"module": "es/index.js",
|
@@ -96,5 +96,5 @@
|
|
96
96
|
"react": "^16.8.6 || ^17.0.1 || ^18.2.0",
|
97
97
|
"react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
|
98
98
|
},
|
99
|
-
"gitHead": "
|
99
|
+
"gitHead": "3379b9af8e581eb50ec510e8a81248b4ec6d439d"
|
100
100
|
}
|
@@ -12,9 +12,10 @@
|
|
12
12
|
@use '../../global/styles/project-settings' as c4p-settings;
|
13
13
|
|
14
14
|
// CreateFullPage uses the following IBM Products components:
|
15
|
-
// ActionSet, CreateInfluencer
|
15
|
+
// ActionSet, CreateInfluencer and SimpleHeader
|
16
16
|
@use '../CreateInfluencer/index' as *;
|
17
17
|
@use '../ActionSet/action-set' as *;
|
18
|
+
@use '../SimpleHeader' as *;
|
18
19
|
|
19
20
|
// The block part of our conventional BEM class names (blockClass__E--M).
|
20
21
|
$block-class: #{c4p-settings.$pkg-prefix}--create-full-page;
|
@@ -32,6 +33,14 @@ $step-block-class: #{c4p-settings.$pkg-prefix}--create-full-page__step;
|
|
32
33
|
margin-left: 0;
|
33
34
|
}
|
34
35
|
|
36
|
+
.#{$block-class}__header {
|
37
|
+
position: sticky;
|
38
|
+
z-index: 9;
|
39
|
+
top: 0;
|
40
|
+
right: 0;
|
41
|
+
left: 0;
|
42
|
+
}
|
43
|
+
|
35
44
|
.#{$block-class} .#{$step-block-class}__step--hidden-step {
|
36
45
|
display: none;
|
37
46
|
}
|
@@ -64,7 +73,7 @@ $step-block-class: #{c4p-settings.$pkg-prefix}--create-full-page__step;
|
|
64
73
|
display: none;
|
65
74
|
}
|
66
75
|
|
67
|
-
.#{$block-class} {
|
76
|
+
.#{$block-class}__influencer-and-body-container {
|
68
77
|
display: flex;
|
69
78
|
height: 100vh;
|
70
79
|
padding: 0;
|
@@ -54,7 +54,6 @@ $block-class: #{c4p-settings.$pkg-prefix}--card;
|
|
54
54
|
|
55
55
|
.#{$block-class}__actions-header-ghost-button {
|
56
56
|
min-height: $spacing-07;
|
57
|
-
padding: 0 $spacing-05;
|
58
57
|
// stylelint-disable-next-line carbon/layout-token-use
|
59
58
|
padding-right: calc($spacing-01 + $spacing-03);
|
60
59
|
// stylelint-disable-next-line carbon/layout-token-use
|
@@ -0,0 +1,11 @@
|
|
1
|
+
//
|
2
|
+
// Copyright IBM Corp. 2023, 2023
|
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
|
+
// SimpleHeader uses the following Carbon components:
|
9
|
+
// Breadcrumb, BreadcrumbItem
|
10
|
+
|
11
|
+
@use '@carbon/styles/scss/components/breadcrumb';
|
@@ -0,0 +1,10 @@
|
|
1
|
+
//
|
2
|
+
// Copyright IBM Corp. 2023, 2023
|
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
|
+
// An index file is most useful when you have multiple components
|
9
|
+
|
10
|
+
@use './simple-header';
|
@@ -0,0 +1,37 @@
|
|
1
|
+
//
|
2
|
+
// Copyright IBM Corp. 2023, 2023
|
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
|
+
@use '@carbon/styles/scss/spacing' as *;
|
9
|
+
@use '@carbon/styles/scss/theme' as *;
|
10
|
+
@use '@carbon/styles/scss/type';
|
11
|
+
|
12
|
+
@use '../../global/styles/project-settings' as *;
|
13
|
+
|
14
|
+
$block-class: #{$pkg-prefix}--simple-header;
|
15
|
+
|
16
|
+
.#{$block-class} {
|
17
|
+
width: 100%;
|
18
|
+
padding: $spacing-04 $spacing-07;
|
19
|
+
border-bottom: 1px solid $border-subtle-01;
|
20
|
+
background-color: $layer-01;
|
21
|
+
}
|
22
|
+
|
23
|
+
.#{$block-class}__title {
|
24
|
+
@include type.type-style('heading-04');
|
25
|
+
}
|
26
|
+
|
27
|
+
.#{$block-class}__breadcrumbs + .#{$block-class}__title {
|
28
|
+
// add margin top to the title if breadcrumbs exist
|
29
|
+
margin-top: $spacing-02;
|
30
|
+
}
|
31
|
+
|
32
|
+
.#{$block-class}__breadcrumbs .#{$carbon-prefix}--breadcrumb-item,
|
33
|
+
.#{$block-class}__breadcrumbs
|
34
|
+
.#{$carbon-prefix}--breadcrumb-item
|
35
|
+
.#{$carbon-prefix}--link {
|
36
|
+
@include type.type-style('label-01');
|
37
|
+
}
|
@@ -129,7 +129,6 @@ $block-class: #{$pkg-prefix}--status-icon;
|
|
129
129
|
} @else if $icon == running {
|
130
130
|
// stylelint-disable-next-line carbon/theme-token-use
|
131
131
|
fill: --clr($icon, $theme);
|
132
|
-
transform: scaleY(-1);
|
133
132
|
} @else {
|
134
133
|
// stylelint-disable-next-line carbon/theme-token-use
|
135
134
|
fill: --clr($icon, $theme);
|