@hellobetterdigitalnz/betterui 0.0.0 → 0.0.2

package/src/Components/Layout/ProfileDropdown/profileDropdown.module.scss

@@ -0,0 +1,207 @@
+.profileDropdown {
+  background: white;
+  border-radius: 8px;
+  box-shadow: var(--drop-shadow-default);
+  min-width: 320px;
+}
+
+.profileHeader {
+  padding: calc(var(--space-unit) * 6) calc(var(--space-unit) * 8);
+  margin-bottom: calc(var(--space-unit) * 2);
+  border-bottom: 1px solid var(--color-gray-200);
+}
+
+.profileHeaderWrapper,
+.profileSwitchUserWrapper {
+  display: flex;
+  align-items: center;
+
+  .avatar {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: 40px;
+    height: 40px;
+    margin-right: calc(var(--space-unit) * 3);
+    background: var(--color-primary-600);
+    color: white;
+    border-radius: 100%;
+
+    h3 {
+      font-size: var(--font-size-large);
+      font-weight: 600;
+      line-height: var(--line-height-body-regular);
+      text-transform: uppercase;
+    }
+  }
+
+  .content {
+    .name {
+      font-size: var(--font-size-h5);
+      font-weight: var(--font-weight-h5);
+      line-height: var(--line-height-h5);
+    }
+
+    .role {
+      font-size: var(--font-size-body-xsm);
+      font-weight: var(--font-weight-body-xsm);
+      line-height: var(--line-height-body-xsm);
+      color: var(--color-gray-600);
+    }
+  }
+}
+
+.content,
+.profileSwitchUserContent {
+  .name {
+    font-size: var(--font-size-h5);
+    font-weight: var(--font-weight-h5);
+    line-height: var(--line-height-h5);
+  }
+
+  .role {
+    font-size: var(--font-size-body-xsm);
+    font-weight: var(--font-weight-body-xsm);
+    line-height: var(--line-height-body-xsm);
+    color: var(--color-gray-600);
+  }
+}
+
+.profileNavigationItem {
+  padding: calc(var(--space-unit) * 2) 0px;
+  border-bottom: 1px solid var(--color-gray-200);
+  cursor: pointer;
+  transition: linear 0.3s;
+
+  &:hover {
+    background: var(--color-gray-200);
+  }
+}
+
+.profileNavigationItemWrapper {
+  display: flex;
+  padding: calc(var(--space-unit) * 3) calc(var(--space-unit) * 8);
+  justify-content: space-between;
+  align-items: center;
+}
+
+.profileNavigationItemLeft {
+  display: flex;
+  align-items: flex-end;
+
+  .profileNavigationItemIcon {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    padding-right: calc(var(--space-unit) * 3);
+
+    svg {
+      width: 24px;
+      height: 24px;
+    }
+  }
+
+  .profileNavigationItemContent {
+    h5 {
+      font-size: var(--font-size-body-regular);
+      font-weight: var(--font-weight-body-regular);
+      line-height: var(--line-height-body-regular);
+    }
+  }
+}
+
+.profileNavigationItemRight {
+  display: flex;
+  align-items: center;
+
+  svg {
+    width: 24px;
+    height: 24px;
+  }
+}
+
+.profileLinks {
+  padding: calc(var(--space-unit) * 4) 0px;
+
+  ul {
+    list-style: none;
+
+    li {
+      padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 8);
+      font-size: var(--font-size-body-sm);
+      font-weight: var(--font-weight-body-sm);
+      line-height: var(--line-height-body-sm);
+      transition: all 0.3;
+
+      * {
+        font-size: inherit;
+        font-weight: inherit;
+        line-height: inherit;
+      }
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}
+
+.profileSwitchPanel {
+  background: #ffffff;
+  border-radius: 8px;
+  border: 1px solid var(--color-gray-300);
+  min-width: 320px;
+
+  .usersHolder {
+    padding-bottom: calc(var(--space-unit) * 3);
+  }
+}
+
+.profileSwitchPanelHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: calc(var(--space-unit) * 4) calc(var(--space-unit) * 6);
+  border-bottom: 1px solid var(--color-gray-200);
+
+  .caretLeft,
+  .closeIcon {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+
+    svg {
+      width: 20px;
+      height: 20px;
+    }
+  }
+}
+
+.headerTitle,
+.initialsTile {
+  font-size: var(--font-size-h5);
+  font-weight: var(--font-weight-h5);
+  line-height: var(--line-height-h5);
+}
+
+.fieldWrapper {
+  padding: calc(var(--space-unit) * 4) calc(var(--space-unit) * 8);
+  border-bottom: 1px solid var(--color-gray-200);
+}
+
+.profileSwitchUser {
+  padding: calc(var(--space-unit) * 3) calc(var(--space-unit) * 8);
+  border-bottom: 1px solid var(--color-gray-200);
+  transition: all 0.3s;
+
+  &:hover {
+    background: var(--color-gray-200);
+  }
+}
+
+.profileSwitchUserWrapper {
+  .profileSwitchUserAvatar {
+    margin-right: calc(var(--space-unit) * 3);
+  }
+}

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

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

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

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

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

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

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

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

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

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

package/src/Notification/Notification.tsx

@@ -1,83 +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>
-  );
-};
+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/NotificationList.tsx

@@ -1,29 +1,54 @@
-import './notification.scss'
+import XIcon from "../Components/Icons/MathAndFinance/XIcon/XIcon.tsx";
+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}
+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 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>
-  </>
+      </li>
+    </>
+  );
 };