@openlettermarketing/olc-react-sdk 2.1.4 → 2.1.5-beta.2

package/src/components/GenericUIBlocks/Dialog/styles.scss

@@ -0,0 +1,227 @@
+.modal {
+  display: none;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  z-index: 99999;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden !important;
+  background-color: rgb(0 0 0 / 60%);
+
+  .modal-content {
+    position: relative;
+    background-color: var(--modal-background-color);
+    margin: auto;
+    padding: 0;
+    border: 1px solid #888;
+    width: 80%;
+    max-height: 90%;
+    overflow-y: auto;
+    box-shadow:
+      0 4px 8px 0 rgba(0, 0, 0, 0.2),
+      0 6px 20px 0 rgba(0, 0, 0, 0.19);
+    -webkit-animation-name: animatetop;
+    -webkit-animation-duration: 0.4s;
+    animation-name: animatetop;
+    animation-duration: 0.4s;
+    border-radius: 11px;
+    .modal-header {
+      position: relative;
+      height: 100%;
+      min-height: 20px;
+      color: var(--text-color);
+
+      .close {
+        float: right;
+        font-size: 28px;
+        font-weight: bold;
+        position: absolute;
+        right: 5px;
+        top: 0;
+      }
+
+      .close:hover,
+      .close:focus {
+        text-decoration: none;
+        cursor: pointer;
+      }
+    }
+
+    .modal-body {
+      padding: 2px 16px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+      color: var(--text-color);
+      .modal-icon {
+        svg {
+          width: 100%;
+          max-width: 60px;
+          height: 100%;
+          min-height: 70px;
+          g {
+            mask: none;
+            path {
+              fill: var(--primary-color);
+            }
+          }
+          circle {
+            stroke: var(--primary-color);
+          }
+        }
+      }
+    }
+
+    .modal-footer {
+      padding: 2px 16px;
+      color: var(--text-color);
+      position: absolute;
+      bottom: 10px;
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      gap: 20px;
+    }
+  }
+
+  @-webkit-keyframes animatetop {
+    from {
+      top: -300px;
+      opacity: 0;
+    }
+    to {
+      top: 0;
+      opacity: 1;
+    }
+  }
+
+  @keyframes animatetop {
+    from {
+      top: -300px;
+      opacity: 0;
+    }
+    to {
+      top: 0;
+      opacity: 1;
+    }
+  }
+}
+
+.galleryModal {
+  @media (max-width: 1200px) {
+    min-width: 1000px;
+  }
+
+  @media (max-width: 992px) {
+    min-width: 750px;
+  }
+
+  @media (max-width: 768px) {
+    min-width: auto;
+  }
+}
+
+// new theme modal
+.newThemeModal{
+  .modal-content {
+    position: relative;
+    background-color: var(--modal-background-color);
+    margin: auto;
+    padding: 0;
+    border: 1px solid #888;
+    width: 80%;
+    max-height: 90%;
+    overflow-y: auto;
+    box-shadow:
+      0 4px 8px 0 rgba(0, 0, 0, 0.2),
+      0 6px 20px 0 rgba(0, 0, 0, 0.19);
+    -webkit-animation-name: animatetop;
+    -webkit-animation-duration: 0.4s;
+    animation-name: animatetop;
+    animation-duration: 0.4s;
+    border-radius: 11px;
+    padding: 40px;
+
+    .modal-header {
+      height: 100%;
+      min-height: 20px;
+      color: var(--text-color);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .close-icon {
+        float: right;
+        font-size: 28px;
+        font-weight: bold;
+        cursor: pointer;
+      }
+    }
+
+    .modal-body {
+      padding: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+      color: var(--text-color);
+      margin: 24px 0;
+
+      .modal-icon {
+        svg {
+          width: 100%;
+          max-width: 60px;
+          height: 100%;
+          min-height: 70px;
+          g {
+            mask: none;
+            path {
+              fill: var(--primary-color);
+            }
+          }
+          circle {
+            stroke: var(--primary-color);
+          }
+        }
+      }
+    }
+
+    .footer {
+      color: var(--text-color);
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      gap: 16px;
+
+      .new-theme-button{
+        transition: all 0.3s ease;
+        &:first-child{
+          &:hover{
+            background-color: #DD5026 !important;
+          }
+        }
+
+        &:last-child{
+          border: 0.5px solid #F1F1F1 !important;
+
+          &:hover{
+            background-color: #FFFFFF !important;
+            border: 0.5px solid rgba(0, 0, 0, 0.24) !important;
+          }
+        }
+      }
+    }
+  }
+}
+
+.confirmNavigateDialog-v2{
+  .modal-content{
+    background-color: #fff;
+  }
+}

