@hellobetterdigitalnz/selwynui 0.0.1-7 → 0.0.1-71

package/src/Components/Form/RadioButtons/radiobutton.module.scss

@@ -0,0 +1,189 @@
+.radioSet {
+  display: flex;
+  flex-wrap: wrap;
+  margin: calc(var(--space-unit) * -1);
+
+  &.container {
+    flex-direction: column;
+  }
+
+  &:has(.radioBtnBox) {
+    margin:0 -8px;
+    flex-wrap:nowrap;
+  }
+
+}
+
+.radioHolder {
+  display: inline-flex;
+  align-items: center;
+  padding: calc(var(--space-unit) * 1);
+
+  label {
+    cursor: pointer;
+    margin-left: calc(var(--space-unit) * 3);
+  }
+
+  &.error {
+    label {
+      color: var(--color-error);
+    }
+  }
+
+  &.disabled {
+    label {
+      cursor: not-allowed;
+      color: var(--color-text);
+    }
+  }
+
+}
+
+.radioButtonWrap {
+   display: flex;
+
+  &:has(.radioBtnBox) {
+     padding: 0 8px;
+     width: 100%;
+  }
+}
+
+.radioBtnBox {
+  border: 1px solid var(--color-text);
+  flex-direction: row-reverse;
+  padding:15px 24px;
+  justify-content: space-between;
+  border-radius: 4px;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+
+  .container & {
+    margin-bottom: 16px;
+  }
+
+  label {
+    font-family: var(--font);
+    margin-left:0;
+    margin-right: 12px;
+  }
+
+  
+}
+
+
+.radioBtnBox:has(input[type="radio"]:checked) {
+  --dropdown-border-color: var(--dropdown-selector-color);
+  
+}
+
+[dir="rtl"] {
+  .radioHolder {
+    label {
+      margin-left: 0px;
+      margin-right: calc(var(--space-unit) * 3);
+    }
+  }
+}
+.radio {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  flex-grow: 0;
+
+  p {
+    font-size: var(--text-h-xxs);
+    line-height: var(--line-height-h-xxs);
+    font-family: var(--font);
+  }
+
+  input[type="radio"] {
+    -webkit-appearance: none;
+    width: 20px;
+    height: 20px;
+    border-radius: 100%;
+    background-color: #FFFFFF;
+    border: 1px solid var(--color-text);
+    outline-offset: 2px;
+    outline: 2px solid transparent;
+    cursor: pointer;
+    position: relative;
+    z-index: 1;
+
+    &:checked + .circle {
+      opacity: 1;
+    }
+
+    
+
+    &:focus {
+      outline: 2px solid var(--color-text);
+    }
+
+    &:hover {
+      border: 2px solid var(--color-text);
+    }
+
+    &:disabled {
+      //background-color: var(--color-gr);
+      cursor: not-allowed;
+
+      &:checked {
+        border-color: var(--color-gray-200);
+      }
+    }
+  }
+
+  .circle {
+    content: "";
+    position: absolute;
+    width: 12px;
+    height: 12px;
+    border-radius: 100%;
+    background-color: var(--color-text);
+    opacity: 0;
+    pointer-events: none;
+    z-index: 10;
+  }
+}
+
+
+@media screen and (max-width: 768px) {
+  .radioBtnBox {
+    .container & {
+      margin-bottom: 0px;
+    }
+  }
+
+  .radioSet {
+    &:has(.radioBtnBox) {
+      flex-direction: column;
+      margin-left: 0;
+      margin-right: 0;
+    }
+  }
+
+  .radioButtonWrap {
+    &:has(.radioBtnBox) {
+      padding-left: 0;
+      padding-right: 0;
+
+      &:last-child {
+        .radioBtnBox {
+          border-bottom: 1px solid var(--color-text);
+        }
+      }
+    }
+  }
+
+  .radioBtnBox {
+    border-bottom: 1px solid transparent;
+  }
+
+  .radioBtnBox:has(input[type="radio"]:checked) {
+    border-bottom: 1px solid var(--color-text);
+  
+  }
+}

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

