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

package/components/Form/stories/Dropdown.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.WithUIDItemComponent = exports.WithPreselectedValue = exports.WithPIDItemComponent = exports.WithLabel = exports.WithCreateCTA = exports.Disabled = exports.Default = exports.CustomOptionRenderer = void 0;
+exports["default"] = exports.WithoutCreateCTA = exports.WithUIDItemComponent = exports.WithPreselectedValue = exports.WithPIDItemComponent = exports.WithLabel = exports.WithCreateCTA = exports.Disabled = exports.Default = exports.CustomOptionRenderer = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _dataLoader = _interopRequireDefault(require("../../../core/dataLoader"));
 var _PIDItemComponent = _interopRequireDefault(require("../../PIDItemComponent/PIDItemComponent"));
@@ -496,4 +496,86 @@ var WithPIDItemComponent = exports.WithPIDItemComponent = {
       searchPlaceholder: "Search products..."
     }));
   }
+};
+var WithoutCreateCTA = exports.WithoutCreateCTA = {
+  args: {
+    showCreateCTA: false,
+    label: 'Categories',
+    idAttribute: 'id',
+    nameAttribute: 'label',
+    showSearch: true,
+    searchPlaceholder: 'Search categories...',
+    multiSelect: true,
+    noSelectionLabel: 'Select categories'
+  },
+  render: function render() {
+    var _React$useState1 = _react["default"].useState([{
+        id: '1',
+        label: 'Electronics'
+      }, {
+        id: '2',
+        label: 'Clothing'
+      }, {
+        id: '3',
+        label: 'Books'
+      }, {
+        id: '4',
+        label: 'Food'
+      }, {
+        id: '5',
+        label: 'Furniture'
+      }, {
+        id: '6',
+        label: 'Electronics'
+      }, {
+        id: '7',
+        label: 'Clothing'
+      }, {
+        id: '8',
+        label: 'Books'
+      }, {
+        id: '9',
+        label: 'Food'
+      }, {
+        id: '10',
+        label: 'Furniture'
+      }]),
+      _React$useState10 = _slicedToArray(_React$useState1, 2),
+      options = _React$useState10[0],
+      setOptions = _React$useState10[1];
+    var _React$useState11 = _react["default"].useState([]),
+      _React$useState12 = _slicedToArray(_React$useState11, 2),
+      selectedValues = _React$useState12[0],
+      setSelectedValues = _React$useState12[1];
+    var handleChange = function handleChange(value, itemData) {
+      var id = itemData.id;
+      if (value) {
+        setSelectedValues([].concat(_toConsumableArray(selectedValues), [itemData]));
+      } else {
+        setSelectedValues(selectedValues.filter(function (val) {
+          return val.id !== id;
+        }));
+      }
+    };
+    var handleDelete = function handleDelete(value) {
+      setSelectedValues(selectedValues.filter(function (val) {
+        return val.id !== value;
+      }));
+    };
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        width: '300px'
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], _extends({
+      multiSelect: true,
+      options: options,
+      value: selectedValues,
+      nameAttribute: "label",
+      onChange: handleChange,
+      showCreateCTA: true,
+      showAllTags: false,
+      isDeletable: true,
+      onDelete: handleDelete
+    }, WithCreateCTA.args)));
+  }
 };

package/components/Form/summarySelection.scss

