From 7df43a0c47f81a6ccaf5cf1082cde09d474ce066 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lar=C3=ADcia=20Mota?= <laricia.mota@vtex.com.br>
Date: Wed, 18 Aug 2021 18:09:02 -0300
Subject: [PATCH 1/7] Add skeleton atom

---
 .../src/atoms/Skeleton/Skeleton.test.tsx      | 12 +++
 .../store-ui/src/atoms/Skeleton/Skeleton.tsx  | 91 +++++++++++++++++++
 packages/store-ui/src/atoms/Skeleton/index.ts |  2 +
 .../src/atoms/Skeleton/stories/Skeleton.mdx   | 12 +++
 .../Skeleton/stories/Skeleton.stories.tsx     | 54 +++++++++++
 5 files changed, 171 insertions(+)
 create mode 100644 packages/store-ui/src/atoms/Skeleton/Skeleton.test.tsx
 create mode 100644 packages/store-ui/src/atoms/Skeleton/Skeleton.tsx
 create mode 100644 packages/store-ui/src/atoms/Skeleton/index.ts
 create mode 100644 packages/store-ui/src/atoms/Skeleton/stories/Skeleton.mdx
 create mode 100644 packages/store-ui/src/atoms/Skeleton/stories/Skeleton.stories.tsx

