@ssa-ui-kit/widgets 0.0.8-alpha → 0.0.10-alpha

package/src/components/NotificationCard/NotificationCard.tsx

@@ -1,95 +1,95 @@
-import { forwardRef } from 'react';
-import { useTheme } from '@emotion/react';
-import { dateFormatters } from '@ssa-ui-kit/utils';
-import {
-  Badge,
-  CardBase,
-  IMapIcons,
-  Icon,
-  Indicator,
-  MainColors,
-  Typography,
-} from '@ssa-ui-kit/core';
-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 IMapIcons}
-            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>
-  );
-});
+import { forwardRef } from 'react';
+import { useTheme } from '@emotion/react';
+import { dateFormatters } from '@ssa-ui-kit/utils';
+import {
+  Badge,
+  CardBase,
+  IMapIcons,
+  Icon,
+  Indicator,
+  MainColors,
+  Typography,
+} from '@ssa-ui-kit/core';
+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 IMapIcons}
+            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

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

package/src/components/NotificationCard/styles.tsx

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

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

@@ -1,27 +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:6007/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`,
-    });
-  });
-}
+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:6007/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

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