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

package/src/components/NotificationCard/NotificationCard.tsx

@@ -0,0 +1,92 @@
+import { forwardRef } from 'react';
+import { useTheme } from '@emotion/react';
+import { dateFormatters } from '@ssa-ui-kit/utils';
+import Badge from '@components/Badge';
+import CardBase from '@components/Card/CardBase';
+import Icon from '@components/Icon';
+import { MapIconsType } from '@components/Icon/types';
+import Indicator from '@components/Indicator';
+import Typography from '@components/Typography';
+import { NotificationCardProps } from './types';
+import {
+  notifyBadge,
+  notifyCard,
+  notifyTitle,
+  notifyText,
+  notifyTime,
+} from './styles';
+
+export const notificationTypes: Record<string, { [key: string]: string }> = {
+  Informational: {
+    icon: 'information',
+    color: 'blueLight',
+  },
+  Warning: {
+    icon: 'warning',
+    color: 'yellowWarm',
+  },
+  Error: {
+    icon: 'attention',
+    color: 'pink',
+  },
+};
+
+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') {
+          onClick();
+        }
+      }}>
+      <Indicator isVisible={!isRead}>
+        <Badge
+          data-testid="badge"
+          color={notificationTypes[type].color as keyof MainColors}
+          css={notifyBadge}>
+          <Icon
+            name={notificationTypes[type].icon as keyof MapIconsType}
+            color={theme.colors.white}
+            size={14}
+          />
+        </Badge>
+      </Indicator>
+      <Typography
+        variant="subtitle"
+        weight="medium"
+        css={notifyTitle}
+        color={theme.colors.greyDarker}>
+        {title}
+      </Typography>
+      <Typography
+        variant="body1"
+        weight="regular"
+        css={notifyText}
+        color={theme.colors.greyDarker60}>
+        {text}
+      </Typography>
+      {children}
+      <Typography
+        variant="body1"
+        weight="regular"
+        css={notifyTime}
+        color={theme.colors.greyDarker}>
+        {getTimeAgo(time)}
+      </Typography>
+    </CardBase>
+  );
+});

package/src/components/NotificationCard/index.ts

@@ -0,0 +1,2 @@
+export { NotificationCard } from './NotificationCard';
+export * from './types';

package/src/components/NotificationCard/styles.tsx

@@ -0,0 +1,134 @@
+import { Theme, css } from '@emotion/react';
+
+export const childrenWrapper = (theme: Theme) => `
+  grid-column: 2 / span 2;
+  margin-top: 10px;
+
+  button {
+    height: 31px;
+    border-radius: 6px;
+    font-weight: 700;
+
+    &:focus::before {
+      content: none;
+    }
+
+    &:not(:last-child) {
+      margin-right: 20px;
+    }
+  }
+
+  ${theme.mediaQueries.md} {
+    margin-top: 13px;
+  }
+
+  ${theme.mediaQueries.xs} {
+    button {
+      height: 28px;
+      padding: 10px;
+
+      &:not(:last-child) {
+        margin-right: 5px;
+      }
+    }
+  }
+`;
+
+export const notifyCard = (theme: Theme) => css`
+  position: relative;
+  display: grid;
+  column-gap: 9px;
+  grid-template-columns: auto 1fr auto;
+  padding: 14px 12px;
+  align-items: flex-start;
+
+  &:not(:last-child) {
+    margin-bottom: 5px;
+  }
+
+  ${theme.mediaQueries.md} {
+    column-gap: 12px;
+    padding: 14px 18px 14px 12px;
+
+    &:not(:last-child) {
+      margin-bottom: 10px;
+    }
+  }
+
+  ${theme.mediaQueries.xs} {
+    padding: 10px 8px;
+  }
+`;
+
+export const notifyBadge = (theme: Theme) => css`
+  display: grid;
+  grid-row: 1 / span 2;
+  height: auto;
+  width: fit-content;
+  padding: 8px;
+  border-radius: 6px;
+  box-shadow: -4px 12px 14px 0 #dae1e1;
+
+  ${theme.mediaQueries.md} {
+    padding: 11px;
+    border-radius: 12px;
+
+    svg {
+      width: 20px;
+      height: 20px;
+    }
+  }
+`;
+
+export const notifyTitle = (theme: Theme) => css`
+  grid-row: 1;
+  grid-column: 2;
+  margin-bottom: 2px;
+
+  ${theme.mediaQueries.md} {
+    margin-top: -3px;
+    font-size: 16px;
+    line-height: 20px;
+  }
+
+  ${theme.mediaQueries.xs} {
+    grid-row: 2;
+  }
+`;
+
+export const notifyText = (theme: Theme) => css`
+  grid-row: 2;
+  grid-column: 2 / span 3;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  &:hover {
+    overflow: visible;
+    text-overflow: inherit;
+    white-space: normal;
+  }
+
+  ${theme.mediaQueries.md} {
+    font-size: 13.3px;
+    line-height: 20px;
+    overflow: visible;
+    text-overflow: inherit;
+    white-space: normal;
+  }
+
+  ${theme.mediaQueries.xs} {
+    grid-row: 3;
+  }
+`;
+
+export const notifyTime = (theme: Theme) => css`
+  grid-row: 1;
+  grid-column: 3;
+  text-align: right;
+
+  ${theme.mediaQueries.xs} {
+    grid-column: 2;
+    text-align: left;
+  }
+`;

