@hellobetterdigitalnz/selwynui 0.0.1-58 → 0.0.1-59

package/src/Components/DataDisplay/Modal/ModalHeaderProps.tsx

@@ -0,0 +1,10 @@
+interface ModalHeaderProps {
+  title?: string;
+  extraClass?: string;
+  canClose?: boolean;
+  canGoBack?: boolean;
+  closeOnclick?: (e:any) => void;
+  canGoBackOnclick?: (e:any) => void;
+}
+
+export default ModalHeaderProps;

package/src/Components/DataDisplay/Modal/ModalProps.tsx

@@ -0,0 +1,9 @@
+import { ReactNode } from "react";
+
+interface ModalProps {
+  children?: ReactNode;
+  extraClass?: string;
+  pillar?: 'main' | 'live' | 'visit' | 'taste' | 'business' | 'participate'
+}
+
+export default ModalProps;

package/src/Components/DataDisplay/Modal/modal.module.scss

@@ -0,0 +1,178 @@
+.holder {
+  position: fixed;
+  z-index: 999999;
+  top: 0;
+  left: 0;
+  padding: calc(var(--space-unit) * 10) calc(var(--space-unit) * 5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100vw;
+  height: 100vh;
+  backdrop-filter: blur(4px);
+
+  &:before {
+    content: ' ';
+    display: block;
+    background: var(--popup-holder-bg);
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0.6;
+  }
+}
+
+.modal {
+  position: relative;
+  width: 90%;
+  max-width: 800px;
+  max-height: 70vh;
+  box-shadow: var(--drop-shadow-default);
+  background: #EFEAE7;
+  border-radius: 8px;
+  display: flex;
+  color: var(--color-block-text);
+  overflow: clip;
+}
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.modalHeader {
+  border-bottom: 1px solid #eee;
+}
+
+.modalHeaderWrapper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: calc(var(--space-unit) * 4) calc(var(--space-unit) * 6);
+
+  .heading {
+    h4 {
+      font-size: var(--font-size-h6);
+      font-weight: 700;
+      line-height: 1.3;
+      font-family: var(--font);
+    }
+
+  }
+
+  .icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: 0.3s ease-in;
+
+    &:hover {
+      transform: scale(1.05);
+      -webkit-transform: scale(1.2);
+    }
+
+    svg {
+      width: 20px;
+      height: 20px;
+    }
+  }
+}
+
+.modalBody {
+  padding: calc(var(--space-unit) * 6);
+  overflow: auto;
+
+  &::-webkit-scrollbar {
+    width: 4px;
+    z-index: 1000;
+  }
+
+  &::-webkit-scrollbar-track {
+    overflow: hidden;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 2px;
+    background: rgba(0, 0, 0, 0.10);
+    overflow: hidden;
+    background-clip: padding-box;
+  }
+
+}
+
+.modalBodyWrapper {
+  min-height: 50px;
+}
+
+.modalAction {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  padding: calc(var(--space-unit) * 4) calc(var(--space-unit) * 6);
+  border-top: 1px solid #eee;
+  background: #FFFFFF;
+}
+
+.modalActionRight, .modalActionLeft {
+  display: flex;
+  align-items: center;
+  //flex-wrap: wrap;
+  margin: calc(var(--space-unit) * -1);
+
+  & > div {
+    padding: var(--space-unit);
+  }
+
+  @media (max-width: 992px) {
+    flex-direction: column;
+
+    & > div {
+      width: 100%;
+    }
+
+    button {
+      width: 100%;
+      height: 32px !important;
+      padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 4);
+    }
+
+    button span {
+      font-size: 14px;
+    }
+  }
+
+}
+
+.modalActionRight {
+
+  > div {
+    padding: 0 -4px;
+  }
+}
+
+.curtain {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  backdrop-filter: blur(4px);
+  z-index: 9999;
+
+  &:before {
+    content: ' ';
+    display: block;
+    background: var(--color-gray-200);
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0.6;
+  }
+}

package/src/Components/DataDisplay/PathwayBlock/PathwayBlock.stories.tsx

