@hellobetterdigitalnz/selwynui 0.0.1-8 → 0.0.1-80

package/src/Components/Form/LandingPageForm/LandingPageFormRight.tsx

@@ -0,0 +1,49 @@
+import cx from 'classnames';
+import LandingPageFormRightProps from './LandingPageFormRightProps';
+import { ElementHolder } from '../../Shared';
+import styles from "./landingPageForm.module.scss";
+
+const LandingPageFormRight = (props: LandingPageFormRightProps) => {
+    const {
+        formTitle,
+        formText,
+        formImage,
+        extraClass,
+        children,
+        callToAction,
+        pillar,
+        level
+    } = props
+
+    const classes = [
+        "button",
+        "checkbox"
+    ]
+
+    if (extraClass) {
+        classes.push(extraClass)
+    }
+    return (
+        <div className={`${styles.landingPageFormRightWrapper} ${extraClass}`}>
+            <ElementHolder pillar={pillar} level={level}>
+                <img src={formImage} alt="" />
+                <div className={styles.landingPageFormRightContent}>
+                    <h1>{formTitle}</h1>
+                    <h2>{formText}</h2>
+                        {children}
+
+                        <div className={cx(
+                            extraClass,
+                            "button",
+                            "checkbox"
+                        )}>
+                            {callToAction}
+                        </div>
+                </div>
+            </ElementHolder>
+
+        </div>
+    )
+}
+
+export default LandingPageFormRight;

package/src/Components/Form/LandingPageForm/LandingPageFormRightProps.tsx

@@ -0,0 +1,14 @@
+import { ReactNode } from "react"
+
+interface LandingPageFormRightProps {
+    formImage?: string
+    formTitle?: string
+    formText?: string
+    children?: ReactNode
+    callToAction?: ReactNode
+    extraClass?: string
+    level?: 'primary' | 'secondary' | 'light'
+    pillar?: 'main' | 'live' | 'visit' | 'taste' | 'business' | 'participate'
+}
+
+export default LandingPageFormRightProps;

package/src/Components/Form/LandingPageForm/landingPageForm.module.scss