package/src/components/NotificationCard/types.ts

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

package/src/components/NotificationMenu/NotificationMenu.e2e.ts

@@ -0,0 +1,27 @@
+import { test, Page } from '@playwright/test';
+import { SCREEN_SIZES } from '../../consts';
+
+const CUSTOM_SHOTS_PATH = './custom-shots/';
+
+const gotoPage = (page: Page) => {
+  return page.goto(
+    'http://localhost:6006/iframe.html?args=&id=widgets-notificationmenu--default&viewMode=story',
+  );
+};
+
+for (const resolution of Object.keys(SCREEN_SIZES)) {
+  const viewportSize =
+    SCREEN_SIZES[resolution as unknown as keyof typeof SCREEN_SIZES];
+  test(`[${resolution}] Widgets: NotificationMenu is opened`, async ({
+    page,
+  }) => {
+    await gotoPage(page);
+    await page.setViewportSize(viewportSize);
+    await page.getByTestId('trigger-button').click();
+
+    const SCREENSHOT_PREFIX = `${CUSTOM_SHOTS_PATH}widgets-notification-menu--is-opened__`;
+    await page.screenshot({
+      path: `${SCREENSHOT_PREFIX}[w${resolution}px].png`,
+    });
+  });
+}

package/src/components/NotificationMenu/NotificationMenu.spec.tsx

