@hellobetterdigitalnz/betterui 0.0.2 → 0.0.3-2

package/src/Components/Form/FormFieldHolder/formHolder.module.scss

@@ -1,56 +0,0 @@
-.holder {
-  margin-bottom: calc(var(--space-unit) * 5);
-  width: 100%;
-}
-
-.label {
-  display: block;
-  margin-bottom: calc(var(--space-unit) * 3);
-
-  label {
-    font-size: var(--font-size-label);
-    line-height: var(--line-height-label);
-    font-weight: var(--font-weight-label);
-  }
-
-  .holderError & {
-    color: var(--color-error);
-  }
-}
-
-.field {
-  .holderError & {
-    color: var(--color-error);
-  }
-}
-
-.description {
-  display: flex;
-  align-items: center;
-  font-size: var(--font-size-body-sm);
-  line-height: var(--line-height-body-sm);
-  font-weight: var(--font-weight-body-sm);
-  padding-top: calc(var(--space-unit) * 2);
-  color: var(--color-description);
-
-  p {
-    font-size: var(--font-size-body-sm);
-    line-height: var(--line-height-body-sm);
-    font-weight: var(--font-weight-body-sm);
-  }
-
-  .helperIcon {
-    margin-right: var(--space-unit);
-    display: flex;
-    align-items: center;
-
-    svg {
-      width: 16px;
-      height: 16px;
-    }
-  }
-
-  .holderError & {
-    color: var(--color-error);
-  }
-}

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

@@ -1,45 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-
-import IconButton from "./IconButton";
-import CalendarBank from "../../Icons/Time/CalendarBank/CalendarBank";
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-const meta = {
-  title: "Form / IconButton",
-  component: IconButton,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-} satisfies Meta<typeof IconButton>;
-
-export default meta;
-type Story = StoryObj<typeof IconButton>;
-
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
-export const Primary: Story = {
-  args: {
-    icon: <CalendarBank />,
-    style: "solid",
-    size: "default",
-    scheme: "primary",
-  },
-};
-
-export const Secondary: Story = {
-  args: {
-    icon: <CalendarBank />,
-    style: "hollow",
-    size: "default",
-    scheme: "primary",
-  },
-};
-
-export const Borderless: Story = {
-  args: {
-    icon: <CalendarBank type="bold" />,
-    style: "no-border",
-    size: "default",
-    scheme: "primary",
-  },
-};

package/src/Components/Form/IconButton/IconButton.tsx

@@ -1,58 +0,0 @@
-import cx from "classnames";
-import styles from "./iconButton.module.scss";
-import IconButtonProps from "./IconButtonProps";
-
-/**
- * Primary UI component for user interaction
- */
-const IconButton = (props: IconButtonProps) => {
-  const {
-    type = "button",
-    size = "default",
-    style,
-    disabled = false,
-    scheme,
-    icon,
-    ...args
-  } = props;
-
-  const classes = [
-    "button",
-    "btn",
-    `btn-${size}`,
-    `btn-${style}`,
-    `btn-${scheme}`,
-    styles.iconButton,
-  ];
-  if (size === "large") {
-    classes.push(styles.large);
-  } else if (size === "small") {
-    classes.push(styles.small);
-  } else if (size === "default") {
-    classes.push(styles.default);
-  }
-  if (style === "solid") {
-    classes.push(styles.solid);
-    classes.push(styles[`solid-${scheme}`]);
-  } else if (style === "hollow") {
-    classes.push(styles.hollow);
-    classes.push(styles[`hollow-${scheme}`]);
-  } else if (style === "no-border") {
-    classes.push(styles.noBorder);
-    classes.push(styles[`no-border-${scheme}`]);
-  }
-
-  if (disabled === true) {
-    classes.push(styles.disabled);
-  }
-
-  console.log(styles);
-
-  return (
-    <button type={type} className={cx(classes)} disabled={disabled} {...args}>
-      {icon}
-    </button>
-  );
-};
-
-export default IconButton;

package/src/Components/Form/IconButton/IconButtonProps.tsx

