@soul-refiner/design-system 0.0.13 → 0.0.15

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

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

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

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

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