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

package/src/components/TableFilters/styles.ts

@@ -1,26 +1,26 @@
-import { Theme, css } from '@emotion/react';
-
-export const tableFilterPopoverContentStyles = (theme: Theme) => css`
-  border: 1px solid ${theme.colors.greyDropdownMain};
-  border-radius: 20px;
-  padding: 20px 20px 14px 18px;
-  width: 340px;
-  background: ${theme.colors.white};
-`;
-
-export const tableFilterDividerStyles = (theme: Theme) => css`
-  border: 1px solid ${theme.colors.greyDropdownMain};
-  width: calc(100% + 38px);
-  margin: 22px auto 14px -19px;
-`;
-
-export const baseButtonStyle = css`
-  padding: 0 14px;
-  height: 38px;
-  border-radius: 5px;
-  font-size: 14px;
-  font-weight: 600;
-  &:hover {
-    box-shadow: none;
-  }
-`;
+import { Theme, css } from '@emotion/react';
+
+export const tableFilterPopoverContentStyles = (theme: Theme) => css`
+  border: 1px solid ${theme.colors.greyDropdownMain};
+  border-radius: 20px;
+  padding: 20px 20px 14px 18px;
+  width: 340px;
+  background: ${theme.colors.white};
+`;
+
+export const tableFilterDividerStyles = (theme: Theme) => css`
+  border: 1px solid ${theme.colors.greyDropdownMain};
+  width: calc(100% + 38px);
+  margin: 22px auto 14px -19px;
+`;
+
+export const baseButtonStyle = css`
+  padding: 0 14px;
+  height: 38px;
+  border-radius: 5px;
+  font-size: 14px;
+  font-weight: 600;
+  &:hover {
+    box-shadow: none;
+  }
+`;

package/src/components/TableFilters/types.ts

@@ -1,34 +1,34 @@
-export type CheckboxData = Record<string, string[]>;
-export type NotChangedData = Record<string, Record<string, boolean>>;
-
-export interface SingleItem {
-  key: string;
-  name: string;
-  isDisabled?: boolean;
-  content: {
-    statePath: string[];
-    text: string;
-  };
-}
-
-export interface AccordionInfo {
-  id: string;
-  title: string;
-  isOpened: boolean;
-  ariaControls: string;
-  isDisabled?: boolean;
-  items: Record<string, SingleItem>;
-  selectedItems: string[];
-  selectedItemsDraft?: string[];
-}
-
-export type TableFilterConfig = Record<string, AccordionInfo>;
-
-export interface TableFiltersView {
-  onReset?: () => void;
-  onClear?: () => void;
-  onSubmit?: () => void;
-  onCheckboxToggle?: (groupName: string, name: string) => void;
-  handleMoreButtonVisibleChange?: (isVisible: boolean) => void;
-  checkboxData?: TableFilterConfig;
-}
+export type CheckboxData = Record<string, string[]>;
+export type NotChangedData = Record<string, Record<string, boolean>>;
+
+export interface SingleItem {
+  key: string;
+  name: string;
+  isDisabled?: boolean;
+  content: {
+    statePath: string[];
+    text: string;
+  };
+}
+
+export interface AccordionInfo {
+  id: string;
+  title: string;
+  isOpened: boolean;
+  ariaControls: string;
+  isDisabled?: boolean;
+  items: Record<string, SingleItem>;
+  selectedItems: string[];
+  selectedItemsDraft?: string[];
+}
+
+export type TableFilterConfig = Record<string, AccordionInfo>;
+
+export interface TableFiltersView {
+  onReset?: () => void;
+  onClear?: () => void;
+  onSubmit?: () => void;
+  onCheckboxToggle?: (groupName: string, name: string) => void;
+  handleMoreButtonVisibleChange?: (isVisible: boolean) => void;
+  checkboxData?: TableFilterConfig;
+}

package/src/components/TableFilters/utils/handlers.ts

