@carbon/ibm-products 2.17.1 → 2.18.0

package/scss/components/NonLinearReading/_non-linear-reading.scss

@@ -0,0 +1,122 @@
+//
+// 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/layout-token-use */
+/* stylelint-disable function-no-unknown */
+
+// Standard imports.
+@use '@carbon/layout/scss/convert' as *;
+@use '@carbon/react/scss/colors' as *;
+@use '@carbon/styles/scss/components/button/tokens' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/themes';
+@use '@carbon/styles/scss/type';
+@use '../../global/styles/project-settings' as c4p-settings;
+
+@keyframes fade {
+  0% {
+    opacity: 0;
+  }
+
+  15% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--non-linear-reading;
+
+.#{$block-class}__dark {
+  @include theme(themes.$g100, true);
+}
+
+// CLOSED/COLLAPSED STATE, DEFAULT
+.#{$block-class} .#{$block-class}__keyword {
+  height: to-rem(20px);
+  padding-top: 0;
+  padding-right: to-rem(3px);
+  border-width: to-rem(1px);
+  border-style: solid;
+  border-color: $button-tertiary;
+  border-radius: $spacing-04;
+  background-color: transparent;
+  color: $button-tertiary;
+  white-space: nowrap;
+}
+.#{$block-class} .#{$block-class}__keyword:hover {
+  border-color: $button-tertiary;
+  background-color: $button-tertiary;
+  color: $text-inverse;
+}
+// Disable browser's default focus outline.
+// We will provide all the focus/outline styling below.
+.#{$block-class} .#{$block-class}__keyword:focus-visible {
+  outline: none;
+}
+.#{$block-class} .#{$block-class}__keyword:focus {
+  border-color: $text-inverse;
+  background-color: $button-tertiary;
+  box-shadow: 0 0 0 1px $text-inverse, 0 0 0 3px $button-tertiary;
+  color: $text-inverse;
+}
+// The "up" chevron
+.#{$block-class} .#{$block-class}__keyword svg {
+  margin: to-rem(1px) 0 0 0;
+  vertical-align: text-top;
+}
+
+// OPEN/EXPANDED STATE
+.#{$block-class} .#{$block-class}__keyword-open {
+  border-color: $button-tertiary;
+  background-color: $button-tertiary;
+  color: $text-inverse;
+}
+.#{$block-class} .#{$block-class}__keyword-open:hover {
+  border-color: $button-tertiary;
+  background-color: transparent;
+  color: $button-tertiary;
+}
+.#{$block-class} .#{$block-class}__keyword-open:focus {
+  border-color: $text-inverse;
+  background-color: transparent;
+  box-shadow: inset 0 0 0 1px $button-tertiary, 0 0 0 1px $text-inverse,
+    0 0 0 3px $button-tertiary;
+  color: $button-tertiary;
+}
+// The "up" chevron, flipped
+.#{$block-class} .#{$block-class}__keyword-open svg {
+  transform: rotate(180deg);
+}
+
+.#{$block-class} .#{$block-class}__body {
+  @include type.type-style('body-01');
+
+  display: block;
+  padding: $spacing-03 $spacing-04;
+  border-left: to-rem(1.25px) solid $text-primary;
+  margin: $spacing-02 0;
+  // Novice to pro does not always use Carbon defaults/tokens
+  // stylelint-disable-next-line carbon/motion-duration-use, carbon/motion-easing-use
+  animation: fade 600ms;
+
+  /* stylelint-disable-next-line max-nesting-depth */
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+  }
+}
+// The body has an id that must be visible to the button's "aria-controls" property.
+// We *must* render the body with the id to avoid breaking accessibility.
+// When closed: we render but don't display the body and we don't render the "content".
+// When open: we display the body and render the content.
+.#{$block-class} .#{$block-class}__keyword-closed + .#{$block-class}__body {
+  display: none;
+}

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

@@ -45,7 +45,8 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
 @mixin setCommonTitleStyles() {
   display: -webkit-box;
   overflow: hidden;
-  padding-right: $spacing-09;
+  /* stylelint-disable-next-line carbon/layout-token-use -- custom css property set below */
+  padding-right: var(--#{$block-class}--title-padding-right);
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
 }
@@ -61,6 +62,7 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
   --#{$block-class}--content-bottom-padding: #{$spacing-10};
   --#{$block-class}--collapsed-title-y-position: 1rem;
   --#{$block-class}--label-text-height: 0;
+  --#{$block-class}--title-padding-right: #{$spacing-09};
 
   position: fixed;
   // Need to disable stylelint until dart sass namespace support is added
@@ -140,6 +142,9 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
       background-color: transparent;
     }
   }
