fix(collection-view): heading aligment to the center (#1858)

vtex · Aug 22, 2024 · 451c86c · 451c86c
2 parents 5b80d45 + 4639a35
commit 451c86c
Show file tree

Hide file tree

Showing 3 changed files with 99 additions and 11 deletions.
diff --git a/packages/shoreline/src/components/collection/collection-view.tsx b/packages/shoreline/src/components/collection/collection-view.tsx
@@ -1,12 +1,12 @@
+import type { ComponentPropsWithoutRef } from 'react'
+import { forwardRef } from 'react'
 import {
   IconMagnifyingGlass,
   IconPlus,
   IconPlusCircle,
   IconProhibit,
   IconWarningCircle,
 } from '../../icons'
-import type { ComponentPropsWithoutRef } from 'react'
-import { forwardRef } from 'react'
 import { Button } from '../button'
 import {
   EmptyState,

diff --git a/packages/shoreline/src/components/collection/stories/show.stories.tsx b/packages/shoreline/src/components/collection/stories/show.stories.tsx
@@ -1,9 +1,9 @@
-import './stories.css'
-import { CollectionView, Collection, CollectionRow } from '../index'
-import { Search } from '../../search'
-import { Pagination } from '../../pagination'
 import { Filter, FilterItem } from '../../filter'
+import { Pagination } from '../../pagination'
+import { Search } from '../../search'
 import { Stack } from '../../stack'
+import { Collection, CollectionRow, CollectionView } from '../index'
+import './stories.css'
 
 export default {
   title: 'components/collection',
@@ -199,7 +199,89 @@ export function Show() {
           <Pagination page={1} total={74} />
         </CollectionRow>
       </Collection>
-      {/* Custom label */}
+      {/* Empty custom messages */}
+      <Collection>
+        <CollectionRow>
+          <Stack horizontal space="$space-3">
+            <Search />
+            <Filter label="Status">
+              <FilterItem value="Stable">Stable</FilterItem>
+              <FilterItem value="Experimental">Experimental</FilterItem>
+              <FilterItem value="Deprecated">Deprecated</FilterItem>
+            </Filter>
+          </Stack>
+          <Pagination page={1} total={74} />
+        </CollectionRow>
+        <CollectionView
+          status="empty"
+          messages={{
+            'empty-heading': 'No products created inside this category yet.',
+            'empty-description': 'Use the button below to create a new product',
+            'empty-action': 'Create product',
+          }}
+          onEmpty={() => alert('On empty action')}
+        >
+          <div className="ready-view" />
+        </CollectionView>
+        <CollectionRow align="flex-end">
+          <Pagination page={1} total={74} />
+        </CollectionRow>
+      </Collection>
+      {/* Error custom messages */}
+      <Collection>
+        <CollectionRow>
+          <Stack horizontal space="$space-3">
+            <Search />
+            <Filter label="Status">
+              <FilterItem value="Stable">Stable</FilterItem>
+              <FilterItem value="Experimental">Experimental</FilterItem>
+              <FilterItem value="Deprecated">Deprecated</FilterItem>
+            </Filter>
+          </Stack>
+          <Pagination page={1} total={74} />
+        </CollectionRow>
+        <CollectionView
+          status="error"
+          messages={{
+            'error-heading': 'Error fetching products',
+            'error-action': 'Retry',
+          }}
+          onError={() => alert('On error action')}
+        >
+          <div className="ready-view" />
+        </CollectionView>
+        <CollectionRow align="flex-end">
+          <Pagination page={1} total={74} />
+        </CollectionRow>
+      </Collection>
+      {/* Unauthorized custom messages */}
+      <Collection>
+        <CollectionRow>
+          <Stack horizontal space="$space-3">
+            <Search />
+            <Filter label="Status">
+              <FilterItem value="Stable">Stable</FilterItem>
+              <FilterItem value="Experimental">Experimental</FilterItem>
+              <FilterItem value="Deprecated">Deprecated</FilterItem>
+            </Filter>
+          </Stack>
+          <Pagination page={1} total={74} />
+        </CollectionRow>
+        <CollectionView
+          status="unauthorized"
+          messages={{
+            'unauthorized-heading': 'Unauthorized Access',
+            'unauthorized-description':
+              'You do not have permission to view this content',
+          }}
+        >
+          <div className="ready-view" />
+        </CollectionView>
+        <CollectionRow align="flex-end">
+          <Pagination page={1} total={74} />
+        </CollectionRow>
+      </Collection>
+      {/* Not found custom messages */}
       <Collection>
         <CollectionRow>
           <Stack horizontal space="$space-3">
@@ -213,8 +295,11 @@ export function Show() {
           <Pagination page={1} total={74} />
         </CollectionRow>
         <CollectionView
-          status="ready"
-          messages={{ 'empty-action': 'Create product' }}
+          status="not-found"
+          messages={{
+            'not-found-heading': 'No products found',
+            'not-found-description': 'No products match your search criteria',
+          }}
         >
           <div className="ready-view" />
         </CollectionView>

diff --git a/packages/shoreline/src/themes/sunrise/components/collection-view.css b/packages/shoreline/src/themes/sunrise/components/collection-view.css
@@ -5,11 +5,14 @@
 
 [data-sl-collection-view] {
   min-height: 23.75rem;
-  
+
   &:not([data-sl-collection-view-ready]) {
     display: flex;
     justify-items: center;
-    align-items: center;  
+    align-items: center;
   }
 }
 
+[data-sl-collection-view-heading] {
+  text-align: center;
+}