@ssa-ui-kit/widgets 0.0.14-alpha → 0.0.16-alpha

package/src/components/ExchangeAccount/helpers.tsx

@@ -1,153 +1,153 @@
-import React from 'react';
-import { Icon } from '@ssa-ui-kit/core';
-import { ExchangeAccountProps } from './types';
-
-export const dataValues: Array<
-  Omit<ExchangeAccountProps, 'onClick' | 'onDelete'>
-> = [
-  {
-    platform: (
-      <React.Fragment>
-        <Icon name="stats" color="#EFC938" size={20} />
-        Binance
-      </React.Fragment>
-    ),
-    title: 'Account Name',
-    status: 'Active',
-    data: {
-      total: 48000.53032,
-      currency: 'USDT',
-      data: [
-        {
-          id: 'BTC',
-          label: 'BTC',
-          legendValue: 1,
-          value: 5371.23,
-        },
-        {
-          id: 'LTC',
-          label: 'LTC',
-          legendValue: 7,
-          value: 5300.25,
-        },
-        {
-          id: 'ETH',
-          label: 'ETH',
-          legendValue: 1,
-          value: 1815.31,
-        },
-        {
-          id: 'Other',
-          label: 'Other',
-          legendValue: 943,
-          value: 1513.9956,
-        },
-      ],
-    },
-  },
-  {
-    platform: 'Binance',
-    title: 'Name#2',
-    status: 'NotAvailable',
-    data: {
-      total: 4800.53,
-      currency: 'USDT',
-      data: [
-        {
-          id: 'BTC',
-          label: 'BTC',
-          legendValue: 100,
-          value: 2371.23,
-        },
-        {
-          id: 'LTC',
-          label: 'LTC',
-          legendValue: 52,
-          value: 5300.25,
-        },
-        {
-          id: 'ETH',
-          label: 'ETH',
-          legendValue: 86,
-          value: 3815.31,
-        },
-        {
-          id: 'Other',
-          label: 'Other',
-          legendValue: 943,
-          value: 1513.9956,
-        },
-      ],
-    },
-  },
-  {
-    platform: 'Binance',
-    title: 'Name#3',
-    status: 'NotAvailable',
-    data: {
-      total: 10000.53,
-      currency: 'USDT',
-      data: [
-        {
-          id: 'BTC',
-          label: 'BTC',
-          legendValue: 95,
-          value: 1371.23,
-        },
-        {
-          id: 'LTC',
-          label: 'LTC',
-          legendValue: 7,
-          value: 8300.25,
-        },
-        {
-          id: 'ETH',
-          label: 'ETH',
-          legendValue: 6,
-          value: 4815.31,
-        },
-        {
-          id: 'Other',
-          label: 'Other',
-          legendValue: 943,
-          value: 3513.9956,
-        },
-      ],
-    },
-  },
-  {
-    platform: 'Binance',
-    title: 'Name#4',
-    status: 'Active',
-    data: {
-      total: 9000.53032,
-      currency: 'USDT',
-      data: [
-        {
-          id: 'BTC',
-          label: 'BTC',
-          legendValue: 10,
-          value: 5371.23,
-        },
-        {
-          id: 'LTC',
-          label: 'LTC',
-          legendValue: 7,
-          value: 5300.25,
-        },
-        {
-          id: 'ETH',
-          label: 'ETH',
-          legendValue: 1,
-          value: 7815.31,
-        },
-        {
-          id: 'Other',
-          label: 'Other',
-          legendValue: 943,
-          value: 5513.9956,
-        },
-      ],
-    },
-  },
-];
+import React from 'react';
+import { Icon } from '@ssa-ui-kit/core';
+import { ExchangeAccountProps } from './types';
+
+export const dataValues: Array<
+  Omit<ExchangeAccountProps, 'onClick' | 'onDelete'>
+> = [
+  {
+    platform: (
+      <React.Fragment>
+        <Icon name="stats" color="#EFC938" size={20} />
+        Binance
+      </React.Fragment>
+    ),
+    title: 'Account Name',
+    status: 'Active',
+    data: {
+      total: 48000.53032,
+      currency: 'USDT',
+      data: [
+        {
+          id: 'BTC',
+          label: 'BTC',
+          legendValue: 1,
+          value: 5371.23,
+        },
+        {
+          id: 'LTC',
+          label: 'LTC',
+          legendValue: 7,
+          value: 5300.25,
+        },
+        {
+          id: 'ETH',
+          label: 'ETH',
+          legendValue: 1,
+          value: 1815.31,
+        },
+        {
+          id: 'Other',
+          label: 'Other',
+          legendValue: 943,
+          value: 1513.9956,
+        },
+      ],
+    },
+  },
+  {
+    platform: 'Binance',
+    title: 'Name#2',
+    status: 'NotAvailable',
+    data: {
+      total: 4800.53,
+      currency: 'USDT',
+      data: [
+        {
+          id: 'BTC',
+          label: 'BTC',
+          legendValue: 100,
+          value: 2371.23,
+        },
+        {
+          id: 'LTC',
+          label: 'LTC',
+          legendValue: 52,
+          value: 5300.25,
+        },
+        {
+          id: 'ETH',
+          label: 'ETH',
+          legendValue: 86,
+          value: 3815.31,
+        },
+        {
+          id: 'Other',
+          label: 'Other',
+          legendValue: 943,
+          value: 1513.9956,
+        },
+      ],
+    },
+  },
+  {
+    platform: 'Binance',
+    title: 'Name#3',
+    status: 'NotAvailable',
+    data: {
+      total: 10000.53,
+      currency: 'USDT',
+      data: [
+        {
+          id: 'BTC',
+          label: 'BTC',
+          legendValue: 95,
+          value: 1371.23,
+        },
+        {
+          id: 'LTC',
+          label: 'LTC',
+          legendValue: 7,
+          value: 8300.25,
+        },
+        {
+          id: 'ETH',
+          label: 'ETH',
+          legendValue: 6,
+          value: 4815.31,
+        },
+        {
+          id: 'Other',
+          label: 'Other',
+          legendValue: 943,
+          value: 3513.9956,
+        },
+      ],
+    },
+  },
+  {
+    platform: 'Binance',
+    title: 'Name#4',
+    status: 'Active',
+    data: {
+      total: 9000.53032,
+      currency: 'USDT',
+      data: [
+        {
+          id: 'BTC',
+          label: 'BTC',
+          legendValue: 10,
+          value: 5371.23,
+        },
+        {
+          id: 'LTC',
+          label: 'LTC',
+          legendValue: 7,
+          value: 5300.25,
+        },
+        {
+          id: 'ETH',
+          label: 'ETH',
+          legendValue: 1,
+          value: 7815.31,
+        },
+        {
+          id: 'Other',
+          label: 'Other',
+          legendValue: 943,
+          value: 5513.9956,
+        },
+      ],
+    },
+  },
+];

