@ssa-ui-kit/widgets 0.0.30-alpha → 0.0.32-alpha

package/src/components/NotificationMenu/stories/StoryComponent.tsx

@@ -1,85 +0,0 @@
-import { useEffect, useState } from 'react';
-import { Link, MemoryRouter, Route, Routes } from 'react-router-dom';
-import { Button, ButtonGroup, ButtonGroupItem } from '@ssa-ui-kit/core';
-import { NotificationCardProps } from '@components/NotificationCard';
-import { NotificationMenu } from '../NotificationMenu';
-import { MarkAllReadButton, Trigger } from './StoryContent';
-import {
-  disableButton,
-  divideOnSubArr,
-  getMockData,
-  notificationData,
-  readAll,
-} from '../helpers';
-import { ButtonGroupCustom } from '../styles';
-
-export const StoryComponent = () => {
-  const [notifications, setNotifications] = useState<NotificationCardProps[]>(
-    [],
-  );
-  const [readNotifications, setReadNotifications] = useState<
-    NotificationCardProps[]
-  >([]);
-  const [buttonItems, setButtonItems] = useState<ButtonGroupItem[]>([]);
-  const [isLoading, setIsLoading] = useState<boolean>(true);
-
-  const unreadQty = divideOnSubArr(notifications).Unread.length;
-
-  const handleClickOpen = () => () => {
-    if (!isLoading) return;
-    setButtonItems(notificationData.groupButtonItems);
-    getMockData().then((data) => {
-      setIsLoading(false);
-      setNotifications(data.notificationItems);
-      setReadNotifications(data.notificationItems);
-    });
-  };
-
-  useEffect(() => {
-    handleClickOpen();
-    if (!unreadQty) {
-      setButtonItems(disableButton(buttonItems, notifications));
-    }
-  }, [isLoading]);
-
-  const handleClickReadAll = () => {
-    setReadNotifications(readAll(notifications));
-    setButtonItems(disableButton(buttonItems, notifications));
-  };
-
-  const handleClick = (item: Pick<ButtonGroupItem, 'id' | 'text'>) => {
-    setReadNotifications(divideOnSubArr(notifications)[item.text]);
-  };
-
-  return (
-    <MemoryRouter>
-      <Routes>
-        <Route
-          path="/*"
-          element={
-            <NotificationMenu
-              trigger={<Trigger />}
-              onClick={handleClickOpen()}
-              notifications={readNotifications}
-              leftButton={
-                unreadQty ? (
-                  <MarkAllReadButton onClick={() => handleClickReadAll()} />
-                ) : null
-              }
-              rightButton={
-                <Link to={'/'} css={{ gridColumn: 2 }}>
-                  <Button variant="info" text="View all notification" />
-                </Link>
-              }
-              isLoading={isLoading}>
-              <ButtonGroup
-                items={buttonItems}
-                buttonStyles={ButtonGroupCustom}
-                onClick={(item) => handleClick(item)}
-              />
-            </NotificationMenu>
-          }></Route>
-      </Routes>
-    </MemoryRouter>
-  );
-};

package/src/components/NotificationMenu/stories/StoryContent.tsx

@@ -1,52 +0,0 @@
-import { css, useTheme } from '@emotion/react';
-import { Button, Icon, Indicator } from '@ssa-ui-kit/core';
-import { ResetBtnStyles } from '../styles';
-
-interface CommonNotificationPops {
-  onClick: () => void;
-}
-
-export const Trigger = () => {
-  const theme = useTheme();
-  return (
-    <Indicator
-      position="right"
-      isVisible
-      text={
-        <span
-          css={{
-            fontSize: 10,
-            fontWeight: 600,
-            color: '#fff',
-            minWidth: '12px',
-          }}>
-          2
-        </span>
-      }
-      background={`linear-gradient(90deg, ${theme.colors.yellow} 0%, ${theme.colors.yellowLighter} 100%)`}>
-      <div css={{ padding: '0 5px' }}>
-        <Icon name="notification" size={20} color={theme.colors.greyDarker} />
-      </div>
-    </Indicator>
-  );
-};
-
-export const MarkAllReadButton = ({ onClick }: CommonNotificationPops) => {
-  const theme = useTheme();
-  return (
-    <Button
-      onClick={onClick}
-      variant="tertiary"
-      css={css`
-        ${ResetBtnStyles}
-        span {
-          color: ${theme.colors.blueDark};
-        }
-      `}
-      startIcon={
-        <Icon name="check-circle" size={20} color={theme.colors.blueDark} />
-      }
-      text="Mark all as read"
-    />
-  );
-};