@@ -1,73 +1,73 @@
-import { assocPath, pathOr } from '@ssa-ui-kit/utils';
-import { TableFilterConfig } from '../types';
-
-export const getSubmitData = (checkboxData: TableFilterConfig) => {
-  let submitCheckboxData: TableFilterConfig = JSON.parse(
-    JSON.stringify(checkboxData),
-  );
-  const dataForSubmit: Record<string, string[]> = {};
-  Object.keys(submitCheckboxData).forEach((groupName) => {
-    submitCheckboxData = assocPath<TableFilterConfig>(
-      [groupName, 'selectedItems'],
-      submitCheckboxData[groupName]['selectedItemsDraft'],
-    )(submitCheckboxData);
-    dataForSubmit[groupName] = submitCheckboxData[groupName][
-      'selectedItemsDraft'
-    ] as string[];
-  });
-  return {
-    submitCheckboxData,
-    dataForSubmit,
-  };
-};
-
-export const getResetData = (checkboxData: TableFilterConfig) => {
-  let newData: TableFilterConfig = JSON.parse(JSON.stringify(checkboxData));
-  Object.keys(newData).forEach((groupName) => {
-    newData = assocPath<TableFilterConfig>(
-      [groupName, 'selectedItemsDraft'],
-      newData[groupName]['selectedItems'],
-    )(newData);
-  });
-  return newData;
-};
-
-export const getClearData = (checkboxData: TableFilterConfig) => {
-  let newData: TableFilterConfig = JSON.parse(JSON.stringify(checkboxData));
-  Object.keys(checkboxData).forEach((groupName) => {
-    const notChangedData: string[] = [];
-    const selectedItems = checkboxData[groupName].selectedItems;
-    const currentItems = checkboxData[groupName].items;
-    Object.keys(checkboxData[groupName].items).forEach((itemKey) => {
-      const itemInfo = currentItems[itemKey];
-      if (itemInfo.isDisabled && selectedItems.includes(itemInfo.name)) {
-        notChangedData.push(itemInfo.name);
-      }
-    });
-    newData = assocPath<TableFilterConfig>(
-      [groupName, 'selectedItemsDraft'],
-      notChangedData,
-    )(newData);
-  });
-  return newData;
-};
-
-export const getCheckboxChangedItems = (
-  checkboxData: TableFilterConfig,
-  groupName: string,
-  name: string | number,
-) => {
-  const draftPath = [groupName, 'selectedItemsDraft'];
-  const selectedItemsDraft = pathOr<TableFilterConfig, string[]>(
-    [],
-    draftPath,
-  )(checkboxData);
-  const newSelectedItems = selectedItemsDraft.includes(`${name}`)
-    ? selectedItemsDraft.filter((currentItemName) => currentItemName !== name)
-    : [...selectedItemsDraft, name];
-
-  return {
-    items: newSelectedItems,
-    path: draftPath,
-  };
-};
+import { assocPath, pathOr } from '@ssa-ui-kit/utils';
+import { TableFilterConfig } from '../types';
+
+export const getSubmitData = (checkboxData: TableFilterConfig) => {
+  let submitCheckboxData: TableFilterConfig = JSON.parse(
+    JSON.stringify(checkboxData),
+  );
+  const dataForSubmit: Record<string, string[]> = {};
+  Object.keys(submitCheckboxData).forEach((groupName) => {
+    submitCheckboxData = assocPath<TableFilterConfig>(
+      [groupName, 'selectedItems'],
+      submitCheckboxData[groupName]['selectedItemsDraft'],
+    )(submitCheckboxData);
+    dataForSubmit[groupName] = submitCheckboxData[groupName][
+      'selectedItemsDraft'
+    ] as string[];
+  });
+  return {
+    submitCheckboxData,
+    dataForSubmit,
+  };
+};
+
+export const getResetData = (checkboxData: TableFilterConfig) => {
+  let newData: TableFilterConfig = JSON.parse(JSON.stringify(checkboxData));
+  Object.keys(newData).forEach((groupName) => {
+    newData = assocPath<TableFilterConfig>(
+      [groupName, 'selectedItemsDraft'],
+      newData[groupName]['selectedItems'],
+    )(newData);
+  });
+  return newData;
+};
+
+export const getClearData = (checkboxData: TableFilterConfig) => {
+  let newData: TableFilterConfig = JSON.parse(JSON.stringify(checkboxData));
+  Object.keys(checkboxData).forEach((groupName) => {
+    const notChangedData: string[] = [];
+    const selectedItems = checkboxData[groupName].selectedItems;
+    const currentItems = checkboxData[groupName].items;
+    Object.keys(checkboxData[groupName].items).forEach((itemKey) => {
+      const itemInfo = currentItems[itemKey];
+      if (itemInfo.isDisabled && selectedItems.includes(itemInfo.name)) {
+        notChangedData.push(itemInfo.name);
+      }
+    });
+    newData = assocPath<TableFilterConfig>(
+      [groupName, 'selectedItemsDraft'],
+      notChangedData,
+    )(newData);
+  });
+  return newData;
+};
+
+export const getCheckboxChangedItems = (
+  checkboxData: TableFilterConfig,
+  groupName: string,
+  name: string | number,
+) => {
+  const draftPath = [groupName, 'selectedItemsDraft'];
+  const selectedItemsDraft = pathOr<TableFilterConfig, string[]>(
+    [],
+    draftPath,
+  )(checkboxData);
+  const newSelectedItems = selectedItemsDraft.includes(`${name}`)
+    ? selectedItemsDraft.filter((currentItemName) => currentItemName !== name)
+    : [...selectedItemsDraft, name];
+
+  return {
+    items: newSelectedItems,
+    path: draftPath,
+  };
+};

