@ssa-ui-kit/widgets 0.0.1-alpha → 0.0.3-alpha

package/src/components/CardList/CardList.tsx

@@ -1,37 +1,37 @@
-import { Fragment } from 'react';
-import { css } from '@emotion/react';
-
-import { Typography } from '@ssa-ui-kit/core';
-
-import { ICardListProps, Item } from './types';
-
-/**
- *
- * UI Component that renders a list of items with a custom render function
- */
-export const CardList = <ItemType extends Item>({
-  title,
-  items,
-  renderItem,
-}: ICardListProps<ItemType>) => {
-  return (
-    <Fragment>
-      <Typography variant="h5" weight="bold">
-        {title}
-      </Typography>
-
-      <ul
-        css={css`
-          list-style: none;
-          padding: 0;
-
-          li {
-            margin-bottom: 15px;
-          }
-        `}>
-        {Array.isArray(items) &&
-          items.map((item) => <li key={item.id}>{renderItem(item)}</li>)}
-      </ul>
-    </Fragment>
-  );
-};
+import { Fragment } from 'react';
+import { css } from '@emotion/react';
+
+import { Typography } from '@ssa-ui-kit/core';
+
+import { ICardListProps, Item } from './types';
+
+/**
+ *
+ * UI Component that renders a list of items with a custom render function
+ */
+export const CardList = <ItemType extends Item>({
+  title,
+  items,
+  renderItem,
+}: ICardListProps<ItemType>) => {
+  return (
+    <Fragment>
+      <Typography variant="h5" weight="bold">
+        {title}
+      </Typography>
+
+      <ul
+        css={css`
+          list-style: none;
+          padding: 0;
+
+          li {
+            margin-bottom: 15px;
+          }
+        `}>
+        {Array.isArray(items) &&
+          items.map((item) => <li key={item.id}>{renderItem(item)}</li>)}
+      </ul>
+    </Fragment>
+  );
+};

package/src/components/CardList/index.ts

@@ -1,2 +1,2 @@
-export { CardList as default } from './CardList';
-export * from './types';
+export { CardList as default } from './CardList';
+export * from './types';

package/src/components/CardList/types.ts

@@ -1,10 +1,10 @@
-export type Item = {
-  id: string | number;
-  [prop: string | number | symbol]: unknown;
-};
-
-export interface ICardListProps<ItemType extends Item> {
-  title: string;
-  items: Array<ItemType>;
-  renderItem: (item: ItemType) => React.ReactNode;
-}
+export type Item = {
+  id: string | number;
+  [prop: string | number | symbol]: unknown;
+};
+
+export interface ICardListProps<ItemType extends Item> {
+  title: string;
+  items: Array<ItemType>;
+  renderItem: (item: ItemType) => React.ReactNode;
+}

package/src/components/CollapsibleNavBar/CollapsibleNavBar.e2e.ts

