@hellobetterdigitalnz/betterui 0.0.2 → 0.0.3-2

package/src/Components/Form/DropdownBadge/DropdownBadgeItemProps.tsx

@@ -1,10 +0,0 @@
-import { MouseEvent } from "react";
-
-interface DropdownBadgeItemProps {
-  label: string;
-  value: string | number;
-  status?: "pending" | "inProgress" | "complete";
-  handleSelect: (e: MouseEvent, value: string | number) => void;
-}
-
-export default DropdownBadgeItemProps;

package/src/Components/Form/DropdownBadge/DropdownBadgeProps.tsx

@@ -1,31 +0,0 @@
-import { MouseEvent, FocusEvent } from "react";
-
-interface NameValueInterface {
-  label: string;
-  status?: "pending" | "inProgress" | "complete" | undefined;
-  value: string | number;
-}
-
-interface DropdownBadgeProps {
-  name?: string;
-  id?: string;
-  value?: string;
-  options: (NameValueInterface | string)[];
-  status?: "pending" | "inProgress" | "complete" | undefined;
-  extraClass?: string;
-  disabled?: boolean;
-  readonly?: boolean;
-  autoComplete?: boolean;
-  required?: boolean;
-  ariaLabel?: string;
-  ariaLabeledby?: string;
-  ariaDescribedby?: string;
-  onClick?: (e: MouseEvent) => void;
-  onChange?: (e: MouseEvent) => void;
-  onFocus?: (e: FocusEvent) => void;
-  onBlur?: (e: FocusEvent) => void;
-}
-
-export type { NameValueInterface };
-
-export default DropdownBadgeProps;

package/src/Components/Form/DropdownBadge/DropdownBadgeSelector.tsx

@@ -1,11 +0,0 @@
-import cx from "classnames";
-import styles from "./dropdownBadge.module.scss";
-import DropdownBadgeSelectorProps from "./DropdownBadgeSelectorProps";
-
-const DropdownBadgeSelector = (props: DropdownBadgeSelectorProps) => {
-  const classes = [styles.dropdownSelector];
-
-  return <div className={cx(classes)}>{props.children}</div>;
-};
-
-export default DropdownBadgeSelector;

package/src/Components/Form/DropdownBadge/dropdownBadge.module.scss

@@ -1,105 +0,0 @@
-.dropdown {
-  position: relative;
-
-  .control {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    width: 100%;
-    height: 24px;
-    padding: 0 var(--spacing-1\/2);
-    border: 1px solid var(--color-gray-300);
-    border-radius: 6px;
-    font-family: var(--font);
-    font-size: var(--font-size-body-sm);
-    line-height: var(--line-height-body-sm);
-    font-weight: var(--font-weight-body-sm);
-    cursor: pointer;
-  }
-
-  .disabled {
-    cursor: not-allowed;
-    opacity: 0.3;
-    pointer-events: none;
-  }
-
-  .labelWrapper {
-    display: flex;
-    align-items: center;
-  }
-
-  .label {
-    flex-grow: 1;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    padding-right: calc(var(--space-unit) * 2);
-  }
-
-  .chevron {
-    width: 12px;
-    height: 12px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    margin-left: calc(var(--space-unit) * 2);
-
-    svg {
-      width: 100%;
-      height: auto;
-    }
-  }
-}
-
-.dropdownSelector {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  position: absolute;
-  padding: calc(var(--space-unit) * 2) 0;
-  border-radius: 4px;
-  background-color: var(--color-white);
-  box-shadow: var(--drop-shadow-default);
-  margin-top: var(--space-unit);
-}
-
-.dropdownItem {
-  display: flex;
-  align-items: center;
-  padding: calc(var(--space-unit) * 2);
-  cursor: pointer;
-
-  &.active,
-  &:hover {
-    background-color: var(--color-gray-50);
-  }
-}
-
-.circle {
-  width: 12px;
-  height: 12px;
-  border-radius: 100%;
-  flex-shrink: 0;
-  margin-right: 6px;
-
-  &Pending {
-    background: var(--color-gray-300);
-  }
-
-  &InProgress {
-    background: var(--color-inprogress);
-  }
-
-  &Complete {
-    background: var(--color-success);
-  }
-}
-
-.divider {
-  display: flex;
-  align-items: stretch;
-  height: 100%;
-  width: 1px;
-  background: var(--color-gray-300);
-}

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

