@hellobetterdigitalnz/selwynui 0.0.1-8 → 0.0.1-80

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

@@ -0,0 +1,72 @@
+.simpleFormBlock {
+    font-family: var(--font);
+
+    .simpleFormBlockWrapper {
+        max-width: 910px;
+
+        h1 {
+            font-size: var(--font-size-h4);
+            font-weight: var(--font-weight-h4);
+            line-height: var(--line-height-h4);
+            letter-spacing: -1.92px;
+        }
+
+        h2 {
+            padding: 60px 0;
+            font-size: 28px;
+            font-weight: var(--font-weight-h4);
+            line-height: var(--line-height-h6);
+            letter-spacing: -0.56px;
+        }
+
+
+        .simpleFormInputsWrapper {
+            .simpleFormButtonWrapper {
+                button {
+                    color: var(--color-sand);
+                    margin-top: 64px;
+                }
+            }
+
+        }
+    }
+
+    .simpleFormBgDesignContainer {
+        display: block;
+        position: absolute;
+        color: var(--color-block-text);
+        right: -240px;
+    }
+
+    &.spacingTop--pt-none {
+        .simpleFormBgDesignContainer {
+            top: 0;
+        }
+    }
+
+    &.spacingTop--pt-xsm {
+        .simpleFormBgDesignContainer {
+            top: -72px;
+        }
+    }
+
+    &.spacingTop--pt-sm {
+        .simpleFormBgDesignContainer {
+            top: -90px;
+        }
+    }
+
+    &.spacingTop--pt-md {
+        .simpleFormBgDesignContainer {
+            top: -120px;
+        }
+    }
+
+    &.spacingTop--pt-lg {
+        .simpleFormBgDesignContainer {
+            top: -144px;
+        }
+    }
+
+
+}

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
+  },
+};
+

package/src/Components/Form/Textarea/Textarea.tsx

@@ -0,0 +1,74 @@
+import React, {useState} from "react";
+import cx from 'classnames';
+import TextareaProps from "./TextareaProps";
+import styles from './textarea.module.scss';
+import LoadingInput from "../LoadingInput/LoadingInput.tsx";
+
+const Textarea = (props: TextareaProps) => {
+  const {
+    name,
+    id,
+    value,
+    placeholder,
+    extraClass,
+    disabled,
+    error,
+    ariaLabel,
+    required,
+    readonly,
+    autoComplete,
+    rows,
+    displayChars,
+    maxLength,
+    onChange,
+    loading,
+    ...args
+  } = props;
+
+
+  const [text, setText] = useState('');
+
+  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setText(e.target?.value);
+    if (onChange) {
+      onChange(e);
+    }
+  };
+
+  const classes = [styles.textarea];
+  if (error) {
+    classes.push(styles.error);
+  }
+  if (extraClass) {
+    classes.push(extraClass);
+  }
+
+  return <div className={styles.field}>
+    {loading && <LoadingInput />}
+    <textarea
+      className={cx(classes)}
+      id={id}
+      name={name}
+      value={value}
+      placeholder={placeholder}
+      rows={rows}
+      onChange={handleChange}
+      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}
+    />
+    {!!displayChars && <p className={styles.length}>
+      {text.length} / {maxLength}
+    </p>}
+  </div>
+};
+
+export default Textarea;

package/src/Components/Form/Textarea/TextareaProps.tsx

@@ -0,0 +1,28 @@
+import {FocusEvent, MouseEvent, ChangeEvent} from 'react'
+
+interface TextareaProps {
+  name?: string;
+  id?: string;
+  value?: string;
+  extraClass?: string;
+  placeholder?: string;
+  error?: boolean;
+  disabled?:boolean;
+  readonly?: boolean;
+  autoComplete?: boolean;
+  minLength?: number;
+  maxLength?: number;
+  required?: boolean;
+  ariaLabel?: string;
+  ariaLabeledby?: string;
+  ariaDescribedby?: string;
+  rows?: number,
+  displayChars?: boolean,
+  onClick?: (e: MouseEvent) => void;
+  onChange?: (e: ChangeEvent<HTMLTextAreaElement>) => void;
+  onFocus?: (e: FocusEvent) => void;
+  onBlur?: (e: FocusEvent) => void;
+  loading?:boolean;
+}
+
+export default TextareaProps;

package/src/Components/Form/Textarea/textarea.module.scss

@@ -0,0 +1,48 @@
+.textarea {
+  display: inline-block;
+  border: 1px solid var(--form-field-border);
+  border-radius: 6px;
+  resize: none;
+  padding: 12px;
+  width: 100%;
+  height: 162px;
+  font-family: var(--font);
+  font-size: var(--font-size-label);
+  line-height: var(--line-height-h3);
+  font-weight: var(--font-weight-h3);
+
+  &::placeholder {
+    font-family: var(--font);
+    color: var(--form-field-placeholder-text);
+    font-size: var(--font-size-label);
+    line-height: var(--line-height-h3);
+    font-weight: var(--font-weight-h3);
+  }
+
+  &:focus {
+      outline: none;
+      border: 2px solid var(--color-text);
+      color: var(--form-field-focus-text);
+    }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.3;
+  }
+
+  &.error {
+    border: 1px solid var(--color-error);
+    background: var(--color-error-lite);
+
+    &:focus {
+      border: 2px solid var(--color-error);
+      background: #ffffff;
+    }
+  }
+}
+
+.length {
+  display: flex;
+  justify-content: flex-end;
+  font-size: 12px;
+}

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

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

package/src/Components/Form/TimeField/TimeField.tsx