@@ -0,0 +1,115 @@
+import { test, Page, expect } from '@playwright/test';
+import { SCREEN_SIZES } from '../../consts';
+
+test.describe.configure({ mode: 'serial' });
+
+const WIDGETS_CUSTOM_SHOTS_PATH = './custom-shots/';
+const SCREENSHOT_PREFIX = `${WIDGETS_CUSTOM_SHOTS_PATH}widgets-collapsiblenavbar-opened__`;
+const MOBILE_SIZE = { width: 899, height: 1200 };
+
+const gotoPage = (page: Page) => {
+  return page.goto(
+    'http://localhost:6007/iframe.html?args=&id=widgets-collapsiblenavbar--default&viewMode=story',
+  );
+};
+
+test.describe('Widgets: CollapsibleNavBar', () => {
+  test('[1920] Should be visible', async ({ page }) => {
+    await page.setViewportSize(SCREEN_SIZES[1920]);
+    await gotoPage(page);
+    await page.locator('nav ul');
+    await page.screenshot({
+      path: `${SCREENSHOT_PREFIX}[w1920px].png`,
+    });
+  });
+
+  test('[1920] Statistics submenu should be shown after Statistics icon hovered', async ({
+    page,
+  }) => {
+    await page.setViewportSize(SCREEN_SIZES[1920]);
+    await gotoPage(page);
+    await page.locator('ul > li:nth-of-type(3) button').first().hover();
+    await page.screenshot({
+      path: `${SCREENSHOT_PREFIX}[w1920px]_statistics_submenu_popover.png`,
+    });
+  });
+
+  test('[1920] Side menu should be expanded after toggle icon clicked', async ({
+    page,
+  }) => {
+    await page.setViewportSize(SCREEN_SIZES[1920]);
+    await gotoPage(page);
+    await page.click('label[for=contentToggler]');
+    await page.screenshot({
+      path: `${SCREENSHOT_PREFIX}[w1920px]_side_menu_expanded.png`,
+    });
+  });
+
+  test('[1920] Statistics submenu should be showed after Statistics item clicked (expanded state)', async ({
+    page,
+  }) => {
+    await page.setViewportSize(SCREEN_SIZES[1920]);
+    await gotoPage(page);
+    await page.click('label[for=contentToggler]');
+    await page.click('#chartstatisticsaccordion');
+    await page.screenshot({
+      path: `${SCREENSHOT_PREFIX}[w1920px]_statistics_submenu_expanded.png`,
+    });
+  });
+
+  test('[1439] Should be visible', async ({ page }) => {
+    await page.setViewportSize({ width: 1439, height: 1200 });
+    await gotoPage(page);
+    await page.locator('nav ul');
+    await page.screenshot({
+      path: `${SCREENSHOT_PREFIX}[w1439px].png`,
+    });
+  });
+
+  test('[1439] Statistics submenu should be shown after Statistics icon hovered', async ({
+    page,
+  }) => {
+    await page.setViewportSize({ width: 1439, height: 1200 });
+    await gotoPage(page);
+    await page.locator('ul > li:nth-of-type(3) button').first().hover();
+    await page.screenshot({
+      path: `${SCREENSHOT_PREFIX}[w1439px]_statistics_submenu_popover.png`,
+    });
+  });
+
+  test('[899] Hamburger menu icon should be visible by default', async ({
+    page,
+  }) => {
+    await page.setViewportSize(MOBILE_SIZE);
+    await gotoPage(page);
+    await page.locator('nav ui');
+    await page.screenshot({
+      path: `${SCREENSHOT_PREFIX}[w899px]_default.png`,
+    });
+  });
+
+  test('[899] Menu content should be visible after icon clicked', async ({
+    page,
+  }) => {
+    await page.setViewportSize(MOBILE_SIZE);
+    await gotoPage(page);
+    await page.click('nav > div:nth-of-type(1) > label');
+    await expect(page.getByText('Dashboard')).toBeVisible();
+    await page.screenshot({
+      path: `${SCREENSHOT_PREFIX}[w899px]_menu_opened.png`,
+    });
+  });
+
+  test('[899] Statistics submenu should be visible after Statistics item clicked', async ({
+    page,
+  }) => {
+    await page.setViewportSize(MOBILE_SIZE);
+    await gotoPage(page);
+    await page.click('nav > div:nth-of-type(1) > label');
+    await page.getByText('Statistics').click();
+    await expect(page.getByText('Max in Work')).toBeVisible();
+    await page.screenshot({
+      path: `${SCREENSHOT_PREFIX}[w899px]_statistics_submenu.png`,
+    });
+  });
+});

package/src/components/CollapsibleNavBar/CollapsibleNavBar.spec.tsx

@@ -0,0 +1,54 @@
+import { fireEvent } from '@testing-library/dom';
+import { ITEMS } from './stories/consts';
+import { StoryComponent } from './stories/StoryComponent';
+import { Logo } from './stories/Logo';
+
+describe('CollapsibleNavBar', () => {
+  it('Should be correctly rendered', () => {
+    const { queryByText, getAllByText } = render(
+      <StoryComponent items={ITEMS} renderLogo={<Logo />} />,
+    );
+
+    queryByText('Dashboard');
+    queryByText('Bots');
+    queryByText('Statistics');
+    queryByText('Max in Work');
+    queryByText('History');
+    getAllByText('Settings');
+  });
+
+  it('Should expand the group', () => {
+    const { container } = render(
+      <StoryComponent items={ITEMS} renderLogo={<Logo />} />,
+    );
+
+    const statisticsArrow = container.querySelector(
+      'button#chartstatisticsaccordion',
+    );
+
+    expect(statisticsArrow as Node).toHaveAttribute('aria-expanded', 'false');
+
+    fireEvent.click(statisticsArrow as Node);
+
+    expect(statisticsArrow as Node).toHaveAttribute('aria-expanded', 'true');
+  });
+
+  it('Should be expanded', () => {
+    const { container } = render(
+      <StoryComponent items={ITEMS} renderLogo={<Logo />} />,
+    );
+
+    const contentToggler = container.querySelector('label[for=contentToggler]');
+    const arrow = contentToggler?.querySelector('title');
+
+    expect(arrow?.textContent).toEqual('Carrot right');
+
+    fireEvent.click(contentToggler as Node);
+
+    expect(
+      container
+        .querySelector('label[for=contentToggler]')
+        ?.querySelector('title')?.textContent,
+    ).toEqual('Carrot left');
+  });
+});

