@hellobetterdigitalnz/selwynui 0.0.1-37 → 0.0.1-39

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

@@ -4,6 +4,7 @@
     padding: 32px;
     border-radius: 8px;
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    position: relative;
 
     &::before {
         content: '';
@@ -16,27 +17,51 @@
         transform: translateX(-50%);
         z-index: 1;
         pointer-events: none;
-    }
 
-    /* Optional: Hide divider on mobile when layout becomes stacked */
-    @media (max-width: 900px) {
-        &::before {
+        @media (max-width: 900px) {
             display: none;
         }
     }
+
+    @media (max-width: 900px) {
+        flex-direction: column-reverse;
+        padding: 24px 16px;
+        gap: 48px;
+    }
 }
 
 .mainContent {
     width: 50%;
-    padding-left: 152px;
     padding-right: 72px;
 
+    @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 72px 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 {
@@ -44,12 +69,32 @@
         line-height: 1.3;
         font-weight: 400;
         margin-bottom: 72px;
+
+        @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: 72px 0 32px 0;
+
+        @media (max-width: 900px) {
+            font-size: 20px;
+            margin: 48px 0 24px 0;
+        }
+
+        @media (max-width: 480px) {
+            font-size: 18px;
+            margin: 32px 0 20px 0;
+        }
     }
 }
 
