@soul-refiner/design-system 0.0.5 → 0.0.7

package/src/navigation/Navigation/Navigation.spec.js

@@ -1,144 +0,0 @@
-import React from "react";
-import "@testing-library/jest-dom";
-import { fireEvent, render, screen } from "@testing-library/react";
-
-import { Home, BellAlert, CircleQuestion } from "@soul-refiner/icons/src";
-import { Navigation } from "./Navigation";
-
-const props = {
-  logoURI: "./Logo.png",
-  user: {
-    avatar: "avatar-male.jpg",
-    url: "#",
-  },
-  active: "",
-  click: jest.fn(),
-};
-
-describe("Primary navigation", () => {
-  it("renders the items", () => {
-    render(
-      <Navigation {...props}>
-        <Navigation.Item
-          active={props.active === "1"}
-          icon={<Home iconSize={19} />}
-          href="#"
-          title="Top 1"
-        />
-        <Navigation.Item
-          active={props.active === "2"}
-          as="button"
-          icon={<BellAlert iconSize={19} />}
-          href="#"
-          onClick={props.click}
-          title="Top 2"
-        />
-        <Navigation.Item
-          as="button"
-          bottom={true}
-          icon={<CircleQuestion iconSize={19} />}
-          href="#"
-          title="Bottom"
-        />
-      </Navigation>
-    );
-    expect(screen.getByText("Top 1"));
-    expect(screen.getByText("Top 2"));
-    expect(screen.getByText("Bottom"));
-  });
-
-  it("renders clickable items", () => {
-    render(
-      <Navigation {...props}>
-        <Navigation.Item
-          active={props.active === "1"}
-          icon={<Home iconSize={19} />}
-          href="#"
-          title="Top 1"
-        />
-        <Navigation.Item
-          active={props.active === "2"}
-          as="button"
-          icon={<BellAlert iconSize={19} />}
-          href="#"
-          onClick={props.click}
-          title="Top 2"
-        />
-        <Navigation.Item
-          as="button"
-          bottom={true}
-          icon={<CircleQuestion iconSize={19} />}
-          href="#"
-          title="Bottom"
-        />
-      </Navigation>
-    );
-    const item2 = screen.getByText("Top 2");
-    fireEvent.click(item2);
-    expect(props.click).toHaveBeenCalled();
-  });
-
-  it("renders an active item", () => {
-    props.active = "2";
-    render(
-      <Navigation {...props}>
-        <Navigation.Item
-          active={props.active === "1"}
-          icon={<Home iconSize={19} />}
-          href="#"
-          title="Top 1"
-        />
-        <Navigation.Item
-          active={props.active === "2"}
-          as="button"
-          icon={<BellAlert iconSize={19} />}
-          href="#"
-          onClick={props.click}
-          title="Top 2"
-        />
-        <Navigation.Item
-          as="button"
-          bottom={true}
-          icon={<CircleQuestion iconSize={19} />}
-          href="#"
-          title="Bottom"
-        />
-      </Navigation>
-    );
-    const item2 = screen.getByText("Top 2").parentElement;
-    expect(item2).toHaveClass("active");
-  });
-
-  it("renders items with the bottom prop at the bottom of the navigation bar", () => {
-    render(
-      <Navigation {...props}>
-        <Navigation.Item
-          active={props.active === "1"}
-          icon={<Home iconSize={19} />}
-          href="#"
-          title="Top 1"
-        />
-        <Navigation.Item
-          active={props.active === "2"}
-          as="button"
-          icon={<BellAlert iconSize={19} />}
-          href="#"
-          onClick={props.click}
-          title="Top 2"
-        />
-        <Navigation.Item
-          as="button"
-          bottom={true}
-          icon={<CircleQuestion iconSize={19} />}
-          href="#"
-          title="Bottom"
-        />
-      </Navigation>
-    );
-    const topWrapper = screen.getByText("Top 1").parentElement.parentElement;
-    const bottomWrapper =
-      screen.getByText("Bottom").parentElement.parentElement;
-    expect(topWrapper).not.toHaveClass("bottom");
-    expect(bottomWrapper).toHaveClass("bottom");
-  });
-});

package/src/navigation/Navigation/Navigation.tsx