package/src/components/CollapsibleNavBar/CollapsibleNavBar.tsx

@@ -0,0 +1,55 @@
+import { useLocation } from 'react-router-dom';
+import { Wrapper } from '@ssa-ui-kit/core';
+import * as S from './styles';
+
+import CollapsibleNavBarBase from './CollapsibleNavBarBase';
+import CollapsibleNavBarWrapper from './CollapsibleNavBarWrapper';
+import CollapsibleNavBarList from './CollapsibleNavBarList';
+import CollapsibleNavToggle from './CollapsibleNavToggle';
+import { CollapsibleNavBarExtendedProps } from './types';
+import { NavContentToggle } from './CollapsibleNavContentToggle';
+import { NavBarItemWithSubMenu } from './NavBarItemWithSubMenu';
+import { NavBarItemWithoutSubMenu } from './NavBarItemWithoutSubMenu';
+
+/**
+ * UI Component that shows the collapsible navigation bar
+ *
+ */
+export const CollapsibleNavBar = ({
+  items,
+  renderLogo,
+}: CollapsibleNavBarExtendedProps) => {
+  const { pathname } = useLocation();
+
+  return (
+    <CollapsibleNavBarBase>
+      <CollapsibleNavToggle />
+
+      <CollapsibleNavBarWrapper>
+        <Wrapper css={S.LogoWrapper}>
+          {renderLogo}
+          <NavContentToggle id={'contentToggler'} />
+        </Wrapper>
+        <CollapsibleNavBarList>
+          {items.map((item) => {
+            const { iconName, title } = item;
+            const keyName = iconName + title.replace(' ', '').toLowerCase();
+            return 'items' in item ? (
+              <NavBarItemWithSubMenu
+                item={item}
+                pathname={pathname}
+                key={keyName}
+              />
+            ) : (
+              <NavBarItemWithoutSubMenu
+                item={item}
+                pathname={pathname}
+                key={keyName}
+              />
+            );
+          })}
+        </CollapsibleNavBarList>
+      </CollapsibleNavBarWrapper>
+    </CollapsibleNavBarBase>
+  );
+};

package/src/components/CollapsibleNavBar/CollapsibleNavBarBase.ts

@@ -0,0 +1,122 @@
+import styled from '@emotion/styled';
+import NavBarBase from '@components/NavBar/NavBarBase';
+import { css } from '@emotion/react';
+
+const popupIconsToggle = (isVisible: boolean) => css`
+  & a > button {
+    display: ${isVisible ? 'block' : 'none'};
+  }
+  & > div > div > div > div:first-of-type {
+    display: ${isVisible ? 'block' : 'none'};
+    & > button {
+      display: ${isVisible ? 'block' : 'none'};
+    }
+  }
+`;
+
+const staticIconsToggle = (isVisible: boolean) => css`
+  & a > div {
+    display: ${isVisible ? 'flex' : 'none'};
+  }
+  & > div > div > div > div:nth-of-type(2) {
+    display: ${isVisible ? 'block' : 'none'};
+  }
+  & > div > div > div:nth-of-type(2) {
+    display: ${isVisible ? 'block' : 'none'};
+  }
+`;
+
+const CollapsibleNavBarBase = styled(NavBarBase)`
+  padding: 15px 0 0 15px;
+  position: absolute;
+
+  & li {
+    ${popupIconsToggle(false)}
+  }
+
+  &:has(> input[type='checkbox']:checked) {
+    position: static;
+    background: linear-gradient(
+      108.3deg,
+      ${({ theme }) => theme.colors.greyDarker} -0.36%,
+      ${({ theme }) => theme.colors.greyDarker} 100%
+    );
+    height: 100%;
+  }
+
+  & > input[type='checkbox'] {
+    &:checked {
+      & ~ div:first-of-type {
+        background-color: #4a4d51;
+
+        & label span {
+          opacity: 1;
+          transform: rotate(45deg) translate(-5px, -9px);
+          background: ${({ theme }) => theme.colors.white};
+
+          &:nth-last-of-type(3) {
+            opacity: 0;
+            transform: rotate(0deg) scale(0.2, 0.2);
+          }
+
+          &:nth-last-of-type(2) {
+            transform: rotate(-45deg) translate(-2px, 8px);
+          }
+        }
+      }
+
+      & ~ div:nth-of-type(2) {
+        opacity: 1;
+        border-radius: 12px 12px 0 0;
+        height: calc(100vh - 60px);
+
+        ${({ theme }) => theme.mediaQueries.xlg} {
+          border-radius: 0;
+          height: 100vh;
+        }
+      }
+    }
+  }
+
+  ${({ theme }) => theme.mediaQueries.md} {
+    width: 85px;
+    padding: 0;
+    height: 100%;
+    & li {
+      ${staticIconsToggle(false)}
+      ${popupIconsToggle(true)}
+    }
+  }
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    &:has(#contentToggler:checked) {
+      width: 240px;
+
+      & > div:nth-of-type(2) {
+        width: 240px;
+        padding-left: 31px;
+        & img {
+          margin-left: 0;
+        }
+        & li {
+          justify-content: flex-start;
+          & button {
+            display: flex;
+          }
+          ${staticIconsToggle(true)}
+          ${popupIconsToggle(false)}
+
+          & > a > span {
+            display: block;
+          }
+
+          & div > div > div:nth-of-type(2) {
+            display: flex;
+          }
+        }
+      }
+    }
+  }
+`;
+
+export default CollapsibleNavBarBase;

