@hellobetterdigitalnz/selwynui 0.0.1-8 → 0.0.1-80

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

@@ -0,0 +1,92 @@
+
+import type { Meta, StoryObj } from "@storybook/react";
+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: false,
+    items: [
+      {
+        id: "r-1",
+        name: "check-one",
+        disabled: true,
+        label: <b>Radio</b>
+      },
+      {
+        id: "r-2",
+        name: "check-one",
+        disabled: true,
+        label: <>
+          <i>Radio</i> 
+        </>
+      },
+      {
+        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"
+      }
+    ]
+  }
+};

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

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

@@ -0,0 +1,188 @@
+.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;
+    font-size: var(--font-size-body-regular);
+    font-weight: var(--font-weight-checkbox-label);
+    line-height: var(--line-height-checkbox-label);
+    margin-left: calc(var(--space-unit) * 3);
+  }
+
+  .radioBtnLabel {
+    margin-left: calc(var(--space-unit) * 3);
+  }
+
+  &.error {
+    label {
+      color: var(--color-error);
+    }
+  }
+
+  &.disabled {
+    label {
+      cursor: not-allowed;
+      color: var(--radio-button-label-text);
+    }
+  }
+
+}
+
+.radioButtonWrap {
+   display: flex;
+
+  &:has(.radioBtnBox) {
+     padding: 0 8px;
+     width: 100%;
+  }
+}
+
+.radioBtnBox {
+  border: 1px solid var(--radio-button-border);
+  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;
+
+  input[type="radio"] {
+    -webkit-appearance: none;
+    width: 20px;
+    height: 20px;
+    border-radius: 100%;
+    background-color: #FFFFFF;
+    border: 1px solid var(--radio-button-border);
+    outline-offset: 2px;
+    outline: 2px solid transparent;
+    cursor: pointer;
+    position: relative; // Ensure position is set to avoid overlay issues
+    z-index: 1; // Make sure input is on top for clicks
+
+    &:checked + .circle {
+      opacity: 1;
+    }
+
+    &:focus {
+      outline: 2px solid var(--radio-buttin-outline);
+    }
+
+    &:hover {
+      border: 2px solid var(--radio-button-border);
+    }
+
+    &:disabled {
+      background-color: var(--color-gray-200);
+      cursor: not-allowed;
+
+      &:checked {
+        border-color: var(--color-gray-200);
+      }
+    }
+  }
+
+  .circle {
+    content: "";
+    position: absolute;
+    width: 12px;
+    height: 12px;
+    border-radius: 100%;
+    background-color: var(--radio-button-bg);
+    opacity: 0;
+    pointer-events: none;
+    z-index: 10; // Make sure the circle is behind the input
+  }
+}
+
+
+@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(--radio-button-border);
+        }
+      }
+    }
+  }
+
+  .radioBtnBox {
+    border-bottom: 1px solid transparent;
+  }
+
+  .radioBtnBox:has(input[type="radio"]:checked) {
+    border-bottom: 1px solid var(--radio-button-border);
+  
+  }
+}

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

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import RichTextEditor from "./RichTextEditor";
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: "Form / Rich Text",
+  component: RichTextEditor,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component: `The RichText Editor works with TinyMCE community plugin.
+
+This is an area BetterUI can be further develop.
+
+You will have to download the TinyMCE community plugin from https://www.tiny.cloud/get-tiny/ and place the tinymce folder in your public folder.
+
+The Folder structure is
+
+- public
+  - lib
+    - tinymce
+      - tinymce.min.js
+      - icons
+      - ...
+        `,
+      },
+    },
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof RichTextEditor>;
+
+export default meta;
+type Story = StoryObj<typeof RichTextEditor>;
+
+export const Example: Story = {
+  args: {
+    placeholder: "Placeholder",
+    uploader: false,
+  },
+};

package/src/Components/Form/RichTextEditor/RichTextEditor.tsx