@@ -1,111 +0,0 @@
-import React from "react";
-import { User } from "@soul-refiner/models";
-import { CollapseNavigation } from "@soul-refiner/icons/src";
-import { Component, ComponentProps } from "@soul-refiner/utils/src";
-import styles from "./Navigation.module.scss";
-import { Avatar } from "../../iconography";
-
-export interface NavigationProps extends React.PropsWithChildren {
-  logoURI: string;
-  user: Partial<User>;
-}
-
-const Navigation = ({ children, logoURI, user }: NavigationProps) => {
-  const [showSub, setShowSub] = React.useState(true);
-
-  const handleToggleSubNavigation = () => setShowSub((prev) => !prev);
-
-  const mainElements: React.ReactElement[] = [];
-  const bottomElements: React.ReactNode[] = [];
-  let subNavElement: React.ReactNode = false;
-
-  React.Children.forEach(children, (child, index) => {
-    if (
-      React.isValidElement(child) &&
-      !(child.props as { bottom?: string }).bottom
-    ) {
-      if (child.props.active) {
-        subNavElement =
-          child.props.children &&
-          React.cloneElement(child.props.children, { show: showSub });
-      }
-      mainElements.push(
-        <li
-          key={"nav-item-" + index.toString(36)}
-          onClick={() => setShowSub(true)}
-        >
-          {child}
-        </li>
-      );
-    } else {
-      bottomElements.push(child);
-    }
-  });
-
-  return (
-    <nav className={`${styles.primary}`}>
-      <div>
-        <img src={logoURI} alt="logo" className="logo" />
-        <ul>
-          <Navigation.Item
-            as="button"
-            icon={<CollapseNavigation iconSize={19} />}
-            data-testid="toggle-subnav"
-            onClick={handleToggleSubNavigation}
-          />
-          {mainElements}
-        </ul>
-        <ul className="bottom">
-          {bottomElements}
-          <a href={user?.url} className="avatar-wrapper">
-            <Avatar size={32} url={user?.avatar ?? ""} />
-          </a>
-        </ul>
-      </div>
-      {subNavElement && subNavElement}
-    </nav>
-  );
-};
-
-export interface NavigationItemProps extends Omit<ComponentProps, "as"> {
-  as?: React.ElementType;
-  bottom?: boolean;
-  icon: React.ReactElement;
-  active?: boolean;
-  style?: React.CSSProperties;
-  title?: string;
-}
-
-/**
- *
- * @note children
- * The children prop currently does not support any React.Fragments. The app will crash if used
- */
-export const Item = ({
-  as,
-  bottom,
-  children,
-  icon,
-  active,
-  style,
-  title,
-  ...rest
-}: NavigationItemProps) => {
-  return (
-    <Component
-      as={as ?? "a"}
-      className={`${styles.item}${active ? " active" : ""}`}
-      data-bottomelement={bottom}
-      style={style}
-      {...rest}
-    >
-      {React.cloneElement(icon, { size: 20, fill: "var(--color-grey-5)" })}
-      <p>{title}</p>
-    </Component>
-  );
-};
-
-Item.displayName = "Navigation.Item";
-Navigation.Item = Item;
-
-export { Navigation };

package/src/navigation/Navigation/SubNavigation.module.scss