package/src/components/CollapsibleNavBar/CollapsibleNavBarItem.ts

@@ -0,0 +1,28 @@
+import styled from '@emotion/styled';
+import NavBarItem from '@components/NavBar/NavBarItem';
+
+const CollapsibleNavBarItem = styled(NavBarItem)`
+  align-items: flex-start;
+  justify-content: flex-start;
+
+  height: auto;
+  min-height: 24px;
+  padding: 12px 0;
+  &:first-of-type {
+    padding-top: 0;
+  }
+  &:last-of-type {
+    padding-bottom: 0;
+  }
+  width: 100%;
+  & > a {
+    height: 26px;
+  }
+  ${({ theme }) => theme.mediaQueries.md} {
+    justify-content: center;
+    padding: 20px 0;
+    width: 100%;
+  }
+`;
+
+export default CollapsibleNavBarItem;

package/src/components/CollapsibleNavBar/CollapsibleNavBarLink.ts

@@ -0,0 +1,34 @@
+import styled from '@emotion/styled';
+import NavBarLink from '@components/NavBar/NavBarLink';
+import * as S from './styles';
+
+const CollapsibleNavBarLink = styled(NavBarLink)<{ active?: boolean }>`
+  text-decoration: none;
+  display: inline-flex;
+  gap: 20px;
+  color: ${({ theme }) => theme.colors.white80};
+
+  ${({ theme }) => S.SVGMainStyle(theme)};
+  &:hover {
+    svg {
+      filter: ${({ theme }) =>
+        `drop-shadow(-4px 4px 14px ${theme.colors.white})`};
+      & path {
+        fill: ${({ theme }) => theme.colors.white};
+      }
+      & circle {
+        stroke: ${({ theme }) => theme.colors.white};
+      }
+    }
+  }
+
+  & > span {
+    color: ${({ theme }) => theme.colors.white80};
+
+    ${({ theme }) => theme.mediaQueries.md} {
+      display: none;
+    }
+  }
+`;
+
+export default CollapsibleNavBarLink;

package/src/components/CollapsibleNavBar/CollapsibleNavBarList.ts

@@ -0,0 +1,18 @@
+import styled from '@emotion/styled';
+import NavBarList from '@components/NavBar/NavBarList';
+
+const CollapsibleNavBarList = styled(NavBarList)`
+  height: auto;
+  padding: 0 0 0 15px;
+  margin: 14px 0 0 0;
+  ${({ theme }) => theme.mediaQueries.md} {
+    margin-top: 90px;
+    width: 100%;
+    padding: 0;
+  }
+  ${({ theme }) => theme.mediaQueries.lg} {
+    margin-top: 84px;
+  }
+`;
+
+export default CollapsibleNavBarList;

package/src/components/CollapsibleNavBar/CollapsibleNavBarWrapper.ts

