@ssa-ui-kit/widgets 0.0.13-alpha → 0.0.15-alpha

package/src/components/TableFilters/TableFilterCancelButton.tsx

@@ -1,39 +1,39 @@
-import { PopoverClose } from '@ssa-ui-kit/core';
-import { Theme, css, useTheme } from '@emotion/react';
-import { baseButtonStyle } from './styles';
-
-export const cancelButtonStyles = (theme: Theme) => css`
-  ${baseButtonStyle}
-  color: ${theme.colors.greyCancelClearButton};
-  background: ${theme.colors.white};
-  border: 1px solid ${theme.colors.greyDropdownMain};
-  justify-content: center;
-
-  &:hover {
-    border-color: ${theme.colors.greyDropdownFocused};
-  }
-
-  &:active {
-    border-color: ${theme.colors.blueNotification};
-  }
-
-  &:disabled {
-    background: ${theme.colors.grey};
-    color: ${theme.colors.greyFilterIcon};
-  }
-`;
-
-export const TableFiltersCancelButton = ({
-  children,
-  onClick,
-}: {
-  children: React.ReactNode;
-  onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
-}) => {
-  const theme = useTheme();
-  return (
-    <PopoverClose css={cancelButtonStyles(theme)} onClick={onClick}>
-      {children}
-    </PopoverClose>
-  );
-};
+import { PopoverClose } from '@ssa-ui-kit/core';
+import { Theme, css, useTheme } from '@emotion/react';
+import { baseButtonStyle } from './styles';
+
+export const cancelButtonStyles = (theme: Theme) => css`
+  ${baseButtonStyle}
+  color: ${theme.colors.greyCancelClearButton};
+  background: ${theme.colors.white};
+  border: 1px solid ${theme.colors.greyDropdownMain};
+  justify-content: center;
+
+  &:hover {
+    border-color: ${theme.colors.greyDropdownFocused};
+  }
+
+  &:active {
+    border-color: ${theme.colors.blueNotification};
+  }
+
+  &:disabled {
+    background: ${theme.colors.grey};
+    color: ${theme.colors.greyFilterIcon};
+  }
+`;
+
+export const TableFiltersCancelButton = ({
+  children,
+  onClick,
+}: {
+  children: React.ReactNode;
+  onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
+}) => {
+  const theme = useTheme();
+  return (
+    <PopoverClose css={cancelButtonStyles(theme)} onClick={onClick}>
+      {children}
+    </PopoverClose>
+  );
+};

package/src/components/TableFilters/TableFilterCheckbox.tsx

@@ -1,24 +1,24 @@
-import { ICheckboxProps, Checkbox, checkboxStyles } from '@ssa-ui-kit/core';
-import { Theme, css, useTheme } from '@emotion/react';
-
-const getStyles = (theme: Theme) => css`
-  margin: 0 0 14px;
-  & span {
-    margin-left: 16px;
-    color: ${theme.colors.greyDisabled};
-    user-select: none;
-  }
-  & input + div {
-    border-radius: 2px;
-    &::before {
-      border-radius: 2px;
-    }
-  }
-  ${checkboxStyles.blueInput(theme)}
-`;
-
-export const TableFilterCheckbox = (props: ICheckboxProps) => {
-  const theme = useTheme();
-  const styles = getStyles(theme);
-  return <Checkbox {...props} css={styles} />;
-};
+import { ICheckboxProps, Checkbox, checkboxStyles } from '@ssa-ui-kit/core';
+import { Theme, css, useTheme } from '@emotion/react';
+
+const getStyles = (theme: Theme) => css`
+  margin: 0 0 14px;
+  & span {
+    margin-left: 16px;
+    color: ${theme.colors.greyDisabled};
+    user-select: none;
+  }
+  & input + div {
+    border-radius: 2px;
+    &::before {
+      border-radius: 2px;
+    }
+  }
+  ${checkboxStyles.blueInput(theme)}
+`;
+
+export const TableFilterCheckbox = (props: ICheckboxProps) => {
+  const theme = useTheme();
+  const styles = getStyles(theme);
+  return <Checkbox {...props} css={styles} />;
+};

package/src/components/TableFilters/TableFilterClearButton.tsx