@@ -60,6 +105,11 @@
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 12px 24px;
+
+    @media (max-width: 600px) {
+        grid-template-columns: 1fr;
+        gap: 16px;
+    }
 }
 
 .facilityItem {
@@ -70,19 +120,45 @@
     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: 72px;
+    gap: 60px;
     padding-left: 72px;
+
+    @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 {
@@ -90,36 +166,75 @@
     gap: 16px;
     align-items: flex-start;
 
+    @media (max-width: 900px) {
+        gap: 12px;
+    }
+
     svg {
         color: var(--color-taste);
         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: 16px;
-}
+    margin-top: 0;
+    letter-spacing: -0.48px;
+
+    @media (max-width: 900px) {
+        font-size: 18px;
+    }
 
+    @media (max-width: 480px) {
+        font-size: 16px;
+    }
+}
 
+.infoValuePhone {
+    font-size: 24px;
+    text-decoration: underline;
+    line-height: 1.3;
+    font-weight: 400;
+    margin-top: 0;
 
-// Responsive
-@media (max-width: 900px) {
-    .listingDetail {
-        grid-template-columns: 1fr;
+    @media (max-width: 900px) {
+        font-size: 18px;
     }
-    .sidebar {
-        order: -1;
+
+    @media (max-width: 480px) {
+        font-size: 16px;
     }
 }

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

@@ -27,14 +27,20 @@ const PathwayBlockTemplate: Story = {
           pillar="visit"
           cards={[
             {
+              title: "Lorem ipsum",
+              date: "2024-01-15",
               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",
+              date: "2024-01-16",
               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",
+              date: "2024-01-17",
               description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
               image: "https://images.pexels.com/photos/3184291/pexels-photo-3184291.jpeg"
             }

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

@@ -20,8 +20,11 @@ const PathwayBlock = (props: PathwayBlockProps) => {
               <div className={styles.card}>
                 <DetailsCard
                   key={index}
-                  title={card.description}
+                  title={card.title}
+                  description={card.description}
                   image={card.image}
+                  link={card.link}
+                  variation={'long'}
                 />
               </div>
             ))}

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

@@ -1,7 +1,16 @@
 export interface PathwayCard {
+  title: string;
   date: string;
   description: string;
   image: string;
+  link?: {
+    title?: string
+    href?: string
+    target?: "_blank" | "_self" | "_parent" | "_top"
+    rel?: string
+  } | undefined;
+  category?: "all" | "adventure" | "ski" | "nature" ;
+  variation: 'long' | 'short';
 }
 
 interface PathwayBlockProps {

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

@@ -21,7 +21,7 @@ const TestimonyCardTemplate: Story = {
   render: () => {
     return (
       <>
-        <ElementHolder paddingTop="sm" paddingBottom="sm" pillar="visit" level="light">
+        <ElementHolder paddingTop="sm" paddingBottom="sm" pillar="visit" level="primary">
         <TestimonyCard
           testimonies={[
             {
@@ -30,6 +30,7 @@ const TestimonyCardTemplate: Story = {
               author: '— Liam & Emma'
             },
             {
+              image:"https://images.pexels.com/photos/1906658/pexels-photo-1906658.jpeg",
               testimony: 'The sense of community here is incredible.',
               author: '— Sarah & James'
             }

package/src/Components/DataDisplay/TestimonyCard/TestimonyCard.tsx

@@ -36,7 +36,7 @@ const TestimonyCard = (props: TestimonyCardProps) => {
               <svg xmlns="http://www.w3.org/2000/svg" width="56" height="39" viewBox="0 0 56 39" fill="none">
                 <path d="M23.1134 27.0562C23.1134 32.4847 18.9331 36 13.4798 36C8.02648 36 4.75277 33.6194 3.3652 27.0562C1.97764 20.493 7.78599 17.227 13.2393 17.227C18.6926 17.227 23.1134 21.6276 23.1134 27.0562Z" fill="#92C134"/>
                 <path d="M53.0015 27.0558C53.0015 32.4844 48.8212 35.9997 43.3679 35.9997C37.9145 35.9997 34.6408 33.619 33.2533 27.0558C31.8657 20.4926 37.674 17.2267 43.1274 17.2267C48.5807 17.2267 53.0015 21.6273 53.0015 27.0558Z" fill="#92C134"/>
-                <path d="M3.3652 27.0562C4.75277 33.6194 8.02648 36 13.4798 36C18.9331 36 23.1134 32.4847 23.1134 27.0562C23.1134 21.6276 18.6926 17.227 13.2393 17.227C7.78599 17.227 1.97764 20.493 3.3652 27.0562ZM3.3652 27.0562C1.97764 20.493 4.78431 13.7613 7.99019 9.54638C11.1961 5.33146 17.2399 2.24873 21.5318 3.16115M33.2533 27.0558C34.6408 33.619 37.9145 35.9997 43.3679 35.9997C48.8212 35.9997 53.0015 32.4844 53.0015 27.0558C53.0015 21.6273 48.5807 17.2267 43.1274 17.2267C37.674 17.2267 31.8657 20.4926 33.2533 27.0558ZM33.2533 27.0558C31.8657 20.4926 34.6724 13.761 37.8782 9.54606C41.0841 5.33115 47.1279 2.24841 51.4199 3.16083" stroke="#92C134" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M3.3652 27.0562C4.75277 33.6194 8.02648 36 13.4798 36C18.9331 36 23.1134 32.4847 23.1134 27.0562C23.1134 21.6276 18.6926 17.227 13.2393 17.227C7.78599 17.227 1.97764 20.493 3.3652 27.0562ZM3.3652 27.0562C1.97764 20.493 4.78431 13.7613 7.99019 9.54638C11.1961 5.33146 17.2399 2.24873 21.5318 3.16115M33.2533 27.0558C34.6408 33.619 37.9145 35.9997 43.3679 35.9997C48.8212 35.9997 53.0015 32.4844 53.0015 27.0558C53.0015 21.6273 48.5807 17.2267 43.1274 17.2267C37.674 17.2267 31.8657 20.4926 33.2533 27.0558ZM33.2533 27.0558C31.8657 20.4926 34.6724 13.761 37.8782 9.54606C41.0841 5.33115 47.1279 2.24841 51.4199 3.16083" stroke="#92C134" strokeWidth="6" strokeLinecap="round" strokeLinejoin="round"/>
               </svg>
             </div>
             <h6>{testimonies[currentIndex].testimony}</h6>

package/src/Components/DataDisplay/TestimonyCard/testimonyCard.module.scss

@@ -19,13 +19,11 @@
 
 .testimonyCardLeft {
   flex-shrink: 0;
-  padding-top: 96px;
-  padding-bottom: 96px;
 
   @media (max-width: 834px) {
     padding-top: 0;
     padding-bottom: 0;
-    width: 100%;
+    width: calc(100% + 32px);
     display: flex;
     justify-content: center;
   }

package/src/Components/Form/Checkbox/Checkbox.stories.tsx

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Checkbox from "./Checkbox";
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: 'Form / Checkbox',
+  component: Checkbox,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Checkbox>;
+
+export default meta;
+type Story = StoryObj<typeof Checkbox>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Default: Story = {
+  args: {
+    checked: false,
+    label:'checkbox',
+    id:'ch_1'
+  },
+};
+
+export const Checked: Story = {
+  args: {
+    checked: true
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    checked: true,
+    disabled: true
+  },
+};
+
+export const CheckedDisabled: Story = {
+  args: {
+    checked: true,
+    disabled: true
+  },
+};
+
+export const Error: Story = {
+  args: {
+    checked: true,
+    error: true
+  },
+};

package/src/Components/Form/Checkbox/Checkbox.tsx

@@ -0,0 +1,111 @@
+import cx from "classnames";
+import CheckboxProps from "./CheckboxProps";
+import styles from "./checkbox.module.scss";
+import {useEffect, useState, MouseEvent} from "react";
+
+const Checkbox = (props: CheckboxProps) => {
+  const {
+    label,
+    name,
+    checked,
+    id,
+    value,
+    placeholder,
+    extraClass,
+    disabled,
+    error,
+    ariaLabel,
+    required,
+    readonly,
+    onClick,
+    onChange,
+    ...args
+  } = props;
+
+  const [isChecked, setIsChecked] = useState(false);
+
+  const classesHolders = ["checkboxHolder", styles.checkboxHolder];
+  const classes = ["checkbox", styles.checkbox];
+
+
+  if (extraClass) {
+    classesHolders.push(extraClass);
+  }
+  if (error) {
+    classesHolders.push(styles.error);
+    classes.push(styles.error);
+  }
+
+  if (disabled) {
+    classesHolders.push(styles.disabled);
+  }
+
+
+  useEffect(() => {
+    setIsChecked(checked ? checked : false);
+  }, [checked]);
+
+  const handleClick = (e: MouseEvent) => {
+    setIsChecked(!isChecked);
+    if ( onClick) {
+      onClick(e, isChecked);
+    }
+  };
+
+  const onChangeHandler = (e:any) => {
+    if (onChange) {
+      onChange(e);
+    }
+  };
+
+  return (
+    <div className={cx(classesHolders)}>
+    <div className={cx(classes)}>
+      <input
+        id={id}
+        name={name}
+        checked={isChecked}
+        type={"checkbox"}
+        value={value}
+        placeholder={placeholder}
+        disabled={disabled}
+        readOnly={readonly}
+        required={required}
+        aria-label={ariaLabel ? ariaLabel : name}
+        aria-required={required ? "true" : "false"}
+        aria-invalid={error ? "true" : "false"}
+        aria-disabled={disabled ? "true" : "false"}
+        aria-readonly={readonly ? "true" : "false"}
+        onClick={handleClick}
+        onChange={onChangeHandler}
+        {...args}
+      />
+      {!!isChecked && (
+        <svg
+          width="11"
+          height="10"
+          viewBox="0 0 11 10"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M10.8425 2.10473C11.0378 2.29999 11.0378 2.61658 10.8425 2.81184L4.47856 9.1758C4.2833 9.37106 3.96672 9.37106 3.77146 9.1758L0.353775 5.75812C0.158513 5.56286 0.158513 5.24627 0.353775 5.05101L1.41443 3.99035C1.6097 3.79509 1.92628 3.79509 2.12154 3.99035L4.12501 5.99382L9.07476 1.04407C9.27002 0.84881 9.5866 0.84881 9.78187 1.04407L10.8425 2.10473Z"
+            fillRule="evenodd"
+            clipRule="evenodd"
+            fill="currentColor"
+          />
+        </svg>
+      )}
+    </div>
+      {!!label && (
+        <label
+          htmlFor={id}
+        >
+          {label}
+        </label>
+      )}
+    </div>
+  );
+};
+
+export default Checkbox;

package/src/Components/Form/Checkbox/CheckboxProps.tsx

@@ -0,0 +1,24 @@
+import {ChangeEvent, FocusEvent, MouseEvent} from "react";
+
+interface CheckboxProps {
+  label?:string;
+  name?: string;
+  id?: string;
+  value?: string;
+  extraClass?: string;
+  placeholder?: string;
+  error?: boolean;
+  disabled?:boolean;
+  readonly?: boolean;
+  checked?: boolean;
+  required?: boolean;
+  ariaLabel?: string;
+  ariaLabeledby?: string;
+  ariaDescribedby?: string;
+  onClick?: (e: MouseEvent, checked?: boolean) => void;
+  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+  onFocus?: (e: FocusEvent) => void;
+  onBlur?: (e: FocusEvent) => void;
+}
+
+export default CheckboxProps;

package/src/Components/Form/Checkbox/checkbox.module.scss

@@ -0,0 +1,105 @@
+.checkboxHolder {
+  display: inline-flex;
+  align-items: center;
+
+  label {
+    cursor: pointer;
+    font-size: var(--font-size-label);
+    line-height: var(--line-height-h3);
+    font-weight: var(--font-weight-h3);
+    margin-left: calc(var(--space-unit) * 3);
+  }
+
+  &.error {
+    label {
+      color: var(--color-error);
+    }
+  }
+
+  &.disabled {
+    label {
+      cursor: not-allowed;
+      color: var(--color-gray-200);
+    }
+  }
+
+}
+
+[dir="rtl"] {
+  .checkboxHolder {
+    label {
+      margin-right: calc(var(--space-unit) * 3);
+      margin-left: 0px;
+    }
+  }
+}
+
+.checkbox {
+  position: relative;
+  display: inline-flex;
+  justify-content: center;
+  flex-shrink: 0;
+  flex-grow: 0;
+
+  input[type="checkbox"] {
+    -webkit-appearance: none;
+    width: 20px;
+    height: 20px;
+    border-radius: 4px;
+    background-color: var(--color-white);
+    border: 1px solid var(--color-visit);
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+    cursor: pointer;
+
+    &:checked {
+      background-color: var(--color-gray-800);
+      border-color: var(--color-visit);
+    }
+
+    &:hover {
+      border-color: var(--color-visit);
+    }
+
+    &:focus {
+      outline: 2px solid var(--color-visit);
+    }
+
+    &:disabled {
+      background-color: var(--color-gray-200);
+      border-color: var(--color-gray-200);
+
+
+      &:hover {
+        border-color: var(--color-gray-200);
+      }
+
+      &:checked {
+        border-color: var(--color-gray-200);
+      }
+    }
+  }
+
+  svg {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    pointer-events: none;
+  }
+
+  input[type="checkbox"] ~ svg {
+    color: var(--color-white);
+  }
+
+  &.error {
+    input[type="checkbox"] {
+      border-color: var(--color-error);
+      color: var(--color-white);
+
+      &:checked {
+        background-color: var(--color-error);
+      }
+    }
+  }
+}

package/src/Components/Form/EmailField/EmailField.stories.ts

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import EmailField from './EmailField.tsx';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: 'Form / EmailField',
+  component: EmailField,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof EmailField>;
+
+export default meta;
+type Story = StoryObj<typeof EmailField>;
+
+export const Example: Story = {
+  args: {
+    placeholder:"Placeholder",
+  },
+};
+