@ssa-ui-kit/widgets 0.0.18-alpha → 0.0.20-alpha

package/src/components/CollapsibleNavBar/styles.ts

@@ -1,91 +1,91 @@
-import { Theme, css } from '@emotion/react';
-
-export const AccordionTitleWrapper = (theme: Theme) => css`
-  cursor: pointer;
-  align-items: center;
-
-  ${theme.mediaQueries.md} {
-    display: flex;
-    justify-content: center;
-  }
-
-  & div.icon-wrapper {
-    width: 100%;
-    gap: 0;
-  }
-
-  & div.icon-wrapper:not(.active):hover > button svg path,
-  & div.icon-wrapper.active > button svg path {
-    stroke: #fff;
-    fill: none;
-  }
-
-  & .trigger-icon {
-    height: 22px;
-  }
-`;
-
-export const AccordionTitle = (theme: Theme) => css`
-  padding: 0 14px 0 22px;
-  ${theme.mediaQueries.md} {
-    display: none;
-  }
-`;
-
-export const AccordionContent = (theme: Theme) => css`
-  display: flex;
-  align-items: flex-start;
-  width: 100%;
-  padding-left: 44px;
-  overflow: hidden;
-  perspective: 1px;
-
-  ${theme.mediaQueries.md} {
-    display: none;
-  }
-  ${theme.mediaQueries.lg} {
-    display: none;
-  }
-`;
-
-export const AccordionContentPopover = (theme: Theme) => css`
-  display: flex;
-  ${theme.mediaQueries.md} {
-    display: flex;
-  }
-  ${theme.mediaQueries.lg} {
-    display: flex;
-  }
-`;
-
-export const LogoWrapper = (theme: Theme) => css`
-  position: relative;
-  ${theme.mediaQueries.md} {
-    justify-content: center;
-  }
-  ${theme.mediaQueries.lg} {
-    justify-content: flex-start;
-  }
-`;
-
-export const ContentToggle = (theme: Theme) => css`
-  display: none;
-  position: absolute;
-  cursor: pointer;
-  right: -17px;
-  width: 34px;
-  height: 34px;
-  background: ${theme.colors.greyLighter};
-  border-radius: 12px;
-  justify-content: center;
-  align-items: center;
-  & input {
-    display: none;
-  }
-  & svg {
-    cursor: pointer;
-  }
-  ${theme.mediaQueries.lg} {
-    display: flex;
-  }
-`;
+import { Theme, css } from '@emotion/react';
+
+export const AccordionTitleWrapper = (theme: Theme) => css`
+  cursor: pointer;
+  align-items: center;
+
+  ${theme.mediaQueries.md} {
+    display: flex;
+    justify-content: center;
+  }
+
+  & div.icon-wrapper {
+    width: 100%;
+    gap: 0;
+  }
+
+  & div.icon-wrapper:not(.active):hover > button svg path,
+  & div.icon-wrapper.active > button svg path {
+    stroke: #fff;
+    fill: none;
+  }
+
+  & .trigger-icon {
+    height: 22px;
+  }
+`;
+
+export const AccordionTitle = (theme: Theme) => css`
+  padding: 0 14px 0 22px;
+  ${theme.mediaQueries.md} {
+    display: none;
+  }
+`;
+
+export const AccordionContent = (theme: Theme) => css`
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+  padding-left: 44px;
+  overflow: hidden;
+  perspective: 1px;
+
+  ${theme.mediaQueries.md} {
+    display: none;
+  }
+  ${theme.mediaQueries.lg} {
+    display: none;
+  }
+`;
+
+export const AccordionContentPopover = (theme: Theme) => css`
+  display: flex;
+  ${theme.mediaQueries.md} {
+    display: flex;
+  }
+  ${theme.mediaQueries.lg} {
+    display: flex;
+  }
+`;
+
+export const LogoWrapper = (theme: Theme) => css`
+  position: relative;
+  ${theme.mediaQueries.md} {
+    justify-content: center;
+  }
+  ${theme.mediaQueries.lg} {
+    justify-content: flex-start;
+  }
+`;
+
+export const ContentToggle = (theme: Theme) => css`
+  display: none;
+  position: absolute;
+  cursor: pointer;
+  right: -17px;
+  width: 34px;
+  height: 34px;
+  background: ${theme.colors.greyLighter};
+  border-radius: 12px;
+  justify-content: center;
+  align-items: center;
+  & input {
+    display: none;
+  }
+  & svg {
+    cursor: pointer;
+  }
+  ${theme.mediaQueries.lg} {
+    display: flex;
+  }
+`;