@@ -0,0 +1,115 @@
+import { useState } from "react";
+import cx from "classnames";
+import RichTextEditorProps from "./RichTextEditorProps";
+import styles from "./richTextEditor.module.scss";
+import { Editor } from "@tinymce/tinymce-react";
+import LoadingInput from "../LoadingInput/LoadingInput.tsx";
+
+const RichTextEditor = (props: RichTextEditorProps) => {
+
+  const {
+    name,
+    id,
+    value,
+    extraClass,
+    placeholder,
+    error,
+    disabled,
+    readonly,
+    autoComplete,
+    required,
+    ariaLabel,
+    ariaLabeledby,
+    ariaDescribedby,
+    uploader = true,
+    rows,
+    onClick,
+    onChange,
+    onFocus,
+    onBlur,
+    loading,
+
+    ...args
+  } = props;
+
+  const [val, setVal] = useState(value);
+
+  const classes = [styles.holder];
+  if (extraClass) {
+    classes.push(extraClass);
+  }
+
+  return <div className={cx(classes)}>
+    {loading && <LoadingInput/>}
+    <Editor
+      textareaName={name}
+      scriptLoading={{ async: true }}
+      tinymceScriptSrc={`/lib/tinymce/tinymce.min.js`}
+      id={id}
+      disabled={disabled}
+      value={value}
+      init={{
+        placeholder: placeholder,
+        height: rows ? 50 * rows : 200,
+        menubar: false,
+        branding: false,
+        plugins: [
+          "advlist", "autolink", "lists", "link", "image", "charmap", "preview",
+          "anchor", "searchreplace", "visualblocks", "fullscreen",
+          "media", "table"
+        ],
+        toolbar:
+          `blocks | formatselect | bold italic underline | bullist numlist |  link |` +
+          `outdent indent | ` +
+          `alignleft aligncenter | ` +
+          `${uploader ? 'image' : ''}  | ` +
+          `undo redo`,
+        content_style: ":root { --body-font: Figtree, sans-serif; } body { font-family: var(--body-font); }"
+      }}
+      onEditorChange={(text: string) => {
+        setVal(text);
+        if (onChange) {
+          onChange(text);
+        }
+      }}
+      onClick={(e: any) => {
+        if (onClick) {
+          onClick(e);
+        }
+      }}
+      onBlur={(e: any) => {
+        if (onBlur) {
+          onBlur(e);
+        }
+      }}
+      onFocus={(e: any) => {
+        if (onFocus) {
+          onFocus(e);
+        }
+      }}
+    />
+
+    <textarea
+      className={styles.hidden}
+      id={`editor-text-${id}`}
+      name={`${name}__editor`}
+      value={val}
+      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 RichTextEditor;
+

package/src/Components/Form/RichTextEditor/RichTextEditorProps.tsx

@@ -0,0 +1,25 @@
+interface RichTextEditorProps {
+  name?: string;
+  id?: string;
+  value?: string;
+  extraClass?: string;
+  placeholder?: string;
+  error?: boolean;
+  disabled?: boolean;
+  readonly?: boolean;
+  autoComplete?: boolean;
+  required?: boolean;
+  ariaLabel?: string;
+  ariaLabeledby?: string;
+  ariaDescribedby?: string;
+  rows?: number;
+  displayChars?: boolean;
+  uploader?: boolean;
+  onClick?: (e: any) => void;
+  onChange?: (value: string) => void;
+  onFocus?: (e: any) => void;
+  onBlur?: (e: any) => void;
+  loading?: boolean;
+}
+
+export default RichTextEditorProps;

package/src/Components/Form/RichTextEditor/richTextEditor.module.scss

@@ -0,0 +1,10 @@
+.holder {
+  //position: relative;
+  width: 100%;
+  min-width: 200px;
+  min-height: 120px;
+}
+
+.hidden {
+  display: none;
+}

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 placeholder={'Let us know how we can help you...'}/></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;