@sc-360-v2/storefront-cms-library 0.3.28 → 0.3.30

package/dist/submit-quote.scss

@@ -2,16 +2,27 @@
   display: flex;
   gap: 24px;
   padding: 32px;
+  width: 100%;
+  justify-content: space-between;
 
   .quote-items {
     flex: 2;
+    min-height: calc(100% - 61px);
+    overflow-y: auto;
   }
 
   .quote-item {
     padding: 32px 0;
     display: flex;
     gap: 24px;
-    border-bottom: 1px dotted #d0d0d0;
+    border-bottom: 1px dashed var(--_gray-400);
+    padding-right: 10px;
+    &:first-child {
+      padding-top: 0;
+    }
+    &:last-child {
+      border-bottom: 0;
+    }
 
     .quote-item__image {
       width: 120px;
@@ -28,29 +39,53 @@
 
       .quote-item__header {
         display: flex;
-        flex-direction: row;
-        gap: 10px;
-        margin-bottom: 20px;
-        padding-bottom: 20px;
-        border-bottom: 1px dotted #d0d0d0;
+        flex-direction: column;
+        // gap: 16px;
+        margin-bottom: 16px;
+        padding-bottom: 16px;
+        border-bottom: 1px dashed var(--_gray-400);
+        // align-items: center;
 
         .quote-item__title {
-          font-size: 18px;
-          font-weight: 600;
-          color: #111;
+          font-size: 16px;
+          font-weight: 500;
+          color: var(--_gray-900);
+          &:after {
+            width: 1px;
+            height: 10px;
+            background: var(--_gray-600);
+            display: inline-block;
+            content: "";
+            margin-left: 16px;
+          }
         }
 
         .quote-item__meta {
           display: flex;
-          gap: 10px;
-          font-size: 18px;
-          color: #363636;
+          gap: 6px;
+          font-size: 14px;
+          font-weight: 400;
+          color: var(--_gray-600);
+          // span {
+          //   &::after {
+          //     width: 1px;
+          //     height: 10px;
+          //     background: var(--_gray-600);
+          //     content: "";
+          //     display: inline-block;
+          //     margin-left: 6px;
+          //   }
+          //   &:last-child::after {
+          //     width: 0 !important;
+          //     margin: 0 !important;
+          //   }
+          // }
         }
       }
 
       .quote-item__row {
         display: flex;
-        gap: 60px;
+        gap: 48px;
         align-items: flex-start;
 
         .field {
@@ -61,13 +96,14 @@
           label {
             margin-bottom: 6px;
             font-weight: 500;
-            color: #333;
+            color: var(--_gray-700);
           }
 
           .value {
-            font-weight: 600;
-            font-size: 16px;
-            color: #111;
+            font-weight: 700;
+            font-size: 20px;
+            line-height: 38px;
+            color: var(--_gray-900);
           }
 
           input {
@@ -95,11 +131,9 @@
             height: 40px;
 
             span {
-              background-color: #f9f9f9;
               padding: 0 8px;
               font-size: 15px;
-              color: #444;
-              border-right: 1px solid #ccc;
+              color: var(--_gray-500);
             }
 
             input {
@@ -122,6 +156,7 @@
           .quote-total {
             display: flex;
             flex-direction: column;
+            gap: 6px;
 
             > div {
               display: flex;
@@ -131,30 +166,34 @@
 
               .label {
                 font-size: 14px;
-                color: #444;
+                color: var(--_gray-700);
+                line-height: 20px;
+                font-weight: 500;
               }
 
               .amount {
                 font-size: 18px;
                 font-weight: 700;
-                color: #111;
+                color: var(--_gray-900);
+                line-height: 28px;
+                min-width: 80px;
               }
             }
 
             small {
-              font-size: 13px;
-              color: #888;
-              margin-top: 4px;
+              font-size: 14px;
+              font-weight: 400;
+              line-height: 20px;
+              color: var(--_gray-500);
             }
-
             &.discounted {
               .label {
                 color: #198754;
               }
 
-              .amount {
-                color: #198754;
-              }
+              // .amount {
+              //   color: #198754;
+              // }
             }
           }
         }
@@ -163,50 +202,69 @@
   }
 
   .quote-summary {
-    background: #f8f9fa;
+    // background: #f8f9fa;
     border: 1px solid #e3e3e3;
-    border-radius: 8px;
-    padding: 24px;
+    border-radius: 4px;
+    // padding: 24px;
     width: 100%;
     max-width: 400px;
 
     h3 {
-      font-size: 18px;
-      font-weight: 600;
-      margin-bottom: 20px;
-      color: #333;
+      font-size: 16px;
+      font-weight: 700;
+      color: var(--_gray-900);
+      background: #f5f5f5;
+      line-height: 24px;
+      padding: 12px;
+      border-radius: 4px 4px 0 0;
+    }
+    .quote-summary-body {
+      padding: 0 16px 16px 16px;
     }
 
     &__row {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      padding: 12px 0;
-      border-bottom: 1px dotted #ccc;
-      margin-bottom: 4px;
-
+      padding: 16px 0;
+      border-bottom: 1px dashed var(--_gray-400);
       .label {
         font-size: 14px;
-        color: #666;
+        font-weight: 400;
+        line-height: 20px;
+        color: var(--_gray-500);
+      }
+      .label-quote {
+        font-size: 16px;
+        font-weight: 600;
+        line-height: 24px;
+        color: #1f1930;
       }
 
       .value {
-        font-size: 16px;
+        font-size: 14px;
         font-weight: 500;
-        color: #333;
+        color: var(--_gray-900);
+        line-height: 20px;
 
         &.highlight {
-          font-size: 24px;
+          font-size: 20px;
           font-weight: 700;
-          color: #000;
+          color: #1f1930;
         }
       }
 
       &--quoted {
-        margin-bottom: 20px;
+        margin-bottom: 16px;
       }
     }
-
+    .label-notes {
+      margin-bottom: 6px;
+      font-size: 14px;
+      font-weight: 500;
+      color: var(--_gray-700);
+      display: inline-block;
+    }
     &__notes {
       width: 100%;
       height: 100px;
@@ -231,13 +289,13 @@
 
     &__button {
       width: 100%;
-      padding: 14px;
+      padding: 12px;
       background-color: #1a40f2;
       color: #fff;
       font-size: 16px;
       font-weight: 600;
       border: none;
-      border-radius: 6px;
+      border-radius: 4px;
       cursor: pointer;
       transition: background-color 0.2s ease;
 

package/dist/types/builder/elements/form-builder/index.d.ts

@@ -6,6 +6,11 @@ export declare const FB_CELL_HEIGHT = 70;
 export declare const FB_CONTAINER_PADDING = 20;
 export declare const FB_GRID_MIN_WIDTH = 4;
 export declare const FB_GRID_MOBILE_MIN_WIDTH = 2;
+export declare enum FormType {
+    Contact = 1,
+    Login = 2,
+    SignUp = 3
+}
 export declare enum FBModeEnum {
     Edit = 1,
     Preview = 2,
@@ -102,11 +107,11 @@ export declare enum FormIconEnum {
     Address = "address-fb",
     ColorPicker = "colorpicker-fb",
     InputText = "input-fb",
-    Number = "number-fb",
     Percent = "percent-fb",
     ShortAnswer = "short-answer-fb",
     LongAnswer = "long-answer-fb",
-    nk = "link-fb",
+    Number = "number-fb",
+    Link = "link-fb",
     FileUpload = "upload-fb",
     ImageUpload = "image-upload-fb",
     Rating = "star-rating-fb",
@@ -409,3 +414,10 @@ export declare function createAttributeFieldMap(attr: any): {
     };
     type: FormComponentTypeEnum;
 };
+export declare function getCompTypeByAttrId(dataTypeId: AttributeDataType): {
+    id: FormElementIdEnum;
+    icon: FormIconEnum;
+    type: FormComponentTypeEnum;
+    fieldType: FormElementTypeEnum;
+    key: string;
+};

package/dist/types/builder/interfaces/global.d.ts

@@ -1,3 +1,4 @@
+import { HorizontalOrientation, PositionValue, VerticalOrientation } from "../../global/types";
 import { LightBoxV2ElementInterface } from "../elements/light-box-v2";
 import { CMSDeviceVisibilityHiddenTypeEnums, CMSElementEditTypes, CMSCustomEventServiceTypesEnum, CMSComponentImportTypeEnum } from "../enums";
 import "./cms-tools";
@@ -148,3 +149,15 @@ export interface FlexCustomEventInterface {
     displayType?: CMSComponentImportTypeEnum;
     item?: any;
 }
+export type FlexPositionDataType = {
+    type: PositionValue;
+    horizontal: {
+        orientation: HorizontalOrientation;
+        offset: Record<string, CMSIBSizeInterface>;
+    };
+    vertical: {
+        orientation: VerticalOrientation;
+        offset: Record<string, CMSIBSizeInterface>;
+    };
+    zIndex: string;
+};