intelicoreact 0.2.93 → 0.2.96

package/dist/Atomic/FormElements/CheckboxInput/CheckboxInput.js

@@ -49,7 +49,7 @@ var CheckboxInput = function CheckboxInput(_ref) {
     ref: function ref(elem) {
       if (elem) elem.indeterminate = isStark;
     },
-    "data-testid": "checkbox--input--".concat(testId || id || key || (label === null || label === void 0 ? void 0 : label.replace(/\s/g, '-')))
+    "data-testid": "checkbox--input--".concat(testId || key)
   })), /*#__PURE__*/_react.default.createElement("span", {
     className: "checkbox-input__mark"
   })), label && /*#__PURE__*/_react.default.createElement("div", {

package/dist/Atomic/FormElements/TieredCheckboxes/TieredCheckboxes.js

@@ -77,7 +77,6 @@ var TieredCheckboxes = function TieredCheckboxes(_ref) {
           return item;
         });
         parent.disabled = true;
-        console.log(parent);
       } else {
         var _parent = items.find(function (item) {
           return item.key === parentKey;
@@ -108,6 +107,7 @@ var TieredCheckboxes = function TieredCheckboxes(_ref) {
         key: child.key,
         className: "".concat(RC, "__children")
       }, /*#__PURE__*/_react.default.createElement(_CheckboxInput.default, {
+        testId: child.key,
         label: child.label,
         value: child.value,
         disabled: child === null || child === void 0 ? void 0 : child.disabled,

package/dist/Atomic/UI/AccordionTable/AccordionTable.js

@@ -75,22 +75,36 @@ var AccordionTable = function AccordionTable(_ref) {
           key = _ref3[0],
           value = _ref3[1];
 
-      return /*#__PURE__*/_react.default.createElement("div", {
+      return key !== 'promoDetails' && /*#__PURE__*/_react.default.createElement("div", {
         key: key,
         style: {
           flexBasis: "".concat((_getHeaderItem = getHeaderItem(key)) === null || _getHeaderItem === void 0 ? void 0 : _getHeaderItem.width, "%")
         },
-        className: (0, _classnames.default)('accordion-table__td', (_getHeaderItem2 = getHeaderItem(key)) === null || _getHeaderItem2 === void 0 ? void 0 : _getHeaderItem2.className)
+        className: (0, _classnames.default)('accordion-table__td', "accordion-table__td--".concat(key), (_getHeaderItem2 = getHeaderItem(key)) === null || _getHeaderItem2 === void 0 ? void 0 : _getHeaderItem2.className)
       }, (0, _typeof2.default)(value) !== 'object' ? value : value.value);
     });
   };
 
   var renderTr = function renderTr(rows) {
     return rows === null || rows === void 0 ? void 0 : rows.map(function (row, index) {
+      var _row$cols, _row$cols2, _row$cols3;
+
       return /*#__PURE__*/_react.default.createElement("div", {
         key: index,
-        className: (0, _classnames.default)('accordion-table__tr', row.className)
-      }, renderTd(row.cols || row));
+        className: (0, _classnames.default)('accordion-table__tr', {
+          'accordion-table__tr-with-promo': row.promoDetails || ((_row$cols = row.cols) === null || _row$cols === void 0 ? void 0 : _row$cols.promoDetails)
+        }, row.className)
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "df w100"
+      }, renderTd(row.cols || row)), row.promoDetails || ((_row$cols2 = row.cols) === null || _row$cols2 === void 0 ? void 0 : _row$cols2.promoDetails) && /*#__PURE__*/_react.default.createElement("div", {
+        className: "accordion-table__tr-promo-wrapper"
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "accordion-table__tr-promo"
+      }, /*#__PURE__*/_react.default.createElement(_reactFeather.Tag, {
+        className: "tr-promo-icon"
+      }), /*#__PURE__*/_react.default.createElement("span", {
+        className: "tr-promo-label"
+      }, "PROMOTION"), row.promoDetails || ((_row$cols3 = row.cols) === null || _row$cols3 === void 0 ? void 0 : _row$cols3.promoDetails))));
     });
   };
 
@@ -101,14 +115,32 @@ var AccordionTable = function AccordionTable(_ref) {
       },
       className: "accordion-table__accordion-label-box"
     }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "j4"