@@ -0,0 +1,190 @@
+.landingPageFormBlock {
+
+    .landingPageFormBlockWrapper {
+
+        .landingPageFormLeftWrapper {
+            width: 100%;
+
+            .landingPageFormLeftTop {
+                h1, h2, h3, h4, h5, h6 {
+                    margin-bottom: 0;
+                }
+
+                p {
+                    font-size: var(--font-size-h6);
+                }
+            }
+
+            .landingPageFormVideo {
+                margin: 32px 0;
+
+                img {
+                    width: 100%;
+                    object-fit: cover;
+                    display: block;
+                }
+            }
+
+            .landingPageFormLeftBottom {
+                .contentItemWrapper {
+                    ul {
+                        list-style: none;
+
+
+                        li {
+                            display: flex;
+                            margin: 30px 0px;
+                            align-items: center;
+
+                            .contentItemWrapperIcon {
+                                color: var(--pathway-card-text);
+
+                                svg {
+                                    width: 48px;
+                                    height: 48px;
+                                    
+                                }
+                            }
+
+                            .contentListWrapper {
+                                display: block;
+                                padding-left: 16px;
+
+                                h1 {
+                                    font-size: var(--font-size-h6);
+                                    font-weight: var(--font-weight-h6);
+                                    line-height: var(--line-height-label);
+                                    letter-spacing: var(--letter-spacing-body-regular);
+                                }
+
+                                h2 {
+                                    font-size: var(--font-size-h6);
+                                    font-weight: var(--font-weight-body-regular);
+                                    line-height: var(--line-height-label);
+                                    letter-spacing: var(--letter-spacing-body-regular);
+                                }
+                            }
+
+                        }
+                    }
+                }
+
+            }
+        }
+
+        .landingPageFormRightWrapper {
+            width: 100%;
+            border-radius: 2px 2px 96px 2px;
+            position: relative;
+            overflow: hidden;
+
+            img {
+                border-radius: 2px 2px 250px 2px;
+                object-fit: cover;
+                display: block;
+                width: 100%;
+            }
+
+            .landingPageFormRightContent {
+                padding: 32px;
+
+                h1 {
+                    font-size: var(--font-size-h4);
+                    font-weight: var(--font-weight-bold);
+                    line-height: var(--line-height-h4);
+                    letter-spacing: var(--letter-spacing-h4);
+                }
+
+                h2 {
+                    font-size: 28px;
+                    font-weight: var(--font-weight-body-regular);
+                    line-height: var(--line-height-h6);
+                    letter-spacing: var(--letter-spacing-h6);
+                    padding: 32px 0px 30px;
+                }
+
+                button {
+                    background-color: var( --color-text);
+                    color: var(--color-sand);
+                    margin-top: 65px;
+                }
+
+                checkbox {
+                    background-color: white;
+                }
+            }
+        }
+    }
+
+    @media screen and (min-width: 992px) {
+        .landingPageFormBlockWrapper {
+            display: flex;
+            flex-grow: 1;
+            margin: 0 -36px;
+
+            .landingPageFormLeftWrapper {
+                width: 45%;
+                margin: 0 36px;
+
+                .landingPageFormVideo {
+                    margin: 72px 0;
+                }
+
+                .landingPageFormLeftBottom {
+                    margin-top: 60px;
+
+                    .contentItemWrapper {
+                        ul {
+                            li {
+                                margin: 60px 0px;
+                            }
+                        }
+                    }
+                }
+            }
+
+            .landingPageFormRightWrapper {
+                width: 51%;
+                margin: 5px 36px;
+
+                .landingPageFormRightContent {
+                    padding: 66px 72px;
+
+                    h2 {
+                        padding: 62px 0px 60px;
+                    }
+
+                }
+            }
+        }
+    }
+}
+
+// :global {
+//     .customHeadingStyle {
+//         h4 {
+//             margin-bottom: 55px;
+//         }
+
+//         p {
+//             letter-spacing: var(--letter-spacing-body-regular);
+//             line-height: 1.3;
+//             margin-bottom: 66px;
+//         }
+
+//         h5 {
+//             font-size: 28px;
+//             margin-top: 67px;
+//             margin-bottom: 19px;
+//             line-height: var(--line-height-h6);
+//             letter-spacing: var(--letter-spacing-h5);
+//         }
+
+//         h6 {
+//             font-size: var(--font-size-h6);
+//             font-weight: var(--font-weight-body-regular);
+//             letter-spacing: var(--letter-spacing-h6);
+//             line-height: 1.3;
+//         }
+//     }
+// }

package/src/Components/Form/LoadingInput/LoadingInput.tsx

@@ -0,0 +1,12 @@
+
+
+import Skeleton from "react-loading-skeleton";
+import styles from "./loadingInput.module.scss";
+
+const LoadingInput = () =>{
+  return <div className={styles.loadingInput}>
+    <Skeleton className={styles.skeleton} width={`100%`} height={'100%'}/>
+  </div>
+}
+
+export default LoadingInput;

package/src/Components/Form/LoadingInput/loadingInput.module.scss

@@ -0,0 +1,15 @@
+.loadingInput{
+  display: flex;
+  width: 100%;
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  z-index: 10;
+
+  .skeleton{
+    position: absolute;
+  }
+
+}

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

