@hellobetterdigitalnz/selwynui 0.0.1-7 → 0.0.1-71

package/src/Components/DataDisplay/BrandBuilderTool/BrandbuilderToolPreview/BrandBuilderToolPreview.tsx

@@ -0,0 +1,25 @@
+import styles from "../brandBuilder.module.scss";
+import BrandBuilderToolPreviewProps from "./BrandBuilderToolPreviewProps.tsx";
+
+const BrandBuilderToolPreview = (props : BrandBuilderToolPreviewProps) =>{
+
+  const {children , action } = props
+
+  return <div className={styles.preview}>
+    <div className={styles.title}>
+      <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50" fill="none">
+        <rect width="50" height="50" rx="25" fill="currentColor"/>
+        <path d="M35.0637 30.98C35.0637 34.976 31.4997 38.432 25.0557 38.432C18.8997 38.432 14.9757 35.048 14.5437 30.188H20.4837C20.6637 32.456 22.6077 33.824 25.0557 33.824C27.7557 33.824 29.3037 32.528 29.3037 30.476C29.3037 28.244 27.5757 27.344 25.0917 27.344H22.5357V22.952H25.0197C27.2157 22.952 28.7997 21.944 28.7997 19.748C28.7997 17.84 27.4677 16.508 25.1997 16.508C22.7517 16.508 21.2397 18.056 21.0957 20.18H15.3717C15.6957 15.716 19.1157 11.864 25.2717 11.864C31.3557 11.864 34.4877 15.392 34.4877 19.46C34.4877 22.412 32.6157 24.572 29.8797 25.076C33.0837 25.616 35.0637 27.884 35.0637 30.98Z" fill="#EFEAE7"/>
+      </svg>
+      <h5>Image preview</h5>
+    </div>
+    <div className={styles.previewImage}>
+      {children}
+    </div>
+    <div className={styles.previewAction}>
+      {action}
+    </div>
+  </div>
+}
+
+export default BrandBuilderToolPreview;

package/src/Components/DataDisplay/BrandBuilderTool/BrandbuilderToolPreview/BrandBuilderToolPreviewProps.tsx

@@ -0,0 +1,8 @@
+import {ReactNode} from "react";
+
+interface BrandBuilderToolPreviewProps {
+  children?:ReactNode
+  action?:ReactNode
+}
+
+export default BrandBuilderToolPreviewProps

package/src/Components/DataDisplay/BrandBuilderTool/brandBuilder.module.scss

@@ -0,0 +1,215 @@
+.brandBuilder{
+  .header{
+    padding-bottom: 48px;
+
+    h1{
+      font-size: var(--font-size-h3);
+      font-weight: 700;
+      line-height: 1;
+      letter-spacing: -3.6px;
+      margin-bottom: 32px;
+    }
+
+    p{
+      font-size: var(--font-size-h5);
+      font-weight: 400;
+      line-height: 1.2;
+      letter-spacing: -1.44px;
+    }
+
+  }
+
+  .brandBuilderToolWrapper{
+    border-radius: 27.583px;
+    background: rgba(255, 255, 255, 0.50);
+    padding: 20px;
+  }
+
+  .title{
+    display: flex;
+    align-items: center;
+    margin-bottom: 48px;
+
+    svg{
+      flex-shrink: 0;
+      height: 32px;
+      width: 32px;
+    }
+
+    h5{
+      font-size: var(--font-size-h5);
+      margin-left: 16px;
+    }
+  }
+
+  .selectorTitle{
+    margin-bottom: 0;
+  }
+
+  .selectorsWrapper{
+    margin-bottom: 48px;
+  }
+
+  .selectors{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 48px;
+  }
+
+  .templateSelector{
+    margin-bottom: 24px;
+
+    .items{
+      display: flex;
+      flex-wrap: wrap;
+      margin: -8px;
+    }
+
+    .item{
+      padding: 8px;
+      width: 50%;
+
+      .itemWrapper{
+        display: flex;
+        flex-direction: column;
+        padding: 16px;
+        align-items: center;
+        justify-content: center;
+        transition: all 0.3s ease-in-out;
+        border: 2px solid transparent;
+
+        p{
+          font-size: 14px;
+          font-style: normal;
+          font-weight: 700;
+          line-height: 1.4;
+          letter-spacing: -0.14px;
+          margin-top: 12px;
+        }
+
+        &:hover, &.active{
+          background: #FFFFFF;
+          border: 2px solid var(--color-block-text);
+        }
+      }
+
+      @media screen and (min-width: 1300px) {
+        width: 33.33%;
+      }
+
+      @media screen and (min-width: 1300px) {
+        width: 20%;
+      }
+
+    }
+
+  }
+
+
+  .uploaderBtn{
+    margin-bottom: 48px;
+  }
+
+  .uploaderDesc{
+    margin-bottom: 48px;
+
+    p{
+      font-size: 18px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 140%;
+      margin-bottom: 16px;
+
+      &:last-child{
+        margin-bottom: 0;
+      }
+
+    }
+
+  }
+
+  .imagesUploader{
+    position: relative;
+
+    img{
+      width: 100%;
+    }
+  }
+
+  .brandBuilderToolUploader{
+    border-bottom: 1px solid var(--color-block-text);
+    margin-bottom: 24px;
+  }
+
+  .brandBuilderToolWrapper{
+    display: flex;
+    flex-direction: column;
+
+    .sideBar{
+      width: 100%;
+    }
+
+    .main{
+      flex: 1;
+    }
+
+  }
+
+  .previewAction{
+    padding-top: 48px;
+
+    button{
+      width: 100%;
+    }
+
+  }
+
+  .previewImage{
+    border-radius: 8px;
+    background: #FFF;
+    padding: 48px 12px;
+  }
+
+  @media screen and (min-width: 992px){
+
+    .header{
+      padding-bottom: 96px;
+    }
+
+    .title{
+
+      svg{
+        flex-shrink: 0;
+        height: 50px;
+        width: 50px;
+      }
+
+      h5{
+        text-wrap: nowrap;
+      }
+    }
+
+    .brandBuilderToolWrapper{
+      padding: 56px;
+      flex-direction: row;
+
+      .sideBar{
+        width: 450px;
+        padding-right: 32px;
+        margin-right: 32px;
+        border-right: 1px solid var(--color-block-text);
+      }
+
+      .main{
+        flex: 1;
+      }
+
+    }
+    .brandBuilderToolUploader{
+      border-bottom: none;
+    }
+
+  }
+
+}

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