+      className: "accordion-table__accordion-label-wrapper j4"
     }, /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronDown, {
+      width: 8,
+      height: 4,
       className: (0, _classnames.default)('accordion-label-box__icon', {
         'accordion-label-box__icon--open': row.isOpen
       })
     }), /*#__PURE__*/_react.default.createElement("span", {
       className: "accordion-label-box__label"
-    }, row.label)), /*#__PURE__*/_react.default.createElement("div", null, row.titleContent));
+    }, row.label), row.statistics && /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _classnames.default)('accordion-table__tr', row.className)
+    }, Object.entries(row.statistics).map(function (_ref4) {
+      var _getHeaderItem3, _getHeaderItem4;
+
+      var _ref5 = (0, _slicedToArray2.default)(_ref4, 2),
+          key = _ref5[0],
+          value = _ref5[1];
+
+      return /*#__PURE__*/_react.default.createElement("div", {
+        key: key,
+        style: {
+          flexBasis: "".concat((_getHeaderItem3 = getHeaderItem(key)) === null || _getHeaderItem3 === void 0 ? void 0 : _getHeaderItem3.width, "%")
+        },
+        className: (0, _classnames.default)('accordion-table__statistics-td', (_getHeaderItem4 = getHeaderItem(key)) === null || _getHeaderItem4 === void 0 ? void 0 : _getHeaderItem4.className)
+      }, value);
+    }))), row.titleContent);
   };
 
   (0, _react.useEffect)(function () {

package/dist/Atomic/UI/AccordionTable/AccordionTable.scss

@@ -1,9 +1,9 @@
 .accordion-table {
   display: flex;
-  flex-direction: column;
+  overflow-x: auto;
   align-items: flex-start;
+  flex-direction: column;
   justify-content: flex-start;
-  overflow-x: auto;
   width: 100%;
   min-width: 700px;
 
@@ -17,22 +17,23 @@
   &__header-item {
     display: flex;
     align-items: center;
-    white-space: nowrap;
+    padding: 5px 10px;
     user-select: none;
+    white-space: nowrap;
     text-transform: uppercase;
     color: #757f8c;
+    background-color: #ebeff2;
     font-size: 11px;
     font-weight: 500;
-    padding: 5px 10px;
-    background-color: #ebeff2;
 
     &:first-child {
-      border-top-left-radius: 8px;
       padding-left: 15px;
+      border-top-left-radius: 8px;
     }
+
     &:last-child {
-      border-top-right-radius: 8px;
       padding-right: 15px;
+      border-top-right-radius: 8px;
     }
   }
 
@@ -44,27 +45,29 @@
     &:not(:first-child) {
       border-top: 1px solid #ebeff2;
     }
+
     &:last-child {
       .mono-accordion__container {
-        border-bottom-left-radius: 8px;
         border-bottom-right-radius: 8px;
+        border-bottom-left-radius: 8px;
       }
     }
 
     &--closed {
       .mono-accordion__head {
         transition: all 0.3s ease-out;
-        box-shadow: 0px 5px 8px rgba(255, 255, 255, 0.12)!important;
+        box-shadow: 0 5px 8px rgb(255 255 255 / 12%) !important;
       }
 
       .mono-accordion__container {
         transition: all 0.3s ease-out;
         opacity: 0;
       }
+
       &:last-child {
         .mono-accordion__head {
-          border-bottom-left-radius: 8px;
           border-bottom-right-radius: 8px;
+          border-bottom-left-radius: 8px;
         }
       }
     }
@@ -82,9 +85,9 @@
   }
 
   &__td {
-    padding: 15px 0px;
-    border-bottom: 1px solid #ebeff2;
+    padding: 11.5px 0;
     white-space: nowrap;
+    border-bottom: 1px solid #ebeff2;
     font-size: 14px;
     font-weight: 400;
 
@@ -96,8 +99,14 @@
       margin-right: 15px;
     }
 
-    &:not(:first-child):not(:last-child) {
-      padding-right: 30px;
+    &:not(:first-child, :last-child) {
+      padding-right: 20px;
+    }
+
+    &--name {
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
     }
   }
 
@@ -107,24 +116,107 @@
     justify-content: space-between;
   }
 
+  &__accordion-label-wrapper {
+    width: 100%;
+    max-height: 19px;
+
+    .accordion-table__tr {
+      justify-content: flex-end;
+      background-color: unset !important;
+    }
+
+    .accordion-table__td:first-child {
+      margin-left: 0;
+    }
+
+    .accordion-table__td:last-child {
+      margin-right: 0;
+    }
+  }
+
+  &__statistics-td {
+    padding: 15px 0;
+    white-space: nowrap;
+    font-size: 14px;
+    font-weight: 400;
+
+    &:not(:last-child) {
+      padding-right: 53px;
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  &__tr-promo-wrapper {
+    margin-left: 50px;
+    margin-right: 15px;
+    border-bottom: 1px solid #ebeff2;
+  }
+
+  &__tr-with-promo {
+    flex-direction: column;
+
+    .accordion-table__td {
+      border-bottom: none;
+      padding: 15px 0 8px;
+    }
+  }
+
+  &__tr-promo {
+    background-color: #fff4e5;
+    border: 1px solid #ffce9f;
+    border-radius: 8px;
+    height: 16px;
+    display: flex;
+    align-items: center;
+    padding: 4px 8px;
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 18px;
+    letter-spacing: 0.2px;
+    color: #3b414b;
+    margin-bottom: 10px;
+    width: 40%;
+  }
+
+  &__status-icon {
+    color: #fa564c;
+    margin-right: 5px;
+    margin-top: 2px;
+  }
+
+  .tr-promo-icon {
+    color: #ff7d00;
+  }
+
+  .tr-promo-label {
+    font-weight: 600;
+    color: #ff7d00;
+    margin-right: 8px;
+  }
+
   .accordion-label-box {
     &__label {
       user-select: none;
+      white-space: nowrap;
+      margin-left: 15px;
     }
+
     &__icon {
-      transition: all 0.2s ease-out;
-      color: #757f8c;
-      margin-right: 5px;
-      min-width: 32px;
-      max-width: 32px;
+      min-width: 15px;
+      max-width: 15px;
       min-height: 16px;
       max-height: 16px;
+      transition: all 0.2s ease-out;
+      color: #757f8c;
 
       &--open {
         transform: rotate(180deg);
       }
     }
+
     &__status {
+      white-space: nowrap;
       font-size: 12px;
       font-weight: 400;
     }
@@ -132,17 +224,19 @@
 
   .mono-accordion {
     &__head {
-      padding: 14.5px;
-      box-shadow: 0px 5px 8px rgba(39, 73, 113, 0.12);
-      background-color: #ffff;
       position: relative;
       z-index: 2;
+      padding: 14.5px 15px 14.5px 20px;
+      background-color: #ffff;
+      box-shadow: 0 5px 8px rgb(39 73 113 / 12%);
     }
+
     &__container {
-      flex-direction: row;
       position: relative;
+      flex-direction: row;
       background-color: #ffff;
     }
+
     &__content-wrapper {
       width: 100%;
       padding: 0;

package/dist/Atomic/UI/Status/Status.js

@@ -14,7 +14,8 @@ var _classnames = _interopRequireDefault(require("classnames"));
 require("./Status.scss");
 
 var Status = function Status(_ref) {
-  var value = _ref.value,
+  var icon = _ref.icon,
+      value = _ref.value,
       label = _ref.label,
       status = _ref.status,
       disabled = _ref.disabled,
@@ -30,7 +31,7 @@ var Status = function Status(_ref) {
   var text = children && typeof children === 'string' ? children : value || label || status;
   var formatedLabel = (text === null || text === void 0 ? void 0 : text[0].toUpperCase()) + (text === null || text === void 0 ? void 0 : text.slice(1));
   return /*#__PURE__*/_react.default.createElement("div", {
-    "data-testid": 'test-status',
+    "data-testid": "test-status",
     className: (0, _classnames.default)({
       disabled: disabled
     }, className)
@@ -49,8 +50,10 @@ var Status = function Status(_ref) {
       'status--no-bg': noBackground
     }, {
       'color--gray-gull': noBackground && status === 'pause' && !className
+    }, {
+      j4: icon
     })
-  }, formatedLabel));
+  }, icon, formatedLabel));
 };
 
 var _default = Status;

package/dist/Atomic/UI/Status/Status.scss

@@ -18,6 +18,7 @@
     border-radius: 15px;
     height: 20px;
   }
+
   &--active,
   &--approved {
     color: $color--green-haze;
@@ -76,4 +77,9 @@
     background-color: $color--border;
     color: #777;
   }
+
+  &--outline {
+    border: 1px solid #D6D9E4;
+    color: #1F7499;
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "intelicoreact",
-  "version": "0.2.93",
+  "version": "0.2.96",
   "description": "",
   "main": "dist/index.js",
   "files": [