@hellobetterdigitalnz/betterui 0.0.0

package/src/Components/Layout/ProfileDropdown/ProfileHeader.tsx

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

package/src/Components/Layout/ProfileDropdown/ProfileLink.tsx

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

package/src/Components/Layout/ProfileDropdown/ProfileLinks.tsx

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

package/src/Components/Layout/ProfileDropdown/ProfileNavigationItem.tsx

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

package/src/Components/Layout/ProfileDropdown/ProfileSwitchPanel.tsx

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

package/src/Components/Layout/ProfileDropdown/ProfileSwitchUser.tsx

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

package/src/Components/Layout/Sidebar/Sidebar.tsx

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

package/src/Components/Layout/Sidebar/SidebarChevron.tsx

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

package/src/Components/Layout/Sidebar/SidebarNavigation.tsx

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

package/src/Components/Layout/Sidebar/SidebarNavigationItem.tsx

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

package/src/Components/Layout/Sidebar/SidebarSubNavigation.tsx

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

package/src/Notification/Notification.tsx

@@ -0,0 +1,83 @@
+import { useState, useEffect, useRef } from "react";
+import NotificationInterface from "./NotificationInterface.tsx";
+import './notification.scss'
+import Bell from "../Components/Icons/SystemAndDevice/Bell/Bell.tsx";
+export const Notification = ({ children, extraClass = '',markAllAsReadOnClick }: NotificationInterface) => {
+  const [dropdown, setDropdown] = useState(false);
+  const notificationRef = useRef(null);
+  const [isScrollbarVisible, setIsScrollbarVisible] = useState(false);
+
+  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]);
+
+  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
+      className={`notification ${extraClass}`}
+      onClick={() => setDropdown(!dropdown)}
+      ref={notificationRef}
+    >
+      <div className={`notification-icon ${dropdown ? 'noti-active': '' }`}>
+        <Bell />
+      </div>
+
+      {(children && dropdown) && (
+        <div className={`notification-dropdown`}>
+          <div className={`notification-dropdown__inner`}>
+            <div className={`notification-dropdown__header`}>
+              <div className={`notification-dropdown__header-wrapper`}>
+                <div>
+                  <h5>Notifications</h5>
+                </div>
+                <div onClick={markAllAsReadOnClick} className={'mark-all-action'}>
+                  <h6>Mark all as Read</h6>
+                </div>
+              </div>
+            </div>
+            <div id={'listContainer'} className={`notification-dropdown__container-list ${isScrollbarVisible ? 'spacing' : '' }`}>
+              <ul className={`notification-dropdown__list`}>
+                {children}
+              </ul>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};

package/src/Notification/NotificationInterface.tsx

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

package/src/Notification/NotificationList.tsx

@@ -0,0 +1,29 @@
+import './notification.scss'
+import NotificationListInterface from "./NotificationListInterface.tsx";
+import {XIcon} from "../../tokens/icons/MathAndFinance/XIcon.tsx";
+
+export const NotificationList = ({ notificationInitials , boldText, summaryText, notificatonItemOnClick, regularText, extraClass, closeOnClick  }: NotificationListInterface) => {
+
+  return <>
+    <li onClick={notificatonItemOnClick} className={`notification-list ${extraClass}`}>
+      <div className={`notification-list__wrapper`}>
+        <div className={`notification-list__icon`}>
+          <div className={'notification-list-pip'}></div>
+          <div onClick={closeOnClick} className={'notification-list-close-icon'}><XIcon/></div>
+        </div>
+        <div className={`notification-list__content`}>
+          {notificationInitials && (
+            <div className={`notification-list__initial`}>
+              <div className={`notification-list__initial-wrapper`}>
+                {notificationInitials}
+              </div>
+            </div>
+          )}
+          <div className={`notification-list__desc`}>
+            <p>{boldText && (<span className={'bold-text'}>{boldText}</span>)}{regularText && ( <span className={'regular-text'}>{regularText}</span>)}{summaryText && ( <span className={'summary-text'}>{summaryText}</span>)}</p>
+          </div>
+        </div>
+      </div>
+    </li>
+  </>
+};

package/src/Notification/NotificationListHolder.tsx

@@ -0,0 +1,14 @@
+ import './notification.scss'
+import NotificationListHolderInterface from "./NotificationListHolderInterface.tsx";
+
+export const NotificationListHolder = ({ children, title  }: NotificationListHolderInterface) => {
+
+  return <>
+    <div className={`notification-holder`}>
+      <h6>{title}</h6>
+    </div>
+    <div>
+      {children}
+    </div>
+  </>
+};

package/src/Notification/NotificationListHolderInterface.tsx

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

package/src/Notification/NotificationListInterface.tsx

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

package/src/Notification/notification.scss

@@ -0,0 +1,225 @@
+.notification {
+  position: relative;
+  padding-right: var(--spacing-2);
+
+  &-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    cursor: pointer;
+    border-radius: 100%;
+
+    svg {
+      width: 24px;
+      height: 24px;
+    }
+
+    &:hover {
+      background: var(--color-gray-100);
+    }
+
+    &.noti-active {
+      background: var(--color-gray-200);
+    }
+
+  }
+
+
+  &-dropdown {
+    position: absolute;
+    top: 100%;
+    right: 0;
+    min-width: 100%;
+    padding-top: 8px;
+
+    &__header {
+      border-bottom: 1px solid var(--color-gray-200);
+
+      &-wrapper {
+        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);
+        }
+
+        .mark-all-action {
+          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;
+            }
+          }
+        }
+      }
+
+    }
+
+    .notification-dropdown__container-list{
+      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.10);
+      }
+
+      &::-webkit-scrollbar-thumb:hover {
+        background: rgba(0, 0, 0, 0.15);
+      }
+    }
+
+    &__list {
+      min-height: 70px;
+      list-style: none;
+    }
+
+  }
+
+  &-dropdown__inner {
+    border-radius: 8px;
+    width: 100%;
+    background: white;
+    box-shadow: var(--drop-shadow-default);
+    padding: calc(var(--spacing) * 2);
+    min-width: 320px;
+    max-width: 320px;
+  }
+}
+
+.notification-list {
+  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 .notification-list-pip{
+    opacity: 0;
+  }
+
+  &:hover .notification-list-close-icon{
+    opacity: 1;
+  }
+
+  &__wrapper {
+    display: flex;
+    align-items: center;
+  }
+
+  &-pip {
+    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;
+  }
+
+  &-close-icon{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+
+    svg{
+      width: 12px;
+      height: 12px;
+    }
+
+  }
+
+  &__icon {
+    cursor: pointer;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: var(--spacing-3\/4);
+    transition: opacity 0.2s linear;
+  }
+
+  &__content{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__initial{
+    flex-shrink: 1;
+    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);
+
+    &-wrapper{
+      --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);
+
+    }
+
+  }
+
+  &__desc{
+    font-size: var(--font-size-body-xsm);
+    font-weight: var(--font-size-body-xsm);
+    line-height: var(--line-height-body-xsm);
+
+    .bold-text{
+      font-weight: 600;
+    }
+
+    .summary-text{
+      color: var(--color-primary-500);
+    }
+
+  }
+
+}
+
+.notification-holder{
+  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;
+  }
+}

