@ssa-ui-kit/widgets 0.0.5-alpha → 0.0.6-alpha

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ssa-ui-kit/widgets",
-  "version": "0.0.5-alpha",
+  "version": "0.0.6-alpha",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "private": false,
@@ -29,9 +29,9 @@
     "js-tokens": "^4.0.0",
     "loose-envify": "^1.4.0",
     "scheduler": "^0.23.0",
-    "@ssa-ui-kit/core": "^0.0.4-alpha",
-    "@ssa-ui-kit/utils": "^0.0.1-alpha",
-    "@ssa-ui-kit/hooks": "^0.0.1-alpha"
+    "@ssa-ui-kit/core": "^0.0.5-alpha",
+    "@ssa-ui-kit/hooks": "^0.0.1-alpha",
+    "@ssa-ui-kit/utils": "^0.0.1-alpha"
   },
   "browserslist": [
     ">0.1%",

package/src/components/NotificationCard/NotificationCard.spec.tsx

@@ -1,3 +1,4 @@
+import { createRef } from 'react';
 import userEvent from '@testing-library/user-event';
 import { Button } from '@ssa-ui-kit/core';
 import { NotificationCard } from './NotificationCard';
@@ -87,4 +88,26 @@ describe('NotificationCard', () => {
 
     expect(mockOnClick).toBeCalledTimes(1);
   });
+
+  it('Renders with ref', () => {
+    const ref = createRef<HTMLDivElement>();
+    render(<NotificationCard {...commonProps} isRead={false} ref={ref} />);
+
+    expect(ref.current?.querySelector('h6')?.textContent).toBe('Title');
+  });
+
+  it('Renders with custom styles', () => {
+    const { getByTestId } = render(
+      <NotificationCard
+        {...commonProps}
+        isRead={false}
+        css={{
+          backgroundColor: 'blue',
+        }}
+      />,
+    );
+
+    const notification = getByTestId('notification');
+    expect(notification).toHaveStyleRule('background-color', 'blue');
+  });
 });

package/src/components/NotificationCard/NotificationCard.tsx

@@ -1,3 +1,4 @@
+import { forwardRef } from 'react';
 import { useTheme } from '@emotion/react';
 import { dateFormatters } from '@ssa-ui-kit/utils';
 import {
@@ -33,22 +34,22 @@ export const notificationTypes: Record<string, { [key: string]: string }> = {
   },
 };
 
