diff --git a/apps/docs/content/getting-started/animation.mdx b/apps/docs/content/getting-started/animation.mdx index ceaa2f2ec4..43c537f4f4 100644 --- a/apps/docs/content/getting-started/animation.mdx +++ b/apps/docs/content/getting-started/animation.mdx @@ -1,6 +1,6 @@ --- title: Animation -storybook: '/brand/storybook/?path=/story/components-animations--playground' +storybook: '/brand/storybook/?path=/story/components-animationprovider--playground' description: Use animations to add visual interest and interactivity to a web page or application. --- diff --git a/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Default-1-linux.png b/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Default-1-linux.png index 654596e286..0f6a98f01b 100644 Binary files a/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Default-1-linux.png and b/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Default-1-linux.png differ diff --git a/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Three-Options-1-linux.png b/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Three-Options-1-linux.png index 38123ec3c1..7452d3cc93 100644 Binary files a/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Three-Options-1-linux.png and b/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Three-Options-1-linux.png differ diff --git a/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-With-Included-And-Excluded-Features-1-linux.png b/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-With-Included-And-Excluded-Features-1-linux.png index 85c80324a4..9bbfa3627e 100644 Binary files a/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-With-Included-And-Excluded-Features-1-linux.png and b/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-With-Included-And-Excluded-Features-1-linux.png differ diff --git a/packages/react/src/animation/Animation.examples.stories.tsx b/packages/react/src/animation/Animation.examples.stories.tsx new file mode 100644 index 0000000000..5450bb5934 --- /dev/null +++ b/packages/react/src/animation/Animation.examples.stories.tsx @@ -0,0 +1,243 @@ +import React from 'react' +import {Meta} from '@storybook/react' +import {AnimationProvider} from './AnimationProvider/AnimationProvider' +import {Label, Image, Text, Stack, Animate, Heading, ThemeProvider, LogoSuite} from '..' +import {CheckCircleFillIcon, RocketIcon} from '@primer/octicons-react' + +import styles from './Animation.stories.module.css' +import clsx from 'clsx' + +export default { + title: 'Components/AnimationProvider/Examples', +} as Meta + +export const DiscussionsHero = () => ( + + + Discussions UI + + + + + + + + + + + +) + +export const ProgressBars = () => { + const ProgressBar = ({width}: {width: string}) => ( +
+
+ +
+
+ ) + + return ( + + + + + + + + ) +} + +export const LogoBar = () => { + return ( + + + Animated LogoSuite + + + + GitHub + + + + + + Microsoft + + + + + + + + + + LinkedIn + + + + + + + + + + ) +} + +export const TimelineBar = () => { + return ( + + +
+ + + + Productivity + + + + Accelerate high-quality software development. + {' '} + Our AI-powered platform drives innovation with tools that boost developer velocity. + + +
+ + + + +
+ +
+ + + ) +} diff --git a/packages/react/src/animation/Animation.features.stories.tsx b/packages/react/src/animation/Animation.features.stories.tsx index 89a2a0d5ea..ee38a1a00d 100644 --- a/packages/react/src/animation/Animation.features.stories.tsx +++ b/packages/react/src/animation/Animation.features.stories.tsx @@ -1,256 +1,84 @@ import React from 'react' import {Meta} from '@storybook/react' -import {AnimationProvider} from './AnimationProvider/AnimationProvider' -import {Label, Image, Text, Stack, Animate, Heading, ThemeProvider, LogoSuite} from '..' -import {CheckCircleFillIcon, RocketIcon} from '@primer/octicons-react' +import {AnimationProvider, AnimationVariants} from './AnimationProvider/AnimationProvider' +import {Text, Stack, Box} from '..' import styles from './Animation.stories.module.css' -import clsx from 'clsx' export default { - title: 'Components/Animations/Examples', - component: AnimationProvider, + title: 'Components/AnimationProvider/Features', } as Meta -export const DiscussionsHero = () => ( - - - Discussions UI - - - - - - - - - - +export const AnimationOnPress = () => ( + + + + Fade out on press + + ) -export const ProgressBars = () => { - const ProgressBar = ({width}: {width: string}) => ( -
-
- -
-
- ) - - return ( - - - - - +export const IntersectionObserver = ({variant, ...args}) => ( + + + Scroll to reveal + + + + {variant} - - ) + + + +) +IntersectionObserver.args = { + visibilityOptions: 'middle-of-screen', + variant: 'fade-in', } - -export const LogoBar = () => { - return ( - - - Animated LogoSuite - - - - GitHub - - - - - - Microsoft - - - - - - - - - - LinkedIn - - - - - - - - - - ) +IntersectionObserver.argTypes = { + visibilityOptions: { + options: ['bottom-of-screen', 'middle-of-screen', 'about-to-leave'], + control: 'radio', + }, + variant: { + name: 'animate', + options: AnimationVariants, + control: 'select', + table: { + category: 'Children', + }, + }, } -export const AnimationOnPress = () => { - return ( - - - - Fade out on press - - - - ) +export const AdvancedAnimation = args => ( + + + {args.variant} + + +) +AdvancedAnimation.args = { + variant: 'fade-in', + delay: 100, + duration: 1000, + ease: 'linear', } - -export const TimelineBar = () => { - return ( - - -
- - - - Productivity - - - - Accelerate high-quality software development. - {' '} - Our AI-powered platform drives innovation with tools that boost developer velocity. - - -
- - - - -
- -
- - - ) +AdvancedAnimation.argTypes = { + variant: { + name: 'animate.variant', + options: AnimationVariants, + control: 'select', + }, + delay: { + name: 'animate.delay', + control: 'number', + }, + duration: { + name: 'animate.duration', + control: 'number', + }, + ease: { + name: 'animate.ease', + }, } diff --git a/packages/react/src/animation/Animation.stories.module.css b/packages/react/src/animation/Animation.stories.module.css index c06f7f4ac2..1ef0ab2bfb 100644 --- a/packages/react/src/animation/Animation.stories.module.css +++ b/packages/react/src/animation/Animation.stories.module.css @@ -100,8 +100,10 @@ */ .Playground { background-color: var(--brand-color-neutral-subtle); - max-width: 200px; + width: 200px; min-height: 200px; + justify-content: center; + align-items: center; } .PlaygroundText { diff --git a/packages/react/src/animation/Animation.stories.tsx b/packages/react/src/animation/Animation.stories.tsx index 7141adcd26..5997790f6a 100644 --- a/packages/react/src/animation/Animation.stories.tsx +++ b/packages/react/src/animation/Animation.stories.tsx @@ -6,22 +6,27 @@ import {Text, Stack} from '..' import styles from './Animation.stories.module.css' export default { - title: 'Components/Animations', + title: 'Components/AnimationProvider', component: AnimationProvider, } as Meta +export const Default = () => ( + + + fade-in + + +) + export const Playground = args => { return ( - - {args.variant} + + {Array.from({length: 3}).map((_, i) => ( + + {args.variant} + + ))} ) @@ -29,13 +34,25 @@ export const Playground = args => { Playground.args = { variant: 'fade-in', + disableAnimations: false, + animationTrigger: 'on-visible', + runOnce: false, + autoStaggerChildren: true, + staggerDelayIncrement: 100, } Playground.argTypes = { variant: { - control: { - type: 'inline-radio', - options: AnimationVariants, + name: 'animate', + options: AnimationVariants, + control: 'select', + table: { + category: 'Children', + }, + }, + visibilityOptions: { + table: { + disable: true, }, }, } diff --git a/packages/react/src/animation/animation.visual.spec.ts b/packages/react/src/animation/animation.visual.spec.ts index e030217778..e0c325cd4f 100644 --- a/packages/react/src/animation/animation.visual.spec.ts +++ b/packages/react/src/animation/animation.visual.spec.ts @@ -7,9 +7,79 @@ import {test, expect} from '@playwright/test' // eslint-disable-next-line i18n-text/no-en test.describe('Visual Comparison: animation', () => { + test('animation / Default', async ({page}) => { + await page.goto('http://localhost:6006/iframe.html?args=&id=components-animationprovider--default&viewMode=story') + + await page.waitForTimeout(500) + expect(await page.screenshot()).toMatchSnapshot() + }) + + test('animation / Playground', async ({page}) => { + await page.goto( + 'http://localhost:6006/iframe.html?args=&id=components-animationprovider--playground&viewMode=story', + ) + + await page.waitForTimeout(500) + expect(await page.screenshot()).toMatchSnapshot() + }) + + test('animation / Discussions Hero', async ({page}) => { + await page.goto( + 'http://localhost:6006/iframe.html?args=&id=components-animationprovider-examples--discussions-hero&viewMode=story', + ) + + await page.waitForTimeout(500) + expect(await page.screenshot()).toMatchSnapshot() + }) + + test('animation / Progress Bars', async ({page}) => { + await page.goto( + 'http://localhost:6006/iframe.html?args=&id=components-animationprovider-examples--progress-bars&viewMode=story', + ) + + await page.waitForTimeout(500) + expect(await page.screenshot()).toMatchSnapshot() + }) + + test('animation / Logo Bar', async ({page}) => { + await page.goto( + 'http://localhost:6006/iframe.html?args=&id=components-animationprovider-examples--logo-bar&viewMode=story', + ) + + await page.waitForTimeout(500) + expect(await page.screenshot()).toMatchSnapshot() + }) + + test('animation / Timeline Bar', async ({page}) => { + await page.goto( + 'http://localhost:6006/iframe.html?args=&id=components-animationprovider-examples--timeline-bar&viewMode=story', + ) + + await page.waitForTimeout(500) + expect(await page.screenshot()).toMatchSnapshot() + }) + test('animation / Animation On Press', async ({page}) => { await page.goto( - 'http://localhost:6006/iframe.html?args=&id=components-animations-examples--animation-on-press&viewMode=story', + 'http://localhost:6006/iframe.html?args=&id=components-animationprovider-features--animation-on-press&viewMode=story', + ) + + await page.waitForTimeout(500) + expect(await page.screenshot()).toMatchSnapshot() + }) + + test('animation / Intersection Observer', async ({page}) => { + await page.goto( + 'http://localhost:6006/iframe.html?args=&id=components-animationprovider-features--intersection-observer&viewMode=story', + ) + + await page.waitForTimeout(500) + expect(await page.screenshot()).toMatchSnapshot() + }) + + test('animation / Advanced Animation', async ({page}) => { + await page.goto( + 'http://localhost:6006/iframe.html?args=&id=components-animationprovider-features--advanced-animation&viewMode=story', ) await page.waitForTimeout(500) diff --git a/packages/react/src/animation/animation.visual.spec.ts-snapshots/Visual-Comparison-animation-animation-Advanced-Animation-1-linux.png b/packages/react/src/animation/animation.visual.spec.ts-snapshots/Visual-Comparison-animation-animation-Advanced-Animation-1-linux.png new file mode 100644 index 0000000000..c5900891fa Binary files /dev/null and b/packages/react/src/animation/animation.visual.spec.ts-snapshots/Visual-Comparison-animation-animation-Advanced-Animation-1-linux.png differ diff --git a/packages/react/src/animation/animation.visual.spec.ts-snapshots/Visual-Comparison-animation-animation-Animation-On-Press-1-linux.png b/packages/react/src/animation/animation.visual.spec.ts-snapshots/Visual-Comparison-animation-animation-Animation-On-Press-1-linux.png index bfcbd2095a..72bf0ad611 100644 Binary files a/packages/react/src/animation/animation.visual.spec.ts-snapshots/Visual-Comparison-animation-animation-Animation-On-Press-1-linux.png and b/packages/react/src/animation/animation.visual.spec.ts-snapshots/Visual-Comparison-animation-animation-Animation-On-Press-1-linux.png differ diff --git a/packages/react/src/animation/animation.visual.spec.ts-snapshots/Visual-Comparison-animation-animation-Default-1-linux.png b/packages/react/src/animation/animation.visual.spec.ts-snapshots/Visual-Comparison-animation-animation-Default-1-linux.png new file mode 100644 index 0000000000..87d81d1633 Binary files /dev/null and b/packages/react/src/animation/animation.visual.spec.ts-snapshots/Visual-Comparison-animation-animation-Default-1-linux.png differ diff --git a/packages/react/src/animation/animation.visual.spec.ts-snapshots/Visual-Comparison-animation-animation-Discussions-Hero-1-linux.png b/packages/react/src/animation/animation.visual.spec.ts-snapshots/Visual-Comparison-animation-animation-Discussions-Hero-1-linux.png new file mode 100644 index 0000000000..fb2b5283df Binary files /dev/null and b/packages/react/src/animation/animation.visual.spec.ts-snapshots/Visual-Comparison-animation-animation-Discussions-Hero-1-linux.png differ diff --git a/packages/react/src/animation/animation.visual.spec.ts-snapshots/Visual-Comparison-animation-animation-Intersection-Observer-1-linux.png b/packages/react/src/animation/animation.visual.spec.ts-snapshots/Visual-Comparison-animation-animation-Intersection-Observer-1-linux.png new file mode 100644 index 0000000000..8099e69c44 Binary files /dev/null and b/packages/react/src/animation/animation.visual.spec.ts-snapshots/Visual-Comparison-animation-animation-Intersection-Observer-1-linux.png differ diff --git a/packages/react/src/animation/animation.visual.spec.ts-snapshots/Visual-Comparison-animation-animation-Logo-Bar-1-linux.png b/packages/react/src/animation/animation.visual.spec.ts-snapshots/Visual-Comparison-animation-animation-Logo-Bar-1-linux.png new file mode 100644 index 0000000000..7a2af11fc5 Binary files /dev/null and b/packages/react/src/animation/animation.visual.spec.ts-snapshots/Visual-Comparison-animation-animation-Logo-Bar-1-linux.png differ diff --git a/packages/react/src/animation/animation.visual.spec.ts-snapshots/Visual-Comparison-animation-animation-Playground-1-linux.png b/packages/react/src/animation/animation.visual.spec.ts-snapshots/Visual-Comparison-animation-animation-Playground-1-linux.png new file mode 100644 index 0000000000..e740edd89a Binary files /dev/null and b/packages/react/src/animation/animation.visual.spec.ts-snapshots/Visual-Comparison-animation-animation-Playground-1-linux.png differ diff --git a/packages/react/src/animation/animation.visual.spec.ts-snapshots/Visual-Comparison-animation-animation-Progress-Bars-1-linux.png b/packages/react/src/animation/animation.visual.spec.ts-snapshots/Visual-Comparison-animation-animation-Progress-Bars-1-linux.png new file mode 100644 index 0000000000..cc2332d394 Binary files /dev/null and b/packages/react/src/animation/animation.visual.spec.ts-snapshots/Visual-Comparison-animation-animation-Progress-Bars-1-linux.png differ diff --git a/packages/react/src/animation/animation.visual.spec.ts-snapshots/Visual-Comparison-animation-animation-Timeline-Bar-1-linux.png b/packages/react/src/animation/animation.visual.spec.ts-snapshots/Visual-Comparison-animation-animation-Timeline-Bar-1-linux.png new file mode 100644 index 0000000000..007c3db5f3 Binary files /dev/null and b/packages/react/src/animation/animation.visual.spec.ts-snapshots/Visual-Comparison-animation-animation-Timeline-Bar-1-linux.png differ diff --git a/packages/react/src/recipes/seo/Category/Category.visual.spec.ts-snapshots/Visual-Comparison-Category-Category-Playground-1-linux.png b/packages/react/src/recipes/seo/Category/Category.visual.spec.ts-snapshots/Visual-Comparison-Category-Category-Playground-1-linux.png index a674a86f47..c4a7e46b1c 100644 Binary files a/packages/react/src/recipes/seo/Category/Category.visual.spec.ts-snapshots/Visual-Comparison-Category-Category-Playground-1-linux.png and b/packages/react/src/recipes/seo/Category/Category.visual.spec.ts-snapshots/Visual-Comparison-Category-Category-Playground-1-linux.png differ