@@ -0,0 +1,106 @@
+.summary-tags-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  width: calc(100% - 40px);
+
+  
+  .RCB-list {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+
+    gap: 6px;
+  }
+  .light-close-icon{
+    font-size: 12px;
+    color: #6f6f8d;
+    cursor: pointer;
+    margin-left: 6px;
+  }
+}
+
+.merch-dd-icon {
+  position: absolute;
+  right: 15px;
+  top: 16px;
+}
+
+.merch-tag-box{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid #dae1e9;
+  border-radius: 4px;
+  background-color: #ffffff;
+  padding: 5px 10px 5px 10px;
+  font-size: 12px;
+  text-transform: capitalize;
+
+}
+
+.new-summary-tag {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 120px;
+}
+
+.summary-pill-tag {
+  margin-right: 6px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 120px;
+  border-radius: 4px;
+  border: 1px solid #dae1e9;
+  background-color: #ffffff;
+  padding: 5px 10px 5px 10px;
+  font-size: 12px;
+  text-transform: capitalize;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  max-height: 28px;
+  min-width:36px;
+  margin-left: 6px;
+}
+
+.custom-attribute {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.filters-sub-header {
+  color: #616e7a;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 19.1px;
+  padding-top: 20px;
+}
+
+.view-more-link {
+  color: #3E71F2;
+  cursor: pointer;
+  font-size: 14px;
+  text-decoration: none;
+  padding-left: 10px;
+  white-space: nowrap;
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  
+  &:active {
+    color: #0056b3;
+  }
+}
+
+.RCB-inline-modal-btn {
+  display: flex;
+  justify-content: space-between;
+}

package/components/Form/variables.scss

@@ -0,0 +1,116 @@
+@import "../../../node_modules/@unbxd-ui/unbxd-style-dictionary/build/scss/_variables.scss";
+$base-font-color: $color-font-base;
+$pageheader-font-color: $color-font-base;
+$link-font-color: #3E71F2;
+$success-font-color: #2cb291;
+$error-font-color: #C13535;
+$thin-line-color: $color-border-tabs;
+$dashed-line-color: #A9B9C9;
+
+/* form styles */
+$form-label-color: #415867;
+$form-placeholder-color: #ACACAC;
+$form-dd-plaholder-color: #7F97A7;
+$color-background-button-primary-active: #3E71F2;
+$color-base-blue-cornflower-dark: #3865D9;
+$color-border-button-primary-hover: #3E71F2;
+$color-font-active: #3E71F2;
+$color-font-link: #3E71F2;
+$color-border-button-danger-hover: #ae3636;
+
+/* button styles */
+$primary-btn-bg: #3E71F2;
+$primary-btn-hover-bg: $color-background-button-primary-hover;
+$secondary-btn-bg: $color-background-button-secondary-base;
+$secondary-btn-color: $color-font-secondary;
+$danger-btn-bg: $color-base-red-dark;
+$danger-btn-hover-bg: $color-border-button-danger-hover;
+
+/* header styles */
+$site-switcher-bg: #F9FBFF;
+$site-switcher-color: $color-font-button-secondary;
+$header-bg-color: #F7F9FB;
+$header-font-color: #687F8F;
+$header-selected-bg: #FFF;
+$header-selected-color: $color-background-button-primary-active;
+$preview-btn-bg: #FFFFFF;
+$preview-btn-color: $color-font-link;
+$user-logo-bg: #F2F5F8;
+$user-logo-color: #3A4C59;
+$header-dd-color: #5D7483;
+
+/* horizontal navbar styles */
+$horiz-nav-color: $color-font-secondary;
+$level1-nav-selected-bg: $color-background-button-primary-base;
+$level1-nav-selected-color: #FFFFFF;
+
+/* vertical navbar styles */
+$vertical-nav-body-bg: #FFF;
+$vertical-nav-border: $color-border-tabs ;
+$vertical-nav-selected-bg: #FFF;
+$vertical-nav-color: $color-font-secondary;
+$vertical-nav-selected-color: $color-background-button-primary-base;
+
+$vertical-step-line-default : #dadada;
+
+/* modal styles */
+$modal-header-bg: #FFF;
+$modal-body-bg: #F7F9FB;
+
+/* App z-index levels
+
+page level modal : 50
+manage / profile dropdown : 40
+sticky header section : 30
+inline modals in body section : 20
+*/
+
+$pageModal-zIndex: 50;
+$headerDD-zIndex: 40;
+$stickyHeader-zIndex: 30;
+$bodyInlineModal-zIndex: 20;
+
+/* Login styles */
+$login-heading-color: #415867;
+$login-subheading-color: #289EAB;
+$login-message-color: #5D7483;
+$tnc-text-color: #8399AE;
+$unbxd-tnc-color: #289EAB;
+
+/* Feature Docs Component */
+$doc-title-color: #314857;
+$doc-subtitle-color: #415867;
+$doc-body-color: #5D7483;
+$doc-footer-bg: #F2F5F8;
+
+/* Steps widget styles */
+$step-header-color: #7F97A7;
+$step-selected-color: #314857;
+
+/* line icon text component styles */
+$round-color: #7F97A7;
+$line-color: $color-border-tabs;
+$disc-color: #5D7483;
+
+/* dataCenter style */
+$light-sky-blue: #67B8DC;
+$light-purpule: #6794DD;
+$dark-purpulr: #6771DC;
+
+/* integration landing page styles */
+$integration-page-bg: #F7F9FB;
+$integration-title-color: #314857;
+$integration-card-bg: #FFF;
+$integration-card-title-bg: #F2F5F8;
+$integration-card-title-color: #1D2E44;
+$integration-color: #5D7483;
+$integration-card-link: $color-font-link;
+
+/* yellow tag style */
+$color-yellow-border-tag: rgba(220, 137, 0, .16);
+$color-yellow-text-tag: #c58c2d;
+$color-yellow-background-tag: #fffaf2;
+
+/*misc colors */
+$color-light-blue: #C1CFF4;
+$color-border-grey: #DDE2EE;

package/components/InlineModal/inlineModal.css

@@ -0,0 +1 @@
+.RCB-inline-modal{position:relative;display:inline-block}.RCB-inline-modal.hover-open .RCB-inline-modal-body{display:none}.RCB-inline-modal.hover-open:hover .RCB-inline-modal-body{display:block}.RCB-inline-modal-btn{display:inline-block;background:#FFF;border:1px solid #eee;padding:10px;border-radius:3px;cursor:pointer}.RCB-inline-modal-body{position:absolute;background:#FFF;border:1px solid #efeeee;box-shadow:0 9px 12px 0 rgba(0,0,0,0.15);z-index:1}.RCB-inline-modal-body.RCB-align-left{left:0}.RCB-inline-modal-body.RCB-align-right{right:0}

package/components/InlineModal/inlineModalCore.scss

@@ -0,0 +1,40 @@
+.RCB {
+    &-inline-modal {
+        position: relative;
+        display: inline-block;
+
+        &.hover-open {
+            .RCB-inline-modal-body {
+                display: none;
+            }
+        
+            &:hover {
+                .RCB-inline-modal-body {
+                    display: block;
+                }
+            }
+        }
+    }
+
+    &-inline-modal-body {
+        background-color: #fff;
+        border: 1px solid #DDE2EE;
+        border-bottom-left-radius: 4px;
+        border-bottom-right-radius: 4px;
+        box-shadow: 0px 5px 15px 0px rgba(23, 23, 58, 0.1490196078);
+        max-height: 300px;
+        overflow-y: scroll;
+        overflow-x: hidden;
+        position: absolute;
+        width: 100%;
+        z-index: 1;
+
+        &.RCB-align-left {
+            left: 0;
+        }
+
+        &.RCB-align-right {
+            right: 0;
+        }
+    }
+}

package/components/InlineModal/inlineModalTheme.scss

@@ -0,0 +1,16 @@
+.RCB {
+    &-inline-modal-btn {
+        display: inline-block;
+        background: #FFF;
+        border: 1px solid #eee;
+        padding: 10px;
+        border-radius: 3px;
+        cursor: pointer;
+    }
+
+    &-inline-modal-body {
+        background: #FFF;
+        border: 1px solid #efeeee;
+        box-shadow: 0 9px 12px 0 rgba(0,0,0,0.15);
+    }
+}

package/components/Link/linkCore.scss

@@ -0,0 +1,66 @@
+/**
+    Core styles for Link component - essential styles for functionality
+**/
+
+.RCB-link {
+    display: inline;
+    cursor: pointer;
+    font-family: inherit;
+    transition: color 0.2s ease, text-decoration 0.2s ease;
+    background: none;
+    border: none;
+    padding: 0;
+    margin: 0;
+    font-weight: 600;
+    
+    &-disabled {
+        cursor: not-allowed;
+        opacity: 0.6;
+    }
+    
+    // Text decoration variations
+    &-underline {
+        text-decoration: underline;
+    }
+    
+    &-none {
+        text-decoration: none;
+    }
+    
+    &-overline {
+        text-decoration: overline;
+    }
+    
+    &-line-through {
+        text-decoration: line-through;
+    }
+    
+    &-underline-on-hover {
+        &:hover {
+            text-decoration: underline;
+        }
+    }
+    
+    &-external-icon {
+        margin-left: 4px;
+        font-size: 0.8em;
+        line-height: 1;
+        display: inline;
+    }
+    
+    // Size variations
+    &-small {
+        font-size: 12px;
+        line-height: 1.4;
+    }
+    
+    &-medium {
+        font-size: 14px;
+        line-height: 1.5;
+    }
+    
+    &-large {
+        font-size: 16px;
+        line-height: 1.6;
+    }
+}

package/components/Link/linkTheme.scss

@@ -0,0 +1,79 @@
+/**
+    Theme styles for Link component - visual appearance and branding
+**/
+
+.RCB-link {
+    // Primary appearance (default link styling)
+    &-primary {
+        color: #3e71f2;
+        
+        &:hover {
+            color: #3865d9;
+        }
+        
+        &:active {
+            color: #3e71f2;
+        }
+        
+        &:visited {
+            color: #6f42c1;
+        }
+    }
+    
+    // Secondary appearance
+    &-secondary {
+        color: #6c757d;
+        text-decoration: none;
+        
+        &:hover {
+            color: #495057;
+            text-decoration: underline;
+        }
+        
+        &:active {
+            color: #343a40;
+        }
+    }
+    
+    // Danger appearance
+    &-danger {
+        color: #dc3545;
+        text-decoration: none;
+        
+        &:hover {
+            color: #c82333;
+            text-decoration: underline;
+        }
+        
+        &:active {
+            color: #bd2130;
+        }
+    }
+    
+    // Success appearance
+    &-success {
+        color: #28a745;
+        text-decoration: none;
+        
+        &:hover {
+            color: #218838;
+            text-decoration: underline;
+        }
+        
+        &:active {
+            color: #1e7e34;
+        }
+    }
+    
+    // External link styling
+    &-external {
+        .RCB-link-external-icon {
+            color: currentColor;
+            opacity: 0.7;
+        }
+        
+        &:hover .RCB-link-external-icon {
+            opacity: 1;
+        }
+    }
+}

package/components/List/list.css

@@ -0,0 +1 @@
+.RCB-list{margin:0;padding:0}

package/components/List/listCore.scss

@@ -0,0 +1,6 @@
+.RCB {
+    &-list {
+        margin: 0;
+        padding: 0;
+    }
+}

package/components/Modal/modal.css

@@ -0,0 +1 @@
+.RCB-modal{position:absolute;top:0;width:100%;height:100%;background:rgba(0,0,0,0.8);display:flex;justify-content:center;align-items:center}.RCB-modal-body{background:#FFF;padding:20px}.RCB-modal-header{display:flex;margin-bottom:10px}.RCB-modal-title{flex:1}.RCB-modal-close{cursor:pointer}

package/components/Modal/modalCore.scss

@@ -0,0 +1,58 @@
+.RCB {
+    &-modal {
+        position: fixed;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        background: rgba(0, 0, 0, 0.6);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        z-index: 2;
+
+        .modal-footer {
+            padding: 24px 24px;
+            margin: 20px -24px 0px;
+            border-radius: 0 0 8px 8px;
+            text-align: right;
+    
+            .RCB-btn {
+                margin-right: 14px;
+    
+                &:last-child {
+                    margin-right: 0;
+                }
+            }
+        }
+    }
+
+    &-modal-body {
+        background: #FFF;
+        border-radius: 8px;
+        padding: 0px;
+    }
+
+    &-modal-header {
+        display: flex;
+        margin-bottom: 0px;
+        padding: 24px 24px 10px;
+    }
+
+    &-modal-title {
+        flex: 1;
+        font-size: 18px;
+        font-weight: 700;
+        line-height: normal;
+    }
+
+    &-modal-close {
+        cursor: pointer;
+        &:before { 
+            content: "X";
+        }
+    }
+
+    &-modal-content {
+        padding: 24px 24px 0px;
+    }
+}

package/components/NoDataPlaceholder/noDataPlaceholderCore.scss

@@ -0,0 +1,33 @@
+.RCB-no-data-placeholder {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 40px 20px;
+    text-align: center;
+}
+
+.RCB-no-data-image {
+    margin-bottom: 16px;
+}
+
+.RCB-no-data-image img {
+    max-width: 120px;
+    max-height: 120px;
+    object-fit: contain;
+}
+
+.RCB-no-data-title {
+    font-size: 18px;
+    font-weight: 600;
+    color: #333;
+    margin-bottom: 8px;
+}
+
+.RCB-no-data-description {
+    font-size: 14px;
+    color: #666;
+    line-height: 1.5;
+}
+
+

package/components/NotificationComponent/notificationComponent.css

@@ -0,0 +1 @@
+.RCB-notif{padding:10px}.RCB-notif-success{color:#129274;border:1px solid #2cb292;background-color:#b7d2cb}.RCB-notif-error{color:#d25b5b;border:solid 1px #e75190;background-color:#fff9fc}.RCB-notif-warning{color:#445870;border:solid 1px #f09c0a;background-color:#fffaf2}.RCB-notif-info{color:#509DB9;border:solid 1px #509DB9;background-color:#DFF6FF}

package/components/NotificationComponent/notificationTheme.scss

@@ -0,0 +1,38 @@
+.RCB {
+    &-notif {
+        padding: 10px;
+        border-radius: 3px;
+
+        &-success {
+            color: #6DB886;
+            border: solid 1px #6DB886;
+            background-color: #DEF9E7;
+        }
+
+        &-error {
+            color: #CA4646;
+            border: solid 1px #CA4646;
+            background-color: #FFE4E4;
+            ;
+        }
+
+        &-warning {
+            color: #D5A555;
+            border: solid 1px #D5A555;
+            background-color: #FFF8EC;
+        }
+
+        &-info {
+            color: #3E71F2;
+            border: solid 1px #3E71F2;
+            background-color: #E7EDFF;
+        }
+    }
+}
+
+.notif-wrapper{
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}