@hellobetterdigitalnz/betterui 0.0.0 → 0.0.1

package/src/Components/DataDisplay/Table/TableCellWithDescProps.tsx

@@ -1,9 +1,9 @@
-interface TableCellWithDescProps {
-  heading?: string;
-  description?: string;
-  extraClass?: string;
-  rowspan?: number;
-  colspan?: number;
-}
-
-export default TableCellWithDescProps;
+interface TableCellWithDescProps {
+  heading?: string;
+  description?: string;
+  extraClass?: string;
+  rowspan?: number;
+  colspan?: number;
+}
+
+export default TableCellWithDescProps;

package/src/Components/DataDisplay/Table/TableCellWithImage.tsx

@@ -1,39 +1,39 @@
-import TableCellWithImageProps from "./TableCellWithImageProps";
-import styles from "./table.module.scss";
-
-const TableCellWithImage = (props: TableCellWithImageProps) => {
-  const { image, heading, description, extraClass, rowspan, colspan } = props;
-
-  const imageType = typeof image;
-
-  return (
-    <td
-      rowSpan={rowspan}
-      colSpan={colspan}
-      className={`${styles.tableCell} ${extraClass}`}
-    >
-      <div className={`${styles.cellWithPicture}`}>
-        {imageType === "string" && (
-          <div className={`${styles.cellImage} cellImage`}>
-            <img src={image ? `${image}` : ""} alt={image} />
-          </div>
-        )}
-        {imageType !== "string" && (
-          <div className={`${styles.cellImage} cellImage`}>{image}</div>
-        )}
-        <div>
-          {!!heading && (
-            <p className={`${styles.descTitle} descTitle`}>{heading}</p>
-          )}
-          {!!description && (
-            <p className={`${styles.smallDesc} smallDesc`}>
-              <small>{description}</small>
-            </p>
-          )}
-        </div>
-      </div>
-    </td>
-  );
-};
-
-export default TableCellWithImage;
+import TableCellWithImageProps from "./TableCellWithImageProps";
+import styles from "./table.module.scss";
+
+const TableCellWithImage = (props: TableCellWithImageProps) => {
+  const { image, heading, description, extraClass, rowspan, colspan } = props;
+
+  const imageType = typeof image;
+
+  return (
+    <td
+      rowSpan={rowspan}
+      colSpan={colspan}
+      className={`${styles.tableCell} ${extraClass}`}
+    >
+      <div className={`${styles.cellWithPicture}`}>
+        {imageType === "string" && (
+          <div className={`${styles.cellImage} cellImage`}>
+            <img src={image ? `${image}` : ""} alt={image} />
+          </div>
+        )}
+        {imageType !== "string" && (
+          <div className={`${styles.cellImage} cellImage`}>{image}</div>
+        )}
+        <div>
+          {!!heading && (
+            <p className={`${styles.descTitle} descTitle`}>{heading}</p>
+          )}
+          {!!description && (
+            <p className={`${styles.smallDesc} smallDesc`}>
+              <small>{description}</small>
+            </p>
+          )}
+        </div>
+      </div>
+    </td>
+  );
+};
+
+export default TableCellWithImage;

package/src/Components/DataDisplay/Table/TableCellWithImageProps.tsx

@@ -1,10 +1,10 @@
-interface TableCellWithImageProps {
-  image: string;
-  heading: string;
-  description?: string;
-  extraClass?: string;
-  rowspan?: number;
-  colspan?: number;
-}
-
-export default TableCellWithImageProps;
+interface TableCellWithImageProps {
+  image: string;
+  heading: string;
+  description?: string;
+  extraClass?: string;
+  rowspan?: number;
+  colspan?: number;
+}
+
+export default TableCellWithImageProps;

package/src/Components/DataDisplay/Table/TableFooter.tsx

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

package/src/Components/DataDisplay/Table/TableHead.tsx

