@hellobetterdigitalnz/betterui 0.0.0

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

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

package/src/Components/Form/DateField/DateField.tsx

@@ -0,0 +1,58 @@
+import cx from "classnames";
+import InputProps from "../InputProps";
+import styles from "../inputs.module.scss";
+import CalendarBank from "../../Icons/Time/CalendarBank/CalendarBank";
+
+const DateField = (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.date}>
+      <input
+        className={cx(classes)}
+        id={id}
+        name={name}
+        type="date"
+        value={value}
+        placeholder="YYYY-MM-DD"
+        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 className={styles.calendarIcon}>
+        <CalendarBank type="light" />
+      </div>
+    </div>
+  );
+};
+
+export default DateField;

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

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import DropdownField from "./DropdownBadge";
+import { NameValueInterface } from "./DropdownBadgeProps";
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: "Form / Dropdown Badge",
+  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-badge",
+    options: [
+      {
+        label: "Pending",
+        value: 1,
+        status: "pending",
+      },
+
+      {
+        label: "In Progress",
+        value: 2,
+        status: "inProgress",
+      },
+      {
+        label: "Complete",
+        value: 3,
+        status: "complete",
+      },
+    ] as NameValueInterface[],
+  },
+};
+
+export const Withoutstatus: Story = {
+  args: {
+    name: "dropdown-badge",
+    options: ["Pending", "In Progress", "Complete"],
+  },
+};

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

@@ -0,0 +1,160 @@
+import cx from "classnames";
+import { useEffect, useState, MouseEvent } from "react";
+import DropdownBadgeProps, { NameValueInterface } from "./DropdownBadgeProps";
+import styles from "./dropdownBadge.module.scss";
+import CaretDown from "../../Icons/Arrows/CaretDown/CaretDown";
+import CaretUp from "../../Icons/Arrows/CaretUp/CaretUp";
+import DropdownBadgeSelector from "./DropdownBadgeSelector";
+import DropdownBadgeItem from "./DropdownBadgeItem";
+
+const DropdownBadge = (props: DropdownBadgeProps) => {
+  const {
+    name,
+    id,
+    value,
+    options,
+    extraClass,
+    ariaLabel,
+    required,
+    status,
+    // onClick,
+    // readonly,
+    onChange,
+    // ...args
+  } = props;
+
+  const [opened, setOpened] = useState(false);
+  const [selected, setSelected] = useState<string | number>();
+  const [label, setLabel] = useState("");
+  const [statusClass, setStatusClass] = useState("");
+
+  useEffect(() => {
+    setSelected(value);
+  }, [value]);
+
+  const getStatusClass = (
+    status: "pending" | "inProgress" | "complete" | undefined
+  ) => {
+    switch (status) {
+      case "pending":
+        return styles.circlePending;
+      case "inProgress":
+        return styles.circleInProgress;
+      case "complete":
+        return styles.circleComplete;
+      default:
+        return "";
+    }
+  };
+
+  useEffect(() => {
+    const defaultOption = options[0];
+
+    if (defaultOption) {
+      setSelected(
+        typeof defaultOption === "object" ? defaultOption.value : defaultOption
+      );
+
+      if (typeof defaultOption === "object") {
+        setLabel(defaultOption.label || "");
+        setStatusClass(
+          defaultOption.status ? getStatusClass(defaultOption.status) : ""
+        );
+      }
+    }
+  }, [value, options]);
+
+  useEffect(() => {
+    // selected or status 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);
+
+        if (typeof option === "object" && option.status) {
+          setStatusClass(getStatusClass(option.status));
+        } else {
+          setStatusClass("");
+        }
+        break;
+      }
+    }
+  }, [selected, options, status]);
+
+  const classNames = [styles.dropdown];
+  if (extraClass) {
+    classNames.push(extraClass);
+  }
+
+  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 && (
+          <div className={styles.labelWrapper}>
+            {label && statusClass && (
+              <div className={cx(styles.circle, statusClass)}></div>
+            )}
+            <div className={styles.label} aria-label={ariaLabel}>
+              {label}
+              {!!selected && <div className={styles.reset}></div>}
+            </div>
+          </div>
+        )}
+        <div className={styles.divider}></div>
+        <div className={styles.chevron}>
+          {!opened && <CaretDown />}
+          {!!opened && <CaretUp />}
+        </div>
+      </div>
+
+      {!!opened && (
+        <DropdownBadgeSelector>
+          {options.map((option: string | NameValueInterface, index: number) => (
+            <DropdownBadgeItem
+              key={index}
+              handleSelect={handleSelect}
+              status={
+                typeof option === "object"
+                  ? (option.status as
+                      | "pending"
+                      | "inProgress"
+                      | "complete"
+                      | undefined)
+                  : undefined
+              }
+              label={typeof option === "object" ? option.label : option}
+              value={typeof option === "object" ? option.value : option}
+            />
+          ))}
+        </DropdownBadgeSelector>
+      )}
+
+      <input
+        name={name}
+        value={selected}
+        id={id}
+        type={"hidden"}
+        required={required}
+      />
+    </div>
+  );
+};
+
+export default DropdownBadge;

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

@@ -0,0 +1,40 @@
+import cx from "classnames";
+import DropdownBadgeItemProps from "./DropdownBadgeItemProps";
+import styles from "./dropdownBadge.module.scss";
+import { MouseEvent } from "react";
+
+const DropdownBadgeItem = (props: DropdownBadgeItemProps) => {
+  const { label, value, status, handleSelect } = props;
+
+  let statusClass;
+  if (status === "pending") {
+    statusClass = styles.circlePending;
+  }
+
+  if (status === "inProgress") {
+    statusClass = styles.circleInProgress;
+  }
+  if (status === "complete") {
+    statusClass = styles.circleComplete;
+  }
+
+  return (
+    <div
+      className={styles.dropdownItem}
+      data-value={value}
+      aria-label={label}
+      onClick={(e: MouseEvent) => {
+        if (handleSelect) {
+          handleSelect(e, value);
+        }
+      }}
+    >
+      {label && statusClass && (
+        <div className={cx(styles.circle, statusClass)}></div>
+      )}
+      {label}
+    </div>
+  );
+};
+
+export default DropdownBadgeItem;

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

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

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

@@ -0,0 +1,11 @@
+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/DropdownBadgeSelectorProps.tsx

@@ -0,0 +1,7 @@
+import { ReactNode } from "react";
+
+interface DropdownBadgeSelectorProps {
+  children: ReactNode;
+}
+
+export default DropdownBadgeSelectorProps;

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

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

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

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

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