@hellobetterdigitalnz/betterui 0.0.0 → 0.0.1

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

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

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

@@ -1,63 +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);
-      }
-    }
-  }
-}
+.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

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

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

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

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

@@ -1,93 +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",
-      },
-    ],
-  },
-};
+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

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