@hellobetterdigitalnz/betterui 0.0.0

package/src/Components/Form/Button/button.module.scss

@@ -0,0 +1,142 @@
+@import "../../../variables";
+
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 4px;
+  font-size: var(--font-size-button);
+  font-weight: var(--font-weight-button);
+  line-height: var(--line-height-button);
+  cursor: pointer;
+  transition: linear all 300ms;
+  font-family: var(--font);
+
+  svg {
+    width: 20px;
+    height: 20px;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+
+  &.disabled {
+    opacity: 0.3;
+    cursor: not-allowed;
+  }
+
+  .primaryIcon,
+  .secondaryIcon {
+    width: 20px;
+    height: 20px;
+  }
+
+  .primaryIcon {
+    margin-right: calc(var(--space-unit) * 2);
+  }
+
+  .secondaryIcon {
+    margin-left: calc(var(--space-unit) * 2);
+  }
+
+  &.solid {
+  }
+
+  &.hollow {
+  }
+
+  &.noBorder {
+    border-color: transparent;
+    text-decoration-line: underline;
+    --font-weight-button: 400;
+  }
+
+  &.default {
+    padding: var(--spacing-1\/2) var(--spacing-1-1\/4);
+    min-height: 40px;
+
+    &.noBorder {
+      padding: var(--spacing-1\/2) var(--spacing-3\/4);
+    }
+  }
+
+  &.large {
+    padding: var(--spacing-1\/2) var(--spacing-2);
+    min-height: 48px;
+
+    &.noBorder {
+      padding: var(--spacing-1\/2) var(--spacing-1);
+    }
+  }
+
+  &.small {
+    padding: var(--spacing-1\/4) var(--spacing-3\/4);
+    min-height: 32px;
+
+    &.noBorder {
+      padding: var(--spacing-1\/2) var(--spacing-1\/2);
+    }
+  }
+
+  @each $color in $colors {
+    &.solid-#{$color} {
+      color: var(--color-lite);
+      background-color: var(--color-#{$color}-500);
+      border-color: var(--color-#{$color}-500);
+
+      &:hover:enabled {
+        background-color: var(--color-#{$color}-300);
+        border-color: var(--color-#{$color}-300);
+      }
+
+      &:active:enabled {
+        background-color: var(--color-#{$color}-600);
+        border-color: var(--color-#{$color}-600);
+      }
+    }
+  }
+
+  @each $color in $colors {
+    &.hollow-#{$color} {
+      background: transparent;
+      color: var(--color-#{$color}-800);
+      border-color: var(--color-#{$color}-600);
+
+      &:hover:enabled {
+        background: var(--color-#{$color}-100);
+      }
+
+      &:active:enabled {
+        background: var(--color-#{$color}-100);
+        border-width: 2px;
+      }
+    }
+  }
+
+  @each $color in $colors {
+    &.no-border-#{$color} {
+      background: transparent;
+      color: var(--color-#{$color}-800);
+      border-color: transparent;
+
+      &:hover:enabled {
+        background-color: var(--color-#{$color}-100);
+        color: var(--color-#{$color}-800);
+      }
+
+      &:active:enabled {
+        background-color: var(--color-#{$color}-100);
+        color: var(--color-#{$color}-800);
+      }
+    }
+  }
+
+  .button-icon {
+    display: flex;
+    align-items: center;
+    margin-right: calc(var(--spacing) * 2);
+  }
+}

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

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

package/src/Components/Form/Checkbox/Checkbox.tsx

@@ -0,0 +1,85 @@
+import cx from "classnames";
+import CheckboxProps from "./CheckboxProps";
+import styles from "./checkbox.module.scss";
+import { useEffect, useState, MouseEvent } from "react";
+
+const Checkbox = (props: CheckboxProps) => {
+  const {
+    name,
+    checked,
+    id,
+    value,
+    placeholder,
+    extraClass,
+    disabled,
+    error,
+    ariaLabel,
+    required,
+    readonly,
+    onChange,
+    ...args
+  } = props;
+
+  const [isChecked, setIsChecked] = useState(false);
+
+  const classes = ["checkbox", styles.checkbox];
+
+  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}
+      />
+      {!!isChecked && (
+        <svg
+          width="11"
+          height="10"
+          viewBox="0 0 11 10"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M10.8425 2.10473C11.0378 2.29999 11.0378 2.61658 10.8425 2.81184L4.47856 9.1758C4.2833 9.37106 3.96672 9.37106 3.77146 9.1758L0.353775 5.75812C0.158513 5.56286 0.158513 5.24627 0.353775 5.05101L1.41443 3.99035C1.6097 3.79509 1.92628 3.79509 2.12154 3.99035L4.12501 5.99382L9.07476 1.04407C9.27002 0.84881 9.5866 0.84881 9.78187 1.04407L10.8425 2.10473Z"
+            fillRule="evenodd"
+            clipRule="evenodd"
+            fill="currentColor"
+          />
+        </svg>
+      )}
+    </div>
+  );
+};
+
+export default Checkbox;

package/src/Components/Form/Checkbox/CheckboxProps.tsx

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

package/src/Components/Form/Checkbox/checkbox.module.scss

@@ -0,0 +1,63 @@
+.checkbox {
+  position: relative;
+  display: inline-flex;
+  justify-content: center;
+  flex-shrink: 0;
+  flex-grow: 0;
+
+  input[type="checkbox"] {
+    -webkit-appearance: none;
+    width: 20px;
+    height: 20px;
+    border-radius: 4px;
+    background-color: var(--color-white);
+    border: 1px solid var(--color-gray-300);
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+    cursor: pointer;
+
+    &:checked {
+      background-color: var(--color-gray-800);
+      border-color: var(--color-gray-800);
+    }
+
+    &:hover {
+      border-color: var(--color-gray-600);
+    }
+
+    &:focus {
+      outline: 2px solid var(--color-gray-800);
+    }
+
+    &:disabled {
+      background-color: var(--color-gray-200);
+
+      &:checked {
+        border-color: var(--color-gray-200);
+      }
+    }
+  }
+
+  svg {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    pointer-events: none;
+  }
+
+  input[type="checkbox"] ~ svg {
+    color: var(--color-white);
+  }
+
+  &.error {
+    input[type="checkbox"] {
+      border-color: var(--color-error);
+      color: var(--color-white);
+
+      &:checked {
+        background-color: var(--color-error);
+      }
+    }
+  }
+}

package/src/Components/Form/CheckboxSelect/CheckboxSelect.tsx

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

package/src/Components/Form/CheckboxSelect/CheckboxSelectItem.tsx

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

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

@@ -0,0 +1,93 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import CheckboxSet from "./CheckboxSet";
+import CheckboxSetItem from "./CheckboxSetItem";
+
+const meta: Meta = {
+  title: "Form / CheckboxSet",
+  component: CheckboxSet,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const CheckboxSetTemplate: Story = {
+  render: ({ items, ...args }) => {
+    return (
+      <CheckboxSet {...args}>
+        {items.map((item: any) => (
+          <CheckboxSetItem name={item.name} id={item.id} />
+        ))}
+      </CheckboxSet>
+    );
+  },
+};
+
+export const Default = {
+  ...CheckboxSetTemplate,
+  args: {
+    items: [
+      {
+        id: "c-1",
+        name: "check-one",
+      },
+      {
+        id: "c-1",
+        name: "check-one",
+      },
+      {
+        id: "c-1",
+        name: "check-one",
+      },
+      {
+        id: "c-1",
+        name: "check-one",
+      },
+      {
+        id: "c-1",
+        name: "check-one",
+      },
+      {
+        id: "c-1",
+        name: "check-one",
+      },
+    ],
+  },
+};
+
+export const Horizontal = {
+  ...CheckboxSetTemplate,
+  args: {
+    columns: true,
+    items: [
+      {
+        id: "c-1",
+        name: "check-one",
+      },
+      {
+        id: "c-1",
+        name: "check-one",
+      },
+      {
+        id: "c-1",
+        name: "check-one",
+      },
+      {
+        id: "c-1",
+        name: "check-one",
+      },
+      {
+        id: "c-1",
+        name: "check-one",
+      },
+      {
+        id: "c-1",
+        name: "check-one",
+      },
+    ],
+  },
+};

package/src/Components/Form/CheckboxSet/CheckboxSet.tsx

@@ -0,0 +1,14 @@
+import CheckboxSetProps from "./CheckboxSetProps";
+import styles from "./checkboxSet.module.scss";
+
+const CheckboxSet = (props: CheckboxSetProps) => {
+  const { children, error, columns } = props;
+
+  return (
+    <div className={`${styles.checkboxSet} ${columns ? styles.container : ""}`}>
+      {children}
+    </div>
+  );
+};
+
+export default CheckboxSet;

package/src/Components/Form/CheckboxSet/CheckboxSetItem.tsx

@@ -0,0 +1,88 @@
+import cx from "classnames";
+import CheckboxProps from "../Checkbox/CheckboxProps";
+import styles from "../Checkbox/checkbox.module.scss";
+import checkboxSetStyle from "./checkboxSet.module.scss";
+import { useEffect, useState, MouseEvent } from "react";
+
+const CheckboxSetItem = (props: CheckboxProps) => {
+  const {
+    name,
+    checked,
+    id,
+    value,
+    placeholder,
+    extraClass,
+    disabled,
+    error,
+    ariaLabel,
+    required,
+    readonly,
+    onChange,
+    ...args
+  } = props;
+
+  const [isChecked, setIsChecked] = useState(false);
+
+  const classes = ["checkbox", styles.checkbox];
+
+  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={checkboxSetStyle.checkboxSetItemCon}>
+      <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}
+        />
+        {!!isChecked && (
+          <svg
+            width="11"
+            height="10"
+            viewBox="0 0 11 10"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M10.8425 2.10473C11.0378 2.29999 11.0378 2.61658 10.8425 2.81184L4.47856 9.1758C4.2833 9.37106 3.96672 9.37106 3.77146 9.1758L0.353775 5.75812C0.158513 5.56286 0.158513 5.24627 0.353775 5.05101L1.41443 3.99035C1.6097 3.79509 1.92628 3.79509 2.12154 3.99035L4.12501 5.99382L9.07476 1.04407C9.27002 0.84881 9.5866 0.84881 9.78187 1.04407L10.8425 2.10473Z"
+              fillRule="evenodd"
+              clipRule="evenodd"
+              fill="currentColor"
+            />
+          </svg>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default CheckboxSetItem;

package/src/Components/Form/CheckboxSet/CheckboxSetProps.tsx

@@ -0,0 +1,9 @@
+import { ReactNode } from "react";
+
+interface CheckboxSetProps {
+  children: ReactNode;
+  error?: boolean;
+  columns?: boolean;
+}
+
+export default CheckboxSetProps;

package/src/Components/Form/CheckboxSet/checkboxSet.module.scss

@@ -0,0 +1,13 @@
+.checkboxSet {
+  display: flex;
+  margin: calc(-1 * var(--space-unit));
+
+  &.container {
+    flex-direction: column;
+  }
+}
+
+.checkboxSetItemCon {
+  flex-shrink: 0;
+  padding: calc(1 * var(--space-unit));
+}

package/src/Components/Form/CurrencyField/CurrenctField.stories.tsx

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

package/src/Components/Form/CurrencyField/CurrencyField.tsx

@@ -0,0 +1,59 @@
+import cx from "classnames";
+import styles from "../inputs.module.scss";
+import CurrencyFieldProps from "./CurrencyFieldProps";
+import CurrencyDollarSimple from "../../Icons/Commerce/CurrencyDollarSimple/CurrencyDollarSimple";
+
+const CurrencyField = (props: CurrencyFieldProps) => {
+  const {
+    name,
+    id,
+    value,
+    placeholder,
+    extraClass,
+    disabled,
+    error,
+    ariaLabel,
+    required,
+    readonly,
+    autoComplete,
+    currencyIcon,
+    ...args
+  } = props;
+
+  const classes = [styles.input];
+  if (error) {
+    classes.push(styles.error);
+  }
+  if (extraClass) {
+    classes.push(extraClass);
+  }
+
+  return (
+    <div className={styles.currency}>
+      <input
+        className={cx(classes)}
+        id={id}
+        name={name}
+        type="number"
+        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 className={styles.currencyIcon}>
+        {currencyIcon ? currencyIcon : <CurrencyDollarSimple />}
+      </div>
+    </div>
+  );
+};
+
+export default CurrencyField;

package/src/Components/Form/CurrencyField/CurrencyFieldProps.tsx

@@ -0,0 +1,8 @@
+import { ReactNode } from "react";
+import InputProps from "../InputProps";
+
+interface CurrencyFieldProps extends InputProps {
+  currencyIcon?: ReactNode;
+}
+
+export default CurrencyFieldProps;