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

package/src/components/NavBar/types.ts

@@ -1,22 +1,22 @@
-import { IMapIcons } from '@ssa-ui-kit/core';
-
-export interface INavBarProps {
-  items: Array<{ path: string; iconName: keyof IMapIcons }>;
-}
-
-export type NavBarExtendedItem = {
-  path: string;
-  iconName: keyof IMapIcons;
-  title: string;
-};
-
-export type NavBarExtendedGroup = {
-  prefix?: string;
-  iconName: keyof IMapIcons;
-  title: string;
-  items: Array<{ path: string; title: string }>;
-};
-
-export interface INavBarExtendedProps {
-  items: Array<NavBarExtendedItem | NavBarExtendedGroup>;
-}
+import { IMapIcons } from '@ssa-ui-kit/core';
+
+export interface INavBarProps {
+  items: Array<{ path: string; iconName: keyof IMapIcons }>;
+}
+
+export type NavBarExtendedItem = {
+  path: string;
+  iconName: keyof IMapIcons;
+  title: string;
+};
+
+export type NavBarExtendedGroup = {
+  prefix?: string;
+  iconName: keyof IMapIcons;
+  title: string;
+  items: Array<{ path: string; title: string }>;
+};
+
+export interface INavBarExtendedProps {
+  items: Array<NavBarExtendedItem | NavBarExtendedGroup>;
+}

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

@@ -1,90 +1,90 @@
-import userEvent from '@testing-library/user-event';
-import { Button } from '@ssa-ui-kit/core';
-import { NotificationCard } from './NotificationCard';
-import { NotificationCardProps } from './types';
-
-const commonProps: Pick<
-  NotificationCardProps,
-  'title' | 'text' | 'type' | 'time'
-> = {
-  title: 'Title',
-  text: 'Text',
-  type: 'Informational',
-  time: Date.now() - 1200000,
-};
-
-describe('NotificationCard', () => {
-  it('Renders with indicator (Unread state)', () => {
-    const { getByTestId } = render(
-      <NotificationCard {...commonProps} isRead={false} />,
-    );
-
-    getByTestId('indicator-left');
-  });
-
-  it('Renders without indicator (Read state)', () => {
-    const { queryByTestId } = render(
-      <NotificationCard {...commonProps} isRead={true} />,
-    );
-
-    expect(queryByTestId('indicator-left')).not.toBeInTheDocument();
-  });
-
-  it('Renders with badge and icon', () => {
-    const { getByTestId } = render(
-      <NotificationCard {...commonProps} isRead={false} />,
-    );
-
-    getByTestId('badge');
-    expect(getByTestId('badge')).toHaveTextContent(/information/i);
-  });
-
-  it('Renders with title and sub-text', () => {
-    const { getByText } = render(
-      <NotificationCard {...commonProps} isRead={false} />,
-    );
-
-    getByText(/title/i);
-    getByText(/text/i);
-  });
-
-  it('Renders with children prop', () => {
-    const { getByText, getAllByRole } = render(
-      <NotificationCard {...commonProps} isRead={false}>
-        <Button text="test" />
-        <Button text="test" />
-        Children Content
-      </NotificationCard>,
-    );
-
-    getByText(/children content/i);
-    const buttons = getAllByRole('button');
-    expect(buttons.length).toBe(2);
-  });
-
-  it('Renders with passed time value', () => {
-    const { getByText } = render(
-      <NotificationCard {...commonProps} isRead={false} />,
-    );
-
-    getByText(/20 mins ago/i);
-  });
-
-  it('Renders with passed onClick prop', async () => {
-    const user = userEvent.setup();
-    const mockOnClick = jest.fn();
-    const { getByTestId } = render(
-      <NotificationCard
-        {...commonProps}
-        isRead={false}
-        onClick={mockOnClick}
-      />,
-    );
-
-    const notification = getByTestId('notification');
-
-    await user.click(notification);
-
-    expect(mockOnClick).toBeCalledTimes(1);
-  });
-});
+import userEvent from '@testing-library/user-event';
+import { Button } from '@ssa-ui-kit/core';
+import { NotificationCard } from './NotificationCard';
+import { NotificationCardProps } from './types';
+
+const commonProps: Pick<
+  NotificationCardProps,
+  'title' | 'text' | 'type' | 'time'
+> = {
+  title: 'Title',
+  text: 'Text',
+  type: 'Informational',
+  time: Date.now() - 1200000,
+};
+
+describe('NotificationCard', () => {
+  it('Renders with indicator (Unread state)', () => {
+    const { getByTestId } = render(
+      <NotificationCard {...commonProps} isRead={false} />,
+    );
+
+    getByTestId('indicator-left');
+  });
+
+  it('Renders without indicator (Read state)', () => {
+    const { queryByTestId } = render(
+      <NotificationCard {...commonProps} isRead={true} />,
+    );
+
+    expect(queryByTestId('indicator-left')).not.toBeInTheDocument();
+  });
+
+  it('Renders with badge and icon', () => {
+    const { getByTestId } = render(
+      <NotificationCard {...commonProps} isRead={false} />,
+    );
+
+    getByTestId('badge');
+    expect(getByTestId('badge')).toHaveTextContent(/information/i);
+  });
+
+  it('Renders with title and sub-text', () => {
+    const { getByText } = render(
+      <NotificationCard {...commonProps} isRead={false} />,
+    );
+
+    getByText(/title/i);
+    getByText(/text/i);
+  });
+
+  it('Renders with children prop', () => {
+    const { getByText, getAllByRole } = render(
+      <NotificationCard {...commonProps} isRead={false}>
+        <Button text="test" />
+        <Button text="test" />
+        Children Content
+      </NotificationCard>,
+    );
+
+    getByText(/children content/i);
+    const buttons = getAllByRole('button');
+    expect(buttons.length).toBe(2);
+  });
+
+  it('Renders with passed time value', () => {
+    const { getByText } = render(
+      <NotificationCard {...commonProps} isRead={false} />,
+    );
+
+    getByText(/20 mins ago/i);
+  });
+
+  it('Renders with passed onClick prop', async () => {
+    const user = userEvent.setup();
+    const mockOnClick = jest.fn();
+    const { getByTestId } = render(
+      <NotificationCard
+        {...commonProps}
+        isRead={false}
+        onClick={mockOnClick}
+      />,
+    );
+
+    const notification = getByTestId('notification');
+
+    await user.click(notification);
+
+    expect(mockOnClick).toBeCalledTimes(1);
+  });
+});

