@carbon/ibm-products 0.99.1 → 1.0.0

package/lib/components/SidePanel/SidePanel.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.deprecatedProps = exports.SidePanel = void 0;
+exports.SidePanel = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -45,8 +45,8 @@ var _iconsReact = require("@carbon/icons-react");
 
 var _ActionSet = require("../ActionSet");
 
-var _excluded = ["actionToolbarButtons", "actions", "animateTitle", "children", "className", "closeIconDescription", "condensedActions", "currentStep", "includeOverlay", "labelText", "navigationBackIconDescription", "onNavigationBack", "onRequestClose", "onUnmount", "open", "pageContentSelector", "placement", "preventCloseOnClickOutside", "selectorPageContent", "selectorPrimaryFocus", "size", "slideIn", "subtitle", "title"],
-    _excluded2 = ["label", "kind", "icon", "leading", "disabled", "className", "onClick", "onActionToolbarButtonClick"];
+var _excluded = ["actionToolbarButtons", "actions", "animateTitle", "children", "className", "closeIconDescription", "condensedActions", "currentStep", "includeOverlay", "labelText", "navigationBackIconDescription", "onNavigationBack", "onRequestClose", "onUnmount", "open", "placement", "preventCloseOnClickOutside", "selectorPageContent", "selectorPrimaryFocus", "size", "slideIn", "subtitle", "title"],
+    _excluded2 = ["label", "kind", "icon", "leading", "disabled", "className", "onClick"];
 
 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); }
 
@@ -81,7 +81,6 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
       onRequestClose = _ref.onRequestClose,
       onUnmount = _ref.onUnmount,
       open = _ref.open,
-      pageContentSelector = _ref.pageContentSelector,
       placement = _ref.placement,
       preventCloseOnClickOutside = _ref.preventCloseOnClickOutside,
       selectorPageContent = _ref.selectorPageContent,
@@ -342,7 +341,7 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
 
   (0, _react.useEffect)(function () {
     if (!open && slideIn) {
-      var pageContentElement = document.querySelector(selectorPageContent || pageContentSelector);
+      var pageContentElement = document.querySelector(selectorPageContent);
 
       if (placement && placement === 'right' && pageContentElement) {
         pageContentElement.style.marginRight = 0;
@@ -350,11 +349,11 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
         pageContentElement.style.marginLeft = 0;
       }
     }
-  }, [open, placement, selectorPageContent, pageContentSelector, slideIn]); // used to set margins of content for slide in panel version
+  }, [open, placement, selectorPageContent, slideIn]); // used to set margins of content for slide in panel version
 
   (0, _react.useEffect)(function () {
     if (shouldRender && slideIn) {
-      var pageContentElement = document.querySelector(selectorPageContent || pageContentSelector);
+      var pageContentElement = document.querySelector(selectorPageContent);
 
       if (placement && placement === 'right' && pageContentElement) {
         pageContentElement.style.marginRight = 0;
@@ -366,7 +365,7 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
         pageContentElement.style.marginLeft = _constants.SIDE_PANEL_SIZES[size];
       }
     }
-  }, [slideIn, selectorPageContent, pageContentSelector, placement, shouldRender, size]); // adds focus trap functionality
+  }, [slideIn, selectorPageContent, placement, shouldRender, size]); // adds focus trap functionality
 
   /* istanbul ignore next */
 
@@ -427,8 +426,7 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
           leading = _ref5.leading,
           disabled = _ref5.disabled,
           className = _ref5.className,
-          _onClick = _ref5.onClick,
-          onActionToolbarButtonClick = _ref5.onActionToolbarButtonClick,
+          onClick = _ref5.onClick,
           rest = (0, _objectWithoutProperties2.default)(_ref5, _excluded2);
       return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, (0, _extends2.default)({}, rest, {
         key: label,
@@ -441,9 +439,7 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
         hasIconOnly: !leading,
         disabled: disabled,
         className: (0, _classnames.default)(["".concat(blockClass, "__action-toolbar-button"), className, (_ref6 = {}, (0, _defineProperty2.default)(_ref6, "".concat(blockClass, "__action-toolbar-icon-only-button"), icon && !leading), (0, _defineProperty2.default)(_ref6, "".concat(blockClass, "__action-toolbar-leading-button"), leading), _ref6)]),
-        onClick: function onClick(event) {
-          return _onClick ? _onClick(event) : onActionToolbarButtonClick && onActionToolbarButtonClick(event);
-        }
+        onClick: onClick
       }), leading && label);
     })));
   };