@@ -0,0 +1,92 @@
+import React from 'react'
+import type {Meta, StoryObj} from "@storybook/react-vite";
+import CallToActionBlock from "./CallToActionBlock";
+import ElementHolder from "../../Shared/ElementHolder/ElementHolder";
+
+const meta : Meta<typeof CallToActionBlock> = {
+  title: "Form / CallToActionBlock",
+  component: CallToActionBlock,
+}
+
+export default meta;
+type Story = StoryObj<typeof CallToActionBlock>
+
+const CheckOutActionTemplate: Story = {
+  render : () => {
+    return <ElementHolder paddingTop="sm" paddingBottom="sm" pillar="visit" level="primary">
+      <CallToActionBlock
+        title={'Check out the action'}
+        cards={[
+          {
+            image: "https://images.pexels.com/photos/1854897/pexels-photo-1854897.jpeg",
+            link: {
+              title: "Beautiful Landscape",
+              href: "#",
+              target: "_self"
+            }
+          },
+          {
+            image: "https://images.pexels.com/photos/1595655/pexels-photo-1595655.jpeg",
+            link: {
+              title: "Mountain View",
+              href: "#",
+              target: "_self"
+            }
+          },
+          {
+            image: "https://images.pexels.com/photos/3184291/pexels-photo-3184291.jpeg",
+            link: {
+              title: "Ocean Scene",
+              href: "#",
+              target: "_self"
+            }
+          },
+          {
+            image: "https://images.pexels.com/photos/1181690/pexels-photo-1181690.jpeg",
+            link: {
+              title: "Forest Path",
+              href: "#",
+              target: "_self"
+            }
+          },
+          {
+            image: "https://images.pexels.com/photos/1854897/pexels-photo-1854897.jpeg",
+            link: {
+              title: "Desert Sunset",
+              href: "#",
+              target: "_self"
+            }
+          },
+          {
+            image: "https://images.pexels.com/photos/1595655/pexels-photo-1595655.jpeg",
+            link: {
+              title: "City Lights",
+              href: "#",
+              target: "_self"
+            }
+          },
+          {
+            image: "https://images.pexels.com/photos/3184291/pexels-photo-3184291.jpeg",
+            link: {
+              title: "River Valley",
+              href: "#",
+              target: "_self"
+            }
+          },
+          {
+            image: "https://images.pexels.com/photos/1181690/pexels-photo-1181690.jpeg",
+            link: {
+              title: "Mountain Peak",
+              href: "#",
+              target: "_self"
+            }
+          }
+        ]}
+      />
+    </ElementHolder>
+  }
+}
+
+export const CheckOutActionView = {
+  ...CheckOutActionTemplate,
+}

