From ef25cdea6f6e344b4005ecd2ec0c80d959df35b0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lar=C3=ADcia=20Mota?= <laricia.mota@vtex.com.br>
Date: Mon, 13 Sep 2021 10:20:08 -0300
Subject: [PATCH] feat(store-ui): Add Skeleton Atom (#911)

* Add skeleton atom

* Move animation to theme

* Import tailwind utilities

* Update test

* Use only 1 div

* Update story

* Extend HTMLDivElement
---
 .../src/atoms/Skeleton/Skeleton.test.tsx      | 13 ++++++++++++
 .../store-ui/src/atoms/Skeleton/Skeleton.tsx  | 18 ++++++++++++++++
 packages/store-ui/src/atoms/Skeleton/index.ts |  2 ++
 .../src/atoms/Skeleton/stories/Skeleton.mdx   | 18 ++++++++++++++++
 .../Skeleton/stories/Skeleton.stories.tsx     | 21 +++++++++++++++++++
 packages/store-ui/src/index.ts                |  3 +++
 themes/theme-b2c-tailwind/src/atoms/index.css |  1 +
 .../theme-b2c-tailwind/src/atoms/skeleton.css |  3 +++
 themes/theme-b2c-tailwind/src/index.css       |  1 +
 9 files changed, 80 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
 create mode 100644 themes/theme-b2c-tailwind/src/atoms/skeleton.css

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..3852e48ff5
--- /dev/null
+++ b/packages/store-ui/src/atoms/Skeleton/Skeleton.test.tsx
@@ -0,0 +1,13 @@
+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" />)
+    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
new file mode 100644
index 0000000000..0aeee603ab
--- /dev/null
+++ b/packages/store-ui/src/atoms/Skeleton/Skeleton.tsx
@@ -0,0 +1,18 @@
+import React, { forwardRef } from 'react'
+import type { HTMLAttributes } from 'react'
+
+export interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId?: string
+}
+
+const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(function Skeleton(
+  { testId = 'store-skeleton', ...props },
+  ref
+) {
+  return <div ref={ref} data-store-skeleton data-testid={testId} {...props} />
+})
+
+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..82eef23846
--- /dev/null
+++ b/packages/store-ui/src/atoms/Skeleton/stories/Skeleton.mdx
@@ -0,0 +1,18 @@
+import { Story, Canvas, ArgsTable } from '@storybook/addon-docs'
+import Skeleton from '../Skeleton'
+
+# Skeleton
+
+<Canvas>
+  <Story id="atoms-skeleton--skeleton" />
+</Canvas>
+
+## Props
+
+<ArgsTable of={Skeleton} />
+
+## CSS Selectors
+
+```css
+[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
new file mode 100644
index 0000000000..eff453d5a8
--- /dev/null
+++ b/packages/store-ui/src/atoms/Skeleton/stories/Skeleton.stories.tsx
@@ -0,0 +1,21 @@
+import type { Story } from '@storybook/react'
+import React from 'react'
+
+import type { SkeletonProps } from '../Skeleton'
+import Component from '../Skeleton'
+import mdx from './Skeleton.mdx'
+
+const SkeletonTemplate: Story<SkeletonProps> = ({ testId, ...props }) => (
+  <Component testId={testId} {...props} />
+)
+
+export const Skeleton = SkeletonTemplate.bind({})
+
+export default {
+  title: 'Atoms/Skeleton',
+  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..49f0c65470
--- /dev/null
+++ b/themes/theme-b2c-tailwind/src/atoms/skeleton.css
@@ -0,0 +1,3 @@
+[data-store-skeleton] {
+  @apply animate-pulse rounded bg-gray-400 h-14 w-96;
+}
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";