@ssa-ui-kit/core 0.0.27-alpha → 0.0.29-alpha

package/src/components/NotificationMenu/styles.ts

@@ -0,0 +1,124 @@
+import { Theme, css } from '@emotion/react';
+
+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 = (theme: Theme) => css`
+  margin: 12px 0 11px;
+  background: ${theme.colors.white};
+  &:hover {
+    background: ${theme.colors.greyLighter};
+  }
+
+  &[aria-disabled='true'] {
+    background: none;
+    box-shadow: none;
+    &:hover {
+      background: none;
+    }
+  }
+`;

package/src/components/NotificationMenu/types.ts

@@ -0,0 +1,11 @@
+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

@@ -0,0 +1,33 @@
+import { useTheme } from '@emotion/react';
+import Button from '@components/Button';
+import Icon from '@components/Icon';
+
+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

@@ -0,0 +1,51 @@
+import { test } from '@playwright/test';
+import { SCREEN_SIZES } from '../../consts';
+
+const WIDGETS_CUSTOM_SHOTS_PATH = './custom-shots/';
+
+const TEST_CASES = [
+  {
+    url: 'http://localhost:6006/iframe.html?args=&id=widgets-pagination--page-selected&viewMode=story',
+    testTitle: 'Widgets: Pagination hover',
+    screenshotPrefix: 'widgets-pagination--',
+  },
+  {
+    url: 'http://localhost:6006/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

@@ -0,0 +1,228 @@
+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

@@ -0,0 +1,60 @@
+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

@@ -0,0 +1,66 @@
+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

@@ -0,0 +1,63 @@
+import { useMemo } from 'react';
+import { useTheme } from '@emotion/react';
+import Button from '@components/Button';
+
+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

@@ -0,0 +1,23 @@
+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/WithPagination.tsx

@@ -0,0 +1,14 @@
+import { PaginationContextProvider } from '.';
+
+export const WithPagination = <T extends object>(
+  Component: React.ComponentType<T>,
+) => {
+  const decoratedComp = (props: T) => (
+    <PaginationContextProvider selectedPage={1}>
+      <Component {...props} />
+    </PaginationContextProvider>
+  );
+
+  decoratedComp.displayName = `WithPagination(${Component.displayName})`;
+  return decoratedComp;
+};

package/src/components/Pagination/index.ts

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