@carbon/ibm-products 2.28.1 → 2.29.0

package/scss/components/Decorator/_decorator.scss

@@ -0,0 +1,400 @@
+/* stylelint-disable carbon/theme-token-use */
+/* stylelint-disable carbon/type-token-use */
+/* stylelint-disable carbon/layout-token-use */
+/* stylelint-disable function-no-unknown */
+
+//
+// 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 '../../global/styles/project-settings' as c4p-settings;
+@use '../../global/styles/mixins';
+
+// Decorator uses the following Carbon for IBM Products components:
+@use '@carbon/layout/scss/convert' as *;
+@use '@carbon/react/scss/colors' as *;
+@use '@carbon/styles/scss/colors' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/themes';
+@use '@carbon/styles/scss/type';
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--decorator;
+//
+$default: #{$block-class}--default;
+$link: #{$block-class}--link;
+$button: '#{$block-class}--button:not(.#{$block-class}-disabled)';
+$button-disabled: '#{$block-class}--button.#{$block-class}-disabled';
+$buttons: '#{$block-class}--buttons:not(.#{$block-class}-disabled)';
+$buttons-disabled: '#{$block-class}--buttons.#{$block-class}-disabled';
+//
+//
+$icon: #{$block-class}-icon;
+$label: #{$block-class}__label;
+$value: #{$block-class}__value;
+
+// Use value-divider() by default for the component's dividing line.
+@mixin value-divider($top: 0, $bottom: 0, $left: 0, $color: $border-subtle-02) {
+  &::after {
+    position: absolute;
+    top: #{$top};
+    bottom: #{$bottom};
+    left: #{$left};
+    border-left: 1px solid #{$color};
+    content: '';
+  }
+}
+// Use label-divider() only when hovering/focusing the label.
+@mixin label-divider(
+  // Nudge the line over so it occupies the same space as the value divider.
+  $top: -1px,
+  $right: -1px,
+  $bottom: -1px,
+  $color: $border-strong
+) {
+  &::after {
+    position: absolute;
+    z-index: 1;
+    top: #{$top};
+    right: #{$right};
+    bottom: #{$bottom};
+    border-right: 1px solid #{$color};
+    content: '';
+  }
+}
+
+.#{$block-class}--light {
+  @include theme(themes.$g10, true);
+}
+.#{$block-class}--dark {
+  @include theme(themes.$g100, true);
+}
+
+// BASE STYLING FOR ALL DECORATORS
+.#{$block-class} {
+  display: inline-flex;
+  max-width: 100%;
+  align-items: normal;
+  border-radius: $spacing-12;
+}
+.#{$block-class} .#{$label} {
+  @include type.type-style('label-01');
+
+  position: relative;
+  display: inline-flex;
+  height: $spacing-06;
+  align-items: normal;
+  padding: 0 $spacing-03;
+  border-width: to-rem(1px) 0 to-rem(1px) to-rem(1px);
+  border-style: solid;
+  border-color: $border-subtle-02;
+  border-radius: $spacing-12 0 0 $spacing-12;
+  background-color: $layer-01;
+  color: $text-secondary;
+  line-height: 1.8;
+}
+.#{$block-class} .#{$value} {
+  @include type.type-style('label-01');
+
+  position: relative;
+  display: inline-flex;
+  overflow: hidden;
+  height: $spacing-06;
+  align-items: normal;
+  padding: 0 $spacing-03;
+  border-width: to-rem(1px) to-rem(1px) to-rem(1px) 0;
+  border-style: solid;
+  border-color: $border-subtle-02;
+  border-radius: 0 $spacing-12 $spacing-12 0;
+  background-color: $layer-01;
+  color: $text-primary;
+  line-height: 1.8;
+}
+.#{$block-class} .#{$icon} {
+  margin-top: to-rem(3px);
+  margin-right: $spacing-02;
+}
+
+//
+// STYLING FOR DEFAULT (NON-INTERACTIVE)
+//
+.#{$default} .#{$value} {
+  @include value-divider();
+}
+
+//
+// STYLING FOR LINK
+//
+.#{$link} {
+  cursor: pointer;
+  text-decoration: none;
+}
+.#{$link} .#{$label} {
+  background-color: $layer-02;
+}
+.#{$link} .#{$value} {
+  @include value-divider();
+
+  background-color: $layer-02;
+  color: $link-primary;
+}
+.#{$link}:hover .#{$value} {
+  color: $link-primary-hover;
+  text-decoration: underline;
+}
+.#{$link}:focus {
+  text-decoration: none;
+}
+.#{$link}:focus .#{$value} {
+  @include value-divider($color: $focus);
+
+  border-color: $focus;
+}
+.#{$link}:active .#{$value} {
+  color: $text-primary;
+}
+
+//
+// STYLING FOR SINGLE BUTTON
+//
+.#{$button} {
+  display: flex;
+  padding: 0;
+  border: 0;
+  cursor: pointer;
+}
+.#{$button} .#{$label} {
+  background-color: $layer-02;
+}
+.#{$button} .#{$value} {
+  @include value-divider();
+
+  background-color: $layer-02;
+}
+.#{$button}:hover .#{$label} {
+  border-color: $border-strong;
+  background-color: $layer-hover-02;
+}
+.#{$button}:hover .#{$value} {
+  @include value-divider($color: $border-strong);
+
+  border-color: $border-strong;
+  background-color: $layer-hover-02;
+}
+.#{$button}:focus {
+  // Disable browser's default "focus" style.
+  outline: none;
+}
+.#{$button}:focus .#{$label} {
+  border-color: $focus;
+  background-color: $layer-02;
+}
+.#{$button}:focus .#{$value} {
+  @include value-divider();
+
+  border-color: $focus;
+  background-color: $layer-02;
+}
+.#{$button}:active .#{$label} {
+  background-color: $layer-selected-02;
+}
+.#{$button}:active .#{$value} {
+  @include value-divider();
+
+  background-color: $layer-selected-02;
+}
+.#{$button-disabled} {
+  padding: 0;
+  border: 0;
+  cursor: not-allowed;
+}
+.#{$button-disabled} .#{$label} {
+  background-color: $layer-02;
+  color: $icon-on-color-disabled;
+}
+.#{$button-disabled} .#{$value} {
+  @include value-divider();
+
+  background-color: $layer-02;
+  color: $icon-on-color-disabled;
+}
+
+//
+// STYLING FOR DUAL BUTTONS
+//
+.#{$buttons} .#{$label} {
+  background-color: $layer-02;
+  cursor: pointer;
+}
+.#{$buttons}:not(:hover) .#{$value} {
+  @include value-divider();
+}
+.#{$buttons} .#{$value} {
+  background-color: $layer-02;
+  cursor: pointer;
+}
+.#{$buttons} .#{$label}:hover {
+  @include label-divider($color: $border-strong);
+
+  border-color: $border-strong;
+  background-color: $layer-hover-02;
+}
+.#{$buttons} .#{$value}:hover {
+  @include value-divider($color: $border-strong);
+
+  border-color: $border-strong;
+  background-color: $layer-hover-02;
+}
+.#{$buttons} .#{$label}:focus {
+  @include label-divider($color: $focus);
+
+  border-color: $focus;
+  // Disable browser's default "focus" style.
+  outline: none;
+}
+.#{$buttons} .#{$value}:focus {
+  @include value-divider($color: $focus);
+
+  border-color: $focus;
+  // Disable browser's default "focus" style.
+  outline: none;
+}
+.#{$buttons} .#{$label}:active {
+  background-color: $layer-hover-02;
+}
+.#{$buttons} .#{$value}:active {
+  background-color: $layer-hover-02;
+}
+.#{$buttons-disabled} .#{$label} {
+  background-color: $layer-02;
+  color: $icon-on-color-disabled;
+}
+.#{$buttons-disabled} .#{$value} {
+  @include value-divider();
+
+  background-color: $layer-02;
+  color: $icon-on-color-disabled;
+}
+
+//
+// MODIFIER, SMALL
+//
+.#{$block-class}--sm .#{$label} {
+  height: to-rem(18px);
+  padding: 0 $spacing-02 0 $spacing-03;
+  line-height: 1.333;
+}
+.#{$block-class}--sm .#{$value} {
+  height: to-rem(18px);
+  // When "small", the divider takes up 1px of 4px of the available space: so "+1px".
+  padding: 0 $spacing-03 0 calc($spacing-02 + 1px);
+  line-height: 1.333;
+}
+
+//
+// MODIFIER, TRUNCATION
+//
+.#{$block-class}--truncate-end .#{$value} {
+  display: inline;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.#{$block-class}--truncate-start .#{$value} {
+  display: inline;
+  overflow: hidden;
+  direction: rtl;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+//
+// MAGNITUDE ICON COLORS AND SIZES
+//
+.#{$icon}__magnitude-unknown {
+  fill: $icon-secondary;
+}
+.#{$icon}__magnitude-benign {
+  fill: $teal-60;
+}
+.#{$icon}__magnitude-low {
+  fill: $support-warning;
+}
+.#{$icon}__magnitude-medium {
+  fill: $orange-40;
+}
+.#{$icon}__magnitude-high {
+  fill: $support-error;
+}
+.#{$icon}__magnitude-critical {
+  fill: $support-error;
+}
+.#{$block-class}-disabled svg {
+  fill: $icon-on-color-disabled;
+}
+
+// MODIFIER, SMALL ICON
+.#{$block-class} .#{$icon}--sm {
+  width: $spacing-04;
+  height: $spacing-04;
+  margin-top: to-rem(2.5px);
+}
+
+// DUAL BUTTONS ICON ENHANCED ACCESSIBILITY
+// Add a border to the icon on hover & active to increase contrast.
+.#{$block-class}--light {
+  &.#{$buttons} .#{$label}:hover .#{$icon}__magnitude-low,
+  &.#{$buttons} .#{$label}:active .#{$icon}__magnitude-low {
+    stroke: $yellow-60;
+    stroke-width: 1px;
+  }
+  // The "diamond-fill/medium" icon has an inner and outer path.
+  // Fill the outer path to simulate a 1px border.
+  &.#{$buttons} .#{$label}:hover .#{$icon}__magnitude-medium path:first-child,
+  &.#{$buttons} .#{$label}:active .#{$icon}__magnitude-medium path:first-child {
+    fill: $orange-60;
+  }
+}
+.#{$block-class}--dark {
+  // The "caution/high" icon has an inner and outer path.
+  // Fill the outer path to simulate a 1px border.
+  &.#{$buttons} .#{$label}:hover .#{$icon}__magnitude-high path:first-child,
+  &.#{$buttons} .#{$label}:active .#{$icon}__magnitude-high path:first-child {
+    fill: $red-40;
+  }
+  &.#{$buttons} .#{$label}:hover .#{$icon}__magnitude-critical,
+  &.#{$buttons} .#{$label}:active .#{$icon}__magnitude-critical {
+    stroke: $red-40;
+    stroke-width: to-rem(0.5px);
+  }
+}
+
+// SINGLE BUTTON ICON ENHANCED ACCESSIBILITY
+// Add a border to the icon on hover & active to increase contrast.
+.#{$block-class}--light {
+  &.#{$button}:hover .#{$icon}__magnitude-low,
+  &.#{$button}:active .#{$icon}__magnitude-low {
+    stroke: $yellow-60;
+    stroke-width: 1px;
+  }
+  &.#{$button}:hover .#{$icon}__magnitude-medium path:first-child,
+  &.#{$button}:active .#{$icon}__magnitude-medium path:first-child {
+    fill: $orange-60;
+  }
+}
+.#{$block-class}--dark {
+  &.#{$button}:hover .#{$icon}__magnitude-high path:first-child,
+  &.#{$button}:active .#{$icon}__magnitude-high path:first-child {
+    fill: $red-40;
+  }
+  &.#{$button}:hover .#{$icon}__magnitude-critical,
+  &.#{$button}:active .#{$icon}__magnitude-critical {
+    stroke: $red-40;
+    stroke-width: to-rem(0.5px);
+  }
+}

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

