@carbon/ibm-products 2.22.0 → 2.24.0

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

@@ -0,0 +1,431 @@
+/* stylelint-disable function-no-unknown */
+/* stylelint-disable max-nesting-depth */
+//
+// Copyright IBM Corp. 2023, 2024
+//
+// 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.
+@use '@carbon/layout/scss/convert' as *;
+@use '../../global/styles/project-settings' as c4p-settings;
+@use '../../global/styles/mixins';
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/react/scss/theme' as *;
+@use '@carbon/styles/scss/type';
+@use '@carbon/react/scss/colors' as *;
+@use '@carbon/styles/scss/components/button/tokens' as *;
+@use '@carbon/styles/scss/motion' as *;
+// Define all component styles in a mixin which is then exported using
+// the Carbon import-once mechanism.
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--coachmark-overlay;
+$carousel-class: #{c4p-settings.$pkg-prefix}--carousel;
+$close-btn-class: #{$block-class}--close-btn;
+$draghandle-btn-class: #{$block-class}__handle;
+
+.#{$block-class} {
+  position: absolute;
+  z-index: 5901;
+  width: 18rem;
+  border-radius: $spacing-01;
+  background-color: $background-inverse;
+  color: $text-inverse;
+  $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
+
+  visibility: hidden;
+
+  &--fixed {
+    position: fixed;
+    right: $spacing-05;
+    bottom: 0;
+    transform: translateY(100%);
+
+    transition: transform $duration-moderate-02 motion(exit, productive);
+    @media (prefers-reduced-motion) {
+      transition: none;
+    }
+  }
+
+  &--is-dragmode {
+    border-radius: 0;
+    box-shadow: 0 0 0 $spacing-02 $background-inverse;
+    outline: $spacing-01 solid $icon-inverse;
+  }
+
+  &--is-visible {
+    transform: translateY(0);
+    visibility: visible;
+  }
+
+  // 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 $background-inverse;
+    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 {
+    .#{c4p-settings.$carbon-prefix}--btn--ghost {
+      color: $link-inverse;
+
+      &:hover {
+        color: $link-inverse;
+      }
+    }
+
+    // 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 type.type-style('productive-heading-02');
+
+          order: 1;
+        }
+      }
+    }
+  }
+
+  // HEADER BUTTONS
+  &__handle {
+    position: relative;
+    flex-grow: 1;
+    padding: $spacing-02 0 0 $spacing-03;
+    border: 0;
+    background-color: transparent;
+    text-align: left;
+
+    &::before {
+      position: absolute;
+      top: $spacing-01;
+      left: $spacing-01;
+      width: calc($spacing-06 + $spacing-01);
+      height: calc($spacing-06 + $spacing-01);
+      content: '';
+    }
+
+    &:hover {
+      cursor: move;
+    }
+
+    &:focus {
+      border: none;
+      outline: none;
+
+      &::before {
+        border: 1px solid $icon-inverse;
+        outline: 1px solid $blue-60;
+      }
+    }
+  }
+
+  &--close-btn-container {
+    width: $spacing-07;
+    height: $spacing-07;
+    margin-left: auto !important;
+  }
+
+  &--close-btn {
+    width: $spacing-07;
+    height: $spacing-07;
+    margin-left: auto !important;
+
+    svg > path {
+      margin: 0;
+      fill: $icon-inverse !important;
+    }
+
+    &:hover {
+      background-color: $background-inverse-hover !important;
+    }
+  }
+
+  // FOOTER
+  &__footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+  }
+
+  // THEME
+  &__light {
+    .#{$block-class}__body {
+      .#{c4p-settings.$carbon-prefix}--link {
+        color: $link-inverse;
+
+        &:hover {
+          color: #a6c8ff;
+        }
+
+        &:active {
+          color: $text-on-color;
+        }
+
+        &:focus {
+          outline-color: $text-on-color;
+        }
+      }
+
+      .#{c4p-settings.$carbon-prefix}--btn--ghost {
+        border-color: transparent !important;
+        border-radius: 0;
+        outline: 1px solid transparent;
+
+        &:hover {
+          background-color: $background-inverse-hover;
+        }
+
+        &:active {
+          background-color: $button-secondary-active;
+        }
+
+        &:focus {
+          box-shadow: inset 0 0 0 1px $background-inverse,
+            inset 0 0 0 $spacing-01 $white-0;
+        }
+      }
+    }
+    .#{$draghandle-btn-class} {
+      &:focus {
+        &::before {
+          border: 1px solid $white-0;
+          outline: 1px solid transparent;
+        }
+      }
+    }
+    .#{$close-btn-class} {
+      border-color: transparent !important;
+      border-radius: 0;
+      outline: 1px solid transparent;
+
+      &:active {
+        background-color: $button-secondary-active;
+      }
+
+      &:focus {
+        box-shadow: inset 0 0 0 1px $background-inverse,
+          inset 0 0 0 $spacing-01 $white-0;
+      }
+    }
+  }
+
+  &__dark {
+    .#{$block-class}__body {
+      .#{c4p-settings.$carbon-prefix}--link {
+        color: #0062fe;
+
+        &:hover {
+          color: #0043ce;
+        }
+
+        &:active {
+          color: $link-secondary;
+        }
+
+        &:focus {
+          color: $text-inverse;
+          outline-color: $text-inverse;
+        }
+      }
+
+      .#{c4p-settings.$carbon-prefix}--btn--primary {
+        &:focus {
+          background-color: $button-primary-active;
+          box-shadow: inset 0 0 0 $spacing-01 $button-primary,
+            inset 0 0 0 to-rem(3px) $button-tertiary;
+        }
+      }
+
+      .#{c4p-settings.$carbon-prefix}--btn--ghost {
+        border-color: transparent;
+
+        &:hover {
+          background-color: $background-inverse-hover;
+        }
+
+        &:active {
+          background-color: $button-tertiary-active;
+        }
+
+        &:focus {
+          box-shadow: inset 0 0 0 1px $blue-60, inset 0 0 0 $spacing-01 $white-0;
+        }
+      }
+    }
+    .#{$draghandle-btn-class} {
+      &:focus {
+        &::before {
+          border: 1px solid $white-0;
+          outline: 1px solid $blue-60;
+        }
+      }
+    }
+    .#{$close-btn-class} {
+      border-color: transparent;
+
+      &:focus {
+        box-shadow: inset 0 0 0 1px $blue-60, inset 0 0 0 $spacing-01 $white-0;
+      }
+
+      &:active {
+        background-color: $button-tertiary-active;
+      }
+    }
+  }
+  .#{$carousel-class}__item {
+    flex: 0 0 100% !important;
+  }
+}

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

