@hellobetterdigitalnz/betterui 0.0.0

package/src/Components/DataDisplay/Cards/BannerCard/BannerCard.tsx

@@ -0,0 +1,47 @@
+import BannerCardInterface from "./BannerCardInterface.tsx";
+import './banner-card.scss'
+import Button from "../../../Form/Button/Button";
+
+export const BannerCard = (props: BannerCardInterface) => {
+  const {
+    title,
+    btnTitle,
+    description,
+    image,
+    btnType,
+    btnScheme,
+    btnSize,
+    btnStyle,
+    extraClass='',
+    btnOnClick
+  } = props;
+
+  const imageType = typeof image;
+
+  return (
+    <div
+      className={`banner-card ${extraClass}`}>
+      <div className={'banner-card__wrapper'}>
+        {imageType === "string" && (
+          <div
+            className={'banner-card__picture'}
+            style={{backgroundImage: image ? `url(${image})` : ""}}></div>
+        )}
+        {imageType !== "string" && <div className={'banner-card__picture'}>{image}</div>}
+        <div className={'banner-card__inner'}>
+          <div className={'banner-card__content'}>
+            {!!title && <h2 className={'banner-card__title'}>{title}</h2>}
+            {!!description && <p className={'banner-card__desc'}>{description}</p>}
+          </div>
+          <Button
+            label={btnTitle}
+            type={btnType}
+            style={btnStyle}
+            size={btnSize}
+            scheme={btnScheme}
+            onClick={btnOnClick}/>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/Components/DataDisplay/Cards/BannerCard/BannerCardInterface.tsx

@@ -0,0 +1,15 @@
+
+interface BannerCardInterface {
+  title: string;
+  btnTitle: string;
+  description: string;
+  image: string;
+  btnType?: "button" | "submit" | "reset" | undefined;
+  btnSize?: "default" | "large" | "small";
+  btnStyle?: "solid" | "hollow" | "no-border";
+  btnScheme?: "primary" | "secondary" | "gray";
+  extraClass?:string;
+  btnOnClick?: () => void;
+}
+
+export default BannerCardInterface

package/src/Components/DataDisplay/Cards/BannerCard/banner-card.scss

@@ -0,0 +1,54 @@
+.banner-card {
+  display: flex;
+  min-height: 600px;
+  height: 100%;
+  position: relative;
+
+  &__wrapper {
+    width: 100%;
+  }
+
+  &__picture {
+    background-color: var(--color-gray-300);
+    min-height: 200px;
+    background-position: center;
+    background-size: cover;
+    background-repeat: no-repeat;
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+  }
+
+  &__inner {
+    position: relative;
+    z-index: 1;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding:var(--spacing-1-1\/4) ;
+  }
+
+  &__content {
+    text-align: center;
+    max-width: 960px;
+    margin: 0 auto;
+  }
+
+  &__title {
+    font-size: var(--font-size-h2);
+    font-weight: var(--font-weight-h2);
+    line-height: var(--line-height-h2);
+    margin-bottom: var(--spacing-1-1\/2);
+  }
+
+  &__desc {
+    margin-bottom: var(--spacing-1-1\/2);
+  }
+
+}

package/src/Components/DataDisplay/Cards/PathwayCard/PathwayCard.stories.tsx

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import './pathway-card-stories.scss'
+
+import { PathwayCard } from './PathwayCard.tsx';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: 'Data Display / PathwayCard',
+  component: PathwayCard,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof PathwayCard>;
+
+export default meta;
+type Story = StoryObj<typeof PathwayCard>;
+
+export const Example: Story = {
+  args: {
+    title:'Lorem ipsum',
+    description:'Sed fringilla magna facilisis auctor venenatis. Duis ut vestibulum risus. Nunc a finibus dui. Donec hendrerit tristique odio, ac porta dui maximus et. ',
+    image:'https://www.w3schools.com/html/pic_trulli.jpg',
+    btnTitle:'Button text',
+    btnScheme:'primary',
+    btnSize:'default',
+    btnStyle:'solid',
+    extraClass:'showcase-width'
+  },
+};
+

package/src/Components/DataDisplay/Cards/PathwayCard/PathwayCard.tsx

@@ -0,0 +1,53 @@
+import PathwayCardInterface from "./PathwayCardInterface.tsx";
+import './pathway-card.scss'
+import Button from "../../../Form/Button/Button";
+
+export const PathwayCard = (props: PathwayCardInterface) => {
+  const {
+    title,
+    btnTitle,
+    description,
+    image,
+    btnType,
+    btnScheme,
+    btnSize,
+    btnStyle,
+    extraClass='',
+    cardOnClick,
+    btnOnClick
+  } = props;
+
+  const imageType = typeof image;
+
+  return (
+    <div
+      className={`pathway-card ${extraClass}`}
+      onClick={(e) => {
+        if (cardOnClick) {
+          cardOnClick(e);
+        }
+      }}>
+      <div className={'pathway-card__wrapper'}>
+        {imageType === "string" && (
+          <div
+            className={'pathway-card__picture'}
+            style={{backgroundImage: image ? `url(${image})` : ""}}></div>
+        )}
+        {imageType !== "string" && <div className={'pathway-card__picture'}>{image}</div>}
+        <div className={'pathway-card__inner'}>
+          <div className={'pathway-card__content'}>
+            {!!title && <h3 className={'pathway-card__title'}>{title}</h3>}
+            {!!description && <p className={'pathway-card__desc'}>{description}</p>}
+          </div>
+          <Button
+            label={btnTitle}
+            type={btnType}
+            style={btnStyle}
+            size={btnSize}
+            scheme={btnScheme}
+            onClick={btnOnClick}/>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/Components/DataDisplay/Cards/PathwayCard/PathwayCardInterface.tsx

@@ -0,0 +1,17 @@
+import React, {ReactNode} from "react";
+
+interface PathwayCardInterface {
+  title: string;
+  btnTitle: string;
+  description: string;
+  image: string | ReactNode;
+  btnType?: "button" | "submit" | "reset" | undefined;
+  btnSize?: "default" | "large" | "small";
+  btnStyle?: "solid" | "hollow" | "no-border";
+  btnScheme?: "primary" | "secondary" | "gray";
+  extraClass?:string;
+  cardOnClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+  btnOnClick?: () => void;
+}
+
+export default PathwayCardInterface

package/src/Components/DataDisplay/Cards/PathwayCard/pathway-card-stories.scss

@@ -0,0 +1,3 @@
+.showcase-width{
+  width: 409px;
+}

package/src/Components/DataDisplay/Cards/PathwayCard/pathway-card.scss

@@ -0,0 +1,62 @@
+.pathway-card {
+  display: flex;
+  flex-direction: column;
+  border-radius: 4px;
+  border: 1px solid var(--color-gray-300);
+  min-height: 468px;
+  height: 100%;
+  cursor: pointer;
+
+  &__wrapper {
+    flex: 1;
+    height: 100%;
+    padding: var(--spacing-1-1\/2);
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__picture {
+    background-color: var(--color-gray-300);
+    min-height: 200px;
+    background-position: center;
+    background-size: cover;
+    background-repeat: no-repeat;
+    position: relative;
+    overflow: hidden;
+    margin-bottom: var(--spacing-1-1\/2);
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      object-position: center;
+    }
+
+  }
+
+  &__inner {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    height: 100%;
+  }
+
+  &__content {
+    flex: 1;
+  }
+
+  &__title {
+    padding-bottom: var(--spacing-1\/2);
+    border-bottom: 1px solid var(--color-gray-300);
+    margin-bottom: var(--spacing-1-1\/2);
+    font-size: var(--font-size-h3);
+    font-weight: var(--font-weight-h3);
+    line-height: var(--line-height-h3);
+  }
+
+  &__desc {
+    margin-bottom: var(--spacing-1-1\/2);
+  }
+
+}

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

@@ -0,0 +1,26 @@
+import MediaProps from "./MediaProps.tsx";
+import "./media.scss";
+export const Media = ({ type, videoSrc, imageSrc }: MediaProps) => {
+  const imageType = typeof imageSrc;
+
+  return (
+    <>
+      {type === "image" && (
+        <>
+          {imageType === "string" && <img src={imageSrc} alt={"media image"} />}
+          {imageType !== "string" && (
+            <div className={"media-image"}>{imageSrc}</div>
+          )}
+        </>
+      )}
+      {type === "video" && (
+        <div className="video-container">
+          <video controls>
+            <source src={videoSrc} type="video/mp4" />
+            Your browser does not support the video tag.
+          </video>
+        </div>
+      )}
+    </>
+  );
+};

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

@@ -0,0 +1,9 @@
+import { ReactNode } from "react";
+
+interface MediaProps {
+  type?: "image" | "video";
+  videoSrc?: string;
+  imageSrc: string | ReactNode;
+}
+
+export default MediaProps;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -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}>
+          {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,48 @@
+.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

@@ -0,0 +1,128 @@
+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: ({ items, ...args }) => {
+    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: ({ items, ...args }) => {
+    return (
+      <NotificationBell>
+        <NotificationsPanel>
+          <NotificationsHeader showMarkAllAsRead={true} />
+          <NotificationsGroups>
+            <NotificationsNone />
+          </NotificationsGroups>
+        </NotificationsPanel>
+      </NotificationBell>
+    );
+  },
+};
+
+export const Notifications = {
+  ...NotificationTemplate,
+};
+
+export const NoNotification = {
+  ...NoNotificationTemplate,
+};