package/src/components/NotificationCard/NotificationCard.stories.tsx

@@ -1,112 +1,112 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { Button } from '@ssa-ui-kit/core';
-import { mainTheme } from '@ssa-ui-kit/core';
-import { NotificationCard } from './NotificationCard';
-import { NotificationCardProps } from './types';
-import { childrenWrapper } from './styles';
-
-const notifyValues: Array<Pick<NotificationCardProps, 'type' | 'time'>> = [
-  {
-    type: 'Informational',
-    time: Date.now() - 600000,
-  },
-  {
-    type: 'Warning',
-    time: Date.now() - 1600000,
-  },
-
-  {
-    type: 'Error',
-    time: Date.now() - 2600000,
-  },
-];
-
-export default {
-  title: 'Widgets/NotificationCard',
-  component: NotificationCard,
-  argTypes: {
-    isRead: {
-      control: 'boolean',
-    },
-
-    type: {
-      options: ['Informational', 'Warning', 'Error'],
-      control: {
-        type: 'select',
-      },
-    },
-
-    time: {
-      control: {
-        type: 'date',
-      },
-    },
-  },
-} as Meta<typeof NotificationCard>;
-
-export const Default: StoryObj<typeof NotificationCard> = (
-  args: NotificationCardProps,
-) => {
-  return (
-    <div css={{ padding: '20px', background: '#F2F4F7', borderRadius: '20px' }}>
-      <NotificationCard
-        title={args.title}
-        text={args.text}
-        isRead={args.isRead}
-        type={args.type}
-        time={args.time}>
-        <div css={childrenWrapper}>
-          <Button
-            size="small"
-            variant="tertiary"
-            text="Ignore"
-            css={{
-              border: `1px solid ${mainTheme.colors.greyDropdownMain}`,
-              fontWeight: '600',
-              padding: '5px 21px',
-
-              ['span']: {
-                color: mainTheme.colors.greyCancelClearButton,
-              },
-            }}
-          />
-          <Button
-            size="small"
-            variant="attention"
-            text="Stop bot"
-            css={{ padding: '5px 26px' }}
-          />
-        </div>
-      </NotificationCard>
-    </div>
-  );
-};
-
-Default.args = {
-  title: 'CyberVeinToken is Now Available on Exchange',
-  text: 'You have an error with Bot name 1. Do you want to stop this bot?',
-  isRead: false,
-  type: 'Informational',
-  time: Date.now() - 1200000,
-};
-
-export const NotificationList: StoryObj<typeof NotificationCard> = () => {
-  return (
-    <div css={{ padding: '20px', background: '#F2F4F7', borderRadius: '20px' }}>
-      {notifyValues.map((value, index) => {
-        return (
-          <NotificationCard
-            key={index}
-            title="CyberVeinToken is Now Available"
-            text="With our newest listing, we’re welcoming Wrapped "
-            isRead={false}
-            type={value.type}
-            time={value.time}
-          />
-        );
-      })}
-    </div>
-  );
-};
-
-NotificationList.args = {};
+import { Meta, StoryObj } from '@storybook/react';
+import { Button } from '@ssa-ui-kit/core';
+import { mainTheme } from '@ssa-ui-kit/core';
+import { NotificationCard } from './NotificationCard';
+import { NotificationCardProps } from './types';
+import { childrenWrapper } from './styles';
+
+const notifyValues: Array<Pick<NotificationCardProps, 'type' | 'time'>> = [
+  {
+    type: 'Informational',
+    time: Date.now() - 600000,
+  },
+  {
+    type: 'Warning',
+    time: Date.now() - 1600000,
+  },
+
+  {
+    type: 'Error',
+    time: Date.now() - 2600000,
+  },
+];
+
+export default {
+  title: 'Widgets/NotificationCard',
+  component: NotificationCard,
+  argTypes: {
+    isRead: {
+      control: 'boolean',
+    },
+
+    type: {
+      options: ['Informational', 'Warning', 'Error'],
+      control: {
+        type: 'select',
+      },
+    },
+
+    time: {
+      control: {
+        type: 'date',
+      },
+    },
+  },
+} as Meta<typeof NotificationCard>;
+
+export const Default: StoryObj<typeof NotificationCard> = (
+  args: NotificationCardProps,
+) => {
+  return (
+    <div css={{ padding: '20px', background: '#F2F4F7', borderRadius: '20px' }}>
+      <NotificationCard
+        title={args.title}
+        text={args.text}
+        isRead={args.isRead}
+        type={args.type}
+        time={args.time}>
+        <div css={childrenWrapper}>
+          <Button
+            size="small"
+            variant="tertiary"
+            text="Ignore"
+            css={{
+              border: `1px solid ${mainTheme.colors.greyDropdownMain}`,
+              fontWeight: '600',
+              padding: '5px 21px',
+
+              ['span']: {
+                color: mainTheme.colors.greyCancelClearButton,
+              },
+            }}
+          />
+          <Button
+            size="small"
+            variant="attention"
+            text="Stop bot"
+            css={{ padding: '5px 26px' }}
+          />
+        </div>
+      </NotificationCard>
+    </div>
+  );
+};
+
+Default.args = {
+  title: 'CyberVeinToken is Now Available on Exchange',
+  text: 'You have an error with Bot name 1. Do you want to stop this bot?',
+  isRead: false,
+  type: 'Informational',
+  time: Date.now() - 1200000,
+};
+
+export const NotificationList: StoryObj<typeof NotificationCard> = () => {
+  return (
+    <div css={{ padding: '20px', background: '#F2F4F7', borderRadius: '20px' }}>
+      {notifyValues.map((value, index) => {
+        return (
+          <NotificationCard
+            key={index}
+            title="CyberVeinToken is Now Available"
+            text="With our newest listing, we’re welcoming Wrapped "
+            isRead={false}
+            type={value.type}
+            time={value.time}
+          />
+        );
+      })}
+    </div>
+  );
+};
+
+NotificationList.args = {};

package/src/components/NotificationCard/NotificationCard.tsx

@@ -1,94 +1,94 @@
-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 = ({
-  title,
-  children,
-  text,
-  isRead,
-  type,
-  time,
-  onClick,
-}: NotificationCardProps) => {
-  const theme = useTheme();
-  const { getTimeAgo } = dateFormatters;
-
-  return (
-    <CardBase
-      data-testid="notification"
-      css={notifyCard}
-      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 { 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 = ({
+  title,
+  children,
+  text,
+  isRead,
+  type,
+  time,
+  onClick,
+}: NotificationCardProps) => {
+  const theme = useTheme();
+  const { getTimeAgo } = dateFormatters;
+
+  return (
+    <CardBase
+      data-testid="notification"
+      css={notifyCard}
+      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';