@@ -0,0 +1,64 @@
+import userEvent from '@testing-library/user-event';
+import { within } from '@testing-library/dom';
+import { StoryComponent } from './stories/StoryComponent';
+import { notificationData } from './helpers';
+
+describe('NotificationMenu', () => {
+  it('Renders with button group', async () => {
+    const user = userEvent.setup();
+    const { getByTestId } = render(<StoryComponent />);
+    await user.click(getByTestId('trigger-button'));
+    const buttonGroup = getByTestId('element-wrapper');
+
+    notificationData.groupButtonItems.forEach((item) => {
+      within(buttonGroup).getByRole('button', { name: item.text });
+    });
+  });
+
+  it('Renders with list of notifications', async () => {
+    const user = userEvent.setup();
+    const { getByTestId, getAllByTestId } = render(<StoryComponent />);
+    await user.click(getByTestId('trigger-button'));
+
+    const notificationEls = getAllByTestId('notification');
+    const notificationArr = notificationData.notificationItems;
+
+    expect(notificationEls.length).toBe(notificationArr.length);
+
+    for (let i = 0; i < notificationEls.length; i++) {
+      expect(notificationEls[i]).toHaveTextContent(notificationArr[i].text);
+    }
+  });
+
+  it('Marks all notifications as read after clicking on the button', async () => {
+    const user = userEvent.setup();
+    const { getByRole, getByTestId, queryAllByTestId } = render(
+      <StoryComponent />,
+    );
+    await user.click(getByTestId('trigger-button'));
+
+    const buttonEl = getByRole('button', {
+      name: new RegExp('Mark all as read', 'i'),
+    });
+    await user.click(buttonEl);
+    const unreadBtn = getByRole('button', {
+      name: 'Unread',
+    });
+
+    const indicatorEls = queryAllByTestId('indicator-left');
+
+    expect(indicatorEls.length).toBe(0);
+    expect(unreadBtn).toHaveAttribute('disabled');
+    expect(buttonEl).not.toBeInTheDocument();
+  });
+
+  it('Renders with link button', async () => {
+    const user = userEvent.setup();
+    const { getByRole, getByTestId } = render(<StoryComponent />);
+    await user.click(getByTestId('trigger-button'));
+
+    getByRole('link', {
+      name: new RegExp('View all notification', 'i'),
+    });
+  });
+});

package/src/components/NotificationMenu/NotificationMenu.tsx

@@ -0,0 +1,77 @@
+import { useTheme } from '@emotion/react';
+import Icon from '@components/Icon';
+import {
+  Popover,
+  PopoverClose,
+  PopoverContent,
+  PopoverDescription,
+  PopoverHeading,
+  PopoverTrigger,
+} from '@components/Popover';
+import { NotificationCard } from '@components/NotificationCard';
+import { NotificationMenuProps } from './types';
+import {
+  ResetBtnStyles,
+  Close,
+  ButtonsWrapper,
+  List,
+  Loading,
+  PopoverWrapper,
+  PopoverContentWrapper,
+} from './styles';
+
+export const NotificationMenu = ({
+  trigger,
+  notifications,
+  children,
+  onClick,
+  isLoading,
+  rightButton,
+  leftButton,
+}: NotificationMenuProps) => {
+  const theme = useTheme();
+  return (
+    <Popover placement="bottom-end">
+      <PopoverTrigger onClick={onClick} css={ResetBtnStyles}>
+        {trigger}
+      </PopoverTrigger>
+      <PopoverContent className="popover" css={PopoverWrapper}>
+        <div css={PopoverContentWrapper}>
+          <PopoverClose css={Close}>
+            <Icon name="cross" size={14} color={theme.colors.greyGraphite70} />
+          </PopoverClose>
+          <PopoverHeading variant="h5" weight="bold">
+            Notification
+          </PopoverHeading>
+          <PopoverDescription variant="body1">
+            <div data-testid="element-wrapper">{children}</div>
+            {isLoading ? (
+              <div css={Loading}></div>
+            ) : (
+              <div css={List}>
+                {notifications.map((item, index) => {
+                  return (
+                    <NotificationCard
+                      key={index}
+                      title={item.title}
+                      text={item.text}
+                      type={item.type}
+                      time={item.time}
+                      isRead={item.isRead}
+                    />
+                  );
+                })}
+              </div>
+            )}
+          </PopoverDescription>
+        </div>
+        {rightButton || leftButton ? (
+          <div css={ButtonsWrapper}>
+            {leftButton}
+            {rightButton}
+          </div>
+        ) : null}
+      </PopoverContent>
+    </Popover>
+  );
+};

package/src/components/NotificationMenu/helpers.ts

