@carbon/ibm-products 1.55.2 → 1.56.0

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/_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';