@hellobetterdigitalnz/selwynui 0.0.1

package/src/Components/DataDisplay/ImageContent/ImageContentMaskingImages.tsx

@@ -0,0 +1,334 @@
+import { useId } from "react";
+
+const ImageContentClip = ({ pillar = 'visit', single, setOfFour, width = 568, height = 565 }: any) => {
+  const id = useId();
+  const clipId = `clip-${id}`;
+  const clipIds = [`clip-1-${id}`, `clip-2-${id}`, `clip-3-${id}`, `clip-4-${id}`];
+
+  const positions = [
+    { x: 0, y: 0, width: 275.811, height: 274.703 },
+    { x: 0, y: 290.208, width: 275.811, height: 274.702 },
+    { x: 292.189, y: 0, width: 275.811, height: 274.703 },
+    { x: 292.189, y: 290.297, width: 275.811, height: 274.703 }
+  ];
+
+  if(pillar === 'participate'){
+    return (
+      <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`} xmlns="http://www.w3.org/2000/svg">
+        {single && (
+          <defs>
+            <clipPath id={clipId} clipPathUnits="userSpaceOnUse">
+              <path d="M0 274.705C152.008 274.705 275.285 151.688 275.285 0H0V274.705Z" />
+              <path d="M0 290C152.008 290 275.285 413.017 275.285 564.705H0V290Z" />
+              <path d="M567.285 274.705C415.277 274.705 292.001 151.688 292.001 0H567.285V274.705Z" />
+              <path d="M567.285 290C415.277 290 292.001 413.017 292.001 564.705H567.285V290Z" />
+            </clipPath>
+          </defs>
+        )}
+
+        {setOfFour && (
+          <defs>
+            <clipPath id={clipIds[0]}>
+              <path d="M0 274.705C152.008 274.705 275.285 151.688 275.285 0H0V274.705Z" />
+            </clipPath>
+            <clipPath id={clipIds[1]}>
+              <path d="M0 290C152.008 290 275.285 413.017 275.285 564.705H0V290Z" />
+            </clipPath>
+            <clipPath id={clipIds[2]}>
+              <path d="M567.285 274.705C415.277 274.705 292.001 151.688 292.001 0H567.285V274.705Z" />
+            </clipPath>
+            <clipPath id={clipIds[3]}>
+              <path d="M567.285 290C415.277 290 292.001 413.017 292.001 564.705H567.285V290Z" />
+            </clipPath>
+          </defs>
+        )}
+
+        {single && (
+          <image
+            href={single}
+            x="0"
+            y="0"
+            width={width}
+            height={height}
+            preserveAspectRatio="xMidYMid slice"
+            clipPath={`url(#${clipId})`}
+          />
+        )}
+
+        {setOfFour &&
+          setOfFour.map((s: string, i: number) => {
+            const area = positions[i];
+            return (
+              <image
+                key={i}
+                href={s}
+                x={area.x}
+                y={area.y}
+                width={area.width}
+                height={area.height}
+                preserveAspectRatio="xMidYMid slice"
+                clipPath={`url(#${clipIds[i]})`}
+              />
+            );
+          })}
+      </svg>
+    );
+
+  }
+
+  if(pillar === 'live'){
+    return (
+      <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`} xmlns="http://www.w3.org/2000/svg">
+        {single && (
+          <defs>
+            <clipPath id={clipId} clipPathUnits="userSpaceOnUse">
+              <path d="M0.0906646 0C151.563 0 274.404 123.017 274.404 274.705H0.0906646V0Z" />
+              <path d="M274.314 564.91C122.842 564.91 0 441.893 0 290.205H274.314V564.91Z" />
+              <path d="M565 274.795C565 123.107 442.158 0.0895993 290.686 0.0895993V274.795H565Z" />
+              <path d="M290.686 290.295C290.686 441.983 413.528 565 565 565V290.295H290.686Z" />
+            </clipPath>
+          </defs>
+        )}
+
+        {setOfFour && (
+          <defs>
+            <clipPath id={clipIds[0]}>
+              <path d="M0.0906646 0C151.563 0 274.404 123.017 274.404 274.705H0.0906646V0Z" />
+            </clipPath>
+            <clipPath id={clipIds[1]}>
+              <path d="M274.314 564.91C122.842 564.91 0 441.893 0 290.205H274.314V564.91Z" />
+            </clipPath>
+            <clipPath id={clipIds[2]}>
+              <path d="M565 274.795C565 123.107 442.158 0.0895993 290.686 0.0895993V274.795H565Z" />
+            </clipPath>
+            <clipPath id={clipIds[3]}>
+              <path d="M290.686 290.295C290.686 441.983 413.528 565 565 565V290.295H290.686Z" />
+            </clipPath>
+          </defs>
+        )}
+
+        {single && (
+          <image
+            href={single}
+            x="0"
+            y="0"
+            width={width}
+            height={height}
+            preserveAspectRatio="xMidYMid slice"
+            clipPath={`url(#${clipId})`}
+          />
+        )}
+
+        {setOfFour &&
+          setOfFour.map((s: string, i: number) => {
+            const area = positions[i];
+            return (
+              <image
+                key={i}
+                href={s}
+                x={area.x}
+                y={area.y}
+                width={area.width}
+                height={area.height}
+                preserveAspectRatio="xMidYMid slice"
+                clipPath={`url(#${clipIds[i]})`}
+              />
+            );
+          })}
+      </svg>
+    );
+
+  }
+
+  if(pillar === 'business'){
+    return (
+      <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`} xmlns="http://www.w3.org/2000/svg">
+        {single && (
+          <defs>
+            <clipPath id={clipId} clipPathUnits="userSpaceOnUse">
+              <path d="M0 275.143C0 123.204 123.502 0 275.808 0V275.143H0Z" />
+              <path d="M0 565.82C0 413.881 123.502 290.678 275.808 290.678V565.82H0Z" />
+              <path d="M568 0.179636C415.693 0.179636 292.192 123.383 292.192 275.322H568V0.179636Z" />
+              <path d="M568 290.857C415.693 290.857 292.192 414.061 292.192 566H568V290.857Z" />
+            </clipPath>
+          </defs>
+        )}
+
+        {setOfFour && (
+          <defs>
+            <clipPath id={clipIds[0]}>
+              <path d="M0 275.143C0 123.204 123.502 0 275.808 0V275.143H0Z" />
+            </clipPath>
+            <clipPath id={clipIds[1]}>
+              <path d="M0 565.82C0 413.881 123.502 290.678 275.808 290.678V565.82H0Z" />
+            </clipPath>
+            <clipPath id={clipIds[2]}>
+              <path d="M568 0.179636C415.693 0.179636 292.192 123.383 292.192 275.322H568V0.179636Z" />
+            </clipPath>
+            <clipPath id={clipIds[3]}>
+              <path d="M568 290.857C415.693 290.857 292.192 414.061 292.192 566H568V290.857Z" />
+            </clipPath>
+          </defs>
+        )}
+
+        {single && (
+          <image
+            href={single}
+            x="0"
+            y="0"
+            width={width}
+            height={height}
+            preserveAspectRatio="xMidYMid slice"
+            clipPath={`url(#${clipId})`}
+          />
+        )}
+
+        {setOfFour &&
+          setOfFour.map((s: string, i: number) => {
+            const area = positions[i];
+            return (
+              <image
+                key={i}
+                href={s}
+                x={area.x}
+                y={area.y}
+                width={area.width}
+                height={area.height}
+                preserveAspectRatio="xMidYMid slice"
+                clipPath={`url(#${clipIds[i]})`}
+              />
+            );
+          })}
+      </svg>
+    );
+
+  }
+
+  if (pillar === "taste") {
+    const tastePositions = [
+      { x: 292.189, y: 290.297, width: 275.811, height: 274.703 }, // RB
+      { x: 292.189, y: 0,        width: 275.811, height: 274.792 }, // RT
+      { x: 0,        y: 290.208, width: 275.811, height: 274.702 }, // LB
+      { x: 0,        y: 0,        width: 275.811, height: 274.703 }, // LT
+    ];
+
+    return (
+      <svg
+        width={width}
+        height={height}
+        viewBox="0 0 568 565"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        {single && (
+          <defs>
+            <clipPath id={clipId} clipPathUnits="userSpaceOnUse">
+              <path d="M292.189 565C444.537 565 568 442.034 568 290.297L292.189 290.297L292.189 565Z" />
+              <path d="M292.189 274.792C444.537 274.792 568 151.826 568 0.0897827L292.189 0.0897825L292.189 274.792Z" />
+              <path d="M275.811 564.91C123.463 564.91 0 441.944 0 290.208L275.811 290.208L275.811 564.91Z" />
+              <path d="M275.811 274.703C123.463 274.703 0 151.736 0 0L275.811 0L275.811 274.703Z" />
+            </clipPath>
+          </defs>
+        )}
+
+        {setOfFour && (
+          <defs>
+            <clipPath id={clipIds[0]}>
+              <path d="M292.189 565C444.537 565 568 442.034 568 290.297L292.189 290.297L292.189 565Z" />
+            </clipPath>
+            <clipPath id={clipIds[1]}>
+              <path d="M292.189 274.792C444.537 274.792 568 151.826 568 0.0897827L292.189 0.0897825L292.189 274.792Z" />
+            </clipPath>
+            <clipPath id={clipIds[2]}>
+              <path d="M275.811 564.91C123.463 564.91 0 441.944 0 290.208L275.811 290.208L275.811 564.91Z" />
+            </clipPath>
+            <clipPath id={clipIds[3]}>
+              <path d="M275.811 274.703C123.463 274.703 0 151.736 0 0L275.811 0L275.811 274.703Z" />
+            </clipPath>
+          </defs>
+        )}
+
+        {single && (
+          <image
+            href={single}
+            x={0}
+            y={0}
+            width={568}
+            height={565}
+            preserveAspectRatio="xMidYMid slice"
+            clipPath={`url(#${clipId})`}
+          />
+        )}
+
+        {setOfFour &&
+          setOfFour.map((s: string, i: number) => {
+            const area = tastePositions[i];
+            return (
+              <image
+                key={i}
+                href={s}
+                x={area.x}
+                y={area.y}
+                width={area.width}
+                height={area.height}
+                preserveAspectRatio="xMidYMid slice"
+                clipPath={`url(#${clipIds[i]})`}
+              />
+            );
+          })}
+      </svg>
+    );
+  }
+
+
+  return (
+    <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`} xmlns="http://www.w3.org/2000/svg">
+      {single && (
+        <defs>
+          <clipPath id={clipId} clipPathUnits="userSpaceOnUse">
+            <path d="M275.811 0C123.463 0 0 122.966 0 274.703H275.811V0Z" />
+            <path d="M275.811 290.208C123.463 290.208 0 413.174 0 564.91H275.811V290.208Z" />
+            <path d="M292.189 0.0897284C444.537 0.0897286 568 123.056 568 274.792H292.189V0.0897284Z" />
+            <path d="M292.189 290.297C444.537 290.297 568 413.264 568 565H292.189V290.297Z" />
+          </clipPath>
+        </defs>
+      )}
+
+      {setOfFour && (
+        <defs>
+          <clipPath id={clipIds[0]} >
+            <path d="M275.811 0C123.463 0 0 122.966 0 274.703H275.811V0Z" />
+          </clipPath>
+          <clipPath id={clipIds[1]} >
+            <path d="M275.811 290.208C123.463 290.208 0 413.174 0 564.91H275.811V290.208Z" />
+          </clipPath>
+          <clipPath id={clipIds[2]} >
+            <path d="M292.189 0.0897284C444.537 0.0897286 568 123.056 568 274.792H292.189V0.0897284Z" />
+          </clipPath>
+          <clipPath id={clipIds[3]}>
+            <path d="M292.189 290.297C444.537 290.297 568 413.264 568 565H292.189V290.297Z" />
+          </clipPath>
+        </defs>
+      )}
+
+      {single && <image href={single} x="0" y="0" width={width} height={height} preserveAspectRatio="xMidYMid slice" clipPath={`url(#${clipId})`} />}
+
+      {setOfFour && setOfFour.map((s: string, i: number) => {
+        const area = positions[i];
+        return (
+          <image
+            key={i}
+            href={s}
+            x={area.x}
+            y={area.y}
+            width={area.width}
+            height={area.height}
+            preserveAspectRatio="xMidYMid slice"
+            clipPath={`url(#${clipIds[i]})`}
+          />
+        );
+      })}
+    </svg>
+  );
+};
+
+export default ImageContentClip;

