@carbon/ibm-products 1.27.0 → 2.0.0-rc.2

package/lib/components/WebTerminal/WebTerminal.js

@@ -27,7 +27,7 @@ var _settings = require("../../settings");
 
 var _iconsReact = require("@carbon/icons-react");
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _motion = require("@carbon/motion");
 
@@ -139,32 +139,41 @@ var WebTerminal = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     className: "".concat(blockClass, "__bar")
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__actions")
-  }, showDocumentationLinks && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.OverflowMenu, {
-    renderIcon: _iconsReact.Help16,
+  }, showDocumentationLinks && /*#__PURE__*/_react.default.createElement(_react2.OverflowMenu, {
+    renderIcon: function renderIcon(props) {
+      return /*#__PURE__*/_react.default.createElement(_iconsReact.Help, (0, _extends2.default)({
+        size: 16
+      }, props));
+    },
     iconDescription: documentationLinksIconDescription,
     ariaLabel: documentationLinksIconDescription,
     menuOptionsClass: "".concat(blockClass, "__documentation-overflow"),
     size: "lg"
   }, documentationLinks.map(function (_ref4, i) {
     var rest = (0, _extends2.default)({}, _ref4);
-    return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.OverflowMenuItem, (0, _extends2.default)({
+    return /*#__PURE__*/_react.default.createElement(_react2.OverflowMenuItem, (0, _extends2.default)({
       key: i
     }, rest));
   })), actions.map(function (_ref5) {
     var renderIcon = _ref5.renderIcon,
         onClick = _ref5.onClick,
         iconDescription = _ref5.iconDescription;
-    return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
+    return /*#__PURE__*/_react.default.createElement(_react2.Button, {
       key: iconDescription,
       hasIconOnly: true,
       renderIcon: renderIcon,
       onClick: onClick,
       iconDescription: iconDescription,
-      kind: "ghost"
+      kind: "ghost",
+      "aria-label": iconDescription
     });
-  })), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
+  })), /*#__PURE__*/_react.default.createElement(_react2.Button, {
     hasIconOnly: true,
-    renderIcon: _iconsReact.Close16,
+    renderIcon: function renderIcon(props) {
+      return /*#__PURE__*/_react.default.createElement(_iconsReact.Close, (0, _extends2.default)({
+        size: 16
+      }, props));
+    },
     kind: "ghost",
     iconDescription: closeIconDescription,
     onClick: handleCloseTerminal,
@@ -190,7 +199,7 @@ WebTerminal.propTypes = {
    * An array of actions to be displayed in the web terminal header bar
    */
   actions: _propTypes.default.arrayOf(_propTypes.default.shape({
-    renderIcon: _propTypes.default.object.isRequired,
+    renderIcon: _propTypes.default.func.isRequired,
     onClick: _propTypes.default.func.isRequired,
     iconDescription: _propTypes.default.string.isRequired
   })),
@@ -213,7 +222,7 @@ WebTerminal.propTypes = {
   /**
    * Array of objects for each documentation link. Each documentation link uses the prop types of OverflowMenuItems. See more: https://react.carbondesignsystem.com/?path=/docs/components-overflowmenu--default
    */
-  documentationLinks: _propTypes.default.arrayOf(_propTypes.default.shape(_objectSpread({}, _carbonComponentsReact.OverflowMenuItem.propTypes))),
+  documentationLinks: _propTypes.default.arrayOf(_propTypes.default.shape(_objectSpread({}, _react2.OverflowMenuItem.propTypes))),
 
   /**
    * Description for the documentation link overflow menu tooltip

package/lib/components/WebTerminal/preview-components/Navigation.js

@@ -9,7 +9,7 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _iconsReact = require("@carbon/icons-react");
 
@@ -25,21 +25,27 @@ var Navigation = function Navigation() {
   var _useWebTerminal = (0, _hooks.useWebTerminal)(),
       openWebTerminal = _useWebTerminal.openWebTerminal;
 
-  return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Header, {
+  return /*#__PURE__*/_react.default.createElement(_react2.Header, {
     "aria-label": "IBM Platform Name"
-  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.HeaderName, {
+  }, /*#__PURE__*/_react.default.createElement(_react2.HeaderName, {
     href: "#",
     prefix: "IBM"
-  }, "[Platform]"), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.HeaderGlobalBar, null, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.HeaderGlobalAction, {
+  }, "[Platform]"), /*#__PURE__*/_react.default.createElement(_react2.HeaderGlobalBar, null, /*#__PURE__*/_react.default.createElement(_react2.HeaderGlobalAction, {
     "aria-label": "Web terminal",
     onClick: openWebTerminal
-  }, /*#__PURE__*/_react.default.createElement(_iconsReact.Terminal20, null)), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.HeaderGlobalAction, {
+  }, /*#__PURE__*/_react.default.createElement(_iconsReact.Terminal, {
+    size: 20
+  })), /*#__PURE__*/_react.default.createElement(_react2.HeaderGlobalAction, {
     "aria-label": "Search",
     onClick: function onClick() {}
-  }, /*#__PURE__*/_react.default.createElement(_iconsReact.Search20, null)), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.HeaderGlobalAction, {
+  }, /*#__PURE__*/_react.default.createElement(_iconsReact.Search, {
+    size: 20
+  })), /*#__PURE__*/_react.default.createElement(_react2.HeaderGlobalAction, {
     "aria-label": "User",
     onClick: function onClick() {}
-  }, /*#__PURE__*/_react.default.createElement(_iconsReact.User20, null))));
+  }, /*#__PURE__*/_react.default.createElement(_iconsReact.User, {
+    size: 20
+  }))));
 };
 
 var _default = Navigation;

package/lib/components/_Canary/Canary.js

@@ -19,7 +19,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _packageSettings = _interopRequireDefault(require("../../global/js/package-settings"));
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _excluded = ["className", "componentName"];
 // The block part of our conventional BEM class names (blockClass__E--M).
@@ -37,7 +37,7 @@ var Canary = function Canary(_ref
   var instructions = "\nimport { pkg } from '@carbon/ibm-products';\n// NOTE: must happen before component is first used\npkg.component.".concat(componentName, " = true;\n");
   return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
     className: (0, _classnames.default)(blockClass, className)
-  }), /*#__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, {
+  }), /*#__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(_react2.CodeSnippet, {
     type: "multi"
   }, instructions), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("p", null, "View a live example on", ' ', /*#__PURE__*/_react.default.createElement("a", {
     href: "https://codesandbox.io/s/example-component-olif5?file=/src/config.js"

package/lib/global/js/utils/test-helper.js

@@ -64,7 +64,8 @@ var scssCompile = function scssCompile(file) {
     // When the sass API is revised it may be feasible to switch back to
     // using the API for SCSS compilation and checking.
     execFileSync('sass', [compressed ? '--style=compressed' : '--style=expanded', '--no-source-map', '--load-path', loadPath1, '--load-path', loadPath2, file], {
-      stdio: ['ignore', 'pipe', 'pipe']
+      stdio: ['ignore', 'pipe', 'pipe'],
+      maxBuffer: 1024 * 1024 * 1.5
     }).toString()
   );
 };

package/lib/settings.js

@@ -11,25 +11,16 @@ var _Canary = require("./components/_Canary");
 
 var _packageSettings = _interopRequireDefault(require("./global/js/package-settings"));
 
-var _carbonComponents = require("carbon-components");
-
 var _react = _interopRequireDefault(require("react"));
 
 var _themes = require("@carbon/themes");
 
 var carbon = {
-  get prefix() {
-    return _carbonComponents.settings.prefix;
-  },
-
-  set prefix(val) {
-    _carbonComponents.settings.prefix = val;
-  },
-
   get themes() {
     return _themes.themes;
-  }
+  },
 
+  prefix: 'cds'
 }; // Check that a component is enabled. This function returns a stub which checks
 // the component status on first use and then renders as the component or as
 // a Canary placeholder initialized with the name of the replaced component.