package/src/components/TradingInfoCard/TradingInfoCard.e2e.ts

@@ -1,16 +1,16 @@
-import { test } from '@playwright/test';
-import { SCREEN_SIZES } from '../../consts';
-
-const WIDGETS_CUSTOM_SHOTS_PATH = './custom-shots/';
-
-test('Widgets: Trading Info Card Hover', async ({ page }) => {
-  await page.setViewportSize(SCREEN_SIZES[1920]);
-  await page.goto(
-    'http://localhost:6007/iframe.html?args=&id=widgets-tradinginfocard--with-tooltip&viewMode=story',
-  );
-  await page.getByTestId('tooltip-trigger').hover();
-
-  await page.screenshot({
-    path: `${WIDGETS_CUSTOM_SHOTS_PATH}widgets-trading-info-card--hover__[w1920px].png`,
-  });
-});
+import { test } from '@playwright/test';
+import { SCREEN_SIZES } from '../../consts';
+
+const WIDGETS_CUSTOM_SHOTS_PATH = './custom-shots/';
+
+test('Widgets: Trading Info Card Hover', async ({ page }) => {
+  await page.setViewportSize(SCREEN_SIZES[1920]);
+  await page.goto(
+    'http://localhost:6007/iframe.html?args=&id=widgets-tradinginfocard--with-tooltip&viewMode=story',
+  );
+  await page.getByTestId('tooltip-trigger').hover();
+
+  await page.screenshot({
+    path: `${WIDGETS_CUSTOM_SHOTS_PATH}widgets-trading-info-card--hover__[w1920px].png`,
+  });
+});

package/src/components/TradingInfoCard/TradingInfoCard.spec.tsx

