@hellobetterdigitalnz/selwynui 0.0.1-7 → 0.0.1-71

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

@@ -0,0 +1,51 @@
+import LandingPageFormLeftProps from "./LandingPageFormLeftProps";
+import styles from "./landingPageForm.module.scss";
+
+const LandingPageFormLeft = (props: LandingPageFormLeftProps) => {
+    const {
+        children,
+        callToActions,
+        extraClass
+    } = props;
+
+    return (
+        <div className={`${styles.landingPageFormLeftWrapper} ${extraClass}`}>
+            <div className={`${styles.landingPageFormLeftTop} typography`}>
+                {children}
+            </div>
+
+            <div className={styles.landingPageFormLeftBottom}>
+
+                {callToActions && callToActions.length > 0 && (
+                    <div className={styles.contentItemWrapper}>
+                        <ul>
+                            {
+                                callToActions?.map((callToAction, index) => (
+                                    <li key={index}>
+                                        <div className={styles.contentItemWrapperIcon}>
+                                            {callToAction.icon}
+                                        </div>
+
+                                        <div className={styles.contentListWrapper}>
+                                            <h1>
+                                                {callToAction.title}
+                                            </h1>
+
+                                            <h2>
+                                                {callToAction.text}
+                                            </h2>
+                                        </div>
+                                    </li>
+                                ))
+                            }
+                        </ul>
+                    </div>
+                )}
+            </div>
+
+
+        </div>
+    )
+}
+
+export default LandingPageFormLeft

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

@@ -0,0 +1,13 @@
+import { ReactNode } from "react"
+export interface LandingFormContentItem {
+    title?: string
+    text?: string
+    icon?: ReactNode
+}
+interface LandingPageFormLeftProps {
+    children?: ReactNode
+    callToActions?: LandingFormContentItem[];
+    extraClass?: string;
+}
+
+export default LandingPageFormLeftProps

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

@@ -0,0 +1,9 @@
+import { ReactNode } from "react";
+
+interface LandingPageFormProps {
+    landingPageFormLeft?: ReactNode
+    landingPageFormRight?: ReactNode
+    extraClass?: ReactNode
+}
+
+export default LandingPageFormProps;

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/RadioButtons/RadioButton.tsx

@@ -0,0 +1,83 @@
+import cx from "classnames";
+import RadioButtonProps from "./RadioButtonProps";
+import styles from "./radiobutton.module.scss";
+
+const RadioButton = (props: RadioButtonProps) => {
+  const {
+    label,
+    name,
+    checked,
+    id,
+    value,
+    placeholder,
+    extraClass,
+    disabled,
+    error,
+    ariaLabel,
+    required,
+    readonly,
+    displaytype,
+    onChange,
+    ...args
+  } = props;
+
+  const classes = ["radio", styles.radio];
+  const classesHolders = [
+    "radioHolder",
+    styles.radioHolder,
+    `${displaytype === "box" && styles.radioBtnBox}`,
+  ];
+  
+
+  if (extraClass) {
+    classes.push(extraClass);
+  }
+
+  if (disabled) {
+    classesHolders.push(styles.disabled);
+  }
+
+  if (error) {
+    classes.push(styles.error);
+    classesHolders.push(styles.error);
+  }
+
+  const handleChange = (e: any) => {
+    if (!readonly && !disabled) {
+      if (onChange) {
+        onChange(e, e.target.checked);
+      }
+    }
+  };
+
+  return (
+    <div className={styles.radioButtonWrap}>
+      <label className={cx(classesHolders)} onChange={handleChange}>
+        <div className={cx(classes)} >
+          <input
+            id={id}
+            name={name}
+            checked={checked} 
+            type={"radio"}
+            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"}
+            {...args}
+          />
+          <div className={styles.circle}></div>
+        </div>
+        {!!label && <label htmlFor={id}>{label}</label>}
+      </label>
+    </div>
+  );
+};
+
+
+export default RadioButton;

package/src/Components/Form/RadioButtons/RadioButtonProps.tsx

