@carbon/ibm-products 1.0.0-rc.2 → 1.0.0
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/README.md +11 -12
- package/css/index-full-carbon.css +23 -6
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +1 -1
- package/css/index-without-carbon-released-only.css +23 -6
- 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.css +23 -6
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +1 -1
- package/css/index.css +23 -6
- package/css/index.css.map +1 -1
- package/css/index.min.css +1 -1
- package/es/components/PageHeader/PageHeader.js +8 -8
- package/es/components/_Canary/Canary.js +1 -1
- package/es/global/js/utils/story-helper.js +22 -0
- package/lib/components/PageHeader/PageHeader.js +8 -8
- package/lib/components/_Canary/Canary.js +1 -1
- package/lib/global/js/utils/story-helper.js +29 -2
- package/package.json +2 -2
- package/scss/components/PageHeader/_page-header.scss +33 -6
@@ -85,7 +85,7 @@ export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
85
85
|
}; // state based on props only
|
86
86
|
|
87
87
|
|
88
|
-
var hasActionBar = actionBarItems && actionBarItems.length;
|
88
|
+
var hasActionBar = actionBarItems && actionBarItems.length > 0;
|
89
89
|
var hasBreadcrumbRow = breadcrumbs || actionBarItems; // NOTE: The buffer is used to add space between the bottom of the header and the last content
|
90
90
|
// Not pre-collapsed and (subtitle or children)
|
91
91
|
|
@@ -446,6 +446,8 @@ export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
446
446
|
var handleWidthChange = isBreadcrumbRow && hasBreadcrumbRow ? handlePageActionWidthChange : function () {};
|
447
447
|
return /*#__PURE__*/React.createElement(_Tag, {
|
448
448
|
className: cx("".concat(blockClass, "__page-actions"), _defineProperty({}, "".concat(blockClass, "__page-actions--in-breadcrumb"), inBreadcrumbRow))
|
449
|
+
}, /*#__PURE__*/React.createElement("div", {
|
450
|
+
className: cx("".concat(blockClass, "__page-actions-content"))
|
449
451
|
}, (_pageActions$content = pageActions.content) !== null && _pageActions$content !== void 0 ? _pageActions$content : /*#__PURE__*/React.createElement(ButtonSetWithOverflow, {
|
450
452
|
classname: "".concat(blockClass, "__button-set-with-overflow"),
|
451
453
|
menuOptionsClass: cx(pageActionsMenuOptionsClass, "".concat(blockClass, "__button-set-menu-options")),
|
@@ -453,7 +455,7 @@ export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
453
455
|
buttons: pageActions,
|
454
456
|
buttonSetOverflowLabel: pageActionsOverflowLabel,
|
455
457
|
rightAlign: true
|
456
|
-
}));
|
458
|
+
})));
|
457
459
|
}
|
458
460
|
}
|
459
461
|
}); // Return a placeholder if not released and not enabled by feature flag
|
@@ -498,9 +500,8 @@ PageHeader.propTypes = {
|
|
498
500
|
* NOTE: This prop is required if actionBarItems are supplied
|
499
501
|
*/
|
500
502
|
actionBarOverflowAriaLabel: PropTypes.string.isRequired.if(function (_ref8) {
|
501
|
-
var actionBarItems = _ref8.actionBarItems
|
502
|
-
|
503
|
-
return actionBarItems && actionBarItems.length > 0 && !actionBarOverflowLabel;
|
503
|
+
var actionBarItems = _ref8.actionBarItems;
|
504
|
+
return actionBarItems && actionBarItems.length > 0;
|
504
505
|
}),
|
505
506
|
|
506
507
|
/**
|
@@ -535,9 +536,8 @@ PageHeader.propTypes = {
|
|
535
536
|
* It is used in an overflow menu when there is insufficient space to display all breadcrumbs inline.
|
536
537
|
*/
|
537
538
|
breadcrumbOverflowAriaLabel: PropTypes.string.isRequired.if(function (_ref9) {
|
538
|
-
var breadcrumbs = _ref9.breadcrumbs
|
539
|
-
|
540
|
-
return breadcrumbs && breadcrumbs.length > 0 || breadcrumbItems && breadcrumbItems.length > 0;
|
539
|
+
var breadcrumbs = _ref9.breadcrumbs;
|
540
|
+
return breadcrumbs && breadcrumbs.length > 0;
|
541
541
|
}),
|
542
542
|
|
543
543
|
/**
|
@@ -30,7 +30,7 @@ export var Canary = function Canary(_ref
|
|
30
30
|
componentName = _ref.componentName,
|
31
31
|
rest = _objectWithoutProperties(_ref, _excluded);
|
32
32
|
|
33
|
-
var instructions = "\nimport { pkg } from '@carbon/ibm-
|
33
|
+
var instructions = "\nimport { pkg } from '@carbon/ibm-products';\n// NOTE: must happen before component is first used\npkg.component.".concat(componentName, " = true;\n");
|
34
34
|
return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
|
35
35
|
className: cx(blockClass, className)
|
36
36
|
}), /*#__PURE__*/React.createElement("h2", null, "This component ", /*#__PURE__*/React.createElement("strong", null, componentName), " is not ready yet."), /*#__PURE__*/React.createElement("p", null, "To enable it, initialize package flags before the component is first used."), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("p", null, "e.g. in main.js"), /*#__PURE__*/React.createElement(CodeSnippet, {
|
@@ -4,6 +4,8 @@
|
|
4
4
|
// This source code is licensed under the Apache-2.0 license found in the
|
5
5
|
// LICENSE file in the root directory of this source tree.
|
6
6
|
//
|
7
|
+
import React from 'react';
|
8
|
+
import PropTypes from 'prop-types';
|
7
9
|
import { sanitize } from '@storybook/csf';
|
8
10
|
import pkg from '../package-settings';
|
9
11
|
import { getPathForComponent } from '../../../../../core/story-structure';
|
@@ -50,4 +52,24 @@ export var prepareStory = function prepareStory(template, options) {
|
|
50
52
|
(_result$parameters2$c = (_result$parameters2 = result.parameters).ccsSettings) !== null && _result$parameters2$c !== void 0 ? _result$parameters2$c : _result$parameters2.ccsSettings = {};
|
51
53
|
result.parameters.ccsSettings.sequence = sequence++;
|
52
54
|
return result;
|
55
|
+
};
|
56
|
+
/**
|
57
|
+
* A helper component that returns a codesandbox link to an example codesandbox for the component.
|
58
|
+
* The link URL is based on the example directory name and the standard codesandbox URL for package examples.
|
59
|
+
*/
|
60
|
+
|
61
|
+
export var CodesandboxLink = function CodesandboxLink(_ref) {
|
62
|
+
var exampleDirectory = _ref.exampleDirectory;
|
63
|
+
return /*#__PURE__*/React.createElement("a", {
|
64
|
+
href: "https://codesandbox.io/s/github/carbon-design-system/ibm-cloud-cognitive/tree/main/examples/cloud-cognitive/".concat(exampleDirectory)
|
65
|
+
}, /*#__PURE__*/React.createElement("img", {
|
66
|
+
alt: "Edit on CodeSandbox",
|
67
|
+
src: "https://codesandbox.io/static/img/play-codesandbox.svg"
|
68
|
+
}));
|
69
|
+
};
|
70
|
+
CodesandboxLink.propTypes = {
|
71
|
+
/**
|
72
|
+
* directory withing examples codesandbox will be found
|
73
|
+
*/
|
74
|
+
exampleDirectory: PropTypes.string
|
53
75
|
};
|
@@ -116,7 +116,7 @@ var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
116
116
|
}; // state based on props only
|
117
117
|
|
118
118
|
|
119
|
-
var hasActionBar = actionBarItems && actionBarItems.length;
|
119
|
+
var hasActionBar = actionBarItems && actionBarItems.length > 0;
|
120
120
|
var hasBreadcrumbRow = breadcrumbs || actionBarItems; // NOTE: The buffer is used to add space between the bottom of the header and the last content
|
121
121
|
// Not pre-collapsed and (subtitle or children)
|
122
122
|
|
@@ -477,6 +477,8 @@ var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
477
477
|
var handleWidthChange = isBreadcrumbRow && hasBreadcrumbRow ? handlePageActionWidthChange : function () {};
|
478
478
|
return /*#__PURE__*/_react.default.createElement(_Tag, {
|
479
479
|
className: (0, _classnames.default)("".concat(_PageHeaderUtils.blockClass, "__page-actions"), (0, _defineProperty2.default)({}, "".concat(_PageHeaderUtils.blockClass, "__page-actions--in-breadcrumb"), inBreadcrumbRow))
|
480
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
481
|
+
className: (0, _classnames.default)("".concat(_PageHeaderUtils.blockClass, "__page-actions-content"))
|
480
482
|
}, (_pageActions$content = pageActions.content) !== null && _pageActions$content !== void 0 ? _pageActions$content : /*#__PURE__*/_react.default.createElement(_ButtonSetWithOverflow.ButtonSetWithOverflow, {
|
481
483
|
classname: "".concat(_PageHeaderUtils.blockClass, "__button-set-with-overflow"),
|
482
484
|
menuOptionsClass: (0, _classnames.default)(pageActionsMenuOptionsClass, "".concat(_PageHeaderUtils.blockClass, "__button-set-menu-options")),
|
@@ -484,7 +486,7 @@ var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
484
486
|
buttons: pageActions,
|
485
487
|
buttonSetOverflowLabel: pageActionsOverflowLabel,
|
486
488
|
rightAlign: true
|
487
|
-
}));
|
489
|
+
})));
|
488
490
|
}
|
489
491
|
}
|
490
492
|
}); // Return a placeholder if not released and not enabled by feature flag
|
@@ -531,9 +533,8 @@ PageHeader.propTypes = {
|
|
531
533
|
* NOTE: This prop is required if actionBarItems are supplied
|
532
534
|
*/
|
533
535
|
actionBarOverflowAriaLabel: _propTypes.default.string.isRequired.if(function (_ref8) {
|
534
|
-
var actionBarItems = _ref8.actionBarItems
|
535
|
-
|
536
|
-
return actionBarItems && actionBarItems.length > 0 && !actionBarOverflowLabel;
|
536
|
+
var actionBarItems = _ref8.actionBarItems;
|
537
|
+
return actionBarItems && actionBarItems.length > 0;
|
537
538
|
}),
|
538
539
|
|
539
540
|
/**
|
@@ -568,9 +569,8 @@ PageHeader.propTypes = {
|
|
568
569
|
* It is used in an overflow menu when there is insufficient space to display all breadcrumbs inline.
|
569
570
|
*/
|
570
571
|
breadcrumbOverflowAriaLabel: _propTypes.default.string.isRequired.if(function (_ref9) {
|
571
|
-
var breadcrumbs = _ref9.breadcrumbs
|
572
|
-
|
573
|
-
return breadcrumbs && breadcrumbs.length > 0 || breadcrumbItems && breadcrumbItems.length > 0;
|
572
|
+
var breadcrumbs = _ref9.breadcrumbs;
|
573
|
+
return breadcrumbs && breadcrumbs.length > 0;
|
574
574
|
}),
|
575
575
|
|
576
576
|
/**
|
@@ -34,7 +34,7 @@ var Canary = function Canary(_ref
|
|
34
34
|
var className = _ref.className,
|
35
35
|
componentName = _ref.componentName,
|
36
36
|
rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
37
|
-
var instructions = "\nimport { pkg } from '@carbon/ibm-
|
37
|
+
var instructions = "\nimport { pkg } from '@carbon/ibm-products';\n// NOTE: must happen before component is first used\npkg.component.".concat(componentName, " = true;\n");
|
38
38
|
return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
|
39
39
|
className: (0, _classnames.default)(blockClass, className)
|
40
40
|
}), /*#__PURE__*/_react.default.createElement("h2", null, "This component ", /*#__PURE__*/_react.default.createElement("strong", null, componentName), " is not ready yet."), /*#__PURE__*/_react.default.createElement("p", null, "To enable it, initialize package flags before the component is first used."), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("p", null, "e.g. in main.js"), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.CodeSnippet, {
|
@@ -5,7 +5,11 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
6
6
|
value: true
|
7
7
|
});
|
8
|
-
exports.prepareStory = exports.getStoryTitle = exports.getStoryId = void 0;
|
8
|
+
exports.prepareStory = exports.getStoryTitle = exports.getStoryId = exports.CodesandboxLink = void 0;
|
9
|
+
|
10
|
+
var _react = _interopRequireDefault(require("react"));
|
11
|
+
|
12
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
9
13
|
|
10
14
|
var _csf = require("@storybook/csf");
|
11
15
|
|
@@ -69,5 +73,28 @@ var prepareStory = function prepareStory(template, options) {
|
|
69
73
|
result.parameters.ccsSettings.sequence = sequence++;
|
70
74
|
return result;
|
71
75
|
};
|
76
|
+
/**
|
77
|
+
* A helper component that returns a codesandbox link to an example codesandbox for the component.
|
78
|
+
* The link URL is based on the example directory name and the standard codesandbox URL for package examples.
|
79
|
+
*/
|
80
|
+
|
81
|
+
|
82
|
+
exports.prepareStory = prepareStory;
|
83
|
+
|
84
|
+
var CodesandboxLink = function CodesandboxLink(_ref) {
|
85
|
+
var exampleDirectory = _ref.exampleDirectory;
|
86
|
+
return /*#__PURE__*/_react.default.createElement("a", {
|
87
|
+
href: "https://codesandbox.io/s/github/carbon-design-system/ibm-cloud-cognitive/tree/main/examples/cloud-cognitive/".concat(exampleDirectory)
|
88
|
+
}, /*#__PURE__*/_react.default.createElement("img", {
|
89
|
+
alt: "Edit on CodeSandbox",
|
90
|
+
src: "https://codesandbox.io/static/img/play-codesandbox.svg"
|
91
|
+
}));
|
92
|
+
};
|
72
93
|
|
73
|
-
exports.
|
94
|
+
exports.CodesandboxLink = CodesandboxLink;
|
95
|
+
CodesandboxLink.propTypes = {
|
96
|
+
/**
|
97
|
+
* directory withing examples codesandbox will be found
|
98
|
+
*/
|
99
|
+
exampleDirectory: _propTypes.default.string
|
100
|
+
};
|
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": "1.0.0
|
4
|
+
"version": "1.0.0",
|
5
5
|
"license": "Apache-2.0",
|
6
6
|
"main": "lib/index.js",
|
7
7
|
"module": "es/index.js",
|
@@ -86,5 +86,5 @@
|
|
86
86
|
"react": "^16.8.6 || ^17.0.1",
|
87
87
|
"react-dom": "^16.8.6 || ^17.0.1"
|
88
88
|
},
|
89
|
-
"gitHead": "
|
89
|
+
"gitHead": "5b7378009e0e2bfcf264d7a0fdfe8293a9f4242e"
|
90
90
|
}
|
@@ -45,12 +45,29 @@ $right-section-alt-width: 100% - $left-section-alt-width;
|
|
45
45
|
background-color: var(--to-color);
|
46
46
|
}
|
47
47
|
}
|
48
|
+
@keyframes background-and-shadow-appear {
|
49
|
+
from {
|
50
|
+
background-color: var(--from-color);
|
51
|
+
box-shadow: 0 1px 0 var(--from-color);
|
52
|
+
}
|
53
|
+
to {
|
54
|
+
background-color: var(--to-color);
|
55
|
+
box-shadow: 0 1px 0 var(--to-color-shadow);
|
56
|
+
}
|
57
|
+
}
|
48
58
|
|
49
|
-
@mixin appearingBackground(
|
59
|
+
@mixin appearingBackground(
|
60
|
+
$with-shadow: false,
|
61
|
+
$from-color: $ui-background,
|
62
|
+
$to-color: $ui-01,
|
63
|
+
$to-color-shadow: $ui-03
|
64
|
+
) {
|
50
65
|
// stylelint-disable-next-line carbon/theme-token-use
|
51
66
|
--from-color: #{$from-color};
|
52
67
|
// stylelint-disable-next-line carbon/theme-token-use
|
53
68
|
--to-color: #{$to-color};
|
69
|
+
// stylelint-disable-next-line carbon/theme-token-use
|
70
|
+
--to-color-shadow: #{$to-color-shadow};
|
54
71
|
|
55
72
|
position: absolute;
|
56
73
|
top: 0;
|
@@ -61,8 +78,13 @@ $right-section-alt-width: 100% - $left-section-alt-width;
|
|
61
78
|
|
62
79
|
// This transitions the background-color between from-color and to-color
|
63
80
|
$duration: 1000ms;
|
64
|
-
|
65
|
-
animation: background-appear
|
81
|
+
|
82
|
+
$animation: background-appear;
|
83
|
+
@if ($with-shadow) {
|
84
|
+
$animation: background-and-shadow-appear;
|
85
|
+
}
|
86
|
+
|
87
|
+
animation: $animation $duration
|
66
88
|
calc((-1 * $duration * var(--#{$block-class}--background-opacity))) linear
|
67
89
|
paused forwards;
|
68
90
|
|
@@ -98,10 +120,9 @@ $right-section-alt-width: 100% - $left-section-alt-width;
|
|
98
120
|
}
|
99
121
|
|
100
122
|
&::before {
|
101
|
-
@include appearingBackground();
|
123
|
+
@include appearingBackground(true);
|
102
124
|
|
103
125
|
z-index: -1;
|
104
|
-
box-shadow: 0 1px 0 $ui-03;
|
105
126
|
}
|
106
127
|
|
107
128
|
.#{$block-class}--width--xl {
|
@@ -465,6 +486,12 @@ $right-section-alt-width: 100% - $left-section-alt-width;
|
|
465
486
|
@include appearingBackground();
|
466
487
|
}
|
467
488
|
|
489
|
+
.#{$block-class}__page-actions-content {
|
490
|
+
position: relative; // ensure appears over ::before
|
491
|
+
width: 100%;
|
492
|
+
height: 100%;
|
493
|
+
}
|
494
|
+
|
468
495
|
.#{$block-class}__title-row .#{$block-class}__page-actions--in-breadcrumb {
|
469
496
|
opacity: 0;
|
470
497
|
visibility: hidden;
|
@@ -489,7 +516,7 @@ $right-section-alt-width: 100% - $left-section-alt-width;
|
|
489
516
|
}
|
490
517
|
|
491
518
|
.#{$block-class}__subtitle {
|
492
|
-
@include carbon--type-style('body-long-
|
519
|
+
@include carbon--type-style('body-long-01');
|
493
520
|
}
|
494
521
|
|
495
522
|
.#{$block-class}__available-row {
|