@@ -1,116 +1,116 @@
-import { MemoryRouter, Route, Routes } from 'react-router-dom';
-import userEvent from '@testing-library/user-event';
-import { screen, waitFor } from '../../../customTest';
-
-import { Icon } from '@ssa-ui-kit/core';
-import TradingInfoCard from './TradingInfoCard';
-
-describe('TradingInfoCard', () => {
-  it('Renders with value and title', () => {
-    render(<TradingInfoCard value={'400'} unit={'%'} title={'Title'} />);
-
-    screen.getByText('400');
-    screen.getByText('Title');
-  });
-
-  it('Renders with value, title, and unit', () => {
-    render(<TradingInfoCard value={'400'} unit={'%'} title={'Title'} />);
-
-    screen.getByText('400');
-    screen.getByText('%');
-    screen.getByText('Title');
-  });
-
-  it('Renders with value, title, unit, and icon', async () => {
-    render(
-      <TradingInfoCard
-        value={'400'}
-        unit={'%'}
-        title={'Title'}
-        icon={<Icon name="arrow-up" color="#2CA24D" size={16} />}
-      />,
-    );
-
-    screen.getByText('400');
-    screen.getByText('%');
-    screen.getByText('Title');
-
-    await screen.findByTitle(/Arrow Up/i);
-  });
-
-  it('Renders with an integer value (no tooltip)', async () => {
-    const { queryByTestId } = render(
-      <TradingInfoCard value={400} title={'Title'} />,
-    );
-
-    screen.getByText('400');
-    await waitFor(() =>
-      expect(queryByTestId('floating-arrow')).not.toBeInTheDocument(),
-    );
-  });
-
-  it('Renders with a non-numeric value (no tooltip)', async () => {
-    const { queryByTestId } = render(
-      <TradingInfoCard value={'Test'} title={'Title'} />,
-    );
-
-    screen.getByText('Test');
-    await waitFor(() =>
-      expect(queryByTestId('floating-arrow')).not.toBeInTheDocument(),
-    );
-  });
-
-  it('Renders with a numeric value (tooltip) ', async () => {
-    const user = userEvent.setup();
-    const { getByTestId, queryByTestId, findByTestId } = render(
-      <TradingInfoCard value={400.5} title={'Title'} />,
-    );
-
-    const tooltipEl = getByTestId('tooltip-trigger');
-
-    await user.hover(tooltipEl);
-    await findByTestId('floating-arrow');
-
-    await user.unhover(tooltipEl);
-    await waitFor(() =>
-      expect(queryByTestId('floating-arrow')).not.toBeInTheDocument(),
-    );
-  });
-
-  it('Calls onClick handler when clicked', async () => {
-    const user = userEvent.setup();
-    const mockOnClick = jest.fn();
-
-    const { getByRole } = render(
-      <TradingInfoCard
-        value={'400.500'}
-        title={'Title'}
-        onClick={mockOnClick}
-      />,
-    );
-
-    const button = getByRole('button');
-
-    await user.click(button);
-
-    expect(mockOnClick).toBeCalledTimes(1);
-    expect(button).toHaveAttribute('tabindex', '0');
-  });
-
-  it('Renders with link prop', () => {
-    const { getByRole } = render(
-      <MemoryRouter>
-        <Routes>
-          <Route
-            path="/*"
-            element={
-              <TradingInfoCard value={'5000'} title={'Test'} link={'/'} />
-            }
-          />
-        </Routes>
-      </MemoryRouter>,
-    );
-
-    expect(getByRole('link')).toHaveAttribute('href', '/');
-  });
-});
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import userEvent from '@testing-library/user-event';
+import { screen, waitFor } from '../../../customTest';
+
+import { Icon } from '@ssa-ui-kit/core';
+import TradingInfoCard from './TradingInfoCard';
+
+describe('TradingInfoCard', () => {
+  it('Renders with value and title', () => {
+    render(<TradingInfoCard value={'400'} unit={'%'} title={'Title'} />);
+
+    screen.getByText('400');
+    screen.getByText('Title');
+  });
+
+  it('Renders with value, title, and unit', () => {
+    render(<TradingInfoCard value={'400'} unit={'%'} title={'Title'} />);
+
+    screen.getByText('400');
+    screen.getByText('%');
+    screen.getByText('Title');
+  });
+
+  it('Renders with value, title, unit, and icon', async () => {
+    render(
+      <TradingInfoCard
+        value={'400'}
+        unit={'%'}
+        title={'Title'}
+        icon={<Icon name="arrow-up" color="#2CA24D" size={16} />}
+      />,
+    );
+
+    screen.getByText('400');
+    screen.getByText('%');
+    screen.getByText('Title');
+
+    await screen.findByTitle(/Arrow Up/i);
+  });
+
+  it('Renders with an integer value (no tooltip)', async () => {
+    const { queryByTestId } = render(
+      <TradingInfoCard value={400} title={'Title'} />,
+    );
+
+    screen.getByText('400');
+    await waitFor(() =>
+      expect(queryByTestId('floating-arrow')).not.toBeInTheDocument(),
+    );
+  });
+
+  it('Renders with a non-numeric value (no tooltip)', async () => {
+    const { queryByTestId } = render(
+      <TradingInfoCard value={'Test'} title={'Title'} />,
+    );
+
+    screen.getByText('Test');
+    await waitFor(() =>
+      expect(queryByTestId('floating-arrow')).not.toBeInTheDocument(),
+    );
+  });
+
+  it('Renders with a numeric value (tooltip) ', async () => {
+    const user = userEvent.setup();
+    const { getByTestId, queryByTestId, findByTestId } = render(
+      <TradingInfoCard value={400.5} title={'Title'} />,
+    );
+
+    const tooltipEl = getByTestId('tooltip-trigger');
+
+    await user.hover(tooltipEl);
+    await findByTestId('floating-arrow');
+
+    await user.unhover(tooltipEl);
+    await waitFor(() =>
+      expect(queryByTestId('floating-arrow')).not.toBeInTheDocument(),
+    );
+  });
+
+  it('Calls onClick handler when clicked', async () => {
+    const user = userEvent.setup();
+    const mockOnClick = jest.fn();
+
+    const { getByRole } = render(
+      <TradingInfoCard
+        value={'400.500'}
+        title={'Title'}
+        onClick={mockOnClick}
+      />,
+    );
+
+    const button = getByRole('button');
+
+    await user.click(button);
+
+    expect(mockOnClick).toBeCalledTimes(1);
+    expect(button).toHaveAttribute('tabindex', '0');
+  });
+
+  it('Renders with link prop', () => {
+    const { getByRole } = render(
+      <MemoryRouter>
+        <Routes>
+          <Route
+            path="/*"
+            element={
+              <TradingInfoCard value={'5000'} title={'Test'} link={'/'} />
+            }
+          />
+        </Routes>
+      </MemoryRouter>,
+    );
+
+    expect(getByRole('link')).toHaveAttribute('href', '/');
+  });
+});