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

package/package.json

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

package/src/components/CollapsibleNavBar/CollapsibleNavBarBase.ts

@@ -35,12 +35,13 @@ const CollapsibleNavBarBase = styled(NavBarBase)`
   }
 
   &:has(> input[type='checkbox']:checked) {
-    position: static;
     background: linear-gradient(
       108.3deg,
       ${({ theme }) => theme.colors.greyDarker} -0.36%,
       ${({ theme }) => theme.colors.greyDarker} 100%
     );
+    min-width: 100%;
+    width: 100%;
     height: 100%;
   }
 
@@ -66,7 +67,7 @@ const CollapsibleNavBarBase = styled(NavBarBase)`
       }
 
       & ~ div:nth-of-type(2) {
-        opacity: 1;
+        display: block;
         border-radius: 12px 12px 0 0;
         height: calc(100vh - 60px);
 
@@ -81,7 +82,10 @@ const CollapsibleNavBarBase = styled(NavBarBase)`
   ${({ theme }) => theme.mediaQueries.md} {
     width: 85px;
     padding: 0;
-    height: 100%;
+    position: static;
+    z-index: 0;
+    height: auto;
+
     & li {
       ${staticIconsToggle(false)}
       ${popupIconsToggle(true)}

package/src/components/CollapsibleNavBar/CollapsibleNavBarWrapper.ts

@@ -4,17 +4,18 @@ import NavBarWrapper from '@components/NavBar/NavBarWrapper';
 const CollapsibleNavBarWrapper = styled(NavBarWrapper)`
   transform: none;
   transition: unset;
+  position: static;
 
-  opacity: 0;
+  display: none;
   width: 100%;
+
   ${({ theme }) => theme.mediaQueries.md} {
     display: flex;
     flex-direction: column;
     align-items: center;
-    opacity: 1;
     height: 100%;
+    min-height: 100vh;
     width: 85px;
-    top: auto;
     border-radius: 0;
     padding-top: 35px;
   }

package/src/components/CollapsibleNavBar/NavBarPopover.tsx

@@ -64,6 +64,7 @@ export const CollapsibleNavBarPopover = ({
           [theme.mediaQueries.md]: {
             display: 'block',
           },
+          zIndex: 2,
         }}>
         <PopoverHeading
           css={{

package/src/components/CollapsibleNavBar/stories/CollapsibleNavBar.stories.tsx

@@ -7,6 +7,7 @@ import { DecoratorFunction } from '@storybook/types';
 import { CollapsibleNavBar } from '../CollapsibleNavBar';
 import { ITEMS } from './consts';
 import { Logo } from './Logo';
+import { Layout } from './Layout';
 
 type Args = Parameters<typeof CollapsibleNavBar>[0];
 
@@ -42,12 +43,7 @@ export default {
       ),
     },
   },
-  decorators: [
-    reactRouterDecorator,
-    (Story) => (
-      <div style={{ height: '100vh', position: 'relative' }}>{Story()}</div>
-    ),
-  ],
+  decorators: [reactRouterDecorator, (Story) => <Layout>{Story()}</Layout>],
   args: {
     items: ITEMS,
     renderLogo: <Logo />,

package/src/components/CollapsibleNavBar/stories/Layout.tsx

@@ -0,0 +1,53 @@
+import styled from '@emotion/styled';
+import { NotificationCard } from '@components/NotificationCard';
+
+const Main = styled.main`
+  background: linear-gradient(
+      143deg,
+      #e7ebf1 -4.16%,
+      #d7d9dd 39.37%,
+      #cccdd2 52.66%,
+      #e1e4ea 87.68%
+    ),
+    #f8f9fb;
+  width: 100%;
+  padding: 60px 10px 10px 15px;
+
+  ${({ theme }) => theme.mediaQueries.md} {
+    padding: 10px 21px 10px 35px;
+  }
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    padding: 10px 49px 10px 36px;
+  }
+
+  ${({ theme }) => theme.mediaQueries.xlg} {
+    padding: 10px 60px 10px 62px;
+  }
+`;
+export const Layout = ({ children }: { children: React.ReactNode }) => {
+  /* cSpell:disable */
+  return (
+    <div
+      css={{
+        display: 'flex',
+        minHeight: '100vh',
+        position: 'relative',
+      }}>
+      {children}
+      <Main>
+        {new Array(100).fill(1).map((_, index) => (
+          <NotificationCard
+            key={index}
+            title="CyberVeinToken is Now Available"
+            text="With our newest listing, we’re welcoming Wrapped"
+            isRead={false}
+            type="Informational"
+            time={Date.now()}
+          />
+        ))}
+      </Main>
+    </div>
+  );
+  /* cSpell:enable */
+};

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

@@ -36,17 +36,19 @@ test('Widgets: Filters - More button should be shown', async ({ page }) => {
   });
 });
 