@@ -1,11 +1,11 @@
-import TableHeadProps from "./TableHeadProps";
-import styles from "./table.module.scss";
-
-const TableHead = (props: TableHeadProps) => {
-  const { children, extraClass = "" } = props;
-  return (
-    <thead className={`${styles.tableHead} ${extraClass}`}>{children}</thead>
-  );
-};
-
-export default TableHead;
+import TableHeadProps from "./TableHeadProps";
+import styles from "./table.module.scss";
+
+const TableHead = (props: TableHeadProps) => {
+  const { children, extraClass = "" } = props;
+  return (
+    <thead className={`${styles.tableHead} ${extraClass}`}>{children}</thead>
+  );
+};
+
+export default TableHead;

package/src/Components/DataDisplay/Table/TableHeadProps.tsx

@@ -1,8 +1,8 @@
-import { ReactNode } from "react";
-
-interface TableHeadProps {
-  children: ReactNode;
-  extraClass?: string;
-}
-
-export default TableHeadProps;
+import { ReactNode } from "react";
+
+interface TableHeadProps {
+  children: ReactNode;
+  extraClass?: string;
+}
+
+export default TableHeadProps;

package/src/Components/DataDisplay/Table/TableHeaderCell.tsx

@@ -1,17 +1,17 @@
-import TableHeaderCellProps from "./TableHeaderCellProps";
-import styles from "./table.module.scss";
-
-const TableHeaderCell = (props: TableHeaderCellProps) => {
-  const { children, extraClass, rowspan, colspan } = props;
-  return (
-    <th
-      rowSpan={rowspan}
-      colSpan={colspan}
-      className={`${styles.tableCellHeading} ${extraClass}`}
-    >
-      {children}
-    </th>
-  );
-};
-
-export default TableHeaderCell;
+import TableHeaderCellProps from "./TableHeaderCellProps";
+import styles from "./table.module.scss";
+
+const TableHeaderCell = (props: TableHeaderCellProps) => {
+  const { children, extraClass, rowspan, colspan } = props;
+  return (
+    <th
+      rowSpan={rowspan}
+      colSpan={colspan}
+      className={`${styles.tableCellHeading} ${extraClass}`}
+    >
+      {children}
+    </th>
+  );
+};
+
+export default TableHeaderCell;

package/src/Components/DataDisplay/Table/TableHeaderCellProps.tsx

@@ -1,10 +1,10 @@
-import { ReactNode } from "react";
-
-interface TableHeaderCellProps {
-  children?: ReactNode;
-  extraClass?: string;
-  rowspan?: number;
-  colspan?: number;
-}
-
-export default TableHeaderCellProps;
+import { ReactNode } from "react";
+
+interface TableHeaderCellProps {
+  children?: ReactNode;
+  extraClass?: string;
+  rowspan?: number;
+  colspan?: number;
+}
+
+export default TableHeaderCellProps;

package/src/Components/DataDisplay/Table/TableProps.tsx

@@ -1,8 +1,8 @@
-import { ReactNode } from "react";
-
-interface TableProps {
-  children: ReactNode;
-  extraClass?: string;
-}
-
-export default TableProps;
+import { ReactNode } from "react";
+
+interface TableProps {
+  children: ReactNode;
+  extraClass?: string;
+}
+
+export default TableProps;

package/src/Components/DataDisplay/Table/TableRow.tsx

@@ -1,9 +1,9 @@
-import TableRowProps from "./TableRowProps";
-import styles from "./table.module.scss";
-
-const TableRow = (props: TableRowProps) => {
-  const { children, extraClass } = props;
-  return <tr className={`${styles.tableRow} ${extraClass}`}>{children}</tr>;
-};
-
-export default TableRow;
+import TableRowProps from "./TableRowProps";
+import styles from "./table.module.scss";
+
+const TableRow = (props: TableRowProps) => {
+  const { children, extraClass } = props;
+  return <tr className={`${styles.tableRow} ${extraClass}`}>{children}</tr>;
+};
+
+export default TableRow;

