@carbon/ibm-products 2.42.1-canary.7 → 2.42.1-canary.8

package/lib/components/ConditionBuilder/ConditionPreview/ConditionPreview.js

@@ -0,0 +1,77 @@
+/**
+ * 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 React = require('react');
+var index = require('../../../node_modules/prop-types/index.js');
+var DataConfigs = require('../ConditionBuilderContext/DataConfigs.js');
+var ConditionBuilderItem = require('../ConditionBuilderItem/ConditionBuilderItem.js');
+var ConditionConnector = require('../ConditionBuilderConnector/ConditionConnector.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var ConditionPreview = function ConditionPreview(_ref) {
+  var previewType = _ref.previewType;
+  var getConditionSection = function getConditionSection() {
+    return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItem.ConditionBuilderItem, {
+      label: DataConfigs.translateWithId('property')
+    }), /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItem.ConditionBuilderItem, {
+      label: DataConfigs.translateWithId('operator')
+    }), /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItem.ConditionBuilderItem, {
+      label: DataConfigs.translateWithId('value')
+    }));
+  };
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, previewType == 'newGroup' && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(DataConfigs.blockClass, "__group__row ").concat(DataConfigs.blockClass, "__group-preview  ")
+  }, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItem.ConditionBuilderItem, {
+    className: "".concat(DataConfigs.blockClass, "__statement-button"),
+    label: DataConfigs.translateWithId('and')
+  })), /*#__PURE__*/React__default["default"].createElement("div", {
+    "aria-hidden": true,
+    className: "".concat(DataConfigs.blockClass, "__group ").concat(DataConfigs.blockClass, "__condition-wrapper ").concat(DataConfigs.blockClass, "__group-preview ").concat(DataConfigs.blockClass, "__group-wrapper")
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(DataConfigs.blockClass, "__gap")
+  }, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItem.ConditionBuilderItem, {
+    className: "".concat(DataConfigs.blockClass, "__statement-button"),
+    label: DataConfigs.translateWithId('if')
+  })), getConditionSection())), previewType == 'subGroup' && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(DataConfigs.blockClass, "__group-preview")
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(DataConfigs.blockClass, "__condition-block  ").concat(DataConfigs.blockClass, "__gap")
+  }, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItem.ConditionBuilderItem, {
+    label: DataConfigs.translateWithId('and'),
+    className: "".concat(DataConfigs.blockClass, "__statement-button"),
+    popOverClassName: "".concat(DataConfigs.blockClass, "__gap")
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(DataConfigs.blockClass, "__group ").concat(DataConfigs.blockClass, "__condition-wrapper")
+  }, /*#__PURE__*/React__default["default"].createElement(ConditionConnector["default"], {
+    className: "".concat(DataConfigs.blockClass, "__gap ").concat(DataConfigs.blockClass, "__groupConnector"),
+    operator: DataConfigs.translateWithId('if')
+  }), getConditionSection()))), previewType == 'condition' && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(DataConfigs.blockClass, "__group-preview")
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(DataConfigs.blockClass, "__condition-block  ").concat(DataConfigs.blockClass, "__gap")
+  }, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItem.ConditionBuilderItem, {
+    label: DataConfigs.translateWithId('and'),
+    className: "".concat(DataConfigs.blockClass, "__statement-button"),
+    popOverClassName: "".concat(DataConfigs.blockClass, "__gap")
+  }), getConditionSection())));
+};
+var ConditionPreview$1 = ConditionPreview;
+ConditionPreview.propTypes = {
+  /**
+   * type of review to be displayed
+   */
+  previewType: index["default"].oneOf(['condition', 'subGroup', 'newGroup'])
+};
+
+exports["default"] = ConditionPreview$1;

package/lib/components/ConditionBuilder/utils/util.d.ts

@@ -2,3 +2,4 @@ export function focusThisField(evt: any): void;
 export function focusThisItem(currentElement: any): void;
 export function traverseClockVise(eachElem: any, index: any, allElements: any, rotate: any, trapFocus: any): void;
 export function traverseReverse(eachElem: any, index: any, allElements: any, rotate: any, trapFocus: any): void;
