@griddo/ax 1.74.3 → 1.74.5

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "1.74.3",
+  "version": "1.74.5",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Carlos Torres <carlos.torres@secuoyas.com>",
@@ -229,5 +229,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "0e830276fd60a0d1c664fc7c69dceb995a58cb86"
+  "gitHead": "363edaabec5d675e95c131bd11478c8b065e540a"
 }

package/src/modules/Sites/SitesList/index.tsx

@@ -166,18 +166,19 @@ const SitesList = (props: ISitesListProps): JSX.Element => {
     </S.SectionHeader>
   );
 
-  const RecentSitesList = () => (
-    <S.RecentSites data-testid="recent-sites-list">
-      <RecentSitesHeader />
-      <S.RecentSitesItemsWrapper data-testid="recent-sites-items-wrapper" isHidden={!isRecentSitesListDisplayed}>
-        {recentSites
-          .filter((site: ISite) => userHasSite(site.id))
-          .map((site: ISite, i: number) => (
+  const currentRecentSites = recentSites.filter((site: ISite) => userHasSite(site.id));
+  const RecentSitesList = () => {
+    return (
+      <S.RecentSites data-testid="recent-sites-list" fullWidth={currentRecentSites.length >= 5}>
+        <RecentSitesHeader />
+        <S.RecentSitesItemsWrapper data-testid="recent-sites-items-wrapper" isHidden={!isRecentSitesListDisplayed}>
+          {currentRecentSites.map((site: ISite, i: number) => (
             <RecentSiteItem key={i} site={site} />
           ))}
-      </S.RecentSitesItemsWrapper>
-    </S.RecentSites>
-  );
+        </S.RecentSitesItemsWrapper>
+      </S.RecentSites>
+    );
+  };
 
   const AllSitesHeader = () => (
     <S.SectionHeader data-testid="all-sites-header">
@@ -259,18 +260,18 @@ const SitesList = (props: ISitesListProps): JSX.Element => {
     />
   );
 
+  const currentSites = sites.filter((site: ISite) => userHasSite(site.id));
+
   const mappedSites =
-    sites.length > 0 ? (
-      sites
-        .filter((site: ISite) => userHasSite(site.id))
-        .map((site: ISite) => {
-          const isItemSelected = isSelected(site.id);
-          return displayMode === "grid" ? (
-            <GridSiteItem key={site.id} site={site} />
-          ) : (
-            <ListSiteItem key={site.id} site={site} isSelected={isItemSelected} onCheck={handleAddToBulk} />
-          );
-        })
+    currentSites.length > 0 ? (
+      currentSites.map((site: ISite) => {
+        const isItemSelected = isSelected(site.id);
+        return displayMode === "grid" ? (
+          <GridSiteItem key={site.id} site={site} />
+        ) : (
+          <ListSiteItem key={site.id} site={site} isSelected={isItemSelected} onCheck={handleAddToBulk} />
+        );
+      })
     ) : (
       <S.EmptyStateWrapper data-testid="empty-state">
         <EmptyState icon="search" message="We couldn't find what you are looking for. Please, try another search." />
@@ -278,7 +279,7 @@ const SitesList = (props: ISitesListProps): JSX.Element => {
     );
 
   const GridList = () => (
-    <S.GridList data-testid="sites-grid-list" isEmpty={sites.length === 0}>
+    <S.GridList data-testid="sites-grid-list" isEmpty={currentSites.length === 0} fullWidth={currentSites.length >= 5}>
       {mappedSites}
     </S.GridList>
   );
@@ -299,7 +300,7 @@ const SitesList = (props: ISitesListProps): JSX.Element => {
   return (
     <MainWrapper title="Sites" rightButton={rightButtonProps} searchAction={setSearchQuery}>
       <ErrorToast />
-      {recentSites?.length > 0 ? <RecentSitesList /> : null}
+      {currentRecentSites?.length > 0 ? <RecentSitesList /> : null}
       <AllSitesHeader />
       <AllSitesList />
       <Modal

package/src/modules/Sites/SitesList/style.tsx

@@ -46,7 +46,8 @@ const CollapseButton = styled.div`
   cursor: pointer;
 `;
 
-const RecentSites = styled.div`
+const RecentSites = styled.div<{ fullWidth: boolean }>`
+  display: ${(p) => (p.fullWidth ? "block" : "inline-block")};
   padding-bottom: ${(p) => p.theme.spacing.s};
   border-radius: ${(p) => p.theme.radii.s};
   background: ${(p) => p.theme.color.uiBackground02};
@@ -105,19 +106,21 @@ const RecentSitesItemsWrapper = styled.div<{ isHidden: boolean }>`
   }
 `;
 
-const GridList = styled.div<{ isEmpty: boolean }>`
+const GridList = styled.div<{ isEmpty: boolean; fullWidth: boolean }>`
   padding-top: ${(p) => p.theme.spacing.s};
   padding-bottom: ${(p) => p.theme.spacing.m};
   margin: 0 ${(p) => p.theme.spacing.m};
 
-  ${({ isEmpty, theme }) =>
+  ${({ isEmpty, theme, fullWidth }) =>
     isEmpty
       ? `
     display: flex;
     justify-content: center;
   `
       : `display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
+    grid-template-columns: ${
+      fullWidth ? "repeat(auto-fit, minmax(270px, 1fr))" : "repeat(auto-fit, minmax(270px, 270px))"
+    };
     grid-gap: ${theme.spacing.m};
   `}
 `;