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

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')
+  })
+})

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

packages/store-ui/src/atoms/Skeleton/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Skeleton'
+export type { SkeletonProps } from './Skeleton'

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] {}
+```

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,
+    },
+  },
+}

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'

themes/theme-b2c-tailwind/src/atoms/index.css

@@ -7,3 +7,4 @@
 @import "./overlay.css";
 @import "./badge.css";
 @import "./slider.css";
+@import "./skeleton.css";

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;
+}

themes/theme-b2c-tailwind/src/index.css

@@ -1,2 +1,3 @@
 @import "./atoms/index.css";
 @import "./molecules/index.css";
+@import "./utils/utilities.css";