@carbon/ibm-products 2.17.2 → 2.18.1

package/scss/components/Guidebanner/_guidebanner.scss

@@ -0,0 +1,248 @@
+//
+// 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 a few "disable" rules for the file instead of 60 
+ * 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 */
+/* stylelint-disable function-no-unknown */
+/* stylelint-disable max-nesting-depth */
+
+// Standard imports.
+@use '@carbon/layout/scss/convert' as *;
+@use '@carbon/react/scss/colors' as *;
+@use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/themes';
+@use '@carbon/styles/scss/type' as *;
+@use '../../global/styles/project-settings' as c4p-settings;
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--guidebanner;
+
+// Each GuidebannerElement is contained in a CarouselItem.
+$carousel-item: #{c4p-settings.$pkg-prefix}--carousel__item;
+
+@mixin when-collapsed($selector: '&') {
+  .#{c4p-settings.$pkg-prefix}--guidebanner__collapsible-collapsed
+    #{$selector} {
+    @content;
+  }
+}
+
+$horizontal-margin: to-rem(52px);
+// Guidebanner-specific colors.
+$purple-1: #9b63ff;
+$purple-2: #7f3ae7;
+$purple-3: #7433e3;
+
+.#{$block-class} {
+  // Due to the Guidebanner's dark background,
+  // apply dark theme by default for all elements:
+  // i.e. light text, icons, tooltips, etc.
+  @include theme(themes.$g100, true);
+
+  position: relative;
+  background: linear-gradient(90deg, $blue-90 0%, $purple-70 100%);
+  background-color: $blue-90;
+}
+
+.#{$block-class}__icon-idea {
+  position: absolute;
+  top: $spacing-05;
+  left: $spacing-05;
+
+  path {
+    fill: $gray-10;
+  }
+}
+
+.#{$block-class}__title {
+  @include type-style('heading-compact-02');
+
+  padding: $spacing-05 to-rem(175px) 0 $horizontal-margin;
+  color: $gray-10;
+}
+
+.#{$block-class}__close-button {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+.#{$block-class}__close-button button {
+  width: $spacing-07;
+  height: $spacing-07;
+  min-height: $spacing-07;
+  padding-top: 6px;
+
+  &:active,
+  &:hover {
+    background-color: $purple-3;
+  }
+
+  path {
+    fill: $white-0;
+  }
+}
+
+// Specify Carousel look and feel.
+.#{$block-class}__carousel {
+  padding: 0 0 $spacing-05 0;
+  color: $gray-10;
+
+  @include when-collapsed() {
+    margin-bottom: 0;
+  }
+}
+
+// All carousel elements are 400px wide,
+// except the last one (see below).
+.#{$block-class}__carousel .#{$carousel-item} .#{$block-class}__element {
+  display: flex;
+  width: to-rem(400px); // 25rem
+  max-height: to-rem(512px); // 32rem
+  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 motion(exit, productive),
+    margin-top 50ms motion(exit, productive),
+    opacity 300ms motion(exit, productive);
+
+  @include when-collapsed() {
+    max-height: $spacing-03;
+    margin-top: 0;
+    opacity: 0;
+  }
+}
+// The last carousel item is wider, with more padding-right,
+// to provide more space against the right edge of the carousel.
+.#{$block-class}__carousel
+  .#{$carousel-item}:last-child
+  .#{$block-class}__element {
+  width: to-rem(448px); // 28rem
+  padding-right: $horizontal-margin;
+}
+
+.#{$block-class}__carousel .#{$carousel-item} .#{$block-class}__element-title {
+  @include type-style('heading-compact-01');
+
+  margin: $spacing-05 0 0 0;
+}
+
+.#{$block-class}__carousel .#{$block-class}__element-content {
+  @include type-style('body-01');
+
+  margin-bottom: $spacing-05;
+}
+
+// Button with crossroads icon
+.#{$block-class}__carousel .#{c4p-settings.$carbon-prefix}--btn--tertiary {
+  border-color: $white-0;
+  color: $white-0;
+
+  &:active,
+  &:hover {
+    border-color: $white-0;
+    background-color: $white-0;
+    color: $gray-100;
+  }
+
+  // The "render icon" CSS seems to be missing in the latest Carbon button.
+  // Specifically, getting the icon to move to right-hand side of the content area.
+  // Repeating here.
+  svg {
+    position: absolute;
+    right: 1rem;
+    width: 1rem;
+    height: 1rem;
+    flex-shrink: 0;
+  }
+}
+
+.#{$block-class}__carousel .#{c4p-settings.$carbon-prefix}--btn--ghost {
+  margin-left: calc(-1 * $spacing-05);
+  color: $blue-30;
+
+  &:active,
+  &:hover {
+    background-color: $purple-2;
+    color: $gray-10;
+  }
+}
+
+.#{$block-class}__carousel .#{$block-class}__element-link {
+  color: $blue-30;
+
+  &:visited {
+    color: $blue-30;
+  }
+
+  &:active,
+  &:hover {
+    color: $blue-20;
+  }
+}
+
+.#{$block-class}__navigation {
+  display: flex;
+  border-top: to-rem(1px) solid $purple-60;
+
+  @include when-collapsed() {
+    border-top: none;
+  }
+}
+.#{$block-class}__navigation .#{$block-class}__toggle-button {
+  margin-left: calc($horizontal-margin - to-rem(18px));
+  color: $blue-30;
+
+  &:active,
+  &:hover {
+    background-color: $purple-3;
+    color: $gray-10;
+  }
+}
+
+// Push navigation buttons to the right
+.#{$block-class}__navigation .#{$block-class}__back-button {
+  margin-left: auto;
+}
+// Hide navigation buttons when collapsed
+.#{$block-class}__navigation .#{$block-class}__back-button,
+.#{$block-class}__navigation .#{$block-class}__next-button {
+  @include when-collapsed() {
+    display: none;
+  }
+}
+.#{$block-class}__navigation .#{$block-class}__back-button button,
+.#{$block-class}__navigation .#{$block-class}__next-button button {
+  &:active,
+  &:hover {
+    background-color: $purple-3;
+  }
+
+  path {
+    fill: $white-0;
+  }
+
+  &[disabled] path {
+    fill: $purple-1;
+  }
+}

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

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

package/scss/components/Guidebanner/_index.scss

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

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

@@ -0,0 +1,6 @@
+//
+// Copyright IBM Corp. 2020, 2021
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//

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

@@ -0,0 +1,9 @@
+//
+// Copyright IBM Corp. 2022, 2022
+//
+// 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 './_non-linear-reading';

package/scss/components/NonLinearReading/_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.
+//
+
+@use './non-linear-reading';

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