@@ -1,50 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import DropdownField from "./DropdownField";
-import {NameValueInterface} from "./DropdownFieldProps";
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-const meta = {
-  title: 'Form / Dropdown Field',
-  component: DropdownField,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-} satisfies Meta<typeof DropdownField>;
-
-export default meta;
-type Story = StoryObj<typeof DropdownField>;
-
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
-export const Default: Story = {
-  args: {
-    name: 'dropdown-field',
-    placeholder: 'Super long placeholder text',
-    options: [
-      'Lorem ipsum',
-      'Suspendisse sit amet',
-      'In sagittis metus'
-    ]
-  },
-};
-
-export const Props: Story = {
-  args: {
-    name: 'dropdown-field',
-    placeholder: 'Placeholder text',
-    options: [
-      {
-        label: 'Lorem ipsum',
-        value: 1
-      },
-      {
-        label: 'In sagittis metus',
-        value: 2
-      },
-      {
-        label: 'Suspendisse potenti',
-        value: 3
-      },
-    ] as NameValueInterface[]
-  },
-};

package/src/Components/Form/DropdownField/DropdownField.tsx

@@ -1,118 +0,0 @@
-import cx from "classnames";
-import DropdownFieldProps, { NameValueInterface } from "./DropdownFieldProps";
-import styles from "./dropdown.module.scss";
-import { useEffect, useState, MouseEvent } from "react";
-import CaretDown from "../../Icons/Arrows/CaretDown/CaretDown";
-import CaretUp from "../../Icons/Arrows/CaretUp/CaretUp";
-import DropdownFieldSelector from "./DropdownFieldSelector";
-import DropdownFieldItem from "./DropdownFieldItem";
-
-const DropdownField = (props: DropdownFieldProps) => {
-  const {
-    name,
-    id,
-    value,
-    options,
-    placeholder,
-    extraClass,
-    disabled,
-    // error,
-    ariaLabel,
-    required,
-    // onClick,
-    // readonly,
-    onChange,
-    // ...args
-  } = props;
-
-  const [opened, setOpened] = useState(false);
-  const [selected, setSelected] = useState<string | number>();
-  const [label, setLabel] = useState("");
-
-  useEffect(() => {
-    setSelected(value);
-  }, [value]);
-
-  useEffect(() => {
-    // selected has changed, find the right value;
-    for (const option of options) {
-      let matched = null;
-      if (typeof option === "string") {
-        matched = option === selected ? option : null;
-      } else {
-        matched = option.value === selected ? option.label : null;
-      }
-      if (matched) {
-        setLabel(matched);
-        break;
-      }
-    }
-  }, [selected]);
-
-  const classNames = [styles.dropdown];
-  if (extraClass) {
-    classNames.push(extraClass);
-  }
-  if (disabled) {
-    classNames.push(styles.disabled);
-  }
-
-  const handleOpenClose = () => {
-    setOpened(!opened);
-  };
-
-  const handleSelect = (e: MouseEvent, value: string | number) => {
-    setSelected(value);
-    setOpened(false);
-    if (onChange) {
-      onChange(e);
-    }
-  };
-
-  return (
-    <div className={cx(classNames)}>
-      <div className={styles.control} onClick={handleOpenClose}>
-        {!selected && placeholder && (
-          <div className={styles.placeholder} aria-label={ariaLabel}>
-            {placeholder}
-          </div>
-        )}
-        {(selected || !placeholder) && (
-          <div className={styles.label} aria-label={ariaLabel}>
-            {label}
-            {!!selected && <div className={styles.reset}></div>}
-          </div>
-        )}
-        <div className={styles.chevron}>
-          {!opened && <CaretDown />}
-          {!!opened && <CaretUp />}
-        </div>
-      </div>
-
-      {!!opened && (
-        <DropdownFieldSelector>
-          {options.map((option: string | NameValueInterface, index: number) => {
-            return (
-              <DropdownFieldItem
-                key={index}
-                handleSelect={handleSelect}
-                label={typeof option === "object" ? option.label : option}
-                value={typeof option === "object" ? option.value : option}
-              />
-            );
-          })}
-        </DropdownFieldSelector>
-      )}
-
-      <input
-        name={name}
-        value={selected}
-        id={id}
-        type={"hidden"}
-        required={required}
-      />
-    </div>
-  );
-};
-
-export default DropdownField;

package/src/Components/Form/DropdownField/DropdownFieldItem.tsx

@@ -1,26 +0,0 @@
-import DropdownFieldItemProps from "./DropdownFieldItemProps";
-import styles from './dropdown.module.scss'
-import {MouseEvent} from "react";
-
-const DropdownFieldItem = (props: DropdownFieldItemProps) => {
-  const {
-    label,
-    value,
-    handleSelect
-  } = props;
-
-  return <div
-    className={styles.dropdownItem}
-    data-value={value} aria-label={label}
-    onClick={(e: MouseEvent) => {
-      if (handleSelect) {
-        handleSelect(e, value);
-      }
-    }}
-  >
-    {label}
-  </div>
-
-}
-
-export default DropdownFieldItem;