@@ -0,0 +1,91 @@
+import type { ButtonGroupItem } from '@components/ButtonGroup';
+import type { NotificationCardProps } from '@components/NotificationCard';
+
+export interface DataProps {
+  notificationItems: NotificationCardProps[];
+  groupButtonItems: ButtonGroupItem[];
+}
+
+export const notificationData: DataProps = {
+  groupButtonItems: [
+    { id: 1, text: 'All', isDisabled: false },
+    { id: 2, text: 'Unread', isDisabled: false },
+  ],
+  notificationItems: [
+    {
+      title: 'lorem',
+      text: 'With our newest listing, we’re welcoming Wrapped Bitcoin to innovation Zone! You can now deposit',
+      type: 'Informational',
+      isRead: false,
+      time: Date.now() - 600000,
+    },
+    {
+      title: 'CyberVeinToken is Now Available.',
+      text: 'With our newest listing, we’re welcoming Wrapped',
+      type: 'Warning',
+      isRead: false,
+      time: Date.now() - 1600000,
+    },
+    {
+      title: 'CyberVeinToken is Now Available.',
+      text: 'With our newest listing, we’re welcoming Wrapped',
+      type: 'Warning',
+      isRead: false,
+      time: Date.now() - 1600000,
+    },
+    {
+      title: 'CyberVeinToken is Now Available.',
+      text: 'With our newest listing, we’re welcoming Wrapped',
+      type: 'Error',
+      isRead: true,
+      time: Date.now() - 2600000,
+    },
+
+    {
+      title: 'CyberVeinToken is Now Available.',
+      text: 'With our newest listing, we’re welcoming Wrapped',
+      type: 'Informational',
+      isRead: true,
+      time: Date.now() - 3600000,
+    },
+  ],
+};
+
+export const getMockData = () => {
+  return new Promise<DataProps>((resolve) => {
+    resolve(notificationData);
+  });
+};
+
+export const divideOnSubArr = (arr: Array<NotificationCardProps>) => {
+  return arr.reduce(
+    (acc: Record<string, Array<NotificationCardProps>>, obj) => {
+      if (!obj.isRead) {
+        acc['Unread'].push(obj);
+      }
+      acc['All'] = arr;
+
+      return acc;
+    },
+    { All: [], Unread: [] },
+  );
+};
+
+export const readAll = (arr: Array<NotificationCardProps>) => {
+  return arr.reduce((acc: Array<NotificationCardProps>, item) => {
+    item.isRead = true;
+    return [...acc, item];
+  }, []);
+};
+
+export const disableButton = (
+  arr: Array<ButtonGroupItem>,
+  notifyArr: Array<NotificationCardProps>,
+) => {
+  return arr.reduce((accBtn: Array<ButtonGroupItem>, btn) => {
+    if (!divideOnSubArr(notifyArr)[btn.text].length) {
+      btn.isDisabled = true;
+    }
+    return [...accBtn, btn];
+  }, []);
+};

package/src/components/NotificationMenu/index.ts

@@ -0,0 +1,2 @@
+export { NotificationMenu } from './NotificationMenu';
+export * from './types';

package/src/components/NotificationMenu/stories/NotificationMenu.stories.tsx

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { NotificationMenu } from '../NotificationMenu';
+import { StoryComponent } from './StoryComponent';
+
+export default {
+  title: 'Widgets/NotificationMenu',
+  component: NotificationMenu,
+} as Meta<typeof NotificationMenu>;
+
+export const Default: StoryObj<typeof NotificationMenu> = () => {
+  return <StoryComponent />;
+};
+
+Default.args = {};

package/src/components/NotificationMenu/stories/StoryComponent.tsx