package/src/components/ExchangeAccount/index.ts

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

package/src/components/ExchangeAccount/styles.ts

@@ -1,133 +1,133 @@
-import { Theme, css } from '@emotion/react';
-
-export const CardBase = (theme: Theme) => css`
-  padding: 0;
-  border-radius: 20px;
-  box-shadow: 0px 10px 40px 0px ${theme.colors.greyShadow};
-  transition: 0.3s;
-
-  &:hover {
-    box-shadow: 5px 5px 20px 0px ${theme.colors.black25};
-  }
-`;
-
-export const CardHeader = (theme: Theme) => css`
-  display: grid;
-  grid-template-columns: auto 1fr 20px;
-  align-items: center;
-  width: 100%;
-  padding: 10px;
-  border-radius: 20px 20px 0 0;
-  background: ${theme.colors.greyLighter};
-  margin-bottom: 0;
-
-  ${theme.mediaQueries.md} {
-    h6 {
-      font-size: 16px;
-      line-height: 24px;
-    }
-  }
-
-  ${theme.mediaQueries.xs} {
-    padding: 6px 10px;
-  }
-`;
-
-export const RemoveButton = (theme: Theme) => css`
-  height: auto;
-  padding: 0;
-  background: none;
-  box-shadow: none;
-
-  &:hover,
-  &:focus {
-    background: none;
-    box-shadow: none;
-  }
-
-  &:hover {
-    svg path {
-      fill: ${theme.colors.greyDarker};
-    }
-  }
-`;
-
-export const Platform = css`
-  display: flex;
-  align-items: center;
-  gap: 9px;
-  margin-right: 13px;
-`;
-
-export const Status = (theme: Theme) => css`
-  width: 100%;
-  text-align: center;
-  padding: 4px;
-
-  &.active {
-    color: ${theme.colors.greenDark};
-    background: ${theme.colors.greenMint};
-  }
-
-  &.not-available {
-    color: ${theme.colors.red};
-    background: ${theme.colors.redLighter40};
-  }
-
-  ${theme.mediaQueries.md} {
-    font-size: 14px;
-    line-height: 17px;
-  }
-`;
-
-export const CardContent = (theme: Theme) => css`
-  width: 100%;
-  padding: 10px 20px;
-
-  ul:last-child {
-    li {
-      justify-content: flex-end;
-      text-align: right;
-    }
-  }
-
-  ${theme.mediaQueries.md} {
-    > div {
-      display: block;
-      text-align: center;
-
-      .pie-chart-wrapper {
-        margin: 0 auto 6px;
-      }
-    }
-
-    ul {
-      display: inline-flex;
-      height: auto;
-    }
-
-    ul:last-child {
-      margin-left: 30px;
-    }
-  }
-
-  ${theme.mediaQueries.lg} {
-    > div {
-      display: flex;
-      justify-content: space-around;
-
-      .pie-chart-wrapper {
-        margin: 0 10px 0 0;
-      }
-    }
-
-    ul {
-      display: flex;
-      margin-left: 0;
-    }
-
-    ul:last-child {
-      margin-left: 10px;
-    }
-  }
-`;
+import { Theme, css } from '@emotion/react';
+
+export const CardBase = (theme: Theme) => css`
+  padding: 0;
+  border-radius: 20px;
+  box-shadow: 0px 10px 40px 0px ${theme.colors.greyShadow};
+  transition: 0.3s;
+
+  &:hover {
+    box-shadow: 5px 5px 20px 0px ${theme.colors.black25};
+  }
+`;
+
+export const CardHeader = (theme: Theme) => css`
+  display: grid;
+  grid-template-columns: auto 1fr 20px;
+  align-items: center;
+  width: 100%;
+  padding: 10px;
+  border-radius: 20px 20px 0 0;
+  background: ${theme.colors.greyLighter};
+  margin-bottom: 0;
+
+  ${theme.mediaQueries.md} {
+    h6 {
+      font-size: 16px;
+      line-height: 24px;
+    }
+  }
+
+  ${theme.mediaQueries.xs} {
+    padding: 6px 10px;
+  }
+`;
+
+export const RemoveButton = (theme: Theme) => css`
+  height: auto;
+  padding: 0;
+  background: none;
+  box-shadow: none;
+
+  &:hover,
+  &:focus {
+    background: none;
+    box-shadow: none;
+  }
+
+  &:hover {
+    svg path {
+      fill: ${theme.colors.greyDarker};
+    }
+  }
+`;
+
+export const Platform = css`
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  margin-right: 13px;
+`;
+
+export const Status = (theme: Theme) => css`
+  width: 100%;
+  text-align: center;
+  padding: 4px;
+
+  &.active {
+    color: ${theme.colors.greenDark};
+    background: ${theme.colors.greenMint};
+  }
+
+  &.not-available {
+    color: ${theme.colors.red};
+    background: ${theme.colors.redLighter40};
+  }
+
+  ${theme.mediaQueries.md} {
+    font-size: 14px;
+    line-height: 17px;
+  }
+`;
+
+export const CardContent = (theme: Theme) => css`
+  width: 100%;
+  padding: 10px 20px;
+
+  ul:last-child {
+    li {
+      justify-content: flex-end;
+      text-align: right;
+    }
+  }
+
+  ${theme.mediaQueries.md} {
+    > div {
+      display: block;
+      text-align: center;
+
+      .pie-chart-wrapper {
+        margin: 0 auto 6px;
+      }
+    }
+
+    ul {
+      display: inline-flex;
+      height: auto;
+    }
+
+    ul:last-child {
+      margin-left: 30px;
+    }
+  }
+
+  ${theme.mediaQueries.lg} {
+    > div {
+      display: flex;
+      justify-content: space-around;
+
+      .pie-chart-wrapper {
+        margin: 0 10px 0 0;
+      }
+    }
+
+    ul {
+      display: flex;
+      margin-left: 0;
+    }
+
+    ul:last-child {
+      margin-left: 10px;
+    }
+  }
+`;

