@ssa-ui-kit/widgets 0.0.14-alpha → 0.0.16-alpha

package/src/components/Pagination/Pagination.tsx

@@ -1,66 +1,66 @@
-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,
-  isDisabled,
-}: 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={
-          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;
+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,
+  isDisabled,
+}: 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={
+          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 +1,63 @@
-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,
-  isDisabled,
-}: IPageButtonProps) => {
-  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,
-}: 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)}
-          isDisabled={isDisabled}
-        />
-      );
-    })
-  );
-};
+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,
+  isDisabled,
+}: IPageButtonProps) => {
+  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,
+}: 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)}
+          isDisabled={isDisabled}
+        />
+      );
+    })
+  );
+};

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,98 +1,98 @@
-import { css, Theme } from '@emotion/react';
-
-const baseBtnStyles = (theme: Theme) => css`
-  height: 30px;
-  border-radius: 6px;
-
-  ${theme.mediaQueries.md} {
-    height: 25px;
-  }
-
-  &:disabled {
-    cursor: default;
-  }
-`;
-
-export const pageBtnStyles = (theme: Theme) => css`
-  ${baseBtnStyles(theme)}
-
-  background: unset;
-  box-shadow: unset;
-  color: #070821;
-  padding: 0 11px;
-
-  ${theme.mediaQueries.md} {
-    padding: 0 9px;
-  }
-
-  &:disabled {
-    background: unset;
-    box-shadow: unset;
-  }
-
-  &:not(:disabled):hover,
-  &:not(:disabled):active,
-  &:not(:disabled):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}
-  );
-
-  &:disabled {
-    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,
-  &:active,
-  &:focus {
-    ${selectedBtnBg(theme)}
-  }
-
-  &:not(:disabled):hover {
-    box-shadow: 0 5px 5px -1px rgba(0, 0, 0, 0.3);
-    cursor: default;
-  }
-`;
-
-export const arrowBtnStyles = (theme: Theme) => css`
-  ${baseBtnStyles(theme)}
-
-  padding: 0 8px;
-  background: ${theme.colors.white};
-
-  &:disabled {
-    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;
+  }
+
+  &:disabled {
+    cursor: default;
+  }
+`;
+
+export const pageBtnStyles = (theme: Theme) => css`
+  ${baseBtnStyles(theme)}
+
+  background: unset;
+  box-shadow: unset;
+  color: #070821;
+  padding: 0 11px;
+
+  ${theme.mediaQueries.md} {
+    padding: 0 9px;
+  }
+
+  &:disabled {
+    background: unset;
+    box-shadow: unset;
+  }
+
+  &:not(:disabled):hover,
+  &:not(:disabled):active,
+  &:not(:disabled):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}
+  );
+
+  &:disabled {
+    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,
+  &:active,
+  &:focus {
+    ${selectedBtnBg(theme)}
+  }
+
+  &:not(:disabled):hover {
+    box-shadow: 0 5px 5px -1px rgba(0, 0, 0, 0.3);
+    cursor: default;
+  }
+`;
+
+export const arrowBtnStyles = (theme: Theme) => css`
+  ${baseBtnStyles(theme)}
+
+  padding: 0 8px;
+  background: ${theme.colors.white};
+
+  &:disabled {
+    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,38 +1,38 @@
-import { CommonProps } from '@ssa-ui-kit/core';
-
-export interface IPaginationProps extends CommonProps {
-  pagesCount: number;
-  ariaLabel?: string;
-  isDisabled?: boolean;
-}
-
-export interface IPaginationButtonsProps {
-  range: number[];
-  selectedPage?: number;
-  onClick: (page: number) => void;
-  isDisabled?: boolean;
-}
-
-export interface IArrowButtonProps {
-  direction: 'left' | 'right';
-  onClick: () => void;
-  isDisabled?: boolean;
-  className?: string;
-}
-
-export interface IPageButtonProps {
-  onClick: () => void;
-  page: number | string;
-  isSelected: boolean;
-  isDisabled?: 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;
+  isDisabled?: boolean;
+}
+
+export interface IPaginationButtonsProps {
+  range: number[];
+  selectedPage?: number;
+  onClick: (page: number) => void;
+  isDisabled?: boolean;
+}
+
+export interface IArrowButtonProps {
+  direction: 'left' | 'right';
+  onClick: () => void;
+  isDisabled?: boolean;
+  className?: string;
+}
+
+export interface IPageButtonProps {
+  onClick: () => void;
+  page: number | string;
+  isSelected: boolean;
+  isDisabled?: boolean;
+}
+
+export interface IPaginationContext {
+  page?: number;
+  setPage: React.Dispatch<React.SetStateAction<number | undefined>>;
+}
+
+export interface IPaginationContextProviderProps {
+  selectedPage?: number;
+  children: React.ReactNode;
+}