@hellobetterdigitalnz/betterui 0.0.0

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

@@ -0,0 +1,59 @@
+import XIcon from "../../Icons/MathAndFinance/XIcon/XIcon.tsx";
+import styles from "./notificationPanel.module.scss";
+import NotificationProps from "./NotificationProps.tsx";
+
+const Notification = (props: NotificationProps) => {
+  const {
+    notificationInitials,
+    boldText,
+    summaryText,
+    notificatonItemOnClick,
+    regularText,
+    extraClass,
+    closeOnClick,
+  } = props;
+  return (
+    <>
+      <li
+        onClick={notificatonItemOnClick}
+        className={`${styles.notificationList} ${extraClass}`}
+      >
+        <div className={styles.notificationListWrapper}>
+          <div className={styles.notificationListIcon}>
+            <div className={styles.notificationListPip}></div>
+            <div
+              onClick={closeOnClick}
+              className={styles.notificationListCloseIcon}
+            >
+              <XIcon />
+            </div>
+          </div>
+          <div className={styles.notificationListContent}>
+            {notificationInitials && (
+              <div className={styles.notificationListInitial}>
+                <div className={styles.notificationListInitialWrapper}>
+                  {notificationInitials}
+                </div>
+              </div>
+            )}
+            <div className={styles.notificationListDesc}>
+              <p>
+                {boldText && (
+                  <span className={styles.boldText}> {boldText}</span>
+                )}
+                {regularText && (
+                  <span className={styles.regularText}> {regularText}</span>
+                )}
+                {summaryText && (
+                  <span className={styles.summaryText}> {summaryText}</span>
+                )}
+              </p>
+            </div>
+          </div>
+        </div>
+      </li>
+    </>
+  );
+};
+
+export default Notification;

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

@@ -0,0 +1,11 @@
+interface NotificationProps {
+  notificationInitials?: string;
+  extraClass?: string;
+  boldText?: string;
+  regularText?: string;
+  summaryText?: string;
+  notificatonItemOnClick?: () => void;
+  closeOnClick?: () => void;
+}
+
+export default NotificationProps;

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

@@ -0,0 +1,17 @@
+import NotificationsGroupProps from "./NotificationsGroupProps";
+import styles from "./notificationPanel.module.scss";
+
+const NotificationsGroup = ({ children, title }: NotificationsGroupProps) => {
+  return (
+    <>
+      {title && (
+        <div className={styles.notificationGroup}>
+          <h6>{title}</h6>
+        </div>
+      )}
+      <div>{children}</div>
+    </>
+  );
+};
+
+export default NotificationsGroup;

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

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

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

@@ -0,0 +1,42 @@
+import { useEffect, useState } from "react";
+import NotificationsGroupsProps from "./NotificationsGroupsProps";
+import styles from "./notificationPanel.module.scss";
+
+const NotificationsGroups = (props: NotificationsGroupsProps) => {
+  const { children } = props;
+  const [isScrollbarVisible, setIsScrollbarVisible] = useState(false);
+
+  useEffect(() => {
+    const listContainer = document.getElementById("listContainer");
+
+    if (listContainer) {
+      const handleResize = () => {
+        const updatedScrollbarVisible =
+          listContainer.scrollHeight > listContainer.clientHeight;
+        setIsScrollbarVisible(updatedScrollbarVisible);
+      };
+
+      window.addEventListener("resize", handleResize);
+
+      handleResize();
+
+      // Cleanup the event listener on component unmount
+      return () => {
+        window.removeEventListener("resize", handleResize);
+      };
+    }
+  }, []);
+
+  return (
+    <div
+      id={"listContainer"}
+      className={`${styles.notificationGrouplistHolder} ${
+        isScrollbarVisible ? styles.spacing : ""
+      }`}
+    >
+      <ul className={`${styles.notificationGrouplist}`}>{children}</ul>
+    </div>
+  );
+};
+
+export default NotificationsGroups;

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

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

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

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

@@ -0,0 +1,9 @@
+import { ReactNode } from "react";
+
+interface NotificationsHeaderProps {
+  extraClass?: string;
+  markAllAsReadOnClick?: () => void;
+  showMarkAllAsRead?: boolean;
+}
+
+export default NotificationsHeaderProps;

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,9 @@
+import { ReactNode } from "react";
+
+interface TabBodyContentProps {
+  children: ReactNode;
+  tabIndex: any;
+  extraClass?: string;
+}
+
+export default TabBodyContentProps;

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

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

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

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

@@ -0,0 +1,6 @@
+interface TabContextProps {
+  currentIndex: any;
+  setCurrentIndex: Function;
+}
+
+export default TabContextProps;

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

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

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

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

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

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

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

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