package/src/Components/Form/DropdownField/DropdownFieldItemProps.tsx

@@ -1,9 +0,0 @@
-import {MouseEvent} from "react";
-
-interface DropdownFieldItemProps {
-  label: string;
-  value: string|number;
-  handleSelect: (e: MouseEvent, value: string|number) => void;
-}
-
-export default DropdownFieldItemProps;

package/src/Components/Form/DropdownField/DropdownFieldProps.tsx

@@ -1,33 +0,0 @@
-import {MouseEvent, FocusEvent} from "react";
-
-interface NameValueInterface {
-  label: string;
-  value: string|number;
-}
-
-interface DropdownFieldProps {
-  name?: string;
-  id?: string;
-  value?: string;
-  options: NameValueInterface[]|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;
-  onClick?: (e: MouseEvent) => void;
-  onChange?: (e: MouseEvent) => void;
-  onFocus?: (e: FocusEvent) => void;
-  onBlur?: (e: FocusEvent) => void;
-}
-
-export type { NameValueInterface };
-
-export default DropdownFieldProps;

package/src/Components/Form/DropdownField/DropdownFieldSelector.tsx

@@ -1,15 +0,0 @@
-import cx from 'classnames';
-import DropdownFieldSelectorProps from "./DropdownFieldSelectorProps";
-import styles from './dropdown.module.scss';
-
-const DropdownFieldSelector = (props: DropdownFieldSelectorProps) => {
-
-  const classes = [styles.dropdownSelector];
-
-  return <div className={cx(classes)}>
-    {props.children}
-  </div>
-
-}
-
-export default DropdownFieldSelector;

package/src/Components/Form/DropdownField/dropdown.module.scss

@@ -1,79 +0,0 @@
-.dropdown {
-  position: relative;
-
-  .control {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    width: 100%;
-    height: 48px;
-    padding: var(--space-unit) calc(var(--space-unit) * 3);
-    border: 1px solid var(--color-gray-300);
-    border-radius: 6px;
-    font-family: var(--font);
-    font-size: var(--font-size-input);
-    line-height: var(--line-height-input);
-    font-weight: var(--line-height-input);
-    cursor: pointer;
-  }
-
-  .disabled {
-    cursor: not-allowed;
-    opacity: 0.3;
-    pointer-events: none;
-  }
-
-  .label {
-    flex-grow: 1;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    padding-right: calc(var(--space-unit) * 3);
-  }
-
-  .placeholder {
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    flex-grow: 1;
-    color: var(--color-gray-500);
-    font-size: var(--font-size-input);
-    line-height: var(--line-height-input);
-    font-weight: var(--font-weight-input);
-    padding-right: calc(var(--space-unit) * 3);
-  }
-
-  .chevron {
-    width: 16px;
-    height: 16px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    svg {
-      width: 100%;
-      height: auto;
-    }
-  }
-}
-
-.dropdownSelector {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  position: absolute;
-  padding: calc(var(--space-unit) * 2) 0;
-  border-radius: 4px;
-  background-color: var(--color-white);
-  box-shadow: var(--drop-shadow-default);
-}
-
-.dropdownItem {
-  padding: calc(var(--space-unit) * 2);
-  cursor: pointer;
-
-  &.active,
-  &:hover {
-    background-color: var(--color-gray-50);
-  }
-}

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

@@ -1,23 +0,0 @@
-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

@@ -1,51 +0,0 @@
-import cx from 'classnames';
-import styles from '../inputs.module.scss' ;
-import InputProps from "../InputProps";
-
-const EmailField = (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 <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}
-  />
-};
-
-
-export default EmailField;

package/src/Components/Form/ErrorMessage/ErrorMessage.tsx

@@ -1,5 +0,0 @@
-const ErrorMessage = () =>{
-
-}
-
-export default ErrorMessage;

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

@@ -1,30 +0,0 @@
-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 label="Name" description={"helper text"}>
-        <TextField placeholder="Placeholder" />
-      </FormFieldHolder>
-    );
-  },
-};
-
-export const FormFieldHolderComponent = {
-  ...FormFieldHolderTemplate,
-};

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

@@ -1,40 +0,0 @@
-import WarningCircle from "../../Icons/SecurityAndWarnings/WarningCircle/WarningCircle";
-import FormFieldHolderProps from "./FormFieldHolderProps";
-import styles from "./formHolder.module.scss";
-
-const FormFieldHolder = (props: FormFieldHolderProps) => {
-  const { label, description, extraClass = "", children, error } = props;
-
-  return (
-    <div
-      className={`field-holder ${extraClass} ${styles.holder} ${
-        error ? styles.holderError : ""
-      }`}
-    >
-      {!!label && (
-        <div className={styles.label}>
-          <label>{label}</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

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