@hellobetterdigitalnz/selwynui 0.0.1-7 → 0.0.1-71

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: 12px;
+  }
+
+  &.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: white;
+    border: 1px solid var(--form-field-border);
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+    cursor: pointer;
+
+    &:checked {
+      background-color: var(--color-gray-800);
+      border-color: var(--color-text);
+    }
+
+    &:hover {
+      border-color: var(--color-text);
+    }
+
+    &:focus {
+      outline: 2px solid var(--color-text);
+    }
+
+    &: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",
+  },
+};
+

package/src/Components/Form/EmailField/EmailField.tsx

@@ -0,0 +1,56 @@
+import cx from 'classnames';
+import styles from '../inputs.module.scss' ;
+import InputProps from "../InputProps";
+import LoadingInput from "../LoadingInput/LoadingInput.tsx";
+
+const EmailField = (props: InputProps) => {
+  const {
+    name,
+    id,
+    value,
+    placeholder,
+    extraClass,
+    disabled,
+    error,
+    ariaLabel,
+    required,
+    readonly,
+    autoComplete,
+    loading,
+    ...args
+  } = props;
+
+  const classes = [styles.input];
+  if (error) {
+    classes.push(styles.error);
+  }
+  if (extraClass) {
+    classes.push(extraClass);
+  }
+
+  return <div className={styles.field}>
+    {loading && <LoadingInput />}
+    <input
+      className={cx(classes)}
+      id={id}
+      name={name}
+      type='email'
+      value={value}
+      placeholder={placeholder}
+      disabled={disabled}
+      readOnly={readonly}
+      required={required}
+      autoComplete={autoComplete ? "on" : "off"}
+      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"}
+      aria-autocomplete={autoComplete ? "list" : "none"}
+      {...args}
+    />
+  </div>
+};
+
+
+export default EmailField;

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