@@ -1,255 +0,0 @@
-@use "@soul-refiner/styles/mixins";
-
-.secondary {
-  &[class~="hidden"] {
-    display: none;
-  }
-  border-bottom-right-radius: 8px;
-
-  @include mixins.flex($dir: column, $wrap: nowrap);
-  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
-  height: 100vh;
-  max-width: 420px;
-  position: relative;
-
-  [class~="header"] {
-    padding: 32px 24px 16px;
-    width: 100%;
-
-    [class~="title-wrapper"] {
-      @include mixins.flex($align: center, $justify: space-between);
-      form {
-        margin-left: 16px;
-        max-width: 208px;
-      }
-
-      &[class~="submenu"] {
-        gap: 4px;
-        justify-content: flex-start;
-        margin-bottom: 16px;
-        cursor: pointer;
-        &:hover {
-          h4,
-          div > svg {
-            fill: var(--color-blue-4);
-            color: var(--color-blue-4);
-          }
-        }
-        &:active {
-          h4,
-          div > svg {
-            fill: var(--color-blue-8);
-            color: var(--color-blue-8);
-          }
-        }
-      }
-    }
-
-    & > [class~="submenu"] + div {
-      padding: 16px 0px;
-      button {
-        height: 48px;
-        & > img {
-          width: 48px !important;
-          height: 48px !important;
-        }
-      }
-      div > p {
-        @include mixins.font(400, 24px, 30px);
-      }
-    }
-
-    [class~="buttons-wrapper"] {
-      @include mixins.flex($align: center, $justify: space-between, $gap: 4px);
-      margin: 16px 0px 0px;
-      width: 100%;
-
-      [class~="sub-nav-button"] {
-        border-radius: 215px;
-        flex: 1;
-        padding: 4px 16px;
-      }
-    }
-  }
-
-  [class~="tab-wrapper"] {
-    padding: 0px 25px;
-    overflow-x: scroll;
-    width: 100%;
-    ul {
-      gap: 4px;
-      & > li {
-        height: 64px !important;
-        user-select: none;
-        padding: 0px 8px;
-        &:last-child {
-          margin-right: 25px;
-        }
-      }
-    }
-    &::-webkit-scrollbar {
-      display: none;
-    }
-  }
-
-  [class~="contents"] {
-    @include mixins.flex($dir: column, $wrap: nowrap);
-    flex: 1;
-    background-color: var(--color-blue-10);
-    padding: 16px 14px 32px;
-    max-height: calc(100vh - 162px);
-    width: 420px;
-    overflow-y: auto;
-    overflow-x: hidden;
-  }
-
-  [class~="create-wrapper"] {
-    padding: 14px 14px 32px;
-    background-color: var(--color-blue-10);
-    width: 100%;
-
-    [class~="create"] {
-      width: 100%;
-    }
-  }
-}
-
-.subitem {
-  @include mixins.flex();
-  position: relative;
-  width: 392px;
-  padding: 20px 24px;
-  border-bottom: 1px solid var(--color-blue-8);
-  cursor: pointer;
-  user-select: none;
-
-  & > div {
-    height: 38px;
-    [class~="avatar"] {
-      @include mixins.font(500, 18px, 22.5px);
-      color: var(--color-blue-2);
-
-      &[class~="subtitle"] {
-        @include mixins.font(400, 12px, 15px);
-        color: var(--color-blue-2);
-      }
-    }
-    & > button {
-      height: 38px;
-    }
-  }
-
-  [class~="time-stamp"] {
-    @include mixins.font(400, 12px, 15px);
-    color: var(--color-blue-4);
-    margin-left: auto;
-  }
-
-  &[class~="active"] {
-    background-color: var(--color-blue-3);
-    border-radius: var(--border-radius-small);
-    border: none;
-
-    & > div {
-      [class~="avatar"] {
-        color: #ffffff;
-
-        &[class~="subtitle"] {
-          @include mixins.font(400, 12px, 15px);
-          color: #ffffff;
-        }
-      }
-
-      [class~="icon"] > svg {
-        fill: var(--color-grey-9);
-      }
-    }
-
-    [class~="time-stamp"] {
-      color: var(--color-blue-7);
-    }
-  }
-
-  &[class~="unread"] {
-    & > div {
-      [class~="avatar"] {
-        color: var(--color-blue-0);
-        font-weight: 700;
-      }
-    }
-  }
-
-  [class~="notification"] {
-    position: absolute;
-    left: 4px;
-    top: 35px;
-    width: 11px;
-    height: 11px;
-    border-radius: 50%;
-    background-color: var(--color-blue-4);
-  }
-
-  &:hover:not(&[class~="active"]) {
-    background-color: var(--color-grey-9);
-    border-radius: var(--border-radius-small);
-    border-bottom: 1px solid transparent;
-    & > div > svg {
-      fill: var(--color-blue-3);
-    }
-    & > p {
-      color: var(--color-blue-3);
-    }
-  }
-
-  &:active:not(&[class~="active"]) {
-    background-color: var(--color-blue-9);
-  }
-}
-
-.submenuitem {
-  @include mixins.flex($gap: 15px, $align: center);
-  border-bottom: 1px solid var(--color-blue-8);
-  width: 100%;
-  padding: 20px 24px;
-  user-select: none;
-  cursor: pointer;
-
-  & > p {
-    @include mixins.font(500, 18px, 22.5px);
-    color: var(--color-blue-2);
-  }
-
-  & + [class~="children-wrapper"] {
-    @include mixins.flex($dir: column);
-    width: 100%;
-    padding-left: 50px;
-
-    & > * {
-      @include mixins.font(500, 14px, 17px);
-      width: 100%;
-      color: var(--color-blue-2);
-      padding: 10px 14px;
-      margin: 2px 0px;
-      user-select: none;
-
-      &:hover:not(&[class~="active"]) {
-        background-color: var(--color-grey-9);
-        border-radius: var(--border-radius-small);
-      }
-
-      &:active:not(&[class~="active"]) {
-        background-color: var(--color-blue-9);
-      }
-    }
-  }
-
-  &:hover:not(&[class~="active"]) {
-    background-color: var(--color-grey-9);
-    border-radius: var(--border-radius-small);
-    border-bottom: 1px solid transparent;
-  }
-
-  &:active:not(&[class~="active"]) {
-    background-color: var(--color-blue-9);
-  }
-}