package/src/components/CollapsibleNavBar/types.ts

@@ -1,16 +1,17 @@
-import { NavBarExtendedGroup, NavBarExtendedItem } from '../..';
-
-export interface CollapsibleNavBarItem extends NavBarExtendedItem {
-  iconSize: number;
-  css?: React.CSSProperties;
-}
-
-export interface CollapsibleNavBarGroup extends Required<NavBarExtendedGroup> {
-  iconSize: number;
-  css?: React.CSSProperties;
-}
-
-export interface CollapsibleNavBarExtendedProps {
-  items: Array<CollapsibleNavBarItem | CollapsibleNavBarGroup>;
-  renderLogo: React.ReactElement;
-}
+import { NavBarExtendedGroup, NavBarExtendedItem } from '../..';
+
+export interface CollapsibleNavBarItem extends NavBarExtendedItem {
+  iconSize: number;
+  css?: React.CSSProperties;
+}
+
+export interface CollapsibleNavBarGroup extends NavBarExtendedGroup {
+  iconSize: number;
+  css?: React.CSSProperties;
+  prefix: string;
+}
+
+export interface CollapsibleNavBarExtendedProps {
+  items: Array<CollapsibleNavBarItem | CollapsibleNavBarGroup>;
+  renderLogo: React.ReactElement;
+}

package/src/components/ExchangeAccount/ExchangeAccount.spec.tsx

