feat(skeleton): publish skeleton

adevinta · Nov 7, 2024 · 4579ea7 · 4579ea7
1 parent e6c96f9
commit 4579ea7
Show file tree

Hide file tree

Showing 46 changed files with 101 additions and 86 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/components/skeleton/package.json b/packages/components/skeleton/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/skeleton",
-  "version": "0.0.0",
+  "version": "1.0.0",
   "description": "A skeleton gives feedback about loading state of some component.",
   "publishConfig": {
     "access": "public"

diff --git a/packages/components/skeleton/src/Skeleton.doc.mdx b/packages/components/skeleton/src/Skeleton.doc.mdx
@@ -68,7 +68,7 @@ be equivalent to size in this specific usecase. To handle spacing between these
 
 ### Animation
 
-Use `isAnimated` prop display an animation on your `<Skeleton />` content.
+Use `isAnimated` prop to display an animation on your `<Skeleton />` content.
 
 <Canvas of={stories.Animation} />
 

diff --git a/packages/components/skeleton/src/Skeleton.stories.tsx b/packages/components/skeleton/src/Skeleton.stories.tsx
@@ -4,7 +4,7 @@ import { Meta, StoryFn } from '@storybook/react'
 import { Skeleton } from '.'
 
 const meta: Meta<typeof Skeleton> = {
-  title: 'Experimental/Skeleton',
+  title: 'Components/Skeleton',
   component: Skeleton,
 }
 

diff --git a/packages/components/skeleton/src/Skeleton.test.tsx b/packages/components/skeleton/src/Skeleton.test.tsx
@@ -16,9 +16,9 @@ describe('Skeleton', () => {
 
     expect(screen.getByText('Loading...')).toBeInTheDocument()
 
-    expect(container.querySelectorAll('[data-part="rectangle"]')).toHaveLength(1)
-    expect(container.querySelectorAll('[data-part="circle"]')).toHaveLength(1)
-    expect(container.querySelectorAll('[data-part="line"]')).toHaveLength(1)
+    expect(container.querySelectorAll('[data-shape="rectangle"]')).toHaveLength(1)
+    expect(container.querySelectorAll('[data-shape="circle"]')).toHaveLength(1)
+    expect(container.querySelectorAll('[data-shape="line"]')).toHaveLength(1)
   })
 
   it('should render with as much lines as specified', () => {
@@ -28,7 +28,7 @@ describe('Skeleton', () => {
       </Skeleton>
     )
 
-    expect(container.querySelectorAll('[data-part="line"]')).toHaveLength(5)
+    expect(container.querySelectorAll('[data-shape="line"]')).toHaveLength(5)
   })
 
   it('should not be reachable on keyboard navigation', async () => {

diff --git a/packages/components/skeleton/src/Skeleton.tsx b/packages/components/skeleton/src/Skeleton.tsx
@@ -20,6 +20,7 @@ export const Skeleton = forwardRef<HTMLDivElement, PropsWithChildren<SkeletonPro
     <div
       ref={forwardedRef}
       data-spark-component="skeleton"
+      role="presentation"
       className={skeletonStyles({ isAnimated, className })}
       {...rest}
     >

diff --git a/packages/components/skeleton/src/SkeletonItem.tsx b/packages/components/skeleton/src/SkeletonItem.tsx
@@ -52,7 +52,7 @@ export const SkeletonRectangle = ({ width = '100%', height, ...rest }: SkeletonR
       className="h-[--skeleton-rect-height] w-[--skeleton-rect-width]"
       {...rest}
       shape="rectangle"
-      data-part="rectangle"
+      data-shape="rectangle"
     />
   )
 }
@@ -63,7 +63,7 @@ export const SkeletonCircle = ({ size, ...rest }: SkeletonCircleProps) => (
     className="size-[--skeleton-circle-size]"
     {...rest}
     shape="circle"
-    data-part="circle"
+    data-shape="circle"
   />
 )
 
@@ -76,9 +76,9 @@ export const SkeletonLine = ({
   const gap = gapProp || 'md'
 
   return (
-    <div className={skeletonLineStyles({ gap, className })} data-part="linegroup">
+    <div className={skeletonLineStyles({ gap, className })} aria-hidden="true">
       {[...new Array(lines)].map((_, index) => (
-        <SkeletonItem key={`line_${index}`} {...rest} shape="line" data-part="line" />
+        <SkeletonItem key={`line_${index}`} {...rest} shape="line" data-shape="line" />
       ))}
     </div>
   )

diff --git a/public/a11y/a11y-report-accordion.json b/public/a11y/a11y-report-accordion.json
@@ -1,6 +1,6 @@
 {
   "@spark-ui/accordion": {
-    "timestamp": "2024-10-09T13:34:21.060Z",
+    "timestamp": "2024-11-06T15:04:41.612Z",
     "url": "http://localhost:3002/a11y/accordion",
     "incomplete": [],
     "violations": []

diff --git a/public/a11y/a11y-report-alert-dialog.json b/public/a11y/a11y-report-alert-dialog.json
@@ -1,6 +1,6 @@
 {
   "@spark-ui/alert-dialog": {
-    "timestamp": "2024-10-09T13:34:23.394Z",
+    "timestamp": "2024-11-06T15:04:43.399Z",
     "url": "http://localhost:3002/a11y/alert-dialog",
     "incomplete": [
       {

diff --git a/public/a11y/a11y-report-badge.json b/public/a11y/a11y-report-badge.json
@@ -1,6 +1,6 @@
 {
   "@spark-ui/badge": {
-    "timestamp": "2024-10-09T13:34:25.321Z",
+    "timestamp": "2024-11-06T15:04:44.962Z",
     "url": "http://localhost:3002/a11y/badge",
     "incomplete": [],
     "violations": []

diff --git a/public/a11y/a11y-report-breadcrumb.json b/public/a11y/a11y-report-breadcrumb.json
@@ -1,6 +1,6 @@
 {
   "@spark-ui/breadcrumb": {
-    "timestamp": "2024-10-09T13:34:26.776Z",
+    "timestamp": "2024-11-06T15:04:46.588Z",
     "url": "http://localhost:3002/a11y/breadcrumb",
     "incomplete": [
       {

diff --git a/public/a11y/a11y-report-button.json b/public/a11y/a11y-report-button.json
@@ -1,6 +1,6 @@
 {
   "@spark-ui/button": {
-    "timestamp": "2024-10-09T13:34:28.453Z",
+    "timestamp": "2024-11-06T15:04:48.291Z",
     "url": "http://localhost:3002/a11y/button",
     "incomplete": [],
     "violations": []

diff --git a/public/a11y/a11y-report-checkbox.json b/public/a11y/a11y-report-checkbox.json
@@ -1,6 +1,6 @@
 {
   "@spark-ui/checkbox": {
-    "timestamp": "2024-10-09T13:34:30.479Z",
+    "timestamp": "2024-11-06T15:04:49.855Z",
     "url": "http://localhost:3002/a11y/checkbox",
     "incomplete": [],
     "violations": []

diff --git a/public/a11y/a11y-report-chip.json b/public/a11y/a11y-report-chip.json
@@ -1,6 +1,6 @@
 {
   "@spark-ui/chip": {
-    "timestamp": "2024-10-09T13:34:32.079Z",
+    "timestamp": "2024-11-06T15:04:51.194Z",
     "url": "http://localhost:3002/a11y/chip",
     "incomplete": [],
     "violations": []

diff --git a/public/a11y/a11y-report-collapsible.json b/public/a11y/a11y-report-collapsible.json
@@ -1,6 +1,6 @@
 {
   "@spark-ui/collapsible": {
-    "timestamp": "2024-10-09T13:34:33.574Z",
+    "timestamp": "2024-11-06T15:04:52.592Z",
     "url": "http://localhost:3002/a11y/collapsible",
     "incomplete": [],
     "violations": []

diff --git a/public/a11y/a11y-report-combobox.json b/public/a11y/a11y-report-combobox.json
@@ -1,6 +1,6 @@
 {
   "@spark-ui/combobox": {
-    "timestamp": "2024-10-09T13:34:35.332Z",
+    "timestamp": "2024-11-06T15:04:54.160Z",
     "url": "http://localhost:3002/a11y/combobox",
     "incomplete": [
       {

diff --git a/public/a11y/a11y-report-dialog.json b/public/a11y/a11y-report-dialog.json
@@ -1,6 +1,6 @@
 {
   "@spark-ui/dialog": {
-    "timestamp": "2024-10-09T13:34:37.186Z",
+    "timestamp": "2024-11-06T15:04:55.760Z",
     "url": "http://localhost:3002/a11y/dialog",
     "incomplete": [
       {

diff --git a/public/a11y/a11y-report-divider.json b/public/a11y/a11y-report-divider.json
@@ -1,6 +1,6 @@
 {
   "@spark-ui/divider": {
-    "timestamp": "2024-10-09T13:34:23.328Z",
+    "timestamp": "2024-11-06T15:04:41.560Z",
     "url": "http://localhost:3002/a11y/divider",
     "incomplete": [],
     "violations": []

diff --git a/public/a11y/a11y-report-drawer.json b/public/a11y/a11y-report-drawer.json
@@ -1,6 +1,6 @@
 {
   "@spark-ui/drawer": {
-    "timestamp": "2024-10-09T13:34:25.420Z",
+    "timestamp": "2024-11-06T15:04:43.238Z",
     "url": "http://localhost:3002/a11y/drawer",
     "incomplete": [
       {

diff --git a/public/a11y/a11y-report-dropdown.json b/public/a11y/a11y-report-dropdown.json
@@ -1,6 +1,6 @@
 {
   "@spark-ui/dropdown": {
-    "timestamp": "2024-10-09T13:34:27.098Z",
+    "timestamp": "2024-11-06T15:04:44.945Z",
     "url": "http://localhost:3002/a11y/dropdown",
     "incomplete": [
       {

diff --git a/public/a11y/a11y-report-form-field.json b/public/a11y/a11y-report-form-field.json
@@ -1,6 +1,6 @@
 {
   "@spark-ui/form-field": {
-    "timestamp": "2024-10-09T13:34:28.783Z",
+    "timestamp": "2024-11-06T15:04:46.558Z",
     "url": "http://localhost:3002/a11y/form-field",
     "incomplete": [],
     "violations": []

diff --git a/public/a11y/a11y-report-icon-button.json b/public/a11y/a11y-report-icon-button.json
@@ -1,6 +1,6 @@
 {
   "@spark-ui/icon-button": {
-    "timestamp": "2024-10-09T13:34:32.285Z",
+    "timestamp": "2024-11-06T15:04:49.794Z",
     "url": "http://localhost:3002/a11y/icon-button",
     "incomplete": [],
     "violations": []

diff --git a/public/a11y/a11y-report-icon.json b/public/a11y/a11y-report-icon.json
@@ -1,6 +1,6 @@
 {
   "@spark-ui/icon": {
-    "timestamp": "2024-10-09T13:34:30.710Z",
+    "timestamp": "2024-11-06T15:04:48.231Z",
     "url": "http://localhost:3002/a11y/icon",
     "incomplete": [],
     "violations": []

diff --git a/public/a11y/a11y-report-input.json b/public/a11y/a11y-report-input.json
@@ -1,6 +1,6 @@
 {
   "@spark-ui/input": {
-    "timestamp": "2024-10-09T13:34:33.826Z",
+    "timestamp": "2024-11-06T15:04:51.135Z",
     "url": "http://localhost:3002/a11y/input",
     "incomplete": [],
     "violations": []

diff --git a/public/a11y/a11y-report-kbd.json b/public/a11y/a11y-report-kbd.json
@@ -1,6 +1,6 @@
 {
   "@spark-ui/kbd": {
-    "timestamp": "2024-10-09T13:34:35.367Z",
+    "timestamp": "2024-11-06T15:04:52.443Z",
     "url": "http://localhost:3002/a11y/kbd",
     "incomplete": [],
     "violations": []

diff --git a/public/a11y/a11y-report-label.json b/public/a11y/a11y-report-label.json
@@ -1,6 +1,6 @@
 {
   "@spark-ui/label": {
-    "timestamp": "2024-10-09T13:34:36.866Z",
+    "timestamp": "2024-11-06T15:04:53.776Z",
     "url": "http://localhost:3002/a11y/label",
     "incomplete": [],
     "violations": []

diff --git a/public/a11y/a11y-report-link-box.json b/public/a11y/a11y-report-link-box.json
@@ -1,6 +1,6 @@
 {
   "@spark-ui/link-box": {
-    "timestamp": "2024-10-09T13:34:38.299Z",
+    "timestamp": "2024-11-06T15:04:55.154Z",
     "url": "http://localhost:3002/a11y/link-box",
     "incomplete": [],
     "violations": []

diff --git a/public/a11y/a11y-report-pagination.json b/public/a11y/a11y-report-pagination.json
@@ -1,6 +1,6 @@
 {
   "@spark-ui/pagination": {
-    "timestamp": "2024-10-09T13:34:27.220Z",
+    "timestamp": "2024-11-06T15:04:43.897Z",
     "url": "http://localhost:3002/a11y/pagination",
     "incomplete": [],
     "violations": []

diff --git a/public/a11y/a11y-report-popover.json b/public/a11y/a11y-report-popover.json
@@ -1,6 +1,6 @@
 {
   "@spark-ui/popover": {
-    "timestamp": "2024-10-09T13:34:29.230Z",
+    "timestamp": "2024-11-06T15:04:45.601Z",
     "url": "http://localhost:3002/a11y/popover",
     "incomplete": [
       {

diff --git a/public/a11y/a11y-report-progress-tracker.json b/public/a11y/a11y-report-progress-tracker.json
@@ -1,6 +1,6 @@
 {
   "@spark-ui/progress-tracker": {
-    "timestamp": "2024-10-09T13:34:32.776Z",
+    "timestamp": "2024-11-06T15:04:48.914Z",
     "url": "http://localhost:3002/a11y/progress-tracker",
     "incomplete": [],
     "violations": []

diff --git a/public/a11y/a11y-report-progress.json b/public/a11y/a11y-report-progress.json
@@ -1,6 +1,6 @@
 {
   "@spark-ui/progress": {
-    "timestamp": "2024-10-09T13:34:31.158Z",
+    "timestamp": "2024-11-06T15:04:47.237Z",
     "url": "http://localhost:3002/a11y/progress",
     "incomplete": [],
     "violations": []

diff --git a/public/a11y/a11y-report-radio-group.json b/public/a11y/a11y-report-radio-group.json
@@ -1,6 +1,6 @@
 {
   "@spark-ui/radio-group": {
-    "timestamp": "2024-10-09T13:34:34.396Z",
+    "timestamp": "2024-11-06T15:04:50.450Z",
     "url": "http://localhost:3002/a11y/radio-group",
     "incomplete": [],
     "violations": []

diff --git a/public/a11y/a11y-report-rating.json b/public/a11y/a11y-report-rating.json
@@ -1,6 +1,6 @@
 {
   "@spark-ui/rating": {
-    "timestamp": "2024-10-09T13:34:36.112Z",
+    "timestamp": "2024-11-06T15:04:51.841Z",
     "url": "http://localhost:3002/a11y/rating",
     "incomplete": [],
     "violations": []

diff --git a/public/a11y/a11y-report-select.json b/public/a11y/a11y-report-select.json
@@ -1,6 +1,6 @@
 {
   "@spark-ui/select": {
-    "timestamp": "2024-10-09T13:34:37.656Z",
+    "timestamp": "2024-11-06T15:04:53.278Z",
     "url": "http://localhost:3002/a11y/select",
     "incomplete": [],
     "violations": []

diff --git a/public/a11y/a11y-report-skeleton.json b/public/a11y/a11y-report-skeleton.json
@@ -0,0 +1,8 @@
+{
+  "@spark-ui/skeleton": {
+    "timestamp": "2024-11-06T15:04:54.550Z",
+    "url": "http://localhost:3002/a11y/skeleton",
+    "incomplete": [],
+    "violations": []
+  }
+}
diff --git a/public/a11y/a11y-report-slider.json b/public/a11y/a11y-report-slider.json
@@ -1,6 +1,6 @@
 {
   "@spark-ui/slider": {
-    "timestamp": "2024-10-09T13:34:38.916Z",
+    "timestamp": "2024-11-06T15:04:55.979Z",
     "url": "http://localhost:3002/a11y/slider",
     "incomplete": [],
     "violations": []

diff --git a/public/a11y/a11y-report-snackbar.json b/public/a11y/a11y-report-snackbar.json
@@ -1,6 +1,6 @@
 {
   "@spark-ui/snackbar": {
-    "timestamp": "2024-10-09T13:34:39.882Z",
+    "timestamp": "2024-11-06T15:04:56.990Z",
     "url": "http://localhost:3002/a11y/snackbar",
     "incomplete": [],
     "violations": []

diff --git a/public/a11y/a11y-report-spinner.json b/public/a11y/a11y-report-spinner.json
@@ -1,6 +1,6 @@
 {
   "@spark-ui/spinner": {
-    "timestamp": "2024-10-09T13:34:40.820Z",
+    "timestamp": "2024-11-06T15:04:45.224Z",
     "url": "http://localhost:3002/a11y/spinner",
     "incomplete": [],
     "violations": []

diff --git a/public/a11y/a11y-report-stepper.json b/public/a11y/a11y-report-stepper.json
@@ -1,6 +1,6 @@
 {
   "@spark-ui/stepper": {
-    "timestamp": "2024-10-09T13:34:27.610Z",
+    "timestamp": "2024-11-06T15:04:46.858Z",
     "url": "http://localhost:3002/a11y/stepper",
     "incomplete": [],
     "violations": []

diff --git a/public/a11y/a11y-report-switch.json b/public/a11y/a11y-report-switch.json
@@ -1,6 +1,6 @@
 {
   "@spark-ui/switch": {
-    "timestamp": "2024-10-09T13:34:29.561Z",
+    "timestamp": "2024-11-06T15:04:48.465Z",
     "url": "http://localhost:3002/a11y/switch",
     "incomplete": [],
     "violations": []

diff --git a/public/a11y/a11y-report-tabs.json b/public/a11y/a11y-report-tabs.json
@@ -1,6 +1,6 @@
 {
   "@spark-ui/tabs": {
-    "timestamp": "2024-10-09T13:34:31.395Z",
+    "timestamp": "2024-11-06T15:04:50.041Z",
     "url": "http://localhost:3002/a11y/tabs",
     "incomplete": [],
     "violations": []

diff --git a/public/a11y/a11y-report-tag.json b/public/a11y/a11y-report-tag.json
@@ -1,6 +1,6 @@
 {
   "@spark-ui/tag": {
-    "timestamp": "2024-10-09T13:34:32.931Z",
+    "timestamp": "2024-11-06T15:04:51.411Z",
     "url": "http://localhost:3002/a11y/tag",
     "incomplete": [],
     "violations": []

diff --git a/public/a11y/a11y-report-text-link.json b/public/a11y/a11y-report-text-link.json
@@ -1,6 +1,6 @@
 {
   "@spark-ui/text-link": {
-    "timestamp": "2024-10-09T13:34:36.207Z",
+    "timestamp": "2024-11-06T15:04:54.062Z",
     "url": "http://localhost:3002/a11y/text-link",
     "incomplete": [
       {

diff --git a/public/a11y/a11y-report-textarea.json b/public/a11y/a11y-report-textarea.json
@@ -1,6 +1,6 @@
 {
   "@spark-ui/textarea": {
-    "timestamp": "2024-10-09T13:34:34.484Z",
+    "timestamp": "2024-11-06T15:04:52.713Z",
     "url": "http://localhost:3002/a11y/textarea",
     "incomplete": [],
     "violations": []