package/src/components/GenericUIBlocks/Divider/index.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+
+// styles
+import './styles.scss'
+
+const Divider: React.FC = () => {
+  return (
+    <hr className='basic-divider' />
+  )
+}
+
+export default Divider

package/src/components/GenericUIBlocks/Divider/styles.scss

@@ -0,0 +1,7 @@
+.basic-divider{
+   width: 100%;
+   border: none;
+   border-top: 0.5px solid #0000004D;
+   max-width: 97%;
+   margin: 3px auto;
+}

package/src/components/GenericUIBlocks/GeneralSelect/index.tsx

@@ -0,0 +1,114 @@
+import React from 'react';
+
+// react select
+import Select, {StylesConfig, ClearIndicatorProps, components} from 'react-select';
+
+// icons
+import Cancel from '../../../assets/images/input/select-cancel';
+
+// components
+import Typography from '../Typography';
+
+// styles
+import './styles.scss';
+
+interface Option {
+  id?: number | string;
+  value: string;
+  label: string;
+}
+
+interface GeneralSelectProps {
+  options: Option[];
+  placeholder?: string;
+  error?: string;
+  label?: string;
+  selectedValue: Option | null;
+  isError: boolean;
+  setSelectedValue: (option: Option | null) => void;
+  builderSelect: boolean;
+  gallerySelect: boolean;
+  clearField: boolean;
+  qrField?: boolean;
+  search?: boolean;
+  currentTheme?: string | null | undefined;
+}
+
+const colourStyles: StylesConfig<Option, false> = {
+  dropdownIndicator: (styles, {isFocused, selectProps}) => ({
+    ...styles,
+    color: isFocused && selectProps.menuIsOpen ? 'var(--primary-color)' : 'grey',
+    transform:
+      !isFocused && !selectProps.menuIsOpen ? 'rotate(0deg)' : 'rotate(180deg)',
+  }),
+  option: (styles, {isDisabled, isFocused, isSelected}) => {
+    return {
+      ...styles,
+      backgroundColor: isDisabled
+        ? undefined
+        : isSelected && isFocused
+          ? 'var(--secondary-color)'
+          : isFocused && !isSelected
+            ? 'var(--secondary-color)'
+            : undefined,
+    };
+  },
+};
+
+const errorStyles = {
+  color: 'var(--error-color)',
+  fontWeight: '400',
+};
+
+const ClearIndicator: React.FC<ClearIndicatorProps<any>> = (props) => {
+  return (
+    <components.ClearIndicator {...props}>
+      <Cancel />
+    </components.ClearIndicator>
+  );
+};
+
+const GeneralSelect: React.FC<GeneralSelectProps> = ({
+  options,
+  placeholder,
+  error,
+  label,
+  isError,
+  selectedValue,
+  setSelectedValue,
+  builderSelect,
+  gallerySelect=false,
+  clearField,
+  qrField = false,
+  search = false,
+  currentTheme = "default"
+}) => {
+  return (
+    <div className={`${currentTheme === 'v2' ? 'select-layout-v2' : 'select-layout'}`} style={{
+      display: gallerySelect ? "block" : 'flex'
+    }}>
+      {label && <label>{label}</label>}
+      <Select
+        value={selectedValue}
+        options={options}
+        onChange={setSelectedValue}
+        styles={colourStyles}
+        className={`generic-select-container ${builderSelect && 'template-select'} ${gallerySelect && 'gallery-select'} ${qrField && 'qr-select'}`}
+        classNamePrefix="generic-select"
+        placeholder={placeholder}
+        blurInputOnSelect
+        isClearable={clearField}
+        components={{ClearIndicator}}
+        isSearchable={search}
+      />
+      {isError && (
+        <Typography variant="p" style={errorStyles}>
+          <sup>*</sup>
+          {error}
+        </Typography>
+      )}
+    </div>
+  );
+};
+
+export default GeneralSelect;