@ssa-ui-kit/widgets 0.0.6-alpha → 0.0.7-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

@@ -1,115 +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`,
-    });
-  });
-});
+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

@@ -1,54 +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');
-  });
-});
+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

@@ -1,55 +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>
-  );
-};
+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>
+  );
+};