@@ -0,0 +1,24 @@
+import { FocusEvent, MouseEvent } from "react";
+
+interface RadioButtonProps {
+  label?:string | React.ReactNode;
+  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;
+  onChange?: (e: MouseEvent, checked?: boolean) => void;
+  onFocus?: (e: FocusEvent) => void;
+  onBlur?: (e: FocusEvent) => void;
+  displaytype?: 'default' | 'box'
+}
+
+export default RadioButtonProps;

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

@@ -0,0 +1,129 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import RadioButtons from "./RadioButtons";
+import RadioButton from "./RadioButton";
+import React from 'react';
+
+import "./radioButton.stories.scss";
+
+const meta: Meta = {
+  title: "Form / Radio Button",
+  component: RadioButton,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"]
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const RadioButtoTemplate: Story = {
+  render: ({ items, ...args }) => {
+    return (
+      <div className={'visit'}>
+        <RadioButtons {...args}>
+          {items.map((item: any) => (
+            <RadioButton label={item.label} name={item.name} id={item.id}  />
+          ))}
+        </RadioButtons>
+      </div>
+    );
+  }
+};
+
+const RadioButtonBoxTemplate: Story = {
+  render: ({ items, ...args }) => {
+    return (
+      <RadioButtons {...args}>
+        {items.map((item: any) => (
+          <RadioButton label={item.label} name={item.name} id={item.id}  displaytype={item.displayType} />
+        ))}
+      </RadioButtons>
+    );
+  }
+};
+
+export const Default = {
+  ...RadioButtoTemplate,
+  args: {
+    columns: true,
+    items: [
+      {
+        id: "r-1",
+        name: "check-one",
+        disabled: true,
+        label: "Radio"
+      },
+      {
+        id: "r-2",
+        name: "check-one",
+        disabled: true,
+        label: "Radio"
+      },
+      {
+        id: "r-3",
+        name: "check-one",
+        disabled: true,
+        label: "Radio"
+      },
+      {
+        id: "r-4",
+        name: "check-one",
+        disabled: true,
+        label: "Radio"
+      },
+      {
+        id: "r-5",
+        name: "check-one",
+        disabled: true,
+        label: "Radio"
+      },
+      {
+        id: "r-6",
+        name: "check-one",
+        disabled: true,
+        label: "Radio"
+      }
+    ]
+  }
+};
+
+export const RadioButtonBox = {
+  ...RadioButtonBoxTemplate,
+  args: {
+    columns: false,
+    
+    items: [
+      {
+        id: "r-1",
+        name: "check-one",
+        disabled: true,
+        label: "Radio",
+        displayType: "box"
+      },
+      {
+        id: "r-2",
+        name: "check-one",
+        disabled: true,
+        label: "Radio",
+        displayType: "box"
+      },
+      {
+        id: "r-3",
+        name: "check-one",
+        disabled: true,
+        label: "Radio",
+        displayType: "box"
+      },
+      {
+        id: "r-4",
+        name: "check-one",
+        disabled: true,
+        label: "Radio",
+        displayType: "box"
+      }
+    ]
+  }
+};
+

package/src/Components/Form/RadioButtons/RadioButtons.tsx

@@ -0,0 +1,18 @@
+import RadioButtonsProps from "./RadioButtonsProps";
+import styles from "./radiobutton.module.scss";
+
+const RadioButtons = (props: RadioButtonsProps) => {
+  const { children, columns, extraClass } = props;
+
+  return (
+    <div
+      className={`${styles.radioSet} ${extraClass} ${
+        columns ? styles.container : ""
+      }`}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default RadioButtons;

package/src/Components/Form/RadioButtons/RadioButtonsProps.tsx

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+
+interface RadioButtonsProps {
+  children: ReactNode;
+  error?: boolean;
+  columns?: boolean;
+  extraClass?: string;
+}
+
+export default RadioButtonsProps;

package/src/Components/Form/RadioButtons/radioButton.stories.scss

@@ -0,0 +1,3 @@
+.spacing {
+  padding: 4px;
+}