docs: showcase animations doc (#5792)

Author: lisalupi

packages/ui/src/__stories__/Guides/Animations.mdx

@@ -1,5 +1,6 @@
 import { Meta } from '@storybook/addon-docs/blocks'
 import Colors from '../components/Colors'
+import { ShowcaseAnimations } from "./ShowcaseAnimations/"
 
 <Meta title="Guides/Animations" />
 
@@ -47,30 +48,30 @@ const MyComponent = () => <div className="fadeIn" style={{ animationDuration: "3
 
 
 ## List
-- bounce
-- fadeIn
-- fadeOut
-- flash
-- ping
-- pulse
-- quickScaleDown
-- scaleBack
-- scaleDown
-- scaleForward
-- scaleUp
-- sketchIn
-- sketchOut
-- slideDownLarge
-- slideFromBottom
-- slideFromLeft
-- slideFromRight
-- slideFromTop
-- slideToBottom
-- slideToLeft
-- slideToRight
-- slideToTop
-- slideUpLarge
-- unfoldIn
-- unfoldOut
-- zoomIn
-- zoomOut
+- <ShowcaseAnimations animation="bounce"/>
+- <ShowcaseAnimations animation="fadeIn"/>
+- <ShowcaseAnimations animation="fadeOut"/>
+- <ShowcaseAnimations animation="flash"/>
+- <ShowcaseAnimations animation="ping"/>
+- <ShowcaseAnimations animation="pulse"/>
+- <ShowcaseAnimations animation="quickScaleDown"/>
+- <ShowcaseAnimations animation="scaleBack"/>
+- <ShowcaseAnimations animation="scaleDown"/>
+- <ShowcaseAnimations animation="scaleForward"/>
+- <ShowcaseAnimations animation="scaleUp"/>
+- <ShowcaseAnimations animation="sketchIn"/>
+- <ShowcaseAnimations animation="sketchOut"/>
+- <ShowcaseAnimations animation="slideDownLarge"/>
+- <ShowcaseAnimations animation="slideFromBottom"/>
+- <ShowcaseAnimations animation="slideFromLeft"/>
+- <ShowcaseAnimations animation="slideFromRight"/>
+- <ShowcaseAnimations animation="slideFromTop"/>
+- <ShowcaseAnimations animation="slideToBottom"/>
+- <ShowcaseAnimations animation="slideToLeft"/>
+- <ShowcaseAnimations animation="slideToRight"/>
+- <ShowcaseAnimations animation="slideToTop"/>
+- <ShowcaseAnimations animation="slideUpLarge"/>
+- <ShowcaseAnimations animation="unfoldIn"/>
+- <ShowcaseAnimations animation="unfoldOut"/>
+- <ShowcaseAnimations animation="zoomIn"/>
+- <ShowcaseAnimations animation="zoomOut"/>

packages/ui/src/__stories__/Guides/ShowcaseAnimations/index.tsx

@@ -0,0 +1,29 @@
+import { useState } from 'react'
+import { Stack } from '../../../components/Stack'
+import {
+  animationShowCaseAnimatedElement,
+  animationShowCaseContainer,
+} from './styles.css'
+
+export const ShowcaseAnimations = ({ animation }: { animation: string }) => {
+  const [className, setClassName] = useState('')
+  const animationClassname = `${animation}_uv`
+
+  return (
+    <Stack alignItems="center" direction="row" gap={2}>
+      {animation} :
+      <Stack
+        alignItems="center"
+        className={animationShowCaseContainer}
+        direction="row"
+        gap={2}
+        justifyContent="center"
+        onMouseEnter={() => setClassName(animationClassname)}
+        onMouseLeave={() => setClassName('')}
+      >
+        Hover me
+        <div className={`${className} ${animationShowCaseAnimatedElement}`} />
+      </Stack>
+    </Stack>
+  )
+}

packages/ui/src/__stories__/Guides/ShowcaseAnimations/styles.css.ts

@@ -0,0 +1,16 @@
+import { theme } from '@ultraviolet/themes'
+import { style } from '@vanilla-extract/css'
+
+export const animationShowCaseContainer = style({
+  padding: theme.space[1],
+  border: `1px solid ${theme.colors.neutral.border}`,
+  margin: theme.space['0.25'],
+})
+
+export const animationShowCaseAnimatedElement = style({
+  width: theme.sizing[300],
+  height: theme.sizing[300],
+  borderRadius: theme.radii.default,
+  background: theme.colors.primary.background,
+  border: theme.colors.primary.border,
+})