@unbxd-ui/unbxd-react-components 0.3.2-beta.1 → 0.3.2-beta.2

package/components/PIDItemComponent/PIDItemComponent.js

@@ -19,6 +19,8 @@ function PIDItemComponent(props) {
     clientSelectItem = _props$selectItem === void 0 ? function () {} : _props$selectItem,
     _props$keysMap = props.keysMap,
     clientKeysMap = _props$keysMap === void 0 ? {} : _props$keysMap,
+    _props$selectedItems = props.selectedItems,
+    clientSelectedItems = _props$selectedItems === void 0 ? [] : _props$selectedItems,
     _props$data = props.data,
     data = _props$data === void 0 ? {} : _props$data,
     _props$index = props.index,
@@ -32,7 +34,9 @@ function PIDItemComponent(props) {
     _data$selectItem = data.selectItem,
     serverSelectItem = _data$selectItem === void 0 ? function () {} : _data$selectItem,
     _data$keysMap = data.keysMap,
-    serverKeysMap = _data$keysMap === void 0 ? {} : _data$keysMap;
+    serverKeysMap = _data$keysMap === void 0 ? {} : _data$keysMap,
+    _data$selectedItems = data.selectedItems,
+    serverSelectedItems = _data$selectedItems === void 0 ? [] : _data$selectedItems;
 
   // Determine the pagination type
   var paginationType = clientPaginationType ? "CLIENT" : serverPaginationType;
@@ -41,6 +45,7 @@ function PIDItemComponent(props) {
   var updatedItemData = paginationType !== 'SERVER' ? itemData : items[index] || {};
   var updatedSelectItem = paginationType !== 'SERVER' ? clientSelectItem : serverSelectItem;
   var updatedKeysMap = paginationType !== 'SERVER' ? clientKeysMap : serverKeysMap || {};
+  var updatedSelectedItems = paginationType !== 'SERVER' ? clientSelectedItems : serverSelectedItems || [];
 
   // Destructue the items value with its respective keys map provided in the props
   var _updatedKeysMap$uniqu = updatedKeysMap.uniqueIdMap,
@@ -52,8 +57,13 @@ function PIDItemComponent(props) {
   var title = updatedItemData[titleMap];
   var imageUrl = Array.isArray(updatedItemData[imageUrlMap]) ? updatedItemData[imageUrlMap][0] : updatedItemData[imageUrlMap] ? updatedItemData[imageUrlMap] : DEFAULT_IMAGE;
   var uniqueId = updatedItemData[uniqueIdMap];
+
+  // Check if the item is selected    
+  var isItemSelected = updatedSelectedItems.find(function (item) {
+    return item[uniqueIdMap] === uniqueId;
+  });
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: "RCB-list-item RCB-pid-dd-item",
+    className: "RCB-list-item RCB-pid-dd-item ".concat(isItemSelected ? "selected" : ""),
     style: style,
     onClick: function onClick() {
       return updatedSelectItem(updatedItemData);

package/components/PIDItemComponent/PIDItemComponentCore.scss

@@ -0,0 +1,36 @@
+.RCB-pid-dd-item {
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  cursor: pointer;
+  padding-bottom: 8px;
+  padding-left: 13px;
+  padding-top: 8px;
+  width: 100%;
+
+  .RCB-pid-product-image {
+    height: 35px;
+    margin-right: 5px;
+    -o-object-fit: contain;
+    object-fit: contain;
+    width: 30px;
+  }
+
+  .RCB-title {
+    font-size: 12px;
+    font-weight: 600;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    display: -webkit-box;
+    overflow: hidden;
+  }
+  .RCB-pid-id {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 240px;
+    text-transform: none;
+    font-size: 12px;
+  }
+}

package/components/PageLoader/pageLoaderCore.scss

@@ -0,0 +1,34 @@
+.page-loader {
+  width: 100%;
+  height: fit-content;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.loader-wrapper {
+  text-align: center;
+}
+
+.loader-header {
+  color: #17173A;
+  font-weight: 600;
+  font-size: 16px;
+  margin-top: 15px;
+}
+
+.loader-messages {
+  color: #6F6F8D;
+  margin-top: 5px;
+  font-weight: 400;
+  font-size: 14px;
+  transition: opacity 0.4s ease-in-out;
+
+  &.fade-in {
+    opacity: 1;
+  }
+
+  &.fade-out {
+    opacity: 0;
+  }
+}

package/components/ProgressBar/progressBarCore.scss

@@ -0,0 +1,22 @@
+.RCB {
+    &-progress-bar {
+        width: 100%;
+        position: relative;
+        background: #ccc;
+
+        &.custom-warning {
+            background: #FFCF5C;
+        }
+
+        &.custom-error {
+            background: #F05C5C;
+        }
+    }
+
+    &-progress-value {
+        height: 100%;
+        position: absolute;
+        top: 0;
+        background: #3d9565;
+    }
+}

package/components/Table/tableCore.scss

@@ -0,0 +1,547 @@
+.RCB {
+    &-table {
+        border-collapse: collapse;
+        width: 100%;
+    }
+
+    &-th {
+        &.RCB-expand-column {
+            width: 50px;
+        }
+    }
+
+    &-th-sortable {
+        cursor: pointer;
+    }
+
+    &-th-sort {
+        &:after {
+            content: "\2B0D"
+        }
+    }
+
+    &-th-asc {
+        &:after {
+            content: "\25B2";
+        }
+    }
+
+    &-th-dsc {
+        &:after {
+            content: "\25BC";
+        }
+    }
+
+    &-tr {
+
+        .expand-open {
+            &:before {
+                content: "▼"
+            }
+        }
+
+        .expand-close {
+            &:before {
+                content: "▶"
+            }
+        }
+    }
+
+    &-paginate-wrapper {
+        .RCB-per-page-count {
+            display: inline-block;
+        }
+
+        .RCB-form-el-cont {
+            margin: 0;
+        }
+
+        .RCB-inline-modal-btn {
+            background: transparent;
+            padding: 0;
+        }
+    }
+
+    &-paginate-nav {
+        display: inline-block;
+        border-radius: 12px;
+        border: solid 1px #8399ae;
+        background-color: #f6f7f9;
+        vertical-align: middle;
+        margin-left: 15px;
+        overflow: hidden;
+    }
+
+    &-page-nav {
+        padding: 0 5px;
+        text-decoration: none;
+        color: inherit;
+
+        &:first-child {
+            border-right: solid 1px #8399ae;
+        }
+
+        &.disabled {
+            color: #ccc;
+            pointer-events: none;
+            cursor: not-allowed;
+        }
+    }
+
+    &-no-data {
+        text-align: center;
+    }
+}
+
+.nutana-table {
+    font-family: Nunito Sans, Helvetica Neue, Helvetica, Roboto, "sans-serif";
+    letter-spacing: 0.42px;
+    max-height: unset !important;
+    min-height: unset !important;
+    overflow: inherit !important;
+    z-index: 20;
+
+    .rdt_TableRow {
+        border-bottom-color: #DDE2EE !important;
+
+        &:hover {
+            background-color: #F4F8FF;
+
+            .readable {
+                color: #3E71F2;
+                cursor: pointer;
+            }
+
+            .view-one {
+                background-color: #F4F8FF;
+
+                .no-metric-wrap {
+                    background-color: #F4F8FF !important;
+                }
+            }
+
+            .rdt_TableCell:first-child,
+            [aria-label="Expand Row"] {
+                box-shadow: inset 3px 0px 0px 0px #3E71F2;
+            }
+        }
+
+        .rdt_TableCell {
+            padding: 0;
+            border-right: unset;
+
+            &:first-child {
+                border-left: 1px solid #DDE2EE;
+            }
+
+            &:last-child {
+                border-right: 1px solid #DDE2EE;
+            }
+        }
+    }
+
+    &.first-clm-sticky {
+        overflow-x: auto !important;
+        overflow-y: hidden;
+
+        .rdt_TableRow {
+            .rdt_TableCell {
+                &:first-child {
+                    background: white;
+                    border-right: 1px solid #dde2ee;
+                    box-shadow: 5px 10px 15px 0px #17173A14;
+                    position: sticky;
+                    left: 0;
+                    z-index: 9;
+                }
+            }
+
+            &:hover {
+                .rdt_TableCell:first-child {
+                    background-color: #F4F8FF;
+                }
+            }
+        }
+
+        .rdt_TableHeadRow .rdt_TableCol:first-child {
+            background: white;
+            border-right: 1px solid #dde2ee;
+            position: sticky;
+            left: 0;
+            z-index: 9;
+        }
+    }
+
+    &.last-clm-sticky {
+        overflow-x: auto !important;
+        overflow-y: hidden;
+
+        .rdt_TableRow {
+            .rdt_TableCell {
+                &:last-child {
+                    background: white;
+                    border-left: 1px solid #dde2ee;
+                    box-shadow: -5px 10px 15px 0px #17173A14;
+                    position: sticky;
+                    left: unset;
+                    right: 0;
+                    z-index: 9;
+                }
+            }
+
+            &:hover {
+                .rdt_TableCell:last-child {
+                    background-color: #F4F8FF;
+                }
+            }
+        }
+
+        .rdt_TableHeadRow .rdt_TableCol:last-child {
+            background: white;
+            border-left: 1px solid #dde2ee;
+            position: sticky;
+            left: unset;
+            right: 0;
+            z-index: 9;
+        }
+    }
+
+    .tbl-content {
+        padding: 18px 24px;
+        width: 100%;
+    }
+
+    .header-title {
+        color: #17173A;
+        display: inline;
+        font-weight: 600;
+        font-size: 16px;
+        text-transform: capitalize;
+    }
+
+    .tbl-title-1 {
+        color: #17173A;
+        font-size: 16px;
+        font-weight: 600;
+        margin-bottom: 14px;
+    }
+
+    .tbl-title-2 {
+        color: #17173A;
+        font-size: 14px;
+        font-weight: 600;
+    }
+
+    .tbl-title-3 {
+        color: #17173A;
+        font-size: 12px;
+        font-weight: 600;
+    }
+
+    .tbl-desc-1 {
+        color: #6F6F8D;
+        font-size: 16px;
+        font-weight: 600;
+        margin-bottom: 14px;
+    }
+
+    .tbl-desc-2 {
+        color: #6F6F8D;
+        font-size: 14px;
+        font-weight: 600;
+        margin-bottom: 14px;
+    }
+
+    .tbl-desc-3 {
+        color: #6F6F8D;
+        font-size: 12px;
+        font-weight: 600;
+        letter-spacing: .42px;
+    }
+
+    .rdt_TableHeadRow {
+        box-shadow: 0px 5px 15px 0px #17173A14;
+        border-color: #DDE2EE;
+        z-index: 10;
+    }
+
+    .rdt_TableHeadRow .rdt_TableCol:first-child {
+        border-right: unset;
+        border-left: 1px solid #dde2ee;
+        border-top: 1px solid #dde2ee;
+        border-top-left-radius: 8px;
+        margin: 0;
+    }
+
+    .rdt_TableHeadRow .rdt_TableCol {
+        border-right: unset;
+        border-color: #DDE2EE;
+        padding: 16px 24px;
+    }
+
+    .rdt_TableHeadRow .rdt_TableCol:last-child {
+        border-right: 1px solid #DDE2EE;
+        border-top-right-radius: 8px;
+    }
+
+    .rdt_TableCol_Sortable {
+        [data-column-id] {
+            color: #17173a;
+            display: inline;
+            font-size: 16px;
+            font-weight: 600;
+            text-transform: capitalize;
+        }
+
+        .status-col-tooltip {
+            vertical-align: middle;
+
+            .RCB-tooltip-btn {
+                margin-left: 5px;
+                border: unset;
+            }
+        }
+    }
+
+    .column-kebab-menu {
+        .RCB-inline-modal-btn {
+            padding: 0;
+        }
+
+        .RCB-inline-modal-body {
+            border-radius: 4px;
+            width: max-content;
+        }
+    }
+
+    .left-line {
+        border-left: 1px solid #dde2ee;
+        height: 20px;
+        padding-left: 12px;
+    }
+
+    .dd-menu-item {
+        align-items: center;
+        cursor: pointer;
+        color: #6F6F8D;
+        display: flex;
+        font-size: 14px;
+        font-weight: 600;
+        padding: 12px 16px;
+
+        &:hover {
+            box-shadow: inset 3px 0 0 0 #3E71F2;
+            background-color: #F4F8FF;
+            color: #17173A;
+
+            .tbl-plus-icon {
+                background-position: -1988px -2777px;
+            }
+
+            .tbl-file-icon {
+                background-position: -2031px -2777px;
+            }
+        }
+
+        .menu-icon {
+            margin-right: 8px;
+        }
+
+        &.no-more-queries-disabled {
+            color: #bfc8ce;
+            text-decoration: none;
+            cursor: no-drop;
+        }
+    }
+
+    .status-btn {
+        border: 1px solid;
+        border-radius: 37px;
+        font-size: 12px;
+        font-weight: 600;
+        letter-spacing: .42px;
+        padding: 3px 8px;
+
+        &__active {
+            background-color: #e9f8f3;
+            ;
+            border-color: #90DCC1;
+            color: #00C48C;
+
+        }
+
+        &__draft {
+            background-color: #e1e8fa;
+            border-color: #8BACFF;
+            color: #0A8FFD;
+        }
+
+        &__upcoming {
+            background-color: #fff5de;
+            border-color: #FEE199;
+            color: #C39C5B;
+        }
+
+        &__expired {
+            background: #FFE6E6;
+            border-color: #FF8484;
+            color: #F05C5C;
+        }
+
+        &__stopped {
+            background: #EFEFEF;
+            border-color: #A0A0A0;
+            color: #6F6F8D;
+        }
+    }
+
+    .status-btns {
+        margin-bottom: 0;
+    }
+
+    .merch-rule-type {
+        border: 1px solid #dae1e9;
+        border-radius: 12px;
+        background-color: #ffffff;
+        color: #687f8f;
+        font-size: 10px;
+        padding: 4px 9px;
+    }
+
+    .campaign-type-icon span:first-of-type {
+        &:before {
+            content: "";
+            margin-right: 2px;
+
+        }
+    }
+
+    .vertical-menu-icon {
+        background-position: -1946px -2744px;
+        height: 18px;
+        transform: scale(1.3);
+        width: 18px;
+
+        &:hover {
+            background-position: -1946px -2778px;
+        }
+    }
+
+    .right-triangle-icon {
+        background-position: -1857px -2745px;
+        height: 20px;
+        transform: scale(1);
+        width: 20px;
+    }
+
+    .delete-text {
+        color: #F05C5C;
+    }
+
+    .loading-anim-wrap {
+        padding: 18px 24px;
+        width: 100%;
+    }
+
+    .global {
+        align-items: center;
+        color: #3E71F2;
+        text-transform: capitalize;
+
+        .glob-icon {
+            margin-right: 3px;
+            margin-left: -2px;
+        }
+    }
+
+    .meta-info-bg {
+        background-color: #F4F8FF;
+        border-radius: 6px;
+        padding: 16px;
+        width: fit-content;
+    }
+
+    .mb-5 {
+        margin-bottom: 5px;
+    }
+
+    .mb-0 {
+        margin-bottom: 0;
+    }
+
+    .mb-3 {
+        margin-bottom: 3px;
+    }
+
+    .mt-2 {
+        margin-top: 2px;
+    }
+
+    .pl-3 {
+        padding-left: 3px;
+    }
+
+    .pl-10 {
+        padding-left: 10px;
+    }
+}
+
+.RCB-table {
+    font-size: 14px;
+
+    thead {
+        border: 1px solid #DADFE6;
+    }
+
+    th {
+        color: #FFF;
+        background-color: #5C7185;
+        padding: 10px 8px;
+        text-align: left;
+    }
+
+    .RCB-tr {
+        height: 41px;
+    }
+
+    td {
+        padding: 6px;
+        background-color: #FFF;
+        border-bottom: 1px solid #E8EDEF;
+    }
+
+    .RCB-form-el-cont {
+        margin: 0;
+    }
+}
+
+.RCB-th-sortable:after {
+    content: " ";
+    margin-left: 7px;
+}
+
+.RCB-paginate-bar {
+    color: #445870;
+    font-size: 14px;
+    padding: 7px 18px;
+    border: 1px solid #DADFE6;
+    border-radius: 7px 7px 0 0;
+    background-color: #eef2fc;
+
+    .RCB-dropdown {
+        .RCB-inline-modal {
+            border: none;
+        }
+    }
+
+    .RCB-inline-modal-btn {
+        background: transparent;
+        padding: 0;
+    }
+}
+
+.rdt_Pagination {
+    border-color: #DDE2EE !important;
+    border-bottom-left-radius: 8px;
+    border-bottom-right-radius: 8px;
+}

package/components/Table/tableTheme.scss

@@ -0,0 +1,34 @@
+.RCB {
+    &-table {
+        td {
+            padding: 10px;
+        }
+    }
+
+    &-th {
+        background-color: #2287b4;
+        color: #FFF;
+        font-weight: normal;
+        padding: 10px;
+    }
+
+    &-even-tr {
+        background-color: #FFF;
+    }
+
+    &-odd-tr {
+        background-color: #dcf1fa;
+    }
+
+    &-expanded-row {
+        background-color: #ecf2f4;
+    }
+
+    &-paginate-bar {
+        background-color: #a3c9db;
+        text-align: right;
+        font-size: 14px;
+        padding: 5px;
+        border-radius: 5px 5px 0 0;
+    }
+}

package/components/TabsComponent/tabs.css

@@ -0,0 +1 @@
+.RCB-tab-title{list-style-type:none;display:inline-block;padding:10px;cursor:pointer}.RCB-tab-title.selected{background:#FFF;font-weight:bold;border:1px solid #cacaca;border-bottom:0;position:relative;z-index:1;bottom:-1px}.RCB-tab-content{list-style-type:none;border:1px solid #cacaca;padding:10px}.RCB-tab-content.selected{display:block}