@@ -511,17 +507,7 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
 
 exports.SidePanel = SidePanel;
 exports.SidePanel = SidePanel = _settings.pkg.checkComponentEnabled(SidePanel, componentName);
-var deprecatedProps = {
-  /**
-   * **Deprecated**
-   *
-   * This is the selector to the element that contains all of the page content that will shrink if the panel is a slide in.
-   * This prop is required when using the `slideIn` variant of the side panel.
-   */
-  pageContentSelector: (0, _propsHelper.deprecateProp)(_propTypes.default.string, 'This prop has been renamed to `selectorPageContent`.')
-};
-exports.deprecatedProps = deprecatedProps;
-SidePanel.propTypes = _objectSpread({
+SidePanel.propTypes = {
   /**
    * Sets the action toolbar buttons
    */
@@ -529,7 +515,6 @@ SidePanel.propTypes = _objectSpread({
     label: _propTypes.default.string,
     leading: _propTypes.default.bool,
     icon: _propTypes.default.object,
-    onActionToolbarButtonClick: (0, _propsHelper.deprecateProp)(_propTypes.default.func, 'This prop will be removed in the future. Please use `onClick` instead'),
     onClick: _propTypes.default.func,
     kind: _propTypes.default.oneOf(['ghost', 'tertiary', 'secondary', 'primary'])
   })),
@@ -637,9 +622,8 @@ SidePanel.propTypes = _objectSpread({
    * This prop is required when using the `slideIn` variant of the side panel.
    */
   selectorPageContent: _propTypes.default.string.isRequired.if(function (_ref7) {
-    var slideIn = _ref7.slideIn,
-        pageContentSelector = _ref7.pageContentSelector;
-    return slideIn && !pageContentSelector;
+    var slideIn = _ref7.slideIn;
+    return slideIn;
   }),
 
   /**
@@ -670,7 +654,7 @@ SidePanel.propTypes = _objectSpread({
     var labelText = _ref8.labelText;
     return labelText;
   })
-}, deprecatedProps);
+};
 SidePanel.defaultProps = {
   animateTitle: true,
   placement: 'right',

package/lib/components/Tearsheet/Tearsheet.js

@@ -60,15 +60,6 @@ exports.Tearsheet = Tearsheet = _settings.pkg.checkComponentEnabled(Tearsheet, c
 
 Tearsheet.displayName = componentName;
 var deprecatedProps = {
-  /**
-   * **Deprecated**
-   *
-   * Prevent the tearsheet from automatically closing (triggering onClose, if
-   * provided, which can be cancelled by returning 'false') if the user clicks
-   * outside it.
-   */
-  preventCloseOnClickOutside: (0, _propsHelper.deprecateProp)(_propTypes.default.bool, 'The tearsheet will close automatically if the user clicks outside it if and only if the tearsheet is passive (no navigation actions)'),
-
   /**
    * **Deprecated**
    *

package/lib/components/Tearsheet/TearsheetNarrow.js

@@ -56,15 +56,6 @@ exports.TearsheetNarrow = TearsheetNarrow = _settings.pkg.checkComponentEnabled(
 
 TearsheetNarrow.displayName = componentName;
 var deprecatedProps = {
-  /**
-   * **Deprecated**
-   *
-   * Prevent the tearsheet from automatically closing (triggering onClose, if
-   * provided, which can be cancelled by returning 'false') if the user clicks
-   * outside it.
-   */
-  preventCloseOnClickOutside: (0, _propsHelper.deprecateProp)(_propTypes.default.bool, 'The tearsheet will close automatically if the user clicks outside it if and only if the tearsheet is passive (no navigation actions)'),
-
   /**
    * **Deprecated**
    *

package/lib/components/Tearsheet/TearsheetShell.js

@@ -27,8 +27,6 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _settings = require("../../settings");
 
-var _propsHelper = require("../../global/js/utils/props-helper");
-
 var _pconsole = _interopRequireDefault(require("../../global/js/utils/pconsole"));
 
 var _carbonComponentsReact = require("carbon-components-react");
@@ -279,15 +277,6 @@ var TearsheetShell = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
 exports.TearsheetShell = TearsheetShell;
 TearsheetShell.displayName = componentName;
 var deprecatedProps = {
-  /**
-   * **Deprecated**
-   *
-   * Prevent the tearsheet from automatically closing (triggering onClose, if
-   * provided, which can be cancelled by returning 'false') if the user clicks
-   * outside it.
-   */
-  preventCloseOnClickOutside: (0, _propsHelper.deprecateProp)(_propTypes.default.bool, 'The tearsheet will close automatically if the user clicks outside it if and only if the tearsheet is passive (no navigation actions)'),
-
   /**
    * **Deprecated**
    *

package/lib/components/UserProfileImage/UserProfileImage.js

@@ -29,7 +29,7 @@ var _carbonComponentsReact = require("carbon-components-react");
 
 var _excluded = ["backgroundColor", "className", "kind", "initials", "image", "imageDescription", "size", "theme", "tooltipText"];
 // The block part of our conventional BEM class names (blockClass__E--M).
-var blockClass = "".concat(_settings.pkg.prefix, "-user-profile-avatar");
+var blockClass = "".concat(_settings.pkg.prefix, "--user-profile-image");
 var componentName = 'UserProfileImage'; // NOTE: the component SCSS is not imported here: it is rolled up separately.
 
 /**

package/lib/components/index.js

@@ -33,12 +33,6 @@ Object.defineProperty(exports, "ComboButtonItem", {
     return _ComboButton.ComboButtonItem;
   }
 });
-Object.defineProperty(exports, "ContextHeader", {
-  enumerable: true,
-  get: function get() {
-    return _ContextHeader.ContextHeader;
-  }
-});
 Object.defineProperty(exports, "CreateFullPage", {
   enumerable: true,
   get: function get() {
@@ -294,8 +288,6 @@ var _Cascade = require("./Cascade");
 
 var _ComboButton = require("./ComboButton");
 
-var _ContextHeader = require("./ContextHeader");
-
 var _CreateFullPage = require("./CreateFullPage");
 
 var _CreateModal = require("./CreateModal");

package/lib/global/js/package-settings.js

@@ -16,7 +16,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 var defaults = {
-  prefix: 'exp',
+  prefix: 'c4p',
   // by default only released components are set to true
   component: {
     // reviewed and released components:
@@ -56,7 +56,6 @@ var defaults = {
     UnauthorizedEmptyState: true,
     UserProfileImage: true,
     // other public components not yet reviewed and released:
-    ContextHeader: false,
     ExampleComponent: false,
     LoadingBar: false,
     ModifiedTabs: false,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "0.99.1",
+  "version": "1.0.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -86,5 +86,5 @@
     "react": "^16.8.6 || ^17.0.1",
     "react-dom": "^16.8.6 || ^17.0.1"
   },
-  "gitHead": "8b951702bbf37ee7ee4e0376ac23966c0bbaeebd"
+  "gitHead": "5b7378009e0e2bfcf264d7a0fdfe8293a9f4242e"
 }

package/scss/components/PageHeader/_page-header.scss

@@ -45,12 +45,29 @@ $right-section-alt-width: 100% - $left-section-alt-width;
     background-color: var(--to-color);
   }
 }
+@keyframes background-and-shadow-appear {
+  from {
+    background-color: var(--from-color);
+    box-shadow: 0 1px 0 var(--from-color);
+  }
+  to {
+    background-color: var(--to-color);
+    box-shadow: 0 1px 0 var(--to-color-shadow);
+  }
+}
 
-@mixin appearingBackground($from-color: $ui-background, $to-color: $ui-01) {
+@mixin appearingBackground(
+  $with-shadow: false,
+  $from-color: $ui-background,
+  $to-color: $ui-01,
+  $to-color-shadow: $ui-03
+) {
   // stylelint-disable-next-line carbon/theme-token-use
   --from-color: #{$from-color};
   // stylelint-disable-next-line carbon/theme-token-use
   --to-color: #{$to-color};
+  // stylelint-disable-next-line carbon/theme-token-use
+  --to-color-shadow: #{$to-color-shadow};
 
   position: absolute;
   top: 0;
@@ -61,8 +78,13 @@ $right-section-alt-width: 100% - $left-section-alt-width;
 
   // This transitions the background-color between from-color and to-color
   $duration: 1000ms;
-  // stylelint-disable-next-line carbon/motion-token-use
-  animation: background-appear $duration
+
+  $animation: background-appear;
+  @if ($with-shadow) {
+    $animation: background-and-shadow-appear;
+  }
+
+  animation: $animation $duration
     calc((-1 * $duration * var(--#{$block-class}--background-opacity))) linear
     paused forwards;
 
@@ -98,10 +120,9 @@ $right-section-alt-width: 100% - $left-section-alt-width;
     }
 
     &::before {
-      @include appearingBackground();
+      @include appearingBackground(true);
 
       z-index: -1;
-      box-shadow: 0 1px 0 $ui-03;
     }
 
     .#{$block-class}--width--xl {

package/scss/components/UserProfileImage/_user-profile-image.scss

@@ -13,7 +13,7 @@
 // TooltipIcon
 @import 'carbon-components/scss/components/tooltip/tooltip';
 
-$block-class: #{$pkg-prefix}-user-profile-avatar;
+$block-class: #{$pkg-prefix}--user-profile-image;
 
 $sizes: (
   xlg: $spacing-10,
@@ -75,7 +75,7 @@ $theme-keys: map-keys($themes);
     text-transform: uppercase;
   }
 
-  .#{$prefix}--tooltip__trigger .#{$pkg-prefix}-user-profile-avatar svg {
+  .#{$prefix}--tooltip__trigger .#{$block-class} svg {
     fill: $ui-01;
   }
 

package/scss/components/_index.scss

@@ -15,7 +15,6 @@
 @import './ButtonMenu/index';
 @import './Cascade/index';
 @import './ComboButton/index';
-@import './ContextHeader/index';
 @import './CreateFullPage/index';
 @import './CreateModal/index';
 @import './CreateSidePanel/index';

package/scss/global/styles/_project-settings.scss

@@ -19,4 +19,4 @@
 $carbon-prefix: $prefix;
 
 // define variables and settings for the package
-$pkg-prefix: 'exp' !default;
+$pkg-prefix: 'c4p' !default;

package/es/components/ContextHeader/ContextHeader.js

@@ -1,46 +0,0 @@
-//
-// Copyright IBM Corp. 2020, 2020
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-import React from 'react';
-import PropTypes from 'prop-types';
-import { pkg } from '../../settings';
-var componentName = 'ContextHeader';
-export var ContextHeader = function ContextHeader(_ref) {
-  var namespace = _ref.namespace,
-      name = _ref.name,
-      task = _ref.task;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "".concat(pkg.prefix, "-context-header")
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "".concat(pkg.prefix, "-context-header--task")
-  }, task), /*#__PURE__*/React.createElement("span", {
-    className: "".concat(pkg.prefix, "-context-header--name")
-  }, name), /*#__PURE__*/React.createElement("span", {
-    className: "".concat(pkg.prefix, "-context-header--separator")
-  }, "|"), /*#__PURE__*/React.createElement("span", {
-    className: "".concat(pkg.prefix, "-context-header--namespace")
-  }, namespace));
-}; // Return a placeholder if not released and not enabled by feature flag
-
-ContextHeader = pkg.checkComponentEnabled(ContextHeader, componentName);
-ContextHeader.displayName = componentName;
-ContextHeader.propTypes = {
-  /**
-   * The name of the current instance.
-   */
-  name: PropTypes.string.isRequired,
-
-  /**
-   * The namespace in which the current instance is deployed.
-   */
-  namespace: PropTypes.string.isRequired,
-
-  /**
-   * The high level task the user is using the embedding UI to carry out.
-   */
-  task: PropTypes.string.isRequired
-};
-export default ContextHeader;

package/es/components/ContextHeader/index.js

@@ -1,7 +0,0 @@
-//
-// Copyright IBM Corp. 2020, 2020
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-export { default as ContextHeader } from './ContextHeader.js';

package/lib/components/ContextHeader/ContextHeader.js

@@ -1,62 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.ContextHeader = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _settings = require("../../settings");
-
-//
-// Copyright IBM Corp. 2020, 2020
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-var componentName = 'ContextHeader';
-
-var ContextHeader = function ContextHeader(_ref) {
-  var namespace = _ref.namespace,
-      name = _ref.name,
-      task = _ref.task;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(_settings.pkg.prefix, "-context-header")
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: "".concat(_settings.pkg.prefix, "-context-header--task")
-  }, task), /*#__PURE__*/_react.default.createElement("span", {
-    className: "".concat(_settings.pkg.prefix, "-context-header--name")
-  }, name), /*#__PURE__*/_react.default.createElement("span", {
-    className: "".concat(_settings.pkg.prefix, "-context-header--separator")
-  }, "|"), /*#__PURE__*/_react.default.createElement("span", {
-    className: "".concat(_settings.pkg.prefix, "-context-header--namespace")
-  }, namespace));
-}; // Return a placeholder if not released and not enabled by feature flag
-
-
-exports.ContextHeader = ContextHeader;
-exports.ContextHeader = ContextHeader = _settings.pkg.checkComponentEnabled(ContextHeader, componentName);
-ContextHeader.displayName = componentName;
-ContextHeader.propTypes = {
-  /**
-   * The name of the current instance.
-   */
-  name: _propTypes.default.string.isRequired,
-
-  /**
-   * The namespace in which the current instance is deployed.
-   */
-  namespace: _propTypes.default.string.isRequired,
-
-  /**
-   * The high level task the user is using the embedding UI to carry out.
-   */
-  task: _propTypes.default.string.isRequired
-};
-var _default = ContextHeader;
-exports.default = _default;