@@ -1,110 +1,110 @@
-import { MemoryRouter, Route, Routes } from 'react-router-dom';
-import userEvent from '@testing-library/user-event';
-import { ExchangeAccount } from './ExchangeAccount';
-import { dataValues } from './helpers';
-
-const commonProps = {
-  platform: dataValues[0].platform,
-  title: dataValues[0].title,
-  data: dataValues[0].data,
-  status: dataValues[0].status,
-  onDelete: jest.fn(),
-};
-
-const ResponsivePieMock = () => <div data-testid="responsive-pie"></div>;
-
-jest.mock('@nivo/pie', () => ({
-  PieCustomLayerProps: {},
-  ResponsivePie: ResponsivePieMock,
-}));
-
-describe('ExchangeAccount', () => {
-  it('Renders with platform', () => {
-    const { getByText } = render(<ExchangeAccount {...commonProps} />);
-    getByText(new RegExp('Binance', 'i'));
-  });
-
-  it('Renders with title', () => {
-    const { getByText } = render(<ExchangeAccount {...commonProps} />);
-    getByText(new RegExp('Account Name', 'i'));
-  });
-
-  it('Renders with active status label', () => {
-    const { getByText } = render(<ExchangeAccount {...commonProps} />);
-    getByText(new RegExp('Active', 'i'));
-  });
-
-  it('Renders with not available status label', () => {
-    const { getByText } = render(
-      <ExchangeAccount {...commonProps} status="NotAvailable" />,
-    );
-    getByText(new RegExp('Not available', 'i'));
-  });
-
-  it('Renders with BalancePieChart component', () => {
-    const { getByTestId } = render(<ExchangeAccount {...commonProps} />);
-
-    getByTestId('responsive-pie');
-  });
-
-  it('Clicks on delete button', async () => {
-    const user = userEvent.setup();
-    const mockOnClick = jest.fn();
-    const { getByRole } = render(
-      <ExchangeAccount {...commonProps} onDelete={mockOnClick} />,
-    );
-
-    const deleteButton = getByRole('button');
-
-    await user.click(deleteButton);
-    expect(mockOnClick).toBeCalledTimes(1);
-  });
-
-  it('Clicks on card', async () => {
-    const user = userEvent.setup();
-    const mockOnClick = jest.fn();
-    const mockOnDelete = jest.fn();
-    const { getByTestId } = render(
-      <ExchangeAccount
-        {...commonProps}
-        onClick={mockOnClick}
-        onDelete={mockOnDelete}
-      />,
-    );
-
-    await user.click(getByTestId('card'));
-
-    expect(mockOnClick).toBeCalledTimes(1);
-    expect(mockOnDelete).toBeCalledTimes(0);
-  });
-
-  it('Renders with clickable card link', async () => {
-    const user = userEvent.setup();
-    const mockOnClick = jest.fn();
-    const mockOnDelete = jest.fn();
-    const { getByRole } = render(
-      <MemoryRouter>
-        <Routes>
-          <Route
-            path="/*"
-            element={
-              <ExchangeAccount
-                {...commonProps}
-                link="/link"
-                onClick={mockOnClick}
-                onDelete={mockOnDelete}
-              />
-            }
-          />
-        </Routes>
-      </MemoryRouter>,
-    );
-
-    const link = getByRole('link');
-    await user.click(link);
-
-    expect(link).toHaveAttribute('href', '/link');
-    expect(mockOnClick).toBeCalledTimes(1);
-    expect(mockOnDelete).toBeCalledTimes(0);
-  });
-});
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import userEvent from '@testing-library/user-event';
+import { ExchangeAccount } from './ExchangeAccount';
+import { dataValues } from './helpers';
+
+const commonProps = {
+  platform: dataValues[0].platform,
+  title: dataValues[0].title,
+  data: dataValues[0].data,
+  status: dataValues[0].status,
+  onDelete: jest.fn(),
+};
+
+const ResponsivePieMock = () => <div data-testid="responsive-pie"></div>;
+
+jest.mock('@nivo/pie', () => ({
+  PieCustomLayerProps: {},
+  ResponsivePie: ResponsivePieMock,
+}));
+
+describe('ExchangeAccount', () => {
+  it('Renders with platform', () => {
+    const { getByText } = render(<ExchangeAccount {...commonProps} />);
+    getByText(new RegExp('Binance', 'i'));
+  });
+
+  it('Renders with title', () => {
+    const { getByText } = render(<ExchangeAccount {...commonProps} />);
+    getByText(new RegExp('Account Name', 'i'));
+  });
+
+  it('Renders with active status label', () => {
+    const { getByText } = render(<ExchangeAccount {...commonProps} />);
+    getByText(new RegExp('Active', 'i'));
+  });
+
+  it('Renders with not available status label', () => {
+    const { getByText } = render(
+      <ExchangeAccount {...commonProps} status="NotAvailable" />,
+    );
+    getByText(new RegExp('Not available', 'i'));
+  });
+
+  it('Renders with BalancePieChart component', () => {
+    const { getByTestId } = render(<ExchangeAccount {...commonProps} />);
+
+    getByTestId('responsive-pie');
+  });
+
+  it('Clicks on delete button', async () => {
+    const user = userEvent.setup();
+    const mockOnClick = jest.fn();
+    const { getByRole } = render(
+      <ExchangeAccount {...commonProps} onDelete={mockOnClick} />,
+    );
+
+    const deleteButton = getByRole('button');
+
+    await user.click(deleteButton);
+    expect(mockOnClick).toBeCalledTimes(1);
+  });
+
+  it('Clicks on card', async () => {
+    const user = userEvent.setup();
+    const mockOnClick = jest.fn();
+    const mockOnDelete = jest.fn();
+    const { getByTestId } = render(
+      <ExchangeAccount
+        {...commonProps}
+        onClick={mockOnClick}
+        onDelete={mockOnDelete}
+      />,
+    );
+
+    await user.click(getByTestId('card'));
+
+    expect(mockOnClick).toBeCalledTimes(1);
+    expect(mockOnDelete).toBeCalledTimes(0);
+  });
+
+  it('Renders with clickable card link', async () => {
+    const user = userEvent.setup();
+    const mockOnClick = jest.fn();
+    const mockOnDelete = jest.fn();
+    const { getByRole } = render(
+      <MemoryRouter>
+        <Routes>
+          <Route
+            path="/*"
+            element={
+              <ExchangeAccount
+                {...commonProps}
+                link="/link"
+                onClick={mockOnClick}
+                onDelete={mockOnDelete}
+              />
+            }
+          />
+        </Routes>
+      </MemoryRouter>,
+    );
+
+    const link = getByRole('link');
+    await user.click(link);
+
+    expect(link).toHaveAttribute('href', '/link');
+    expect(mockOnClick).toBeCalledTimes(1);
+    expect(mockOnDelete).toBeCalledTimes(0);
+  });
+});

package/src/components/ExchangeAccount/ExchangeAccount.stories.tsx

