@hellobetterdigitalnz/betterui 0.0.2 → 0.0.3-2

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

@@ -1,30 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-
-import Media from "./Media";
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-const meta = {
-  title: "Data Display / Media",
-  component: Media,
-  parameters: {
-    layout: ["top", "centered"],
-  },
-  tags: ["autodocs"],
-} satisfies Meta<typeof Media>;
-
-export default meta;
-type Story = StoryObj<typeof Media>;
-
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
-export const MediaImage: Story = {
-  args: {
-    type: "image",
-    imageSrc: "https://www.w3schools.com/html/pic_trulli.jpg",
-  },
-};
-
-export const MediaVideo: Story = {
-  args: {
-    type: "video",
-  },
-};

package/src/Components/DataDisplay/Media/Media.tsx

@@ -1,47 +0,0 @@
-import MediaProps from "./MediaProps.tsx";
-import styles from "./media.module.scss";
-
-const Media = ({ type, videoSrc, imageSrc }: MediaProps) => {
-  const isImageString = typeof imageSrc === "string";
-
-  return (
-    <>
-      {type === "image" && (
-        <>
-          {isImageString ? (
-            <img
-              src={imageSrc}
-              alt={"media image"}
-              className={styles.mediaImage}
-            />
-          ) : (
-            <div className={styles.mediaImage}>{imageSrc}</div>
-          )}
-        </>
-      )}
-      {type === "video" && (
-        <div className="video-container">
-          <div className="custom-play-button">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="64"
-              height="64"
-              viewBox="0 0 64 64"
-            >
-              <path
-                fill="#fff"
-                d="M32 2C16.536 2 4 14.536 4 30s12.536 28 28 28 28-12.536 28-28S47.464 2 32 2zm13.898 32.111L20 50V14l25.898 15.889z"
-              />
-            </svg>
-          </div>
-          <video controls className="custom-video">
-            <source src={videoSrc} type="video/mp4" />
-            Your browser does not support the video tag.
-          </video>
-        </div>
-      )}
-    </>
-  );
-};
-
-export default Media;

package/src/Components/DataDisplay/Media/media.module.scss

@@ -1,8 +0,0 @@
-.mediaImage {
-  position: relative;
-  overflow: hidden;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  object-position: center;
-}

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

@@ -1,27 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import Modal from "./Modal.tsx";
-import ModalHeader from "./ModalHeader.tsx";
-
-const meta: Meta = {
-  title: "Data Display / Modal",
-  component: Modal,
-  tags: ["autodocs"],
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-const ModalTemplate: Story = {
-  render: ({ items, ...args }) => {
-    return (
-      <Modal {...args}>
-        <ModalHeader title="Modal Header" canClose={true} canGoBack={true} />
-      </Modal>
-    );
-  },
-};
-
-export const Example = {
-  ...ModalTemplate,
-};

package/src/Components/DataDisplay/Modal/Modal.tsx

@@ -1,16 +0,0 @@
-import ModalProps from "./ModalProps";
-import styles from "./modal.module.scss";
-
-const Modal = (props: ModalProps) => {
-  const { children, extraClass } = props;
-
-  return (
-    <div className={`${styles.holder} ${extraClass} modalHolder`}>
-      <div className={`${styles.modal} modal`}>
-        <div className={`${styles.wrapper} modalWrapper`}>{children}</div>
-      </div>
-    </div>
-  );
-};
-
-export default Modal;

package/src/Components/DataDisplay/Modal/ModalActions.tsx

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

package/src/Components/DataDisplay/Modal/ModalActionsLeft.tsx

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

package/src/Components/DataDisplay/Modal/ModalActionsRight.tsx

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

package/src/Components/DataDisplay/Modal/ModalBody.tsx

@@ -1,15 +0,0 @@
-import ModalBodyProps from "./ModalBodyProps";
-import styles from "./modal.module.scss";
-
-const ModalBody = (props: ModalBodyProps) => {
-  const { children } = props;
-
-  return (
-    <div className={`${styles.ModalBody}`}>
-      <div className={styles.modalBodyWrapper}>{children}</div>
-    </div>
-  );
-  0;
-};
-
-export default ModalBody;

package/src/Components/DataDisplay/Modal/ModalCurtain.tsx

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

package/src/Components/DataDisplay/Modal/ModalHeader.tsx

@@ -1,32 +0,0 @@
-import CaretLeft from "../../Icons/Arrows/CaretLeft/CaretLeft";
-import XIcon from "../../Icons/MathAndFinance/XIcon/XIcon";
-import ModalHeaderProps from "./ModalHeaderProps";
-import styles from "./modal.module.scss";
-
-const ModalHeader = (props: ModalHeaderProps) => {
-  const { canGoBack, canClose, title, extraClass } = props;
-
-  return (
-    <div className={`${styles.modalHeader} ${extraClass}`}>
-      <div className={styles.modalHeaderWrapper}>
-        {!!canGoBack && (
-          <div className={`${styles.caretLeft} ${styles.icon}`}>
-            <CaretLeft type="bold" />
-          </div>
-        )}
-        {!!title && (
-          <div className={`${styles.heading} modalHeading`}>
-            <h4>{title}</h4>
-          </div>
-        )}
-        {!!canClose && (
-          <span className={`${styles.close} ${styles.icon}`}>
-            <XIcon type="bold" />
-          </span>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default ModalHeader;

package/src/Components/DataDisplay/Modal/ModalHeaderProps.tsx

@@ -1,8 +0,0 @@
-interface ModalHeaderProps {
-  title: string;
-  extraClass?: string;
-  canClose?: boolean;
-  canGoBack?: boolean;
-}
-
-export default ModalHeaderProps;

package/src/Components/DataDisplay/Modal/modal.module.scss

@@ -1,58 +0,0 @@
-.holder {
-  position: fixed;
-  z-index: 99999;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  padding: calc(var(--space-unit) * 10) calc(var(--space-unit) * 5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.modal {
-  position: relative;
-  width: 90%;
-  max-width: 640px;
-  max-height: 70vh;
-  box-shadow: var(--drop-shadow-default);
-  background: var(--bg-modal-color);
-  display: flex;
-}
-
-.wrapper {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-}
-
-.modalHeader {
-  border-bottom: 1px solid var(--color-gray-200);
-}
-
-.modalHeaderWrapper {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: calc(var(--space-unit) * 4) calc(var(--space-unit) * 6);
-
-  .heading {
-    h4 {
-      font-size: var(--font-size-h4);
-      font-weight: var(--font-weight-h4);
-      line-height: var(--line-height-h4);
-    }
-  }
-
-  .icon {
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-
-    svg {
-      width: 20px;
-      height: 20px;
-    }
-  }
-}

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

@@ -1,27 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-
-import NotificationsBell from "./NotificationsBell";
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-const meta = {
-  title: "Data Display/Notification/NotificationsBell",
-  component: NotificationsBell,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-} satisfies Meta<typeof NotificationsBell>;
-
-export default meta;
-type Story = StoryObj<typeof NotificationsBell>;
-
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
-export const Default: Story = {
-  args: {},
-};
-
-export const ActiveState: Story = {
-  args: {
-    active: true,
-  },
-};

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

@@ -1,51 +0,0 @@
-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}>
-          {children}
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default NotificationsBell;

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

@@ -1,48 +0,0 @@
-.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;
-	}
-
-}

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

@@ -1,128 +0,0 @@
-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."}
-              />
-              <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

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

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

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

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