package/src/components/NotificationMenu/styles.ts

@@ -1,125 +0,0 @@
-import { Theme, css } from '@emotion/react';
-import { mainTheme } from '@ssa-ui-kit/core';
-
-export const ResetBtnStyles = css`
-  padding: 0;
-  height: auto;
-  background: none;
-
-  &:focus,
-  &:hover {
-    border: none;
-    background: none;
-    box-shadow: none;
-
-    &::before {
-      border: none;
-    }
-  }
-`;
-
-export const PopoverWrapper = (theme: Theme) => css`
-  align-items: flex-start;
-  z-index: 1;
-  width: 345px;
-  border-radius: 15px;
-  box-shadow: 0px 4px 15px 0px ${theme.colors.black25};
-  background: ${theme.colors.greyPopoverLight};
-
-  ${theme.mediaQueries.md} {
-    width: 470px;
-  }
-
-  ${theme.mediaQueries.xs} {
-    width: 310px;
-  }
-`;
-
-export const PopoverContentWrapper = (theme: Theme) => css`
-  width: 100%;
-  padding: 10px;
-
-  ${theme.mediaQueries.md} {
-    padding: 20px;
-  }
-`;
-
-export const List = css`
-  max-height: 460px;
-  overflow: auto;
-`;
-
-export const ButtonsWrapper = (theme: Theme) => css`
-  display: grid;
-  grid-template-columns: auto;
-  justify-content: space-between;
-  width: 100%;
-  padding: 10px;
-  border-top: 0.4px solid ${theme.colors.greyGraphite70};
-
-  ${theme.mediaQueries.md} {
-    padding: 10px 20px 13px;
-  }
-
-  ${theme.mediaQueries.xs} {
-    button {
-      span {
-        font-size: 12px;
-      }
-    }
-  }
-`;
-
-export const Close = (theme: Theme) => css`
-  position: absolute;
-  right: 10px;
-  top: 15px;
-  ${ResetBtnStyles};
-
-  ${theme.mediaQueries.md} {
-    right: 26px;
-    top: 26px;
-  }
-`;
-
-export const Loading = (theme: Theme) => css`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 460px;
-
-  &:before {
-    width: 30px;
-    height: 30px;
-    border: 5px solid ${theme.colors.greyGraphite70};
-    border-radius: 50%;
-    border-top: 5px solid ${theme.colors.grey};
-    animation: spin 2s linear infinite;
-    content: '';
-  }
-
-  @keyframes spin {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(360deg);
-    }
-  }
-`;
-
-export const ButtonGroupCustom = css`
-  margin: 12px 0 11px;
-  background: ${mainTheme.colors.white};
-  &:hover {
-    background: ${mainTheme.colors.greyLighter};
-  }
-
-  &[aria-disabled='true'] {
-    background: none;
-    box-shadow: none;
-    &:hover {
-      background: none;
-    }
-  }
-`;

package/src/components/NotificationMenu/types.ts

@@ -1,11 +0,0 @@
-import { NotificationCardProps } from '@components/NotificationCard';
-
-export interface NotificationMenuProps {
-  trigger: string | JSX.Element;
-  notifications: Array<NotificationCardProps>;
-  children: React.ReactNode;
-  onClick?: () => void;
-  isLoading: boolean;
-  leftButton?: string | JSX.Element | null;
-  rightButton?: string | JSX.Element;
-}

package/src/components/Pagination/ArrowButton.tsx

@@ -1,32 +0,0 @@
-import { useTheme } from '@emotion/react';
-import { Button, Icon } from '@ssa-ui-kit/core';
-
-import { ArrowButtonProps } from './types';
-import { arrowBtnStyles } from './styles';
-
-export const ArrowButton = ({
-  direction,
-  onClick,
-  isDisabled,
-  className,
-}: ArrowButtonProps) => {
-  const theme = useTheme();
-  return (
-    <Button
-      startIcon={
-        <Icon
-          name={`carrot-${direction}`}
-          size={12}
-          color={theme.colors.greyDisabled}
-        />
-      }
-      variant="custom"
-      onClick={onClick}
-      isDisabled={isDisabled}
-      size="small"
-      className={className}
-      css={arrowBtnStyles(theme)}
-      aria-label={`Go to ${direction === 'left' ? 'previous' : 'next'} page`}
-    />
-  );
-};

