@carbon/ibm-products 1.54.2 → 1.55.0

package/scss/components/Guidebanner/_guidebanner.scss

@@ -0,0 +1,257 @@
+//
+// 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 Guidebanner 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 */
+/* stylelint-disable declaration-no-important */
+
+// Standard imports.
+@import '../../global/styles/project-settings';
+@import '../../global/styles/mixins';
+
+// Other Carbon settings.
+// TODO: @import 'carbon-components/scss/globals/grid/grid'; if needed
+
+// Guidebanner uses the following Carbon components:
+// Button, Link
+
+// Guidebanner uses the following Carbon for IBM Products components:
+// TODO: @import(s) of IBM Products component styles used by Guidebanner
+
+@mixin when-collapsed($selector: '&') {
+  .#{$pkg-prefix}--guidebanner__collapsible-collapsed #{$selector} {
+    @content;
+  }
+}
+
+// Define all component styles in a mixin which is then exported using
+// the Carbon import-once mechanism.
+@mixin guidebanner {
+  // The block part of our conventional BEM class names (blockClass__E--M).
+  $block-class: #{$pkg-prefix}--guidebanner;
+
+  // Each GuidebannerElement is contained in a CarouselItem.
+  $carousel-item: #{$pkg-prefix}--carousel__item;
+
+  .#{$block-class} {
+    $horizontal-margin: rem(52px);
+    $purple-1: #9b63ff;
+    $purple-2: #7f3ae7;
+    $purple-3: #7433e3;
+
+    position: relative;
+    background: linear-gradient(90deg, $blue-90 0%, $purple-70 100%);
+    background-color: $blue-90;
+
+    &__icon-idea {
+      position: absolute;
+      top: $spacing-05;
+      left: $spacing-05;
+
+      path {
+        fill: $gray-10;
+      }
+    }
+
+    &__title {
+      @include carbon--type-style('productive-heading-02');
+
+      padding: $spacing-05 rem(175px) 0 $horizontal-margin;
+      color: $gray-10;
+    }
+
+    // Carbon Button "icon-only" overrides
+    &__close-button {
+      // Force dark theme (i.e. white tooltips)
+      @include carbon--theme($carbon--theme--g100, true);
+
+      position: absolute !important;
+      top: 0;
+      right: 0;
+      width: $spacing-07;
+      height: $spacing-07;
+      min-height: $spacing-07 !important;
+
+      &:active,
+      &:hover {
+        background-color: $purple-3 !important;
+      }
+
+      svg {
+        margin-left: rem(-4px) !important;
+
+        path {
+          fill: $white-0 !important;
+        }
+      }
+    }
+
+    // Specify Carousel look and feel.
+    &__carousel {
+      padding: 0 0 $spacing-05 0;
+      color: $gray-10;
+
+      @include when-collapsed() {
+        margin-bottom: 0;
+      }
+
+      // Each GuidebannerElement is wrapped in a CarouselItem.
+      .#{$carousel-item} {
+        .#{$block-class}__element {
+          display: flex;
+          width: carbon--mini-units(50);
+          max-height: carbon--mini-units(64);
+          flex-flow: column;
+          flex-shrink: 0;
+          padding-left: $horizontal-margin;
+          margin: $spacing-05 0 0 0;
+          opacity: 1;
+          scroll-snap-align: start;
+          transition: max-height 50ms carbon--motion(exit, productive),
+            margin-top 50ms carbon--motion(exit, productive),
+            opacity 300ms carbon--motion(exit, productive);
+
+          @include when-collapsed() {
+            max-height: $spacing-03;
+            margin-top: 0;
+            opacity: 0;
+          }
+
+          &-title {
+            @include carbon--type-style('productive-heading-01');
+
+            margin: $spacing-05 0 0 0;
+          }
+
+          &-content {
+            @include carbon--type-style('body-long-01');
+
+            margin-bottom: $spacing-05;
+          }
+
+          &-buttons {
+            .bx--btn--tertiary {
+              border-color: $white-0;
+              color: $white-0;
+
+              &:active,
+              &:hover {
+                border-color: $white-0;
+                background-color: $white-0;
+                color: $gray-100;
+              }
+            }
+
+            .bx--btn:not(.bx--btn--tertiary) {
+              margin-left: calc(-1 * $spacing-05);
+              color: $blue-30;
+
+              &:active,
+              &:hover {
+                background-color: $purple-2;
+                color: $gray-10;
+              }
+            }
+
+            .#{$block-class}__element-link {
+              color: $blue-30;
+
+              &:visited {
+                color: $blue-30;
+              }
+
+              &:active,
+              &:hover {
+                color: $blue-20;
+              }
+            }
+          }
+        }
+
+        &:last-child {
+          .#{$block-class}__element {
+            width: carbon--mini-units(56);
+            padding-right: $horizontal-margin;
+          }
+        }
+      }
+    }
+
+    &__navigation {
+      display: flex;
+      border-top: rem(1px) solid $purple-60;
+
+      @include when-collapsed() {
+        border-top: none;
+      }
+
+      .#{$block-class}__toggle-button {
+        margin-left: calc($horizontal-margin - rem(18px));
+        color: $blue-30;
+
+        &:active,
+        &:hover {
+          background-color: $purple-3;
+          color: $gray-10;
+        }
+      }
+
+      // Push back and next buttons to the right
+      .#{$block-class}__back-button {
+        margin-left: auto;
+      }
+
+      // Carbon Button (icon-only) overrides
+      .#{$block-class}__back-button,
+      .#{$block-class}__next-button {
+        // Force dark theme (i.e. white tooltips)
+        @include carbon--theme($carbon--theme--g100, true);
+        @include when-collapsed() {
+          display: none !important;
+        }
+
+        &:active,
+        &:hover {
+          background-color: $purple-3;
+        }
+
+        svg path {
+          fill: $white-0 !important;
+        }
+
+        &--disabled svg path {
+          fill: $purple-1 !important;
+        }
+      }
+    }
+
+    // Carbon Button tooltip overrides
+    &__close-button,
+    &__back-button,
+    &__next-button {
+      &::before {
+        // Force tooltip's caret to look like it's connected to its label.
+        z-index: 6001 !important;
+      }
+    }
+  }
+}
+
+@include exports('guidebanner') {
+  @include guidebanner;
+}

