@ssa-ui-kit/widgets 0.0.29-alpha → 0.0.31-alpha

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,
-  },
-};

package/src/components/Pagination/Pagination.tsx

@@ -1,66 +0,0 @@
-import styled from '@emotion/styled';
-import { usePaginationRange } from '@ssa-ui-kit/hooks';
-
-import { ArrowButton } from './ArrowButton';
-import { PaginationButtons } from './PaginationButtons';
-
-import { PaginationProps } from './types';
-import { usePaginationContext } from './PaginationContext';
-
-const Nav = styled.nav``;
-
-const Pagination = ({
-  pagesCount,
-  className,
-  as,
-  ariaLabel,
-  isDisabled,
-}: PaginationProps) => {
-  const { page, setPage } = usePaginationContext();
-  const range = usePaginationRange({ pagesCount, selectedPage: page });
-
-  return (
-    <Nav className={className} as={as} aria-label={ariaLabel || 'Pagination'}>
-      <ArrowButton
-        direction="left"
-        onClick={() => {
-          if (page) {
-            setPage(page - 1);
-          }
-        }}
-        isDisabled={
-          isDisabled ||
-          pagesCount == null ||
-          pagesCount <= 1 ||
-          page == null ||
-          page === 1
-        }
-        css={{ marginRight: '12px' }}
-      />
-      <PaginationButtons
-        range={range}
-        selectedPage={page}
-        onClick={setPage}
-        isDisabled={isDisabled}
-      />
-      <ArrowButton
-        direction="right"
-        onClick={() => {
-          if (page) {
-            setPage(page + 1);
-          }
-        }}
-        isDisabled={
-          isDisabled ||
-          pagesCount == null ||
-          pagesCount <= 1 ||
-          page == null ||
-          page === pagesCount
-        }
-        css={{ marginLeft: '7px' }}
-      />
-    </Nav>
-  );
-};
-
-export default Pagination;

package/src/components/Pagination/PaginationButtons.tsx

@@ -1,63 +0,0 @@
-import { useMemo } from 'react';
-import { useTheme } from '@emotion/react';
-import { Button } from '@ssa-ui-kit/core';
-
-import { pageBtnStyles, selectedPageBtnStyles } from './styles';
-import { PaginationButtonsProps, PageButtonProps } from './types';
-
-const Break = () => <span css={{ cursor: 'default' }}>...</span>;
-
-const PageButton = ({
-  onClick,
-  isSelected,
-  page,
-  isDisabled,
-}: PageButtonProps) => {
-  const theme = useTheme();
-  const styles = useMemo(() => {
-    return isSelected ? selectedPageBtnStyles(theme) : pageBtnStyles(theme);
-  }, [isSelected]);
-
-  return (
-    <Button
-      size="small"
-      variant="secondary"
-      isDisabled={isDisabled}
-      onClick={
-        isSelected
-          ? () => {
-              /*no-op*/
-            }
-          : onClick
-      }
-      css={styles}
-      aria-label={isSelected ? `Current page ${page}` : `Go to page ${page}`}
-      aria-current={isSelected}>
-      {page}
-    </Button>
-  );
-};
-
-export const PaginationButtons = ({
-  range,
-  selectedPage,
-  onClick,
-  isDisabled,
-}: PaginationButtonsProps) => {
-  return (
-    Array.isArray(range) &&
-    range.map((page, index) => {
-      return page === -1 ? (
-        <Break key={index} />
-      ) : (
-        <PageButton
-          key={index}
-          page={page}
-          isSelected={page === selectedPage}
-          onClick={() => onClick(page)}
-          isDisabled={isDisabled}
-        />
-      );
-    })
-  );
-};

package/src/components/Pagination/PaginationContext.tsx

@@ -1,23 +0,0 @@
-import { createContext, useState, useContext } from 'react';
-import {
-  PaginationContextProps,
-  PaginationContextProviderProps,
-} from './types';
-
-export const PaginationContext = createContext<PaginationContextProps>(
-  {} as PaginationContextProps,
-);
-
-export const usePaginationContext = () => useContext(PaginationContext);
-
-export const PaginationContextProvider = ({
-  selectedPage,
-  children,
-}: PaginationContextProviderProps) => {
-  const [page, setPage] = useState(selectedPage);
-  return (
-    <PaginationContext.Provider value={{ page, setPage }}>
-      {children}
-    </PaginationContext.Provider>
-  );
-};

package/src/components/Pagination/index.ts

@@ -1,3 +0,0 @@
-export { default as Pagination } from './Pagination';
-export * from './types';
-export * from './PaginationContext';