@ssa-ui-kit/widgets 0.0.1-alpha → 0.0.3-alpha

package/src/components/Pagination/PaginationButtons.tsx

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

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

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

package/src/components/Pagination/styles.tsx

@@ -1,81 +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;
-  }
-`;
+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.white};
+
+  &: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

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

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