feat(spinner): update spinner story and add background visible prop

packages/components/spinner/package.json

@@ -12,6 +12,6 @@
     "build": "vite build"
   },
   "dependencies": {
-    "@spark-ui/visuall-hidden": "1"
+    "@spark-ui/visually-hidden": "0"
   }
 }

packages/components/spinner/src/Spinner.doc.mdx

@@ -1,5 +1,4 @@
 import { ArgsTable, Meta, Story, Canvas } from '@storybook/addon-docs'
-import { StoryHeading } from '@docs/helpers/StoryHeading'
 
 import { Spinner } from '.'
 
@@ -11,48 +10,56 @@ import * as stories from './Spinner.stories'
 
 Spinners provide a visual cue that an action is processing awaiting a course of change or a result.
 
-<StoryHeading label="Install" />
+# Install
 
 ```sh
 npm install @spark-ui/spinner
 ```
 
-<StoryHeading label="Import" />
+# Import
 
 ```tsx
 import { Spinner } from '@spark-ui/spinner'
 ```
 
-<StoryHeading label="Props" />
+# Props
 
 <ArgsTable of={Spinner} />
 
-<StoryHeading label="Default" />
+# Default
 
 <Canvas>
   <Story of={stories.Default} />
 </Canvas>
 
-<StoryHeading label="Intent" />
+# Intent
 
 Use `intent` prop to set the color of the spinner.
 
 <Canvas>
   <Story of={stories.Intents} />
 </Canvas>
 
-<StoryHeading label="Size" />
+# Size
 
 Use `size` prop to set the size of the spinner.
 
 <Canvas>
   <Story of={stories.Sizes} />
 </Canvas>
 
-<StoryHeading label="Label" />
+# Label
 
 Use `label` prop for accessibility, it is important to add a fallback loading text. This text will be visible to screen readers.
 
 <Canvas>
   <Story of={stories.Label} />
 </Canvas>
+
+# Background
+
+Set `isBackgroundVisible` prop to `true` to display a background under the spinner.
+
+<Canvas>
+  <Story of={stories.Background} />
+</Canvas>

packages/components/spinner/src/Spinner.stories.tsx

@@ -43,3 +43,5 @@ export const Sizes: StoryFn = _args => (
 )
 
 export const Label: StoryFn = _args => <Spinner label="Loading" />
+
+export const Background: StoryFn = _args => <Spinner isBackgroundVisible />

packages/components/spinner/src/Spinner.tsx

@@ -1,4 +1,4 @@
-import { VisuallyHidden } from '@spark-ui/visuall-hidden'
+import { VisuallyHidden } from '@spark-ui/visually-hidden'
 import { ComponentPropsWithoutRef, forwardRef, PropsWithChildren } from 'react'
 
 import { spinnerVariants, SpinnerVariantsProps } from './Spinner.variants'
@@ -8,9 +8,13 @@ export interface SpinnerProps extends ComponentPropsWithoutRef<'div'>, SpinnerVa
 }
 
 export const Spinner = forwardRef<HTMLDivElement, PropsWithChildren<SpinnerProps>>(
-  ({ className, size, intent, label, ...others }, ref) => {
+  ({ className, size, intent, label, isBackgroundVisible, ...others }, ref) => {
     return (
-      <div ref={ref} className={spinnerVariants({ className, size, intent })} {...others}>
+      <div
+        ref={ref}
+        className={spinnerVariants({ className, size, intent, isBackgroundVisible })}
+        {...others}
+      >
         {label && <VisuallyHidden>{label}</VisuallyHidden>}
       </div>
     )

packages/components/spinner/src/Spinner.variants.tsx

@@ -3,18 +3,11 @@ import { cva, VariantProps } from 'class-variance-authority'
 const defaultVariants = {
   intent: 'current',
   size: 'small',
+  isBackgroundVisible: false,
 } as const
 
 export const spinnerVariants = cva(
-  [
-    'inline-block',
-    'border-solid',
-    'rounded-full',
-    'border-md',
-    'border-b-neutral-container',
-    'border-l-neutral-container',
-    'animate-spin',
-  ],
+  ['inline-block', 'border-solid', 'rounded-full', 'border-md', 'animate-spin'],
   {
     variants: {
       size: {
@@ -31,6 +24,10 @@ export const spinnerVariants = cva(
         info: ['border-info'],
         neutral: ['border-neutral'],
       },
+      isBackgroundVisible: {
+        true: ['border-b-neutral-container', 'border-l-neutral-container'],
+        false: ['border-b-transparent', 'border-l-transparent'],
+      },
     },
     defaultVariants,
   }