@hellobetterdigitalnz/betterui 0.0.0 → 0.0.1

package/src/Components/Form/Button/Button.tsx

@@ -1,64 +1,64 @@
-import cx from "classnames";
-import ButtonProps from "./ButtonProps";
-import styles from "./button.module.scss";
-
-/**
- * Primary UI component for user interaction
- */
-const Button = (props: ButtonProps) => {
-  const {
-    type = "button",
-    size = "default",
-    style,
-    disabled = false,
-    scheme,
-    label,
-    primaryIcon,
-    secondaryIcon,
-    ...args
-  } = props;
-
-  const classes = [
-    "button",
-    "btn",
-    `btn-${size}`,
-    `btn-${style}`,
-    `btn-${scheme}`,
-    styles.button,
-  ];
-  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}>
-      {primaryIcon && <div className={styles.primaryIcon}>{primaryIcon}</div>}
-      {label}
-      {secondaryIcon && (
-        <div className={styles.secondaryIcon}>{primaryIcon}</div>
-      )}
-    </button>
-  );
-};
-
-export default Button;
+import cx from "classnames";
+import ButtonProps from "./ButtonProps";
+import styles from "./button.module.scss";
+
+/**
+ * Primary UI component for user interaction
+ */
+const Button = (props: ButtonProps) => {
+  const {
+    type = "button",
+    size = "default",
+    style,
+    disabled = false,
+    scheme,
+    label,
+    primaryIcon,
+    secondaryIcon,
+    ...args
+  } = props;
+
+  const classes = [
+    "button",
+    "btn",
+    `btn-${size}`,
+    `btn-${style}`,
+    `btn-${scheme}`,
+    styles.button,
+  ];
+  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}>
+      {primaryIcon && <div className={styles.primaryIcon}>{primaryIcon}</div>}
+      {label}
+      {secondaryIcon && (
+        <div className={styles.secondaryIcon}>{primaryIcon}</div>
+      )}
+    </button>
+  );
+};
+
+export default Button;

package/src/Components/Form/Button/ButtonProps.tsx

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

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

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

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