@@ -0,0 +1,88 @@
+import { useEffect, useState } from 'react';
+import { Link, MemoryRouter, Route, Routes } from 'react-router-dom';
+import { useTheme } from '@emotion/react';
+import Button from '@components/Button';
+import { ButtonGroup, ButtonGroupItem } from '@components/ButtonGroup';
+import { NotificationCardProps } from '@components/NotificationCard';
+import { NotificationMenu } from '../NotificationMenu';
+import { MarkAllReadButton, Trigger } from './StoryContent';
+import {
+  disableButton,
+  divideOnSubArr,
+  getMockData,
+  notificationData,
+  readAll,
+} from '../helpers';
+import { ButtonGroupCustom } from '../styles';
+
+export const StoryComponent = () => {
+  const [notifications, setNotifications] = useState<NotificationCardProps[]>(
+    [],
+  );
+  const [readNotifications, setReadNotifications] = useState<
+    NotificationCardProps[]
+  >([]);
+  const [buttonItems, setButtonItems] = useState<ButtonGroupItem[]>([]);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+
+  const unreadQty = divideOnSubArr(notifications).Unread.length;
+  const theme = useTheme();
+
+  const handleClickOpen = () => () => {
+    if (!isLoading) return;
+    setButtonItems(notificationData.groupButtonItems);
+    getMockData().then((data) => {
+      setIsLoading(false);
+      setNotifications(data.notificationItems);
+      setReadNotifications(data.notificationItems);
+    });
+  };
+
+  useEffect(() => {
+    handleClickOpen();
+    if (!unreadQty) {
+      setButtonItems(disableButton(buttonItems, notifications));
+    }
+  }, [isLoading]);
+
+  const handleClickReadAll = () => {
+    setReadNotifications(readAll(notifications));
+    setButtonItems(disableButton(buttonItems, notifications));
+  };
+
+  const handleClick = (item: Pick<ButtonGroupItem, 'id' | 'text'>) => {
+    setReadNotifications(divideOnSubArr(notifications)[item.text]);
+  };
+
+  return (
+    <MemoryRouter>
+      <Routes>
+        <Route
+          path="/*"
+          element={
+            <NotificationMenu
+              trigger={<Trigger />}
+              onClick={handleClickOpen()}
+              notifications={readNotifications}
+              leftButton={
+                unreadQty ? (
+                  <MarkAllReadButton onClick={() => handleClickReadAll()} />
+                ) : null
+              }
+              rightButton={
+                <Link to={'/'} css={{ gridColumn: 2 }}>
+                  <Button variant="info" text="View all notification" />
+                </Link>
+              }
+              isLoading={isLoading}>
+              <ButtonGroup
+                items={buttonItems}
+                buttonStyles={ButtonGroupCustom(theme)}
+                onClick={(item) => handleClick(item)}
+              />
+            </NotificationMenu>
+          }></Route>
+      </Routes>
+    </MemoryRouter>
+  );
+};

package/src/components/NotificationMenu/stories/StoryContent.tsx

@@ -0,0 +1,54 @@
+import { css, useTheme } from '@emotion/react';
+import Button from '@components/Button';
+import Icon from '@components/Icon';
+import Indicator from '@components/Indicator';
+import { ResetBtnStyles } from '../styles';
+
+interface CommonNotificationPops {
+  onClick: () => void;
+}
+
+export const Trigger = () => {
+  const theme = useTheme();
+  return (
+    <Indicator
+      position="right"
+      isVisible
+      text={
+        <span
+          css={{
+            fontSize: 10,
+            fontWeight: 600,
+            color: '#fff',
+            minWidth: '12px',
+          }}>
+          2
+        </span>
+      }
+      background={`linear-gradient(90deg, ${theme.colors.yellow} 0%, ${theme.colors.yellowLighter} 100%)`}>
+      <div css={{ padding: '0 5px' }}>
+        <Icon name="notification" size={20} color={theme.colors.greyDarker} />
+      </div>
+    </Indicator>
+  );
+};
+
+export const MarkAllReadButton = ({ onClick }: CommonNotificationPops) => {
+  const theme = useTheme();
+  return (
+    <Button
+      onClick={onClick}
+      variant="tertiary"
+      css={css`
+        ${ResetBtnStyles}
+        span {
+          color: ${theme.colors.blueDark};
+        }
+      `}
+      startIcon={
+        <Icon name="check-circle" size={20} color={theme.colors.blueDark} />
+      }
+      text="Mark all as read"
+    />
+  );
+};