-export const NotificationCard = ({
-  title,
-  children,
-  text,
-  isRead,
-  type,
-  time,
-  onClick,
-}: NotificationCardProps) => {
+export const NotificationCard = forwardRef<
+  HTMLDivElement,
+  NotificationCardProps
+>(function NotificationCard(
+  { title, children, text, isRead, type, time, onClick, className },
+  ref,
+) {
   const theme = useTheme();
   const { getTimeAgo } = dateFormatters;
 
   return (
     <CardBase
+      ref={ref}
       data-testid="notification"
       css={notifyCard}
+      className={className}
       noShadow
       onClick={() => {
         if (typeof onClick === 'function') {
@@ -91,4 +92,4 @@ export const NotificationCard = ({
       </Typography>
     </CardBase>
   );
-};
+});

package/src/components/NotificationCard/types.ts

@@ -1,9 +1,12 @@
+export type NotificationType = 'Informational' | 'Warning' | 'Error';
+
 export interface NotificationCardProps {
   title: string;
   text: string;
   isRead: boolean;
-  type: 'Informational' | 'Warning' | 'Error';
+  type: NotificationType;
   time: string | number;
   children?: React.ReactNode;
   onClick?: () => void;
+  className?: string;
 }

package/src/components/Pagination/Pagination.e2e.ts

@@ -3,36 +3,49 @@ import { SCREEN_SIZES } from '../../consts';
 
 const WIDGETS_CUSTOM_SHOTS_PATH = './custom-shots/';
 
-test('Widgets: Pagination hover', async ({ page }) => {
-  // Hover a selected page
-  await page.setViewportSize(SCREEN_SIZES[1920]);
-  await page.goto(
-    'http://localhost:6007/iframe.html?args=&id=widgets-pagination--page-selected&viewMode=story',
-  );
-  await page.getByRole('button', { name: 'Current page 5' }).hover();
-
-  await page.screenshot({
-    path: `${WIDGETS_CUSTOM_SHOTS_PATH}widgets-pagination--selected-hover__[w1920px].png`,
+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`,
+    });
   });
-
-  // Hover a NOT selected page
-  await page.getByRole('button', { name: 'Go to page 4' }).hover();
-
-  await page.screenshot({
-    path: `${WIDGETS_CUSTOM_SHOTS_PATH}widgets-pagination--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}widgets-pagination--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}widgets-pagination--next-hover__[w1920px].png`,
-  });
-});
+}

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

@@ -215,4 +215,14 @@ describe('Pagination', () => {
     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

@@ -48,3 +48,13 @@ export const LastPageSelected = {
     selectedPage: 10,
   },
 };
+
+export const Disabled = {
+  args: {
+    pagesCount: 10,
+    isDisabled: true,
+  },
+  parameters: {
+    selectedPage: 5,
+  },
+};

package/src/components/Pagination/Pagination.tsx

@@ -14,6 +14,7 @@ const Pagination = ({
   className,
   as,
   ariaLabel,
+  isDisabled,
 }: IPaginationProps) => {
   const { page, setPage } = usePaginationContext();
   const range = usePaginationRange({ pagesCount, selectedPage: page });
@@ -28,11 +29,20 @@ const Pagination = ({
           }
         }}
         isDisabled={
-          pagesCount == null || pagesCount <= 1 || page == null || page === 1
+          isDisabled ||
+          pagesCount == null ||
+          pagesCount <= 1 ||
+          page == null ||
+          page === 1
         }
         css={{ marginRight: '12px' }}
       />
-      <PaginationButtons range={range} selectedPage={page} onClick={setPage} />
+      <PaginationButtons
+        range={range}
+        selectedPage={page}
+        onClick={setPage}
+        isDisabled={isDisabled}
+      />
       <ArrowButton
         direction="right"
         onClick={() => {
@@ -41,6 +51,7 @@ const Pagination = ({
           }
         }}
         isDisabled={
+          isDisabled ||
           pagesCount == null ||
           pagesCount <= 1 ||
           page == null ||

package/src/components/Pagination/PaginationButtons.tsx

@@ -7,7 +7,12 @@ import { IPaginationButtonsProps, IPageButtonProps } from './types';
 
 const Break = () => <span css={{ cursor: 'default' }}>...</span>;
 
-const PageButton = ({ onClick, isSelected, page }: IPageButtonProps) => {
+const PageButton = ({
+  onClick,
+  isSelected,
+  page,
+  isDisabled,
+}: IPageButtonProps) => {
   const theme = useTheme();
   const styles = useMemo(() => {
     return isSelected ? selectedPageBtnStyles(theme) : pageBtnStyles(theme);
@@ -17,6 +22,7 @@ const PageButton = ({ onClick, isSelected, page }: IPageButtonProps) => {
     <Button
       size="small"
       variant="secondary"
+      isDisabled={isDisabled}
       onClick={
         isSelected
           ? () => {
@@ -36,6 +42,7 @@ export const PaginationButtons = ({
   range,
   selectedPage,
   onClick,
+  isDisabled,
 }: IPaginationButtonsProps) => {
   return (
     Array.isArray(range) &&
@@ -48,6 +55,7 @@ export const PaginationButtons = ({
           page={page}
           isSelected={page === selectedPage}
           onClick={() => onClick(page)}
+          isDisabled={isDisabled}
         />
       );
     })

package/src/components/Pagination/styles.tsx

@@ -7,6 +7,10 @@ const baseBtnStyles = (theme: Theme) => css`
   ${theme.mediaQueries.md} {
     height: 25px;
   }
+
+  &:disabled {
+    cursor: default;
+  }
 `;
 
 export const pageBtnStyles = (theme: Theme) => css`
@@ -21,9 +25,14 @@ export const pageBtnStyles = (theme: Theme) => css`
     padding: 0 9px;
   }
 
-  &:hover,
-  &:active,
-  &:focus {
+  &:disabled {
+    background: unset;
+    box-shadow: unset;
+  }
+
+  &:not(:disabled):hover,
+  &:not(:disabled):active,
+  &:not(:disabled):focus {
     background: #eef1f7;
     box-shadow: unset;
   }
@@ -36,6 +45,15 @@ const selectedBtnBg = (theme: Theme) => css`
     ${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`
@@ -51,16 +69,16 @@ export const selectedPageBtnStyles = (theme: Theme) => css`
     padding: 0 10px;
   }
 
-  &:hover {
-    box-shadow: 0 5px 5px -1px rgba(0, 0, 0, 0.3);
-    cursor: default;
-  }
-
   &: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`
@@ -70,7 +88,6 @@ export const arrowBtnStyles = (theme: Theme) => css`
   background: ${theme.colors.white};
 
   &:disabled {
-    cursor: default;
     background: unset;
   }
 

package/src/components/Pagination/types.ts

@@ -3,12 +3,14 @@ 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 {
@@ -22,6 +24,7 @@ export interface IPageButtonProps {
   onClick: () => void;
   page: number | string;
   isSelected: boolean;
+  isDisabled?: boolean;
 }
 
 export interface IPaginationContext {

package/src/components/SearchBox/SearchBoxInput.tsx

@@ -3,7 +3,6 @@ import { Input } from '@ssa-ui-kit/core';
 
 export const SearchBoxInput = styled(Input)`
   height: 40px;
-  line-height: 40px;
   border-radius: 5px;
   background-color: ${({ theme }) => theme.colors.greyLighter};
   border: 1px solid #dee0e8;