+  &.#{$block-class}__container--has-slug {
+    --#{$block-class}--title-padding-right: #{$spacing-12};
+  }
   &.#{$block-class}__container-is-animating {
     pointer-events: none;
   }
@@ -174,7 +179,7 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
     @include type.type-style('label-01');
 
     overflow: hidden;
-    padding-right: $spacing-05;
+    padding-right: var(--#{$block-class}--title-padding-right);
     opacity: var(--#{$block-class}--subtitle-opacity);
     text-overflow: ellipsis;
     transform: translateY(var(--#{$block-class}--title-y-position));
@@ -244,6 +249,10 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
     overflow-x: hidden;
   }
 
+  &.#{$block-class}__container--has-slug .#{$block-class}__inner-content {
+    @include utilities.ai-gradient('bottom');
+  }
+
   .#{$block-class}__inner-content-with-actions {
     height: calc(
       100vh - (var(--#{$block-class}--content-bottom-padding) + 2rem)
@@ -330,19 +339,26 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
   }
 
   .#{c4p-settings.$carbon-prefix}--btn.#{$block-class}__close-button {
-    position: absolute;
-    z-index: 5;
-    top: $spacing-03;
-    right: $spacing-05;
     display: flex;
     align-items: center;
     justify-content: center;
+    margin: $spacing-03;
+    margin-bottom: 0;
   }
 
   .#{c4p-settings.$carbon-prefix}--btn.#{$block-class}__close-button
     .#{c4p-settings.$carbon-prefix}--btn__icon {
     margin: 0;
   }
+
+  .#{$block-class}__slug-and-close {
+    position: fixed;
+    z-index: 5;
+    top: 0;
+    right: 0;
+    display: flex;
+  }
+
   .#{$block-class}__body-content {
     padding: $spacing-05;
     padding-top: 0;

package/scss/components/WebTerminal/_web-terminal.scss

@@ -59,7 +59,6 @@ $block-class: #{$pkg-prefix}--web-terminal;
   border-left: 1px solid $gray-90;
   color: $text-primary;
   /* stylelint-disable-next-line  */
-  background-color: $gray-100;
 }
 
 .#{$block-class}__bar {
@@ -85,7 +84,7 @@ $block-class: #{$pkg-prefix}--web-terminal;
 
 // Terminal body styles
 .#{$block-class}__body {
-  height: 100%;
+  height: calc(100vh - #{$spacing-09});
 }
 
 // Terminal wrapper styles

package/scss/components/_Canary/_canary.scss

@@ -1,7 +1,6 @@
 //
-// Copyright IBM Corp. 2020, 2022
+// Copyright IBM Corp. 2020, 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.
 //
-@use '@carbon/styles/scss/components/code-snippet';

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

@@ -0,0 +1,7 @@
+//
+// Copyright IBM Corp. 2020, 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.
+//
+@use '@carbon/styles/scss/components/code-snippet';

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

@@ -0,0 +1,8 @@
+//
+// Copyright IBM Corp. 2020, 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.
+//
+@use './carbon-imports';
+@use './canary';

package/scss/components/_Canary/_index.scss

@@ -0,0 +1,7 @@
+//
+// Copyright IBM Corp. 2020, 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.
+//
+@use './canary';

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

@@ -7,7 +7,7 @@
 
 // Package all scss files here for those that want them all bundled up.
 
-@use './_Canary/canary';
+@use './_Canary/index-with-carbon' as *;
 
 @use './APIKeyModal/index-with-carbon' as *;
 @use './AboutModal/index-with-carbon' as *;

package/scss/components/_index.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2021, 2021
+// Copyright IBM Corp. 2021, 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.
@@ -7,7 +7,7 @@
 
 // Package all scss files here for those that want them all bundled up.
 
-@use './_Canary/canary';
+@use './_Canary';
 
 @use './APIKeyModal';
 @use './AboutModal';
@@ -50,5 +50,8 @@
 @use './EditTearsheetNarrow';
 @use './EditFullPage';
 @use './EditUpdateCards';
+@use './Carousel';
 @use './Checklist';
+@use './Guidebanner';
 @use './InlineTip';
+@use './NonLinearReading';