package/src/Components/DataDisplay/ImageContent/ImageContentProps.tsx

@@ -0,0 +1,42 @@
+import { ReactNode } from "react";
+
+export type PillarType =
+  | "main"
+  | "live"
+  | "visit"
+  | "taste"
+  | "business"
+  | "participate";
+
+export type RenditionType =
+  | "full"
+  | "contained"
+  | "masked";
+
+export interface ImageSet {
+  single?: string;
+  setOfFour?: [string, string, string, string];
+}
+
+export interface Item {
+  id?: number;
+  label?: string;
+}
+
+export interface ImageContentProps {
+  level?: "primary" | "secondary" | "light";
+  pillar?: PillarType;
+  displayFullLogo?: boolean;
+  displayIconWithTitle?: boolean;
+  pillarTitle?: string;
+  title?: string;
+  content?: ReactNode;
+  action?: ReactNode;
+  images?: ImageSet;
+  alignment?: 'left' | 'right';
+  imageBorder?: 'top' | 'bottom'
+  rendition?: RenditionType;
+  list?: Item[];
+}
+
+export default ImageContentProps;

package/src/Components/DataDisplay/ImageContent/imageContent.module.scss

@@ -0,0 +1,278 @@
+.imageContent{
+  color: var(--color-block-text);
+
+  //alignment
+
+  &.left{
+    .imageContentWrapper {
+      flex-direction: column-reverse;
+    }
+  }
+
+  &.right{
+    .imageContentWrapper {
+      flex-direction: column-reverse;
+    }
+  }
+
+  &Wrapper{
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .imageWrapper{
+    width: 100%;
+    margin-top: 32px;
+  }
+
+  .imageHolder {
+    position: relative;
+    border-radius: 2px 2px 96px 2px;
+    background: lightgray 50%;
+    overflow: hidden;
+    height: 100%;
+
+    &::before {
+      content: "";
+      display: block;
+      padding-top: 72%;
+    }
+
+    img {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      top: 0;
+      left: 0;
+      object-fit: cover;
+    }
+  }
+
+  .content{
+    width: 100%;
+    display: flex;
+    align-items: center;
+
+    &Wrappper{
+      padding: 32px 0;
+    }
+
+    .title{
+      font-size: var(--font-size-h3);
+      line-height: var(--line-height-h3);
+
+      h3{
+        font-weight: 400;
+      }
+
+      span{
+        font-weight: 700;
+      }
+
+    }
+
+    .desc{
+      margin-top: 72px;
+      font-size: var(--font-size-body-regular);
+      line-height: var(--line-height-body-regular);
+      font-weight: 400;
+    }
+
+    .action{
+      padding-top: 48px;
+    }
+
+  }
+
+  // masked images
+  &.maskedImageContent{
+
+    .content{
+      .title h4{
+        font-size: var(--font-size-h4);
+        line-height: var(--line-height-h4);
+        font-weight: var(--font-weight-h4);
+      }
+    }
+
+    .imageContentWrapper{
+      margin: 0 ;
+    }
+
+    .imageWrapper{
+      svg{
+        width: 100%;
+        min-height: 570px;
+        height: 100%;
+      }
+    }
+
+    .imageWrapper, .content{
+      padding: 0;
+    }
+
+  }
+
+  // full image
+  &.imageContentFull{
+
+    &.top{
+      &.left{
+      .imageHolder {
+        border-radius: 0px 500px 0px 0px;
+      }
+    }
+
+      &.right{
+        .imageHolder {
+          border-radius: 500px 0px 0px;
+        }
+      }
+    }
+
+    &.bottom{
+      &.left{
+        .imageHolder {
+          border-radius: 0px 0px 500px 0px;
+        }
+      }
+
+      &.right{
+        .imageHolder {
+          border-radius: 0px 0px 0px 500px;
+        }
+      }
+    }
+
+    &.left{
+      .imageContentWrapper {
+        flex-direction: row;
+      }
+
+      .imageHolder {
+        height: 100%;
+        position: absolute;
+        width: calc(50vw + 10px);
+        right: 0;
+        left: unset;
+      }
+
+      .content{
+        padding-left: 198px;
+        padding-right: 0;
+      }
+
+    }
+
+    .imageContentWrapper{
+      margin: 0px;
+      min-height: 935px;
+    }
+
+    .imageWrapper{
+      position: relative;
+      padding: 0px;
+    }
+
+    .imageHolder {
+      padding: 0;
+      height: 100%;
+      position: absolute;
+      width: calc(50vw - 10px);
+      left: 0;
+      overflow: hidden;
+
+
+      &::before {
+        content: none;
+      }
+
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        object-position: center;
+      }
+    }
+
+    .content{
+      padding: 0;
+      padding-right: 198px;
+
+      .desc{
+      }
+
+      .list{
+        margin-top: 48px;
+        list-style: none;
+
+        li{
+          margin-bottom: 12px;
+
+          .listWrapper{
+            display: flex;
+            align-items: center;
+
+            svg{
+              flex-shrink: 0;
+              margin-right: 8px;
+            }
+
+          }
+
+          &:last-child{
+            margin-bottom: 0px;
+          }
+
+        }
+
+      }
+
+    }
+
+  }
+
+  @media screen and (min-width: 992px){
+
+    &Wrapper{
+      margin: 0 -52px;
+    }
+
+    .imageWrapper{
+      width: 50%;
+      padding: 0 52px;
+      margin-top: 0px;
+    }
+
+
+    .content{
+      width: 50%;
+      padding: 0 52px;
+    }
+
+    &.left{
+      .imageContentWrapper {
+        flex-direction: row;
+      }
+    }
+
+    &.right{
+      .imageContentWrapper {
+        flex-direction: row-reverse;
+      }
+    }
+
+
+    &.maskedImageContent{
+      .imageContentWrapper{
+        margin: 0 -44px;
+      }
+
+      .imageWrapper, .content{
+        padding: 0 44px;
+      }
+    }
+
+  }
+
+}

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

@@ -0,0 +1,37 @@
+import React from "react";
+import { Meta, StoryObj } from "@storybook/react-vite";
+import IntroBlock from "./IntroBlock";
+import ElementHolder from "../../Shared/ElementHolder/ElementHolder";
+
+const meta: Meta = {
+    title: "DataDisplay / IntroBlock",
+    component: IntroBlock,
+    parameters: {
+        layout: 'fullscreen',
+    },
+    tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const IntroBlockTemplate: Story = {
+    render: () => {
+        return (
+            <ElementHolder paddingTop="sm" paddingBottom="sm" piller="visit" level="light">
+                <IntroBlock
+                    introHeading={'A district that’s growing, grounded, and full of opportunity.'}
+                    introText={'From the Southern Alps to the sea, Waikirikiri Selwyn’s diverse towns arespread across the Canterbury Plains between two mighty braided rivers. This is where ideas take root, families and businesses grow, and communities come together. We don’t just dream of a better future, we make it happen.'}
+                />
+            </ElementHolder>
+        )
+    }
+}
+
+export const IntroBlockComponent = {
+    ...IntroBlockTemplate
+};
+
+
+