package/scss/components/Guidebanner/_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 './guidebanner';

package/scss/components/Guidebanner/_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';
+
+#root {
+  overflow-x: hidden;
+}
+
+// The layout has been changed from middle/center to top/left, because
+// the component can expand, and it looks weird when expanding vertically
+// from the middle of the page instead of "dropping down" from above.
+// Margin provides spacing from the edge of the viewport.
+.non-linear-reading-stories__viewport {
+  margin: 0;
+}

package/scss/components/InlineTip/_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 './inline-tip';

package/scss/components/InlineTip/_inline-tip.scss

@@ -0,0 +1,231 @@
+//
+// 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 InlineTip 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.
+ * 
+ * We are triggering a *large* amount of linting errors.
+ * So, we're adding 2 "disable" rules for the file instead of 25 
+ * individual rules.
+ */
+
+/* stylelint-disable declaration-no-important */
+/* stylelint-disable carbon/theme-token-use */
+
+// Standard imports.
+@import '../../global/styles/project-settings';
+@import '../../global/styles/mixins';
+
+// Other Carbon settings.
+// TODO: @import 'carbon-components/scss/globals/grid/grid'; if needed
+
+// InlineTip uses the following Carbon components:
+// TODO: @import(s) of Carbon component styles used by InlineTip
+
+// InlineTip uses the following Carbon for IBM Products components:
+// TODO: @import(s) of IBM Products component styles used by InlineTip
+
+// Define all component styles in a mixin which is then exported using
+// the Carbon import-once mechanism.
+@mixin inline-tip {
+  // The block part of our conventional BEM class names (blockClass__E--M).
+  $block-class: #{$pkg-prefix}--inline-tip;
+
+  // Images and animation are the same, fixed size
+  $media-height: rem(118px);
+  $media-width: calc(#{$media-height} * 2);
+
+  .#{$block-class} {
+    $purple: #7f3ae7;
+
+    position: relative;
+    display: flex;
+    background: linear-gradient(90deg, $blue-90 0%, $purple-70 100%);
+
+    // layout only: wide
+    &__wide {
+      padding: $spacing-05 $spacing-10 $spacing-05 $spacing-09;
+
+      // layout: wide, with image
+      &.#{$block-class}__has-media {
+        padding-right: $spacing-09;
+
+        .#{$block-class}__media {
+          padding-left: $spacing-10;
+
+          img {
+            display: block;
+            height: $media-height;
+          }
+
+          svg {
+            width: $media-width !important;
+            height: $media-height !important;
+          }
+        }
+      }
+    }
+
+    // layout only: narrow
+    &__narrow {
+      flex-direction: column-reverse;
+      /* stylelint-disable-next-line carbon/layout-token-use */
+      padding: rem(52px) $spacing-07 $spacing-05 $spacing-05;
+
+      // layout: narrow, with image
+      &.#{$block-class}__has-media {
+        padding-top: $spacing-07;
+        padding-right: $spacing-05;
+      }
+
+      .#{$block-class}__media {
+        padding-bottom: $spacing-05;
+
+        img {
+          width: 100%;
+        }
+      }
+
+      .#{$block-class}__content {
+        padding-right: $spacing-05;
+      }
+
+      .#{$block-class}__footer {
+        justify-content: space-between;
+
+        .#{$block-class}__close-btn {
+          margin-right: calc(-1 * $spacing-05);
+        }
+      }
+    }
+
+    // All links in use by this component and provided by the user must reflect the 'dark' theme.
+    a {
+      color: $blue-30;
+
+      &:visited,
+      &:hover,
+      &:visited:hover {
+        color: $blue-30;
+      }
+    }
+
+    &__title {
+      @include carbon--type-style('productive-heading-01');
+
+      color: $white-0;
+    }
+
+    &__body {
+      @include carbon--type-style('body-short-01');
+
+      color: $gray-10;
+
+      p {
+        @include carbon--type-style('body-short-01');
+
+        margin-bottom: $spacing-03;
+        font-size: inherit;
+        line-height: inherit;
+
+        &:last-of-type {
+          margin-bottom: 0;
+        }
+      }
+
+      .#{$block-class}__secondary-btn {
+        margin-top: $spacing-03;
+
+        .#{$block-class}__button {
+          margin-left: calc(-1 * $spacing-05);
+          color: $blue-30;
+
+          &:active,
+          &:hover {
+            background-color: $purple;
+            color: $gray-10;
+          }
+        }
+      }
+    }
+
+    &__footer {
+      display: flex;
+      padding-top: $spacing-05;
+
+      &:empty {
+        display: none;
+      }
+    }
+
+    // When 'collapsed', a text-only preview with ellipsis is shown.
+    &__preview-text {
+      display: -webkit-box;
+      overflow: hidden;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 1;
+    }
+
+    &__icon-idea {
+      position: absolute;
+      width: rem(20px);
+      color: $white-0;
+      inset: $spacing-05 0 0 $spacing-05;
+    }
+
+    &__close-icon {
+      position: absolute !important;
+      top: 0;
+      right: 0;
+      width: $spacing-07;
+      height: $spacing-07;
+      min-height: $spacing-07 !important;
+      /* stylelint-disable-next-line carbon/layout-token-use */
+      padding: 0 0 0 rem(6px) !important;
+      color: $white-0;
+
+      &:active,
+      &:hover {
+        background-color: $purple !important;
+        color: $text-01 !important;
+      }
+
+      svg > path {
+        margin: 0;
+        fill: $white-0 !important;
+      }
+    }
+
+    &__toggle-btn {
+      border: none;
+      margin: 0 $spacing-05 0 calc(-1 * $spacing-05) !important;
+      color: $blue-30 !important;
+
+      &:hover {
+        background-color: $purple-70-hover !important;
+        color: $gray-10 !important;
+      }
+    }
+
+    &__close-btn {
+      border: rem(1px) solid $white-0 !important;
+      color: $white-0 !important;
+
+      &:active,
+      &:hover {
+        background-color: $gray-10 !important;
+        color: $gray-100 !important;
+      }
+    }
+  }
+}
+
+@include exports('inline-tip') {
+  @include inline-tip;
+}

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

@@ -0,0 +1,21 @@
+//
+// 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';
+
+.storybook--inline-tip-wide {
+  max-width: 784px;
+  // Allow enough space above the component to show the "X" tooltip.
+  margin-top: $spacing-07;
+}
+
+.storybook--inline-tip-narrow {
+  max-width: 348px;
+  margin-top: $spacing-07;
+}
+
+// TODO: add any additional styles used by InlineTip.stories.js

package/scss/components/SteppedAnimatedMedia/_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 './stepped-animated-media';

package/scss/components/SteppedAnimatedMedia/_stepped-animated-media.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
+
+// SteppedAnimatedMedia uses the following Carbon components:
+// TODO: @import(s) of Carbon component styles used by SteppedAnimatedMedia
+
+// SteppedAnimatedMedia uses the following Carbon for IBM Products components:
+// TODO: @import(s) of IBM Products component styles used by SteppedAnimatedMedia
+
+// Define all component styles in a mixin which is then exported using
+// the Carbon import-once mechanism.
+@mixin stepped-animated-media {
+  // The block part of our conventional BEM class names (blockClass__E--M).
+  $block-class: #{$pkg-prefix}--stepped-animated-media;
+
+  .#{$block-class} {
+    // TODO: Styles.
+  }
+}
+
+@include exports('stepped-animated-media') {
+  @include stepped-animated-media;
+}

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

@@ -0,0 +1,12 @@
+//
+// 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';
+
+.stepped-animated-media-stories__viewport {
+  width: carbon--mini-units(50);
+}

package/scss/components/_index.scss

@@ -52,4 +52,8 @@
 
 @import './InlineEditV1/index';
 @import './InlineEditV2/index';
+@import './Carousel/index';
+@import './Guidebanner/index';
 @import './NonLinearReading/index';
+@import './InlineTip/index';
+@import './SteppedAnimatedMedia/index';