@@ -0,0 +1,23 @@
+import styled from '@emotion/styled';
+import NavBarWrapper from '@components/NavBar/NavBarWrapper';
+
+const CollapsibleNavBarWrapper = styled(NavBarWrapper)`
+  transform: none;
+  transition: unset;
+
+  opacity: 0;
+  width: 100%;
+  ${({ theme }) => theme.mediaQueries.md} {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    opacity: 1;
+    height: 100%;
+    width: 85px;
+    top: auto;
+    border-radius: 0;
+    padding-top: 35px;
+  }
+`;
+
+export default CollapsibleNavBarWrapper;

package/src/components/CollapsibleNavBar/CollapsibleNavContentToggle.tsx

@@ -0,0 +1,24 @@
+import { Icon } from '@ssa-ui-kit/core';
+import * as S from './styles';
+import { useState } from 'react';
+
+export const NavContentToggle = ({ id }: { id: string }) => {
+  const [checked, setChecked] = useState(false);
+  return (
+    <div css={S.ContentToggle}>
+      <input type="checkbox" id={id} onChange={() => setChecked(!checked)} />
+      <label
+        htmlFor={id}
+        css={{
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          cursor: 'pointer',
+        }}>
+        <Icon name={checked ? 'carrot-left' : 'carrot-right'} size={14} />
+      </label>
+    </div>
+  );
+};

package/src/components/CollapsibleNavBar/CollapsibleNavToggle.tsx

@@ -0,0 +1,52 @@
+import React, { useId } from 'react';
+import { css } from '@emotion/react';
+
+import CollapsibleNavToggleWrapper from './CollapsibleNavToggleWrapper';
+
+const CollapsibleNavToggle = () => {
+  const id = useId();
+  return (
+    <>
+      <input type="checkbox" id={id} />
+
+      <CollapsibleNavToggleWrapper>
+        <label
+          htmlFor={id}
+          css={css`
+            cursor: pointer;
+
+            height: 20px;
+            width: 20px;
+
+            transform: scale(-1, 1);
+
+            span {
+              height: 2px;
+              width: 100%;
+              background: black;
+              display: block;
+              margin: 4px 0;
+              transform-origin: 4px 0;
+              transition: transform 0.3s cubic-bezier(0.77, 0.2, 0.05, 1),
+                background 0.3s cubic-bezier(0.77, 0.2, 0.05, 1),
+                opacity 0.35s ease;
+
+              &:first-of-type {
+                transform-origin: 0% 0%;
+              }
+
+              &:nth-last-of-type(2) {
+                transform-origin: 0% 100%;
+              }
+            }
+          `}>
+          <span></span>
+          <span></span>
+          <span></span>
+        </label>
+      </CollapsibleNavToggleWrapper>
+    </>
+  );
+};
+
+export default CollapsibleNavToggle;

package/src/components/CollapsibleNavBar/CollapsibleNavToggleWrapper.ts

@@ -0,0 +1,16 @@
+import styled from '@emotion/styled';
+import NavToggleWrapper from '@components/NavBar/NavToggleWrapper';
+
+const CollapsibleNavToggleWrapper = styled(NavToggleWrapper)`
+  border-radius: 50%;
+  background: ${({ theme }) => theme.colors.greyLighter};
+
+  height: 40px;
+  width: 40px;
+
+  ${({ theme }) => theme.mediaQueries.md} {
+    display: none;
+  }
+`;
+
+export default CollapsibleNavToggleWrapper;

package/src/components/CollapsibleNavBar/NavBarAccordionContent.tsx

@@ -0,0 +1,33 @@
+import { AccordionContent, RenderContentProps } from '@ssa-ui-kit/core';
+import CollapsibleNavBarLink from './CollapsibleNavBarLink';
+import * as S from './styles';
+
+export const NavBarAccordionContent = ({
+  items,
+  accordionUniqueName,
+  prefix,
+  pathname,
+  isPopover,
+  ...rest
+}: RenderContentProps & {
+  items: Array<{ path: string; title: string }>;
+  accordionUniqueName: string;
+  prefix?: string;
+  pathname: string;
+  isPopover?: boolean;
+}) => (
+  <AccordionContent
+    {...rest}
+    css={[S.AccordionContent, isPopover && S.AccordionContentPopover]}>
+    {items.map((subMenuItem) => (
+      <CollapsibleNavBarLink
+        key={`${accordionUniqueName}-link-${subMenuItem.title
+          .replace(' ', '')
+          .toLowerCase()}`}
+        to={'/' + prefix + subMenuItem.path}
+        active={pathname === subMenuItem.path ? true : undefined}>
+        {subMenuItem.title}
+      </CollapsibleNavBarLink>
+    ))}
+  </AccordionContent>
+);