package/src/components/Pagination/Pagination.e2e.ts

@@ -1,51 +0,0 @@
-import { test } from '@playwright/test';
-import { SCREEN_SIZES } from '../../consts';
-
-const WIDGETS_CUSTOM_SHOTS_PATH = './custom-shots/';
-
-const TEST_CASES = [
-  {
-    url: 'http://localhost:6007/iframe.html?args=&id=widgets-pagination--page-selected&viewMode=story',
-    testTitle: 'Widgets: Pagination hover',
-    screenshotPrefix: 'widgets-pagination--',
-  },
-  {
-    url: 'http://localhost:6007/iframe.html?args=&id=widgets-pagination--disabled&viewMode=story',
-    testTitle: 'Widgets: Disabled pagination hover',
-    screenshotPrefix: 'widgets-pagination-disabled--',
-  },
-];
-
-for (const { url, testTitle, screenshotPrefix } of TEST_CASES) {
-  test(testTitle, async ({ page }) => {
-    // Hover a selected page
-    await page.setViewportSize(SCREEN_SIZES[1920]);
-    await page.goto(url);
-    await page.getByRole('button', { name: 'Current page 5' }).hover();
-
-    await page.screenshot({
-      path: `${WIDGETS_CUSTOM_SHOTS_PATH}${screenshotPrefix}selected-hover__[w1920px].png`,
-    });
-
-    // Hover a NOT selected page
-    await page.getByRole('button', { name: 'Go to page 4' }).hover();
-
-    await page.screenshot({
-      path: `${WIDGETS_CUSTOM_SHOTS_PATH}${screenshotPrefix}not-selected-hover__[w1920px].png`,
-    });
-
-    // Hover the previous page arrow
-    await page.getByRole('button', { name: 'Go to previous page' }).hover();
-
-    await page.screenshot({
-      path: `${WIDGETS_CUSTOM_SHOTS_PATH}${screenshotPrefix}previous-hover__[w1920px].png`,
-    });
-
-    // Hover the next page arrow
-    await page.getByRole('button', { name: 'Go to next page' }).hover();
-
-    await page.screenshot({
-      path: `${WIDGETS_CUSTOM_SHOTS_PATH}${screenshotPrefix}next-hover__[w1920px].png`,
-    });
-  });
-}

package/src/components/Pagination/Pagination.spec.tsx

