@carbon/ibm-products 1.55.2 → 1.57.0

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

package/scss/components/CoachmarkButton/_coachmark-button.scss

@@ -0,0 +1,34 @@
+//
+// 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.
+//
+
+// Standard imports.
+@import '../../global/styles/project-settings';
+@import '../../global/styles/mixins';
+
+// Other Carbon settings.
+// TODO: @import 'carbon-components/scss/globals/grid/grid'; if needed
+
+// CoachmarkButton uses the following Carbon components:
+// TODO: @import(s) of Carbon component styles used by CoachmarkButton
+
+// CoachmarkButton uses the following Carbon for IBM Products components:
+// TODO: @import(s) of IBM Products component styles used by CoachmarkButton
+
+// Define all component styles in a mixin which is then exported using
+// the Carbon import-once mechanism.
+@mixin coachmark-button {
+  // The block part of our conventional BEM class names (blockClass__E--M).
+  $block-class: #{$pkg-prefix}--coachmark-button;
+
+  .#{$block-class} {
+    // TODO: Styles.
+  }
+}
+
+@include exports('coachmark-button') {
+  @include coachmark-button;
+}

package/scss/components/CoachmarkButton/_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-button';

package/scss/components/CoachmarkButton/_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%);
+}

package/scss/components/CoachmarkFixed/_coachmark-fixed.scss

@@ -0,0 +1,34 @@
+//
+// 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.
+//
+
+// Standard imports.
+@import '../../global/styles/project-settings';
+@import '../../global/styles/mixins';
+
+// Other Carbon settings.
+// TODO: @import 'carbon-components/scss/globals/grid/grid'; if needed
+
+// CoachmarkFixed uses the following Carbon components:
+// TODO: @import(s) of Carbon component styles used by CoachmarkFixed
+
+// CoachmarkFixed uses the following Carbon for IBM Products components:
+// TODO: @import(s) of IBM Products component styles used by CoachmarkFixed
+
+// Define all component styles in a mixin which is then exported using
+// the Carbon import-once mechanism.
+@mixin coachmark-fixed {
+  // The block part of our conventional BEM class names (blockClass__E--M).
+  $block-class: #{$pkg-prefix}--coachmark-fixed;
+
+  .#{$block-class} {
+    // TODO: Styles.
+  }
+}
+
+@include exports('coachmark-fixed') {
+  @include coachmark-fixed;
+}

package/scss/components/CoachmarkFixed/_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-fixed';

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

@@ -0,0 +1,10 @@
+//
+// 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';
+
+// TODO: add any additional styles used by CoachmarkFixed.stories.js

package/scss/components/CoachmarkOverlayElement/_coachmark-overlay-element.scss

@@ -0,0 +1,50 @@
+//
+// 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.
+//
+
+// 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-element {
+  // The block part of our conventional BEM class names (blockClass__E--M).
+  $block-class: #{$pkg-prefix}--coachmark-overlay-element;
+  $carousel-item-class: #{$pkg-prefix}--carousel__item;
+
+  .#{$block-class} {
+    &__content {
+      padding-bottom: $spacing-05;
+    }
+
+    &__title {
+      @include carbon--type-style('productive-heading-02');
+
+      margin: 0 0 $spacing-03;
+    }
+
+    &__body {
+      @include carbon--type-style('body-long-01');
+    }
+
+    &__button {
+      margin-bottom: 0;
+    }
+  }
+
+  .#{$carousel-item-class} {
+    .#{$block-class} {
+      &__button {
+        margin-bottom: $spacing-05;
+      }
+    }
+  }
+}
+
+@include exports('coachmark-overlay-element') {
+  @include coachmark-overlay-element;
+}

package/scss/components/CoachmarkOverlayElement/_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-overlay-element';

package/scss/components/CoachmarkOverlayElement/_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%);
+}

package/scss/components/CoachmarkOverlayElements/_coachmark-overlay-elements.scss

@@ -0,0 +1,40 @@
+//
+// 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.
+//
+
+// 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-elements {
+  // The block part of our conventional BEM class names (blockClass__E--M).
+  $block-class: #{$pkg-prefix}--coachmark-overlay-elements;
+
+  .#{$block-class} {
+    &__element-stepped-media {
+      height: rem(128px);
+      margin-bottom: $spacing-05;
+    }
+
+    &__footer {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+    }
+
+    &--controls-progress {
+      margin-right: auto;
+      justify-self: flex-start;
+      @include carbon--type-style('helper-text-01');
+    }
+  }
+}
+
+@include exports('coachmark-overlay-elements') {
+  @include coachmark-overlay-elements;
+}

package/scss/components/CoachmarkOverlayElements/_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-overlay-elements';

package/scss/components/CoachmarkOverlayElements/_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%);
+}

package/scss/components/CoachmarkStack/_coachmark-stack.scss