package/package.json

@@ -1,10 +1,13 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "1.27.0",
+  "version": "2.0.0-rc.2",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
+  "installConfig": {
+    "hoistingLimits": "none"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/carbon-design-system/ibm-cloud-cognitive.git",
@@ -71,7 +74,13 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.9",
+    "@carbon/grid": "^11.3.0",
+    "@carbon/layout": "^11.3.0",
+    "@carbon/motion": "^11.2.0",
+    "@carbon/react": "^1.9.0-rc.0",
     "@carbon/telemetry": "^0.1.0",
+    "@carbon/themes": "^11.4.0",
+    "@carbon/type": "^11.4.0",
     "immutability-helper": "^3.1.1",
     "react-dnd": "^15.1.2",
     "react-dnd-html5-backend": "^15.1.3",
@@ -80,18 +89,8 @@
     "react-window": "^1.8.7"
   },
   "peerDependencies": {
-    "@carbon/colors": "^10.37.1",
-    "@carbon/icons-react": "^10.49.0",
-    "@carbon/import-once": "^10.7.0",
-    "@carbon/layout": "^10.37.1",
-    "@carbon/motion": "^10.29.0",
-    "@carbon/themes": "^10.54.0",
-    "@carbon/type": "^10.44.0",
-    "carbon-components": "^10.57.2",
-    "carbon-components-react": "^7.57.4",
-    "carbon-icons": "^7.0.7",
     "react": "^16.8.6 || ^17.0.1",
     "react-dom": "^16.8.6 || ^17.0.1"
   },
-  "gitHead": "83988f0190d38209fe2fe64539e9aab021a46f8d"
+  "gitHead": "9f9114881d1ed7ebb8f8f6799ec7e4aa27f11b3c"
 }

package/scss/components/APIKeyModal/_api-key-modal.scss

@@ -1,63 +1,52 @@
 //
-// Copyright IBM Corp. 2021, 2021
+// Copyright IBM Corp. 2021, 2022
 //
 // 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';
-
-// APIKeyModal uses the following Carbon components:
-// ComposedModal, ModalHeader, ModalFooter, ModalBody, TextInput,
-// InlineLoading, Form, Button
-@import 'carbon-components/scss/components/modal/modal';
-@import 'carbon-components/scss/components/text-input/text-input';
-@import 'carbon-components/scss/components/inline-loading/inline-loading';
-@import 'carbon-components/scss/components/form/form';
-@import 'carbon-components/scss/components/button/button';
-
-@mixin apikey-modal {
-  $block-class: #{$pkg-prefix}--apikey-modal;
-
-  .#{$block-class} .#{$carbon-prefix}--modal-close {
-    display: none;
-  }
-
-  .#{$block-class} .#{$carbon-prefix}--inline-loading {
-    min-height: 3rem; // increasing the height from 2 to 3 resolves an issue where the scroll bar bounces
-  }
-
-  .#{$block-class} .#{$carbon-prefix}--modal-content {
-    padding-right: $spacing-05;
-  }
-
-  .#{$block-class}__body {
-    padding-right: calc(20% - #{$spacing-05});
-    margin-bottom: $spacing-05;
-  }
-
-  .#{$block-class}__messaging {
-    display: flex;
-    padding-right: calc(20% - #{$spacing-05});
-    margin-top: $spacing-03;
-  }
-
-  .#{$block-class}__messaging-text {
-    flex: 1;
-    margin-left: $spacing-03;
-    @include carbon--type-style('label-01');
-  }
-
-  .#{$block-class}__messaging-text > * {
-    font: inherit;
-  }
-
-  .#{$block-class}__error-icon svg {
-    fill: $danger-01;
-  }
-}
-
-@include exports('apikey-modal') {
-  @include apikey-modal;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/components/button/tokens' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/type';
+@use '../../global/styles/project-settings' as c4p-settings;
+
+$block-class: #{c4p-settings.$pkg-prefix}--apikey-modal;
+
+.#{$block-class} .#{c4p-settings.$carbon-prefix}--modal-close {
+  display: none;
+}
+
+.#{$block-class} .#{c4p-settings.$carbon-prefix}--inline-loading {
+  min-height: 3rem; // increasing the height from 2 to 3 resolves an issue where the scroll bar bounces
+}
+
+.#{$block-class} .#{c4p-settings.$carbon-prefix}--modal-content {
+  padding-right: $spacing-05;
+}
+
+.#{$block-class}__body {
+  padding-right: calc(20% - #{$spacing-05});
+  margin-bottom: $spacing-05;
+}
+
+.#{$block-class}__messaging {
+  display: flex;
+  padding-right: calc(20% - #{$spacing-05});
+  margin-top: $spacing-03;
+}
+
+.#{$block-class}__messaging-text {
+  flex: 1;
+  margin-left: $spacing-03;
+  @include type.type-style('label-01');
+}
+
+.#{$block-class}__messaging-text > * {
+  font: inherit;
+}
+
+.#{$block-class}__error-icon svg {
+  fill: $button-danger-primary;
 }

