@griddo/ax 1.71.0 → 1.72.2

package/src/components/TableFilters/CustomizeFilters/index.tsx

@@ -6,7 +6,6 @@ import * as S from "./style";
 
 const CustomizeFilters = (props: ICustomizeFiltersProps): JSX.Element => {
   const { columns, setColumns, value } = props;
-
   const options = Object.keys(columns).map((col: string) => {
     const disabled = value.length >= 5 && !value.includes(col);
     return { name: col, title: columns[col].title, value: col, disabled };
@@ -31,7 +30,7 @@ const CustomizeFilters = (props: ICustomizeFiltersProps): JSX.Element => {
   );
 
   return (
-    <S.Wrapper>
+    <S.Wrapper data-testid="customize-filters-wrapper">
       <FloatingMenu Button={Button} position="right" closeOnSelect={false}>
         <ListTitle>Customize filters</ListTitle>
         <S.Note>You can select up to five options</S.Note>
@@ -43,7 +42,7 @@ const CustomizeFilters = (props: ICustomizeFiltersProps): JSX.Element => {
   );
 };
 
-interface ICustomizeFiltersProps {
+export interface ICustomizeFiltersProps {
   setColumns(newValue: any): void;
   columns: Record<string, IColumn>;
   value: string[];

package/src/components/TableFilters/DateFilter/index.tsx

@@ -4,7 +4,7 @@ import { Icon, FloatingMenu, ListTitle, ListItem } from "@ax/components";
 
 import * as S from "./style";
 
-const DateFilter = (props: IStatusFilterProps): JSX.Element => {
+const DateFilter = (props: IDateFilterProps): JSX.Element => {
   const { sortItems, sortedState } = props;
   const { isAscending, sortedByDate } = sortedState;
   const sortByModifiedDate = (isAscending: boolean) => sortItems("date", isAscending);
@@ -16,13 +16,13 @@ const DateFilter = (props: IStatusFilterProps): JSX.Element => {
     isAscending ? <Icon name="FullArrowUp" size="16" /> : <Icon name="FullArrowDown" size="16" />;
 
   const Header = () => (
-    <S.Date isActive={sortedByDate}>
+    <S.Date isActive={sortedByDate} data-testid="date-filter">
       Date
       <S.IconsWrapper>
         {sortedByDate ? (
           <SortedStateArrow />
         ) : (
-          <S.InteractiveArrow>
+          <S.InteractiveArrow data-testid="date-filter-interactive-arrow">
             <Icon name="DownArrow" size="16" />
           </S.InteractiveArrow>
         )}
@@ -43,7 +43,7 @@ const DateFilter = (props: IStatusFilterProps): JSX.Element => {
   );
 };
 
-interface IStatusFilterProps {
+export interface IDateFilterProps {
   sortedState: any;
   sortItems(orderPointer: string, isAscendent: boolean): any;
 }

package/src/components/TableFilters/LiveFilter/index.tsx

@@ -104,7 +104,7 @@ const LiveFilter = (props: ILiveFilterProps): JSX.Element => {
   );
 };
 
-interface ILiveFilterProps {
+export interface ILiveFilterProps {
   filterItems(pointer: string, filter: string): void;
   value: string;
   isStructuredData?: boolean;

package/src/components/TableFilters/LiveFilter/style.tsx

@@ -19,15 +19,6 @@ const IconsWrapper = styled.div`
   }
 `;
 
-const InteractiveArrow = styled.div`
-  display: flex;
-  svg {
-    path {
-      fill: ${(p) => p.theme.color.interactive01};
-    }
-  }
-`;
-
 const ChecksWrapper = styled.div`
   padding: ${(p) => p.theme.spacing.xs} ${(p) => p.theme.spacing.s} 0;
 `;
@@ -35,4 +26,5 @@ const ChecksWrapper = styled.div`
 const MenuWrapper = styled.div`
   position: relative;
 `;
-export { LiveOptions, IconsWrapper, InteractiveArrow, ChecksWrapper, MenuWrapper };
+
+export { LiveOptions, IconsWrapper, ChecksWrapper, MenuWrapper };

package/src/components/TableFilters/NameFilter/index.tsx

@@ -20,13 +20,13 @@ const NameFilter = (props: INameFilterProps): JSX.Element => {
   const title = urlSorting ? "Name & URL" : "Name";
 
   const Header = () => (
-    <S.NameHeader isActive={isActive}>
+    <S.NameHeader isActive={isActive} data-testid="name-filter-header">
       {title}
       <S.IconsWrapper>
         {isActive ? (
           <SortedStateArrow />
         ) : (
-          <S.InteractiveArrow>
+          <S.InteractiveArrow data-testid="name-filter-interactive-arrow">
             <Icon name="DownArrow" size="16" />
           </S.InteractiveArrow>
         )}
@@ -46,7 +46,7 @@ const NameFilter = (props: INameFilterProps): JSX.Element => {
       {urlSorting && (
         <>
           <ListTitle>URL Sorting</ListTitle>
-          <ListItem isSelected={sortedByURL} onClick={sortAscendingURL}>
+          <ListItem isSelected={sortedByURL} onClick={sortAscendingURL} >
             Ascendent
           </ListItem>
         </>
@@ -55,7 +55,7 @@ const NameFilter = (props: INameFilterProps): JSX.Element => {
   );
 };
 
-interface INameFilterProps {
+export interface INameFilterProps {
   sortedState: any;
   sortItems(orderPointer: string, isAscendent: boolean): void;
   urlSorting?: boolean;

package/src/components/TableFilters/SiteFilter/index.tsx

@@ -48,18 +48,21 @@ const SiteFilter = (props: ISiteFilterProps): JSX.Element => {
   };
 
   useEffect(() => {
-    getSelectSites().then((items) => {
-      items &&
-        items.forEach((item: { value: string; label: string }) => {
-          const newFilter = {
-            name: item.value,
-            value: item.value,
-            title: item.label,
-          };
-          filters.push(newFilter);
-        });
-      setOptions(filters);
-    });
+    getSelectSites()
+      .then((items) => {
+        items &&
+          items.forEach((item: { value: string; label: string }) => {
+            const newFilter = {
+              name: item.value,
+              value: item.value,
+              title: item.label,
+            };
+            filters.push(newFilter);
+          });
+
+        setOptions(filters);
+      })
+      .catch((apiError) => console.log(apiError));
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -93,7 +96,7 @@ const SiteFilter = (props: ISiteFilterProps): JSX.Element => {
   );
 };
 
-interface ISiteFilterProps {
+export interface ISiteFilterProps {
   filterItems(pointer: string, filter: string): void;
   value: any;
   pointer: string;

package/src/components/TableFilters/SiteFilter/style.tsx

@@ -19,19 +19,10 @@ const IconsWrapper = styled.div`
   }
 `;
 
-const InteractiveArrow = styled.div`
-  display: flex;
-  svg {
-    path {
-      fill: ${(p) => p.theme.color.interactive01};
-    }
-  }
-`;
-
 const ChecksWrapper = styled.div`
   padding: ${(p) => p.theme.spacing.xs} ${(p) => p.theme.spacing.s};
   height: calc(${(p) => p.theme.spacing.xl} * 3.5);
   overflow-y: scroll;
 `;
 
-export { Site, IconsWrapper, InteractiveArrow, ChecksWrapper };
+export { Site, IconsWrapper, ChecksWrapper };

package/src/components/TableFilters/StatusFilter/index.tsx

@@ -17,13 +17,13 @@ const StatusFilter = (props: IStatusFilterProps) => {
     isAscending ? <Icon name="FullArrowUp" size="16" /> : <Icon name="FullArrowDown" size="16" />;
 
   const Header = () => (
-    <S.Status isActive={sortedByDate}>
+    <S.Status isActive={sortedByDate} data-testid="status-filter-header">
       Status
       <S.IconsWrapper>
         {sortedByDate ? (
           <SortedStateArrow />
         ) : (
-          <S.InteractiveArrow>
+          <S.InteractiveArrow data-testid="status-filter-interactive-arrow">
             <Icon name="DownArrow" size="16" />
           </S.InteractiveArrow>
         )}
@@ -44,7 +44,7 @@ const StatusFilter = (props: IStatusFilterProps) => {
   );
 };
 
-interface IStatusFilterProps {
+export interface IStatusFilterProps {
   sortedState: any;
   sortItems(orderPointer: string, isAscendent: boolean): any;
   isStructuredData?: boolean;

package/src/components/TableFilters/TranslationsFilter/index.tsx

@@ -28,9 +28,6 @@ const TranslationsFilter = (props: ITranslationsFilterProps): JSX.Element => {
   const [selectedValue, setSelectedValue] = useState([...initialState]);
 
   const setQuery = (selection: any) => {
-    if (!selection.length) {
-      selection = [selectAllOption];
-    }
     setSelectedValue(selection);
     const queryFilters = selection.join("&");
     const pointer = "translated";
@@ -40,9 +37,9 @@ const TranslationsFilter = (props: ITranslationsFilterProps): JSX.Element => {
   const isActive = !areEquals(selectedValue, selectAllOption);
 
   const Header = () => (
-    <S.Translations isActive={isActive}>
+    <S.Translations isActive={isActive} data-testid="translation-filter-header">
       Trans.
-      <S.IconsWrapper>
+      <S.IconsWrapper data-testid="translation-filter-icons-wrapper">
         {isActive ? <Icon name="Filter" size="16" /> : <Icon name="DownArrow" size="16" />}
       </S.IconsWrapper>
     </S.Translations>
@@ -51,14 +48,14 @@ const TranslationsFilter = (props: ITranslationsFilterProps): JSX.Element => {
   return (
     <FloatingMenu Button={Header} position="left" closeOnSelect={true} isCheckGroup={true}>
       <ListTitle>Filter by translations</ListTitle>
-      <S.ChecksWrapper>
+      <S.ChecksWrapper data-testid="translation-filter-checks-wrapper">
         <CheckGroup options={filters} value={selectedValue} onChange={setQuery} multipleSelection={false} />
       </S.ChecksWrapper>
     </FloatingMenu>
   );
 };
 
-interface ITranslationsFilterProps {
+export interface ITranslationsFilterProps {
   filterItems(pointer: string, filter: string): void;
   value: string;
 }

package/src/components/TableFilters/TranslationsFilter/style.tsx

@@ -19,17 +19,8 @@ const IconsWrapper = styled.div`
   }
 `;
 
-const InteractiveArrow = styled.div`
-  display: flex;
-  svg {
-    path {
-      fill: ${(p) => p.theme.color.interactive01};
-    }
-  }
-`;
-
 const ChecksWrapper = styled.div`
   padding: ${(p) => p.theme.spacing.xs} ${(p) => p.theme.spacing.s};
 `;
 
-export { Translations, IconsWrapper, InteractiveArrow, ChecksWrapper };
+export { Translations, IconsWrapper, ChecksWrapper };

package/src/components/TableFilters/TypeFilter/index.tsx

@@ -37,7 +37,7 @@ const TypeFilter = (props: ITypeFilterProps): JSX.Element => {
 
   return (
     <FloatingMenu Button={Header} position="left" closeOnSelect={true} isCheckGroup={true}>
-      <ListTitle>Filter by type</ListTitle>
+      <ListTitle data-testid="type-filter-title">Filter by type</ListTitle>
       <S.ChecksWrapper>
         <CheckGroup
           options={filters}
@@ -57,7 +57,7 @@ interface IFilter {
   title: string;
 }
 
-interface ITypeFilterProps {
+export interface ITypeFilterProps {
   filterItems(pointer: string, filter: string): void;
   filters: IFilter[];
   pointer: string;

package/src/components/TableFilters/TypeFilter/style.tsx

@@ -19,17 +19,8 @@ const IconsWrapper = styled.div`
   }
 `;
 
-const InteractiveArrow = styled.div`
-  display: flex;
-  svg {
-    path {
-      fill: ${(p) => p.theme.color.interactive01};
-    }
-  }
-`;
-
 const ChecksWrapper = styled.div`
   padding: ${(p) => p.theme.spacing.xs} ${(p) => p.theme.spacing.s};
 `;
 
-export { Types, IconsWrapper, InteractiveArrow, ChecksWrapper };
+export { Types, IconsWrapper, ChecksWrapper };

package/src/components/Tooltip/index.tsx

@@ -82,7 +82,7 @@ const Tooltip = (props: ITooltipProps): JSX.Element => {
     <S.Tooltip data-testid="tooltip-component" onMouseEnter={showTip} onMouseLeave={hideTip} onMouseDown={handleClick}>
       <div ref={childrenRef}>{children}</div>
       <S.Tip
-        data-testid="tipComponent"
+        data-testid="tip-component"
         active={active}
         childrenWidth={childrenWidth}
         bottom={bottom}

package/src/helpers/index.tsx

@@ -99,6 +99,8 @@ import { isDevelopment } from "./environment";
 
 import { getDefaultTheme } from "./themes";
 
+import { parseTheme } from "./parseTheme";
+
 export {
   isComponentEmpty,
   setAsContainedComponent,
@@ -180,4 +182,5 @@ export {
   getDefaultNavigationModules,
   isMultipleNavigationModules,
   areEqual,
+  parseTheme,
 };