@@ -1,228 +0,0 @@
-import userEvent from '@testing-library/user-event';
-import { screen, within } from '../../../customTest';
-
-import { Pagination, PaginationContextProvider } from './index';
-
-function setup(component: React.ReactNode, selectedPage?: number) {
-  return {
-    user: userEvent.setup(),
-    ...render(
-      <PaginationContextProvider selectedPage={selectedPage}>
-        {component}
-      </PaginationContextProvider>,
-    ),
-  };
-}
-
-const testCases = {
-  noSelectedPage: [
-    { pages: 1, expected: [1] },
-    { pages: 2, expected: [1, 2] },
-    { pages: 3, expected: [1, 2, 3] },
-    { pages: 4, expected: [1, 2, 3, 4] },
-    { pages: 5, expected: [1, 2, 3, 4, 5] },
-    { pages: 6, expected: [1, 2, 3, -1, 6] },
-    { pages: 7, expected: [1, 2, 3, -1, 7] },
-    { pages: 8, expected: [1, 2, 3, -1, 8] },
-    { pages: 9, expected: [1, 2, 3, -1, 9] },
-    { pages: 10, expected: [1, 2, 3, -1, 10] },
-  ],
-  selectedPage: [
-    { pages: 10, selected: 1, expected: [1, 2, 3, -1, 10] },
-    { pages: 10, selected: 2, expected: [1, 2, 3, -1, 10] },
-    { pages: 10, selected: 3, expected: [1, 2, 3, 4, -1, 10] },
-    { pages: 10, selected: 4, expected: [1, 2, 3, 4, 5, -1, 10] },
-    { pages: 10, selected: 5, expected: [1, -1, 4, 5, 6, -1, 10] },
-    { pages: 10, selected: 6, expected: [1, -1, 5, 6, 7, -1, 10] },
-    { pages: 10, selected: 7, expected: [1, -1, 6, 7, 8, 9, 10] },
-    { pages: 10, selected: 8, expected: [1, -1, 7, 8, 9, 10] },
-    { pages: 10, selected: 9, expected: [1, -1, 8, 9, 10] },
-    { pages: 10, selected: 10, expected: [1, -1, 9, 10] },
-  ],
-};
-
-const checkPages = (range: number[], selected?: number) => {
-  const navigation = screen.getByRole('navigation');
-  const withinNavigation = within(navigation);
-
-  const prevPageBtn = within(
-    withinNavigation.getByRole('button', { name: 'Go to previous page' }),
-  );
-  prevPageBtn.getByTitle('Carrot left');
-  const nextPageBtn = within(
-    withinNavigation.getByRole('button', { name: 'Go to next page' }),
-  );
-  nextPageBtn.getByTitle('Carrot right');
-
-  const buttonsAndBreaks = Array.from(navigation.children).slice(1, -1);
-
-  for (let i = 0; i < range.length; ++i) {
-    const page = range[i];
-    const el = buttonsAndBreaks[i];
-
-    if (page === -1) {
-      expect(el).toHaveTextContent('...');
-    } else {
-      if (selected === page) {
-        expect(el).toHaveAttribute('aria-label', `Current page ${page}`);
-        expect(el).toHaveAttribute('aria-current', 'true');
-      } else {
-        expect(el).toHaveAttribute('aria-label', `Go to page ${page}`);
-        expect(el).not.toHaveAttribute('aria-current', 'true');
-      }
-      expect(el).toHaveTextContent(String(page));
-    }
-  }
-};
-
-describe('Pagination', () => {
-  describe('No page selected', () => {
-    it.each(testCases.noSelectedPage)(
-      'Renders $pages page(s)',
-      ({ pages, expected }) => {
-        setup(<Pagination pagesCount={pages} />);
-
-        checkPages(expected);
-      },
-    );
-  });
-
-  describe('With a selected page', () => {
-    it.each(testCases.selectedPage)(
-      'Renders $pages page(s) (selected: $selected)',
-      ({ pages, selected, expected }) => {
-        setup(<Pagination pagesCount={pages} />, selected);
-
-        checkPages(expected, selected);
-      },
-    );
-  });
-
-  it("Selects a page when it's clicked", async () => {
-    const { user } = setup(<Pagination pagesCount={3} />, 1);
-
-    let pageOneEl = screen.getByRole('button', {
-      name: 'Current page 1',
-      current: true,
-    });
-    expect(pageOneEl).toHaveTextContent('1');
-
-    let pageTwoEl = screen.getByRole('button', { name: 'Go to page 2' });
-    expect(pageTwoEl).toHaveTextContent('2');
-
-    await user.click(pageTwoEl);
-
-    pageOneEl = screen.getByRole('button', { name: 'Go to page 1' });
-    expect(pageOneEl).not.toHaveAttribute('aria-current', 'true');
-    expect(pageOneEl).toHaveTextContent('1');
-
-    pageTwoEl = screen.getByRole('button', {
-      name: 'Current page 2',
-      current: true,
-    });
-    expect(pageTwoEl).toHaveTextContent('2');
-  });
-
-  it('A click on the selected page does nothing', async () => {
-    const { user } = setup(<Pagination pagesCount={3} />, 1);
-
-    let pageOneEl = screen.getByRole('button', {
-      name: 'Current page 1',
-      current: true,
-    });
-
-    await user.click(pageOneEl);
-
-    pageOneEl = screen.getByRole('button', {
-      name: 'Current page 1',
-      current: true,
-    });
-    expect(pageOneEl).toHaveAttribute('aria-current', 'true');
-    expect(pageOneEl).toHaveTextContent('1');
-  });
-
-  it('Changes a selected page when the "Previous page" button is clicked', async () => {
-    const { user } = setup(<Pagination pagesCount={3} />, 2);
-
-    const leftArrowEl = screen.getByRole('button', {
-      name: 'Go to previous page',
-    });
-
-    await user.click(leftArrowEl);
-
-    const activeEl = screen.getByRole('button', { current: true });
-    expect(activeEl).toHaveTextContent('1');
-  });
-
-  it('Changes a selected page when the "Next page" button is clicked', async () => {
-    const { user } = setup(<Pagination pagesCount={3} />, 2);
-
-    const rightArrowEl = screen.getByRole('button', {
-      name: 'Go to next page',
-    });
-
-    await user.click(rightArrowEl);
-
-    const activeEl = screen.getByRole('button', { current: true });
-    expect(activeEl).toHaveTextContent('3');
-  });
-
-  it('Ignores click on the disabled "Previous page" button', async () => {
-    const { user } = setup(<Pagination pagesCount={3} />, 1);
-
-    const leftArrowEl = screen.getByRole('button', {
-      name: 'Go to previous page',
-    });
-
-    expect(leftArrowEl).toBeDisabled();
-
-    await user.click(leftArrowEl);
-
-    const activeEl = screen.getByRole('button', { current: true });
-    expect(activeEl).toHaveTextContent('1');
-
-    expect(leftArrowEl).toBeDisabled();
-  });
-
-  it('Ignores click on the disabled "Next page" button', async () => {
-    const { user } = setup(<Pagination pagesCount={3} />, 3);
-
-    const rightArrowEl = screen.getByRole('button', {
-      name: 'Go to next page',
-    });
-    expect(rightArrowEl).toBeDisabled();
-
-    await user.click(rightArrowEl);
-
-    const activeEl = screen.getByRole('button', { current: true });
-    expect(activeEl).toHaveTextContent('3');
-
-    expect(rightArrowEl).toBeDisabled();
-  });
-
-  it('Renders with custom styles', () => {
-    setup(<Pagination pagesCount={3} css={{ backgroundColor: 'yellow' }} />, 2);
-
-    const paginationEl = screen.getByRole('navigation');
-    expect(paginationEl).toHaveStyle('background-color: yellow');
-  });
-
-  it('Renders with a custom root element', () => {
-    setup(<Pagination pagesCount={3} as="div" />, 2);
-
-    const navEl = screen.queryByRole('navigation');
-    expect(navEl).not.toBeInTheDocument();
-    expect(document.body.children.length).toBe(1);
-    expect(document.body.children[0]?.tagName).toBe('DIV');
-  });
-
-  it('Renders in a disabled state', () => {
-    setup(<Pagination pagesCount={3} isDisabled={true} />, 2);
-
-    const buttonEls = screen.getAllByRole('button');
-    expect(buttonEls.length).toBe(5); // "previous" "1" "2" "3" "next"
-    for (const btnEl of buttonEls) {
-      expect(btnEl).toBeDisabled();
-    }
-  });
-});