diff --git a/packages/store-ui/src/atoms/Skeleton/Skeleton.test.tsx b/packages/store-ui/src/atoms/Skeleton/Skeleton.test.tsx
new file mode 100644
index 0000000000..2acaaf73e6
--- /dev/null
+++ b/packages/store-ui/src/atoms/Skeleton/Skeleton.test.tsx
@@ -0,0 +1,12 @@
+import { render } from '@testing-library/react'
+import React from 'react'
+
+import Skeleton from './Skeleton'
+
+describe('Skeleton', () => {
+  it('`data-store-skeleton` is present', () => {
+    const { getByTestId } = render(<Skeleton testId="store-skeleton" />)
+
+    expect(getByTestId('store-skeleton')).toHaveAttribute('data-store-skeleton')
+  })
+})
diff --git a/packages/store-ui/src/atoms/Skeleton/Skeleton.tsx b/packages/store-ui/src/atoms/Skeleton/Skeleton.tsx
new file mode 100644
index 0000000000..fa66e262ad
--- /dev/null
+++ b/packages/store-ui/src/atoms/Skeleton/Skeleton.tsx
@@ -0,0 +1,91 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { forwardRef } from 'react'
+import type { HtmlHTMLAttributes } from 'react'
+import { jsx, css, keyframes } from '@emotion/core'
+
+export interface SkeletonProps extends HtmlHTMLAttributes<HTMLDivElement> {
+  /**
+   * Skeleton's width
+   */
+  width?: string
+  /**
+   * Skeleton's height
+   */
+  height?: string
+  /**
+   * Background, or primary, color
+   */
+  backgroundColor?: string
+  /**
+   * Highlight color, the one that will look like it's moving
+   */
+  highlightColor?: string
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId?: string
+}
+
+const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(function Skeleton(
+  {
+    width = '100%',
+    height = '50px',
+    backgroundColor = '#ddd',
+    highlightColor = '#eee',
+    testId = 'store-skeleton',
+  },
+  ref
+) {
+  return (
+    <div
+      ref={ref}
+      data-store-skeleton
+      data-testid={testId}
+      css={css`
+      background-color: ${highlightColor}
+      border-radius: 4px;
+      display: block;
+      line-height: 1;
+      width: ${width};
+      height: ${height};
+      position: relative;
+      overflow: hidden;
+      margin-top: 4px;
+    `}
+    >
+      <div
+        css={css`
+          width: 300vw;
+          height: 100%;
+          position: relative;
+          left: 0;
+          background-color: ${backgroundColor};
+          background-image: linear-gradient(
+            90deg,
+            ${backgroundColor},
+            ${backgroundColor} 30%,
+            ${highlightColor} 60%,
+            ${backgroundColor} 70%,
+            ${backgroundColor}
+          );
+          background-size: 50% 100%;
+          background-repeat: repeat-x;
+          animation: ${keyframes`
+            0% {
+              /* Animating absolute units, such as vw, has
+              better performance than relative units, such as %,
+              because it needs to be recalculated every frame */
+              transform: translate3d(-150vw, 0, 0);
+            }
+            100% {
+              transform: translate3d(0, 0, 0);
+            }
+          `} 800ms infinite linear;
+        `}
+      />
+    </div>
+  )
+})
+
+export default Skeleton
diff --git a/packages/store-ui/src/atoms/Skeleton/index.ts b/packages/store-ui/src/atoms/Skeleton/index.ts
new file mode 100644
index 0000000000..b0bda53894
--- /dev/null
+++ b/packages/store-ui/src/atoms/Skeleton/index.ts
@@ -0,0 +1,2 @@
+export { default } from './Skeleton'
+export type { SkeletonProps } from './Skeleton'
diff --git a/packages/store-ui/src/atoms/Skeleton/stories/Skeleton.mdx b/packages/store-ui/src/atoms/Skeleton/stories/Skeleton.mdx
new file mode 100644
index 0000000000..6d9b2808bc
--- /dev/null
+++ b/packages/store-ui/src/atoms/Skeleton/stories/Skeleton.mdx
@@ -0,0 +1,12 @@
+import { Story, Canvas, ArgsTable } from '@storybook/addon-docs'
+import Skeleton from '../Skeleton'
+
+# Preview
+
+<Canvas>
+  <Story id="atoms-skeleton--skeleton" />
+</Canvas>
+
+# Props
+
+<ArgsTable of={Skeleton} />
diff --git a/packages/store-ui/src/atoms/Skeleton/stories/Skeleton.stories.tsx b/packages/store-ui/src/atoms/Skeleton/stories/Skeleton.stories.tsx
new file mode 100644
index 0000000000..5f08ddefcb
--- /dev/null
+++ b/packages/store-ui/src/atoms/Skeleton/stories/Skeleton.stories.tsx
@@ -0,0 +1,54 @@
+import type { Story } from '@storybook/react'
+import React from 'react'
+
+import type { ComponentArgTypes } from '../../../typings/utils'
+import type { SkeletonProps } from '../Skeleton'
+import Component from '../Skeleton'
+import mdx from './Skeleton.mdx'
+
+const SkeletonTemplate: Story<SkeletonProps> = ({
+  width,
+  height,
+  backgroundColor,
+  highlightColor,
+  testId,
+}) => (
+  <Component
+    width={width}
+    height={height}
+    backgroundColor={backgroundColor}
+    highlightColor={highlightColor}
+    testId={testId}
+  />
+)
+
+export const Skeleton = SkeletonTemplate.bind({})
+
+const argTypes: ComponentArgTypes<SkeletonProps> = {
+  width: {
+    control: { type: 'text' },
+    defaultValue: '100%',
+  },
+  height: {
+    control: { type: 'text' },
+    defaultValue: '50px',
+  },
+  backgroundColor: {
+    control: { type: 'text' },
+    defaultValue: '#eee',
+  },
+  highlightColor: {
+    control: { type: 'text' },
+    defaultValue: '#ddd',
+  },
+}
+
+export default {
+  title: 'Atoms/Skeleton',
+  argTypes,
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
+}

From 2da4806eb59530a36738e4c8a305a6912213b7ad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lar=C3=ADcia=20Mota?= <laricia.mota@vtex.com.br>
Date: Thu, 2 Sep 2021 16:27:11 -0300
Subject: [PATCH 2/7] Move animation to theme

---
 .../store-ui/src/atoms/Skeleton/Skeleton.tsx  | 80 ++-----------------
 .../src/atoms/Skeleton/stories/Skeleton.mdx   | 10 +++
 .../Skeleton/stories/Skeleton.stories.tsx     | 37 +--------
 packages/store-ui/src/index.ts                |  3 +
 themes/theme-b2c-tailwind/src/atoms/index.css |  1 +
 .../theme-b2c-tailwind/src/atoms/skeleton.css |  7 ++
 6 files changed, 28 insertions(+), 110 deletions(-)
 create mode 100644 themes/theme-b2c-tailwind/src/atoms/skeleton.css