-test('Widgets: Filters - Filter button should be shown', async ({ page }) => {
+test('Widgets: Filters - More button should be shown when items selected', 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"');
+  expect(beforeContent).toEqual('"More"');
   const buttonText = await triggerButton.innerText();
   expect(buttonText).toEqual('4');
-  const SCREENSHOT_PREFIX = `${WIDGETS_CUSTOM_SHOTS_PATH}widgets-filters--filter-button__`;
+  const SCREENSHOT_PREFIX = `${WIDGETS_CUSTOM_SHOTS_PATH}widgets-filters--more-button-items-selected__`;
   await page.screenshot({
     path: `${SCREENSHOT_PREFIX}[w390px].png`,
   });
@@ -57,7 +59,7 @@ test('Widgets: Filters - More button count notification should be changed', asyn
 }) => {
   await gotoPage(page);
   await page.setViewportSize(SCREEN_SIZES[900]);
-  let triggerButton = page.getByTestId('trigger-button');
+  let triggerButton = await page.getByTestId('trigger-button');
   let beforeContent = await triggerButton.evaluate((el) => {
     return window.getComputedStyle(el, ':before').content;
   });
@@ -80,3 +82,34 @@ test('Widgets: Filters - More button count notification should be changed', asyn
   buttonText = await triggerButton.innerText();
   expect(buttonText).toEqual('3');
 });
+
+test('Widgets: Filters - Filter button should be shown when items not selected', async ({
+  page,
+}) => {
+  await page.goto(
+    'http://localhost:6007/iframe.html?args=&id=widgets-filters--all-items-enabled&viewMode=story',
+  );
+  await page.setViewportSize(SCREEN_SIZES[390]);
+  const triggerButton = page.getByTestId('trigger-button');
+  let beforeContent = await triggerButton.evaluate((el) => {
+    return window.getComputedStyle(el, ':before').content;
+  });
+  expect(beforeContent).toEqual('"More"');
+  const buttonText = await triggerButton.innerText();
+  expect(buttonText).toEqual('1');
+
+  await page.getByTestId('trigger-button').click();
+  /* cSpell:disable */
+  await page.locator('label').filter({ hasText: 'Checkcheckbox1' }).click();
+  await page.locator('label').filter({ hasText: 'Checkcheckbox4' }).click();
+
+  beforeContent = await triggerButton.evaluate((el) => {
+    return window.getComputedStyle(el, ':before').content;
+  });
+  expect(beforeContent).toEqual('"Filter"');
+
+  const SCREENSHOT_PREFIX = `${WIDGETS_CUSTOM_SHOTS_PATH}widgets-filters--filter-button-items-not-selected__`;
+  await page.screenshot({
+    path: `${SCREENSHOT_PREFIX}[w390px].png`,
+  });
+});

package/src/components/Filters/FiltersWrapper.tsx

@@ -8,6 +8,10 @@ export const FiltersWrapper = styled.div<{ isMoreButtonVisible?: boolean }>`
   flex-direction: ${({ isMoreButtonVisible }) =>
     isMoreButtonVisible ? 'row' : 'row-reverse'};
 
+  & button {
+    height: 30px;
+  }
+
   & > div:first-of-type > div:last-child {
     margin-right: ${({ isMoreButtonVisible }) =>
       isMoreButtonVisible ? '10px' : 0};
@@ -15,4 +19,16 @@ export const FiltersWrapper = styled.div<{ isMoreButtonVisible?: boolean }>`
       right: ${({ isMoreButtonVisible }) => (isMoreButtonVisible ? 'auto' : 0)};
     }
   }