@@ -0,0 +1,85 @@
+//
+// 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 */
+
+// Standard imports.
+@import '../../global/styles/project-settings';
+@import '../../global/styles/mixins';
+
+@mixin coachmark-stack {
+  // The block part of our conventional BEM class names (blockClass__E--M).
+
+  $block-class: #{$pkg-prefix}--coachmark-stack;
+  $elements-block-class: #{$pkg-prefix}--coachmark-stack-element;
+  $overlay-class: #{$prefix}--coachmark-overlay;
+  $stack-home-class: #{$pkg-prefix}--coachmark-stacked-home;
+
+  .#{$elements-block-class} {
+    $block: &;
+
+    position: fixed;
+    z-index: 5901;
+    right: $spacing-05;
+    bottom: -100%;
+    //opacity: 0;
+    transform: translateY(100%);
+
+    &--is-mounted {
+      bottom: 0;
+      /* 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 {
+      opacity: 1;
+      transform: translateY(0);
+    }
+
+    // Stack the level-one item behind the level-two item.
+    &--is-stacked {
+      bottom: 0;
+      overflow: hidden;
+      pointer-events: none;
+      transform: perspective(carbon--mini-units(18))
+        translate3d(0, calc($spacing-09 * -1), calc($spacing-05 * -1));
+      transform-origin: top center;
+
+      &__light {
+        background-color: $gray-90;
+      }
+
+      &__dark {
+        background-color: $active-tertiary;
+      }
+    }
+  }
+
+  // ALL SUBSEQUENT ITEMS ARE THE "CHILD" STACK ITEMS
+  .#{$elements-block-class} ~ .#{$elements-block-class} {
+    z-index: 5902;
+  }
+
+  // SPECIFIC TO THE HOME ELEMENT
+  .#{$stack-home-class} {
+    &__nav-links {
+      margin-top: $spacing-04;
+      margin-left: calc(-1 * $spacing-05);
+    }
+
+    &__icon-idea {
+      margin-bottom: $spacing-03;
+    }
+  }
+}
+
+@include exports('coachmark-stack') {
+  @include coachmark-stack;
+}

package/scss/components/CoachmarkStack/_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-stack';

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

@@ -0,0 +1,10 @@
+//
+// 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';
+
+// TODO: add any additional styles used by CoachmarkStack.stories.js

package/scss/components/Datagrid/styles/_datagrid.scss

@@ -612,3 +612,68 @@
 .#{$block-class} .#{$pkg-prefix}--datagrid__head-wrap {
   background-color: $ui-03;
 }
+
+.#{$block-class} .#{$block-class}__col-resizer-range {
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  right: calc(#{$spacing-03} * -1);
+  width: 1rem;
+  height: 100%;
+  margin: 0;
+  -webkit-appearance: none;
+  appearance: none;
+  background: transparent;
+}
+
+.#{$block-class} .#{$block-class}__col-resizer-range:focus {
+  outline: 0;
+}
+
+.#{$block-class} .#{$block-class}__col-resizer-range:focus::before {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 2px;
+  height: 100%;
+  background-color: $focus;
+  content: '';
+  transform: translate(-50%, -50%);
+}
+
+.#{$block-class}
+  .#{$block-class}__col-resizer-range:focus
+  + .#{$block-class}__col-resize-indicator {
+  position: absolute;
+  z-index: 2;
+  right: calc(#{$spacing-03} * -1);
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 100%;
+  margin: 0;
+  background-color: $focus;
+  transform: translate(-50%, 0);
+}
+
+.#{$block-class} .#{$block-class}__col-resizer-range:focus::after {
+  position: absolute;
+  /* stylelint-disable-next-line carbon/layout-token-use */
+  top: var(--#{$block-class}--row-height);
+  right: $spacing-03;
+  width: 1px;
+  height: calc(
+    var(--#{$block-class}--grid-height) - var(--#{$block-class}--row-height)
+  );
+  background-color: $active-ui;
+  content: '';
+}
+
+.#{$block-class} .#{$block-class}__col-resizer-range::-webkit-slider-thumb {
+  width: 16px;
+  height: 16px;
+  border: none;
+  border-radius: 50%;
+  -webkit-appearance: none;
+  appearance: none;
+  background: transparent;
+}

package/scss/components/_index.scss

@@ -49,11 +49,17 @@
 @import './EditTearsheetNarrow/index';
 @import './EditFullPage/index';
 @import './EditUpdateCards/index';
-
 @import './InlineEditV1/index';
 @import './InlineEditV2/index';
 @import './Carousel/index';
 @import './Guidebanner/index';
 @import './NonLinearReading/index';
+@import './Coachmark/index';
+@import './CoachmarkFixed/index';
+@import './CoachmarkBeacon/index';
+@import './CoachmarkButton/index';
+@import './CoachmarkOverlayElements/index';
+@import './CoachmarkOverlayElement/index';
+@import './CoachmarkStack/index';
 @import './InlineTip/index';
 @import './SteppedAnimatedMedia/index';