@carbon/ibm-products 1.0.0-rc.1 → 1.1.0

package/lib/settings.js

@@ -0,0 +1,92 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.pkg = exports.carbon = void 0;
+
+var _Canary = require("./components/_Canary");
+
+var _featureFlags = _interopRequireDefault(require("./generated/feature-flags/feature-flags"));
+
+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 flags() {
+    return _featureFlags.default;
+  },
+
+  get themes() {
+    return _themes.themes;
+  }
+
+}; // 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.
+// Note that the returned stub carries any other properties which had already
+// been assigned (eg propTypes, displayName, etc).
+
+exports.carbon = carbon;
+
+_packageSettings.default.checkComponentEnabled = function (component, name) {
+  if (component.render) {
+    // The component is a forward-ref, so make a stub forward-ref.
+    var forward = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+      return (// Replace the stub's render fn so this test only happens once.
+        (forward.render = _packageSettings.default.isComponentEnabled(name) || !_packageSettings.default.isComponentPublic(name) ? // If the component is enabled, or if it's not a public component,
+        // replace the stub's render fn with the component's render fn.
+        component.render : // Note that Canary is a direct render fn (not a forward-ref) and
+        // will ignore the passed props and ref (if any)
+        _Canary.Canary.bind(undefined, {
+          componentName: name
+        }))( // Call it now (after this it will be directly called).
+        props, ref)
+      );
+    }); // Transfer object properties already assigned (eg propTypes, displayName)
+    // then merge in the stub forward-ref which checks the component status
+    // when first used.
+
+
+    return Object.assign({}, component, forward);
+  } else {
+    // The component is a direct render fn, so make a stub render fn.
+    var _render = function render(props) {
+      return (// Replace the stub render fn so this test only happens once.
+        (_render = _packageSettings.default.isComponentEnabled(name) || !_packageSettings.default.isComponentPublic(name) ? // If the component is enabled, or if it's not a public component,
+        // replace the stub render fn with the component render fn.
+        component : // Replace the stub render fn with the Canary render fn, which will
+        // ignore the passed props.
+        _Canary.Canary.bind(undefined, {
+          componentName: name
+        }))( // Call it now (after this it will be directly called).
+        props)
+      );
+    }; // Transfer object properties already assigned (eg propTypes, displayName)
+    // to a function which calls the stub render fn which checks the component
+    // status when first used.
+
+
+    return Object.assign(function (props) {
+      return _render(props);
+    }, component);
+  }
+};
+
+var pkg = _packageSettings.default;
+exports.pkg = pkg;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "1.0.0-rc.1",
+  "version": "1.1.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -52,7 +52,7 @@
   "devDependencies": {
     "@babel/cli": "^7.16.0",
     "@babel/core": "^7.16.0",
-    "babel-preset-ibm-cloud-cognitive": "^0.13.0",
+    "babel-preset-ibm-cloud-cognitive": "^0.14.0",
     "chalk": "^4.1.2",
     "change-case": "^4.1.2",
     "copyfiles": "^2.4.1",
@@ -60,11 +60,11 @@
     "fs-extra": "^10.0.0",
     "glob": "^7.2.0",
     "jest": "^27.3.1",
-    "jest-config-ibm-cloud-cognitive": "^0.21.0",
+    "jest-config-ibm-cloud-cognitive": "^0.23.0",
     "npm-check-updates": "^12.0.2",
     "npm-run-all": "^4.1.5",
     "rimraf": "^3.0.2",
-    "sass": "^1.43.4",
+    "sass": "^1.43.5",
     "yargs": "^17.2.1"
   },
   "dependencies": {
@@ -86,5 +86,5 @@
     "react": "^16.8.6 || ^17.0.1",
     "react-dom": "^16.8.6 || ^17.0.1"
   },
-  "gitHead": "6257ad7473f1d274deb0d0e710a3b6dc5eca5b68"
+  "gitHead": "8f28bbdcb86f4ef6dcb75058bde4a8c340ce8048"
 }

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

@@ -0,0 +1,63 @@
+//
+// 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.
+//
+
+// 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;
+}

package/scss/components/APIKeyModal/_index.scss

@@ -0,0 +1,10 @@
+//
+// 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.
+//
+
+// An index file is most useful when you have multiple components
+
+@import './api-key-modal';

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

@@ -0,0 +1,33 @@
+//
+// 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.
+//
+
+@import '../../global/styles/project-settings';
+
+$block-class: #{$pkg-prefix}--apikey-modal;
+
+.#{$block-class} .#{$carbon-prefix}--radio-button-wrapper {
+  margin-bottom: $spacing-02;
+}
+
+.#{$block-class}__permissions.#{$carbon-prefix}--fieldset {
+  margin-top: $spacing-05;
+  margin-bottom: 0;
+}
+
+.#{$block-class}__resource-toggle.#{$carbon-prefix}--fieldset {
+  margin-top: 0;
+  margin-bottom: $spacing-05;
+}
+
+.#{$block-class}__resource-name.#{$carbon-prefix}--fieldset {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.#{$block-class}__button-loading.#{$carbon-prefix}--btn--primary {
+  background: $link-02;
+}

package/scss/components/AboutModal/_about-modal.scss

@@ -0,0 +1,116 @@
+//
+// Copyright IBM Corp. 2020, 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.
+//
+
+// Standard imports.
+@import '../../global/styles/project-settings';
+
+// AboutModal uses the following Carbon components:
+// ComposedModal, ModalHeader, ModalFooter, ModalBody, Tabs, Tab
+@import 'carbon-components/scss/components/modal/modal';
+@import 'carbon-components/scss/components/tabs/tabs';
+
+// Define all component styles in a mixin which is then exported using
+// the Carbon import-once mechanism.
+@mixin about-modal {
+  // The block part of our conventional BEM class names (blockClass__E--M).
+  $block-class: #{$pkg-prefix}--about-modal;
+
+  .#{$block-class} .bx--modal-container {
+    grid-template-rows: auto auto 1fr auto;
+  }
+
+  .#{$block-class} .#{$block-class}__logo {
+    margin: $spacing-05;
+  }
+
+  .#{$block-class} .#{$block-class}__header {
+    padding: 0 20% $spacing-03 $spacing-05;
+    margin-bottom: 0;
+    grid-row: auto;
+  }
+
+  .#{$block-class} .#{$block-class}__title {
+    @include carbon--type-style('productive-heading-04');
+
+    color: $text-01;
+  }
+
+  .#{$block-class} .#{$block-class}__body {
+    @include carbon--type-style('body-short-02');
+
+    min-height: $layout-05;
+    padding: 0 20% 0 $spacing-05;
+    grid-row: auto;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+
+  .#{$block-class}.#{$block-class}--with-tabs .#{$block-class}__body {
+    min-height: calc(#{$layout-05} + #{$spacing-08});
+    // stylelint-disable-next-line carbon/layout-token-use
+    margin-bottom: calc(#{$spacing-09} + #{$spacing-08});
+  }
+
+  .#{$block-class}.#{$block-class}--with-tabs
+    .bx--modal-content--overflow-indicator {
+    // stylelint-disable-next-line carbon/layout-token-use
+    bottom: calc(#{$spacing-09} + #{$spacing-08});
+  }
+
+  .#{$block-class} .#{$block-class}__links-container {
+    margin-top: $spacing-05;
+  }
+
+  .#{$block-class} .#{$block-class}__links-container a + a {
+    padding-left: $spacing-03;
+    border-left: 1px solid $text-01;
+    margin-left: $spacing-03;
+  }
+
+  .#{$block-class} .#{$block-class}__legal-text,
+  .#{$block-class} .#{$block-class}__copyright-text {
+    margin-top: $spacing-07;
+    margin-bottom: 0;
+    color: $text-02;
+  }
+
+  .#{$block-class} .#{$block-class}__copyright-text {
+    margin-top: $spacing-05;
+  }
+
+  .#{$block-class} .#{$block-class}__footer {
+    position: relative;
+    height: rem(72px);
+    flex-direction: column;
+    justify-content: center;
+    background-color: $inverse-02;
+    color: $inverse-01;
+  }
+
+  .#{$block-class} .#{$block-class}__tab-container {
+    position: absolute;
+    bottom: 100%;
+  }
+
+  .#{$block-class} .#{$block-class}__version-label,
+  .#{$block-class} .#{$block-class}__version-number {
+    @include carbon--type-style('body-short-01');
+
+    padding-left: $spacing-05;
+    margin-top: 0;
+    margin-bottom: 0;
+    color: $inverse-01;
+  }
+
+  .#{$block-class} .#{$block-class}__version-label {
+    @include carbon--font-weight('semibold');
+  }
+}
+
+@include exports('about-modal') {
+  @include about-modal;
+}

package/scss/components/AboutModal/_index.scss

@@ -0,0 +1,8 @@
+//
+// Copyright IBM Corp. 2020, 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.
+//
+
+@import './about-modal';

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

@@ -0,0 +1,15 @@
+//
+// Copyright IBM Corp. 2020, 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.
+//
+
+@import '../../global/styles/project-settings';
+
+.about-modal-stories--tech-logo {
+  width: 2.25rem;
+  height: 2.25rem;
+  margin-right: $spacing-05;
+  object-fit: contain;
+}

package/scss/components/ActionBar/_action-bar.scss

@@ -0,0 +1,67 @@
+//
+// Copyright IBM Corp. 2020, 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.
+//
+
+// Standard imports.
+@import '../../global/styles/project-settings';
+@import '../../global/styles/mixins';
+
+// ActionBar uses the following Carbon components:
+// Button, OverflowMenu, OverflowMenuItem
+@import 'carbon-components/scss/components/button/button';
+@import 'carbon-components/scss/components/overflow-menu/overflow-menu';
+
+// Define all component styles in a mixin which is then exported using
+// the Carbon import-once mechanism.
+@mixin action-bar {
+  $block-class: #{$pkg-prefix}--action-bar;
+  $block-class-overflow-items: #{$block-class}-overflow-items;
+
+  @include block-wrap($block-class) {
+    &.#{$block-class} {
+      display: block;
+    }
+
+    .#{$block-class}__displayed-items {
+      display: inline-flex;
+      width: 100%;
+      white-space: nowrap;
+    }
+
+    .#{$block-class}__displayed-items--right {
+      justify-content: flex-end;
+    }
+
+    .#{$block-class-overflow-items} {
+      display: inline-block;
+    }
+
+    .#{$block-class}__hidden-sizing-items {
+      // This breadcrumb container is used to measure the width of all displayable breadcrumbs
+      @include measuring-container;
+    }
+  }
+
+  @include block-wrap($block-class-overflow-items + '__options') {
+    .#{$block-class-overflow-items}__item {
+      padding: 0 $spacing-03;
+    }
+
+    .#{$block-class-overflow-items}__item-content {
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+    }
+
+    .#{$block-class-overflow-items}__item svg {
+      margin: 0 $spacing-02;
+    }
+  }
+}
+
+@include exports('action-bar') {
+  @include action-bar;
+}

package/scss/components/ActionBar/_index.scss

@@ -0,0 +1,8 @@
+//
+// Copyright IBM Corp. 2020, 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.
+//
+
+@import './action-bar';

package/scss/components/ActionSet/_action-set.scss

