@openlettermarketing/olc-react-sdk 2.1.6 → 2.1.8

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

@@ -1,227 +0,0 @@
-.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

@@ -1,12 +0,0 @@
-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

@@ -1,7 +0,0 @@
-.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

@@ -1,114 +0,0 @@
-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;