fix: improve skeleton for A and ListItem components

commercelayer · May 9, 2024 · f7a39c5 · f7a39c5
1 parent f10aa26
commit f7a39c5
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 16 deletions.
diff --git a/packages/app-elements/src/ui/atoms/SkeletonTemplate.tsx b/packages/app-elements/src/ui/atoms/SkeletonTemplate.tsx
@@ -174,6 +174,7 @@ const SkeletonTemplate: SkeletonTemplateComponent<
               /^AvatarLetter$/,
               /^Badge$/,
               /^Button$/,
+              /^A$/,
               /^Icon$/,
               /^StatusIcon$/,
               /^RadialProgress$/,
@@ -187,6 +188,13 @@ const SkeletonTemplate: SkeletonTemplateComponent<
             })
           }
 
+          if (isSpecificReactComponent(child, [/^ListItem$/, /^Hr$/])) {
+            return cloneElement(child, {
+              ...props,
+              className: cn(props.className as string, '!border-gray-50')
+            })
+          }
+
           return cloneElement(child, props)
         }
       )}

diff --git a/packages/app-elements/src/ui/composite/__snapshots__/PageSkeleton.test.tsx.snap b/packages/app-elements/src/ui/composite/__snapshots__/PageSkeleton.test.tsx.snap
@@ -124,7 +124,7 @@ exports[`PageSkeleton > Should be rendered 1`] = `
                       class=""
                     >
                       <div
-                        class="flex gap-4 w-full text-gray-800 hover:text-gray-800 py-4 px-4 border-b border-gray-100"
+                        class="flex gap-4 w-full text-gray-800 hover:text-gray-800 py-4 px-4 border-b border-gray-100 !border-gray-50"
                       >
                         <div
                           class="flex gap-4 flex-1 items-center"
@@ -207,7 +207,7 @@ exports[`PageSkeleton > Should be rendered 1`] = `
                         </div>
                       </div>
                       <div
-                        class="flex gap-4 w-full text-gray-800 hover:text-gray-800 py-4 px-4 border-b border-gray-100"
+                        class="flex gap-4 w-full text-gray-800 hover:text-gray-800 py-4 px-4 border-b border-gray-100 !border-gray-50"
                       >
                         <div
                           class="flex gap-4 flex-1 items-center"

diff --git a/packages/docs/src/stories/atoms/SkeletonTemplate.stories.tsx b/packages/docs/src/stories/atoms/SkeletonTemplate.stories.tsx
@@ -1,7 +1,9 @@
+import { A } from '#ui/atoms/A'
 import { Avatar } from '#ui/atoms/Avatar'
 import { Badge } from '#ui/atoms/Badge'
 import { Button } from '#ui/atoms/Button'
 import { CopyToClipboard } from '#ui/atoms/CopyToClipboard'
+import { Hr } from '#ui/atoms/Hr'
 import { RadialProgress } from '#ui/atoms/RadialProgress'
 import {
   SkeletonTemplate,
@@ -54,6 +56,9 @@ const children = (
     <ForwardRefComponent>
       <a>Simil Wouter</a>
     </ForwardRefComponent>
+    <Spacer top='4' bottom='4'>
+      <Hr />
+    </Spacer>
     <WithSkeletonComponentB>C</WithSkeletonComponentB>
     <ListItem
       onClick={() => {
@@ -71,22 +76,29 @@ const children = (
       <StatusIcon name='check' background='green' gap='large' />
       <RadialProgress percentage={42} />
     </ListItem>
-    <ListItem>
-      <div>
-        <Text tag='div'>Ehi there!</Text>
-        <Badge variant='primary'>APPROVED</Badge>
-      </div>
-      <Button
-        onClick={() => {
-          alert('Hello world!')
-        }}
-      >
-        OK
-      </Button>
-    </ListItem>
+    <Spacer top='8'>
+      <ListItem variant='boxed'>
+        <div>
+          <Text tag='div'>Ehi there!</Text>
+          <Badge variant='primary'>APPROVED</Badge>
+        </div>
+        <Button
+          onClick={() => {
+            alert('Hello world!')
+          }}
+        >
+          OK
+        </Button>
+        <A variant='secondary' href='https://commercelayer.io'>
+          OK
+        </A>
+      </ListItem>
+    </Spacer>
     <Spacer top='8'>
       <a href='https://example.com'>It's a link</a>
       <br />
+      <A href='https://example.com'>It's an A component</A>
+      <br />
       <div
         onClick={() => {
           alert('Hello world!')
@@ -126,7 +138,7 @@ const Template: StoryFn<typeof SkeletonTemplate> = ({ children, ...args }) => (
       </SkeletonTemplate>
     </div>
     <Spacer bottom='8'>
-      <hr />
+      <Hr />
     </Spacer>
     <div className='flex gap-2'>
       <div>{children}</div>