feat(store-ui): Spinner atom (#961)

* Spinner component for loading

* Spinner exports

* Fix data-testid

Co-authored-by: Igor Brasileiro <brasileiro456@gmail.com>

* remove explicit children prop

Co-authored-by: Igor Brasileiro <brasileiro456@gmail.com>

* BREAKING CHANGE: Remove deprecated folders (#927)

* feat(store-ui): adding list atom (#918)

Create List component as an Atom.

* 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

* Spinner exports

* lint

* Fix Spinner test

* removing duplicated line in package.json

Co-authored-by: Igor Brasileiro <brasileiro456@gmail.com>
Co-authored-by: Tiago Gimenes <tlgimenes@gmail.com>
Co-authored-by: Bento Pereira <40964933+bentoper@users.noreply.github.com>
Co-authored-by: Larícia Mota <laricia.mota@vtex.com.br>

lerna.json

@@ -8,8 +8,5 @@
     }
   },
   "changelogPreset": "angular",
-  "packages": [
-    "packages/*",
-    "themes/*"
-  ]
+  "packages": ["packages/*", "themes/*"]
 }

packages/store-ui/src/atoms/Spinner/Spinner.test.tsx

@@ -0,0 +1,12 @@
+import { render } from '@testing-library/react'
+import React from 'react'
+
+import Spinner from './Spinner'
+
+describe('Spinner', () => {
+  it('`data-store-spinner` is present', () => {
+    const { getByTestId } = render(<Spinner />)
+
+    expect(getByTestId('store-spinner')).toHaveAttribute('data-store-spinner')
+  })
+})

packages/store-ui/src/atoms/Spinner/Spinner.tsx

@@ -0,0 +1,17 @@
+import React, { forwardRef } from 'react'
+
+export type SpinnerProps = {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId?: string
+}
+
+const Spinner = forwardRef<HTMLDivElement, SpinnerProps>(function Spinner(
+  { children, testId = 'store-spinner', ...props },
+  ref
+) {
+  return <span ref={ref} data-store-spinner data-testid={testId} {...props} />
+})
+
+export default Spinner

packages/store-ui/src/atoms/Spinner/index.tsx

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

packages/store-ui/src/atoms/Spinner/stories/Spinner.mdx

@@ -0,0 +1,18 @@
+import { Story, Canvas, ArgsTable } from '@storybook/addon-docs'
+import Spinner from '../Spinner'
+
+# Spinner
+
+<Canvas>
+  <Story id="atoms-spinner--spinner" />
+</Canvas>
+
+## Props
+
+<ArgsTable of={Spinner} />
+
+## CSS Selectors
+
+```css
+[data-store-spinner] {}
+```

packages/store-ui/src/atoms/Spinner/stories/Spinner.stories.tsx

@@ -0,0 +1,21 @@
+import type { Story } from '@storybook/react'
+import React from 'react'
+
+import type { SpinnerProps } from '../Spinner'
+import Component from '../Spinner'
+import mdx from './Spinner.mdx'
+
+const SpinnerTemplate: Story<SpinnerProps> = ({ testId }) => (
+  <Component testId={testId} />
+)
+
+export const Spinner = SpinnerTemplate.bind({})
+
+export default {
+  title: 'Atoms/Spinner',
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
+}

packages/store-ui/src/index.ts

@@ -38,6 +38,9 @@ export type { ListProps } from './atoms/List'
 export { default as Skeleton } from './atoms/Skeleton'
 export type { SkeletonProps } from './atoms/Skeleton'
 
+export { default as Spinner } from './atoms/Spinner'
+export type { SpinnerProps } from './atoms/Spinner'
+
 // Molecules
 export { default as Bullets } from './molecules/Bullets'
 export type { BulletsProps } from './molecules/Bullets'

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

@@ -1,9 +1,10 @@
+@import "./badge.css";
 @import "./button.css";
 @import "./icon.css";
 @import "./input.css";
+@import "./overlay.css";
 @import "./popover.css";
 @import "./price.css";
 @import "./textarea.css";
-@import "./overlay.css";
-@import "./badge.css";
-@import "./skeleton.css";
+@import "./skeleton.css";
+@import "./spinner.css";

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

@@ -0,0 +1,13 @@
+[data-store-spinner] {
+  @apply block animate-spin text-xs relative;
+
+  border-top: 0.2em solid rgba(0, 0, 0, 0.2);
+  border-right: 0.2em solid rgba(0, 0, 0, 0.2);
+  border-bottom: 0.2em solid rgba(0, 0, 0, 0.2);
+  border-left: 0.2em solid #000000;
+}
+
+[data-store-spinner], [data-store-spinner]:after {
+  @apply h-4 w-4;
+  border-radius: 50%;
+}