package/src/components/ExchangeAccount/types.ts

@@ -1,12 +1,12 @@
-import { To } from 'react-router-dom';
-import { AccountBalanceProps } from '@components/AccountBalance';
-
-export interface ExchangeAccountProps {
-  platform: string | JSX.Element;
-  title: string;
-  status: 'Active' | 'NotAvailable';
-  onClick?: () => void;
-  onDelete: () => void;
-  link?: To;
-  data: Omit<AccountBalanceProps, 'title' | 'className' | 'onClick' | 'link'>;
-}
+import { To } from 'react-router-dom';
+import { AccountBalanceProps } from '@components/AccountBalance';
+
+export interface ExchangeAccountProps {
+  platform: string | JSX.Element;
+  title: string;
+  status: 'Active' | 'NotAvailable';
+  onClick?: () => void;
+  onDelete: () => void;
+  link?: To;
+  data: Omit<AccountBalanceProps, 'title' | 'className' | 'onClick' | 'link'>;
+}

package/src/components/ExchangeAccountKeys/ExchangeAccountKeys.spec.tsx

@@ -1,43 +1,43 @@
-import userEvent from '@testing-library/user-event';
-import { StoryComponent } from './stories/StoryComponent';
-
-describe('ExchangeAccountKeys', () => {
-  it('Renders with title', () => {
-    const { getByText } = render(<StoryComponent onDelete={jest.fn()} />);
-
-    getByText('Account Name');
-  });
-
-  it('Renders with delete button', async () => {
-    const user = userEvent.setup();
-    const mockOnClick = jest.fn();
-    const { getByRole } = render(<StoryComponent onDelete={mockOnClick} />);
-
-    const deleteButton = getByRole('button', { name: 'Bin' });
-    await user.click(deleteButton);
-    expect(mockOnClick).toBeCalledTimes(1);
-  });
-
-  it('Renders with API key and hidden Secret key', () => {
-    const { getByText } = render(<StoryComponent onDelete={jest.fn()} />);
-
-    getByText('123456789012345678901234567890');
-    getByText('******');
-  });
-
-  it('Clicks on hidden/unhidden secret key', async () => {
-    const user = userEvent.setup();
-    const mockOnClick = jest.fn();
-    const { getByRole, getByText } = render(
-      <StoryComponent onDelete={mockOnClick} />,
-    );
-
-    const invisibleIcon = getByRole('button', { name: 'Invisible' });
-    await user.click(invisibleIcon);
-    getByText('1234567890');
-
-    const visibleIcon = getByRole('button', { name: 'Visible' });
-    await user.click(visibleIcon);
-    getByText('******');
-  });
-});
+import userEvent from '@testing-library/user-event';
+import { StoryComponent } from './stories/StoryComponent';
+
+describe('ExchangeAccountKeys', () => {
+  it('Renders with title', () => {
+    const { getByText } = render(<StoryComponent onDelete={jest.fn()} />);
+
+    getByText('Account Name');
+  });
+
+  it('Renders with delete button', async () => {
+    const user = userEvent.setup();
+    const mockOnClick = jest.fn();
+    const { getByRole } = render(<StoryComponent onDelete={mockOnClick} />);
+
+    const deleteButton = getByRole('button', { name: 'Bin' });
+    await user.click(deleteButton);
+    expect(mockOnClick).toBeCalledTimes(1);
+  });
+
+  it('Renders with API key and hidden Secret key', () => {
+    const { getByText } = render(<StoryComponent onDelete={jest.fn()} />);
+
+    getByText('123456789012345678901234567890');
+    getByText('******');
+  });
+
+  it('Clicks on hidden/unhidden secret key', async () => {
+    const user = userEvent.setup();
+    const mockOnClick = jest.fn();
+    const { getByRole, getByText } = render(
+      <StoryComponent onDelete={mockOnClick} />,
+    );
+
+    const invisibleIcon = getByRole('button', { name: 'Invisible' });
+    await user.click(invisibleIcon);
+    getByText('1234567890');
+
+    const visibleIcon = getByRole('button', { name: 'Visible' });
+    await user.click(visibleIcon);
+    getByText('******');
+  });
+});