package/scss/components/APIKeyModal/_carbon-imports.scss

@@ -0,0 +1,15 @@
+//
+// Copyright IBM Corp. 2022, 2022
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+// APIKeyModal uses the following Carbon components:
+// ComposedModal, ModalHeader, ModalFooter, ModalBody, TextInput,
+// InlineLoading, Form, Button
+@use '@carbon/react/scss/components/modal';
+@use '@carbon/react/scss/components/text-input';
+@use '@carbon/react/scss/components/inline-loading';
+@use '@carbon/react/scss/components/form';
+@use '@carbon/react/scss/components/button';

package/scss/components/APIKeyModal/_index-with-carbon.scss

@@ -0,0 +1,9 @@
+//
+// Copyright IBM Corp. 2021, 2021
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use './carbon-imports';
+@use './api-key-modal';

package/scss/components/APIKeyModal/_index.scss

@@ -7,4 +7,4 @@
 
 // An index file is most useful when you have multiple components
 
-@import './api-key-modal';
+@use './api-key-modal';

package/scss/components/APIKeyModal/_storybook-styles.scss

@@ -5,29 +5,31 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import '../../global/styles/project-settings';
+@use '../../global/styles/project-settings' as c4p-settings;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/spacing' as *;
 
-$block-class: #{$pkg-prefix}--apikey-modal;
+$block-class: #{c4p-settings.$pkg-prefix}--apikey-modal;
 
-.#{$block-class} .#{$carbon-prefix}--radio-button-wrapper {
+.#{$block-class} .#{c4p-settings.$carbon-prefix}--radio-button-wrapper {
   margin-bottom: $spacing-02;
 }
 
-.#{$block-class}__permissions.#{$carbon-prefix}--fieldset {
+.#{$block-class}__permissions.#{c4p-settings.$carbon-prefix}--fieldset {
   margin-top: $spacing-05;
   margin-bottom: 0;
 }
 
-.#{$block-class}__resource-toggle.#{$carbon-prefix}--fieldset {
+.#{$block-class}__resource-toggle.#{c4p-settings.$carbon-prefix}--fieldset {
   margin-top: 0;
   margin-bottom: $spacing-05;
 }
 
-.#{$block-class}__resource-name.#{$carbon-prefix}--fieldset {
+.#{$block-class}__resource-name.#{c4p-settings.$carbon-prefix}--fieldset {
   margin-top: 0;
   margin-bottom: 0;
 }
 
-.#{$block-class}__button-loading.#{$carbon-prefix}--btn--primary {
-  background: $link-02;
+.#{$block-class}__button-loading.#{c4p-settings.$carbon-prefix}--btn--primary {
+  background: $link-secondary;
 }