+
+  ${({ theme }) => theme.mediaQueries.md} {
+    & button {
+      height: 36px;
+    }
+  }
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    & button {
+      height: 40px;
+    }
+  }
 `;

package/src/components/Filters/stories/Filters.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { StoryComponent } from './StoryComponent';
 import { Filters } from '..';
+import { mockDataEnabled } from './mockData';
 
 type FiltersType = typeof Filters;
 
@@ -15,3 +16,9 @@ export const Default: StoryObj<FiltersType> = () => {
 };
 
 Default.args = {};
+
+export const AllItemsEnabled: StoryObj<FiltersType> = () => {
+  return <StoryComponent data={mockDataEnabled} />;
+};
+
+AllItemsEnabled.args = {};

package/src/components/Filters/stories/StoryComponent.tsx

@@ -1,7 +1,7 @@
 import { mockData } from './mockData';
 import { Filters } from '..';
 
-export const StoryComponent = () => {
+export const StoryComponent = ({ data = mockData }) => {
   const handleSubmit = (submitData: Record<string, string[]>) => {
     console.log('>>>Filters onSubmit', submitData);
   };
@@ -13,7 +13,7 @@ export const StoryComponent = () => {
         alignItems: 'center',
         justifyContent: 'center',
       }}>
-      <Filters handleSubmit={handleSubmit} checkboxData={mockData} />
+      <Filters handleSubmit={handleSubmit} checkboxData={data} />
     </div>
   );
 };

package/src/components/Filters/stories/mockData.ts

@@ -210,3 +210,212 @@ export const mockData: TableFilterConfig = {
     },
   },
 };
+
+export const mockDataEnabled: TableFilterConfig = {
+  strategy: {
+    id: 'strategy',
+    title: 'Strategy',
+    isOpened: true,
+    ariaControls: 'strategy-panel',
+    selectedItems: ['checkbox1', 'checkbox4'],
+    items: {
+      checkbox1: {
+        key: 'strategy-checkbox1',
+        name: 'checkbox1',
+        content: {
+          statePath: ['strategy', 'items', 'checkbox1'],
+          text: 'checkbox1',
+        },
+      },
+      checkbox2: {
+        key: 'strategy-checkbox2',
+        name: 'checkbox2',
+        content: {
+          statePath: ['strategy', 'items', 'checkbox2'],
+          text: 'checkbox2',
+        },
+      },
+      checkbox3: {
+        key: 'strategy-checkbox3',
+        name: 'checkbox3',
+        content: {
+          statePath: ['strategy', 'items', 'checkbox3'],
+          text: 'checkbox3',
+        },
+      },
+      checkbox4: {
+        key: 'strategy-checkbox4',
+        name: 'checkbox4',
+        content: {
+          statePath: ['strategy', 'items', 'checkbox4'],
+          text: 'checkbox4',
+        },
+      },
+      checkbox5: {
+        key: 'strategy-checkbox5',
+        name: 'checkbox5',
+        content: {
+          statePath: ['strategy', 'items', 'checkbox5'],
+          text: 'checkbox5',
+        },
+      },
+    },
+  },
+  strategy2: {
+    id: 'strategy2',
+    title: 'Strategy #2',
+    isOpened: false,
+    ariaControls: 'strategy2-panel',
+    selectedItems: [],
+    items: {
+      strategy2Checkbox1: {
+        key: 'strategy2-checkbox1',
+        name: 'strategy2Checkbox1',
+        content: {
+          statePath: ['strategy', 'items', 'strategy2Checkbox1'],
+          text: 'strategy #2 checkbox1',
+        },
+      },
+      strategy2Checkbox2: {
+        key: 'strategy2-checkbox2',
+        name: 'strategy2Checkbox2',
+        content: {
+          statePath: ['strategy', 'items', 'strategy2Checkbox2'],
+          text: 'strategy #2 checkbox2',
+        },
+      },
+      strategy2Checkbox3: {
+        key: 'strategy2-checkbox3',
+        name: 'strategy2Checkbox3',
+        content: {
+          statePath: ['strategy', 'items', 'strategy2Checkbox3'],
+          text: 'strategy #2 checkbox3',
+        },
+      },
+      strategy2Checkbox4: {
+        key: 'strategy2-checkbox4',
+        name: 'strategy2Checkbox4',
+        content: {
+          statePath: ['strategy', 'items', 'strategy2Checkbox4'],
+          text: 'strategy #2 checkbox4',
+        },
+      },
+      strategy2Checkbox5: {
+        key: 'strategy2-checkbox5',
+        name: 'strategy2Checkbox5',
+        content: {
+          statePath: ['strategy', 'items', 'strategy2Checkbox5'],
+          text: 'strategy #2 checkbox5',
+        },
+      },
+    },
+  },
+  strategy3: {
+    id: 'strategy3',
+    title: 'Strategy #3',
+    isOpened: false,
+    ariaControls: 'strategy3-panel',
+    selectedItems: [],
+    items: {
+      strategy3Checkbox1: {
+        key: 'strategy3-checkbox1',
+        name: 'strategy3Checkbox1',
+        content: {
+          statePath: ['strategy', 'items', 'strategy3Checkbox1'],
+          text: 'strategy #3 checkbox1',
+        },
+      },
+      strategy3Checkbox2: {
+        key: 'strategy3-checkbox2',
+        name: 'strategy3Checkbox2',
+        content: {
+          statePath: ['strategy', 'items', 'strategy3Checkbox2'],
+          text: 'strategy #3 checkbox2',
+        },
+      },
+      strategy3Checkbox3: {
+        key: 'strategy3-checkbox3',
+        name: 'strategy3Checkbox3',
+        content: {
+          statePath: ['strategy', 'items', 'strategy3Checkbox3'],
+          text: 'strategy #3 checkbox3',
+        },
+      },
+      strategy3Checkbox4: {
+        key: 'strategy3-checkbox4',
+        name: 'strategy3Checkbox4',
+        content: {
+          statePath: ['strategy', 'items', 'strategy3Checkbox4'],
+          text: 'strategy #3 checkbox4',
+        },
+      },
+      strategy3Checkbox5: {
+        key: 'strategy3-checkbox5',
+        name: 'strategy3Checkbox5',
+        content: {
+          statePath: ['strategy', 'items', 'strategy3Checkbox5'],
+          text: 'strategy #3 checkbox5',
+        },
+      },
+    },
+  },
+  status: {
+    id: 'status',
+    title: 'Status',
+    isOpened: false,
+    ariaControls: 'status-panel',
+    selectedItems: [],
+    items: {
+      running: {
+        key: 'status-checkbox-running',
+        name: 'running',
+        content: {
+          statePath: ['status', 'items', 'running'],
+          text: 'Running',
+        },
+      },
+      stopped: {
+        key: 'status-checkbox-stopped',
+        name: 'stopped',
+        content: {
+          statePath: ['status', 'items', 'stopped'],
+          text: 'Stopped',
+        },
+      },
+    },
+  },
+  pairs: {
+    id: 'pairs',
+    title: 'Pairs',
+    isOpened: false,
+    ariaControls: 'pairs-panel',
+    selectedItems: [],
+    items: {
+      btcfdusd: {
+        key: 'btcfdusd',
+        name: 'btcfdusd',
+        content: {
+          statePath: ['pairs', 'items', 'btcfdusd'],
+          text: 'BTC-FDUSD',
+        },
+      },
+    },
+  },
+  exchange: {
+    id: 'exchange',
+    title: 'Exchange',
+    isOpened: false,
+    ariaControls: 'exchange-panel',
+    selectedItems: [],
+    items: {
+      binance: {
+        key: 'binance',
+        name: 'binance',
+        content: {
+          statePath: ['exchange', 'items', 'binance'],
+          text: 'Binance',
+        },
+      },
+    },
+  },
+};

package/src/components/SearchBox/SearchBoxInput.tsx

@@ -2,11 +2,13 @@ import styled from '@emotion/styled';
 import { Input } from '@ssa-ui-kit/core';
 
 export const SearchBoxInput = styled(Input)`