package/src/Components/DataDisplay/CallToActionBlock/CallToActionBlock.tsx

@@ -0,0 +1,80 @@
+import styles from './callToAction.module.scss';
+import Slider from "react-slick";
+import Container from "../../Shared/Container/Container.tsx";
+import '../slider.scss'
+import {CaretLeft, CaretRight} from "@hellobetterdigitalnz/selwynui";
+import {useRef} from "react";
+import CallToActionBlockProps from "./CallToActionBlockProps.tsx";
+
+const CallToActionBlock = (props: CallToActionBlockProps) => {
+  const { title, cards = [] } = props;
+  const sliderRef = useRef<any>(null);
+
+  const settings = {
+    dots: false,
+    arrows: false,
+    infinite: false,
+    speed: 500,
+    touchMove: true,
+    variableWidth: true,
+    slidesToShow: 1,
+    slidesToScroll: 1,
+  };
+
+  return (
+    <div className={`${styles.checkOutAction} carouselBlock`}>
+      <Container>
+        <div className={styles.carouselWrapper}>
+          <div className={styles.carouselTitle}>
+            <h3>{title}</h3>
+            <div className={styles.actions}>
+              <button
+                className="custom-arrow prev"
+                onClick={() => sliderRef.current?.slickPrev()}
+                aria-label="Previous"
+              >
+                <CaretLeft type="thin" />
+              </button>
+
+              <button
+                className="custom-arrow next"
+                onClick={() => sliderRef.current?.slickNext()}
+                aria-label="Next"
+              >
+                <CaretRight type="thin" />
+              </button>
+            </div>
+          </div>
+          <Slider ref={sliderRef} {...settings}>
+            {cards.map((item, index) => (
+              <div key={index} className={styles.imageSlide}>
+                {item.link?.href ? (
+                  <a
+                    href={item.link.href}
+                    target={item.link.target || '_self'}
+                    rel={item.link.rel}
+                    className={styles.imageLink}
+                  >
+                    <img
+                      src={item.image}
+                      alt={item.link.title || `Image ${index + 1}`}
+                      className={styles.image}
+                    />
+                  </a>
+                ) : (
+                  <img
+                    src={item.image}
+                    alt={`Image ${index + 1}`}
+                    className={styles.image}
+                  />
+                )}
+              </div>
+            ))}
+          </Slider>
+        </div>
+      </Container>
+    </div>
+  );
+};
+
+export default CallToActionBlock;

package/src/Components/DataDisplay/CallToActionBlock/CallToActionBlockProps.tsx

@@ -0,0 +1,18 @@
+
+export  interface ImageItem {
+  image?: string;
+  link?: {
+    title?: string;
+    href?: string;
+    target?: "_blank" | "_self" | "_parent" | "_top";
+    rel?: string;
+  };
+}
+
+interface CallToActionBlockProps {
+  title?: string;
+  cards?: ImageItem[];
+  pillar?: 'visit' | 'live' | 'business' | 'participate' | 'taste'
+}
+
+export default CallToActionBlockProps;

package/src/Components/DataDisplay/CallToActionBlock/callToAction.module.scss

@@ -0,0 +1,79 @@
+.checkOutAction {
+  padding: 76px 0;
+
+  @media (max-width: 834px) {
+    padding: 64px 0;
+  }
+
+  .carouselWrapper {
+    width: 100%;
+  }
+
+
+  .carouselTitle {
+    margin: -12px;
+    margin-bottom: 50px;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: center;
+
+    h3{
+      font-size: 72px;
+      line-height: 1;
+      font-weight: 700;
+      padding: 12px;
+      letter-spacing: -3.6px;
+    }
+
+
+    .actions {
+      padding: 12px;
+    }
+
+    @media screen and (min-width: 992px) {
+      margin-bottom: 66px;
+
+
+      h3 {
+        font-size: var(--font-size-h3);
+      }
+    }
+  }
+
+  .imageSlide {
+    width: 312px !important;
+    margin-right: 16px;
+
+    @media screen and (min-width: 992px) {
+      width: 456px !important;
+      margin-right: 24px;
+    }
+  }
+
+  .imageLink {
+    display: block;
+    text-decoration: none;
+    position: relative;
+    overflow: hidden;
+    border-radius: 8px;
+
+    &:hover .image {
+      transform: scale(1.05);
+    }
+  }
+
+  .image {
+    width: 100%;
+    height: 240px;
+    object-fit: cover;
+    display: block;
+    border-radius: 12px;
+    transition: transform 0.3s ease;
+    border: 1px solid var(--color-text);
+
+    @media screen and (min-width: 992px) {
+      height: 299px;
+    }
+  }
+}

