@ssa-ui-kit/widgets 0.0.1-alpha

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

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

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

@@ -0,0 +1,50 @@
+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,
+  },
+};

package/src/components/Pagination/Pagination.tsx

@@ -0,0 +1,55 @@
+import styled from '@emotion/styled';
+import { usePaginationRange } from '@ssa-ui-kit/hooks';
+
+import { ArrowButton } from './ArrowButton';
+import { PaginationButtons } from './PaginationButtons';
+
+import { IPaginationProps } from './types';
+import { usePaginationContext } from './PaginationContext';
+
+const Nav = styled.nav``;
+
+const Pagination = ({
+  pagesCount,
+  className,
+  as,
+  ariaLabel,
+}: IPaginationProps) => {
+  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={
+          pagesCount == null || pagesCount <= 1 || page == null || page === 1
+        }
+        css={{ marginRight: '12px' }}
+      />
+      <PaginationButtons range={range} selectedPage={page} onClick={setPage} />
+      <ArrowButton
+        direction="right"
+        onClick={() => {
+          if (page) {
+            setPage(page + 1);
+          }
+        }}
+        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,55 @@
+import { useMemo } from 'react';
+import { useTheme } from '@emotion/react';
+import { Button } from '@ssa-ui-kit/core';
+
+import { pageBtnStyles, selectedPageBtnStyles } from './styles';
+import { IPaginationButtonsProps, IPageButtonProps } from './types';
+
+const Break = () => <span css={{ cursor: 'default' }}>...</span>;
+
+const PageButton = ({ onClick, isSelected, page }: IPageButtonProps) => {
+  const theme = useTheme();
+  const styles = useMemo(() => {
+    return isSelected ? selectedPageBtnStyles(theme) : pageBtnStyles(theme);
+  }, [isSelected]);
+
+  return (
+    <Button
+      size="small"
+      variant="secondary"
+      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,
+}: IPaginationButtonsProps) => {
+  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)}
+        />
+      );
+    })
+  );
+};

package/src/components/Pagination/PaginationContext.tsx

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

package/src/components/Pagination/index.ts

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

package/src/components/Pagination/styles.tsx

@@ -0,0 +1,81 @@
+import { css, Theme } from '@emotion/react';
+
+const baseBtnStyles = (theme: Theme) => css`
+  height: 30px;
+  border-radius: 6px;
+
+  ${theme.mediaQueries.md} {
+    height: 25px;
+  }
+`;
+
+export const pageBtnStyles = (theme: Theme) => css`
+  ${baseBtnStyles(theme)}
+
+  background: unset;
+  box-shadow: unset;
+  color: #070821;
+  padding: 0 11px;
+
+  ${theme.mediaQueries.md} {
+    padding: 0 9px;
+  }
+
+  &:hover,
+  &:active,
+  &:focus {
+    background: #eef1f7;
+    box-shadow: unset;
+  }
+`;
+
+const selectedBtnBg = (theme: Theme) => css`
+  background: ${theme.colors.blueLightDarker};
+  background: linear-gradient(
+    247.37deg,
+    ${theme.colors.blueDark},
+    ${theme.colors.blueLightDarker}
+  );
+`;
+
+export const selectedPageBtnStyles = (theme: Theme) => css`
+  ${baseBtnStyles(theme)}
+
+  ${selectedBtnBg(theme)}
+
+  color: white;
+  margin: 0 3px;
+  padding: 0 13px;
+
+  ${theme.mediaQueries.md} {
+    padding: 0 10px;
+  }
+
+  &:hover {
+    box-shadow: 0 5px 5px -1px rgba(0, 0, 0, 0.3);
+    cursor: default;
+  }
+
+  &:hover,
+  &:active,
+  &:focus {
+    ${selectedBtnBg(theme)}
+  }
+`;
+
+export const arrowBtnStyles = (theme: Theme) => css`
+  ${baseBtnStyles(theme)}
+
+  padding: 0 8px;
+  background: ${theme.colors.greyLighter};
+
+  &:disabled {
+    cursor: default;
+    background: unset;
+  }
+
+  &:not(:disabled):hover {
+    box-shadow: 0 5px 5px -2px rgba(0, 0, 0, 0.2);
+    cursor: pointer;
+  }
+`;

