@carbon/ibm-products-styles 2.77.0-rc.0 → 2.78.0-rc.0

package/scss/components/Nav/_nav.scss

@@ -0,0 +1,254 @@
+//
+// 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 '@carbon/styles/scss/theme' as *;
+@use '@carbon/layout/scss/convert' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/type';
+@use '@carbon/type/scss/font-family';
+@use '../../global/styles/project-settings' as c4p-settings;
+@use '../../global/styles/mixins';
+@use '@carbon/styles/scss/utilities';
+
+$block-class: #{c4p-settings.$pkg-prefix}--nav;
+$nav-list-block-class: #{c4p-settings.$pkg-prefix}--nav-list;
+$nav-item-block-class: #{c4p-settings.$pkg-prefix}--nav-item;
+
+$nav__heading: '#{&}__heading';
+$nav__wrapper: '#{&}__wrapper';
+
+/// Icon position.
+/// @type Length
+$nav__icon__position: translate3d(-50%, 0, 0);
+
+@mixin rtl {
+  $rtl: '[dir="rtl"]';
+
+  &#{$rtl},
+  #{$rtl} & {
+    @content;
+  }
+}
+
+.#{$block-class} {
+  position: relative;
+}
+
+.#{$block-class}:not(:first-of-type) {
+  padding-block-start: $spacing-05;
+}
+
+.#{$block-class}:not(:last-of-type) {
+  padding-block-end: $spacing-05;
+}
+
+.#{$block-class}:last-of-type {
+  padding-block-end: $spacing-07;
+}
+
+.#{$block-class} + .#{$block-class} > .#{$nav__heading} {
+  padding-block-start: $spacing-02;
+}
+
+.#{$block-class}::before {
+  position: absolute;
+  display: inline-block;
+  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
+  border-block-end: to-rem(1px) solid $layer-02;
+  content: '';
+  inline-size: auto;
+  inset-block-end: 0;
+  inset-inline: $spacing-07;
+}
+
+.#{$block-class}:last-of-type::before {
+  border-width: 0;
+}
+
+.#{$block-class}__wrapper {
+  list-style: none;
+  margin-block: initial;
+  padding-inline-start: initial;
+
+  @include rtl {
+    padding-inline-end: initial;
+  }
+}
+
+.#{$block-class}__heading {
+  @include type.type-style('caption-01');
+
+  padding: $spacing-04 $spacing-08;
+  color: $text-secondary;
+  margin-block: initial;
+}
+
+// Navigation lists.
+.#{$nav-list-block-class} {
+  @include type.type-style('body-short-01');
+
+  display: flex;
+  flex-direction: column;
+  list-style: none;
+  margin-block-end: $spacing-01;
+}
+
+.#{$nav-list-block-class}:focus {
+  outline: 0;
+  outline-width: 0;
+
+  > .#{$nav-item-block-class}__link {
+    @include utilities.focus-outline('outline');
+  }
+}
+
+.#{$nav-list-block-class}__icon {
+  margin-block-start: $spacing-01;
+  margin-inline-start: auto;
+  transform: $nav__icon__position rotate(0deg);
+  transition-duration: $duration-moderate-02;
+  transition-property: transform;
+  transition-timing-function: $standard-easing;
+  @include rtl {
+    inset-inline-end: $spacing-02;
+    transform: $nav__icon__position rotate(180deg);
+  }
+}
+
+.#{$nav-list-block-class}--nested {
+  overflow: hidden;
+  margin-block-end: 0;
+  max-block-size: 0;
+  opacity: 0;
+  padding-inline-start: 0;
+  transition-duration: $duration-moderate-02;
+  $transition-property: (max-height, opacity);
+  @include rtl {
+    padding-inline: initial 0;
+  }
+
+  > .#{$nav-item-block-class}:last-of-type {
+    margin-block-end: $spacing-03;
+  }
+}
+
+// Navigation items.
+.#{$nav-item-block-class} {
+  @include type.type-style('body-short-01');
+
+  position: relative;
+  margin-block-end: $spacing-01;
+}
+
+// Content including text and sometimes a product icon.
+.#{$nav-item-block-class}__content {
+  display: flex;
+}
+
+.#{$nav-item-block-class}::before {
+  position: absolute;
+  display: inline-block;
+  background-color: transparent;
+  block-size: 100%;
+  content: '';
+  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
+  inline-size: to-rem(4px);
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  transform: translate3d(-100%, 0, 0);
+  transition-property: transform;
+}
+
+.#{$nav-item-block-class}--disabled {
+  pointer-events: none;
+
+  > #{$nav-item-block-class}__link {
+    color: $text-on-color-disabled;
+  }
+}
+
+.#{$nav-item-block-class}--active {
+  @include font-family.font-weight('semibold');
+
+  @include rtl {
+    &::before {
+      transform: translate3d(0, 0, 0);
+    }
+  }
+}
+
+.#{$nav-item-block-class}--active::before {
+  z-index: 100;
+  background-color: $background-brand;
+  transform: translate3d(0, 0, 0);
+}
+
+// Expanded navigation list.
+.#{$nav-item-block-class}--expanded {
+  margin-block-end: $spacing-03;
+
+  > .#{$nav-list-block-class}--nested {
+    /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
+    max-block-size: to-rem(320px);
+    opacity: 1;
+    transition-timing-function: $ease-in;
+  }
+
+  > .#{$nav-item-block-class}__link > .#{$nav-list-block-class}__icon {
+    transform: $nav__icon__position rotate(180deg);
+
+    @include rtl {
+      transform: $nav__icon__position rotate(0);
+    }
+  }
+}
+
+// Navigation item link.
+.#{$nav-item-block-class}__link {
+  position: relative;
+  display: flex;
+  padding: $spacing-03 $spacing-02 $spacing-03 $spacing-08;
+  color: $text-primary;
+  cursor: pointer;
+  text-decoration: none;
+  transition-property: background-color;
+}
+
+.#{$nav-item-block-class}__link:hover,
+.#{$nav-item-block-class}__link:focus {
+  background-color: $layer-02;
+}
+
+.#{$nav-item-block-class}__link:focus {
+  @include utilities.focus-outline('outline');
+}
+
+.#{$nav-item-block-class}__img {
+  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
+  block-size: to-rem(20px);
+  margin-inline: -$spacing-07 $spacing-04;
+}
+
+//nav-item__link--external__icon
+
+// External link icon selector.
+.#{$nav-item-block-class}__link--external__icon {
+  flex-shrink: 0;
+  align-self: center;
+  fill: $text-primary;
+  margin-inline-start: $spacing-02;
+  opacity: 0;
+}
+
+.#{$nav-item-block-class}__link--external:hover,
+.#{$nav-item-block-class}__link--external:focus {
+  > .#{$nav-item-block-class}__link--external__icon {
+    opacity: 1;
+  }
+}

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,126 @@
+//
+// 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-use */
+/* stylelint-disable function-no-unknown */
+
+// Standard imports.
+@use '@carbon/layout/scss/convert' as *;
+@use '@carbon/styles/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 {
+  border-width: to-rem(1px);
+  border-style: solid;
+  border-color: $button-tertiary;
+  border-radius: $spacing-04;
+  background-color: transparent;
+  block-size: to-rem(20px);
+  color: $button-tertiary;
+  padding-block-start: 0;
+  padding-inline-end: to-rem(3px);
+  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;
+  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;
+  margin: $spacing-02 0;
+  // Onboarding does not always use Carbon defaults/tokens
+  // stylelint-disable-next-line carbon/motion-duration-use, carbon/motion-easing-use
+  animation: fade 600ms;
+  border-inline-start: to-rem(1.25px) solid $text-primary;
+
+  /* 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/NotificationsPanel/_carbon-imports.scss

@@ -0,0 +1,12 @@
+//
+// 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.
+//
+
+// NotificationsPanel uses the following Carbon components:
+// Button, Link, Toggle
+@use '@carbon/styles/scss/components/button';
+@use '@carbon/styles/scss/components/link';
+@use '@carbon/styles/scss/components/toggle';

package/scss/components/NotificationsPanel/_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 './notifications-panel';

package/scss/components/NotificationsPanel/_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 './notifications-panel';