@hellobetterdigitalnz/betterui 0.0.2 → 0.0.3

package/src/Components/Layout/Header/HeaderLeft.tsx

@@ -1,4 +1,17 @@
-const HeaderLeft = () => {
+import HeaderLeftProps from "./HeaderLeftProps.tsx";
+import styles from "./header.module.scss"
+const HeaderLeft = (props: HeaderLeftProps) => {
+
+  const {logo, logoSmall} = props
+
+  return <div className={styles.headerLeft}>
+    <div className={`${styles.layoutLogo} layoutLogo`}>
+      {logo}
+    </div>
+    <div className={`${styles.layoutLogoSmall} layoutLogoSmall`}>
+      {logoSmall}
+    </div>
+  </div>
 
 }
 

package/src/Components/Layout/Header/HeaderLeftProps.tsx

@@ -0,0 +1,8 @@
+import {ReactNode} from "react";
+
+interface HeaderLeftProps {
+  logo: ReactNode,
+  logoSmall?: ReactNode,
+}
+
+export default HeaderLeftProps;

package/src/Components/Layout/Header/HeaderProps.tsx

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

package/src/Components/Layout/Header/HeaderRight.tsx

@@ -1,4 +1,20 @@
-const HeaderRight = () => {
+import HeaderRightProps from "./HeaderRightProps.ts";
+import styles from "./header.module.scss"
+
+const HeaderRight = (props: HeaderRightProps) => {
+
+  const {children, extraClass, searchField,searchFieldShow} = props
+
+  return<div className={`${styles.headerRight} ${extraClass}`}>
+    <ul>
+      {searchFieldShow && searchField && (<li>
+       <div className={styles.searchFieldWrap}>
+         {searchField}
+       </div>
+      </li>)}
+      {children}
+    </ul>
+  </div>
 
 }
 

package/src/Components/Layout/Header/HeaderRightProps.ts

@@ -0,0 +1,10 @@
+import {ReactNode} from "react";
+
+interface HeaderRightProps  {
+  searchFieldShow?: boolean;
+  searchField?: ReactNode;
+  children: ReactNode;
+  extraClass?: string;
+}
+
+export default HeaderRightProps;

package/src/Components/Layout/Header/header.module.scss

@@ -0,0 +1,53 @@
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 8) ;
+  border-bottom: 1px solid var(--color-gray-200);
+  background: #FFF;
+}
+
+.headerLeft {
+  //.layoutLogo {
+  //  display: none;
+  //}
+  //
+  //.layoutLogoSmall {
+  //  display: block;
+  //}
+
+}
+
+.headerRight{
+  ul{
+    list-style: none;
+    display: flex;
+    align-items: center;
+    margin: 0px calc(var(--space-unit) * -2);
+
+    .searchFieldWrap{
+      width: 240px;
+      max-width: 100%;
+    }
+
+    li{
+      padding: 0px calc(var(--space-unit) * 2);
+    }
+
+  }
+}
+
+//@media screen and (min-width: $xsm) {
+  .headerLeft {
+    .layoutLogo {
+      display: block;
+    }
+
+    .layoutLogoSmall {
+      display: none;
+    }
+
+  }
+
+//}

package/src/Components/Layout/ProfileAvatar/profileAvatar.module.scss

@@ -8,7 +8,7 @@
   align-items: center;
   justify-content: center;
   min-height: 48px;
-  min-width: 48px;
+  width: 48px;
   border-radius: 100%;
   background: var(--color-primary-500);
   color: var(--color-white);

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