@@ -0,0 +1,28 @@
+import React from "react";
+import { Meta, StoryObj } from "@storybook/react-vite";
+import MicroForm from "./MicroForm"
+import ArrowRight from "../../Icons/Arrows/ArrowRight/ArrowRight";
+import MagnifyingGlass from "../../Icons/SystemAndDevice/MagnifyingGlass/MagnifyingGlass";
+
+const meta: Meta = {
+  title: "Form / MicroForm",
+  component: MicroForm,
+  tags: ["autodocs"]
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>
+
+const MicroFormTemplate: Story = {
+  render: () => {
+    return (
+        <MicroForm pillar={"visit"} level={"primary"} type={'text'} placeHolder={'email@example.com'} buttonIcon={<ArrowRight type="regular"/>}/>
+        // <MicroForm pillar={"live"} level={"primary"} type={'search'} placeHolder={'Search...'} buttonIcon={<MagnifyingGlass type="regular"/>}/>
+    );
+  }
+}
+
+export const MicroFormComponent = {
+  ...MicroFormTemplate
+}

package/src/Components/Form/MicroForm/MicroForm.tsx

@@ -0,0 +1,22 @@
+import MicroFormProps from "./MicroFormProps";
+import styles from "./microForm.module.scss";
+
+const MicroForm = (props: MicroFormProps) => {
+  const {
+    type,
+    placeHolder,
+    buttonIcon,
+    pillar,
+    level,
+    extraClass
+  } = props;
+
+  return (
+    <div className={`${styles.microFormWrapper} ${pillar} ${level} ${extraClass}`}>
+      <input className={styles.microFormInput} type={type} placeholder={placeHolder} />
+      <button>{buttonIcon}</button>
+    </div>
+  )
+}
+
+export default MicroForm;

package/src/Components/Form/MicroForm/MicroFormProps.tsx

@@ -0,0 +1,12 @@
+import { ReactNode } from "react";
+
+interface MicroFormProps {
+  type?: 'text' | 'search'
+  placeHolder?: string
+  buttonIcon?: ReactNode
+  level?: 'primary' | 'secondary' | 'light'
+  pillar?: 'main' | 'live' | 'visit' | 'taste' | 'business' | 'participate'
+  extraClass?: ReactNode
+}
+
+export default MicroFormProps;

package/src/Components/Form/MicroForm/microForm.module.scss

@@ -0,0 +1,64 @@
+.microFormWrapper {
+  position: relative;
+  width: 100%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--color-bg);
+  height: 64px;
+  padding: 8px 8px 8px 20px;
+  border-radius: 12px;
+  font-family: var(--font);
+  outline: 6px solid transparent;
+
+  .microFormInput {
+    outline: none;
+    border: none;
+    box-shadow: none;
+    font-size: var(--font-size-micro-form);
+    font-weight: var(--font-weight-micro-form);
+    line-height: var(--line-height-micro-form);
+    letter-spacing: var(--letter-spacing-micro-form);
+    font-family: var(--font);
+    background-color: var(--color-bg);
+    width: 100%;
+
+    &::placeholder {
+      color: white;
+      opacity: 0.5;
+      font-size: var(--font-size-micro-form);
+      font-weight: var(--font-weight-micro-form);
+      line-height: var(--line-height-micro-form);
+      letter-spacing: var(--letter-spacing-micro-form);
+      font-family: var(--font);
+    }
+  }
+
+  .microFormInput:focus {
+    outline: none;
+    box-shadow: none;
+    color: white;
+  }
+
+  button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--color-text);
+    cursor: pointer;
+    padding: 12px;
+    border-radius: 8px;
+    width: 48px;
+    height: 48px;
+    border: none;
+    margin-left: 25px;
+
+    svg {
+      color: var(--color-visit);
+    }
+  }
+}
+
+.microFormWrapper:focus-within {
+  outline: 8px solid color-mix(in srgb, var(--color-text) 50%, transparent)
+}

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

@@ -0,0 +1,39 @@
+import React from "react";
+import type { Meta, StoryObj } from '@storybook/react';
+import MultiSelectField from "./MultiSelectField";
+import { useState } from "react";
+import { SelectOption } from "./MultiSelectFieldProps";
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta: Meta = {
+  title: 'Form / MultiSelect Field',
+  component: MultiSelectField,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+export default meta;
+
+type Story = StoryObj<typeof MultiSelectField>;
+
+const MultiSelectTemplate: Story = {
+  render: ({ options }) => {
+    const [value, setValue] = useState<SelectOption[]>([]);
+
+    return (
+      <MultiSelectField value={value} options={options} onChange={(selectedOptions) => setValue(selectedOptions)} />
+    );
+  }
+};
+
+export const Props: Story = {
+  ...MultiSelectTemplate,
+  args: {
+    options : [
+      { label: 'Option 1', value: 'option1' },
+      { label: 'Option 2', value: 'option2' },
+      { label: 'Option 3', value: 'option3' },
+    ],
+  },
+};