@ssa-ui-kit/widgets 0.0.14-alpha → 0.0.16-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,113 +1,113 @@
-import { createRef } from 'react';
-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);
-  });
-
-  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');
-  });
-});
+import { createRef } from 'react';
+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);
+  });
+
+  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.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 = {};