@@ -1,47 +1,47 @@
-import { Button } from '@ssa-ui-kit/core';
-import { Theme, css, useTheme } from '@emotion/react';
-import { baseButtonStyle } from './styles';
-
-export const clearButtonStyles = (theme: Theme) => css`
-  ${baseButtonStyle}
-  color: ${theme.colors.greyCancelClearButton};
-  background: ${theme.colors.greyLighter};
-  border: 1px solid ${theme.colors.greyDropdownMain};
-  justify-content: center;
-
-  &:hover {
-    border-color: ${theme.colors.greyDropdownFocused};
-    background: ${theme.colors.greyLighter};
-  }
-
-  &:active {
-    border-color: ${theme.colors.greyDropdownFocused};
-    background: ${theme.colors.greyLighter};
-  }
-
-  &:disabled {
-    background: ${theme.colors.grey};
-    color: ${theme.colors.greyFilterIcon};
-  }
-`;
-
-export const TableFiltersClearButton = ({
-  children,
-  onClick,
-}: {
-  children: React.ReactNode;
-  onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
-}) => {
-  const theme = useTheme();
-  return (
-    <Button
-      css={{
-        ...baseButtonStyle,
-        ...clearButtonStyles(theme),
-      }}
-      variant="secondary"
-      onClick={onClick}>
-      {children}
-    </Button>
-  );
-};
+import { Button } from '@ssa-ui-kit/core';
+import { Theme, css, useTheme } from '@emotion/react';
+import { baseButtonStyle } from './styles';
+
+export const clearButtonStyles = (theme: Theme) => css`
+  ${baseButtonStyle}
+  color: ${theme.colors.greyCancelClearButton};
+  background: ${theme.colors.greyLighter};
+  border: 1px solid ${theme.colors.greyDropdownMain};
+  justify-content: center;
+
+  &:hover {
+    border-color: ${theme.colors.greyDropdownFocused};
+    background: ${theme.colors.greyLighter};
+  }
+
+  &:active {
+    border-color: ${theme.colors.greyDropdownFocused};
+    background: ${theme.colors.greyLighter};
+  }
+
+  &:disabled {
+    background: ${theme.colors.grey};
+    color: ${theme.colors.greyFilterIcon};
+  }
+`;
+
+export const TableFiltersClearButton = ({
+  children,
+  onClick,
+}: {
+  children: React.ReactNode;
+  onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
+}) => {
+  const theme = useTheme();
+  return (
+    <Button
+      css={{
+        ...baseButtonStyle,
+        ...clearButtonStyles(theme),
+      }}
+      variant="secondary"
+      onClick={onClick}>
+      {children}
+    </Button>
+  );
+};

package/src/components/TableFilters/TableFilterTrigger.tsx

@@ -1,66 +1,66 @@
-import { css, useTheme } from '@emotion/react';
-import { PopoverTrigger, Icon } from '@ssa-ui-kit/core';
-import { Theme } from '@emotion/react';
-
-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"';
-      content: ${count ? '"More"' : '"Filter"'};
-    }
-
-    @media screen and (min-width: 900px) {
-      &::before {
-        content: 'More';
-      }
-    }
-
-    &:hover {
-      border-color: ${theme.colors.greyDropdownFocused};
-    }
-
-    &: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;
-}) => {
-  const theme = useTheme();
-  return (
-    <PopoverTrigger
-      variant="custom"
-      css={filterButtonStyles(count)}
-      endIcon={
-        <Icon name="filter" color={theme.colors.greyFilterIcon} size={20} />
-      }
-      {...rest}>
-      {children}
-    </PopoverTrigger>
-  );
-};
+import { css, useTheme } from '@emotion/react';
+import { PopoverTrigger, Icon } from '@ssa-ui-kit/core';
+import { Theme } from '@emotion/react';
+
+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"';
+      content: ${count ? '"More"' : '"Filter"'};
+    }
+
+    @media screen and (min-width: 900px) {
+      &::before {
+        content: 'More';
+      }
+    }
+
+    &:hover {
+      border-color: ${theme.colors.greyDropdownFocused};
+    }
+
+    &: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;
+}) => {
+  const theme = useTheme();
+  return (
+    <PopoverTrigger
+      variant="custom"
+      css={filterButtonStyles(count)}
+      endIcon={
+        <Icon name="filter" color={theme.colors.greyFilterIcon} size={20} />
+      }
+      {...rest}>
+      {children}
+    </PopoverTrigger>
+  );
+};

