@hellobetterdigitalnz/selwynui 0.0.1-37 → 0.0.1-39

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"}>
+        <TextField  placeholder="Placeholder" />
+      </FormFieldHolder>
+    );
+  },
+};
+
+export const FormFieldHolderComponent = {
+  ...FormFieldHolderTemplate,
+};

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

@@ -0,0 +1,55 @@
+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,15 @@
+import { ReactNode } from "react";
+
+interface FormFieldHolderProps {
+  label?: string | any;
+  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,68 @@
+.holder {
+  margin-bottom: 48px;
+  width: 100%;
+}
+
+.iconAction{
+  display: flex;
+  align-items: center;
+  margin-right: calc(var(--space-unit) * 2);
+}
+
+.holderError{
+  label{
+    color: var(--color-visit);
+  }
+}
+
+.label {
+  display: inline-flex;
+  align-items: center;
+  margin-bottom: calc(var(--space-unit) * 3);
+
+  label {
+    font-size: var(--font-size-label);
+    line-height: var(--line-height-body-regular);
+    font-weight: var(--font-weight-bold);
+
+    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/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/SimpleForm/SimpleForm.stories.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import { Meta, StoryObj } from "@storybook/react-vite"
+import SimpleForm from "./SimpleForm"
+import { ElementHolder } from "../../Shared";
+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 FormFieldHolder from "../FormFieldHolder/FormFieldHolder";
+
+
+const meta: Meta = {
+    title: "Form / SimpleForm",
+    component: SimpleForm,
+    parameters: {
+        layout: 'fullscreen',
+    },
+    tags: ["autodocs"]
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>
+
+const SimpleFormTemplate: Story = {
+    render: () => {
+        return (
+            <ElementHolder paddingTop="sm" paddingBottom="md" pillar="visit" level="light">
+                <SimpleForm
+                    formTitle={'Send us a message'}
+                    formText={'We appreciate you taking the time to get in touch. We’ll get back to you within the next day.'}
+                    children={
+                        <>
+                            <FormFieldHolder  label={'Name*'} >
+                                <TextField required/>
+                            </FormFieldHolder>
+                            <FormFieldHolder label={'Email*'}><EmailField required/></FormFieldHolder>
+                            <FormFieldHolder label={'Phone number'}><TextField /></FormFieldHolder>
+                            <FormFieldHolder label={'Your message'}><Textarea /></FormFieldHolder>
+                            <Checkbox label={"I’d love to receive updates about events and happenings in Selwyn."} />
+                        </>
+                    }
+                    action={<Button label="SUBMIT" secondaryIcon={<ArrowRight />} />}
+                />
+            </ElementHolder>
+        )
+    }
+}
+
+export const SimpleFormComponent = {
+    ...SimpleFormTemplate
+}

package/src/Components/Form/SimpleForm/SimpleForm.tsx

@@ -0,0 +1,55 @@
+import cx from 'classnames';
+import { Container } from "../../Shared";
+import SimpleFormProps from "./SimpleFormProps";
+import SimpleFormBgDesign from "./simple-form-bg-design";
+import styles from "./simpleForm.module.scss"
+
+const SimpleForm = (props: SimpleFormProps) => {
+    const {
+        formTitle,
+        formText,
+        extraClass,
+        children,
+        action
+    } = props
+
+    const classes = [
+        "button"
+    ]
+
+    if (extraClass) {
+        classes.push(extraClass)
+    }
+    return (
+        <div className={`${styles.simpleFormBlock} ${extraClass}`}>
+            <Container>
+                <div className={styles.simpleFormBlockWrapper}>
+                    <h1>{formTitle}</h1>
+                    <h2>{formText}</h2>
+
+                    <div className={styles.simpleFormBgDesignContainer}>
+                        <SimpleFormBgDesign />
+                    </div>
+
+                    <div className={styles.simpleFormInputsWrapper}>
+                        {children}
+
+                        {/* <div className={`${styles.simpleFormButtonWrapper} ${extraClass} ${cx(classes)}`}>
+                            {action}
+                        </div> */}
+                        <div className={cx(
+                            styles.simpleFormButtonWrapper,
+                            extraClass,
+                            "button"  
+                        )}>
+                            {action}
+                        </div>
+                    </div>
+                </div>
+
+            </Container>
+        </div>
+    )
+}
+
+export default SimpleForm;

package/src/Components/Form/SimpleForm/SimpleFormProps.tsx

@@ -0,0 +1,11 @@
+import { ReactNode } from "react";
+
+interface SimpleFormProps {
+    formTitle?: string
+    formText?: string
+    extraClass?: string
+    children?: ReactNode
+    action?: ReactNode
+}
+
+export default SimpleFormProps;

package/src/Components/Form/SimpleForm/simple-form-bg-design.svg

@@ -0,0 +1,14 @@
+<svg width="787" height="361" viewBox="0 0 787 361" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.05">
+<path opacity="0.5" d="M0 120.333C66.601 120.333 120.606 169.838 120.606 230.889H0V120.333Z" fill="#23461F"/>
+<path opacity="0.25" d="M251.772 120.333C185.171 120.333 131.166 169.838 131.166 230.889H251.772V120.333Z" fill="#23461F"/>
+<path opacity="0.5" d="M776.44 230.889C709.839 230.889 655.834 181.384 655.834 120.333H776.44V230.889Z" fill="#23461F"/>
+<path opacity="0.75" d="M131.166 240.667C197.767 240.667 251.772 290.171 251.772 351.222H131.166V240.667Z" fill="#23461F"/>
+<path opacity="0.5" d="M262.334 351.222C328.935 351.222 382.94 301.717 382.94 240.667H262.334V351.222Z" fill="#23461F"/>
+<path opacity="0.25" d="M514.105 351.222C447.504 351.222 393.499 301.718 393.499 240.667H514.105V351.222Z" fill="#23461F"/>
+<path opacity="0.75" d="M645.273 240.667C578.672 240.667 524.667 290.171 524.667 351.222H645.273V240.667Z" fill="#23461F"/>
+<path opacity="0.25" d="M524.666 4.88878C591.267 4.88878 645.272 54.3934 645.272 115.444H524.666V4.88878Z" fill="#23461F"/>
+<path opacity="0.5" d="M393.499 230.889C460.1 230.889 514.105 181.384 514.105 120.333H393.499V230.889Z" fill="#23461F"/>
+<path opacity="0.75" d="M262.334 110.556C328.935 110.556 382.94 61.0509 382.94 0H262.334V110.556Z" fill="#23461F"/>
+</g>
+</svg>

package/src/Components/Form/SimpleForm/simple-form-bg-design.tsx

@@ -0,0 +1,21 @@
+const SimpleFormBgDesign = () => {
+    return (
+        <svg width="787" height="361" viewBox="0 0 787 361" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <g opacity="0.05">
+                <path opacity="0.5" d="M0 120.333C66.601 120.333 120.606 169.838 120.606 230.889H0V120.333Z" fill="#23461F" />
+                <path opacity="0.25" d="M251.772 120.333C185.171 120.333 131.166 169.838 131.166 230.889H251.772V120.333Z" fill="#23461F" />
+                <path opacity="0.5" d="M776.44 230.889C709.839 230.889 655.834 181.384 655.834 120.333H776.44V230.889Z" fill="#23461F" />
+                <path opacity="0.75" d="M131.166 240.667C197.767 240.667 251.772 290.171 251.772 351.222H131.166V240.667Z" fill="#23461F" />
+                <path opacity="0.5" d="M262.334 351.222C328.935 351.222 382.94 301.717 382.94 240.667H262.334V351.222Z" fill="#23461F" />
+                <path opacity="0.25" d="M514.105 351.222C447.504 351.222 393.499 301.718 393.499 240.667H514.105V351.222Z" fill="#23461F" />
+                <path opacity="0.75" d="M645.273 240.667C578.672 240.667 524.667 290.171 524.667 351.222H645.273V240.667Z" fill="#23461F" />
+                <path opacity="0.25" d="M524.666 4.88878C591.267 4.88878 645.272 54.3934 645.272 115.444H524.666V4.88878Z" fill="#23461F" />
+                <path opacity="0.5" d="M393.499 230.889C460.1 230.889 514.105 181.384 514.105 120.333H393.499V230.889Z" fill="#23461F" />
+                <path opacity="0.75" d="M262.334 110.556C328.935 110.556 382.94 61.0509 382.94 0H262.334V110.556Z" fill="#23461F" />
+            </g>
+        </svg>
+
+    )
+}
+
+export default SimpleFormBgDesign;

package/src/Components/Form/SimpleForm/simpleForm.module.scss

@@ -0,0 +1,36 @@
+.simpleFormBlock {
+    max-width: 910px;
+
+    .simpleFormBlockWrapper {
+        h1 {
+            font-size: var(--font-size-h4);
+            font-weight: var(--font-weight-h4);
+            line-height: var(--line-height-h4);
+        }
+
+        h2 {
+            padding-block: 72px;
+            font-size: var(--font-size-h6);
+            font-weight: var(--font-weight-h4);
+            line-height: var(--line-height-h6);
+        }
+
+        .simpleFormBgDesignContainer {
+            display: block;
+            position: absolute;
+            top: -120px;
+            bottom: 0;
+            right: 0;
+        }
+
+        .simpleFormInputsWrapper {
+            .simpleFormButtonWrapper {
+                button {
+                    color: var(--color-sand);
+                    margin-top: 72px;
+                }
+            }
+            
+        }
+    }
+}

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

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

package/src/Components/Form/TextField/TextField.tsx

@@ -0,0 +1,62 @@
+import cx from "classnames";
+import styles from "../inputs.module.scss";
+import TextFieldProps from "./TextFieldProps";
+import LoadingInput from "../LoadingInput/LoadingInput";
+
+const TextField = (props: TextFieldProps) => {
+  const {
+    name,
+    id,
+    value,
+    placeholder,
+    extraClass,
+    disabled,
+    error,
+    ariaLabel,
+    required,
+    readonly,
+    autoComplete,
+    icon,
+    loading,
+    ...args
+  } = props;
+
+  const classes = [styles.input];
+  if (error) {
+    classes.push(styles.error);
+  }
+  if (extraClass) {
+    classes.push(extraClass);
+  }
+
+
+  return (
+    <div className={`${icon ? styles.textField : ""} ${loading ? styles.fieldLoading : ""}`}>
+      <div className={styles.field}>
+        {loading && <LoadingInput />}
+        <input
+          className={cx(classes)}
+          id={id}
+          name={name}
+          type="text"
+          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>
+      {!!icon && <div className={styles.textFieldIcon}>{icon}</div>}
+    </div>
+  );
+};
+
+export default TextField;

package/src/Components/Form/TextField/TextFieldProps.tsx

@@ -0,0 +1,8 @@
+import { ReactNode } from "react";
+import InputProps from "../InputProps";
+
+interface TextFieldProps extends InputProps {
+  icon?: ReactNode;
+}
+
+export default TextFieldProps;

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

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