package/src/Components/DataDisplay/CallToActionBlock/callToAction.module.scss~

@@ -0,0 +1,78 @@
+.checkOutAction {
+  padding: 76px 0;
+
+  @media (max-width: 834px) {
+    padding: 64px 0;
+  }
+
+  .carouselWrapper {
+    width: 100%;
+  }
+
+  .carouselTitle {
+    margin: -12px;
+    margin-bottom: 50px;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: center;
+
+    h3{
+      font-size: 72px;
+      line-height: 1;
+      font-weight: 700;
+      padding: 12px;
+      letter-spacing: -3.6px;
+    }
+
+
+    .actions {
+      padding: 12px;
+    }
+
+    @media screen and (min-width: 992px) {
+      margin-bottom: 66px;
+
+
+      h3 {
+        font-size: var(--font-size-h3);
+      }
+    }
+  }
+
+  .imageSlide {
+    width: 312px !important;
+    margin-right: 16px;
+
+    @media screen and (min-width: 992px) {
+      width: 456px !important;
+      margin-right: 24px;
+    }
+  }
+
+  .imageLink {
+    display: block;
+    text-decoration: none;
+    position: relative;
+    overflow: hidden;
+    border-radius: 8px;
+
+    &:hover .image {
+      transform: scale(1.05);
+    }
+  }
+
+  .image {
+    width: 100%;
+    height: 240px;
+    object-fit: cover;
+    display: block;
+    border-radius: 12px;
+    transition: transform 0.3s ease;
+    border: 1px solid var(--color-text);
+
+    @media screen and (min-width: 992px) {
+      height: 299px;
+    }
+  }
+}

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

@@ -0,0 +1,77 @@
+import React from 'react'
+import type {Meta, StoryObj} from "@storybook/react-vite";
+import CarouselBlock from "./CarouselBlock";
+import ElementHolder from "../../Shared/ElementHolder/ElementHolder";
+
+const meta : Meta<typeof CarouselBlock> = {
+  title: "Form / CarouselBlock",
+  component: CarouselBlock,
+}
+
+export default meta;
+type Story = StoryObj<typeof CarouselBlock>
+
+const CarouselTemplate: Story = {
+  render : () =>{
+
+    return <ElementHolder paddingTop="sm" paddingBottom="sm" pillar="participate" level="light">
+      <CarouselBlock
+        title={'What’s On'}
+        cards={[
+          {
+            title: "Lorem ipsum",
+            description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt",
+            image: "https://images.pexels.com/photos/1854897/pexels-photo-1854897.jpeg",
+            pillar: 'participate',
+          },
+          {
+            title: "Lorem ipsum",
+            description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt",
+            image: "https://images.pexels.com/photos/1595655/pexels-photo-1595655.jpeg",
+            pillar: 'participate',
+          },
+          {
+            title: "Lorem ipsum",
+            description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
+            image: "https://images.pexels.com/photos/3184291/pexels-photo-3184291.jpeg",
+            pillar: 'participate',
+          },
+          {
+            title: "Lorem ipsum",
+            description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
+            image: "https://images.pexels.com/photos/3184291/pexels-photo-3184291.jpeg",
+            pillar: 'participate',
+          },{
+            title: "Lorem ipsum",
+            description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt",
+            image: "https://images.pexels.com/photos/1854897/pexels-photo-1854897.jpeg",
+            pillar: 'participate',
+          },
+          {
+            title: "Lorem ipsum",
+            description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt",
+            image: "https://images.pexels.com/photos/1595655/pexels-photo-1595655.jpeg",
+            pillar: 'participate',
+          },
+          {
+            title: "Lorem ipsum",
+            description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
+            image: "https://images.pexels.com/photos/3184291/pexels-photo-3184291.jpeg",
+            pillar: 'participate',
+          },
+          {
+            title: "Lorem ipsum",
+            description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
+            image: "https://images.pexels.com/photos/3184291/pexels-photo-3184291.jpeg",
+            pillar: 'participate',
+          }
+        ]}
+      />
+    </ElementHolder>
+
+  }
+}
+
+export const CarouselView = {
+  ...CarouselTemplate,
+}