+export function checkForHoldingKey(evt: any, key: any): any;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.42.1-canary.7+793b7d211",
+  "version": "2.42.1-canary.8+553f2c7e1",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -97,7 +97,7 @@
   "dependencies": {
     "@babel/runtime": "^7.23.9",
     "@carbon/feature-flags": "^0.20.0",
-    "@carbon/ibm-products-styles": "^2.38.1",
+    "@carbon/ibm-products-styles": "^2.38.2-canary.8+553f2c7e1",
     "@carbon/telemetry": "^0.1.0",
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/modifiers": "^7.0.0",
@@ -121,5 +121,5 @@
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
   },
-  "gitHead": "793b7d211624906e2dea5e39fa5995572b3c1628"
+  "gitHead": "553f2c7e1c6848e853abd71d493b3bca77968252"
 }

package/scss/components/ConditionBuilder/_condition-builder.scss

@@ -27,7 +27,9 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
 // .#{$block-class} {
 //   // TODO: Styles.
 // }
-
+.#{$block-class} {
+  padding: $spacing-06;
+}
 .#{$block-class}__condition-builder__group {
   display: flex;
 }
@@ -47,5 +49,23 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
 }
 .#{$block-class}__condition-block {
   display: flex;
+  width: max-content;
   flex-direction: row;
 }
+.#{$block-class}__content-container {
+  display: flex;
+  flex-direction: column;
+  row-gap: $spacing-02;
+}
+.#{$block-class}__heading {
+  margin-top: $spacing-03;
+  margin-bottom: $spacing-03;
+}
+.#{$block-class}__tree
+  .#{$block-class}__actions-container
+  .#{$block-class}__condition-wrapper {
+  flex-direction: column;
+}
+.#{$block-class}__group-separator {
+  margin-top: $spacing-02;
+}

package/scss/components/ConditionBuilder/styles/_conditionBuilderCondition.scss

@@ -1,3 +1,4 @@
+@use '@carbon/react/scss/theme' as *;
 @use '@carbon/react/scss/spacing' as *;
 @use '@carbon/react/scss/motion';
 @use '@carbon/styles/scss/components/tag' as *;
@@ -5,6 +6,7 @@
 @use '../../../global/styles/project-settings' as c4p-settings;
 @use '@carbon/styles/scss/type';
 @use '@carbon/styles/scss/type' as *;
+@use '@carbon/react/scss/utilities';
 
 $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
 
@@ -14,12 +16,17 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
   display: inline-flex;
 }
 
-[role='row']:focus {
+.#{$block-class} [role='row'] {
+  position: relative;
+  outline: none;
+}
+.#{$block-class} [role='row']:focus::after {
   @include focus-outline.focus-outline('outline');
 
-  outline-offset: 0;
+  position: absolute;
+  content: '';
+  inset: 0;
 }
-
 .#{$block-class}__condition__deletion-preview
   .#{$block-class}__button:not(
     .#{$block-class}__statement-button,
@@ -44,3 +51,15 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
   text-overflow: ellipsis;
   text-wrap: nowrap;
 }
+.#{$block-class}__group-preview {
+  opacity: 0.5;
+  pointer-events: none;
+}
+.#{$block-class}__connector-disabled {
+  display: flex;
+  min-width: $spacing-10;
+  align-items: center;
+  background-color: $layer;
+  color: $text-helper;
+  padding-inline: $spacing-03;
+}

package/scss/components/ConditionBuilder/styles/_conditionBuilderItem.scss

@@ -1,3 +1,5 @@
+@use 'sass:list';
+@use 'sass:string';
 @use '@carbon/react/scss/theme' as *;
 @use '../../../global/styles/project-settings' as c4p-settings;
 @use '@carbon/styles/scss/type';
@@ -8,10 +10,11 @@
 @use '@carbon/styles/scss/components/tag';
 
 @use '@carbon/styles/scss/type' as *;