package/src/navigation/Navigation/SubNavigation.spec.js

@@ -1,112 +0,0 @@
-import React from "react";
-import "@testing-library/jest-dom";
-import { fireEvent, render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-
-import { Home } from "@soul-refiner/icons/src";
-import { Navigation } from "./Navigation";
-import { SubNavigation } from "./SubNavigation";
-
-const props = {
-  onSearch: jest.fn(),
-  onScrollEnd: jest.fn(),
-  show: true,
-  title: "SubNavigation Title",
-};
-
-describe("Secondary navigation", () => {
-  beforeEach(() => {
-    render(
-      <Navigation
-        logoURI="./Logo.png"
-        user={{
-          avatar: "avatar-male.jpg",
-          url: "#",
-        }}
-      >
-        <Navigation.Item
-          active={true}
-          icon={<Home iconSize={19} />}
-          href="#"
-          title="Top 1"
-        >
-          <SubNavigation {...props}>
-            <SubNavigation.Button>Header Button</SubNavigation.Button>
-            <SubNavigation.Create>Create Channel</SubNavigation.Create>
-            <SubNavigation.Tab name="Tab 1">
-              <SubNavigation.Item
-                subtitle="2m Subscribers"
-                title="Dr. Doug Weiss"
-                url="./avatar-male.jpg"
-              />
-              <SubNavigation.Item
-                subtitle="175k Subscribers"
-                title="Hannah Elliott"
-                url="./avatar-female.jpg"
-              />
-            </SubNavigation.Tab>
-            <SubNavigation.Tab name="Tab 2">
-              <SubNavigation.Item
-                submenu={
-                  <SubNavigation.SubMenu title="Sub SubNavigation">
-                    <SubNavigation.SubMenuItem
-                      icon={<Home />}
-                      title="Sub SubNavigation Item 1"
-                    />
-                    <SubNavigation.SubMenuItem
-                      icon={<Home />}
-                      title="Sub SubNavigation Item 1"
-                    >
-                      <a href="#">Payments</a>
-                      <a href="#">Payouts</a>
-                    </SubNavigation.SubMenuItem>
-                  </SubNavigation.SubMenu>
-                }
-                subtitle="856m Subscribers"
-                title="Soul Refiner"
-                url="./soul-refiner.png"
-              />
-            </SubNavigation.Tab>
-          </SubNavigation>
-        </Navigation.Item>
-      </Navigation>
-    );
-  });
-
-  it("an active Navigation.Item renders the SubNavigation", () => {
-    expect(screen.getByTestId("subnavigation"));
-  });
-
-  it("clicking the toggle closes the subnav", () => {
-    const toggle = screen.getByTestId("toggle-subnav");
-    fireEvent.click(toggle);
-    expect(!screen.getByTestId("subnavigation"));
-  });
-
-  it("renders the buttons, the create CTA, the tab, and the tabs items", () => {
-    expect(screen.getByText("Header Button"));
-    expect(screen.getByText("Create Channel"));
-    expect(screen.getByText("Tab 1"));
-    expect(screen.getByText("Dr. Doug Weiss"));
-    expect(screen.getByText("Hannah Elliott"));
-  });
-
-  it("picks up and renders all of the tab names", () => {
-    expect(screen.getByText("Tab 1"));
-    expect(screen.getByText("Tab 2"));
-  });
-
-  it("has a function search bar", async () => {
-    const input = screen.getByRole("textbox");
-    fireEvent.change(input, { target: { value: "testing the search" } });
-    input.focus();
-    await userEvent.keyboard("{enter}");
-    expect(props.onSearch).toHaveBeenCalledWith("testing the search");
-  });
-
-  it("clicking on a subnav item with submenu prop renders the sub menu", () => {
-    fireEvent.click(screen.getByText("Tab 2"));
-    fireEvent.click(screen.getByText("Soul Refiner"));
-    expect(screen.getByTestId("submenu"));
-  });
-});