@carbon/ibm-products 1.55.1 → 1.56.0

package/lib/components/index.js

@@ -21,6 +21,48 @@ Object.defineProperty(exports, "Cascade", {
     return _Cascade.Cascade;
   }
 });
+Object.defineProperty(exports, "Coachmark", {
+  enumerable: true,
+  get: function get() {
+    return _Coachmark.Coachmark;
+  }
+});
+Object.defineProperty(exports, "CoachmarkBeacon", {
+  enumerable: true,
+  get: function get() {
+    return _CoachmarkBeacon.CoachmarkBeacon;
+  }
+});
+Object.defineProperty(exports, "CoachmarkButton", {
+  enumerable: true,
+  get: function get() {
+    return _CoachmarkButton.CoachmarkButton;
+  }
+});
+Object.defineProperty(exports, "CoachmarkFixed", {
+  enumerable: true,
+  get: function get() {
+    return _CoachmarkFixed.CoachmarkFixed;
+  }
+});
+Object.defineProperty(exports, "CoachmarkOverlayElement", {
+  enumerable: true,
+  get: function get() {
+    return _CoachmarkOverlayElement.CoachmarkOverlayElement;
+  }
+});
+Object.defineProperty(exports, "CoachmarkOverlayElements", {
+  enumerable: true,
+  get: function get() {
+    return _CoachmarkOverlayElements.CoachmarkOverlayElements;
+  }
+});
+Object.defineProperty(exports, "CoachmarkStack", {
+  enumerable: true,
+  get: function get() {
+    return _CoachmarkStack.CoachmarkStack;
+  }
+});
 Object.defineProperty(exports, "ComboButton", {
   enumerable: true,
   get: function get() {
@@ -530,4 +572,11 @@ var _InlineEdit = require("./InlineEdit");
 var _EditInPlace = require("./EditInPlace");
 var _Guidebanner = require("./Guidebanner");
 var _NonLinearReading = require("./NonLinearReading");
+var _Coachmark = require("./Coachmark");
+var _CoachmarkFixed = require("./CoachmarkFixed");
+var _CoachmarkBeacon = require("./CoachmarkBeacon");
+var _CoachmarkButton = require("./CoachmarkButton");
+var _CoachmarkOverlayElements = require("./CoachmarkOverlayElements");
+var _CoachmarkOverlayElement = require("./CoachmarkOverlayElement");
+var _CoachmarkStack = require("./CoachmarkStack");
 var _InlineTip = require("./InlineTip");

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

@@ -74,7 +74,14 @@ var defaults = {
     // Novice to pro components not yet reviewed and released:
     InlineTip: false,
     Guidebanner: false,
-    NonLinearReading: false
+    NonLinearReading: false,
+    Coachmark: false,
+    CoachmarkBeacon: false,
+    CoachmarkButton: false,
+    CoachmarkFixed: false,
+    CoachmarkOverlayElement: false,
+    CoachmarkOverlayElements: false,
+    CoachmarkStack: false
     /* new component flags here - comment used by generate CLI */
   },
 

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

@@ -119,7 +119,7 @@ var makeMatcherArray = function makeMatcherArray(args) {
  * A helper function to enable a test to expect a single call to
  * console.warn, for example when intentionally using a deprecated prop
  * or supplying invalid parameters for the purposes of the test.
- * @param {string|regex|function|[]} message the expected parameters for the call to
+ * @param {string|regex|Function|[]} message the expected parameters for the call to
  * console.warn, which must be called exactly once. A single string or regex or an
  * expect matcher can be used to match a single-argument call to console.warn (most common),
  * while an array of strings and/or regex and/or expect matchers can be used to match a
@@ -207,7 +207,7 @@ var checkLogging = function checkLogging(mock, message) {
  * A helper function to enable a test to expect a single call to
  * console.error, for example when intentionally omitting a required prop
  * or supplying an invalid prop type or value for the purposes of the test.
- * @param {errors: {string|regex|function|[]}, warnings: {string|regex|function|[]}} messages the expected parameters for the call to
+ * @param {errors: {string|regex|Function|[]}, warnings: {string|regex|Function|[]}} messages the expected parameters for the call to
  * console.error or console.warn, which must be called exactly once. A single string or regex or an
  * expect matcher can be used to match a single-argument call to console.error (most common),
  * while an array of strings and/or regex and/or expect matchers can be used to match a
@@ -233,7 +233,7 @@ var expectLogging = function expectLogging(_ref2, test) {
  * A helper function to enable a test to expect a single call to
  * console.error, for example when intentionally omitting a required prop
  * or supplying an invalid prop type or value for the purposes of the test.
- * @param {string|regex|function|[]} message the expected parameters for the call to
+ * @param {string|regex|Function|[]} message the expected parameters for the call to
  * console.error, which must be called exactly once. A single string or regex or an
  * expect matcher can be used to match a single-argument call to console.error (most common),
  * while an array of strings and/or regex and/or expect matchers can be used to match a

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "1.55.1",
+  "version": "1.56.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -84,17 +84,17 @@
   },
   "peerDependencies": {
     "@carbon/colors": "^10.37.1",
-    "@carbon/icons-react": "^10.49.0",
+    "@carbon/icons-react": "^10.49.1",
     "@carbon/import-once": "^10.7.0",
     "@carbon/layout": "^10.37.1",
-    "@carbon/motion": "^10.29.0",
-    "@carbon/themes": "^10.55.1",
-    "@carbon/type": "^10.45.1",
-    "carbon-components": "^10.58.7",
-    "carbon-components-react": "^7.59.8",
+    "@carbon/motion": "^10.29.1",
+    "@carbon/themes": "^10.55.2",
+    "@carbon/type": "^10.45.2",
+    "carbon-components": "^10.58.8",
+    "carbon-components-react": "^7.59.9",
     "carbon-icons": "^7.0.7",
     "react": "^16.8.6 || ^17.0.1",
     "react-dom": "^16.8.6 || ^17.0.1"
   },
-  "gitHead": "6602273614409cba1bd6f9072be2a007bb7caaf8"
+  "gitHead": "9f4bc491efe9aa02b6e038c0d13ba4a0757395f1"
 }

package/scss/components/Carousel/_carousel.scss

@@ -71,6 +71,9 @@
       -moz-user-select: none;
       -ms-user-select: none;
       user-select: none;
+      @media (prefers-reduced-motion) {
+        scroll-behavior: auto;
+      }
     }
   }
 }

package/scss/components/Coachmark/_index.scss

@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2023, 2023
+//
+// 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 './styles/coachmark-dragbar';
+@import './styles/coachmark-header';
+@import './styles/coachmark-overlay';
+@import './styles/coachmark-tagline';

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

@@ -0,0 +1,20 @@
+//
+// Copyright IBM Corp. 2023, 2023
+//
+// 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';
+
+.CoachmarkBaseExampleUsage {
+  position: relative;
+  display: inline-block;
+  max-height: 100%;
+  box-sizing: border-box;
+
+  /* stylelint-disable-next-line carbon/layout-token-use */
+  padding: 1rem;
+  margin-left: 50%;
+  transform: translateX(-50%);
+}

package/scss/components/Coachmark/styles/_coachmark-dragbar.scss

@@ -0,0 +1,74 @@
+//
+// Copyright IBM Corp. 2023, 2023
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+/* stylelint-disable declaration-no-important */
+
+// Standard imports.
+@import '../../../global/styles/project-settings';
+@import '../../../global/styles/mixins';
+
+// Define all component styles in a mixin which is then exported using
+// the Carbon import-once mechanism.
+@mixin coachmark-dragbar {
+  // The block part of our conventional BEM class names (blockClass__E--M).
+  $block-class: #{$pkg-prefix}--coachmark-dragbar;
+
+  .#{$block-class} {
+    display: flex;
+
+    &__handle {
+      flex-grow: 1;
+      padding: $spacing-03 0 0 $spacing-03;
+      border: 0;
+      background-color: transparent;
+      text-align: left;
+
+      &:hover {
+        cursor: move;
+      }
+    }
+
+    &--close-btn {
+      width: $spacing-07;
+      height: $spacing-07;
+      margin-left: auto !important;
+
+      svg > path {
+        margin: 0;
+        fill: $inverse-01 !important;
+      }
+
+      &:hover {
+        background-color: $inverse-hover-ui !important;
+      }
+    }
+
+    &__light {
+      #{$block-class}--close-btn {
+        &:active {
+          background-color: $active-secondary;
+        }
+      }
+    }
+
+    &__dark {
+      #{$block-class}--close-btn {
+        &:active {
+          background-color: $button-tertiary-active;
+        }
+      }
+    }
+
+    svg {
+      color: $inverse-01;
+    }
+  }
+}
+
+@include exports('coachmark-dragbar') {
+  @include coachmark-dragbar;
+}

