@carbon/ibm-products 1.64.0 → 1.66.0

package/lib/global/js/package-settings.js

@@ -80,6 +80,9 @@ var defaults = {
     GuidebannerElementButton: false,
     GuidebannerElementLink: false,
     NonLinearReading: false,
+    InterstitialScreen: false,
+    InterstitialScreenView: false,
+    InterstitialScreenViewModule: false,
     Checklist: false,
     Coachmark: false,
     CoachmarkBeacon: false,
@@ -88,6 +91,7 @@ var defaults = {
     CoachmarkOverlayElement: false,
     CoachmarkOverlayElements: false,
     CoachmarkStack: false
+
     /* new component flags here - comment used by generate CLI */
   },
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "1.64.0",
+  "version": "1.66.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -97,5 +97,5 @@
     "react": "^16.8.6 || ^17.0.1",
     "react-dom": "^16.8.6 || ^17.0.1"
   },
-  "gitHead": "8d199ba7fdf1afcd494af8771abd2483c197d319"
+  "gitHead": "7af504361db8089815fc8527da02eaad1871362e"
 }

package/scss/components/InterstitialScreen/_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 './interstitial-screen';

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

@@ -0,0 +1,266 @@
+// 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';
+
+// stylelint-disable carbon/layout-token-use
+// stylelint-disable declaration-no-important
+// stylelint-disable carbon/type-token-use
+
+// Define all component styles in a mixin which is then exported using
+// the Carbon import-once mechanism.
+@mixin interstitial-screen {
+  // The block part of our conventional BEM class names (blockClass__E--M).
+  $block-class: #{$pkg-prefix}--interstitial-screen;
+  $carousel: #{$pkg-prefix}--carousel;
+  $carousel-item: #{$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: $ui-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;
+      }
+    }
+
+    &--container {
+      min-width: carbon--mini-units(94);
+      max-width: 1312px;
+      margin: calc($spacing-10 * 2) auto;
+      background-color: $ui-background;
+    }
+
+    &--media-container {
+      overflow: hidden;
+    }
+
+    &--media {
+      width: 100%;
+      height: 100%;
+
+      margin-right: calc($spacing-08 * -1);
+      @include carbon--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: $ui-background;
+
+      &:empty {
+        min-height: 0;
+      }
+
+      h2 {
+        @include carbon--type-style('productive-heading-04');
+
+        padding: 0 $spacing-05 $spacing-06;
+
+        &:empty {
+          padding: 0;
+        }
+      }
+
+      &--has-title {
+        border-bottom: 1px solid $ui-03;
+        background: $ui-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 $ui-03;
+      background: $ui-background;
+
+      #{$block}--prev-btn,
+      #{$block}--next-btn,
+      #{$block}--start-btn {
+        width: calc($one-grid-column * 3);
+        min-width: carbon--mini-units(25);
+      }
+
+      #{$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 carbon--type-style('body-long-01');
+
+        height: $spacing-09;
+        padding-left: $spacing-05;
+        border-bottom: 1px solid $ui-03;
+        /* stylelint-disable-next-line carbon/theme-token-use */
+        background-color: $gray-100;
+        /* stylelint-disable-next-line carbon/theme-token-use */
+        color: $gray-10;
+        font-weight: normal !important; // overrides type style above
+        line-height: $spacing-09 !important;
+
+        b {
+          font-weight: var(--cds-heading-01-font-weight, 600);
+        }
+      }
+
+      #{$block}--internal-header {
+        > h2 {
+          padding: $spacing-05 $spacing-08 0;
+        }
+
+        #{$block}--progress {
+          margin: $spacing-10 $spacing-08 $spacing-04;
+
+          @include carbon--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 carbon--breakpoint-down(xlg) {
+            padding-left: $spacing-07 !important;
+          }
+        }
+      }
+    }
+  }
+}
+
+@include exports('interstitial-screen') {
+  @include interstitial-screen;
+}

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

