@ssa-ui-kit/widgets 0.0.6-alpha → 0.0.8-alpha

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ssa-ui-kit/widgets",
-  "version": "0.0.6-alpha",
+  "version": "0.0.8-alpha",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "private": false,
@@ -29,9 +29,9 @@
     "js-tokens": "^4.0.0",
     "loose-envify": "^1.4.0",
     "scheduler": "^0.23.0",
-    "@ssa-ui-kit/core": "^0.0.5-alpha",
-    "@ssa-ui-kit/hooks": "^0.0.1-alpha",
-    "@ssa-ui-kit/utils": "^0.0.1-alpha"
+    "@ssa-ui-kit/core": "^0.0.6-alpha",
+    "@ssa-ui-kit/utils": "^0.0.1-alpha",
+    "@ssa-ui-kit/hooks": "^0.0.1-alpha"
   },
   "browserslist": [
     ">0.1%",

package/src/components/ExchangeAccount/styles.ts

@@ -1,7 +1,6 @@
 import { Theme, css } from '@emotion/react';
 
 export const CardBase = (theme: Theme) => css`
-  max-width: 500px;
   padding: 0;
   border-radius: 20px;
   box-shadow: 0px 10px 40px 0px ${theme.colors.greyShadow};

package/src/components/Filters/Filters.e2e.ts

@@ -23,19 +23,47 @@ test('Widgets: Filters should be opened correctly', async ({ page }) => {
 test('Widgets: Filters - More button should be shown', async ({ page }) => {
   await gotoPage(page);
   await page.setViewportSize(SCREEN_SIZES[900]);
-  await expect(page.getByText('More2')).toBeVisible();
+  const triggerButton = page.getByTestId('trigger-button');
+  const beforeContent = await triggerButton.evaluate((el) => {
+    return window.getComputedStyle(el, ':before').content;
+  });
+  await expect(beforeContent).toEqual('"More"');
+  const buttonText = await triggerButton.innerText();
+  await expect(buttonText).toEqual('2');
   const SCREENSHOT_PREFIX = `${WIDGETS_CUSTOM_SHOTS_PATH}widgets-filters--more-button__`;
   await page.screenshot({
     path: `${SCREENSHOT_PREFIX}[w900px].png`,
   });
 });
 
+test('Widgets: Filters - Filter button should be shown', async ({ page }) => {
+  await gotoPage(page);
+  await page.setViewportSize(SCREEN_SIZES[390]);
+  const triggerButton = page.getByTestId('trigger-button');
+  const beforeContent = await triggerButton.evaluate((el) => {
+    return window.getComputedStyle(el, ':before').content;
+  });
+  expect(beforeContent).toEqual('"Filter"');
+  const buttonText = await triggerButton.innerText();
+  expect(buttonText).toEqual('4');
+  const SCREENSHOT_PREFIX = `${WIDGETS_CUSTOM_SHOTS_PATH}widgets-filters--filter-button__`;
+  await page.screenshot({
+    path: `${SCREENSHOT_PREFIX}[w390px].png`,
+  });
+});
+
 test('Widgets: Filters - More button count notification should be changed', async ({
   page,
 }) => {
   await gotoPage(page);
   await page.setViewportSize(SCREEN_SIZES[900]);
-  await expect(page.getByText('More2')).toBeVisible();
+  let triggerButton = page.getByTestId('trigger-button');
+  let beforeContent = await triggerButton.evaluate((el) => {
+    return window.getComputedStyle(el, ':before').content;
+  });
+  expect(beforeContent).toEqual('"More"');
+  let buttonText = await triggerButton.innerText();
+  expect(buttonText).toEqual('2');
 
   await page.getByText('Status: Running').click();
   await page.getByRole('button', { name: 'Stopped' }).click();
@@ -43,5 +71,12 @@ test('Widgets: Filters - More button count notification should be changed', asyn
 
   await page.getByText('strategy #3Carrot down').click();
   await page.getByRole('button', { name: 'strategy #3 checkbox1' }).click();
-  await expect(page.getByText('More3')).toBeVisible();
+
+  triggerButton = page.getByTestId('trigger-button');
+  beforeContent = await triggerButton.evaluate((el) => {
+    return window.getComputedStyle(el, ':before').content;
+  });
+  expect(beforeContent).toEqual('"More"');
+  buttonText = await triggerButton.innerText();
+  expect(buttonText).toEqual('3');
 });

package/src/components/TableFilters/TableFilterTrigger.tsx

@@ -14,6 +14,17 @@ export const filterButtonStyles = (theme: Theme) => css`
   gap: 5px;
   user-select: none;
 
+  &::before {
+    display: block;
+    content: 'Filter';
+  }
+
+  @media screen and (min-width: 900px) {
+    &::before {
+      content: 'More';
+    }
+  }
+
   &:hover {
     border-color: ${theme.colors.greyDropdownFocused};
   }
@@ -28,10 +39,11 @@ export const filterButtonStyles = (theme: Theme) => css`
 `;
 
 export const TableFilterTrigger = ({
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   children,
   ...rest
 }: {
-  children: React.ReactNode;
+  children?: React.ReactNode;
   as?: string;
   className?: string;
 }) => {

package/src/components/TableFilters/TableFilterTriggerWithNotification.tsx

@@ -1,13 +1,13 @@
+import { Interpolation, Theme, useTheme } from '@emotion/react';
 import { MultipleDropdownNotification } from '@ssa-ui-kit/core';
 import { TableFilterTrigger } from './TableFilterTrigger';
-import { Interpolation, Theme, useTheme } from '@emotion/react';
 
 export const TableFilterTriggerWithNotification = ({
   children,
   count,
   visible = true,
 }: {
-  children: React.ReactNode;
+  children?: React.ReactNode;
   count?: number;
   visible?: boolean;
 }) => {

package/src/components/TableFilters/TableFilters.e2e.ts

@@ -13,13 +13,17 @@ const gotoPage = (page: Page) => {
 test.describe('Widgets: TableFilters', () => {
   test('Renders correctly', async ({ page }) => {
     await gotoPage(page);
-    await expect(page.getByText('More')).toBeVisible();
+    const triggerButton = page.getByTestId('trigger-button');
+    const beforeContent = await triggerButton.evaluate((el) => {
+      return window.getComputedStyle(el, ':before').content;
+    });
+    expect(beforeContent).toEqual('"More"');
   });
 
   test('Opens popover', async ({ page }) => {
     await page.setViewportSize(SCREEN_SIZES[1920]);
     await gotoPage(page);
-    await page.getByText('More').click();
+    await page.getByTestId('trigger-button').click();
 
     await page.screenshot({
       path: `${SCREENSHOT_PREFIX}[w1920px].png`,

package/src/components/TableFilters/TableFilters.tsx

@@ -118,9 +118,8 @@ export const TableFilters = ({
       }}>
       <TableFilterTriggerWithNotification
         count={selectedGroupsCount}
-        visible={isMoreButtonVisible}>
-        More
-      </TableFilterTriggerWithNotification>
+        visible={isMoreButtonVisible}
+      />
       <PopoverContent className="popover" css={tableFilterPopoverContentStyles}>
         <form
           onSubmit={handleSubmit}

package/src/components/TableFilters/hooks/useTableData.ts

@@ -68,7 +68,7 @@ export const useTableData = ({
 
   useEffect(() => {
     proceedSettingCheckboxData(updatedCheckboxData);
-  }, [updatedCheckboxData]);
+  }, [JSON.stringify(updatedCheckboxData)]);
 
   const onCheckboxToggle = (groupName: string, name: string | number) => {
     const { items, path } = getCheckboxChangedItems(