package/scss/components/Coachmark/styles/_coachmark-header.scss

@@ -0,0 +1,58 @@
+//
+// Copyright IBM Corp. 2023, 2023
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+/* stylelint-disable declaration-no-important */
+
+// Standard imports.
+@import '../../../global/styles/project-settings';
+@import '../../../global/styles/mixins';
+
+// Define all component styles in a mixin which is then exported using
+// the Carbon import-once mechanism.
+@mixin coachmark-header {
+  // The block part of our conventional BEM class names (blockClass__E--M).
+  $block-class: #{$pkg-prefix}--coachmark-header;
+
+  .#{$block-class} {
+    display: flex;
+
+    &--close-btn {
+      width: $spacing-07;
+      height: $spacing-07;
+      margin-left: auto !important;
+
+      svg > path {
+        margin: 0;
+        fill: $inverse-01 !important;
+      }
+
+      &:hover {
+        background-color: $inverse-hover-ui !important;
+      }
+    }
+
+    &__light {
+      #{$block-class}--close-btn {
+        &:active {
+          background-color: $active-secondary;
+        }
+      }
+    }
+
+    &__dark {
+      #{$block-class}--close-btn {
+        &:active {
+          background-color: $button-tertiary-active;
+        }
+      }
+    }
+  }
+}
+
+@include exports('coachmark-header') {
+  @include coachmark-header;
+}

