@hellobetterdigitalnz/selwynui 0.0.1-8 → 0.0.1-80

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

@@ -1,64 +1,80 @@
-import { useState } from 'react';
+import { useRef, useState } from 'react';
+import Slider from 'react-slick';
 import TestimonyCardProps from "./TestimonyCardProps.tsx";
 import styles from './testimonyCard.module.scss';
 import Container from "../../Shared/Container/Container.tsx";
-
-
+import 'slick-carousel/slick/slick.css';
+import 'slick-carousel/slick/slick-theme.css';
 
 const TestimonyCard = (props: TestimonyCardProps) => {
-  const {
-    testimonies,
-    pillar = 'visit'
-  } = props;
-
-  const [currentIndex, setCurrentIndex] = useState(0);
+  const { testimonies, pillar } = props;
+  const sliderRef = useRef<Slider>(null);
+  const [currentSlide, setCurrentSlide] = useState(0);
 
-  const defaultImage = 'https://images.pexels.com/photos/1563356/pexels-photo-1563356.jpeg';
-
-  return <div
-    className={`
-    ${styles.testimonyCard} 
-    ${styles.testimonyCardLarge}
-    ${pillar ? `${pillar}` : ""}
-    `}
-  >
-    <Container>
-      <div className={styles.testimonyCardWrapper}>
-        <div className={styles.testimonyCardLeft}>
-          <img
-            src={testimonies[currentIndex].image || defaultImage}
-            alt={`${testimonies[currentIndex].author} testimonial`}
-          />
-        </div>
-        <div className={styles.testimonyCardRight}>
-          <div className={styles.testimonyContent}>
-            <div className={styles.quoteIcon}>
-              <svg xmlns="http://www.w3.org/2000/svg" width="56" height="39" viewBox="0 0 56 39" fill="none">
-                <path d="M23.1134 27.0562C23.1134 32.4847 18.9331 36 13.4798 36C8.02648 36 4.75277 33.6194 3.3652 27.0562C1.97764 20.493 7.78599 17.227 13.2393 17.227C18.6926 17.227 23.1134 21.6276 23.1134 27.0562Z" fill="#92C134"/>
-                <path d="M53.0015 27.0558C53.0015 32.4844 48.8212 35.9997 43.3679 35.9997C37.9145 35.9997 34.6408 33.619 33.2533 27.0558C31.8657 20.4926 37.674 17.2267 43.1274 17.2267C48.5807 17.2267 53.0015 21.6273 53.0015 27.0558Z" fill="#92C134"/>
-                <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="#92C134" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
-              </svg>
-            </div>
-            <h6>{testimonies[currentIndex].testimony}</h6>
-          </div>
-          <p>{testimonies[currentIndex].author}</p>
+  const settings = {
+    dots: false,
+    infinite: true,
+    speed: 900,
+    slidesToShow: 1,
+    slidesToScroll: 1,
+    autoplay: false,
+    autoplaySpeed: 5000,
+    arrows: false,
+    fade: true,
+    swipe: true,
+    touchMove: true,
+    waitForAnimate: false,
+    beforeChange: (_oldIndex: number, newIndex: number) => {
+      setCurrentSlide(newIndex);
+    },
+  };
 
-          {testimonies.length > 1 && (
-            <div className={styles.pagination}>
-              {testimonies.map((_, index) => (
-                <button
-                  key={index}
-                  className={`${styles.dot} ${index === currentIndex ? styles.active : ''}`}
-                  onClick={() => setCurrentIndex(index)}
-                  aria-label={`Go to testimonial ${index + 1}`}
-                />
-              ))}
-            </div>
-          )}
+  return (
+    <div className={`${styles.testimonyCard} ${styles.testimonyCardLarge} ${pillar ? `${pillar}` : ""} testimonialCards`}>
+      <Container>
+        <div className={styles.testimonyCardContainer}>
+          <Slider ref={sliderRef} {...settings}>
+            {testimonies.map((testimony, index) => (
+              <div key={index}>
+                <div className={styles.testimonySlide}>
+                  <div className={styles.testimonyCardLeft}>
+                  {testimony.image && <img src={testimony.image} alt={`${testimony.author} testimonial`}/>}
+                  </div>
+                  <div className={styles.testimonyCardRight}>
+                    <div className={styles.testimonyContent}>
+                      <div className={styles.quoteIcon}>
+                        <svg xmlns="http://www.w3.org/2000/svg" width="56" height="39" viewBox="0 0 56 39" fill="none">
+                          <path d="M23.1134 27.0562C23.1134 32.4847 18.9331 36 13.4798 36C8.02648 36 4.75277 33.6194 3.3652 27.0562C1.97764 20.493 7.78599 17.227 13.2393 17.227C18.6926 17.227 23.1134 21.6276 23.1134 27.0562Z" fill="currentColor"/>
+                          <path d="M53.0015 27.0558C53.0015 32.4844 48.8212 35.9997 43.3679 35.9997C37.9145 35.9997 34.6408 33.619 33.2533 27.0558C31.8657 20.4926 37.674 17.2267 43.1274 17.2267C48.5807 17.2267 53.0015 21.6273 53.0015 27.0558Z" fill="currentColor"/>
+                          <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 className={styles.innerContents}>
+                        <h6>{testimony.testimony}</h6>
+                        <p className={styles.author}>— {testimony.author}</p>
+                        <ul className={styles.slickDots}>
+                          {testimonies.map((_, index) => (
+                            <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>
+                              </div>}
+                            </li>
+                          ))}
+                        </ul>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </Slider>
         </div>
-      </div>
-    </Container>
-  </div>
+      </Container>
+    </div>
+  );
 };
 
-export default TestimonyCard;
+export default TestimonyCard;

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

@@ -1,93 +1,162 @@
 .testimonyCard {
 
-}
+  .testimonyCardContainer {
+    position: relative;
+  }
 
-.testimonyCardWrapper {
-  display: flex;
-  gap: 69px;
-  align-items: center;
-}
+  .testimonySlide {
+    display: flex;
+    //align-items: center;
+    outline: none;
+    flex-direction: column;
+  }
 
-.testimonyCardLeft {
-  flex-shrink: 0;
-  padding-top: 96px;
-  padding-bottom: 96px;
+  .testimonyCardLeft {
+    display: flex;
+    flex-shrink: 0;
+    padding-right: 0;
+    overflow: clip;
+    width: 100%;
+    margin: 0 -16px 0 -16px;
+    background-color: rgba(213, 213, 213, 0.56);
+    border-radius: 2px 2px 96px 2px;
 
+    img {
+      flex-shrink: 0;
+      width: 100%;
+      height: 333px;
+      object-fit: cover;
+      border-radius: 2px 2px 96px 2px;
+    }
+  }
 
-  img {
-    width: 333px;
-    height: 333px;
-    border-radius: 2px 2px 96px 2px;
-    object-fit: cover;
+  .testimonyCardRight {
 
+    p {
+      font-size: 14px;
+      font-weight: var(--font-weight-h5);
+      letter-spacing: -0.48px;
+      line-height: var(--line-height-body-regular);
+    }
   }
-}
 
-.testimonyCardRight {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
+  .testimonyContent {
+    display: flex;
+    gap: 24px;
+    align-items: flex-start;
+    height: 100%;
+    padding-top: 32px;
+
+    @media (max-width: 834px) {
+      flex-direction: column;
+      gap: 12px;
+    }
 
+    .quoteIcon {
+      svg {
+        margin-top: 0;
+        width: 56px;
+        height: 39px;
+
+        @media (max-width: 834px) {
+          width: 40px;
+          height: 27px;
+        }
+      }
+    }
 
+    .innerContents{
+      display: flex;
+      flex-direction: column;
+      height: 100%;
 
-  p {
-    font-size: 14px;
-    font-weight: var(--font-weight-h5);
-    letter-spacing: -0.14px;
-    line-height: var(--line-height-body-regular);
-    padding-left: 70px;
-  }
-}
+      p{
+        flex-grow: 1;
+      }
+    }
 
-.testimonyContent {
-  display: flex;
-  gap: 16px;
-  align-items: flex-start;
+    h6 {
 
-  .quoteIcon {
+      font-size: var(--font-size-h6);
+      line-height: 1.3;
+      font-weight: var(--font-weight-body-sm);
+      letter-spacing: -0.48px;
+      white-space: pre-line;
+      margin-top: -5px;
 
-    svg{
-      font-size: 80px;
-      line-height: 0.8;
-      flex-shrink: 0;
-      margin-top: 0;
+      @media (max-width: 834px) {
+        font-size: var(--font-size-body-regular);
+      }
+
+      @media (max-width: 480px) {
+        font-size: var(--font-size-body-sm);
+      }
     }
 
+    .author{
+      padding-top: 40px;
+    }
   }
 
-  h6 {
-    font-size: var(--font-size-h6);
-    line-height: 1.3;
-    font-weight: var(--font-weight-body-sm);
-    letter-spacing: -0.48px;
-  }
-}
-
-.pagination {
-  display: flex;
-  gap: 12px;
-  padding-left: 70px;
-
-  .dot {
-    width: 20px;
-    height: 20px;
-    border-radius: 50%;
-    cursor: pointer;
-    border: none;
-    padding: 0;
-    background-color: var(--color-taste);
-    position: relative;
+  .slickDots{
+    list-style: none;
     display: flex;
-    align-items: center;
-    justify-content: center;
-
-    &.active::before {
-      content: '';
-      width: 12px;
-      height: 12px;
-      border-radius: 50%;
-      background-color: var(--color-visit);
+    padding-top: 40px;
+    margin: -8px;
+    //position: absolute;
+    //bottom: 24px;
+    //left: 458px;
+
+    li{
+      display: flex;
+      padding: 8px;
+      position: relative;
+
+      button{
+        width: 16px;
+        height: 16px;
+        background: var(--color-block-text);
+        outline: none;
+        border: none;
+        border-radius: 100%;
+        opacity: 0.5;
+        transition: opacity 0.3s ease-in-out;
+      }
+
+      .svg{
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+
+        svg{
+          width: 12px;
+          height: 12px;
+        }
+
+      }
+
+      &:hover{
+        button{
+          opacity: 0.7;
+        }
+      }
+
     }
+
   }
+
+  @media screen and (min-width: 772px){
+
+    .testimonySlide {
+      flex-direction: row;
+    }
+
+    .testimonyCardLeft {
+      flex-shrink: 0;
+      width: 333px;
+      margin: 0 68px 0px 0px;
+    }
+  }
+
 }

package/src/Components/DataDisplay/index.ts

@@ -1,3 +1,13 @@
+// Accordion
+export { default as Accordion } from './Accordion/Accordion';
+export type { default as AccordionProps } from './Accordion/AccordionProps';
+export { default as AccordionContext } from './Accordion/AccordionContext';
+export type { default as AccordionContextInterface } from './Accordion/AccordionContextInterface';
+export { default as AccordionItem } from './Accordion/AccordionItem';
+export type { default as AccordionItemProps } from './Accordion/AccordionItemProps';
+export { default as AccordionProvider } from './Accordion/AccordionProvider';
+export type { default as AccordionProviderInterface } from './Accordion/AccordionProviderInterface';
+
 // DetailsCard
 export { default as DetailsCard } from './DetailsCard/DetailsCard';
 export type { default as DetailsCardProps } from './DetailsCard/DetailsCardProps';
@@ -10,14 +20,87 @@ export type { default as IntroBlockProps } from './IntroBlock/IntroBlockProps';
 export { default as KPIBlock } from './KPIBlock/KPIBlock';
 export type { default as KPIBlockProps } from './KPIBlock/KPIBlockProps';
 
-// Pathway
-export { default as Pathway } from './Pathway/Pathway';
-export type { default as PathwayProps } from './Pathway/PathwayProps';
+// PathwayBlock
+export { default as PathwayBlock } from './PathwayBlock/PathwayBlock';
+export type { default as PathwayBlockProps } from './PathwayBlock/PathwayBlockProps';
+
+// ChatItenaryBlock
+export { default as ChatItenaryBlock } from './ChatItenaryBlock/ChatItenaryBlock';
+export type { default as ChatItenaryBlockProps } from './ChatItenaryBlock/ChatItenaryBlockProps';
+
+//CallToActionBlock
+export { default as CallToActionBlock } from './CallToActionBlock/CallToActionBlock';
+export type { default as CallToActionBlockProps } from './CallToActionBlock/CallToActionBlockProps';
+
+// TestimonyCard
+export { default as TestimonyCard } from './TestimonyCard/TestimonyCard';
+export type { default as TestimonyCardProps } from './TestimonyCard/TestimonyCardProps';
+
+// ListBlock
+export { default as Pathway } from './ListBlock/ListBlock.tsx';
+export type { default as PathwayProps } from './ListBlock/ListBlockProps.tsx';
+
+// ListingDetailBlock
+export { default as ListingDetailBlock } from './ListingDetailBlock/ListingDetailBlock';
+export type { default as ListingDetailBlockProps } from './ListingDetailBlock/ListingDetailBlockProps';
+
+// ContentBlock
+export { default as ContentBlock } from './ContentBlock/ContentBlock';
+export type { default as ContentBlockProps } from './ContentBlock/ContentBlockProps';
 
 // PromoBanner
 export { default as PromoBannerBlock } from './PromoBannerBlock/PromoBannerBlock';
 export type { default as PromoBannerBlockProps } from './PromoBannerBlock/PromoBannerBlockProps';
 
+// ContactBlock
+export { default as ContactBlock } from './ContactsBlock/ContactsBlock';
+export type { default as ContactBlockProps } from './ContactsBlock/ContactsBlockProps';
+export { default as ContactItem  } from './ContactsBlock/ContactItem';
+export type { default as ContactItemProps } from './ContactsBlock/ContactItemProps';
 //ImageContent
 export {default as ImageContent} from './ImageContent/ImageContent'
-export type {default as ImageContentProps} from './ImageContent/ImageContentProps'
+export type {default as ImageContentProps} from './ImageContent/ImageContentProps'
+
+//List Block
+export { default as ListBlock } from './ListBlock/ListBlock'
+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'
+
+// 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/DataDisplay/slider.scss

@@ -1,2 +1,45 @@
 @import "../../../node_modules/slick-carousel/slick/slick.css";
 @import "../../../node_modules/slick-carousel/slick/slick-theme.css";
+
+.carouselBlock{
+
+  .custom-arrow{
+    background: transparent;
+    outline: none;
+    border: 1px solid var(--color-block-text);
+    border-radius: 100%;
+    height: 40px;
+    width: 40px;
+    color: var(--color-block-text);
+    transition: all 0.3s ease-in-out;
+
+    &:hover{
+      background: var(--color-block-text);
+      color: var(--color-block-bg);
+    }
+
+  }
+
+  .slick-list{
+    overflow: visible;
+    visibility: visible;
+  }
+
+  .prev{
+    margin-right: 16px;
+  }
+
+  @media screen and (min-width: 992px) {
+
+    .custom-arrow{
+      height: 48px;
+      width: 48px;
+    }
+
+    .prev{
+      margin-right: 24px;
+    }
+  }
+
+}
+

package/src/Components/Form/Button/ButtonProps.tsx

@@ -5,7 +5,7 @@ interface ButtonProps {
   size?: "default" | "large" | "small";
   style?: "solid" | "hollow" | "no-border";
   level?: 'primary' | 'secondary' | 'light'
-  pillar?: 'main' | 'live' | 'visit' | 'taste' | 'business' | 'participate'
+  pillar?: 'main' | 'live' | 'visit' | 'taste' | 'business' | 'participate' | undefined;
   linkable?: boolean;
   extraClass?: string;
   link?:{

package/src/Components/Form/Button/button.module.scss

@@ -79,7 +79,9 @@
 
 
   .secondaryIcon{
+    display: flex;
     margin-left: 24px;
+
     svg{
       flex-shrink: 0;
       height: 24px;

package/src/Components/Form/Checkbox/Checkbox.stories.tsx

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Checkbox from "./Checkbox";
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: 'Form / Checkbox',
+  component: Checkbox,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Checkbox>;
+
+export default meta;
+type Story = StoryObj<typeof Checkbox>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Default: Story = {
+  args: {
+    checked: false,
+    label:'checkbox',
+    id:'ch_1'
+  },
+};
+
+export const Checked: Story = {
+  args: {
+    checked: true
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    checked: true,
+    disabled: true
+  },
+};
+
+export const CheckedDisabled: Story = {
+  args: {
+    checked: true,
+    disabled: true
+  },
+};
+
+export const Error: Story = {
+  args: {
+    checked: true,
+    error: true
+  },
+};