package/src/global.scss

@@ -0,0 +1,231 @@
+@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@300;400;500;600;700&display=swap');
+
+:root {
+  --font: Figtree, sans-serif;
+  --body-font: Figtree, sans-serif;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  //font-size variables
+  --font-size-body-sm: 14px;
+  --font-size-body-xsm: 12px;
+  --font-size-body-regular: 16px;
+  --font-size-large: 18px;
+  --font-size-h1: 32px;
+  --font-size-h2: 24px;
+  --font-size-h3: 20px;
+  --font-size-h4: 18px;
+  --font-size-h5: 16px;
+  --font-size-label: 14px;
+  --font-size-input: 16px;
+  --font-size-button: 16px;
+
+  //font-weight variables
+  --font-weight-body-sm: 400;
+  --font-weight-body-xsm: 400;
+  --font-weight-body-regular: 400;
+  --font-weight-h1: 600;
+  --font-weight-h2: 600;
+  --font-weight-h3: 600;
+  --font-weight-h4: 600;
+  --font-weight-h5: 600;
+  --font-weight-label: 400;
+  --font-weight-input: 400;
+  --font-weight-button: 600;
+
+
+  //Line-height variables
+  --line-height-body-sm: 1.57;
+  --line-height-body-xsm: 1.83;
+  --line-height-body-regular: 1.5;
+  --line-height-h1: 1.25;
+  --line-height-h2: 1.33;
+  --line-height-h3: 1.4;
+  --line-height-h4: 1.44;
+  --line-height-h5: 1.5;
+  --line-height-label: 1.25;
+  --line-height-input: 1.5;
+  --line-height-button: 1;
+
+
+  --space-unit: 4px;
+  --spacing-1\/4: var(--space-unit);
+  --spacing-1\/2: calc(2 * var(--space-unit));
+  --spacing-3\/4: calc(3 * var(--space-unit));
+  --spacing-1: calc(4 * var(--space-unit));
+  --spacing-1-1\/4: calc(5 * var(--space-unit));
+  --spacing-1-1\/2: calc(6 * var(--space-unit));
+  --spacing-1-3\/4: calc(7 * var(--space-unit));
+  --spacing-2: calc(8 * var(--space-unit));
+  --spacing-2-1\/2: calc(10 * var(--space-unit));
+  --spacing-3: calc(12 * var(--space-unit));
+  --spacing-3-1\/2: calc(14 * var(--space-unit));
+  --spacing-4: calc(16 * var(--space-unit));
+  --spacing-4-1\/2: calc(18 * var(--space-unit));
+  --spacing-5: calc(20 * var(--space-unit));
+  --spacing-6: calc(24 * var(--space-unit));
+
+
+  --color-white: #FFFFFF;
+
+  --color-primary-50: #EEF6FC;
+  --color-primary-100: #CDE4F5;
+  --color-primary-200: #acd2ee;
+  --color-primary-300: #8ac0e7;
+  --color-primary-400: #69aee0;
+  --color-primary-500: #58A5DD;
+  --color-primary-600: #4684b1;
+  --color-primary-700: #356385;
+  --color-primary-800: #234258;
+  --color-primary-900: #12212c;
+  --color-primary-1000: #0f1c25;
+
+  --color-secondary-50: #eceef0;
+  --color-secondary-100: #d9dce2;
+  --color-secondary-200: #a1a8b6;
+  --color-secondary-300: #7b8598;
+  --color-secondary-400: #56627b;
+  --color-secondary-500: #43506C;
+  --color-secondary-600: #364056;
+  --color-secondary-700: #2f384c;
+  --color-secondary-800: #222836;
+  --color-secondary-900: #1b202b;
+  --color-secondary-1000: #191e28;
+
+  --color-gray-50: #FAFAFA;
+  --color-gray-100: #F5F5F5;
+  --color-gray-200: #EEEEEE;
+  --color-gray-300: #E0E0E0;
+  --color-gray-400: #BDBDBD;
+  --color-gray-500: #9E9E9E;
+  --color-gray-600: #757575;
+  --color-gray-700: #616161;
+  --color-gray-800: #424242;
+  --color-gray-900: #212121;
+  --color-gray-1000: #171717;
+
+
+  --color-success: #84BE39;
+  --color-error: #e12222;
+  --color-error-lite: rgba(225, 34, 34, 0.05);
+  --color-inprogress: #E9A116;
+
+  --color-lite:#FFFFFF;
+  --color-dark:#000000;
+
+  --drop-shadow-default: 0px 0px 2px 1px rgba(0, 0, 0, 0.05), 0px 2px 10px 0px rgba(0, 0, 0, 0.15);
+  --drop-shadow-md: 0px 4px 4px 0px rgba(21, 19, 28, 0.06);
+  --drop-shadow-lg: 0px 8px 12px 0px rgba(21, 19, 28, 0.06);
+  --drop-shadow-xl: 0px 16px 24px 0px rgba(21, 19, 28, 0.06);
+  --drop-shadow-2xl:  0px 24px 40px 0px rgba(21, 19, 28, 0.06);
+
+
+}
+
+body {
+  font-family: var(--body-font);
+  font-size: var(--font-size-body-regular);
+  line-height: var(--line-height-body-regular);
+  font-weight: var(--font-weight-body-regular);
+}
+
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.typography {
+  h1 {
+    font-size: var(--font-size-h1);
+    line-height: var(--line-height-h1);
+    font-weight: var(--font-weight-h1);
+    margin-bottom: calc(var(--font-size-h1) * 0.75);
+  }
+
+  h2 {
+    font-size: var(--font-size-h2);
+    line-height: var(--line-height-h2);
+    font-weight: var(--font-weight-h2);
+    margin-bottom: calc(var(--font-size-h2) * 0.75);
+  }
+
+  h3 {
+    font-size: var(--font-size-h3);
+    line-height: var(--line-height-h3);
+    font-weight: var(--font-weight-h3);
+    margin-bottom: calc(var(--font-size-h3) * 0.75);
+  }
+
+  h4 {
+    font-size: var(--font-size-h4);
+    line-height: var(--line-height-h4);
+    font-weight: var(--font-weight-h4);
+    margin-bottom: calc(var(--font-size-h4) * 0.75);
+  }
+
+  h5 {
+    font-size: var(--font-size-h5);
+    line-height: var(--line-height-h5);
+    font-weight: var(--font-weight-h5);
+    margin-bottom: calc(var(--font-size-h5) * 0.75);
+  }
+
+  p {
+    margin-bottom: calc(var(--font-size-body-regular) * 0.75);
+  }
+
+  small {
+    font-size: var(--font-size-body-sm);
+    line-height: var(--line-height-body-sm);
+    color: var(--color-gray-600);
+    margin-top: calc(var(--font-size-body) * 0.75);
+  }
+
+  ul,
+  ol {
+    margin-left: calc(var(--spacing) * 5);
+    margin-bottom: calc(var(--font-size-body) * 0.75);
+  }
+
+  .large {
+    font-size: var(--font-size-large);
+
+    p {
+      margin-bottom: calc(var(--font-size-large) * 1.25);
+    }
+
+    ol,
+    ul {
+      margin-bottom: calc(var(--font-size-large) * 1.25);
+    }
+  }
+}
+
+
+
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

package/src/main.tsx

@@ -0,0 +1,9 @@
+import { createRoot } from "react-dom/client";
+import App from "./App.tsx";
+import "./global.scss";
+
+createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);