@hellobetterdigitalnz/selwynui 0.0.1-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 {
+  pillar?: PillarType;
+  displayFullLogo?: boolean;
+  displayIconWithTitle?: boolean;
+  title?: string;
+  boldTitle?:string;
+  content?: ReactNode;
+  action?: ReactNode;
+  images?: ImageSet;
+  imageSrc?:string;
+  alignment?: 'left' | 'right';
+  imageBorder?: 'top' | 'bottom'
+  rendition?: RenditionType;
+  list?: Item[];
+}
+
+export default ImageContentProps;

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

@@ -0,0 +1,343 @@
+.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;
+    }
+
+  }
+
+  .pillarlogo{
+    display: flex;
+    align-items: center;
+
+    p{
+      margin-left: 16px;
+      font-size: 18px;
+      line-height: 1.4;
+      font-weight: 0;
+    }
+  }
+
+  // masked images
+  &.maskedImageContent{
+
+    .pillarlogo{
+      margin-bottom: 48px;
+
+      svg{
+        width: 160px;
+        height: 54px;
+      }
+
+    }
+
+    .content{
+      .title h4{
+        font-size: var(--font-size-h4);
+        line-height: var(--line-height-h4);
+        font-weight: var(--font-weight-h4);
+      }
+
+      .desc{
+        margin-top: 48px;
+      }
+    }
+
+    .imageContentWrapper{
+      margin: 0 ;
+    }
+
+    .imageWrapper{
+      svg{
+        width: 100%;
+        min-height: 570px;
+      }
+    }
+
+    .imageWrapper, .content{
+      padding: 0;
+    }
+
+  }
+
+  // full image
+  &.imageContentFull{
+    position: relative;
+
+    .svgBackgroundPillar{
+      position: absolute;
+      width: 60%;
+      top: 0;
+      bottom: 0;
+    }
+
+    .pillarlogo{
+      margin-bottom: 32px;
+
+      svg{
+        width: 32px;
+        height: 32px;
+      }
+    }
+
+    &.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;
+      }
+    }
+
+    //masked
+    &.maskedImageContent{
+
+      .pillarlogo{
+        margin-bottom: 72px;
+
+        svg{
+          width: auto;
+          height: auto;
+        }
+
+      }
+
+      .imageContentWrapper{
+        margin: 0 -44px;
+      }
+
+      .imageWrapper, .content{
+        padding: 0 44px;
+      }
+
+      .content{
+        margin-top: 72px;
+      }
+
+    }
+
+    // full image
+    &.imageContentFull{
+      .pillarlogo{
+        margin-bottom: 48px;
+      }
+    }
+
+  }
+
+}