package/src/Components/DataDisplay/Table/TableRowProps.tsx

@@ -1,8 +1,8 @@
-import { ReactNode } from "react";
-
-interface TableRowProps {
-  children: ReactNode;
-  extraClass?: string;
-}
-
-export default TableRowProps;
+import { ReactNode } from "react";
+
+interface TableRowProps {
+  children: ReactNode;
+  extraClass?: string;
+}
+
+export default TableRowProps;

package/src/Components/DataDisplay/Table/table.module.scss

@@ -1,103 +1,103 @@
-.table {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-.tableBody {
-  width: 100%;
-}
-
-.tableRow {
-  border-bottom: 1px solid var(--color-gray-300);
-}
-
-.tableCellHeading {
-  text-align: left;
-  font-size: var(--font-size-body-sm);
-  line-height: var(--line-height-body-sm);
-  font-weight: var(--font-weight-body-sm);
-  padding: calc(var(--space-unit) * 5) calc(var(--space-unit) * 2)
-    calc(var(--space-unit) * 5) 0px;
-  color: var(--color-gray-600);
-}
-
-.tableCell {
-  font-size: var(--font-size-body-regular);
-  line-height: var(--line-height-body-regular);
-  font-weight: var(--font-weight-body-regular);
-  min-height: 60px;
-  height: 60px;
-  vertical-align: middle;
-  padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 2)
-    calc(var(--space-unit) * 2) 0px;
-
-  &.tableCellAlignLeft {
-    text-align: left;
-  }
-
-  &.tableCellAlignCenter {
-    text-align: center;
-  }
-
-  &.tableCellAlignRight {
-    text-align: right;
-  }
-}
-
-.tableCellActions {
-  > div {
-    display: flex;
-    justify-content: flex-end;
-    margin: 0 calc(-1 * var(--space-unit));
-
-    &.tableCellAlignLeft {
-      justify-content: flex-start;
-    }
-
-    &.tableCellAlignCenter {
-      justify-content: center;
-    }
-
-    &.tableCellAlignRight {
-      justify-content: flex-end;
-    }
-
-    > * {
-      margin: 0 var(--space-unit);
-    }
-
-    a,
-    button {
-      cursor: pointer;
-    }
-  }
-}
-
-.smallDesc {
-  font-size: var(--font-size-body-sm);
-  line-height: var(--line-height-body-sm);
-  font-weight: var(--font-weight-body-sm);
-  color: var(--color-gray-600);
-}
-
-.cellWithPicture {
-  display: flex;
-  flex-direction: row;
-}
-
-.cellImage {
-  position: relative;
-  overflow: hidden;
-  width: 40px;
-  height: 40px;
-  border-radius: 4px;
-  margin-right: calc(var(--space-unit) * 2);
-  flex-shrink: 0;
-
-  img {
-    object-fit: cover;
-    object-position: center;
-    height: 100%;
-    width: 100%;
-  }
-}
+.table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.tableBody {
+  width: 100%;
+}
+
+.tableRow {
+  border-bottom: 1px solid var(--color-gray-300);
+}
+
+.tableCellHeading {
+  text-align: left;
+  font-size: var(--font-size-body-sm);
+  line-height: var(--line-height-body-sm);
+  font-weight: var(--font-weight-body-sm);
+  padding: calc(var(--space-unit) * 5) calc(var(--space-unit) * 2)
+    calc(var(--space-unit) * 5) 0px;
+  color: var(--color-gray-600);
+}
+
+.tableCell {
+  font-size: var(--font-size-body-regular);
+  line-height: var(--line-height-body-regular);
+  font-weight: var(--font-weight-body-regular);
+  min-height: 60px;
+  height: 60px;
+  vertical-align: middle;
+  padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 2)
+    calc(var(--space-unit) * 2) 0px;
+
+  &.tableCellAlignLeft {
+    text-align: left;
+  }
+
+  &.tableCellAlignCenter {
+    text-align: center;
+  }
+
+  &.tableCellAlignRight {
+    text-align: right;
+  }
+}
+
+.tableCellActions {
+  > div {
+    display: flex;
+    justify-content: flex-end;
+    margin: 0 calc(-1 * var(--space-unit));
+
+    &.tableCellAlignLeft {
+      justify-content: flex-start;
+    }
+
+    &.tableCellAlignCenter {
+      justify-content: center;
+    }
+
+    &.tableCellAlignRight {
+      justify-content: flex-end;
+    }
+
+    > * {
+      margin: 0 var(--space-unit);
+    }
+
+    a,
+    button {
+      cursor: pointer;
+    }
+  }
+}
+
+.smallDesc {
+  font-size: var(--font-size-body-sm);
+  line-height: var(--line-height-body-sm);
+  font-weight: var(--font-weight-body-sm);
+  color: var(--color-gray-600);
+}
+
+.cellWithPicture {
+  display: flex;
+  flex-direction: row;
+}
+
+.cellImage {
+  position: relative;
+  overflow: hidden;
+  width: 40px;
+  height: 40px;
+  border-radius: 4px;
+  margin-right: calc(var(--space-unit) * 2);
+  flex-shrink: 0;
+
+  img {
+    object-fit: cover;
+    object-position: center;
+    height: 100%;
+    width: 100%;
+  }
+}

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

