@hellobetterdigitalnz/betterui 0.0.3-33 → 0.0.3-331

package/src/Components/DataDisplay/NotificationsBell/NotificationsBell.tsx

@@ -0,0 +1,51 @@
+import { useState, useEffect, useRef } from "react";
+import styles from "./notificationBell.module.scss";
+import NotificationsBellProps from "./NotificationsBellProps.tsx";
+import Bell from "../../Icons/SystemAndDevice/Bell/Bell.tsx";
+
+const NotificationsBell = (props: NotificationsBellProps) => {
+  const { children, extraClass, active } = props;
+
+  const [dropdown, setDropdown] = useState(false);
+  const notificationRef = useRef(null);
+
+ const handleOutsideClick = (event:any) => {
+    // @ts-ignore
+    if (notificationRef.current && !notificationRef.current.contains(event.target)) {
+      setDropdown(false);
+    }
+  };
+
+  useEffect(() => {
+    if (dropdown) {
+      document.addEventListener("mousedown", handleOutsideClick);
+    } else {
+      document.removeEventListener("mousedown", handleOutsideClick);
+    }
+
+    return () => {
+      document.removeEventListener("mousedown", handleOutsideClick);
+    };
+  }, [dropdown]);
+
+  return (
+    <div
+      className={`${styles.notification} ${extraClass}`}
+      onClick={() => setDropdown(!dropdown)}
+      ref={notificationRef}
+    >
+      <div className={`${styles.notificationIcon} ${dropdown ? styles.notiActive : ""}`}>
+        {active && (<span className={styles.pip}></span>)}
+        <Bell />
+      </div>
+
+      {children && dropdown && (
+        <div className={`${styles.notificationDropdown} notificationDropdown`}>
+          {children}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default NotificationsBell;

package/src/Components/DataDisplay/NotificationsBell/NotificationsBellProps.tsx

@@ -0,0 +1,9 @@
+import { ReactNode } from "react";
+
+interface NotificationsBellProps {
+  children?: ReactNode;
+  extraClass?: string;
+  active?:boolean;
+}
+
+export default NotificationsBellProps;

package/src/Components/DataDisplay/NotificationsBell/notificationBell.module.scss

@@ -0,0 +1,58 @@
+.notification {
+  position: relative;
+  //padding-right: var(--spacing-2);
+
+  .notificationIcon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    cursor: pointer;
+    border-radius: 100%;
+    position: relative;
+
+    .pip {
+      position: absolute;
+      top: 8px;
+      right: 8px;
+      width: 8px;
+      height: 8px;
+      background: var(--color-primary-500);
+      border-radius: 100%;
+    }
+
+    svg {
+      width: 24px;
+      height: 24px;
+    }
+
+    &:hover {
+      background: var(--color-gray-100);
+    }
+
+    &.notiActive {
+      background: var(--color-gray-200);
+    }
+
+  }
+
+  .notificationDropdown {
+    position: absolute;
+    top: 100%;
+    right: 0;
+    min-width: 100%;
+    padding-top: 8px;
+  }
+
+}
+
+[dir="rtl"] {
+  .notification {
+    .notificationDropdown {
+      left: 0;
+      right: unset;
+    }
+  }
+}
+

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

@@ -0,0 +1,129 @@
+import { Meta, StoryObj } from "@storybook/react";
+import NotificationBell from "../NotificationsBell/NotificationsBell";
+import NotificationsPanel from "./NotificationsPanel";
+import NotificationsHeader from "./NotificationsHeader";
+import NotificationsGroups from "./NotificationsGroups";
+import NotificationsGroup from "./NotificationsGroup";
+import NotificationsNone from "./NotificationsNone";
+import Notification from "./Notification";
+
+const meta: Meta = {
+  title: "Data Display/Notification/NotificationPanel",
+  component: NotificationBell,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const NotificationTemplate: Story = {
+  render: () => {
+    return (
+      <NotificationBell active={true}>
+        <NotificationsPanel>
+          <NotificationsHeader showMarkAllAsRead={true} />
+          <NotificationsGroups>
+            <NotificationsGroup title={"New"}>
+              <Notification
+                notificationInitials={"CC"}
+                boldText={"Lorem ipsum"}
+                regularText={"dolor sit amet "}
+                summaryText={"consectetur adipiscing."}
+                read={true}
+              />
+              <Notification
+                notificationInitials={"CC"}
+                boldText={"Lorem ipsum"}
+                regularText={"dolor sit amet "}
+                summaryText={"consectetur adipiscing."}
+              />
+              <Notification
+                notificationInitials={"CC"}
+                boldText={"Lorem ipsum"}
+                regularText={"dolor sit amet "}
+                summaryText={"consectetur adipiscing."}
+              />
+              <Notification
+                notificationInitials={"CC"}
+                boldText={"Lorem ipsum"}
+                regularText={"dolor sit amet "}
+                summaryText={"consectetur adipiscing."}
+              />
+              <Notification
+                notificationInitials={"CC"}
+                boldText={"Lorem ipsum"}
+                regularText={"dolor sit amet "}
+                summaryText={"consectetur adipiscing."}
+              />
+            </NotificationsGroup>
+            <NotificationsGroup title={"Last 7 days"}>
+              <Notification
+                notificationInitials={"CC"}
+                boldText={"Lorem ipsum"}
+                regularText={"dolor sit amet "}
+                summaryText={"consectetur adipiscing."}
+              />
+              <Notification
+                notificationInitials={"CC"}
+                boldText={"Lorem ipsum"}
+                regularText={"dolor sit amet "}
+                summaryText={"consectetur adipiscing."}
+              />
+              <Notification
+                notificationInitials={"CC"}
+                boldText={"Lorem ipsum"}
+                regularText={"dolor sit amet "}
+                summaryText={"consectetur adipiscing."}
+              />
+              <Notification
+                notificationInitials={"CC"}
+                boldText={"Lorem ipsum"}
+                regularText={"dolor sit amet "}
+                summaryText={"consectetur adipiscing."}
+              />
+              <Notification
+                notificationInitials={"CC"}
+                boldText={"Lorem ipsum"}
+                regularText={"dolor sit amet "}
+                summaryText={"consectetur adipiscing."}
+              />
+              <Notification
+                notificationInitials={"CC"}
+                boldText={"Lorem ipsum"}
+                regularText={"dolor sit amet "}
+                summaryText={"consectetur adipiscing."}
+              />
+            </NotificationsGroup>
+          </NotificationsGroups>
+        </NotificationsPanel>
+      </NotificationBell>
+    );
+  },
+};
+
+const NoNotificationTemplate: Story = {
+  render: () => {
+    return (
+      <NotificationBell>
+        <NotificationsPanel>
+          <NotificationsHeader showMarkAllAsRead={true} />
+          <NotificationsGroups>
+            <NotificationsNone />
+          </NotificationsGroups>
+        </NotificationsPanel>
+      </NotificationBell>
+    );
+  },
+};
+
+export const Notifications = {
+  ...NotificationTemplate,
+};
+
+export const NoNotification = {
+  ...NoNotificationTemplate,
+};

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

@@ -0,0 +1,63 @@
+import XIcon from "../../Icons/MathsAndFinance/XIcon/XIcon.tsx";
+import styles from "./notificationPanel.module.scss";
+import NotificationProps from "./NotificationProps.tsx";
+
+const Notification = (props: NotificationProps) => {
+  const {
+    notificationInitials,
+    boldText,
+    summaryText,
+    notificationItemOnClick,
+    regularText,
+    extraClass,
+    closeOnClick,
+    read,
+  } = props;
+  return (
+    <>
+      <div
+        onClick={notificationItemOnClick}
+        className={`${styles.notificationList} ${read && styles.read} ${extraClass}`}
+      >
+        <div className={styles.notificationListWrapper}>
+          <div className={styles.notificationListIcon}>
+            <div className={styles.notificationListPip}></div>
+            <div
+              onClick={(e)=>{
+                e.stopPropagation();
+                closeOnClick?.(e);
+              }}
+              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>
+      </div>
+    </>
+  );
+};
+
+export default Notification;

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

@@ -0,0 +1,12 @@
+interface NotificationProps {
+  notificationInitials?: string;
+  extraClass?: string;
+  boldText?: string;
+  regularText?: string;
+  summaryText?: string;
+  notificationItemOnClick?: () => void;
+  closeOnClick?: (...args: any[]) => void;
+  read?:boolean;
+}
+
+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 : ""
+      }`}
+    >
+      <div className={`${styles.notificationGrouplist}`}>{children}</div>
+    </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,7 @@
+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,219 @@
+.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,&.read {
+    background: var(--color-gray-100);
+  }
+
+  &:hover .notificationListPip, &.read .notificationListPip  {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  &:hover .notificationListCloseIcon, &.read .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);
+    }
+  }
+}
+
+[dir="rtl"] {
+  .notificationGrouplistHolder {
+    &.spacing {
+      margin-left: 4px;
+      margin-right: 0px;
+    }
+  }
+
+  .notificationList {
+    padding: var(--spacing-1) var(--spacing-3\/4) var(--spacing-1) var(--spacing-2);
+
+    .notificationListIcon {
+      margin-right: 0px;
+      margin-left: var(--spacing-3\/4);
+    }
+
+    .notificationListInitial {
+      margin-right: 0px;
+      margin-left: var(--spacing-3\/4);
+    }
+  }
+}