@carbon/ibm-products 2.29.0-alpha.10 → 2.29.0

package/lib/components/Decorator/utils.js

@@ -0,0 +1,48 @@
+/**
+ * Copyright IBM Corp. 2020, 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 strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var getMagnitude = function getMagnitude(score, thresholds) {
+  if (typeof score === 'number') {
+    if (score <= thresholds[0]) {
+      return 'Benign';
+    }
+    if (score < thresholds[1]) {
+      return 'Low';
+    }
+    if (score < thresholds[2]) {
+      return 'Medium';
+    }
+    if (score < thresholds[3]) {
+      return 'High';
+    }
+    if (score >= thresholds[3]) {
+      return 'Critical';
+    }
+  }
+  return 'Unknown';
+};
+
+// If a "midline" truncation has been defined,
+// then return the formatted midline value generated here,
+// else return to the original value.
+var truncate = function truncate(inputText) {
+  var truncateValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var maxLength = truncateValue.maxLength,
+    front = truncateValue.front,
+    back = truncateValue.back;
+  if (maxLength && inputText.length > maxLength) {
+    return "".concat(inputText.substring(0, front), "\u2026").concat(inputText.substr(inputText.length - back));
+  }
+  return inputText;
+};
+
+exports.getMagnitude = getMagnitude;
+exports.truncate = truncate;

package/lib/components/index.d.ts

@@ -40,6 +40,7 @@ export { InterstitialScreen } from "./InterstitialScreen";
 export { InterstitialScreenView } from "./InterstitialScreenView";
 export { InterstitialScreenViewModule } from "./InterstitialScreenViewModule";
 export { DelimitedList } from "./DelimitedList";
+export { Decorator } from "./Decorator";
 export { DescriptionList } from "./DescriptionList";
 export { FullPageError } from "./FullPageError";
 export { SearchBar } from "./SearchBar";

package/lib/global/js/package-settings.d.ts

@@ -89,6 +89,7 @@ declare namespace defaults {
         let CoachmarkOverlayElement: boolean;
         let CoachmarkOverlayElements: boolean;
         let CoachmarkStack: boolean;
+        let Decorator: boolean;
         let DescriptionList: boolean;
         let SearchBar: boolean;
         let UserAvatar: boolean;

package/lib/global/js/package-settings.js

@@ -95,6 +95,7 @@ var defaults = {
     CoachmarkOverlayElement: false,
     CoachmarkOverlayElements: false,
     CoachmarkStack: false,
+    Decorator: false,
     DescriptionList: false,
     SearchBar: false,
     UserAvatar: false,

package/lib/index.js

@@ -109,6 +109,7 @@ var InterstitialScreen = require('./components/InterstitialScreen/InterstitialSc
 var InterstitialScreenView = require('./components/InterstitialScreenView/InterstitialScreenView.js');
 var InterstitialScreenViewModule = require('./components/InterstitialScreenViewModule/InterstitialScreenViewModule.js');
 var DelimitedList = require('./components/DelimitedList/DelimitedList.js');
+var Decorator = require('./components/Decorator/Decorator.js');
 var DescriptionList = require('./components/DescriptionList/DescriptionList.js');
 var FullPageError = require('./components/FullPageError/FullPageError.js');
 var SearchBar = require('./components/SearchBar/SearchBar.js');
@@ -450,6 +451,10 @@ Object.defineProperty(exports, 'DelimitedList', {
 	enumerable: true,
 	get: function () { return DelimitedList.DelimitedList; }
 });
+Object.defineProperty(exports, 'Decorator', {
+	enumerable: true,
+	get: function () { return Decorator.Decorator; }
+});
 Object.defineProperty(exports, 'DescriptionList', {
 	enumerable: true,
 	get: function () { return DescriptionList.DescriptionList; }

package/lib/settings.d.ts

@@ -75,6 +75,7 @@ export const pkg: {
         CoachmarkOverlayElement: boolean;
         CoachmarkOverlayElements: boolean;
         CoachmarkStack: boolean;
+        Decorator: boolean;
         DescriptionList: boolean;
         SearchBar: boolean;
         UserAvatar: boolean;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.29.0-alpha.10+d6e306fa2",
+  "version": "2.29.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -76,7 +76,7 @@
     "fs-extra": "^11.2.0",
     "glob": "^10.3.10",
     "jest": "^29.7.0",
-    "jest-config-ibm-cloud-cognitive": "^1.1.4",
+    "jest-config-ibm-cloud-cognitive": "^1.1.5",
     "jest-environment-jsdom": "^29.7.0",
     "namor": "^1.1.2",
     "npm-check-updates": "^16.14.12",
@@ -90,7 +90,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.23.9",
-    "@carbon/ibm-products-styles": "^2.27.1",
+    "@carbon/ibm-products-styles": "^2.28.0",
     "@carbon/telemetry": "^0.1.0",
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/sortable": "^8.0.0",
@@ -113,5 +113,5 @@
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
   },
-  "gitHead": "d6e306fa2b58a454c879f911187e17076ce06ea3"
+  "gitHead": "b42dcb92fc964b2cbc0f93891937da118da01f60"
 }

package/scss/components/Decorator/_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 Decorator in this file.
+// Decorator uses the following Carbon components:

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/_index-with-carbon.scss

@@ -60,6 +60,7 @@
 @use './CoachmarkOverlayElements/index-with-carbon' as *;
 @use './CoachmarkStack/index-with-carbon' as *;
 @use './DelimitedList/index-with-carbon' as *;
+@use './Decorator/index-with-carbon' as *;
 @use './DescriptionList/index-with-carbon' as *;
 @use './FullPageError/index-with-carbon' as *;
 @use './SearchBar/index-with-carbon' as *;

package/scss/components/_index.scss

@@ -68,6 +68,7 @@
 @use './InterstitialScreenView';
 @use './InterstitialScreenViewModule';
 @use './DelimitedList';
+@use './Decorator';
 @use './DescriptionList';
 @use './FullPageError';
 @use './SearchBar';