package/src/components/Pagination/Pagination.stories.tsx

@@ -1,60 +0,0 @@
-import type { Meta } from '@storybook/react';
-import { Pagination, PaginationContextProvider } from './index';
-
-export default {
-  title: 'Widgets/Pagination',
-  component: Pagination,
-  decorators: [
-    (Story, { parameters, args }) => {
-      const { selectedPage } = parameters;
-      return (
-        <PaginationContextProvider selectedPage={selectedPage}>
-          {Story(args)}
-        </PaginationContextProvider>
-      );
-    },
-  ],
-} as Meta<typeof Pagination>;
-
-export const PageSelected = {
-  args: {
-    pagesCount: 10,
-  },
-  parameters: {
-    selectedPage: 5,
-  },
-};
-
-export const NoPagesSelected = {
-  args: {
-    pagesCount: 10,
-  },
-};
-
-export const FirstPageSelected = {
-  args: {
-    pagesCount: 10,
-  },
-  parameters: {
-    selectedPage: 1,
-  },
-};
-
-export const LastPageSelected = {
-  args: {
-    pagesCount: 10,
-  },
-  parameters: {
-    selectedPage: 10,
-  },
-};
-
-export const Disabled = {
-  args: {
-    pagesCount: 10,
-    isDisabled: true,
-  },
-  parameters: {
-    selectedPage: 5,
-  },
-};