diff --git a/packages/store-ui/src/atoms/Skeleton/Skeleton.tsx b/packages/store-ui/src/atoms/Skeleton/Skeleton.tsx
index fa66e262ad..ab5b80d659 100644
--- a/packages/store-ui/src/atoms/Skeleton/Skeleton.tsx
+++ b/packages/store-ui/src/atoms/Skeleton/Skeleton.tsx
@@ -1,26 +1,6 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { forwardRef } from 'react'
-import type { HtmlHTMLAttributes } from 'react'
-import { jsx, css, keyframes } from '@emotion/core'
+import React, { forwardRef } from 'react'
 
-export interface SkeletonProps extends HtmlHTMLAttributes<HTMLDivElement> {
-  /**
-   * Skeleton's width
-   */
-  width?: string
-  /**
-   * Skeleton's height
-   */
-  height?: string
-  /**
-   * Background, or primary, color
-   */
-  backgroundColor?: string
-  /**
-   * Highlight color, the one that will look like it's moving
-   */
-  highlightColor?: string
+export interface SkeletonProps {
   /**
    * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
    */
@@ -28,62 +8,12 @@ export interface SkeletonProps extends HtmlHTMLAttributes<HTMLDivElement> {
 }
 
 const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(function Skeleton(
-  {
-    width = '100%',
-    height = '50px',
-    backgroundColor = '#ddd',
-    highlightColor = '#eee',
-    testId = 'store-skeleton',
-  },
+  { testId = 'store-skeleton', ...props },
   ref
 ) {
   return (
-    <div
-      ref={ref}
-      data-store-skeleton
-      data-testid={testId}
-      css={css`
-      background-color: ${highlightColor}
-      border-radius: 4px;
-      display: block;
-      line-height: 1;
-      width: ${width};
-      height: ${height};
-      position: relative;
-      overflow: hidden;
-      margin-top: 4px;
-    `}
-    >
-      <div
-        css={css`
-          width: 300vw;
-          height: 100%;
-          position: relative;
-          left: 0;
-          background-color: ${backgroundColor};
-          background-image: linear-gradient(
-            90deg,
-            ${backgroundColor},
-            ${backgroundColor} 30%,
-            ${highlightColor} 60%,
-            ${backgroundColor} 70%,
-            ${backgroundColor}
-          );
-          background-size: 50% 100%;
-          background-repeat: repeat-x;
-          animation: ${keyframes`
-            0% {
-              /* Animating absolute units, such as vw, has
-              better performance than relative units, such as %,
-              because it needs to be recalculated every frame */
-              transform: translate3d(-150vw, 0, 0);
-            }
-            100% {
-              transform: translate3d(0, 0, 0);
-            }
-          `} 800ms infinite linear;
-        `}
-      />
+    <div ref={ref} data-store-skeleton-container data-testid={testId}>
+      <div data-store-skeleton {...props} />
     </div>
   )
 })
diff --git a/packages/store-ui/src/atoms/Skeleton/stories/Skeleton.mdx b/packages/store-ui/src/atoms/Skeleton/stories/Skeleton.mdx
index 6d9b2808bc..8b1f64afaf 100644
--- a/packages/store-ui/src/atoms/Skeleton/stories/Skeleton.mdx
+++ b/packages/store-ui/src/atoms/Skeleton/stories/Skeleton.mdx
@@ -10,3 +10,13 @@ import Skeleton from '../Skeleton'
 # Props
 
 <ArgsTable of={Skeleton} />
+
+# CSS Selectors
+
+```css
+[data-store-skeleton-container] {
+}
+
+[data-store-skeleton] {
+}
+```
diff --git a/packages/store-ui/src/atoms/Skeleton/stories/Skeleton.stories.tsx b/packages/store-ui/src/atoms/Skeleton/stories/Skeleton.stories.tsx
index 5f08ddefcb..eff453d5a8 100644
--- a/packages/store-ui/src/atoms/Skeleton/stories/Skeleton.stories.tsx
+++ b/packages/store-ui/src/atoms/Skeleton/stories/Skeleton.stories.tsx
@@ -1,51 +1,18 @@
 import type { Story } from '@storybook/react'
 import React from 'react'
 
-import type { ComponentArgTypes } from '../../../typings/utils'
 import type { SkeletonProps } from '../Skeleton'
 import Component from '../Skeleton'
 import mdx from './Skeleton.mdx'
 
-const SkeletonTemplate: Story<SkeletonProps> = ({
-  width,
-  height,
-  backgroundColor,
-  highlightColor,
-  testId,
-}) => (
-  <Component
-    width={width}
-    height={height}
-    backgroundColor={backgroundColor}
-    highlightColor={highlightColor}
-    testId={testId}
-  />
+const SkeletonTemplate: Story<SkeletonProps> = ({ testId, ...props }) => (
+  <Component testId={testId} {...props} />
 )
 
 export const Skeleton = SkeletonTemplate.bind({})
 
-const argTypes: ComponentArgTypes<SkeletonProps> = {
-  width: {
-    control: { type: 'text' },
-    defaultValue: '100%',
-  },
-  height: {
-    control: { type: 'text' },
-    defaultValue: '50px',
-  },
-  backgroundColor: {
-    control: { type: 'text' },
-    defaultValue: '#eee',
-  },
-  highlightColor: {
-    control: { type: 'text' },
-    defaultValue: '#ddd',
-  },
-}
-
 export default {
   title: 'Atoms/Skeleton',
-  argTypes,
   parameters: {
     docs: {
       page: mdx,
diff --git a/packages/store-ui/src/index.ts b/packages/store-ui/src/index.ts
index 6a1197bd87..360591eff4 100644
--- a/packages/store-ui/src/index.ts
+++ b/packages/store-ui/src/index.ts
@@ -38,6 +38,9 @@ export type { SliderProps } from './atoms/Slider'
 export { default as List } from './atoms/List'
 export type { ListProps } from './atoms/List'
 
+export { default as Skeleton } from './atoms/Skeleton'
+export type { SkeletonProps } from './atoms/Skeleton'
+
 // Molecules
 export { default as Bullets } from './molecules/Bullets'
 export type { BulletsProps } from './molecules/Bullets'
diff --git a/themes/theme-b2c-tailwind/src/atoms/index.css b/themes/theme-b2c-tailwind/src/atoms/index.css
index fbb52d98ea..67a976fc11 100644
--- a/themes/theme-b2c-tailwind/src/atoms/index.css
+++ b/themes/theme-b2c-tailwind/src/atoms/index.css
@@ -7,3 +7,4 @@
 @import "./overlay.css";
 @import "./badge.css";
 @import "./slider.css";
+@import "./skeleton.css";
diff --git a/themes/theme-b2c-tailwind/src/atoms/skeleton.css b/themes/theme-b2c-tailwind/src/atoms/skeleton.css
new file mode 100644
index 0000000000..2b4744b4f4
--- /dev/null
+++ b/themes/theme-b2c-tailwind/src/atoms/skeleton.css
@@ -0,0 +1,7 @@
+[data-store-skeleton-container] {
+  @apply animate-pulse;
+}
+
+[data-store-skeleton] {
+  @apply rounded bg-gray-400 h-14 w-96;
+}

From 186f97786c4d73dd2cf1a72108aede101bbb13cd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lar=C3=ADcia=20Mota?= <laricia.mota@vtex.com.br>
Date: Thu, 2 Sep 2021 16:51:55 -0300
Subject: [PATCH 3/7] Import tailwind utilities

---
 themes/theme-b2c-tailwind/src/index.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/themes/theme-b2c-tailwind/src/index.css b/themes/theme-b2c-tailwind/src/index.css
index 02925b68bb..0c2b308c31 100644
--- a/themes/theme-b2c-tailwind/src/index.css
+++ b/themes/theme-b2c-tailwind/src/index.css
@@ -1,2 +1,3 @@
 @import "./atoms/index.css";
 @import "./molecules/index.css";
+@import "./utils/utilities.css";

From 0d50bf24ff7ac5bc229b873d58037070f70d3855 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lar=C3=ADcia=20Mota?= <laricia.mota@vtex.com.br>
Date: Thu, 2 Sep 2021 17:51:53 -0300
Subject: [PATCH 4/7] Update test

---
 .../store-ui/src/atoms/Skeleton/Skeleton.test.tsx     | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/store-ui/src/atoms/Skeleton/Skeleton.test.tsx b/packages/store-ui/src/atoms/Skeleton/Skeleton.test.tsx
index 2acaaf73e6..5774b49877 100644
--- a/packages/store-ui/src/atoms/Skeleton/Skeleton.test.tsx
+++ b/packages/store-ui/src/atoms/Skeleton/Skeleton.test.tsx
@@ -4,9 +4,14 @@ import React from 'react'
 import Skeleton from './Skeleton'
 
 describe('Skeleton', () => {
-  it('`data-store-skeleton` is present', () => {
-    const { getByTestId } = render(<Skeleton testId="store-skeleton" />)
+  const { getByTestId } = render(<Skeleton testId="store-skeleton" />)
+  const skeleton = getByTestId('store-skeleton')
+
+  it('`data-store-skeleton-container` is present', () => {
+    expect(skeleton).toHaveAttribute('data-store-skeleton-container')
+  })
 
-    expect(getByTestId('store-skeleton')).toHaveAttribute('data-store-skeleton')
+  it('`data-store-skeleton` is present', () => {
+    expect(skeleton.firstChild).toHaveAttribute('data-store-skeleton')
   })
 })

From cc395b956f4fee7204592b5e993778e352f71f48 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lar=C3=ADcia=20Mota?= <laricia.mota@vtex.com.br>
Date: Fri, 3 Sep 2021 14:34:18 -0300
Subject: [PATCH 5/7] Use only 1 div

---
 .../store-ui/src/atoms/Skeleton/Skeleton.test.tsx    | 12 ++++--------
 packages/store-ui/src/atoms/Skeleton/Skeleton.tsx    |  6 +-----
 .../store-ui/src/atoms/Skeleton/stories/Skeleton.mdx |  3 ---
 themes/theme-b2c-tailwind/src/atoms/skeleton.css     |  6 +-----
 4 files changed, 6 insertions(+), 21 deletions(-)

diff --git a/packages/store-ui/src/atoms/Skeleton/Skeleton.test.tsx b/packages/store-ui/src/atoms/Skeleton/Skeleton.test.tsx
index 5774b49877..3852e48ff5 100644
--- a/packages/store-ui/src/atoms/Skeleton/Skeleton.test.tsx
+++ b/packages/store-ui/src/atoms/Skeleton/Skeleton.test.tsx
@@ -4,14 +4,10 @@ import React from 'react'
 import Skeleton from './Skeleton'
 
 describe('Skeleton', () => {
-  const { getByTestId } = render(<Skeleton testId="store-skeleton" />)
-  const skeleton = getByTestId('store-skeleton')
-
-  it('`data-store-skeleton-container` is present', () => {
-    expect(skeleton).toHaveAttribute('data-store-skeleton-container')
-  })
-
   it('`data-store-skeleton` is present', () => {
-    expect(skeleton.firstChild).toHaveAttribute('data-store-skeleton')
+    const { getByTestId } = render(<Skeleton testId="store-skeleton" />)
+    const skeleton = getByTestId('store-skeleton')
+
+    expect(skeleton).toHaveAttribute('data-store-skeleton')
   })
 })
diff --git a/packages/store-ui/src/atoms/Skeleton/Skeleton.tsx b/packages/store-ui/src/atoms/Skeleton/Skeleton.tsx
index ab5b80d659..e20ad51f9d 100644
--- a/packages/store-ui/src/atoms/Skeleton/Skeleton.tsx
+++ b/packages/store-ui/src/atoms/Skeleton/Skeleton.tsx
@@ -11,11 +11,7 @@ const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(function Skeleton(
   { testId = 'store-skeleton', ...props },
   ref
 ) {
-  return (
-    <div ref={ref} data-store-skeleton-container data-testid={testId}>
-      <div data-store-skeleton {...props} />
-    </div>
-  )
+  return <div ref={ref} data-store-skeleton data-testid={testId} {...props} />
 })
 
 export default Skeleton
diff --git a/packages/store-ui/src/atoms/Skeleton/stories/Skeleton.mdx b/packages/store-ui/src/atoms/Skeleton/stories/Skeleton.mdx
index 8b1f64afaf..5b409abfe8 100644
--- a/packages/store-ui/src/atoms/Skeleton/stories/Skeleton.mdx
+++ b/packages/store-ui/src/atoms/Skeleton/stories/Skeleton.mdx
@@ -14,9 +14,6 @@ import Skeleton from '../Skeleton'
 # CSS Selectors
 
 ```css
-[data-store-skeleton-container] {
-}
-
 [data-store-skeleton] {
 }
 ```
diff --git a/themes/theme-b2c-tailwind/src/atoms/skeleton.css b/themes/theme-b2c-tailwind/src/atoms/skeleton.css
index 2b4744b4f4..49f0c65470 100644
--- a/themes/theme-b2c-tailwind/src/atoms/skeleton.css
+++ b/themes/theme-b2c-tailwind/src/atoms/skeleton.css
@@ -1,7 +1,3 @@
-[data-store-skeleton-container] {
-  @apply animate-pulse;
-}
-
 [data-store-skeleton] {
-  @apply rounded bg-gray-400 h-14 w-96;
+  @apply animate-pulse rounded bg-gray-400 h-14 w-96;
 }

From 3afd4d7212135b2c5e783389018f7f0f526bb01f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lar=C3=ADcia=20Mota?= <laricia.mota@vtex.com.br>
Date: Fri, 3 Sep 2021 14:49:00 -0300
Subject: [PATCH 6/7] Update story

---
 .../store-ui/src/atoms/Skeleton/stories/Skeleton.mdx     | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/store-ui/src/atoms/Skeleton/stories/Skeleton.mdx b/packages/store-ui/src/atoms/Skeleton/stories/Skeleton.mdx
index 5b409abfe8..82eef23846 100644
--- a/packages/store-ui/src/atoms/Skeleton/stories/Skeleton.mdx
+++ b/packages/store-ui/src/atoms/Skeleton/stories/Skeleton.mdx
@@ -1,19 +1,18 @@
 import { Story, Canvas, ArgsTable } from '@storybook/addon-docs'
 import Skeleton from '../Skeleton'
 
-# Preview
+# Skeleton
 
 <Canvas>
   <Story id="atoms-skeleton--skeleton" />
 </Canvas>
 
-# Props
+## Props
 
 <ArgsTable of={Skeleton} />
 
-# CSS Selectors
+## CSS Selectors
 
 ```css
-[data-store-skeleton] {
-}
+[data-store-skeleton] {}
 ```

From 1eea48d8d74c32d4e99954a5fa9c9de26caebd0d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lar=C3=ADcia=20Mota?= <laricia.mota@vtex.com.br>
Date: Fri, 3 Sep 2021 15:03:00 -0300
Subject: [PATCH 7/7] Extend HTMLDivElement

---
 packages/store-ui/src/atoms/Skeleton/Skeleton.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/store-ui/src/atoms/Skeleton/Skeleton.tsx b/packages/store-ui/src/atoms/Skeleton/Skeleton.tsx
index e20ad51f9d..0aeee603ab 100644
--- a/packages/store-ui/src/atoms/Skeleton/Skeleton.tsx
+++ b/packages/store-ui/src/atoms/Skeleton/Skeleton.tsx
@@ -1,6 +1,7 @@
 import React, { forwardRef } from 'react'
+import type { HTMLAttributes } from 'react'
 
-export interface SkeletonProps {
+export interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
    */