@hellobetterdigitalnz/betterui 0.0.0 → 0.0.1

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

@@ -1,111 +1,111 @@
-@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);
-      }
-    }
-  }
-}
+@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 +1,25 @@
-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;
+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 +1,5 @@
-const MultiSelectField = () => {
-
-}
-
-export default MultiSelectField;
+const MultiSelectField = () => {
+
+}
+
+export default MultiSelectField;

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

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

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

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

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

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