@@ -0,0 +1,9 @@
+//
+// 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.
+//
+
+@use './carbon-imports';
+@use './decorator';

package/scss/components/Decorator/_index.scss

@@ -0,0 +1,8 @@
+//
+// 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.
+//
+
+@use './decorator';

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

@@ -0,0 +1,9 @@
+//
+// 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.
+//
+
+// Import any Carbon component styles used from DescriptionList in this file.
+// DescriptionList uses the following Carbon components:

package/scss/components/DescriptionList/_description-list.scss

@@ -0,0 +1,103 @@
+//
+// 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 '../../global/styles/project-settings' as c4p-settings;
+@use '../../global/styles/mixins';
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/react/scss/type' as *;
+@use '@carbon/react/scss/theme' as *;
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--description-list;
+$carbon-block-class: #{c4p-settings.$carbon-prefix}--structured-list;
+
+.#{$block-class} .#{$carbon-block-class} {
+  margin-bottom: $spacing-07;
+}
+
+// ROW /////////////////////////
+.#{$block-class} .#{$block-class}__body .#{$block-class}__row {
+  border-block-end-width: 0;
+  border-block-start-width: 0;
+}
+
+.#{$block-class}
+  .#{$carbon-block-class}
+  .#{$block-class}__body
+  .#{$block-class}__row:first-child {
+  border-block-start-width: 0;
+}
+.#{$block-class}
+  .#{$carbon-block-class}
+  .#{$block-class}__body
+  .#{$block-class}__row:last-child {
+  border-block-end-width: 0;
+}
+
+.#{$block-class}--bordered .#{$block-class}__body .#{$block-class}__row {
+  border-block-start-width: 1px;
+}
+
+// CELL /////////////////////////
+.#{$block-class} .#{$block-class}__body .#{$block-class}__cell {
+  @include type-style('body-01');
+
+  padding: $spacing-03 $spacing-06 $spacing-03 $spacing-03;
+}
+
+.#{$block-class} .#{$block-class}__body .#{$block-class}__cell:first-of-type {
+  width: 1%;
+  padding-left: 0;
+  white-space: nowrap;
+}
+
+.#{$block-class} .#{$block-class}__body .#{$block-class}__cell:last-of-type {
+  padding-right: 0;
+  color: $text-primary;
+}
+
+.#{$block-class}
+  .#{$block-class}__body
+  .#{$block-class}__row:first-of-type
+  > .#{$block-class}__cell {
+  padding-top: 0;
+}
+
+.#{$block-class}
+  .#{$block-class}__body
+  .#{$block-class}__row:last-of-type
+  > .#{$block-class}__cell {
+  padding-bottom: 0;
+}
+
+.#{$block-class} .#{$block-class}__body .#{$block-class}__cell ul {
+  list-style: none;
+}
+
+.#{$block-class} .#{$block-class}__body .#{$block-class}__cell ul > li {
+  margin-bottom: $spacing-03;
+}
+
+// LG SIZE /////////////////////////
+.#{$block-class}--lg .#{$block-class}__body .#{$block-class}__cell {
+  padding: $spacing-05 $spacing-06 $spacing-05 $spacing-05;
+}
+
+// SM SIZE /////////////////////////
+.#{$block-class}--sm .#{$block-class}__body .#{$block-class}__cell {
+  padding: $spacing-02 $spacing-06 $spacing-02 $spacing-02;
+}
+
+// XS SIZE /////////////////////////
+.#{$block-class}--xs .#{$block-class}__body .#{$block-class}__cell {
+  padding: $spacing-02;
+}
+
+.#{$block-class} .#{$carbon-block-class}-row--focused-within {
+  outline: none;
+}

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