package/lib/components/ContextHeader/index.js

@@ -1,15 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "ContextHeader", {
-  enumerable: true,
-  get: function get() {
-    return _ContextHeader.default;
-  }
-});
-
-var _ContextHeader = _interopRequireDefault(require("./ContextHeader.js"));

package/scss/components/ContextHeader/_context-header.scss

@@ -1,43 +0,0 @@
-//
-// Copyright IBM Corp. 2020, 2020
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-// Standard imports.
-@import '../../global/styles/project-settings';
-
-.#{$pkg-prefix}-context-header {
-  display: flex;
-  width: 100%;
-  height: $spacing-07;
-  padding: 0 $spacing-05;
-  border-bottom: carbon--mini-units(0.125) solid $ui-03;
-  background: $ui-background;
-}
-
-.#{$pkg-prefix}-context-header--task,
-.#{$pkg-prefix}-context-header--name,
-.#{$pkg-prefix}-context-header--namespace,
-.#{$pkg-prefix}-context-header--separator {
-  @include carbon--type-style('label-01');
-
-  display: inline-flex;
-  align-items: center;
-}
-
-.#{$pkg-prefix}-context-header--task {
-  padding-right: $spacing-05;
-  color: $text-01;
-}
-
-.#{$pkg-prefix}-context-header--name,
-.#{$pkg-prefix}-context-header--namespace,
-.#{$pkg-prefix}-context-header--separator {
-  color: $text-02;
-}
-
-.#{$pkg-prefix}-context-header--separator {
-  padding: 0 $spacing-03;
-}

package/scss/components/ContextHeader/_index.scss

@@ -1,8 +0,0 @@
-//
-// Copyright IBM Corp. 2020, 2020
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import './context-header.scss';