+@use '@carbon/react/scss/colors' as *;
 
 $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
 
-.#{$block-class}__content-container * {
+.#{$block-class}__condition-wrapper * {
   @include type-style('body-01');
 }
 
@@ -120,7 +123,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
 }
 .#{$block-class}__condition-builder__group.hoveredConnector
   .#{$block-class}__condition-wrapper
-  > .conditionBlockWrapper
+  > .#{$block-class}__condition-block
   .#{$block-class}__connector-button {
   background-color: $layer-hover;
 }
@@ -149,9 +152,6 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
   padding-right: $spacing-03;
   padding-left: $spacing-03;
 }
-.#{$block-class}__conditionWrapper {
-  display: flex;
-}
 
 .#{$block-class}__multiselectSelectionStatusContainer {
   display: flex;
@@ -165,22 +165,59 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
 .#{$block-class}__item-option__option:focus {
   @include focus-outline.focus-outline('outline');
 }
-// .#{$block-class}__tree {
-//   .#{$block-class}__condition-wrapper > :nth-child(n + 3) {
-//     flex-basis: 100%;
-//   }
-//   .#{$block-class}__groupConnector {
-//     background-color: $layer;
-//   }
-//   .#{$block-class}__condition-wrapper
-//     > :nth-child(1)
-//     .#{$block-class}__button,
-//   .#{$block-class}__condition-wrapper
-//     > :nth-child(2)
-//     .#{$block-class}__button {
-//     box-shadow: inset 0 #{$spacing-01} 0 0 var(--#{$block-class}__condition-wrapper-color);
-//   }
-// }
+//need to revamp to a simpler logic
+$colors: (
+  ($purple-70, $purple-60, $purple-50, $purple-40, $purple-30, $purple-20),
+  ($cyan-70, $cyan-60, $cyan-50, $cyan-40, $cyan-30, $cyan-20),
+  ($teal-70, $teal-60, $teal-50, $teal-40, $teal-30, $teal-20),
+  (
+    $magenta-70,
+    $magenta-60,
+    $magenta-50,
+    $magenta-40,
+    $magenta-30,
+    $magenta-20
+  ),
+  ($red-70, $red-60, $red-50, $red-40, $red-30, $red-20),
+  ($orange-70, $orange-60, $orange-50, $orange-40, $orange-30, $orange-20),
+  ($yellow-70, $yellow-60, $yellow-50, $yellow-40, $yellow-30, $yellow-20),
+  ($green-70, $green-60, $green-50, $green-40, $green-30, $green-20)
+);
+
+@for $i from 1 through list.length($colors) {
+  $selector: (
+    string.unquote(
+      '.#{$block-class}__content-container > .#{$block-class}__group-wrapper:nth-of-type(#{list.length($colors)}n+#{$i})'
+    )
+  );
+  $group-colors: list.nth($colors, $i);
+  @each $color in $group-colors {
+    #{$selector} {
+      /* stylelint-disable-next-line carbon/theme-token-use */
+      --#{$block-class}__condition-wrapper-color: #{$color};
+    }
+
+    $selector: list.append(
+      $selector,
+      string.unquote('.#{$block-class}__group')
+    );
+  }
+}
+
+.#{$block-class}__tree {
+  .#{$block-class}__condition-wrapper > :nth-child(n + 3) {
+    flex-basis: 100%;
+  }
+  .#{$block-class}__groupConnector {
+    background-color: $layer;
+  }
+  .#{$block-class}__condition-wrapper > :nth-child(1) .#{$block-class}__button,
+  .#{$block-class}__condition-wrapper > :nth-child(2) .#{$block-class}__button {
+    /* stylelint-disable-next-line carbon/theme-token-use */
+    box-shadow: inset 0 #{$spacing-01} 0 0 var(--#{$block-class}__condition-wrapper-color);
+  }
+}
+
 .#{$block-class}__groupOperatorConnector {
   margin-bottom: $spacing-02;
 }