@@ -5,7 +5,7 @@ import PathwayBlock from "./PathwayBlock";
 import ElementHolder from "../../Shared/ElementHolder/ElementHolder";
 
 const meta: Meta = {
-  title: "Layout / PathwayBlock",
+  title: "DataDisplay / PathwayBlock",
   component: PathwayBlock,
   parameters: {
     layout: 'fullscreen',

package/src/Components/DataDisplay/TestimonyCard/TestimonyCard.stories.tsx

@@ -5,7 +5,7 @@ import TestimonyCard from "./TestimonyCard";
 import ElementHolder from "../../Shared/ElementHolder/ElementHolder";
 
 const meta: Meta = {
-  title: "Layout / TestimonyCard",
+  title: "DataDisplay / TestimonyCard",
   component: TestimonyCard,
   parameters: {
     layout: 'fullscreen',

package/src/Components/DataDisplay/TestimonyCard/TestimonyCard.tsx

@@ -17,7 +17,7 @@ const TestimonyCard = (props: TestimonyCardProps) => {
     speed: 900,
     slidesToShow: 1,
     slidesToScroll: 1,
-    autoplay: true,
+    autoplay: false,
     autoplaySpeed: 5000,
     arrows: false,
     fade: true,
@@ -43,6 +43,7 @@ const TestimonyCard = (props: TestimonyCardProps) => {
                       alt={`${testimony.author} testimonial`}
                     />
                   </div>
+
                   <div className={styles.testimonyCardRight}>
                     <div className={styles.testimonyContent}>
                       <div className={styles.quoteIcon}>
@@ -52,7 +53,7 @@ const TestimonyCard = (props: TestimonyCardProps) => {
                           <path d="M3.3652 27.0562C4.75277 33.6194 8.02648 36 13.4798 36C18.9331 36 23.1134 32.4847 23.1134 27.0562C23.1134 21.6276 18.6926 17.227 13.2393 17.227C7.78599 17.227 1.97764 20.493 3.3652 27.0562ZM3.3652 27.0562C1.97764 20.493 4.78431 13.7613 7.99019 9.54638C11.1961 5.33146 17.2399 2.24873 21.5318 3.16115M33.2533 27.0558C34.6408 33.619 37.9145 35.9997 43.3679 35.9997C48.8212 35.9997 53.0015 32.4844 53.0015 27.0558C53.0015 21.6273 48.5807 17.2267 43.1274 17.2267C37.674 17.2267 31.8657 20.4926 33.2533 27.0558ZM33.2533 27.0558C31.8657 20.4926 34.6724 13.761 37.8782 9.54606C41.0841 5.33115 47.1279 2.24841 51.4199 3.16083" stroke="currentColor" strokeWidth="6" strokeLinecap="round" strokeLinejoin="round"/>
                         </svg>
                       </div>
-                      <div>
+                      <div className={styles.innerContents}>
                         <h6>{testimony.testimony}</h6>
                         <p className={styles.author}>— {testimony.author}</p>
                         <ul className={styles.slickDots}>
@@ -60,9 +61,9 @@ const TestimonyCard = (props: TestimonyCardProps) => {
                             <li key={index} className={currentSlide === index ? styles.active : ""}>
                               <button onClick={() => sliderRef.current?.slickGoTo(index)}></button>
                               {currentSlide === index && <div className={styles.svg}>
-                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 20 20" fill="none">
-                                  <circle cx="10" cy="10" r="8" fill="currentColor"/>
-                                </svg>
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 20 20" fill="none">
+                                      <circle cx="10" cy="10" r="8" fill="currentColor"/>
+                                  </svg>
                               </div>}
                             </li>
                           ))}

package/src/Components/DataDisplay/TestimonyCard/testimonyCard.module.scss

@@ -6,28 +6,30 @@
 
   .testimonySlide {
     display: flex;
-    align-items: center;
+    //align-items: center;
     outline: none;
     flex-direction: column;
   }
 
   .testimonyCardLeft {
+    display: flex;
     flex-shrink: 0;
     padding-right: 0;
-    border-radius: 2px 2px 96px 2px;
     overflow: clip;
     width: 100%;
-    margin: 0 -16px 36px -16px;
+    margin: 0 -16px 0 -16px;
 
     img {
       flex-shrink: 0;
       width: 100%;
       height: 333px;
       object-fit: cover;
+      border-radius: 2px 2px 96px 2px;
     }
   }
 
   .testimonyCardRight {
+
     p {
       font-size: 14px;
       font-weight: var(--font-weight-h5);
@@ -38,8 +40,10 @@
 
   .testimonyContent {
     display: flex;
-    gap: 25px;
+    gap: 24px;
     align-items: flex-start;
+    height: 100%;
+    padding-top: 32px;
 
     @media (max-width: 834px) {
       flex-direction: column;
@@ -59,6 +63,16 @@
       }
     }
 
+    .innerContents{
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+
+      p{
+        flex-grow: 1;
+      }
+    }
+
     h6 {
 
       font-size: var(--font-size-h6);
@@ -87,6 +101,9 @@
     display: flex;
     padding-top: 40px;
     margin: -8px;
+    //position: absolute;
+    //bottom: 24px;
+    //left: 458px;
 
     li{
       display: flex;
@@ -136,7 +153,7 @@
     .testimonyCardLeft {
       flex-shrink: 0;
       width: 333px;
-      margin-right: 68px;
+      margin: 0 68px 0px 0px;
     }
   }
 

package/src/Components/DataDisplay/index.ts

@@ -64,4 +64,39 @@ export type { default as ListBlockProps } from './ListBlock/ListBlockProps'
 // Carousel Block
 
 export { default as CarouselBlock } from './CarouselBlock/CarouselBlock.tsx'
-export type { default as CarouselBlockProps } from './CarouselBlock/CarouselBlockProps.tsx'
+export type { default as CarouselBlockProps } from './CarouselBlock/CarouselBlockProps.tsx'
+
+// Media Block
+export { default as Media } from './Media/Media.tsx'
+export type { default as MediaProps } from './Media/MediaProps.tsx'
+
+// Modal
+export {default as Modal} from './Modal/Modal';
+export type { default as ModalProps } from './Modal/ModalProps';
+export {default as ModalHeader} from './Modal/ModalHeader';
+export type { default as ModalHeaderProps } from './Modal/ModalHeaderProps';
+export {default as ModalBody} from './Modal/ModalBody';
+export type { default as ModalBodyProps } from './Modal/ModalBodyProps';
+export {default as ModalActions} from './Modal/ModalActions';
+export type { default as ModalActionsProps } from './Modal/ModalActionsProps';
+export {default as ModalActionsLeft} from './Modal/ModalActionsLeft';
+export type { default as ModalActionsLeftProps } from './Modal/ModalActionsLeftProps';
+export {default as ModalActionsRight} from './Modal/ModalActionsRight';
+export type { default as ModalActionsRightProps } from './Modal/ModalActionsRightProps';
+
+
+//BrandBuilder
+export { default as BrandBuilderToolMain } from './BrandBuilderTool/BrandBuilderToolMain/BrandBuilderToolMain.tsx';
+export type { default as BrandBuilderToolMainProps } from './BrandBuilderTool/BrandBuilderToolMain/BrandBuilderToolMainProps.tsx';
+export { default as BrandBuilderToolPreview } from './BrandBuilderTool/BrandbuilderToolPreview/BrandBuilderToolPreview.tsx';
+export type { default as BrandBuilderToolPreviewProps } from './BrandBuilderTool/BrandbuilderToolPreview/BrandBuilderToolPreviewProps.tsx';
+export { default as BrandBuilderToolTemplateItem } from './BrandBuilderTool/BrandBuilderToolTemplate/BrandBuilderToolTemplateItem.tsx';
+export type { default as BrandBuilderToolTemplateItemProps } from './BrandBuilderTool/BrandBuilderToolTemplate/BrandBuilderToolTemplateItemProps.tsx';
+export { default as BrandBuilderToolTemplateSelector } from './BrandBuilderTool/BrandBuilderToolTemplate/BrandBuilderToolTemplateSelector.tsx';
+export type { default as BrandBuilderToolTemplateSelectorProps } from './BrandBuilderTool/BrandBuilderToolTemplate/BrandBuilderToolTemplateSelectorProps.tsx';
+export { default as BrandBuilderToolUploader } from './BrandBuilderTool/BrandBuilderToolUploader/BrandBuilderToolUploader.tsx';
+export type { default as BrandBuilderToolUploaderProps } from './BrandBuilderTool/BrandBuilderToolUploader/BrandBuilderToolUploaderProps.tsx';
+export { default as BrandBuilderToolWrapper } from './BrandBuilderTool/BrandBuilderToolWrapper/BrandBuilderToolWrapper.tsx';
+export type { default as BrandBuilderToolWrapperProps } from './BrandBuilderTool/BrandBuilderToolWrapper/BrandBuilderToolWrapperProps.tsx';
+export { default as BrandBuilderTool } from './BrandBuilderTool/BrandBuilderTool.tsx';
+export type { default as BrandBuilderToolProps } from './BrandBuilderTool/BrandBuilderToolProps.tsx';

package/src/Components/SelwynUIProvider/SelwynUIContext.tsx

@@ -0,0 +1,16 @@
+import { createContext, ReactNode } from "react";
+interface SkopeUIContextType {
+  modalStack: ReactNode[];
+  openModal: (modal: React.ReactNode) => void;
+  closeModal: () => void;
+  closeAllModals: () => void;
+}
+
+const SelwynUIContext = createContext<SkopeUIContextType>({
+  modalStack: [],
+  openModal: () => {},
+  closeModal: () => {},
+  closeAllModals: () => {},
+});
+
+export default SelwynUIContext;

package/src/Components/SelwynUIProvider/SelwynUIProvider.tsx

@@ -0,0 +1,46 @@
+import React, { FC, ReactNode, useState } from "react";
+import SelwynUIContext from "./SelwynUIContext.tsx";
+
+interface SelwynUIProviderProps {
+  children: ReactNode;
+}
+
+const SelwynUIProvider: FC<SelwynUIProviderProps> = (props : SelwynUIProviderProps) => {
+  const { children } = props;
+
+  const [modalStack, setModalStack] = useState<React.ReactNode[]>([]);
+  const openModal = (modal: React.ReactNode) => {
+    setModalStack((prevStack) => [...prevStack, modal]);
+    console.log('hello')
+  };
+
+  const closeModal = () => {
+    setModalStack((prevStack) => prevStack.slice(0, -1));
+
+  };
+
+  const closeAllModals = () => {
+    setModalStack([]);
+  };
+
+
+  return (
+    <SelwynUIContext.Provider
+      value={{
+        modalStack,
+        openModal,
+        closeModal,
+        closeAllModals,
+      }}
+    >
+        <>
+          {children}
+          {modalStack.map((modal, index) => (
+            <React.Fragment key={index}>{modal}</React.Fragment>
+          ))}
+        </>
+    </SelwynUIContext.Provider>
+  );
+};
+
+export default SelwynUIProvider;

package/src/Components/SelwynUIProvider/index.ts

@@ -0,0 +1,2 @@
+export { default as SelwynUIProvider } from './SelwynUIProvider.tsx';
+export { default as SelwynUIContext } from './SelwynUIContext.tsx';

package/src/Components/index.ts

@@ -3,3 +3,4 @@ export * from './Form'
 export * from './Icons'
 export * from './Layout'
 export * from './Shared'
+export * from './SelwynUIProvider'

package/src/Components/DataDisplay/ListingDetailBlock/listingDetailBlock.module.scss~

@@ -1,248 +0,0 @@
-.listingDetail {
-    display: flex;
-    gap: 48px;
-    padding: 32px;
-    border-radius: 8px;
-    position: relative;
-
-    &::before {
-        content: '';
-        position: absolute;
-        left: 51%;
-        top: 32px;
-        bottom: 32px;
-        width: 1px;
-        background: var(--color-bg);
-        transform: translateX(-50%);
-        z-index: 1;
-        pointer-events: none;
-
-        @media (max-width: 900px) {
-            display: none;
-        }
-    }
-
-    @media (max-width: 900px) {
-        flex-direction: column-reverse;
-        padding: 24px 16px;
-        gap: 48px;
-    }
-}
-
-.mainContent {
-    width: 50%;
-    padding-right: 20px;
-
-    @media (max-width: 1200px) {
-        padding-left: 80px;
-        padding-right: 40px;
-    }
-
-    @media (max-width: 900px) {
-        width: 100%;
-        padding-left: 0;
-        padding-right: 0;
-        order: 2;
-    }
-
-    .title {
-        font-size: 48px;
-        font-weight: 400;
-        line-height: 1;
-        letter-spacing: -1.92px;
-        margin: 0 0 50px 0;
-
-        @media (max-width: 900px) {
-            font-size: 36px;
-            margin: 0 0 40px 0;
-        }
-
-        @media (max-width: 480px) {
-            font-size: 28px;
-            margin: 0 0 32px 0;
-        }
-    }
-
-    .description {
-        font-size: 24px;
-        line-height: 1.3;
-        font-weight: 400;
-        letter-spacing: -0.48px;
-
-        @media (max-width: 900px) {
-            font-size: 18px;
-            margin-bottom: 48px;
-        }
-
-        @media (max-width: 480px) {
-            font-size: 16px;
-            margin-bottom: 32px;
-        }
-    }
-
-    .sectionTitle {
-        font-size: 24px;
-        font-weight: 600;
-        margin: 60px 0 22px 0;
-        letter-spacing: -0.48px;
-        line-height: 1.3;
-
-        @media (max-width: 900px) {
-            font-size: 20px;
-            margin: 48px 0 24px 0;
-        }
-
-        @media (max-width: 480px) {
-            font-size: 18px;
-            margin: 32px 0 20px 0;
-        }
-    }
-}
-
-.facilitiesList {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    display: grid;
-    grid-template-columns: repeat(2, 2fr);
-    gap: 9px;
-
-    @media (max-width: 600px) {
-        grid-template-columns: 1fr;
-        gap: 2px;
-    }
-}
-
-.facilityItem {
-    display: flex;
-    align-items: center;
-    font-size: 18px;
-    font-weight: 400;
-    line-height: 1.4;
-    gap: 12px;
-
-    @media (max-width: 900px) {
-        font-size: 16px;
-    }
-
-    svg {
-        height: 32px;
-        width: 32px;
-        color: var(--color-bg);
-        flex-shrink: 0;
-
-        @media (max-width: 900px) {
-            height: 24px;
-            width: 24px;
-        }
-    }
-}
-
-.sidebar {
-    width: 50%;
-    display: flex;
-    flex-direction: column;
-    gap: 60px;
-    padding-left: 64px;
-
-    @media (max-width: 1200px) {
-        padding-left: 40px;
-        gap: 48px;
-    }
-
-    @media (max-width: 900px) {
-        width: 100%;
-        padding-left: 0;
-        gap: 40px;
-        order: 1;
-    }
-
-    @media (max-width: 480px) {
-        gap: 32px;
-    }
-}
-
-.infoItem {
-    display: flex;
-    gap: 16px;
-    align-items: center;
-
-    @media (max-width: 900px) {
-        gap: 12px;
-    }
-
-    svg {
-        color: var(--color-text);
-        width: 48px;
-        height: 48px;
-        flex-shrink: 0;
-
-        @media (max-width: 900px) {
-            width: 40px;
-            height: 40px;
-        }
-
-        @media (max-width: 480px) {
-            width: 32px;
-            height: 32px;
-        }
-    }
-}
-
-.sidebarItems {
-    flex: 1;
-}
-
-.infoLabel {
-    font-size: 24px;
-    letter-spacing: -0.48px;
-    line-height: 1.3;
-    font-weight: 700;
-
-    @media (max-width: 900px) {
-        font-size: 18px;
-    }
-
-    @media (max-width: 480px) {
-        font-size: 16px;
-    }
-}
-
-.infoValue {
-    font-size: 24px;
-    line-height: 1.3;
-    font-weight: 400;
-    margin-top: 0;
-    letter-spacing: -0.48px;
-
-    @media (max-width: 900px) {
-        font-size: 18px;
-    }
-
-    @media (max-width: 480px) {
-        font-size: 16px;
-    }
-}
-
-.infoValueLink {
-    color: var(--color-bg);
-    font-size: 24px;
-    text-decoration: underline;
-    line-height: 1.3;
-    letter-spacing: -0.48px;
-    font-weight: 400;
-    margin-top: 0;
-
-    @media (max-width: 900px) {
-        font-size: 18px;
-    }
-
-    @media (max-width: 480px) {
-        font-size: 16px;
-    }
-}
-
-.button {
-    margin-top: 5px;
-    max-width: 177px !important;
-}