@@ -1,4 +1,13 @@
-const Sidebar = () => {
+import sidebarProps from "./SidebarProps.tsx";
+import styles from "./sidebar.module.scss";
+
+const Sidebar = (props:sidebarProps) => {
+
+  const {children,extraClass} =props
+
+  return <div className={`${styles.sidebar} ${extraClass}`}>
+    {children}
+  </div>
 
 }
 

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

@@ -1,5 +1,19 @@
-const SidebarChevron = () => {
+import styles from "./sidebar.module.scss";
+import CaretLeft from "../../Icons/Arrows/CaretLeft/CaretLeft.tsx";
+import SidebarChevronProps from "./SidebarChevronProps.tsx";
 
+const SidebarChevron = (props: SidebarChevronProps) => {
+
+  const {onClick} = props
+
+  return <div className={styles.sidebarChevronBtn}
+    onClick={(e) => {
+      if (onClick) {
+        onClick(e);
+      }
+    }}>
+    <button><CaretLeft type={"bold"}/></button>
+  </div>
 }
 
 export default SidebarChevron;

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

@@ -0,0 +1,7 @@
+import {MouseEvent} from "react";
+
+interface SidebarChevronProps {
+  onClick?: (e: MouseEvent) => void;
+}
+
+export default SidebarChevronProps;

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

@@ -1,4 +1,13 @@
-const SidebarNavigation = () => {
+import SidebarNavigationProps from "./SidebarNavigationProps.tsx";
+import styles from "./sidebar.module.scss";
+
+const SidebarNavigation = (props:SidebarNavigationProps) => {
+
+  const {children, extraClass,subNavActive}=props
+
+  return<div className={`${styles.sidebarNavigation} ${extraClass} ${subNavActive ? styles.navigationItemSmall : styles.navigationItemLarge}`}>
+    {children}
+  </div>
 
 }
 

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

@@ -1,4 +1,43 @@
-const SidebarNavigationItem = () => {
+import SidebarNavigationItemProps from "./SidebarNavigationItemProps.tsx";
+import styles from './sidebar.module.scss'
+
+const SidebarNavigationItem = (props: SidebarNavigationItemProps) => {
+
+  const {icon, contents, children, extraClass, onClick, activeState} = props
+
+  if (children) {
+    return <div
+      className={`${styles.navigationItemHolder} navigationItemHolder`}>
+      <div
+        className={`navigationItem ${styles.navigationItem} ${extraClass} ${activeState ? styles.active : ''}`}
+        onClick={(e) => {
+          if (onClick) {
+            onClick(e);
+          }
+        }}>
+        {!!icon && <div className={`${styles.navigationIcon} navigationIcon`}>
+          {icon}
+        </div>}
+        <div className={`${styles.navigationItemBody} navigationItemBody`}>
+          {contents}
+        </div>
+      </div>
+      {!!children && <div className={`${styles.subNavigation} subNavigation`}>
+        {children}
+      </div>}
+    </div>
+  }
+
+  return <div className={`${styles.navigationItemHolder} navigationItemHolder`}>
+    <div className={`${styles.navigationItem} ${extraClass} navigationItem ${activeState ? styles.active : ''}`}>
+      {!!icon && <div className={`${styles.navigationIcon} navigationIcon`}>
+        {icon}
+      </div>}
+      <div className={`${styles.navigationItemBody} navigationItemBody`}>
+        {contents}
+      </div>
+    </div>
+  </div>
 
 }
 

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

@@ -0,0 +1,12 @@
+import {ReactNode, MouseEvent} from "react";
+
+interface SidebarNavigationItemProps{
+  icon?: ReactNode;
+  contents: ReactNode;
+  children?: ReactNode;
+  onClick?: (e: MouseEvent) => void;
+  extraClass?:string;
+  activeState?:boolean;
+}
+
+export default SidebarNavigationItemProps;

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

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

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

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

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

@@ -1,5 +1,20 @@
-const SidebarSubNavigation = () => {
-
-}
-
-export default SidebarSubNavigation;
+import styles from "./sidebar.module.scss";
+import sidebarSubNavigationProps from "./SidebarSubNavigationProps.tsx";
+import SidebarChevron from "./SidebarChevron.tsx";
+
+const SidebarSubNavigationItem = (props: sidebarSubNavigationProps) => {
+
+  const {extraClass, children, title, onClick} = props
+
+  return <div className={`${styles.subNavigationHolder} ${extraClass} subNavigationHolder`}>
+    <div className={styles.sidebarChevron}>
+      <SidebarChevron onClick={onClick}/>
+    </div>
+    <div className={styles.sidebarTitle}>
+      <h5>{title}</h5>
+    </div>
+    {children}
+  </div>
+}
+
+export default SidebarSubNavigationItem;

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

@@ -0,0 +1,20 @@
+import SidebarSubNavigationItemProps from "./SidebarSubNavigationItemProps.tsx";
+import styles from "./sidebar.module.scss";
+
+const SidebarSubNavigationItem = (props:SidebarSubNavigationItemProps) => {
+
+  const {icon, contents, extraClass, activeState} = props
+
+  return <div className={`${styles.subNavigationItemHolder} subNavigationItemHolder`}>
+    <div className={`${styles.subNavigationItem} ${extraClass} subNavigationItem ${activeState ? styles.active : ''}`}>
+      {!!icon && <div className={`${styles.subNavigationIcon} subNavigationIcon`}>
+        {icon}
+      </div>}
+      <div className={`${styles.subNavigationItemBody} subNavigationItemBody`}>
+        {contents}
+      </div>
+    </div>
+  </div>
+}
+
+export default SidebarSubNavigationItem;

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

@@ -0,0 +1,12 @@
+import {ReactNode, MouseEvent} from "react";
+
+interface SidebarSubNavigationItemProps{
+  icon?: ReactNode;
+  contents: ReactNode;
+  children?: ReactNode;
+  onClick?: (e: MouseEvent) => void;
+  extraClass?:string;
+  activeState?:boolean;
+}
+
+export default SidebarSubNavigationItemProps;

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

@@ -0,0 +1,10 @@
+import {ReactNode, MouseEvent} from "react";
+
+interface SidebarSubNavigationProps {
+  children:ReactNode;
+  title?:string;
+  extraClass?:string;
+  onClick?: (e: MouseEvent) => void;
+}
+
+export default SidebarSubNavigationProps

package/src/Components/Layout/Sidebar/sidebar.module.scss

@@ -0,0 +1,133 @@
+.sidebar {
+  position: relative;
+  padding: calc(var(--space-unit) * 6) 0px;
+  height: 100vh;
+  background: var(--color-secondary-600);
+  width: fit-content;
+}
+
+.sidebarNavigation {
+  transition: linear width 0.3s;
+
+  &.navigationItemLarge {
+    width: 272px;
+  }
+}
+
+.navigationItemHolder,.subNavigationItemHolder {
+  font-size: var(--font-size-body-regular);
+  font-weight: var(--font-weight-body-regular);
+  line-height: var(--line-height-body-regular);
+}
+
+.navigationItem,.subNavigationItem {
+  padding: calc(var(--space-unit) * 3) calc(var(--space-unit) * 6);
+  display: flex;
+  align-items: center;
+  min-height: 48px;
+  text-transform: uppercase;
+  cursor: pointer;
+  transition: all 0.3s;
+  color: white;
+
+  &:hover, .active {
+    background: var(--color-secondary-700);
+  }
+
+}
+
+.subNavigationItem{
+  color: var(--color-gray-900);
+
+  &:hover, .active {
+    background: var(--color-gray-200);
+  }
+}
+
+.navigationIcon, .subNavigationIcon {
+  display: flex;
+  align-items: center;
+  margin-right: calc(var(--space-unit) * 2);
+  flex-shrink: 0;
+
+  svg {
+    width: 16px;
+    height: 16px;
+  }
+
+}
+
+.navigationItemBody, .subNavigationItemBody{
+  flex-grow: 1;
+}
+
+.navigationItemSmall {
+
+  .navigationItem {
+    justify-content: center;
+    width: 64px;
+  }
+
+  .navigationItemBody {
+    display: none;
+  }
+
+  .navigationIcon {
+    margin-right: 0;
+  }
+
+}
+
+.subNavigationHolder {
+  position: fixed;
+  left: 64px;
+  bottom: 0;
+  height: 100vh;
+  background: white;
+  width: calc(100% - 104px);
+  max-width: 218px;
+  margin-top: -64px;
+  border-right: 1px solid var(--color-gray-200);
+  background: var(--color-gray-50);
+  padding: calc(var(--space-unit) * 10) 0px calc(var(--space-unit) * 6) 0px ;
+
+  .sidebarChevron {
+    position: absolute;
+    z-index: 1;
+    top: 14px;
+    right: -10px;
+  }
+
+}
+
+.sidebarChevronBtn {
+  button {
+    cursor: pointer;
+    width: 20px;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    outline: none;
+    color: var(--color-gray-500);
+    border: 1px solid var(--color-gray-200);
+    border-radius: 50%;
+  }
+
+  svg {
+    width: 12px;
+    height: 12px;
+  }
+}
+
+.sidebarTitle{
+  padding: 0 calc(var(--space-unit) * 10) calc(var(--space-unit) * 3) calc(var(--space-unit) * 10) ;
+
+  h5{
+    font-size: var(--font-size-body-sm);
+    font-weight: var(--font-weight-body-sm);
+    line-height: var(--line-height-body-sm);
+    color: var(--color-gray-700);
+  }
+
+}

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

@@ -0,0 +1,71 @@
+import { Meta, StoryObj } from "@storybook/react";
+import Sidebar from "./Sidebar.tsx";
+import SidebarNavigation from "./SidebarNavigation.tsx";
+import SidebarNavigationItem from "./SidebarNavigationItem.tsx";
+import MagnifyingGlass from "../../Icons/SystemAndDevice/MagnifyingGlass/MagnifyingGlass.tsx";
+import SidebarSubNavigation from "./SidebarSubNavigation.tsx";
+import SidebarSubNavigationItem from "./SidebarSubNavigationItem.tsx";
+
+
+const meta: Meta = {
+  title: "Layout / Sidebar Navigation / Sidebar",
+  component: Sidebar,
+  parameters: {
+    layout: 'fullscreen', // remove default Storybook padding
+  },
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const SidebarTemplate: Story = {
+  render: () => {
+    return (
+      <Sidebar>
+        <SidebarNavigation subNavActive={false}>
+          <SidebarNavigationItem icon={<MagnifyingGlass/>} contents={'File name'}/>
+          <SidebarNavigationItem icon={<MagnifyingGlass/>} contents={'File name'}/>
+          <SidebarNavigationItem icon={<MagnifyingGlass/>} contents={'File name'}/>
+          <SidebarNavigationItem icon={<MagnifyingGlass/>} contents={'File name'}/>
+          <SidebarNavigationItem icon={<MagnifyingGlass/>} contents={'File name'}/>
+          <SidebarNavigationItem icon={<MagnifyingGlass/>} contents={'File name'}/>
+        </SidebarNavigation>
+      </Sidebar>
+    );
+  },
+};
+
+const SidebarWithSubNavigationTemplate: Story = {
+  render: (item:any) => {
+    return (
+      <Sidebar>
+        <SidebarNavigation subNavActive={true}>
+          <SidebarNavigationItem icon={<MagnifyingGlass/>} contents={'File name'}>
+              <SidebarSubNavigation title={'LOREM IPSUM'}>
+                <SidebarSubNavigationItem icon={<MagnifyingGlass/>} contents={'File name'}/>
+                <SidebarSubNavigationItem icon={<MagnifyingGlass/>} contents={'File name'}/>
+                <SidebarSubNavigationItem icon={<MagnifyingGlass/>} contents={'File name'}/>
+                <SidebarSubNavigationItem icon={<MagnifyingGlass/>} contents={'File name'}/>
+              </SidebarSubNavigation>
+          </SidebarNavigationItem>
+          <SidebarNavigationItem icon={<MagnifyingGlass/>} contents={'File name'}/>
+          <SidebarNavigationItem icon={<MagnifyingGlass/>} contents={'File name'}/>
+          <SidebarNavigationItem icon={<MagnifyingGlass/>} contents={'File name'}/>
+          <SidebarNavigationItem icon={<MagnifyingGlass/>} contents={'File name'}/>
+          <SidebarNavigationItem icon={<MagnifyingGlass/>} contents={'File name'}/>
+        </SidebarNavigation>
+      </Sidebar>
+    );
+  },
+};
+
+export const SidebarComponent = {
+  ...SidebarTemplate,
+  item:{}
+};
+
+export const SidebarWithSubNavigationComponent = {
+  ...SidebarWithSubNavigationTemplate,
+};

package/src/export.ts

@@ -0,0 +1,2 @@
+export * from './Components/DataDisplay/export';
+export * from './Components/Form/export'

package/src/global.scss

@@ -117,15 +117,25 @@
   --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);
+  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);
 
   --bg-modal-color: #ffffff;
+
+  --screen-2Xsmall: 320px;
+  --screen-Xsmall: 720px;
+  --screen-small: 992px;
+  --screen-Xmedium: 1194px;
+  --screen-medium: 1440px;
+  --screen-large: 1648px;
+  --screen-Xlarge: 1920px;
 }
 
+
+
 body {
   font-family: var(--body-font);
   font-size: var(--font-size-body-regular);

package/src/vite-env.d.ts

@@ -1 +1 @@
-/// <reference types="vite/client" />
+/// <reference types="vite/client" />

package/src/Notification/Notification.tsx

@@ -1,83 +0,0 @@
-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>
-  );
-};