@@ -1,15 +0,0 @@
-import { ReactNode } from "react";
-
-interface IconButtonProps {
-  type?: "button" | "submit" | "reset";
-  size?: "default" | "large" | "small";
-  style?: "solid" | "hollow" | "no-border";
-  scheme?: "primary" | "secondary" | "gray";
-  disabled?: boolean;
-  icon?: ReactNode;
-  onClick?: () => void;
-  onHover?: () => void;
-  onFocus?: () => void;
-}
-
-export default IconButtonProps;

package/src/Components/Form/IconButton/iconButton.module.scss

@@ -1,111 +0,0 @@
-@import "../../../variables";
-
-.iconButton {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-width: 1px;
-  border-style: solid;
-  border-radius: 4px;
-  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;
-  }
-
-  &.solid {
-  }
-
-  &.hollow {
-  }
-
-  &.noBorder {
-    border-color: transparent;
-  }
-
-  &.default {
-    padding: calc(var(--space-unit) * 3);
-    min-height: 40px;
-  }
-
-  &.large {
-    padding: calc(var(--space-unit) * 4);
-    min-height: 48px;
-  }
-
-  &.small {
-    padding: calc(var(--space-unit) * 2);
-    min-height: 32px;
-  }
-
-  @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}-200);
-        color: var(--color-#{$color}-800);
-      }
-
-      &:active:enabled {
-        background-color: var(--color-#{$color}-100);
-        color: var(--color-#{$color}-800);
-      }
-    }
-  }
-}

package/src/Components/Form/InputProps.tsx

@@ -1,25 +0,0 @@
-import {FocusEvent, ChangeEvent, MouseEvent} from "react";
-
-interface InputProps {
-  name?: string;
-  id?: string;
-  value?: string;
-  extraClass?: string;
-  placeholder?: string;
-  error?: boolean;
-  disabled?:boolean;
-  readonly?: boolean;
-  autoComplete?: boolean;
-  required?: boolean;
-  ariaLabel?: string;
-  minLength?: number;
-  maxLength?: number;
-  ariaLabeledby?: string;
-  ariaDescribedby?: string;
-  onClick?: (e: MouseEvent) => void;
-  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
-  onFocus?: (e: FocusEvent) => void;
-  onBlur?: (e: FocusEvent) => void;
-}
-
-export default InputProps;

package/src/Components/Form/MultiSelectField/MultiSelectField.tsx

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

package/src/Components/Form/MultiSelectField/MultiSelectFieldItem.tsx

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

package/src/Components/Form/MultiSelectField/MultiSelectFieldTag.tsx

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

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

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

package/src/Components/Form/PasswordField/PasswordField.tsx

@@ -1,70 +0,0 @@
-import cx from "classnames";
-import InputProps from "../InputProps";
-import styles from "../inputs.module.scss";
-import Eye from "../../Icons/Design/Eye/Eye";
-import EyeSlash from "../../Icons/Design/EyeSlash/EyeSlash";
-import { useState } from "react";
-
-const PasswordField = (props: InputProps) => {
-  const {
-    name,
-    id,
-    value,
-    placeholder,
-    extraClass,
-    disabled,
-    error,
-    ariaLabel,
-    required,
-    readonly,
-    autoComplete,
-    ...args
-  } = props;
-
-  const [fieldType, setFieldType] = useState("password");
-
-  const onPasswordChange = () => {
-    setFieldType(fieldType === "password" ? "text" : "password");
-  };
-
-  const classes = [styles.input];
-  if (error) {
-    classes.push(styles.error);
-  }
-  if (extraClass) {
-    classes.push(extraClass);
-  }
-
-  return (
-    <div className={styles.passwordCon}>
-      <input
-        className={cx(classes)}
-        id={id}
-        name={name}
-        type={fieldType}
-        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}
-      />
-      <span onClick={onPasswordChange} className={styles.eyeicon}>
-        {fieldType == "password" ? (
-          <Eye type="regular" />
-        ) : (
-          <EyeSlash type="regular" />
-        )}
-      </span>
-    </div>
-  );
-};
-
-export default PasswordField;

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