@@ -0,0 +1,31 @@
+import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
+import FormFieldHolder from "./FormFieldHolder";
+import TextField from "../TextField/TextField";
+
+const meta: Meta = {
+  title: "Form / FormFieldHolder",
+  component: FormFieldHolder,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const FormFieldHolderTemplate: Story = {
+  render: () => {
+    return (
+      <FormFieldHolder optional={true} label="Name" description={"helper text"} labelClass="labelColor">
+        <TextField  placeholder="Placeholder" />
+      </FormFieldHolder>
+    );
+  },
+};
+
+export const FormFieldHolderComponent = {
+  ...FormFieldHolderTemplate,
+};

package/src/Components/Form/FormFieldHolder/FormFieldHolder.tsx

@@ -0,0 +1,57 @@
+import WarningCircle from "../../Icons/SecurityAndWarnings/WarningCircle/WarningCircle";
+import FormFieldHolderProps from "./FormFieldHolderProps";
+import styles from "./formHolder.module.scss";
+
+const FormFieldHolder = (props: FormFieldHolderProps) => {
+  const {
+    icon,
+    label,
+    bilingualLabel,
+    description,
+    extraClass = "",
+    children,
+    error,
+    require,
+    optional
+  } = props;
+
+  return (
+    <div
+      className={`field-holder ${extraClass} ${styles.holder} ${error ? styles.holderError : ""
+        }`}
+    >
+      {!!label && (
+        <div className={`${styles.label}`}>
+          {!!icon && (
+            <div className={styles.iconAction}>
+              {icon}
+            </div>
+          )}
+          <label>
+            {label} {bilingualLabel && <span>- {bilingualLabel}</span>} {require && <span>*</span>} {optional && <span>Optional</span>}
+          </label>
+        </div>
+      )}
+
+      <div className={styles.field}>{children}</div>
+
+      {!!description && (
+        <div className={styles.description}>
+          <>
+            {error && (
+              <div className={styles.helperIcon}>
+                <WarningCircle />
+              </div>
+            )}
+          </>
+          <>
+            {typeof description === "string" && <p>{description}</p>}
+            {typeof description !== "string" && <>{description}</>}
+          </>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default FormFieldHolder;

package/src/Components/Form/FormFieldHolder/FormFieldHolderProps.tsx

@@ -0,0 +1,16 @@
+import { ReactNode } from "react";
+
+interface FormFieldHolderProps {
+  label?: string | any;
+  labelClass?: string;
+  bilingualLabel?: string;
+  description?: string | ReactNode;
+  extraClass?: string;
+  error?: boolean;
+  children: ReactNode;
+  icon?: ReactNode;
+  require?:boolean;
+  optional?:boolean;
+}
+
+export default FormFieldHolderProps;

package/src/Components/Form/FormFieldHolder/formHolder.module.scss

@@ -0,0 +1,71 @@
+.holder {
+  margin-bottom: 40px;
+  width: 100%;
+}
+
+.iconAction {
+  display: flex;
+  align-items: center;
+  margin-right: calc(var(--space-unit) * 2);
+}
+
+.holderError {
+  label {
+    color: var(--color-visit);
+  }
+}
+
+.label {
+  display: flex; 
+  flex-direction: column;
+  align-items: flex-start;
+
+  label {
+    font-size: var(--font-size-label);
+    line-height: var(--line-height-body-regular);
+    font-weight: var(--font-weight-bold);
+    // margin-bottom: calc(4 * var(--space-unit));
+    margin-bottom: 12px;
+
+
+    span {
+      font-size: var(--font-size-optional-label);
+      color: var(--color-gray-600);
+      line-height: var(--line-height-optional-label);
+      font-weight: var(--font-weight-optional-label);
+    }
+
+  }
+}
+
+
+.description {
+  display: flex;
+  align-items: center;
+  font-size: var(--font-size-body-sm);
+  line-height: var(--line-height-body-sm);
+  font-weight: var(--font-weight-body-sm);
+  padding-top: calc(var(--space-unit) * 2);
+  color: var(--color-description);
+
+  p {
+    font-size: var(--font-size-body-sm);
+    line-height: var(--line-height-body-sm);
+    font-weight: var(--font-weight-body-sm);
+  }
+
+  .helperIcon {
+    margin-right: var(--space-unit);
+    display: flex;
+    align-items: center;
+
+    svg {
+      width: 16px;
+      height: 16px;
+    }
+  }
+
+  .holderError & {
+    color: var(--color-error);
+  }
+}

package/src/Components/Form/InputProps.tsx

@@ -0,0 +1,30 @@
+import {FocusEvent, ChangeEvent, MouseEvent, KeyboardEvent} from "react";
+
+interface InputProps {
+  name?: string;
+  id?: string;
+  value?: string | number | bigint | any;
+  extraClass?: string;
+  placeholder?: string;
+  error?: boolean;
+  disabled?:boolean;
+  readonly?: boolean;
+  autoComplete?: boolean;
+  required?: boolean;
+  ariaLabel?: string;
+  min?: string,
+  max?: string,
+  minLength?: number;
+  maxLength?: number;
+  ariaLabeledby?: string;
+  ariaDescribedby?: string;
+  onClick?: (e: MouseEvent) => void;
+  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+  onFocus?: (e: FocusEvent) => void;
+  onBlur?: (e: FocusEvent) => void;
+  onKeyDown?:(e: KeyboardEvent<HTMLInputElement>) => void;
+  loading?:boolean;
+  
+}
+
+export default InputProps;

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

@@ -0,0 +1,110 @@
+import React from "react";
+import { Meta, StoryObj } from "@storybook/react-vite";
+import LandingPageForm from "./LandingPageForm";
+import LandingPageFormLeft from "./LandingPageFormLeft";
+import LandingPageFormRight from "./LandingPageFormRight";
+import { ElementHolder } from "../../Shared";
+import FormFieldHolder from "../FormFieldHolder/FormFieldHolder";
+import TextField from "../TextField/TextField";
+import EmailField from "../EmailField/EmailField";
+import Textarea from "../Textarea/Textarea";
+import Checkbox from "../Checkbox/Checkbox";
+import Button from "../Button/Button";
+import ArrowRight from "../../Icons/Arrows/ArrowRight/ArrowRight";
+import Path from "../../Icons/MapAndTravel/Path/Path";
+import Mountains from "../../Icons/WeatherAndNature/Mountains/Mountains"
+import Clock from "../../Icons/Time/Clock/Clock"
+import Media from "../../DataDisplay/Media/Media"
+
+const meta: Meta = {
+    title: "Form / LandingPageForm",
+    component: LandingPageForm,
+    parameters: {
+        layout: 'fullscreen'
+    },
+    tags: ["autodocs"]
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>
+
+const LandingPageFormTemplate: Story = {
+    render: () => {
+        return (
+            <ElementHolder paddingTop="md" paddingBottom="md" pillar="visit" level="light">
+                <LandingPageForm landingPageFormLeft={
+                    <LandingPageFormLeft
+                        extraClass={"customHeadingStyle"}
+                        callToActions={[
+                            {
+                                title: "Lorem ipsum dolor sit",
+                                text: "Lorem ipsum dolor sit amet, consectetur adipiscing.",
+                                icon: <Path type="fill" />
+                            },
+                            {
+                                title: "Lorem ipsum dolor sit",
+                                text: "Lorem ipsum dolor sit amet, consectetur adipiscing.",
+                                icon: <Mountains type="fill" />
+                            },
+                            {
+                                title: "Lorem ipsum dolor sit",
+                                text: "Lorem ipsum dolor sit amet, consectetur adipiscing.",
+                                icon: <Clock type="fill" />
+                            },
+                        ]}
+                    >
+                        <h4>
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
+                        </h4>
+                        <br />
+                        <br />
+
+                        <p>
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                        </p>
+
+                        <Media/>
+                        <br />
+                        <br />
+
+                        <h5>
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
+                        </h5>
+                        <br />
+                        <br />
+
+                        <p>
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
+                        </p>
+                    </LandingPageFormLeft>
+                } landingPageFormRight={
+                    <LandingPageFormRight
+                        formImage={"/img/landing-page-form-image.png"}
+                        formTitle={'Go in the draw to win'}
+                        formText={'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'}
+                        pillar="visit"
+                        level="primary"
+                        children={
+                            <>
+                                <FormFieldHolder label={'Name*'} >
+                                    <TextField required />
+                                </FormFieldHolder>
+                                <FormFieldHolder label={'Email*'}><EmailField required /></FormFieldHolder>
+                                <FormFieldHolder label={'Phone number'}><TextField /></FormFieldHolder>
+                                <FormFieldHolder label={'What would you love to do most in Selwyn?'}><Textarea /></FormFieldHolder>
+                                <Checkbox label={"I’d love to receive updates about events and happenings in Selwyn."} />
+                            </>
+                        }
+                        callToAction={<Button label="ENTER NOW" secondaryIcon={<ArrowRight />} pillar="visit" level="primary"/>}
+                    />
+                }>
+                </LandingPageForm>
+            </ElementHolder>
+        );
+    }
+}
+
+export const LandingPageFormComponent = {
+    ...LandingPageFormTemplate
+}

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

@@ -0,0 +1,24 @@
+import { Container } from "../../Shared";
+import LandingPageFormProps from "./LandingPageFormProps"
+import styles from "./landingPageForm.module.scss";
+
+const LandingPageForm = (props: LandingPageFormProps) => {
+    const {
+        landingPageFormLeft,
+        landingPageFormRight,
+        extraClass,
+    } = props
+
+    return (
+        <div className={`${styles.landingPageFormBlock} ${extraClass}`}>
+            <Container>
+                <div className={styles.landingPageFormBlockWrapper}>
+                    {landingPageFormLeft}
+                    {landingPageFormRight}
+                </div>
+            </Container>
+        </div>
+    )
+}
+
+export default LandingPageForm