@hellobetterdigitalnz/selwynui 0.0.1-47 → 0.0.1-49

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

@@ -0,0 +1,248 @@
+.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;
+}

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

@@ -0,0 +1,42 @@
+// @ts-ignore
+import React from "react"
+import { Meta, StoryObj } from "@storybook/react-vite";
+import Media from "./Media";
+import ElementHolder from "../../Shared/ElementHolder/ElementHolder";
+
+const meta: Meta = {
+  title: "Layout / Media",
+  component: Media,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ["autodocs"]
+}
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const PathwayBlockTemplate: Story = {
+  render: () => {
+
+    const mediaProps = {
+      imageSrc: "https://images.unsplash.com/photo-1501594907352-04cda38ebc29?w=1200&h=675&fit=crop",
+      videoSrc: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
+    };
+
+    return (
+      <>
+        <ElementHolder pillar="taste">
+         <Media {...mediaProps} />
+        </ElementHolder>
+      </>
+    )
+  }
+}
+
+
+export const PathwayBlockComponent = {
+  ...PathwayBlockTemplate
+};
+

package/src/Components/DataDisplay/Media/Media.tsx

@@ -0,0 +1,57 @@
+import MediaProps from "./MediaProps.tsx";
+import {useEffect, useRef} from "react";
+import videojs from "video.js";
+import 'video.js/dist/video-js.css';
+import './media.scss'
+
+const Media = (props : MediaProps) => {
+
+  const {imageSrc , videoSrc, thumbnail} = props
+
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const playerRef = useRef<any>(null);
+
+  useEffect(() => {
+    if (!playerRef.current && videoRef.current) {
+      const videoElement = videoRef.current;
+
+      playerRef.current = videojs(videoElement, {
+        controls: true,
+        responsive: true,
+        fluid: true,
+        preload: 'metadata',
+        playbackRates: [0.5, 1, 1.5, 2],
+        poster: thumbnail,
+        controlBar: {
+          volumePanel: {
+            inline: true
+          }
+        }
+      });
+    }
+
+    return () => {
+      if (playerRef.current) {
+        playerRef.current.dispose();
+        playerRef.current = null;
+      }
+    };
+  }, [imageSrc]);
+
+  return <div className="video-container">
+  <div className="video-wrapper">
+    <div data-vjs-player>
+      <video
+        ref={videoRef}
+        className="video-js vjs-big-play-centered"
+        playsInline
+      >
+        <source src={videoSrc} type="video/mp4" />
+      </video>
+    </div>
+  </div>
+</div>
+
+}
+
+export default Media;

package/src/Components/DataDisplay/Media/MediaProps.tsx

@@ -0,0 +1,7 @@
+interface MediaProps {
+  imageSrc?: string
+  videoSrc?: string
+  thumbnail?:string
+}
+
+export default MediaProps

package/src/Components/DataDisplay/Media/media.scss

@@ -0,0 +1,14 @@
+.video-container{
+  .vjs-big-play-button{
+    background: var(--color-block-bg) !important;
+    height: 114px;
+    width: 114px;
+    border-radius: 100%;
+    border: none;
+  }
+
+  .vjs_video_4320-dimensions.vjs-fluid:not(.vjs-audio-only-mode) {
+    padding-top: 56.25%;
+  }
+
+}

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

@@ -26,25 +26,35 @@ const PathwayBlockTemplate: Story = {
           title="Lorem ipsum"
           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"
+              title: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt",
+              // 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",
+              link: {
+                "title": "Learn More",
+                "href": "/",
+                "target": ""
+              },
             },
             {
-              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"
+              title: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt",
+              // 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",
+              link: {
+                "title": "Learn More",
+                "href": "/",
+                "target": ""
+              },
             },
             {
-              title: "Lorem ipsum",
-              description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
-              image: "https://images.pexels.com/photos/3184291/pexels-photo-3184291.jpeg"
+              title: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt",
+              // description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
+              image: "https://images.pexels.com/photos/3184291/pexels-photo-3184291.jpeg",
+              link: {
+                "title": "Learn More",
+                "href": "/",
+                "target": ""
+              },
             },
-            {
-              title: "Lorem ipsum",
-              description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
-              image: "https://images.pexels.com/photos/3184291/pexels-photo-3184291.jpeg"
-            }
           ]}
         />
         </ElementHolder>

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

@@ -0,0 +1,80 @@
+// @ts-ignore
+import React from "react"
+import { Meta, StoryObj } from "@storybook/react-vite";
+import PathwayBlock from "./PathwayBlock";
+import ElementHolder from "../../Shared/ElementHolder/ElementHolder";
+
+const meta: Meta = {
+  title: "Layout / PathwayBlock",
+  component: PathwayBlock,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ["autodocs"]
+}
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const PathwayBlockTemplate: Story = {
+  render: () => {
+    return (
+      <>
+        <ElementHolder paddingTop="sm" paddingBottom="sm" pillar="participate" level="light">
+        <PathwayBlock
+          title="Lorem ipsum"
+          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",
+              link: {
+                "title": "Learn More",
+                "href": "/",
+                "target": ""
+              },
+            },
+            {
+              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",
+              link: {
+                "title": "Learn More",
+                "href": "/",
+                "target": ""
+              },
+            },
+            {
+              title: "Lorem ipsum",
+              description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
+              image: "https://images.pexels.com/photos/3184291/pexels-photo-3184291.jpeg",
+              link: {
+                "title": "Learn More",
+                "href": "/",
+                "target": ""
+              },
+            },
+            {
+              title: "Lorem ipsum",
+              description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
+              image: "https://images.pexels.com/photos/3184291/pexels-photo-3184291.jpeg",
+              link: {
+                "title": "Learn More",
+                "href": "/",
+                "target": ""
+              },
+            }
+          ]}
+        />
+        </ElementHolder>
+      </>
+    )
+  }
+}
+
+
+export const PathwayBlockComponent = {
+  ...PathwayBlockTemplate
+};
+

package/src/Components/DataDisplay/PathwayBlock/pathwayBlock.module.scss

@@ -1,4 +1,6 @@
 .pathwayBlock {
+
+
   .header {
     font-size: var(--font-size-h3);
     font-weight: 700;

package/src/Components/Shared/ElementHolder/elementHolder.module.scss

@@ -2,6 +2,7 @@
     background-color: var(--color-block-bg);
     color: var(--color-block-text);
     position: relative;
+    overflow-x: hidden;
     
     &Inner {
         //position: relative;