@carbon/ibm-products 1.55.2 → 1.56.0

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;
+}

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

@@ -0,0 +1,118 @@
+//
+// 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/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-tagline {
+  // The block part of our conventional BEM class names (blockClass__E--M).
+  $block-class: #{$pkg-prefix}--coachmark-tagline;
+
+  .#{$block-class} {
+    position: fixed;
+    z-index: 1000;
+    right: $spacing-05;
+    bottom: 0;
+    display: grid;
+    overflow: hidden;
+    width: carbon--mini-units(36);
+    border-radius: $spacing-01 $spacing-01 0 0;
+    background: $purple-70;
+    background-image: linear-gradient(90deg, $blue-90 0%, $purple-70 100%);
+    color: $white-0 !important;
+    grid-template-columns: [ctacol] auto [closebtncol] $spacing-08;
+    opacity: 1;
+    // stylelint-disable-next-line carbon/motion-duration-use
+    transition: opacity 240ms carbon--motion(exit, productive) 300ms;
+    transition-delay: 240ms;
+    @media (prefers-reduced-motion) {
+      transition: none;
+    }
+
+    &::before {
+      position: absolute;
+      z-index: -1;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      background: linear-gradient(90deg, $blue-70 0%, $purple-70 100%);
+      content: '';
+      opacity: 0;
+      /* stylelint-disable-next-line carbon/motion-duration-use */
+      transition: opacity 240ms carbon--motion(exit, productive);
+      @media (prefers-reduced-motion) {
+        transition: none;
+      }
+    }
+
+    &:hover::before {
+      opacity: 1;
+    }
+
+    &--is-open {
+      background: $white-0;
+      opacity: 0;
+      #{$block-class}__cta {
+        opacity: 0;
+      }
+
+      #{$block-class}--close-btn {
+        display: none;
+      }
+
+      &::before {
+        background: $white-0;
+      }
+    }
+
+    &__cta {
+      display: grid;
+      padding: $spacing-03 0;
+      border: none;
+      background: transparent;
+      color: $white-0 !important;
+      grid-template-columns: [iconcol] $spacing-07 [bodycol] auto;
+      text-align: left;
+      @include carbon--type-style('body-short-01');
+
+      &:hover {
+        cursor: pointer !important;
+      }
+
+      .#{$block-class}__idea {
+        justify-self: center;
+      }
+    }
+
+    &--close-btn {
+      width: $spacing-07;
+      height: $spacing-07;
+      margin-left: auto !important;
+      color: $white-0;
+
+      svg > path {
+        margin: 0;
+        fill: $white-0 !important;
+      }
+
+      &:hover {
+        background-color: $purple-70-hover !important;
+      }
+    }
+  }
+}
+
+@include exports('coachmark-tagline') {
+  @include coachmark-tagline;
+}

package/scss/components/CoachmarkBeacon/_coachmark-beacon.scss

@@ -0,0 +1,166 @@
+//
+// 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.
+//
+
+/**
+ * The CoachmarkBeacon specifically is theme-agnostic, and so we have to
+ * use color tokens to keep the colors static instead of theme tokens
+ * that will change depending on the selected theme.
+ *
+ * Because of this, we are triggering a *large* amount of linting errors.
+ * So, we're adding 4 "disable" rules for the file instead of 50
+ * individual rules.
+ */
+
+/* stylelint-disable carbon/layout-token-use */
+/* stylelint-disable carbon/motion-duration-use */
+/* stylelint-disable carbon/theme-token-use */
+
+// Standard imports.
+@import '../../global/styles/project-settings';
+@import '../../global/styles/mixins';
+
+@mixin coachmark-beacon {
+  // The block part of our conventional BEM class names (blockClass__E--M).
+  $block-class: #{$pkg-prefix}--coachmark-beacon;
+  $beaconAnimationTime: 2s;
+  .#{$block-class} {
+    position: relative;
+
+    &-default {
+      .#{$block-class}__target {
+        // the blue dot
+        &::after {
+          position: absolute;
+          top: calc($spacing-01 + $spacing-03);
+          left: calc($spacing-01 + $spacing-03);
+          width: $spacing-04;
+          height: $spacing-04;
+          border-radius: 50%;
+          background-color: $blue-50;
+          content: '';
+        }
+      }
+    }
+
+    &-ring {
+      .#{$block-class}__center {
+        -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='80px' height='80px' viewBox='008080'><pathfill='white' stroke='none' d='M0,0m37-2a404001010Zm128a1212011-10Z'/></svg>");
+        mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='80px' height='80px' viewBox='008080'><pathfill='white' stroke='none' d='M0,0m37-2a404001010Zm128a1212011-10Z'/></svg>");
+
+        circle {
+          /* stylelint-disable-next-line carbon/motion-easing-use */
+          animation: ring-ripple $beaconAnimationTime infinite;
+          @media (prefers-reduced-motion) {
+            animation: none;
+          }
+        }
+      }
+    }
+
+    .#{$block-class}__target {
+      // the hit area
+      position: absolute;
+      top: calc(-1 * $spacing-05);
+      left: calc(-1 * $spacing-05);
+      width: $spacing-07;
+      height: $spacing-07;
+      padding: 0;
+      border: none;
+      border-radius: 50%;
+      background-color: transparent;
+      cursor: pointer;
+
+      &[aria-expanded='true'] {
+        circle {
+          animation: none;
+        }
+      }
+    }
+
+    &__center {
+      position: absolute;
+      z-index: 6900;
+      top: calc(($spacing-06 - $spacing-01) * -1);
+      left: calc(($spacing-06 - $spacing-01) * -1);
+      width: $spacing-11;
+      height: $spacing-11;
+      pointer-events: none;
+
+      circle {
+        /* stylelint-disable-next-line carbon/motion-easing-use */
+        animation: ripple $beaconAnimationTime infinite;
+        fill: $support-04;
+        fill-opacity: 0;
+        -webkit-mask-image: none;
+        mask-image: none;
+        stroke: $support-04;
+        stroke-opacity: 0;
+        stroke-width: 1px;
+        transition-timing-function: carbon--motion(exit, productive);
+        @media (prefers-reduced-motion) {
+          animation: none;
+        }
+      }
+    }
+  }
+
+  @keyframes ripple {
+    0% {
+      fill-opacity: 0;
+      r: 1px;
+      stroke-opacity: 0;
+      transition-timing-function: carbon--motion(entrance, productive);
+    }
+
+    31% {
+      fill-opacity: 0.2;
+      stroke-opacity: 1;
+    }
+
+    62% {
+      fill-opacity: 0;
+      r: 32px;
+      stroke-opacity: 0;
+    }
+
+    100% {
+      fill-opacity: 0;
+      r: 32px;
+      stroke-opacity: 0;
+    }
+  }
+
+  @keyframes ring-ripple {
+    0% {
+      fill-opacity: 0;
+      r: 12px;
+      stroke-opacity: 0;
+      transition-timing-function: carbon--motion(entrance, productive);
+    }
+
+    31% {
+      fill-opacity: 0.2;
+      stroke-opacity: 1;
+    }
+
+    62% {
+      fill-opacity: 0;
+      r: 32px;
+      stroke-opacity: 0;
+    }
+
+    100% {
+      fill-opacity: 0;
+      r: 32px;
+      stroke-opacity: 0;
+    }
+  }
+}
+
+@include exports('coachmark-beacon') {
+  @include coachmark-beacon;
+}

package/scss/components/CoachmarkBeacon/_index.scss

@@ -0,0 +1,8 @@
+//
+// 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 './coachmark-beacon';

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

@@ -0,0 +1,19 @@
+//
+// 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%);
+}