@@ -0,0 +1,114 @@
+//
+// 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.
+//
+
+@import '../../global/styles/project-settings';
+
+@import 'carbon-components/scss/components/button/button';
+@import 'carbon-components/scss/components/inline-loading/inline-loading';
+
+// Define all component styles in a mixin which is then exported using
+// the Carbon import-once mechanism.
+@mixin action-set {
+  // The block part of our conventional BEM class names (blockClass__E--M).
+  $block-class: #{$pkg-prefix}--action-set;
+
+  .#{$block-class} {
+    align-items: stretch;
+    justify-content: flex-end;
+    background-color: $ui-01;
+  }
+
+  .#{$block-class} .#{$block-class}__action-button {
+    @include carbon--type-style('body-short-01');
+
+    height: $spacing-10;
+    align-items: center;
+    padding-top: $spacing-05;
+    padding-bottom: $spacing-07;
+    margin: 0;
+  }
+
+  .#{$block-class}.#{$carbon-prefix}--btn-set
+    .#{$block-class}__action-button.#{$carbon-prefix}--btn.#{$carbon-prefix}--btn--expressive {
+    max-width: none;
+  }
+
+  .#{$block-class}:not(.#{$block-class}--stacking)
+    .#{$block-class}__action-button--ghost {
+    padding-left: $spacing-07;
+  }
+
+  // For row-single in medium,
+  // or for ghosts in row-single,
+  // buttons are 100% width
+  .#{$block-class}.#{$block-class}--row-single.#{$block-class}--md
+    .#{$block-class}__action-button,
+  .#{$block-class}.#{$block-class}--row-single
+    .#{$block-class}__action-button--ghost {
+    flex: 0 0 100%;
+  }
+
+  // For ghosts in row-double,
+  // buttons are 75% width and expand to use any remaining space
+  .#{$block-class}.#{$block-class}--row-double
+    .#{$block-class}__action-button--ghost {
+    flex: 1 1 75%;
+  }
+
+  // For row-single in large (non-ghost),
+  // or row-double in medium or large,
+  // buttons are 50% width
+  .#{$block-class}.#{$block-class}--row-single.#{$block-class}--lg
+    .#{$block-class}__action-button:not(.#{$block-class}__action-button--ghost),
+  .#{$block-class}.#{$block-class}--row-double.#{$block-class}--md
+    .#{$block-class}__action-button,
+  .#{$block-class}.#{$block-class}--row-double.#{$block-class}--lg
+    .#{$block-class}__action-button,
+  .#{$block-class}.#{$block-class}--row-triple
+    .#{$block-class}__action-button--ghost {
+    flex: 0 1 50%;
+  }
+
+  // For ghosts in row-triple,
+  // buttons are 50% width and expand to use any remaining space
+  .#{$block-class}.#{$block-class}--row-triple
+    .#{$block-class}__action-button--ghost {
+    flex: 1 1 50%;
+  }
+
+  // For row-triple in large (non-ghost),
+  // or any non-ghosts in extra large or max,
+  // or row-quadruple (non-ghost),
+  // buttons are 25% width with a max of 232px
+  .#{$block-class}.#{$carbon-prefix}--btn-set.#{$block-class}--row-triple.#{$block-class}--lg
+    .#{$block-class}__action-button:not(.#{$block-class}__action-button--ghost),
+  .#{$block-class}.#{$carbon-prefix}--btn-set.#{$block-class}--xlg
+    .#{$block-class}__action-button:not(.#{$block-class}__action-button--ghost),
+  .#{$block-class}.#{$carbon-prefix}--btn-set.#{$block-class}--max
+    .#{$block-class}__action-button:not(.#{$block-class}__action-button--ghost),
+  .#{$block-class}.#{$carbon-prefix}--btn-set.#{$block-class}--row-quadruple
+    .#{$block-class}__action-button:not(.#{$block-class}__action-button--ghost) {
+    max-width: rem(232px);
+    flex: 0 1 25%;
+  }
+
+  .#{$block-class}.#{$carbon-prefix}--btn-set.#{$block-class}--row-quadruple
+    .#{$block-class}__action-button--ghost {
+    flex: 1 1 25%;
+  }
+
+  .#{$block-class} .#{$block-class}__action-button .bx--inline-loading {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: $spacing-07;
+  }
+}
+
+@include exports('action-set') {
+  @include action-set;
+}

package/scss/components/ActionSet/_index.scss

@@ -0,0 +1,8 @@
+//
+// 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.
+//
+
+@import './action-set';

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

@@ -0,0 +1,38 @@
+//
+// 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.
+//
+
+@import '../../global/styles/project-settings';
+
+$block-class: #{$pkg-prefix}--action-set;
+
+.#{$block-class}__story-container {
+  width: 96vw;
+  min-height: 3rem;
+  border: 1px solid $decorative-01;
+  margin: $spacing-04 auto 0;
+  box-shadow: 0 0 10px 5px $ui-04;
+}
+
+.#{$block-class}__story-container--xlg {
+  width: 75vw;
+}
+
+.#{$block-class}__story-container--lg {
+  width: 60vw;
+}
+
+.#{$block-class}__story-container--md {
+  width: 45vw;
+}
+
+.#{$block-class}__story-container--sm {
+  width: 30vw;
+}
+
+.#{$block-class}__story-container--xs {
+  width: 25vw;
+}