@carbon/ibm-products 1.51.0 → 1.53.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "1.51.0",
+  "version": "1.53.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -77,7 +77,6 @@
     "immutability-helper": "^3.1.1",
     "react-dnd": "^15.1.2",
     "react-dnd-html5-backend": "^15.1.3",
-    "react-resize-detector": "^8.0.3",
     "react-table": "^7.8.0",
     "react-window": "^1.8.8"
   },
@@ -95,5 +94,5 @@
     "react": "^16.8.6 || ^17.0.1",
     "react-dom": "^16.8.6 || ^17.0.1"
   },
-  "gitHead": "fb3bdbfbe2b40dc57f5c9657e83c9ef48ccd2520"
+  "gitHead": "7b07c65caa761dee2617c30cc8d299eed112d718"
 }

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

@@ -8,31 +8,35 @@
 // Standard imports.
 @import '../../global/styles/project-settings';
 
-@mixin term-closed-defaults {
+@mixin keyword-closed-defaults {
+  height: rem(20px);
+  padding-top: 0;
   // stylelint-disable-next-line carbon/layout-token-use
-  padding: rem(1px) $spacing-03 rem(1px) $spacing-03;
-  border: none;
+  padding-right: rem(3px);
+  border-width: rem(1px);
+  border-style: solid;
   border-radius: $spacing-04;
-  background-color: $interactive-02;
   white-space: nowrap;
 
   &:hover {
-    background-color: $hover-secondary;
     cursor: pointer;
   }
-}
-@mixin term-open-defaults {
-  @include term-closed-defaults();
-
-  padding-right: 0;
 
+  // The "up" chevron
   svg {
     // stylelint-disable-next-line carbon/layout-token-use
-    padding-top: rem(1px);
-    margin: 0 $spacing-02 0 $spacing-01;
+    margin: rem(1px) 0 0 0;
     vertical-align: text-top;
   }
 }
+@mixin keyword-open-defaults {
+  @include keyword-closed-defaults();
+
+  // The "up" chevron, flipped
+  svg {
+    transform: rotate(180deg);
+  }
+}
 @mixin body-defaults {
   @include carbon--type-style('body-long-01');
 
@@ -48,10 +52,13 @@
 
 // Other Carbon settings.
 // TODO: @import 'carbon-components/scss/globals/grid/grid'; if needed
+
 // NonLinearReading uses the following Carbon components:
 // TODO: @import(s) of Carbon component styles used by NonLinearReading
+
 // NonLinearReading uses the following Carbon for IBM Products components:
 // TODO: @import(s) of IBM Products component styles used by NonLinearReading
+
 // Define all component styles in a mixin which is then exported using
 // the Carbon import-once mechanism.
 @mixin non-linear-reading {
@@ -72,86 +79,88 @@
     }
   }
 
-  .#{$block-class} {
-    &__term {
-      &-light {
-        &--closed {
-          @include term-closed-defaults();
+  .#{$block-class}__light {
+    .#{$block-class}__keyword {
+      &-closed {
+        @include keyword-closed-defaults();
 
-          background-color: $interactive-02;
-          color: $inverse-01;
+        border-color: $interactive-03;
+        background-color: transparent;
+        color: $interactive-03;
 
-          &:hover {
-            background-color: $hover-secondary;
-          }
+        &:hover {
+          background-color: $interactive-03;
+          color: $inverse-01;
         }
+      }
 
-        &--open {
-          @include term-open-defaults();
+      &-open {
+        @include keyword-open-defaults();
 
-          // Novice to pro does not always use Carbon defaults/tokens
-          // stylelint-disable-next-line carbon/theme-token-use
-          background-color: $purple-20;
-          color: $text-01;
+        border-color: $interactive-03;
+        background-color: $interactive-03;
+        color: $inverse-01;
 
-          &:hover {
-            // stylelint-disable-next-line carbon/theme-token-use
-            background-color: #dcc7ff;
-          }
+        &:hover {
+          background-color: transparent;
+          color: $interactive-03;
         }
       }
+    }
 
-      &-dark {
-        &--closed {
-          @include carbon--theme($carbon--theme--g100, true);
-          @include term-closed-defaults();
+    .#{$block-class}__body {
+      @include body-defaults();
 
-          background-color: $interactive-02;
-          color: $text-04;
+      border-left-color: $text-01;
+    }
+  }
+
+  .#{$block-class}__dark {
+    .#{$block-class}__keyword {
+      &-closed {
+        @include carbon--theme($carbon--theme--g100, true);
+        @include keyword-closed-defaults();
 
-          &:hover {
-            background-color: $hover-secondary;
-          }
+        border-color: $icon-03;
+        background-color: transparent;
+        color: $text-01;
+
+        &:hover {
+          background-color: $icon-03;
+          color: $inverse-01;
         }
+      }
 
-        &--open {
-          @include carbon--theme($carbon--theme--g100, true);
-          @include term-open-defaults();
+      &-open {
+        @include carbon--theme($carbon--theme--g100, true);
+        @include keyword-open-defaults();
 
-          // stylelint-disable-next-line carbon/theme-token-use
-          background-color: #491d8b;
-          color: $text-04;
+        border-color: $icon-03;
+        background-color: $icon-03;
+        color: $inverse-01;
 
-          &:hover {
-            // stylelint-disable-next-line carbon/theme-token-use
-            background-color: #7f3ae7;
-          }
+        &:hover {
+          background-color: transparent;
+          color: $text-01;
         }
       }
     }
 
-    &--body {
-      &-light {
-        @include body-defaults();
-
-        // stylelint-disable-next-line carbon/theme-token-use
-        border-left-color: #6929c4;
-        // stylelint-disable-next-line carbon/theme-token-use
-        color: #6929c4;
-      }
+    .#{$block-class}__body {
+      @include carbon--theme($carbon--theme--g100, true);
+      @include body-defaults();
 
-      &-dark {
-        @include carbon--theme($carbon--theme--g100, true);
-        @include body-defaults();
+      border-left-color: $text-01;
+      color: $text-01;
 
-        // stylelint-disable-next-line carbon/theme-token-use
-        border-left-color: #d4bbff;
-        // stylelint-disable-next-line carbon/theme-token-use
-        color: #d4bbff;
+      // override default link color to compensate for a gradient background.
+      a {
+        color: $link-01;
       }
     }
   }
 }
+
 @include exports('non-linear-reading') {
   @include non-linear-reading;
 }

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

@@ -11,3 +11,19 @@
 #root {
   @include carbon--type-style('body-long-01');
 }
+
+// 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: $spacing-10; // 64px
+}
+
+.gradient-bg {
+  @include carbon--theme($carbon--theme--g100, true);
+
+  padding: $spacing-05;
+  background: linear-gradient(90deg, $blue-90 0%, $purple-70 100%);
+  color: $text-01;
+}