@hellobetterdigitalnz/betterui 0.0.0

package/src/Components/DataDisplay/Tab/tab.module.scss

@@ -0,0 +1,35 @@
+.tab {
+  width: 100%;
+
+  .tabNav {
+    display: flex;
+    width: 100%;
+    border-bottom: 1px solid var(--color-gray-300);
+  }
+
+  .tabNavItem {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    min-height: 54px;
+    border-width: 0 0 3px 0;
+    border-style: solid;
+    border-color: transparent;
+    transition: 0.4s;
+    cursor: pointer;
+    margin-right: var(--spacing-2);
+
+    &.active,
+    &:hover {
+      background: var(--color-table);
+      border-color: var(--color-primary-400);
+    }
+  }
+
+  .item {
+    padding-left: calc(var(--spacing) * 2.25);
+    font-size: var(--font-size-h4);
+    line-height: var(--line-height-h4);
+    font-weight: var(--font-weight-h4);
+  }
+}

package/src/Components/DataDisplay/Tab/tab.stories.scss

@@ -0,0 +1,3 @@
+.tab-body--pd{
+  padding: var(--spacing-1);
+}

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

@@ -0,0 +1,64 @@
+import { Meta, StoryObj } from "@storybook/react";
+import Table from "./Table";
+import TableHead from "./TableHead";
+import TableHeaderCell from "./TableHeaderCell";
+import TableRow from "./TableRow";
+import TableBody from "./TableBody";
+import TableCell from "./TableCell";
+import TableCellWithDesc from "./TableCellWithDesc";
+import TableCellWithImage from "./TableCellWithImage";
+
+const meta: Meta = {
+  title: "Data Display / Table",
+  component: Table,
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const TableTemplate: Story = {
+  render: ({ items, ...args }) => {
+    return (
+      <Table {...args}>
+        <TableHead>
+          <TableRow>
+            <TableHeaderCell>Lorem ipsum</TableHeaderCell>
+            <TableHeaderCell>Lorem ipsum</TableHeaderCell>
+            <TableHeaderCell>Lorem ipsum</TableHeaderCell>
+            <TableHeaderCell>Lorem ipsum</TableHeaderCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          <TableRow>
+            <TableCellWithImage
+              image={"./image/table-image.png"}
+              heading={"Lorem ipsum"}
+              description={"Lorem ipsum"}
+            />
+            <TableCellWithDesc
+              heading={"Lorem ipsum"}
+              description={"Lorem ipsum"}
+            />
+            <TableCell>desc</TableCell>
+            <TableCell>desc</TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>Lorem ipsum</TableCell>
+            <TableCellWithDesc
+              heading={"Lorem ipsum"}
+              description={"Lorem ipsum"}
+            />
+            <TableCell>desc</TableCell>
+            <TableCell>desc</TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    );
+  },
+};
+
+export const Example = {
+  ...TableTemplate,
+};

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

@@ -0,0 +1,10 @@
+import TableProps from "./TableProps";
+import styles from "./table.module.scss";
+
+const Table = (props: TableProps) => {
+  const { children, extraClass } = props;
+
+  return <table className={`${styles.table} ${extraClass}`}>{children}</table>;
+};
+
+export default Table;

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

@@ -0,0 +1,13 @@
+import TableBodyProps from "./TableBodyProps";
+import styles from "./table.module.scss";
+
+const TableBody = (props: TableBodyProps) => {
+  const { children, extraClass = "" } = props;
+  return (
+    <>
+      <tbody className={`${styles.tableBody} ${extraClass} `}>{children}</tbody>
+    </>
+  );
+};
+
+export default TableBody;

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

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

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

@@ -0,0 +1,30 @@
+import TableCellProps from "./TableCellProps";
+import styles from "./table.module.scss";
+import cx from "classnames";
+
+const TableCell = (props: TableCellProps) => {
+  const { children, rowspan, colspan, extraClass, align } = props;
+  const dataType = typeof children;
+
+  let tableCell = styles.tableCellAlignLeft;
+
+  if (align === "center") {
+    tableCell = styles.tableCellAlignCenter;
+  }
+  if (align === "right") {
+    tableCell = styles.tableCellAlignRight;
+  }
+
+  const combinedClassNames = cx(tableCell, extraClass);
+
+  return (
+    <td rowSpan={rowspan} colSpan={colspan} className={combinedClassNames}>
+      <>
+        {dataType === "string" && <p>{children}</p>}
+        {dataType !== "string" && <>{children}</>}
+      </>
+    </td>
+  );
+};
+
+export default TableCell;

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

@@ -0,0 +1,27 @@
+import TableCellActionProps from "./TableCellActionProps";
+import styles from "./table.module.scss";
+
+const TableCellActions = (props: TableCellActionProps) => {
+  const { children, extraClass, rowspan, colspan, align } = props;
+
+  let tableCell = styles.tableCellAlignLeft;
+
+  if (align === "center") {
+    tableCell = styles.tableCellAlignCenter;
+  }
+  if (align === "right") {
+    tableCell = styles.tableCellAlignRight;
+  }
+
+  return (
+    <td
+      rowSpan={rowspan}
+      colSpan={colspan}
+      className={`${styles.tableCell} ${extraClass} ${styles.tableCellActions}`}
+    >
+      <div className={tableCell}>{children}</div>
+    </td>
+  );
+};
+
+export default TableCellActions;

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

@@ -0,0 +1,11 @@
+import { ReactNode } from "react";
+
+interface TableCellActionProps {
+  children: ReactNode;
+  align?: "left" | "center" | "right";
+  extraClass?: string;
+  rowspan?: number;
+  colspan?: number;
+}
+
+export default TableCellActionProps;

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

@@ -0,0 +1,11 @@
+import { ReactNode } from "react";
+
+interface TableCellProps {
+  children?: ReactNode;
+  align?: "left" | "center" | "right";
+  rowspan?: number;
+  colspan?: number;
+  extraClass?: string;
+}
+
+export default TableCellProps;

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

@@ -0,0 +1,21 @@
+import TableCellWithDescProps from "./TableCellWithDescProps";
+import styles from "./table.module.scss";
+
+const TableCellWithDesc = (props: TableCellWithDescProps) => {
+  const { heading, description, extraClass, rowspan, colspan } = props;
+
+  return (
+    <td
+      rowSpan={rowspan}
+      colSpan={colspan}
+      className={`${styles.tableCell} ${extraClass}`}
+    >
+      <div>
+        {!!heading && <p className={styles.descTitle}>{heading}</p>}
+        {!!description && <p className={styles.smallDesc}>{description}</p>}
+      </div>
+    </td>
+  );
+};
+
+export default TableCellWithDesc;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +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%;
+  }
+}

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

@@ -0,0 +1,66 @@
+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 />,
+  },
+};

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

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

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

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