@@ -1,70 +0,0 @@
-import cx from "classnames";
-import RadioButtonProps from "./RadioButtonProps";
-import styles from "./radiobutton.module.scss";
-import { useEffect, useState, MouseEvent } from "react";
-
-const RadioButton = (props: RadioButtonProps) => {
-  const {
-    name,
-    checked,
-    id,
-    value,
-    placeholder,
-    extraClass,
-    disabled,
-    error,
-    ariaLabel,
-    required,
-    readonly,
-    onChange,
-    ...args
-  } = props;
-
-  const [isChecked, setIsChecked] = useState(false);
-
-  const classes = ["radio", styles.radio];
-
-  if (extraClass) {
-    classes.push(extraClass);
-  }
-  if (error) {
-    classes.push(styles.error);
-  }
-
-  useEffect(() => {
-    setIsChecked(checked || false);
-  }, [checked]);
-
-  const handleClick = (e: MouseEvent) => {
-    setIsChecked(true);
-    if (onChange) {
-      onChange(e, true);
-    }
-  };
-
-  return (
-    <div className={cx(classes)}>
-      <input
-        id={id}
-        name={name}
-        checked={isChecked}
-        type={"radio"}
-        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}
-      />
-      <div className={styles.circle}></div>
-    </div>
-  );
-};
-
-export default RadioButton;

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

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

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

@@ -1,64 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import RadioButtons from "./RadioButtons";
-import RadioButton from "./RadioButton";
-
-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 (
-      <RadioButtons {...args}>
-        {items.map((item: any) => (
-          <RadioButton extraClass={"spacing"} name={item.name} id={item.id} />
-        ))}
-      </RadioButtons>
-    );
-  },
-};
-
-export const Default = {
-  ...RadioButtoTemplate,
-  args: {
-    columns: false,
-    items: [
-      {
-        id: "c-1",
-        name: "check-one",
-        disabled: false,
-      },
-      {
-        id: "c-2",
-        name: "check-one",
-      },
-      {
-        id: "c-3",
-        name: "check-one",
-      },
-      {
-        id: "c-4",
-        name: "check-one",
-      },
-      {
-        id: "c-5",
-        name: "check-one",
-      },
-      {
-        id: "c-6",
-        name: "check-one",
-      },
-    ],
-  },
-};

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

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

package/src/Components/Form/RadioButtons/radioButton.stories.scss

@@ -1,3 +0,0 @@
-.spacing {
-  padding: 4px;
-}

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

@@ -1,63 +0,0 @@
-.checkboxSet {
-  display: flex;
-
-  &.container {
-    flex-direction: column;
-  }
-}
-
-.radio {
-  position: relative;
-  display: inline-flex;
-  justify-content: center;
-  flex-shrink: 0;
-  flex-grow: 0;
-
-  input[type="radio"] {
-    -webkit-appearance: none;
-    width: 20px;
-    height: 20px;
-    border-radius: 100%;
-    background-color: var(--color-white);
-    border: 1px solid var(--color-gray-500);
-    outline-offset: 2px;
-    outline: 2px solid transparent;
-    cursor: pointer;
-    transition: linear 0.3s;
-
-    &:checked + .circle {
-      opacity: 1;
-    }
-
-    &:hover {
-      border: 2px solid var(--color-gray-800);
-    }
-
-    &:focus {
-      outline: 2px solid var(--color-gray-800);
-    }
-
-    &:disabled {
-      background-color: var(--color-gray-200);
-
-      &:checked {
-        border-color: var(--color-gray-200);
-      }
-    }
-  }
-
-  .circle {
-    content: "";
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 12px;
-    height: 12px;
-    border-radius: 100%;
-    background-color: var(--color-gray-800);
-    opacity: 0;
-    pointer-events: none;
-    transition: 0.3s;
-  }
-}

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

@@ -1,22 +0,0 @@
-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",
-  },
-};