-  height: 40px;
+  height: 30px;
+  font-size: 12px;
   border-radius: 5px;
   background-color: ${({ theme }) => theme.colors.greyLighter};
   border: 1px solid #dee0e8;
   color: ${({ theme }) => theme.colors.greyDarker};
+  padding-right: 20px;
   &::placeholder {
     color: #55575a;
     font-weight: 500;
@@ -15,6 +17,26 @@ export const SearchBoxInput = styled(Input)`
     border: ${({ theme }) => `1px solid ${theme.colors.greyDropdownFocused}`};
   }
   & + div {
-    right: 23px;
+    right: 11px;
+    & svg {
+      width: 12px;
+      height: 12px;
+    }
+  }
+  ${({ theme }) => theme.mediaQueries.md} {
+    height: 36px;
+    font-size: 14px;
+    padding-right: 40px;
+    & + div {
+      right: 23px;
+      & svg {
+        width: 15px;
+        height: 15px;
+      }
+    }
+  }
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    height: 40px;
   }
 `;

package/src/components/SearchBox/SearchBoxWrapper.tsx

@@ -1,6 +1,9 @@
 import styled from '@emotion/styled';
 
 export const SearchBoxWrapper = styled.div`
-  width: 180px;
-  height: 40px;
+  width: 139px;
+
+  ${({ theme }) => theme.mediaQueries.md} {
+    width: 180px;
+  }
 `;

package/src/components/TableFilters/TableFilterTrigger.tsx

@@ -2,48 +2,52 @@ import { css, useTheme } from '@emotion/react';
 import { PopoverTrigger, Icon } from '@ssa-ui-kit/core';
 import { Theme } from '@emotion/react';
 
-export const filterButtonStyles = (theme: Theme) => css`
-  height: 40px;
-  color: ${theme.colors.greyDisabled};
-  background: ${theme.colors.white};
-  border: 1px solid ${theme.colors.greyDropdownMain};
-  border-radius: 6.5px;
-  padding: 0 11px 0 13px;
-  font-size: 14px;
-  letter-spacing: normal;
-  gap: 5px;
-  user-select: none;
+export const filterButtonStyles = (count?: number) => (theme: Theme) =>
+  css`
+    height: 40px;
+    color: ${theme.colors.greyDisabled};
+    background: ${theme.colors.white};
+    border: 1px solid ${theme.colors.greyDropdownMain};
+    border-radius: 6.5px;
+    padding: 0 11px 0 13px;
+    font-size: 14px;
+    letter-spacing: normal;
+    gap: 5px;
+    user-select: none;
 
-  &::before {
-    display: block;
-    content: 'Filter';
-  }
-
-  @media screen and (min-width: 900px) {
     &::before {
-      content: 'More';
+      display: block;
+      content: '"Filter"';
+      content: ${count ? '"More"' : '"Filter"'};
     }
-  }
 
-  &:hover {
-    border-color: ${theme.colors.greyDropdownFocused};
-  }
+    @media screen and (min-width: 900px) {
+      &::before {
+        content: 'More';
+      }
+    }
 
-  &:active {
-    border-color: ${theme.colors.blueNotification};
-  }
+    &:hover {
+      border-color: ${theme.colors.greyDropdownFocused};
+    }
 
-  &:disabled {
-    background: ${theme.colors.grey};
-  }
-`;
+    &:active {
+      border-color: ${theme.colors.blueNotification};
+    }
+
+    &:disabled {
+      background: ${theme.colors.grey};
+    }
+  `;
 
 export const TableFilterTrigger = ({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   children,
+  count,
   ...rest
 }: {
   children?: React.ReactNode;
+  count?: number;
   as?: string;
   className?: string;
 }) => {
@@ -51,7 +55,7 @@ export const TableFilterTrigger = ({
   return (
     <PopoverTrigger
       variant="custom"
-      css={filterButtonStyles}
+      css={filterButtonStyles(count)}
       endIcon={
         <Icon name="filter" color={theme.colors.greyFilterIcon} size={20} />
       }

package/src/components/TableFilters/TableFilterTriggerWithNotification.tsx

@@ -20,7 +20,7 @@ export const TableFilterTriggerWithNotification = ({
     css.borderColor = theme.colors.blueDropdownWithSelectedItemsBorder;
   }
   return (
-    <TableFilterTrigger css={css}>
+    <TableFilterTrigger css={css} count={count}>
       {children}
       {count ? (
         <MultipleDropdownNotification