@hellobetterdigitalnz/selwynui 0.0.1-58 → 0.0.1-59

package/src/Components/DataDisplay/ContactsBlock/contactsBlock.module.scss

@@ -1,141 +1,165 @@
 .contactsBlock {
-    background-color: var(--color-block-bg);
-    color: var(--color-block-text);
 
     .contactsBlockHeader {
-        padding-bottom: 36px;
-        font-size: var(--font-size-h3);
+      padding-bottom: 36px;
+      font-size: var(--font-size-h3);
+      font-weight: 700;
+      line-height: 1;
+      letter-spacing: -3.6px;
     }
 
-    .contactsCardsWrapper {
-        width: 100%;
-        
-        .contactCard {
-            background-color: var(--color-block-bg);
-            border-radius: 12px;
-            border: 1px solid var(--color-text);
-            transition: all ease 0.3s;
-            margin-bottom: 24px;
-            
-
-            &:hover {
-                background-color: var(--color-bg);
-                color: var(--color-text);
-            }
-
-            img {
-                object-fit: cover;
-                border-radius: 12px 12px 0 0;
-                width: 100%;
-            }
-
-            .contactContentWrapper {
-                padding: 24px;
-
-                .contactCardHeader {
-                    h1 {
-                        font-size: var(--font-size-h6);
-                        font-weight: var(--font-weight-bold);
-                        line-height: var(--line-height-h6);
-                        letter-spacing: -0.56px;
-
-                    }
-
-                    h2 {
-                        font-size: var(--font-size-h6);
-                        font-weight: var(--font-weight-h4);
-                        line-height: var(--line-height-h6);
-                        letter-spacing: -0.56px;
-                    }
-                }
-
-                .contactMiddleContent {
-                    padding-block: 24px;
-
-                    p {
-                        font-size: var(--font-size-small);
-                        font-weight: var(--font-weight-h4);
-                    }
-                }
-
-                .contactLink {
-                    display: flex;
-                    justify-content: space-between;
-                    font-size: var(--font-size-regular-sm);
-                    font-weight: var(--font-weight-bold);
-                    cursor: pointer;
-                }
-            }
+  .contactsCardsWrapper{
+    display: flex;
+    flex-wrap: wrap;
+    margin: -12px;
+  }
+
+  .contactCard{
+    width: 100%;
+    padding: 12px;
+
+    .contactCardWrapper{
+      border:1px solid var(--pathway-card-border);
+      color: var(--pathway-card-text);
+      background-color: var(--pathway-card-bg);
+      transition: all 0.3s ease-in-out;
+      border-radius: 12px;
+      overflow: clip;
+      min-height: 592px;
+      display: flex;
+      flex-direction: column;
+
+      &:hover {
+        background-color: var(--pathway-card-hover-bg);
+        border:1px solid var(--pathway-card-hover-text);
+
+        .contactContentWrapper {
+          .contactCardHeader {
+            color: var(--pathway-card-hover-text);
+          }
+
+          a{
+            color: var(--pathway-card-hover-text);
+          }
 
         }
+
+      }
+
     }
-}
 
+    .cardImg{
+      position: relative;
+      height: 300px;
+
+      &:before{
+        content: '';
+        padding-top: 65.7%;
+        display: block;
+      }
+
+      img{
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        object-position: top;
+      }
+    }
+
+    .contactContentWrapper{
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      padding: 24px 24px 16px 24px;
+
+      .contactCardHeader{
+        margin-bottom: 44px;
+        color: var(--pathway-card-text);
+
+        h1,h2{
+          font-size: 28px;
+          letter-spacing: -0.56px;
+          line-height: 1.1;
+          font-family: var(--font);
+        }
+
+        h1{
+          font-weight: 700;
+        }
+
+        h2{
+          font-weight: 400;
+        }
+
+      }
+
+      .contactMiddleContent{
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        margin-bottom: 20px;
+
+        a{
+          letter-spacing: -0.48px;
+          font-size: 24px;
+          font-weight: 400;
+          line-height: 1.3;
+          font-family: var(--font);
+          text-decoration: underline;
+          color: var(--pathway-card-text);
+
+          &:first-child{
+            margin-bottom: 8px;
+          }
 
-@media screen and (min-width: 992px) {
-    .contactsBlock {
-    
-        .contactsBlockHeader {
-            padding-bottom: 72px;
-            font-size: var(--font-size-h3);
         }
+      }
+
+      .contactLink{
+
+        a{
+          display: flex;
+          align-items: center;
+          font-size: 14px;
+          font-weight: 700;
+          line-height: 1.4;
+          letter-spacing: -0.14px;
+          justify-content: space-between;
+          color: var(--pathway-card-text);
+
+          svg{
+            width: 32px;
+            height: 32px;
+          }
 
-        .contactsCardsWrapper {
-            display: flex;
-            flex-wrap: wrap;
-            flex-grow: 1;
-            gap: 24px;
-            width: 100%;
-
-            .contactCard {
-                border-radius: 12px;
-                width: 33.33%;
-                transition: all ease 0.3s;
-
-                img {
-                    object-fit: cover;
-                    border-radius: 12px 12px 0 0;
-                    width: 100%;
-                }
-
-                .contactContentWrapper {
-                    padding: 24px;
-
-                    .contactCardHeader {
-                        h1 {
-                            font-size: var(--font-size-h6);
-                            font-weight: var(--font-weight-bold);
-                            line-height: var(--line-height-h6);
-                        }
-
-                        h2 {
-                            font-size: var(--font-size-h6);
-                            font-weight: var(--font-weight-h4);
-                            line-height: var(--line-height-h6);
-                        }
-                    }
-
-                    .contactMiddleContent {
-                        padding-block: 58px;
-
-                        p {
-                            font-size: var(--font-size-small);
-                            font-weight: var(--font-weight-h4);
-                            letter-spacing: -0.48px;
-                            text-decoration: underline;
-                        }
-                    }
-
-                    .contactLink {
-                        display: flex;
-                        justify-content: space-between;
-                        font-size: var(--font-size-regular-sm);
-                        font-weight: var(--font-weight-bold);
-                        cursor: pointer;
-                    }
-                }
-
-            }
         }
+
+      }
+
+    }
+
+  }
+
+  @media screen and (min-width: 700px) {
+
+    .contactsBlockHeader {
+      padding-bottom: 72px;
+    }
+
+    .contactCard{
+      width: 50%;
     }
-}
+  }
+
+  @media screen and (min-width: 1024px) {
+    .contactCard {
+      width: 33.33%;
+    }
+  }
+
+}

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

@@ -5,7 +5,7 @@ import ContentBlock from "./ContentBlock";
 import ElementHolder from "../../Shared/ElementHolder/ElementHolder";
 
 const meta: Meta = {
-  title: "Layout / ContentBlock",
+  title: "DataDisplay / ContentBlock",
   component: ContentBlock,
   parameters: {
     layout: 'fullscreen',

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

@@ -7,7 +7,7 @@ import Button from "../../Form/Button/Button";
 
 
 const meta: Meta = {
-  title: "Layout / ImageContent",
+  title: "DataDisplay / ImageContent",
   component: ImageContent,
   parameters: {
     layout: 'fullscreen',

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

@@ -4,7 +4,7 @@ import KPIBlock from "./KPIBlock";
 import ElementHolder from "../../Shared/ElementHolder/ElementHolder";
 
 const meta: Meta = {
-  title: "Layout / KPIBlock",
+  title: "DataDisplay / KPIBlock",
   component: KPIBlock,
   parameters: {
     layout: 'fullscreen',

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

@@ -6,7 +6,7 @@ import Button from "../../Form/Button/Button";
 import {ArrowRight} from "../../Icons";
 
 const meta : Meta<typeof ListBlock> = {
-    title: "Form / ListBlock",
+    title: "DataDisplay / ListBlock",
     component: ListBlock,
 }
 

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

@@ -8,7 +8,7 @@ import ArrowRight from "../../Icons/Arrows/ArrowRight/ArrowRight.tsx";
 import {Button} from "../../Form";
 
 const meta: Meta = {
-  title: "Layout / ListingDetailBlock",
+  title: "DataDisplay / ListingDetailBlock",
   component: ListingDetailBlock,
   parameters: {
     layout: 'fullscreen',
@@ -24,7 +24,7 @@ export const Default: Story = {
   render: () => (
     <ElementHolder paddingTop="sm" paddingBottom="sm" pillar="visit" level="light">
       <ListingDetailBlock
-        title={
+        content={
           <>
             <h4>For beginners and kids the dedicated learner slope has gentle runs, easy sunkid carpet and platter lifts.</h4>
             <br/>

package/src/Components/DataDisplay/ListingDetailBlock/ListingDetailBlock.tsx

@@ -5,11 +5,11 @@ import Container from "../../Shared/Container/Container.tsx";
 import { ReactNode } from "react";
 
 const ListingDetailBlock = ({
-                              title,
-                              facilities,
-                              callToActions = [],
-                              callToActionButton,
-                            }: ListingDetailBlockProps) => {
+  content,
+  facilities,
+  callToActions = [],
+  callToActionButton,
+}: ListingDetailBlockProps) => {
 
   const renderIcon = (icon: ReactNode | string): ReactNode => {
     if (typeof icon === 'string') {
@@ -23,9 +23,9 @@ const ListingDetailBlock = ({
       <div className={styles.listingDetail}>
 
         <div className={styles.mainContent}>
-          <div className={`typography`}>{title}</div>
+          <div className={`typography`}>{content}</div>
 
-          <h3 className={styles.sectionTitle}>Facilities</h3>
+          <h3 className={styles.sectioncontent}>Facilities</h3>
           <ul className={styles.facilitiesList}>
             {facilities.map((facility, index) => (
               <li key={index} className={styles.facilityItem}>

package/src/Components/DataDisplay/ListingDetailBlock/ListingDetailBlockProps.tsx

@@ -14,7 +14,7 @@ export interface CallToActionButton {
 }
 
 interface ListingDetailBlockProps {
-  title: ReactNode;
+  content: ReactNode;
   facilities: string[];
   callToActions?: CallToActionItem[];
   callToActionButton?: CallToActionButton;

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

@@ -5,7 +5,7 @@ import Media from "./Media";
 import ElementHolder from "../../Shared/ElementHolder/ElementHolder";
 
 const meta: Meta = {
-  title: "Layout / Media",
+  title: "DataDisplay / Media",
   component: Media,
   parameters: {
     layout: 'fullscreen',

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

@@ -37,8 +37,6 @@ const Media = ({ imageSrc, videoSrc, thumbnail, pillar }: MediaProps) => {
           progressControl: true,
           fullscreenToggle: true,
           playbackRateMenuButton: true,
-          inactivityTimeout: 0,
-          pipToggle: false,
         },
       });
 

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

@@ -0,0 +1,89 @@
+import React, { useContext } from "react";
+import { Meta, StoryObj } from "@storybook/react-vite";
+
+import Modal from "./Modal.tsx";
+import ModalHeader from "./ModalHeader.tsx";
+import ModalBody from "./ModalBody.tsx";
+import ModalActions from "./ModalActions.tsx";
+import ModalActionsLeft from "./ModalActionsLeft.tsx";
+import ModalActionsRight from "./ModalActionsRight.tsx";
+import FormFieldHolder from "../../Form/FormFieldHolder/FormFieldHolder.tsx";
+import TextField from "../../Form/TextField/TextField.tsx";
+import Button from "../../Form/Button/Button.tsx";
+import {SelwynUIContext, SelwynUIProvider} from "../../SelwynUIProvider";
+
+const meta: Meta = {
+  title: "Data Display/Modal",
+  component: Modal,
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const ModalStoryContent = () => {
+  const context = useContext(SelwynUIContext);
+
+  const innerModal = (
+    <Modal>
+      <ModalHeader title="Inner Modal" canClose={true} canGoBack={false} />
+      <ModalBody>
+        <FormFieldHolder label="Inner Input">
+          <TextField />
+        </FormFieldHolder>
+      </ModalBody>
+      <ModalActions>
+        <ModalActionsRight>
+          <Button label="Close" size="large"
+            extraClass="btn-white-border" onClick={context.closeModal} />
+        </ModalActionsRight>
+      </ModalActions>
+    </Modal>
+  );
+
+  const outerModal = (
+    <Modal>
+      <ModalHeader title="Outer Modal" canClose={true} canGoBack={false} />
+      <ModalBody>
+        <FormFieldHolder label="Outer Input">
+          <TextField />
+        </FormFieldHolder>
+      </ModalBody>
+      <ModalActions>
+        <ModalActionsLeft></ModalActionsLeft>
+        <ModalActionsRight>
+          <div>
+            <Button label="Close" size="large"
+            extraClass="btn-white-border" onClick={context.closeModal} />
+          </div>
+          <div>
+            <Button label="Open Inner Modal" size="large" onClick={() => context.openModal(innerModal)} />
+          </div>
+          
+        </ModalActionsRight>
+      </ModalActions>
+    </Modal>
+  );
+
+  return (
+    <Button
+      label="Open Modal"
+      onClick={() => {
+        context.openModal(outerModal);
+      }}
+    />
+  );
+};
+
+const ModalTemplate: Story = {
+  render: () => (
+    <SelwynUIProvider>
+      <ModalStoryContent />
+    </SelwynUIProvider>
+  ),
+};
+
+export const Example = {
+  ...ModalTemplate,
+};

package/src/Components/DataDisplay/Modal/Modal.tsx

@@ -0,0 +1,16 @@
+import ModalProps from "./ModalProps";
+import styles from "./modal.module.scss";
+
+const Modal = (props: ModalProps) => {
+  const { children, extraClass, pillar = 'taste'  } = props;
+
+  return (
+    <div className={`${styles.holder} ${pillar} ${extraClass} modalHolder`}>
+      <div className={`${styles.modal} modal`}>
+        <div className={`${styles.wrapper} modalWrapper`}>{children}</div>
+      </div>
+    </div>
+  );
+};
+
+export default Modal;

package/src/Components/DataDisplay/Modal/ModalActions.tsx

@@ -0,0 +1,14 @@
+import ModalActionsProps from "./ModalActionsProps.tsx";
+import styles from "./modal.module.scss"
+
+const ModalActions = (props: ModalActionsProps) => {
+
+  const {children, extraClass =''} =props
+
+  return<div className={`${styles.modalAction} modalAction ${extraClass}`}>
+    {children}
+  </div>
+
+}
+
+export default ModalActions;

package/src/Components/DataDisplay/Modal/ModalActionsLeft.tsx

@@ -0,0 +1,13 @@
+import ModalActionsLeftProps from "./ModalActionsLeftProps.tsx";
+import styles from './modal.module.scss'
+const ModalActionsLeft = (props: ModalActionsLeftProps) => {
+
+  const {children, extraClass ='' } =props
+
+  return <div className={`${styles.modalActionLeft} modalActionLeft ${extraClass}`}>
+    {children}
+  </div>
+
+}
+
+export default ModalActionsLeft;

package/src/Components/DataDisplay/Modal/ModalActionsLeftProps.tsx

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

package/src/Components/DataDisplay/Modal/ModalActionsProps.tsx

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

package/src/Components/DataDisplay/Modal/ModalActionsRight.tsx

@@ -0,0 +1,14 @@
+import ModalActionsRightProps from "./ModalActionsRightProps.tsx";
+import styles from "./modal.module.scss"
+
+const ModalActionsRight = (props:ModalActionsRightProps) => {
+
+  const {children, extraClass ='' } =props
+
+  return<div className={`${styles.modalActionRight} modalActionRight ${extraClass}`}>
+    {children}
+  </div>
+
+}
+
+export default ModalActionsRight;

package/src/Components/DataDisplay/Modal/ModalActionsRightProps.tsx

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

package/src/Components/DataDisplay/Modal/ModalBody.tsx

@@ -0,0 +1,14 @@
+import ModalBodyProps from "./ModalBodyProps";
+import styles from "./modal.module.scss";
+
+const ModalBody = (props: ModalBodyProps) => {
+  const { children,extraClass =''} = props;
+
+  return (
+    <div className={`${styles.modalBody} ${extraClass} modalBody`}>
+      <div className={`${styles.modalBodyWrapper} modalBodyWrapper`}>{children}</div>
+    </div>
+  );
+};
+
+export default ModalBody;

package/src/Components/DataDisplay/Modal/ModalBodyProps.tsx

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

package/src/Components/DataDisplay/Modal/ModalCurtain.tsx

@@ -0,0 +1,6 @@
+import styles from './modal.module.scss'
+const ModalCurtain = () => {
+  return <div className={styles.curtain} />
+}
+
+export default ModalCurtain;

package/src/Components/DataDisplay/Modal/ModalHeader.tsx

@@ -0,0 +1,55 @@
+import CaretLeft from "../../Icons/Arrows/CaretLeft/CaretLeft";
+import XIcon from "../../Icons/MathsAndFinance/XIcon/XIcon";
+import ModalHeaderProps from "./ModalHeaderProps";
+import styles from "./modal.module.scss";
+
+import {useContext} from "react";
+import SelwynUIContext from "../../SelwynUIProvider/SelwynUIContext.tsx";
+
+const ModalHeader = (props: ModalHeaderProps) => {
+  const {closeOnclick, canGoBackOnclick ,canGoBack, canClose, title, extraClass ='',} = props;
+
+  const context = useContext(SelwynUIContext);
+
+  const closeOnclickHandler = (e:any) => {
+    if (canClose) {
+      if (closeOnclick) {
+        closeOnclick(e);
+      }
+      context.closeModal();
+    }
+  };
+
+  const goBackOnclickHandler = (e:any) => {
+    if (canGoBack) {
+      if (canGoBackOnclick) {
+        canGoBackOnclick(e);
+      }
+    }
+  };
+
+  return (
+    <div className={`${styles.modalHeader} ${extraClass}`}>
+      <div className={styles.modalHeaderWrapper}>
+        {!!canGoBack && (
+          <div onClick={goBackOnclickHandler} className={`${styles.caretLeft} ${styles.icon}`}>
+            <CaretLeft type="bold"/>
+          </div>
+        )}
+        <div className={`${styles.heading} modalHeading`}>
+          {!!title && (
+            <h4>{title}</h4>
+          )}
+        </div>
+        {!!canClose && (
+          <span className={`${styles.close} ${styles.icon}`}
+                onClick={closeOnclickHandler}>
+            <XIcon type="bold"/>
+          </span>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ModalHeader;