@hellobetterdigitalnz/betterui 0.0.2 → 0.0.3

package/src/Notification/NotificationInterface.tsx

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

package/src/Notification/NotificationList.tsx

@@ -1,54 +0,0 @@
-import XIcon from "../Components/Icons/MathAndFinance/XIcon/XIcon.tsx";
-import "./notification.scss";
-import NotificationListInterface from "./NotificationListInterface.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

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

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

package/src/Notification/NotificationListInterface.tsx

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

package/src/Notification/notification.scss

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