@@ -0,0 +1,59 @@
+/* stylelint-disable max-nesting-depth */
+//
+// 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';
+
+.CustomLayout {
+  display: flex;
+  flex-wrap: wrap;
+  padding: $spacing-07;
+  gap: $spacing-05;
+}
+
+.storyCardExample {
+  width: 20%;
+  height: 350px;
+  flex-grow: 1;
+  padding: $spacing-06;
+  border: 1px solid $ui-05;
+  background-color: $ui-03;
+}
+
+// .GenericModalView {
+//   /* stylelint-disable-next-line declaration-no-important */
+//   margin-bottom: $spacing-12 !important;
+// }
+.GenericView {
+  /* stylelint-disable-next-line declaration-no-important */
+  margin-top: $spacing-12 !important;
+}
+
+.NoImageExampleModal {
+  $one-grid-column: calc(100% / 16);
+  $md: 672px;
+
+  width: calc($one-grid-column * 16);
+
+  @media (min-width: $md) {
+    width: calc($one-grid-column * 12);
+  }
+}
+
+.NoImageExampleFullScreen {
+  $one-grid-column: calc(100% / 16);
+  $md: 672px;
+  $lg: 1056px;
+
+  width: calc($one-grid-column * 16);
+  @media (min-width: $md) {
+    width: calc($one-grid-column * 12);
+  }
+  @media (min-width: $lg) {
+    width: calc($one-grid-column * 8);
+  }
+}

package/scss/components/InterstitialScreenView/_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 './interstitial-screen-view';

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

@@ -0,0 +1,25 @@
+//
+// 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 interstitial-screen-view {
+  // The block part of our conventional BEM class names (blockClass__E--M).
+  $block-class: #{$pkg-prefix}--interstitial-screen-view;
+
+  .#{$block-class} {
+    height: 100%;
+  }
+}
+
+@include exports('interstitial-screen-view') {
+  @include interstitial-screen-view;
+}

package/scss/components/InterstitialScreenView/_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 InterstitialScreenView.stories.js

package/scss/components/InterstitialScreenViewModule/_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 './interstitial-screen-view-module';

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

@@ -0,0 +1,54 @@
+//
+// 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 interstitial-screen-view-module {
+  // The block part of our conventional BEM class names (blockClass__E--M).
+  $interstitial-block-class: #{$pkg-prefix}--interstitial-screen;
+  $block-class: #{$interstitial-block-class}-view-module;
+
+  .#{$block-class} {
+    margin: $spacing-07;
+
+    &--heading {
+      @include carbon--type-style('expressive-heading-05');
+
+      margin-bottom: $spacing-07;
+    }
+
+    &--body {
+      @include carbon--type-style('body-long-01');
+    }
+  }
+
+  .#{$interstitial-block-class} {
+    &--modal {
+      .#{$block-class} {
+        margin: $spacing-11 $spacing-07;
+      }
+    }
+
+    &--full-screen {
+      .#{$block-class} {
+        margin: $spacing-12 $spacing-08;
+
+        @include carbon--breakpoint-down(xlg) {
+          margin: $spacing-12 $spacing-07;
+        }
+      }
+    }
+  }
+}
+
+@include exports('interstitial-screen-view-module') {
+  @include interstitial-screen-view-module;
+}

package/scss/components/InterstitialScreenViewModule/_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 InterstitialScreenViewModule.stories.js

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

@@ -73,8 +73,7 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
         @include setPanelSize($size_value);
         .#{$block-class}__title-container.#{$block-class}__title-container--no-title-animation,
         .#{$block-class}__subtitle-text.#{$block-class}__subtitle-text-no-animation,
-        .#{$block-class}__action-toolbar.#{$block-class}__action-toolbar-no-animation,
-        .#{$block-class}__actions-container.#{$action-set-block-class}--#{$size} {
+        .#{$block-class}__action-toolbar.#{$block-class}__action-toolbar-no-animation {
           @include setPanelSize($size_value);
         }
       }
@@ -87,6 +86,9 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
         border-right: 1px solid $decorative-01;
       }
     }
+    .#{$block-class}__actions-container {
+      width: 100%;
+    }
     &.#{$block-class}__container-with-action-toolbar.#{$block-class}__with-condensed-header {
       .#{$block-class}__title-container {
         &::before {

package/scss/components/_index.scss

@@ -63,4 +63,7 @@
 @import './CoachmarkStack/index';
 @import './InlineTip/index';
 @import './SteppedAnimatedMedia/index';
+@import './InterstitialScreen/index';
+@import './InterstitialScreenView/index';
+@import './InterstitialScreenViewModule/index';
 @import './Checklist/index';