@@ -0,0 +1,9 @@
+//
+// 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.
+//
+
+@use './carbon-imports';
+@use './description-list';

package/scss/components/DescriptionList/_index.scss

@@ -0,0 +1,8 @@
+//
+// 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.
+//
+
+@use './description-list';

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

@@ -356,11 +356,16 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
   }
 
   .#{$block-class}__slug-and-close {
-    position: absolute;
+    position: fixed;
     z-index: 10; /* must be higher than title container border bottom */
     top: 0;
     right: 0;
     display: flex;
+
+    /* stylelint-disable-next-line max-nesting-depth */
+    @media (prefers-reduced-motion) {
+      position: absolute;
+    }
   }
 
   .#{$block-class}__actions-container {

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

@@ -0,0 +1,12 @@
+//
+// 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.
+//
+
+// Import any Carbon component styles used from StatusIndicator in this file.
+// StatusIndicator uses the following Carbon components:
+// InlineLoading, Button
+@use '@carbon/react/scss/components/inline-loading';
+@use '@carbon/react/scss/components/button';

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

@@ -0,0 +1,9 @@
+//
+// 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.
+//
+
+@use './carbon-imports';
+@use './status-indicator';

package/scss/components/StatusIndicator/_index.scss

@@ -0,0 +1,8 @@
+//
+// 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.
+//
+
+@use './status-indicator';