package/scss/components/Coachmark/styles/_coachmark-overlay.scss

@@ -0,0 +1,327 @@
+//
+// Copyright IBM Corp. 2023, 2023
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+/* stylelint-disable carbon/layout-token-use */
+/* stylelint-disable carbon/theme-token-use */
+/* stylelint-disable declaration-no-important */
+
+// Standard imports.
+@import '../../../global/styles/project-settings';
+@import '../../../global/styles/mixins';
+
+// Define all component styles in a mixin which is then exported using
+// the Carbon import-once mechanism.
+@mixin coachmark-overlay {
+  // The block part of our conventional BEM class names (blockClass__E--M).
+  $block-class: #{$pkg-prefix}--coachmark-overlay;
+  $carousel-class: #{$pkg-prefix}--carousel;
+
+  .#{$block-class} {
+    position: absolute;
+    z-index: 5901;
+    width: carbon--mini-units(36);
+    border-radius: $spacing-01;
+    background-color: $inverse-02;
+    color: $inverse-01;
+    $caret-height: calc(
+      $spacing-03 - $spacing-01
+    ); // from the "peak" of the pyramid to its "base"
+    $caret-center: $caret-height; // use "center" for left-right calculations, and "height" for top-bottom calculations
+    $distance-offset: $spacing-06; // see also ./utils/constants.js > distanceOffset
+
+    &--fixed {
+      position: fixed;
+      right: $spacing-05;
+      bottom: 0;
+      transform: translateY(100%);
+      /* stylelint-disable-next-line carbon/motion-easing-use, carbon/motion-duration-use */
+      transition: 240ms carbon--motion(exit, productive);
+      @media (prefers-reduced-motion) {
+        transition: none;
+      }
+    }
+
+    &--is-visible {
+      transform: translateY(0);
+    }
+
+    // CARET STYLING
+    &__caret {
+      // background-color: this property is set in _coachmark-overlay-theme.scss
+      position: absolute;
+      z-index: 5902;
+      width: 0;
+      height: 0;
+      // border-bottom-color: this property is set in _coachmark-overlay-theme.scss
+      border-right: $caret-center solid transparent;
+      border-bottom: solid $caret-center $inverse-02;
+      border-left: $caret-center solid transparent;
+    }
+
+    // OVERLAY AND CARET POSITIONING
+    &--top {
+      $horizontal-push: calc($distance-offset - $caret-center);
+      $translate-y: calc(-1 * (100% + $distance-offset + $caret-height));
+
+      transform: translate(-50%, $translate-y);
+
+      .#{$block-class}__caret {
+        left: calc(50% - $caret-center);
+        transform: rotate(180deg);
+      }
+
+      &-left {
+        transform: translate(calc(-1 * $distance-offset), $translate-y);
+        .#{$block-class}__caret {
+          left: $horizontal-push;
+          transform: rotate(180deg);
+        }
+      }
+
+      &-right {
+        transform: translate(
+          calc(-1 * (100% - $distance-offset)),
+          $translate-y
+        );
+        .#{$block-class}__caret {
+          right: $horizontal-push;
+          transform: rotate(180deg);
+        }
+      }
+    }
+
+    &--bottom {
+      $horizontal-push: calc($distance-offset - $caret-center);
+      $top: calc(-1 * $caret-height);
+      $translate-y: calc($distance-offset + $caret-height);
+
+      transform: translate(-50%, $translate-y);
+      .#{$block-class}__caret {
+        top: $top;
+        left: calc(50% - $caret-center);
+      }
+
+      &-left {
+        transform: translate(calc(-1 * $distance-offset), $translate-y);
+        .#{$block-class}__caret {
+          top: $top;
+          left: $horizontal-push;
+        }
+      }
+
+      &-right {
+        transform: translate(
+          calc(-1 * (100% - $distance-offset)),
+          $translate-y
+        );
+
+        .#{$block-class}__caret {
+          top: $top;
+          right: $horizontal-push;
+        }
+      }
+    }
+
+    &--left {
+      $right: calc(-1 * $caret-center * 1.5);
+      $translate-x: calc(-1 * (100% + $distance-offset + $caret-center));
+      $vertical-push: calc($distance-offset - ($caret-height * 0.5));
+
+      transform: translate($translate-x, -50%);
+      .#{$block-class}__caret {
+        top: calc(50% - ($caret-height * 0.5));
+        right: $right;
+        transform: rotate(90deg);
+      }
+
+      &-top {
+        transform: translate($translate-x, calc(-1 * $distance-offset));
+        .#{$block-class}__caret {
+          top: $vertical-push;
+          right: $right;
+          transform: rotate(90deg);
+        }
+      }
+
+      &-bottom {
+        transform: translate(
+          $translate-x,
+          calc(-1 * (100% - $distance-offset))
+        );
+        .#{$block-class}__caret {
+          right: $right;
+          bottom: $vertical-push;
+          transform: rotate(90deg);
+        }
+      }
+    }
+
+    &--right {
+      $left: calc(-1 * $caret-center * 1.5);
+      $translate-x: calc($distance-offset + $caret-center);
+      $vertical-push: calc($distance-offset - ($caret-height * 0.5));
+
+      transform: translate($translate-x, -50%);
+      .#{$block-class}__caret {
+        top: calc(50% - ($caret-height * 0.5));
+        left: $left;
+        transform: rotate(-90deg);
+      }
+
+      &-top {
+        transform: translate($translate-x, calc(-1 * $distance-offset));
+        .#{$block-class}__caret {
+          top: $vertical-push;
+          left: $left;
+          transform: rotate(-90deg);
+        }
+      }
+
+      &-bottom {
+        transform: translate(
+          $translate-x,
+          calc(-1 * (100% - $distance-offset))
+        );
+        .#{$block-class}__caret {
+          bottom: $vertical-push;
+          left: $left;
+          transform: rotate(-90deg);
+        }
+      }
+    }
+
+    // ANIMATED MEDIA
+    &__element-stepped-media {
+      height: calc($spacing-07 + $spacing-12); // 32 + 96 = 128
+      margin-bottom: $spacing-05;
+    }
+
+    // BODY
+    &__body {
+      padding: $spacing-01 $spacing-05 $spacing-05;
+
+      .#{$carbon-prefix}--btn--ghost {
+        color: $inverse-link;
+
+        &:hover {
+          color: $inverse-link;
+        }
+      }
+
+      // CAROUSEL ELEMENTS
+      #{$block-class}-element {
+        display: block;
+        max-width: 100%;
+        flex: 0 0 100%;
+
+        #{$block-class}-element__content {
+          padding-bottom: $spacing-05;
+        }
+
+        #{$block-class}-element__title > div {
+          margin: 0 0 $spacing-03;
+
+          > h2 {
+            @include carbon--type-style('productive-heading-02');
+
+            order: 1;
+          }
+        }
+      }
+    }
+
+    // FOOTER
+    &__footer {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+    }
+    /* ------------------ */
+
+    // THEME
+    &__light {
+      .#{$block-class}__body {
+        .#{$carbon-prefix}--link {
+          color: $inverse-link;
+
+          &:hover {
+            color: #a6c8ff;
+          }
+
+          &:active {
+            color: $text-04;
+          }
+
+          &:focus {
+            outline-color: $text-04;
+          }
+        }
+
+        .#{$carbon-prefix}--btn--ghost {
+          &:hover {
+            background-color: $inverse-hover-ui;
+          }
+
+          &:active {
+            background-color: $active-secondary;
+          }
+        }
+      }
+    }
+
+    &__dark {
+      .#{$block-class}__body {
+        .#{$carbon-prefix}--link {
+          color: #0062fe;
+
+          &:hover {
+            color: #0043ce;
+          }
+
+          &:active {
+            color: $link-02;
+          }
+
+          &:focus {
+            color: $inverse-01;
+            outline-color: $inverse-01;
+          }
+        }
+
+        .#{$carbon-prefix}--btn--primary {
+          &:focus {
+            background-color: $button-primary-active;
+            box-shadow: inset 0 0 0 $spacing-01 $interactive-01,
+              inset 0 0 0 rem(3px) $interactive-03;
+          }
+        }
+
+        .#{$carbon-prefix}--btn--ghost {
+          &:hover {
+            background-color: $inverse-hover-ui;
+          }
+
+          &:active {
+            background-color: $button-tertiary-active;
+          }
+
+          &:focus {
+            box-shadow: inset 0 0 0 $spacing-01 $interactive-01,
+              inset 0 0 0 rem(3px) $interactive-03;
+          }
+        }
+      }
+    }
+    .#{$carousel-class}__item {
+      flex: 0 0 100% !important;
+    }
+  }
+}
+
+@include exports('coachmark-overlay') {
+  @include coachmark-overlay;
+}