@@ -0,0 +1,140 @@
+//
+// Copyright IBM Corp. 2023, 2024
+//
+// 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 max-nesting-depth */
+/* stylelint-disable carbon/theme-token-use */
+/* stylelint-disable declaration-no-important */
+
+// Standard imports.
+@use '../../global/styles/project-settings' as c4p-settings;
+@use '../../global/styles/mixins';
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/react/scss/motion' as *;
+@use '@carbon/styles/scss/type';
+@use '@carbon/react/scss/colors' as *;
+@use '@carbon/react/scss/theme' as *;
+@use '@carbon/styles/scss/components/button/tokens' as *;
+// Define all component styles in a mixin which is then exported using
+// the Carbon import-once mechanism.
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--coachmark-tagline;
+
+.#{$block-class} {
+  position: fixed;
+  z-index: 1000;
+  right: $spacing-05;
+  bottom: 0;
+  display: grid;
+  overflow: hidden;
+  width: 18rem;
+  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 $duration-moderate-02 motion(exit, productive) 300ms;
+  transition-delay: $duration-moderate-02;
+
+  @media (prefers-reduced-motion) {
+    transition: none;
+  }
+
+  &::before {
+    position: absolute;
+    z-index: -1;
+    background: linear-gradient(90deg, $blue-70 0%, $purple-70 100%);
+    content: '';
+    inset: 0;
+    opacity: 0;
+    /* stylelint-disable-next-line carbon/motion-duration-use */
+    transition: opacity $duration-moderate-02 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 type.type-style('body-short-01');
+
+    &:focus {
+      box-shadow: inset 0 0 0 3px $purple-70, inset 0 0 0 $spacing-02 $white-0;
+      outline: 1px solid transparent;
+    }
+
+    &:hover {
+      cursor: pointer !important;
+    }
+
+    .#{$block-class}__idea {
+      justify-self: center;
+    }
+  }
+
+  &--close-btn-container {
+    width: $spacing-07;
+    height: $spacing-07;
+    margin-left: auto;
+  }
+
+  &--close-btn {
+    width: $spacing-07;
+    height: $spacing-07;
+    border-color: transparent !important;
+    border-radius: 0;
+    margin-left: auto !important;
+    color: $white-0;
+    outline: 1px solid transparent;
+
+    &:active {
+      background-color: $button-secondary-active;
+    }
+
+    &:focus {
+      box-shadow: inset 0 0 0 1px $background-inverse,
+        inset 0 0 0 $spacing-01 $white-0 !important;
+    }
+
+    svg > path {
+      margin: 0;
+      fill: $white-0 !important;
+    }
+
+    &:hover {
+      background-color: $purple-70-hover !important;
+    }
+  }
+}

package/scss/components/Coachmark/_coachmark.scss

@@ -0,0 +1,30 @@
+//
+// Copyright IBM Corp. 2023, 2024
+//
+// 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.
+@use '../../global/styles/project-settings' as c4p-settings;
+@use '../../global/styles/mixins';
+
+@use './coachmark-dragbar';
+@use './coachmark-header';
+@use './coachmark-overlay';
+@use './coachmark-tagline';
+
+// Other Carbon settings if needed
+// TODO: @use '@carbon/styles/scss/grid';
+// or
+// TODO: @use '@carbon/react/scss/grid';
+
+// Coachmark uses the following Carbon for IBM Products components:
+// TODO: @use(s) of IBM Products component styles used by Coachmark
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+//$block-class: #{c4p-settings.$pkg-prefix}--coachmark;
+
+// .#{$block-class} {
+//   // TODO: Styles.
+// }

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

@@ -0,0 +1,9 @@
+//
+// Copyright IBM Corp. 2023, 2024
+//
+// 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 './coachmark';

package/scss/components/Coachmark/_index.scss

@@ -0,0 +1,8 @@
+//
+// Copyright IBM Corp. 2023, 2024
+//
+// 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 './coachmark';

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

@@ -0,0 +1,9 @@
+//
+// Copyright IBM Corp. 2023, 2024
+//
+// 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 any Carbon component styles used from CoachmarkBeacon in this file.
+// CoachmarkBeacon uses the following Carbon components: