@carbon/ibm-products 2.23.0 → 2.24.0

package/scss/components/InterstitialScreen/_interstitial-screen.scss

@@ -0,0 +1,276 @@
+//
+// Copyright IBM Corp. 2024, 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 declaration-no-important */
+
+// Standard imports.
+@use '../../global/styles/project-settings' as c4p-settings;
+@use '../../global/styles/mixins';
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/react/scss/colors' as *;
+@use '@carbon/styles/scss/type';
+
+// Other Carbon settings if needed
+// TODO: @use '@carbon/styles/scss/grid';
+// or
+// TODO: @use '@carbon/react/scss/grid';
+
+// InterstitialScreen uses the following Carbon for IBM Products components:
+// TODO: @use(s) of IBM Products component styles used by InterstitialScreen
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--interstitial-screen;
+$carousel: #{c4p-settings.$pkg-prefix}--carousel;
+$carousel-item: #{c4p-settings.$pkg-prefix}--carousel__item;
+$one-grid-column: calc(100% / 16);
+
+.#{$block-class} {
+  $block: &;
+
+  .#{$carousel} {
+    display: flex;
+    min-height: 100%;
+    flex-direction: column;
+
+    &__elements-container {
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+    }
+
+    &__elements {
+      flex: 1;
+    }
+  }
+
+  position: fixed;
+  z-index: 6001;
+  top: 0;
+  right: 0;
+  left: 0;
+
+  #{$block}--auto-height-container {
+    flex: 1;
+  }
+
+  &--body {
+    overflow: hidden auto;
+    flex-grow: 1;
+    padding: 0;
+    margin: 0;
+    background-color: $background;
+  }
+
+  &--body-grid {
+    height: 100%;
+    padding: 0 !important;
+  }
+
+  &--body-row {
+    height: 100%;
+  }
+
+  &--progress {
+    margin: $spacing-07 $spacing-05 $spacing-04;
+  }
+
+  &__carousel {
+    height: 100%;
+    .#{$carousel-item} {
+      flex: 0 0 100% !important;
+      scroll-snap-align: start;
+    }
+  }
+
+  &--container {
+    min-width: 47rem;
+    max-width: 82rem;
+    margin: calc($spacing-10 * 2) auto; // stylelint-disable-line carbon/layout-token-use
+    background-color: $background;
+  }
+
+  &--media-container {
+    overflow: hidden;
+  }
+
+  &--media {
+    width: 100%;
+    height: 100%;
+
+    margin-right: calc($spacing-08 * -1);
+    @include breakpoint-down(xlg) {
+      margin-right: calc($spacing-07 * -1);
+    }
+  }
+
+  &--stepped-animated-media {
+    overflow: hidden;
+    height: 100%;
+  }
+
+  &--internal-body {
+    padding: 0 !important;
+    margin: 0 !important;
+  }
+
+  // HEADER
+  &--internal-header {
+    position: relative;
+    min-height: $spacing-09;
+    margin-bottom: 0 !important;
+    background-color: $background;
+
+    &:empty {
+      min-height: 0;
+    }
+
+    h2 {
+      @include type.type-style('productive-heading-04');
+
+      padding: 0 $spacing-05 $spacing-06;
+
+      &:empty {
+        padding: 0;
+      }
+    }
+
+    &--has-title {
+      border-bottom: 1px solid $border-subtle-01;
+      background: $layer-01;
+
+      #{$block}--progress {
+        margin-top: 0;
+      }
+    }
+    > #{$block}--close-icon {
+      position: absolute !important;
+      z-index: 1;
+      top: 0;
+      right: 0;
+      width: $spacing-09;
+    }
+  }
+
+  // FOOTER
+  &--footer {
+    display: flex;
+    width: 100%;
+    flex-direction: row;
+    justify-content: flex-end;
+    border-top: 1px solid $border-subtle-01;
+    background: $background;
+
+    #{$block}--prev-btn,
+    #{$block}--next-btn,
+    #{$block}--start-btn {
+      width: calc($one-grid-column * 3);
+      min-width: 12.5rem;
+      padding-block-end: $spacing-07;
+    }
+
+    #{$block}--skip-btn {
+      max-width: none;
+      flex-grow: 1 !important;
+      padding-left: $spacing-07 !important;
+    }
+  }
+
+  &--footer-controls {
+    display: flex;
+    flex-direction: row;
+    // flex: 1;
+    margin-left: auto;
+  }
+
+  // MODAL (settings exclusive of "FULL SCREEN")
+  &--modal {
+    #{$block}--content {
+      margin-top: 0;
+    }
+
+    #{$block}--internal-header {
+      &:has(> :nth-child(2)) {
+        min-height: initial;
+      }
+    }
+
+    &:has(> :nth-child(1)) {
+      min-height: initial;
+    }
+  }
+
+  // FULL SCREEN (settings exclusive of "MODAL")
+  &--full-screen {
+    #{$block}--container {
+      display: flex;
+      max-width: 100vw;
+      height: 100vh;
+      flex-direction: column;
+      padding: 0;
+      margin: 0;
+    }
+
+    // e.g. "IBM Cloud Pak | Product"
+    // ..."IBM Cloud Pak"
+    #{$block}--header {
+      @include type.type-style('body-long-01');
+
+      height: $spacing-09;
+      padding-left: $spacing-05;
+      border-bottom: 1px solid $border-subtle-01;
+      /* stylelint-disable-next-line carbon/theme-token-use */
+      background-color: $gray-100;
+      /* stylelint-disable-next-line carbon/theme-token-use */
+      color: $gray-10;
+      /* stylelint-disable-next-line carbon/type-token-use */
+      font-weight: normal !important; // overrides type style above
+      /* stylelint-disable-next-line carbon/type-token-use */
+      line-height: $spacing-09 !important;
+
+      b {
+        /* stylelint-disable-next-line carbon/type-token-use */
+        font-weight: 600;
+      }
+    }
+
+    #{$block}--internal-header {
+      > h2 {
+        padding: $spacing-05 $spacing-08 0;
+      }
+
+      #{$block}--progress {
+        margin: $spacing-10 $spacing-08 $spacing-04;
+
+        @include breakpoint-down(xlg) {
+          margin-left: $spacing-07;
+        }
+      }
+
+      &--has-title {
+        #{$block}--progress {
+          margin-top: $spacing-06;
+        }
+      }
+
+      &:has(> :nth-child(1)) {
+        min-height: initial;
+      }
+    }
+
+    #{$block}--footer {
+      #{$block}--skip-btn {
+        padding-left: $spacing-08 !important;
+        @include breakpoint-down(xlg) {
+          padding-left: $spacing-07 !important;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,9 @@
+//
+// Copyright IBM Corp. 2024, 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 InterstitialScreenView in this file.
+// InterstitialScreenView uses the following Carbon components:

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

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

package/scss/components/InterstitialScreenView/_index.scss

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

package/scss/components/InterstitialScreenView/_interstitial-screen-view.scss

@@ -0,0 +1,25 @@
+//
+// Copyright IBM Corp. 2024, 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';
+
+// Other Carbon settings if needed
+// TODO: @use '@carbon/styles/scss/grid';
+// or
+// TODO: @use '@carbon/react/scss/grid';
+
+// InterstitialScreenView uses the following Carbon for IBM Products components:
+// TODO: @use(s) of IBM Products component styles used by InterstitialScreenView
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--interstitial-screen-view;
+
+.#{$block-class} {
+  height: 100%;
+}

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

@@ -0,0 +1,9 @@
+//
+// Copyright IBM Corp. 2024, 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 InterstitialScreenViewModule in this file.
+// InterstitialScreenViewModule uses the following Carbon components:

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

@@ -0,0 +1,9 @@
+//
+// Copyright IBM Corp. 2024, 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 './interstitial-screen-view-module';

package/scss/components/InterstitialScreenViewModule/_index.scss

@@ -0,0 +1,8 @@
+//
+// Copyright IBM Corp. 2024, 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 './interstitial-screen-view-module';

package/scss/components/InterstitialScreenViewModule/_interstitial-screen-view-module.scss

@@ -0,0 +1,59 @@
+//
+// Copyright IBM Corp. 2024, 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 */
+
+// Standard imports.
+@use '../../global/styles/project-settings' as c4p-settings;
+@use '../../global/styles/mixins';
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/breakpoint' as *;
+
+// Other Carbon settings if needed
+// TODO: @use '@carbon/styles/scss/grid';
+// or
+// TODO: @use '@carbon/react/scss/grid';
+
+// InterstitialScreenViewModule uses the following Carbon for IBM Products components:
+// TODO: @use(s) of IBM Products component styles used by InterstitialScreenViewModule
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+
+$interstitial-block-class: #{c4p-settings.$pkg-prefix}--interstitial-screen;
+$block-class: #{c4p-settings.$pkg-prefix}--interstitial-screen-view-module;
+
+.#{$block-class} {
+  margin: $spacing-07;
+
+  &--heading {
+    @include type.type-style('heading-05');
+
+    margin-bottom: $spacing-07;
+  }
+
+  &--body {
+    @include type.type-style('body-01');
+  }
+}
+.#{$interstitial-block-class} {
+  &--modal {
+    .#{$block-class} {
+      margin: $spacing-11 $spacing-07;
+    }
+  }
+
+  &--full-screen {
+    .#{$block-class} {
+      margin: $spacing-12 $spacing-08;
+
+      @include breakpoint-down(xlg) {
+        margin: $spacing-12 $spacing-07;
+      }
+    }
+  }
+}

package/scss/components/PageHeader/_page-header.scss

@@ -362,7 +362,6 @@ $right-section-alt-width: 100% - $left-section-alt-width;
   .#{$block-class}__title-row {
     --title-row-margin-top: #{$spacing-01}; /* spacing needed in case of editable title, otherwise top of focus indicator hidden */
 
-    margin-top: var(--title-row-margin-top);
     margin-bottom: 0;
     transform: translateY(
       $spacing-01

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

@@ -0,0 +1,9 @@
+//
+// Copyright IBM Corp. 2024, 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 SearchBar in this file.
+// SearchBar uses the following Carbon components:

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

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

package/scss/components/SearchBar/_index.scss

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

package/scss/components/SearchBar/_search-bar.scss

@@ -0,0 +1,26 @@
+//
+// Copyright IBM Corp. 2024, 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 '@carbon/styles/scss/utilities' as *;
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--search-bar;
+
+.#{$block-class} {
+  position: relative;
+  display: flex;
+
+  .#{c4p-settings.$pkg-prefix}--search-bar__scopes {
+    .#{c4p-settings.$carbon-prefix}--label {
+      position: absolute;
+    }
+  }
+}

package/scss/components/SidePanel/_side-panel.scss

@@ -99,6 +99,12 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
     --#{$block-class}--actions-height: #{$spacing-09};
   }
 
+  &.#{$block-class}__container--slide-in,
+  &.#{$block-class}__container:not(:has(+ .#{$block-class}__overlay)),
+  &.#{$block-class}__container--has-no-overlay {
+    box-shadow: 0 $spacing-01 $spacing-02 $overlay;
+  }
+
   .#{$block-class}__actions-container {
     width: 100%;
   }
@@ -110,11 +116,10 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
     left: 0;
     border-right: 1px solid $border-subtle-02;
   }
-
-  &.#{$block-class}__container--slide-in,
-  &.#{$block-class}__container:not(:has(+ .#{$block-class}__overlay)),
-  &.#{$block-class}__container--has-no-overlay {
-    box-shadow: 0 $spacing-01 $spacing-02 $overlay;
+  &.#{$block-class}__container.#{$block-class}__container--has-slug {
+    border-color: transparent;
+    box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow,
+      0 4px 10px 2px $ai-drop-shadow;
   }
 
   .#{$block-class}__header {
@@ -304,8 +309,8 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
     padding-top: $spacing-03;
   }
 
-  &.#{$block-class}__container--has-slug .#{$block-class}__inner-content {
-    @include utilities.ai-gradient('bottom');
+  &.#{$block-class}__container--has-slug .#{$block-class}--scrolls {
+    @include utilities.callout-gradient('default', 0, 'layer');
   }
 
   .#{$block-class}__inner-content.#{$block-class}__inner-content--static {

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

@@ -47,4 +47,15 @@
 @use './Datagrid/index-with-carbon' as *;
 @use './EditUpdateCards/index-with-carbon' as *;
 @use './SimpleHeader/index-with-carbon' as *;
+@use './InterstitialScreen/index-with-carbon' as *;
+@use './InterstitialScreenView/index-with-carbon' as *;
+@use './InterstitialScreenViewModule/index-with-carbon' as *;
+@use './Coachmark/index-with-carbon' as *;
+@use './CoachmarkBeacon/index-with-carbon' as *;
+@use './CoachmarkButton/index-with-carbon' as *;
+@use './CoachmarkFixed/index-with-carbon' as *;
+@use './CoachmarkOverlayElement/index-with-carbon' as *;
+@use './CoachmarkOverlayElements/index-with-carbon' as *;
+@use './CoachmarkStack/index-with-carbon' as *;
 @use './DelimitedList/index-with-carbon' as *;
+@use './SearchBar/index-with-carbon' as *;

package/scss/components/_index.scss

@@ -14,6 +14,13 @@
 @use './ActionSet';
 @use './ButtonMenu';
 @use './Cascade';
+@use './Coachmark';
+@use './CoachmarkBeacon';
+@use './CoachmarkButton';
+@use './CoachmarkFixed';
+@use './CoachmarkOverlayElement';
+@use './CoachmarkOverlayElements';
+@use './CoachmarkStack';
 @use './ComboButton';
 @use './CreateFullPage';
 @use './CreateModal';
@@ -55,4 +62,8 @@
 @use './Guidebanner';
 @use './InlineTip';
 @use './NonLinearReading';
+@use './InterstitialScreen';
+@use './InterstitialScreenView';
+@use './InterstitialScreenViewModule';
 @use './DelimitedList';
+@use './SearchBar';