@hellobetterdigitalnz/betterui 0.0.2 → 0.0.3-2

package/src/Components/DataDisplay/NotificationsPanel/NotificationsHeader.tsx

@@ -1,27 +0,0 @@
-import NotificationsHeaderProps from "./NotificationsHeaderProps";
-import styles from "./notificationPanel.module.scss";
-const NotificationsHeader = (props: NotificationsHeaderProps) => {
-  const { extraClass, markAllAsReadOnClick, showMarkAllAsRead } = props;
-
-  return (
-    <div className={`${styles.notificationheader} ${extraClass}`}>
-      <div className={styles.notificationHeaderWrapper}>
-        <div>
-          <h5>Notifications</h5>
-        </div>
-        <div>
-          {showMarkAllAsRead && (
-            <div
-              onClick={markAllAsReadOnClick}
-              className={styles.notificationMarkAllAction}
-            >
-              <h6>Mark all as Read</h6>
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default NotificationsHeader;

package/src/Components/DataDisplay/NotificationsPanel/NotificationsHeaderProps.tsx

@@ -1,7 +0,0 @@
-interface NotificationsHeaderProps {
-  extraClass?: string;
-  markAllAsReadOnClick?: () => void;
-  showMarkAllAsRead?: boolean;
-}
-
-export default NotificationsHeaderProps;

package/src/Components/DataDisplay/NotificationsPanel/NotificationsNone.tsx

@@ -1,11 +0,0 @@
-import styles from "./notificationPanel.module.scss";
-
-const NotificationsNone = () => {
-  return (
-    <li className={styles.notificationNone}>
-      <h6>No notifications.</h6>
-    </li>
-  );
-};
-
-export default NotificationsNone;

package/src/Components/DataDisplay/NotificationsPanel/NotificationsPanel.tsx

@@ -1,8 +0,0 @@
-import NotificationsPanelProps from "./NotificationsPanelProps";
-import styles from "./notificationPanel.module.scss";
-
-const NotificationsPanel = ({ children }: NotificationsPanelProps) => {
-  return <div className={styles.notificationPanel}>{children}</div>;
-};
-
-export default NotificationsPanel;

package/src/Components/DataDisplay/NotificationsPanel/NotificationsPanelProps.tsx

@@ -1,7 +0,0 @@
-import { ReactNode } from "react"
-
-interface NotificationsPanelProps{
-  children?:ReactNode
-}
-
-export default NotificationsPanelProps

package/src/Components/DataDisplay/NotificationsPanel/notificationPanel.module.scss

@@ -1,196 +0,0 @@
-.notificationPanel {
-  border-radius: 8px;
-  width: 100%;
-  background: white;
-  box-shadow: var(--drop-shadow-default);
-  min-width: 320px;
-  max-width: 320px;
-}
-
-.notificationheader {
-  border-bottom: 1px solid var(--color-gray-200);
-
-  .notificationHeaderWrapper {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: var(--spacing-1-1\/2) var(--spacing-2);
-
-    h5 {
-      font-size: var(--font-size-h5);
-      font-weight: var(--font-weight-h5);
-      line-height: var(--line-height-h5);
-    }
-
-    .notificationMarkAllAction {
-      h6 {
-        font-size: var(--font-size-body-sm);
-        font-weight: var(--font-weight-body-sm);
-        line-height: var(--line-height-body-sm);
-        cursor: pointer;
-        transition: all 0.3s;
-
-        &:hover {
-          text-decoration: underline;
-        }
-      }
-    }
-  }
-}
-
-.notificationGrouplistHolder {
-  overflow-y: auto;
-  max-height: 500px;
-
-  &.spacing {
-    margin-right: 4px;
-  }
-
-  &::-webkit-scrollbar {
-    width: 4px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: none;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    border-radius: 2px;
-    background: rgba(0, 0, 0, 0.1);
-  }
-
-  &::-webkit-scrollbar-thumb:hover {
-    background: rgba(0, 0, 0, 0.15);
-  }
-}
-
-.notificationGrouplist {
-  min-height: 70px;
-  list-style: none;
-}
-
-.notificationGroup {
-  padding: var(--spacing-1-1\/2) var(--spacing-2) var(--spacing-1\/2)
-    var(--spacing-2);
-  h6 {
-    color: var(--color-gray-600);
-    font-size: 12px;
-    font-style: normal;
-    font-weight: 600;
-    line-height: 22px;
-  }
-}
-
-.notificationNone {
-  min-height: 70px;
-  list-style: none;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  h6 {
-    color: var(--color-gray-600);
-    font-size: var(--font-size-body-sm);
-    font-weight: var(--font-weight-body-sm);
-    line-height: var(--line-height-body-sm);
-  }
-}
-
-.notificationList {
-  padding: var(--spacing-1) var(--spacing-2) var(--spacing-1)
-    var(--spacing-3\/4);
-  transition: background-color 0.2s linear;
-  cursor: pointer;
-
-  &:hover {
-    background: var(--color-gray-100);
-  }
-
-  &:hover .notificationListPip {
-    opacity: 0;
-  }
-
-  &:hover .notificationListCloseIcon {
-    opacity: 1;
-  }
-
-  .notificationListWrapper {
-    display: flex;
-    align-items: center;
-  }
-
-  .notificationListPip {
-    width: 8px;
-    height: 8px;
-    border-radius: 100%;
-    background: var(--color-primary-500);
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    opacity: 1;
-    transform: translate(-50%, -50%);
-    transition: opacity 0.2s linear;
-  }
-
-  .notificationListCloseIcon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    opacity: 0;
-
-    svg {
-      width: 12px;
-      height: 12px;
-    }
-  }
-
-  .notificationListIcon {
-    cursor: pointer;
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-right: var(--spacing-3\/4);
-    transition: opacity 0.2s linear;
-  }
-
-  .notificationListContent {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .notificationListInitial {
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 32px;
-    height: 32px;
-    background: var(--color-primary-700);
-    color: var(--color-lite);
-    border-radius: 100%;
-    margin-right: var(--spacing-3\/4);
-
-    .notificationListInitialWrapper {
-      --font-size-body-sm: 600;
-      font-size: var(--font-size-body-sm);
-      font-weight: var(--font-weight-body-sm);
-      line-height: var(--line-height-body-sm);
-    }
-  }
-
-  .notificationListDesc {
-    font-size: var(--font-size-body-xsm);
-    font-weight: var(--font-size-body-xsm);
-    line-height: var(--line-height-body-xsm);
-
-    .boldText {
-      font-weight: 600;
-    }
-
-    .summaryText {
-      color: var(--color-primary-500);
-    }
-  }
-}

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

@@ -1,72 +0,0 @@
-import {Meta, StoryObj} from '@storybook/react';
-import {Tab} from './Tab.tsx';
-import {TabNav} from './TabNav.tsx';
-import {TabNavItem} from "./TabNavItem.tsx";
-import {TabBody} from "./TabBody.tsx";
-import {TabBodyContent} from "./TabBodyContent.tsx";
-import './tab.stories.scss'
-
-const meta: Meta = {
-  title: 'Data Display/Tab',
-  component: Tab,
-  tags: ['autodocs'],
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-const TabTemplate: Story = {
-  render: ({items}) => {
-    return (
-      <Tab>
-        <TabNav>
-        {items.map((item: any) => (
-          <TabNavItem tabIndex={item.index} title={`${item.title} ${item.index}`}/>
-        ))}
-        </TabNav>
-        <TabBody extraClass={'tab-body--pd'}>
-          {items.map((item: any) => (
-          <TabBodyContent tabIndex={item.index}>
-            <div className={`typography`}>
-              <h3>Tab {item.index} content</h3>
-              <p>
-                {item.desc}
-              </p>
-            </div>
-          </TabBodyContent>
-          ))}
-        </TabBody>
-      </Tab>
-    );
-  },
-};
-
-export const Example = {
-  ...TabTemplate,
-  args: {
-    items: [
-      {
-        index:0,
-        title: 'Item',
-        desc: 'Sed fringilla magna facilisis auctor venenatis. Duis ut vestibulum risus. Nunc a finibus dui. Donec hendrerit tristique odio, ac porta dui maximus et. Duis vestibulum velit eget erat fermentum, fermentum mollis tortor tincindexunt. Integer lacinia lacinia urna scelerisque mattis. Fusce vestibulum felis eget magna placerat faucibus index et tellus. Sed rutrum mi sed leo viverra tempus. Nunc eu congue tellus, sed dapibus dui.'
-      },
-      {
-        index:1,
-        title: 'Item',
-        desc: 'Sed fringilla magna facilisis auctor venenatis. Duis ut vestibulum risus. Nunc a finibus dui. Donec hendrerit tristique odio, ac porta dui maximus et. Duis vestibulum velit eget erat fermentum, fermentum mollis tortor tincindexunt. Integer lacinia lacinia urna scelerisque mattis. Fusce vestibulum felis eget magna placerat faucibus index et tellus. Sed rutrum mi sed leo viverra tempus. Nunc eu congue tellus, sed dapibus dui.'
-      },
-      {
-        index:2,
-        title: 'Item',
-        desc: 'Sed fringilla magna facilisis auctor venenatis. Duis ut vestibulum risus. Nunc a finibus dui. Donec hendrerit tristique odio, ac porta dui maximus et. Duis vestibulum velit eget erat fermentum, fermentum mollis tortor tincindexunt. Integer lacinia lacinia urna scelerisque mattis. Fusce vestibulum felis eget magna placerat faucibus index et tellus. Sed rutrum mi sed leo viverra tempus. Nunc eu congue tellus, sed dapibus dui.'
-      },
-      {
-        index:3,
-        title: 'Item',
-        desc: 'Sed fringilla magna facilisis auctor venenatis. Duis ut vestibulum risus. Nunc a finibus dui. Donec hendrerit tristique odio, ac porta dui maximus et. Duis vestibulum velit eget erat fermentum, fermentum mollis tortor tincindexunt. Integer lacinia lacinia urna scelerisque mattis. Fusce vestibulum felis eget magna placerat faucibus index et tellus. Sed rutrum mi sed leo viverra tempus. Nunc eu congue tellus, sed dapibus dui.'
-      },
-    ],
-  },
-};
-

package/src/Components/DataDisplay/Tab/Tab.tsx

@@ -1,20 +0,0 @@
-import { useState } from "react";
-
-import TabContext from "./TabContext";
-import TabInterface from "./TabProps.tsx";
-import styles from "./tab.module.scss";
-
-export const Tab = ({ children, extraClass }: TabInterface) => {
-  const [index, setIndex] = useState(0);
-
-  return (
-    <TabContext.Provider
-      value={{
-        currentIndex: index,
-        setCurrentIndex: setIndex,
-      }}
-    >
-      <div className={`${styles.tab} ${extraClass}`}>{children}</div>
-    </TabContext.Provider>
-  );
-};

package/src/Components/DataDisplay/Tab/TabBody.tsx

@@ -1,6 +0,0 @@
-import TabBodyProps from "./TabBodyProps.tsx";
-import styles from "./tab.module.scss";
-
-export const TabBody = ({ children, extraClass }: TabBodyProps) => {
-  return <div className={`${styles.tabBody} ${extraClass}`}>{children}</div>;
-};

package/src/Components/DataDisplay/Tab/TabBodyContent.tsx

@@ -1,15 +0,0 @@
-import { useContext } from "react";
-import TabContext from "./TabContext";
-import TabBodyContentProps from "./TabBodyContentProps.tsx";
-
-export const TabBodyContent = ({
-  children,
-  tabIndex,
-  extraClass,
-}: TabBodyContentProps) => {
-  const tabContext = useContext(TabContext);
-  if (tabIndex === tabContext.currentIndex) {
-    return <div className={`${extraClass}`}>{children}</div>;
-  }
-  return <></>;
-};

package/src/Components/DataDisplay/Tab/TabContext.tsx

@@ -1,9 +0,0 @@
-import { createContext } from "react";
-import TabContextProps from "./TabContextProps.tsx";
-
-const TabContext = createContext<TabContextProps>({
-  currentIndex: 0,
-  setCurrentIndex: Function,
-});
-
-export default TabContext;

package/src/Components/DataDisplay/Tab/TabNav.tsx

@@ -1,6 +0,0 @@
-import TabNavProps from "./TabNavProps.tsx";
-import styles from "./tab.module.scss";
-
-export const TabNav = ({ children, extraClass }: TabNavProps) => {
-  return <div className={`${styles.tabNav} ${extraClass}`}>{children}</div>;
-};

package/src/Components/DataDisplay/Tab/TabNavItem.tsx

@@ -1,49 +0,0 @@
-import { useContext } from "react";
-import TabContext from "./TabContext";
-import TabNavItemProps from "./TabNavItemProps.tsx";
-import styles from "./tab.module.scss";
-
-export const TabNavItem = (props: TabNavItemProps) => {
-  const {
-    title,
-    tabIndex,
-    onBeforeOpen = null,
-    onAfterOpened = null,
-    extraClass,
-  } = props;
-  const tabContext = useContext(TabContext);
-
-  let className = ` ${styles.tabNavItem}`;
-  if (tabContext.currentIndex === tabIndex) {
-    className += ` ${styles.active}`;
-  }
-
-  const setActive = (key: any) => {
-    let proceed = true;
-    if (onBeforeOpen) {
-      const ret = onBeforeOpen();
-      if (typeof ret === "boolean") {
-        proceed = ret;
-      }
-    }
-    if (proceed) {
-      tabContext.setCurrentIndex(key);
-      if (onAfterOpened) {
-        onAfterOpened();
-      }
-    }
-  };
-
-  return (
-    <>
-      <div
-        className={className}
-        onClick={() => {
-          setActive(tabIndex);
-        }}
-      >
-        <span className={`${styles.item} ${extraClass}`}> {title}</span>
-      </div>
-    </>
-  );
-};

package/src/Components/DataDisplay/Tab/TabNavItemProps.tsx

@@ -1,9 +0,0 @@
-interface TabNavItemProps {
-  title: string;
-  tabIndex: any;
-  onBeforeOpen?: Function;
-  onAfterOpened?: Function;
-  extraClass?: string;
-}
-
-export default TabNavItemProps;

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

@@ -1,35 +0,0 @@
-.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

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

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

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

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

@@ -1,13 +0,0 @@
-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/TableCell.tsx

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

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

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

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