package/src/components/Pagination/types.ts

@@ -0,0 +1,35 @@
+import { CommonProps } from '@ssa-ui-kit/core';
+
+export interface IPaginationProps extends CommonProps {
+  pagesCount: number;
+  ariaLabel?: string;
+}
+
+export interface IPaginationButtonsProps {
+  range: number[];
+  selectedPage?: number;
+  onClick: (page: number) => void;
+}
+
+export interface IArrowButtonProps {
+  direction: 'left' | 'right';
+  onClick: () => void;
+  isDisabled?: boolean;
+  className?: string;
+}
+
+export interface IPageButtonProps {
+  onClick: () => void;
+  page: number | string;
+  isSelected: boolean;
+}
+
+export interface IPaginationContext {
+  page?: number;
+  setPage: React.Dispatch<React.SetStateAction<number | undefined>>;
+}
+
+export interface IPaginationContextProviderProps {
+  selectedPage?: number;
+  children: React.ReactNode;
+}

package/src/components/PieChart/PieChart.spec.tsx

@@ -0,0 +1,97 @@
+import { css } from '@emotion/react';
+import { MainColors } from '@ssa-ui-kit/core';
+import { within } from '@testing-library/dom';
+import { PieChart, PieChartLegend } from './index';
+import { accountData } from './stories/fixtures';
+
+const colorNames = ['blueLight', 'turquoise'] as unknown as Array<
+  keyof MainColors
+>;
+
+const ResponsivePieMock = () => <div data-testid="responsive-pie"></div>;
+
+jest.mock('@nivo/pie', () => ({
+  PieCustomLayerProps: {},
+  ResponsivePie: ResponsivePieMock,
+}));
+
+describe('PieChart', () => {
+  it('Renders', () => {
+    const { getByTestId, getByRole } = render(
+      <PieChart data={accountData} title={<h1>4578.89</h1>} />,
+    );
+
+    getByTestId('responsive-pie');
+    getByRole('heading', { name: '4578.89' });
+  });
+
+  it('Renders with a Legend', () => {
+    const { getByTestId, getByRole } = render(
+      <PieChart data={accountData} title={<h1>4578.89</h1>}>
+        <PieChartLegend data={accountData} colors={colorNames} />
+      </PieChart>,
+    );
+
+    getByTestId('responsive-pie');
+    getByRole('heading', { name: '4578.89' });
+
+    for (const { label, value } of accountData) {
+      getByRole('heading', { name: label });
+      getByRole('heading', { name: String(value) });
+    }
+  });
+
+  describe('PieChartLegend', () => {
+    it('Renders with customized values and labels', () => {
+      const { getByRole } = render(
+        <PieChart data={accountData} title={<h1>4578.89</h1>}>
+          <PieChartLegend
+            data={accountData}
+            colors={colorNames}
+            renderValue={({ value }) => `1-${value}`}
+            renderLabel={({ label }) => `1-${label}`}
+          />
+        </PieChart>,
+      );
+
+      for (const { label, value } of accountData) {
+        getByRole('heading', { name: `1-${label}` });
+        getByRole('heading', { name: `1-${value}` });
+      }
+    });
+
+    it('Renders with custom styles', () => {
+      const { getAllByRole } = render(
+        <PieChart data={accountData} title={<h1>4578.89</h1>}>
+          <PieChartLegend
+            data={accountData}
+            colors={colorNames}
+            markerStyles={css`
+              background-color: indigo;
+              border-radius: 0;
+            `}
+            labelListStyles={css`
+              background-color: forestgreen;
+            `}
+            valueListStyles={css`
+              background-color: aqua;
+            `}
+          />
+        </PieChart>,
+      );
+
+      const [labelListEl, valueListEl] = getAllByRole('list');
+      expect(labelListEl).toHaveStyle(`background-color: forestgreen`);
+      expect(valueListEl).toHaveStyle(`background-color: aqua `);
+
+      const listItemEls = within(labelListEl).getAllByRole('listitem');
+
+      for (const el of listItemEls) {
+        expect(el.firstChild).toHaveStyle(`
+          background-color: indigo;
+          border-radius: 0;
+        `);
+      }
+    });
+  });
+});