@@ -0,0 +1,55 @@
+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="md" paddingBottom="md" pillar="business" level="light">
+                <SimpleForm
+                    spacingTop="sm"
+                    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 extraClass="" label={'Name*'} labelClass="mb-16">
+                                <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."} />
+                        </>
+                    }
+                    callToAction={<Button label="SUBMIT" pillar="business" secondaryIcon={<ArrowRight />} />}
+                />
+            </ElementHolder>
+        )
+    }
+}
+
+export const SimpleFormComponent = {
+    ...SimpleFormTemplate
+}

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

@@ -0,0 +1,63 @@
+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"
+import cslx from "clsx";
+
+const SimpleForm = (props: SimpleFormProps) => {
+    const {
+        formTitle,
+        formText,
+        extraClass,
+        children,
+        callToAction,
+        spacingTop = 'sm',
+    } = props
+
+    const classes = [
+        "button"
+    ]
+
+    const className = cslx (
+        styles.simpleFormBlock,
+        `${extraClass}`,
+        {
+            [styles[`spacingTop--pt-${spacingTop}`]]: spacingTop
+        }
+    )
+
+    if (extraClass) {
+        classes.push(extraClass)
+    }
+
+    return (
+        <div className={className}>
+            <Container type='simpleForm'>
+                <div className={styles.simpleFormBlockWrapper}>
+                    <h1>{formTitle}</h1>
+                    <h2>{formText}</h2>
+
+                    <div className={`${styles.simpleFormBgDesignContainer} `}>
+                        <SimpleFormBgDesign/>
+                    </div>
+
+                    <div className={styles.simpleFormInputsWrapper}>
+                        {children}
+
+                        <div className={cx(
+                            styles.simpleFormButtonWrapper,
+                            extraClass,
+                            "button"  
+                        )}>
+                            {callToAction}
+                        </div>
+                    </div>
+                </div>
+
+            </Container>
+        </div>
+    )
+}
+
+export default SimpleForm;

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

@@ -0,0 +1,13 @@
+import { ReactNode } from "react";
+
+interface SimpleFormProps {
+    formTitle?: string
+    formText?: string
+    extraClass?: string
+    children?: ReactNode
+    callToAction?: ReactNode
+    spacingTop?: "none" | "xsm" | "sm" | "md" | "lg";
+    spacingBottom?: "none" | "xsm" | "sm" | "md" | "lg" | "xl";
+}
+
+export default SimpleFormProps;

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="currentColor" />
+                <path opacity="0.25" d="M251.772 120.333C185.171 120.333 131.166 169.838 131.166 230.889H251.772V120.333Z" fill="currentColor" />
+                <path opacity="0.5" d="M776.44 230.889C709.839 230.889 655.834 181.384 655.834 120.333H776.44V230.889Z" fill="currentColor" />
+                <path opacity="0.75" d="M131.166 240.667C197.767 240.667 251.772 290.171 251.772 351.222H131.166V240.667Z" fill="currentColor" />
+                <path opacity="0.5" d="M262.334 351.222C328.935 351.222 382.94 301.717 382.94 240.667H262.334V351.222Z" fill="currentColor" />
+                <path opacity="0.25" d="M514.105 351.222C447.504 351.222 393.499 301.718 393.499 240.667H514.105V351.222Z" fill="currentColor" />
+                <path opacity="0.75" d="M645.273 240.667C578.672 240.667 524.667 290.171 524.667 351.222H645.273V240.667Z" fill="currentColor" />
+                <path opacity="0.25" d="M524.666 4.88878C591.267 4.88878 645.272 54.3934 645.272 115.444H524.666V4.88878Z" fill="currentColor" />
+                <path opacity="0.5" d="M393.499 230.889C460.1 230.889 514.105 181.384 514.105 120.333H393.499V230.889Z" fill="currentColor" />
+                <path opacity="0.75" d="M262.334 110.556C328.935 110.556 382.94 61.0509 382.94 0H262.334V110.556Z" fill="currentColor" />
+            </g>
+        </svg>
+
+    )
+}
+
+export default SimpleFormBgDesign;

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