@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.
@@ -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
- actionBarOverflowLabel = _ref8.actionBarOverflowLabel;
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
- breadcrumbItems = _ref9.breadcrumbItems;
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-cloud-cognitive';\n// NOTE: must happen before component is first used\npkg.component.".concat(componentName, " = true;\n");
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
- actionBarOverflowLabel = _ref8.actionBarOverflowLabel;
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
- breadcrumbItems = _ref9.breadcrumbItems;
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-cloud-cognitive';\n// NOTE: must happen before component is first used\npkg.component.".concat(componentName, " = true;\n");
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.prepareStory = prepareStory;
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-rc.2",
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": "c3983ff27a76cc490c04e2901b254f9996800cb2"
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($from-color: $ui-background, $to-color: $ui-01) {
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
- // stylelint-disable-next-line carbon/motion-token-use
65
- animation: background-appear $duration
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-02');
519
+ @include carbon--type-style('body-long-01');
493
520
  }
494
521
 
495
522
  .#{$block-class}__available-row {