package/src/components/TableFilters/TableFilterTriggerWithNotification.tsx

@@ -1,44 +1,44 @@
-import { Interpolation, Theme, useTheme } from '@emotion/react';
-import { MultipleDropdownNotification } from '@ssa-ui-kit/core';
-import { TableFilterTrigger } from './TableFilterTrigger';
-
-export const TableFilterTriggerWithNotification = ({
-  children,
-  count,
-  visible = true,
-}: {
-  children?: React.ReactNode;
-  count?: number;
-  visible?: boolean;
-}) => {
-  const theme = useTheme();
-  const css: Interpolation<Theme> = {
-    display: visible ? 'flex' : 'none',
-  };
-  if (count) {
-    css.background = theme.colors.blueDropdownWithSelectedItems;
-    css.borderColor = theme.colors.blueDropdownWithSelectedItemsBorder;
-  }
-  return (
-    <TableFilterTrigger css={css} count={count}>
-      {children}
-      {count ? (
-        <MultipleDropdownNotification
-          as={'div'}
-          css={{
-            width: 16,
-            height: 16,
-            minWidth: 16,
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-          }}
-          data-testid={'trigger-notification'}>
-          {count}
-        </MultipleDropdownNotification>
-      ) : (
-        ''
-      )}
-    </TableFilterTrigger>
-  );
-};
+import { Interpolation, Theme, useTheme } from '@emotion/react';
+import { MultipleDropdownNotification } from '@ssa-ui-kit/core';
+import { TableFilterTrigger } from './TableFilterTrigger';
+
+export const TableFilterTriggerWithNotification = ({
+  children,
+  count,
+  visible = true,
+}: {
+  children?: React.ReactNode;
+  count?: number;
+  visible?: boolean;
+}) => {
+  const theme = useTheme();
+  const css: Interpolation<Theme> = {
+    display: visible ? 'flex' : 'none',
+  };
+  if (count) {
+    css.background = theme.colors.blueDropdownWithSelectedItems;
+    css.borderColor = theme.colors.blueDropdownWithSelectedItemsBorder;
+  }
+  return (
+    <TableFilterTrigger css={css} count={count}>
+      {children}
+      {count ? (
+        <MultipleDropdownNotification
+          as={'div'}
+          css={{
+            width: 16,
+            height: 16,
+            minWidth: 16,
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+          }}
+          data-testid={'trigger-notification'}>
+          {count}
+        </MultipleDropdownNotification>
+      ) : (
+        ''
+      )}
+    </TableFilterTrigger>
+  );
+};

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

@@ -1,32 +1,32 @@
-import { test, expect, Page } from '@playwright/test';
-import { SCREEN_SIZES } from '../../consts';
-
-const WIDGETS_CUSTOM_SHOTS_PATH = './custom-shots/';
-const SCREENSHOT_PREFIX = `${WIDGETS_CUSTOM_SHOTS_PATH}widgets-table-filters--opened__`;
-
-const gotoPage = (page: Page) => {
-  return page.goto(
-    'http://localhost:6007/iframe.html?args=&id=widgets-tablefilters--default&viewMode=story',
-  );
-};
-
-test.describe('Widgets: TableFilters', () => {
-  test('Renders correctly', async ({ page }) => {
-    await gotoPage(page);
-    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.getByTestId('trigger-button').click();
-
-    await page.screenshot({
-      path: `${SCREENSHOT_PREFIX}[w1920px].png`,
-    });
-  });
-});
+import { test, expect, Page } from '@playwright/test';
+import { SCREEN_SIZES } from '../../consts';
+
+const WIDGETS_CUSTOM_SHOTS_PATH = './custom-shots/';
+const SCREENSHOT_PREFIX = `${WIDGETS_CUSTOM_SHOTS_PATH}widgets-table-filters--opened__`;
+
+const gotoPage = (page: Page) => {
+  return page.goto(
+    'http://localhost:6007/iframe.html?args=&id=widgets-tablefilters--default&viewMode=story',
+  );
+};
+
+test.describe('Widgets: TableFilters', () => {
+  test('Renders correctly', async ({ page }) => {
+    await gotoPage(page);
+    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.getByTestId('trigger-button').click();
+
+    await page.screenshot({
+      path: `${SCREENSHOT_PREFIX}[w1920px].png`,
+    });
+  });
+});