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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ssa-ui-kit/widgets",
-  "version": "0.0.1-alpha",
+  "version": "0.0.2-alpha",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "private": false,
@@ -29,9 +29,9 @@
     "js-tokens": "^4.0.0",
     "loose-envify": "^1.4.0",
     "scheduler": "^0.23.0",
-    "@ssa-ui-kit/core": "^0.0.1-alpha",
-    "@ssa-ui-kit/utils": "^0.0.1-alpha",
-    "@ssa-ui-kit/hooks": "^0.0.1-alpha"
+    "@ssa-ui-kit/hooks": "^0.0.1-alpha",
+    "@ssa-ui-kit/core": "^0.0.2-alpha",
+    "@ssa-ui-kit/utils": "^0.0.1-alpha"
   },
   "browserslist": [
     ">0.1%",

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>
+);

package/src/components/CollapsibleNavBar/NavBarItemWithSubMenu.tsx

@@ -0,0 +1,84 @@
+import {
+  AccordionGroupContextProvider,
+  AccordionGroup,
+  Accordion,
+  Wrapper,
+  AccordionTitle,
+} from '@ssa-ui-kit/core';
+import CollapsibleNavBarItem from './CollapsibleNavBarItem';
+import { NavBarAccordionContent } from './NavBarAccordionContent';
+import { CollapsibleNavBarPopover } from './NavBarPopover';
+import { TriggerIcon } from './TriggerIcon';
+import { CollapsibleNavBarGroup } from './types';
+import * as S from './styles';
+
+export const NavBarItemWithSubMenu = ({
+  item,
+  pathname,
+}: {
+  item: CollapsibleNavBarGroup;
+  pathname: string;
+}) => {
+  const { iconName, iconSize, title, items, prefix } = item;
+  const uniqName = iconName + title.replace(' ', '').toLowerCase();
+  const accordionUniqName = uniqName + 'accordion';
+  return (
+    <AccordionGroupContextProvider key={uniqName}>
+      <CollapsibleNavBarItem>
+        <AccordionGroup
+          size="small"
+          css={{
+            width: '100%',
+          }}>
+          <Accordion
+            id={accordionUniqName}
+            title={title}
+            isOpened={false}
+            ariaControls={`${accordionUniqName}-panel`}
+            css={{
+              padding: 0,
+              '& ul li:last-child': {
+                paddingBottom: 10,
+              },
+            }}
+            renderContent={(props) => (
+              <NavBarAccordionContent
+                items={items}
+                accordionUniqueName={accordionUniqName}
+                prefix={prefix}
+                pathname={pathname}
+                isPopover={false}
+                {...props}
+              />
+            )}
+            renderTitle={(data) => (
+              <Wrapper onClick={data.onClick} css={S.AccordionTitleWrapper}>
+                <div css={S.IconWrapper} className="icon-wrapper">
+                  <CollapsibleNavBarPopover
+                    triggerIcon={
+                      <TriggerIcon iconName={iconName} iconSize={iconSize} />
+                    }
+                    title={data.title}
+                    content={
+                      <NavBarAccordionContent
+                        items={items}
+                        accordionUniqueName={accordionUniqName}
+                        prefix={prefix}
+                        pathname={pathname}
+                        id={accordionUniqName}
+                        isOpened
+                        isPopover
+                      />
+                    }
+                  />
+                </div>
+                <TriggerIcon iconName={iconName} iconSize={iconSize} />
+                <AccordionTitle {...data} css={S.AccordionTitle} />
+              </Wrapper>
+            )}
+          />
+        </AccordionGroup>
+      </CollapsibleNavBarItem>
+    </AccordionGroupContextProvider>
+  );
+};