@@ -1,90 +1,90 @@
-import { MemoryRouter, Route, Routes } from 'react-router-dom';
-import { Meta, StoryObj } from '@storybook/react';
-import { css, useTheme } from '@emotion/react';
-import { Icon } from '@ssa-ui-kit/core';
-import { AddNewAccountCard } from '@components/AddNewAccountCard';
-import { ExchangeAccount } from './ExchangeAccount';
-import { dataValues } from './helpers';
-
-export default {
-  title: 'Widgets/ExchangeAccount',
-  component: ExchangeAccount,
-} as Meta<typeof ExchangeAccount>;
-
-export const Default: StoryObj<typeof ExchangeAccount> = () => {
-  return (
-    <ExchangeAccount
-      platform={dataValues[0].platform}
-      title={dataValues[0].title}
-      status={dataValues[0].status}
-      data={dataValues[0].data}
-      onClick={() => alert('Card is clicked!')}
-      onDelete={() => alert('Card is deleted!')}
-    />
-  );
-};
-
-Default.args = {};
-
-export const WithLink: StoryObj<typeof ExchangeAccount> = () => {
-  return (
-    <MemoryRouter>
-      <Routes>
-        <Route
-          path="/*"
-          element={
-            <ExchangeAccount
-              platform={dataValues[0].platform}
-              title={dataValues[0].title}
-              status={dataValues[0].status}
-              data={dataValues[0].data}
-              link="/link"
-              onClick={() => alert('Card is clicked!')}
-              onDelete={() => alert('Card is deleted!')}
-            />
-          }
-        />
-      </Routes>
-    </MemoryRouter>
-  );
-};
-
-WithLink.args = {};
-
-export const List: StoryObj<typeof ExchangeAccount> = () => {
-  const theme = useTheme();
-  return (
-    <div
-      css={css`
-        display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-        gap: 10px;
-
-        ${theme.mediaQueries.md} {
-          max-width: 1542px;
-          grid-template-columns: repeat(3, minmax(200px, 1fr));
-          gap: 20px;
-        }
-      `}>
-      <AddNewAccountCard>
-        <Icon name="plus" size={12} color={theme.colors.blueRoyal} />
-        Add new account
-      </AddNewAccountCard>
-      {dataValues.map((item, index) => {
-        return (
-          <ExchangeAccount
-            key={index}
-            platform={item.platform}
-            title={item.title}
-            status={item.status}
-            data={item.data}
-            onClick={() => alert('Card is clicked!')}
-            onDelete={() => alert('Card is deleted!')}
-          />
-        );
-      })}
-    </div>
-  );
-};
-
-List.args = {};
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { Meta, StoryObj } from '@storybook/react';
+import { css, useTheme } from '@emotion/react';
+import { Icon } from '@ssa-ui-kit/core';
+import { AddNewAccountCard } from '@components/AddNewAccountCard';
+import { ExchangeAccount } from './ExchangeAccount';
+import { dataValues } from './helpers';
+
+export default {
+  title: 'Widgets/ExchangeAccount',
+  component: ExchangeAccount,
+} as Meta<typeof ExchangeAccount>;
+
+export const Default: StoryObj<typeof ExchangeAccount> = () => {
+  return (
+    <ExchangeAccount
+      platform={dataValues[0].platform}
+      title={dataValues[0].title}
+      status={dataValues[0].status}
+      data={dataValues[0].data}
+      onClick={() => alert('Card is clicked!')}
+      onDelete={() => alert('Card is deleted!')}
+    />
+  );
+};
+
+Default.args = {};
+
+export const WithLink: StoryObj<typeof ExchangeAccount> = () => {
+  return (
+    <MemoryRouter>
+      <Routes>
+        <Route
+          path="/*"
+          element={
+            <ExchangeAccount
+              platform={dataValues[0].platform}
+              title={dataValues[0].title}
+              status={dataValues[0].status}
+              data={dataValues[0].data}
+              link="/link"
+              onClick={() => alert('Card is clicked!')}
+              onDelete={() => alert('Card is deleted!')}
+            />
+          }
+        />
+      </Routes>
+    </MemoryRouter>
+  );
+};
+
+WithLink.args = {};
+
+export const List: StoryObj<typeof ExchangeAccount> = () => {
+  const theme = useTheme();
+  return (
+    <div
+      css={css`
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+        gap: 10px;
+
+        ${theme.mediaQueries.md} {
+          max-width: 1542px;
+          grid-template-columns: repeat(3, minmax(200px, 1fr));
+          gap: 20px;
+        }
+      `}>
+      <AddNewAccountCard>
+        <Icon name="plus" size={12} color={theme.colors.blueRoyal} />
+        Add new account
+      </AddNewAccountCard>
+      {dataValues.map((item, index) => {
+        return (
+          <ExchangeAccount
+            key={index}
+            platform={item.platform}
+            title={item.title}
+            status={item.status}
+            data={item.data}
+            onClick={() => alert('Card is clicked!')}
+            onDelete={() => alert('Card is deleted!')}
+          />
+        );
+      })}
+    </div>
+  );
+};
+
+List.args = {};