@@ -0,0 +1,58 @@
+import cx from "classnames";
+import InputProps from "../InputProps";
+import styles from "../inputs.module.scss";
+import Clock from "../../Icons/Time/Clock/Clock";
+
+const TimeField = (props: InputProps) => {
+  const {
+    name,
+    id,
+    value,
+    placeholder,
+    extraClass,
+    disabled,
+    error,
+    ariaLabel,
+    required,
+    readonly,
+    autoComplete,
+    ...args
+  } = props;
+
+  const classes = [styles.input];
+  if (error) {
+    classes.push(styles.error);
+  }
+  if (extraClass) {
+    classes.push(extraClass);
+  }
+
+  return (
+    <div className={styles.time}>
+      <input
+        className={cx(classes)}
+        id={id}
+        name={name}
+        type="time"
+        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"}
+        pattern="[0-2][0-9]:[0-5][0-9]" // 24-hour format pattern
+        {...args}
+      />
+      <div className={styles.clockIcon}>
+        <Clock type="light" />
+      </div>
+    </div>
+  );
+};
+
+export default TimeField;

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

@@ -0,0 +1,50 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import ToggleSwitch from "./ToggleSwitch";
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: "Form / ToggleSwitch",
+  component: ToggleSwitch,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof ToggleSwitch>;
+
+export default meta;
+type Story = StoryObj<typeof ToggleSwitch>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Default: Story = {
+  args: {
+    checked: false,
+  },
+};
+
+export const On: Story = {
+  args: {
+    checked: true,
+  },
+};
+
+export const OffDisabled: Story = {
+  args: {
+    checked: false,
+    disabled: true,
+  },
+};
+
+export const OnDisabled: Story = {
+  args: {
+    checked: true,
+    disabled: true,
+  },
+};
+
+export const Error: Story = {
+  args: {
+    checked: true,
+    error: true,
+  },
+};

package/src/Components/Form/ToggleSwitch/ToggleSwitch.tsx

@@ -0,0 +1,87 @@
+import cx from "classnames";
+import ToggleSwitchProps from "./ToggleSwitchProps";
+import styles from "./toggleSwitch.module.scss";
+import { useEffect, useState, MouseEvent } from "react";
+
+const ToggleSwitch = (props: ToggleSwitchProps) => {
+  const {
+    name,
+    checked,
+    id,
+    value,
+    placeholder,
+    extraClass,
+    disabled,
+    error,
+    ariaLabel,
+    required,
+    readonly,
+    onChange,
+    ...args
+  } = props;
+
+  const [isChecked, setIsChecked] = useState(false);
+
+  const classes = ["switch", styles.switch];
+
+  if (extraClass) {
+    classes.push(extraClass);
+  }
+  if (error) {
+    classes.push(styles.error);
+  }
+
+  useEffect(() => {
+    setIsChecked(checked ? checked : false);
+  }, [checked]);
+
+  const handleClick = (e: MouseEvent) => {
+    setIsChecked(!isChecked);
+    if (onChange) {
+      onChange(e, isChecked);
+    }
+  };
+
+  return (
+    <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}
+        {...args}
+      />
+      <span className={`${styles.slider} ${styles.round}`}>
+        <span className={`${styles.circle}`}>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="12"
+            height="9"
+            viewBox="0 0 12 9"
+            fill="none"
+          >
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M11.5458 1.47502C11.7411 1.67029 11.7411 1.98687 11.5458 2.18213L5.18186 8.54609C4.9866 8.74135 4.67002 8.74135 4.47476 8.54609L0.939224 5.01056C0.743962 4.8153 0.743962 4.49871 0.939224 4.30345L1.64633 3.59635C1.84159 3.40108 2.15818 3.40108 2.35344 3.59635L4.82831 6.07122L10.1316 0.767918C10.3269 0.572656 10.6435 0.572656 10.8387 0.767918L11.5458 1.47502Z"
+              fill="currentColor"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+  );
+};
+
+export default ToggleSwitch;

package/src/Components/Form/ToggleSwitch/ToggleSwitchProps.tsx

@@ -0,0 +1,22 @@
+import { FocusEvent, MouseEvent } from "react";
+
+interface ToggleSwitchProps {
+  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;
+}
+
+export default ToggleSwitchProps;

package/src/Components/Form/ToggleSwitch/toggleSwitch.module.scss

@@ -0,0 +1,84 @@
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 40px;
+  height: 24px;
+
+  &.error .slider {
+    background: var(--color-error) !important;
+
+    .circle {
+      color: var(--color-error) !important;
+    }
+  }
+
+  input[type="checkbox"] {
+    opacity: 0;
+    width: 40px;
+    height: 24px;
+    position: relative;
+    z-index: 1;
+    cursor: pointer;
+
+    &:hover + .slider {
+      background: var(--color-gray-600);
+    }
+
+    &:focus + .slider {
+      outline: 2px solid var(--color-gray-800);
+    }
+
+    &:checked + .slider {
+      background: var(--color-gray-800);
+    }
+
+    &:checked + .slider .circle {
+      transform: translate(16px, -50%);
+    }
+
+    &:checked + .slider .circle svg {
+      opacity: 1;
+    }
+  }
+
+  .slider {
+    background: var(--color-gray-300);
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    cursor: pointer;
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+    transition: 0.4s;
+
+    .circle {
+      position: absolute;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 20px;
+      width: 20px;
+      top: 50%;
+      left: 2px;
+      background-color: white;
+      transition: 0.5s;
+      transform: translateY(-50%);
+
+      svg {
+        opacity: 0;
+      }
+    }
+
+    &.round {
+      border-radius: 34px;
+
+      .circle {
+        border-radius: 50%;
+      }
+    }
+  }
+}
+
+