package/scss/components/StatusIndicator/_status-indicator.scss

@@ -0,0 +1,93 @@
+//
+// 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.
+//
+
+/* stylelint-disable carbon/layout-token-use */
+/* stylelint-disable function-no-unknown */
+
+// Standard imports.
+@use '../../global/styles/project-settings' as c4p-settings;
+@use '../../global/styles/mixins';
+
+// Other Carbon settings if needed
+@use '@carbon/layout/scss/convert' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/themes';
+@use '@carbon/styles/scss/type';
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--status-indicator;
+$block-class-step: #{c4p-settings.$pkg-prefix}--status-indicator-step;
+
+// Default styling
+.#{$block-class}__title {
+  @include type-style('heading-02');
+
+  margin-bottom: $spacing-02;
+}
+.#{$block-class-step}__details {
+  display: flex;
+  min-height: $spacing-07;
+  align-items: center;
+}
+.#{$block-class-step}__icon {
+  position: relative;
+  display: flex;
+  width: $spacing-06;
+}
+.#{$block-class-step}__text {
+  @include type-style('body-compact-01');
+
+  color: $text-primary;
+}
+.#{$block-class} .#{$block-class}__button {
+  align-items: center;
+  margin-top: $spacing-01;
+  margin-left: $spacing-03;
+}
+.#{$block-class} .#{$block-class}__button:not([disabled]) svg {
+  margin-left: $spacing-03;
+  fill: currentColor;
+}
+
+// Text
+.#{$block-class-step}--inactive .#{$block-class-step}__text {
+  color: $text-secondary;
+}
+.#{$block-class-step}--inactive svg {
+  fill: $icon-primary;
+}
+
+// Icons
+//
+// Override <InlineLoading's> large margins.
+.#{$block-class-step}--active .#{$block-class-step}__icon {
+  margin-right: 0;
+}
+.#{$block-class-step}--active
+  .#{c4p-settings.$carbon-prefix}--inline-loading__animation {
+  margin-right: to-rem(7px);
+}
+// /Override
+//
+.#{$block-class-step}--error svg {
+  fill: $support-error;
+}
+.#{$block-class-step}--finished svg {
+  fill: $support-success;
+}
+
+// Error message
+.#{$block-class-step}__error-message {
+  @include type-style('label-01');
+
+  margin-top: to-rem(-2px);
+  margin-bottom: to-rem(6px);
+  margin-left: $spacing-06;
+  color: $text-error;
+}