@@ -1,66 +1,63 @@
-import type { Meta, StoryObj } from "@storybook/react";
-
-import Button from "./Button";
-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 / Button",
-  component: Button,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-} satisfies Meta<typeof Button>;
-
-export default meta;
-type Story = StoryObj<typeof Button>;
-
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
-export const Primary: Story = {
-  args: {
-    label: "Button Text",
-    style: "solid",
-    size: "default",
-    scheme: "primary",
-  },
-};
-
-export const Secondary: Story = {
-  args: {
-    label: "Button Text",
-    style: "hollow",
-    size: "default",
-    scheme: "primary",
-  },
-};
-
-export const Borderless: Story = {
-  args: {
-    label: "Button Text",
-    style: "no-border",
-    size: "default",
-    scheme: "primary",
-  },
-};
-
-export const WithPrimaryIcon: Story = {
-  args: {
-    label: "Button Text",
-    style: "solid",
-    size: "default",
-    scheme: "primary",
-    primaryIcon: <CalendarBank />,
-  },
-};
-
-export const WithPrimaryIconAndSecondaryIcon: Story = {
-  args: {
-    label: "Button Text",
-    style: "solid",
-    size: "default",
-    scheme: "primary",
-    primaryIcon: <CalendarBank />,
-    secondaryIcon: <CalendarBank />,
-  },
-};
+import type { Meta, StoryObj } from "@storybook/react";
+
+import Button from "./Button";
+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 / Button",
+  component: Button,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary: Story = {
+  args: {
+    label: "Button Text",
+    style: "solid",
+    size: "default",
+    scheme: "primary",
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    label: "Button Text",
+  },
+};
+
+export const Borderless: Story = {
+  args: {
+    label: "Button Text",
+    style: "no-border",
+    size: "default",
+    scheme: "primary",
+  },
+};
+
+export const WithPrimaryIcon: Story = {
+  args: {
+    label: "Button Text",
+    style: "solid",
+    size: "default",
+    scheme: "primary",
+    primaryIcon: <CalendarBank />,
+  },
+};
+
+export const WithPrimaryIconAndSecondaryIcon: Story = {
+  args: {
+    label: "Button Text",
+    style: "solid",
+    size: "default",
+    scheme: "primary",
+    primaryIcon: <CalendarBank />,
+    secondaryIcon: <CalendarBank />,
+  },
+};