Skeleton Loader - Chromatic tests

.changeset/warm-avocados-enjoy.md

@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/skeleton-loader': minor
+---
+
+Adds `enableAnimations` prop

packages/skeleton-loader/src/CardSkeleton/CardSkeleton.stories.tsx

@@ -1,24 +1,32 @@
 import React from 'react';
-import { storybookArgTypes } from '@lg-tools/storybook-utils';
-import { StoryFn } from '@storybook/react';
+import { StoryMetaType, StoryType } from '@lg-tools/storybook-utils';
 
 import { CardSkeleton } from '..';
 
 export default {
   title: 'Components/SkeletonLoader',
   component: CardSkeleton,
+  parameters: {
+    default: null,
+    controls: { exclude: ['darkMode', 'ref'] },
+    generate: {
+      storyNames: ['Card'],
+      combineArgs: {
+        darkMode: [false, true],
+      },
+      decorator: Instance => (
+        <div style={{ width: 500 }}>
+          <Instance />
+        </div>
+      ),
+    },
+  },
+  args: {
+    enableAnimations: false,
+  },
   argTypes: {
-    darkMode: storybookArgTypes.darkMode,
+    enableAnimations: { control: 'boolean' },
   },
-  decorators: [
-    (Story: StoryFn) => (
-      <div style={{ width: 700 }}>
-        <Story />
-      </div>
-    ),
-  ],
-};
+} satisfies StoryMetaType<typeof CardSkeleton>;
 
-export const Card: StoryFn<typeof CardSkeleton> = props => (
-  <CardSkeleton {...props} />
-);
+export const Card: StoryType<typeof CardSkeleton> = () => <></>;

packages/skeleton-loader/src/CardSkeleton/CardSkeleton.tsx

@@ -11,6 +11,7 @@ import { CardSkeletonProps } from '.';
 
 export function CardSkeleton({
   darkMode: darkModeProp,
+  enableAnimations,
   className,
   ...rest
 }: CardSkeletonProps) {
@@ -22,7 +23,11 @@ export function CardSkeleton({
       className={cx(rootStyles, className)}
       aria-busy
     >
-      <ParagraphSkeleton withHeader />
+      <ParagraphSkeleton
+        withHeader
+        enableAnimations={enableAnimations}
+        darkMode={darkMode}
+      />
     </Card>
   );
 }

packages/skeleton-loader/src/CardSkeleton/CardSkeleton.types.ts

@@ -1,5 +1,8 @@
 import { DarkModeProps, HTMLElementProps } from '@leafygreen-ui/lib';
 
+import { SharedSkeletonProps } from '../Skeleton/Skeleton.types';
+
 export interface CardSkeletonProps
-  extends HTMLElementProps<'div'>,
+  extends SharedSkeletonProps,
+    HTMLElementProps<'div'>,
     DarkModeProps {}

packages/skeleton-loader/src/CodeSkeleton/CodeSkeleton.stories.tsx

@@ -1,24 +1,32 @@
 import React from 'react';
-import { storybookArgTypes } from '@lg-tools/storybook-utils';
-import { StoryFn } from '@storybook/react';
+import { StoryMetaType, StoryType } from '@lg-tools/storybook-utils';
 
 import { CodeSkeleton } from '..';
 
 export default {
   title: 'Components/SkeletonLoader',
   component: CodeSkeleton,
+  parameters: {
+    default: null,
+    controls: { exclude: ['darkMode', 'ref'] },
+    generate: {
+      storyNames: ['Code'],
+      combineArgs: {
+        darkMode: [false, true],
+      },
+      decorator: Instance => (
+        <div style={{ width: 500 }}>
+          <Instance />
+        </div>
+      ),
+    },
+  },
+  args: {
+    enableAnimations: false,
+  },
   argTypes: {
-    darkMode: storybookArgTypes.darkMode,
+    enableAnimations: { control: 'boolean' },
   },
-  decorators: [
-    (Story: StoryFn) => (
-      <div style={{ width: 700 }}>
-        <Story />
-      </div>
-    ),
-  ],
-};
+} satisfies StoryMetaType<typeof CodeSkeleton>;
 
-export const Code: StoryFn<typeof CodeSkeleton> = props => (
-  <CodeSkeleton {...props} />
-);
+export const Code: StoryType<typeof CodeSkeleton> = () => <></>;

packages/skeleton-loader/src/CodeSkeleton/CodeSkeleton.tsx

@@ -5,23 +5,36 @@ import LeafyGreenProvider, {
   useDarkMode,
 } from '@leafygreen-ui/leafygreen-provider';
 
-import { Skeleton } from '..';
+import { Size, Skeleton } from '..';
 
 import { lineStyles, rootStyles } from './CodeSkeleton.styles';
 import { CodeSkeletonProps } from '.';
 
 export function CodeSkeleton({
   darkMode: darkModeProp,
+  enableAnimations,
   className,
   ...rest
 }: CodeSkeletonProps) {
   const { darkMode } = useDarkMode(darkModeProp);
   return (
     <LeafyGreenProvider darkMode={darkMode}>
       <div {...rest} className={cx(rootStyles, className)} aria-busy>
-        <Skeleton size="small" className={lineStyles} />
-        <Skeleton size="small" className={lineStyles} />
-        <Skeleton size="small" className={lineStyles} />
+        <Skeleton
+          enableAnimations={enableAnimations}
+          size={Size.Small}
+          className={lineStyles}
+        />
+        <Skeleton
+          enableAnimations={enableAnimations}
+          size={Size.Small}
+          className={lineStyles}
+        />
+        <Skeleton
+          enableAnimations={enableAnimations}
+          size={Size.Small}
+          className={lineStyles}
+        />
       </div>
     </LeafyGreenProvider>
   );

packages/skeleton-loader/src/CodeSkeleton/CodeSkeleton.types.ts

@@ -1,5 +1,8 @@
 import { DarkModeProps, HTMLElementProps } from '@leafygreen-ui/lib';
 
+import { SharedSkeletonProps } from '../Skeleton/Skeleton.types';
+
 export interface CodeSkeletonProps
-  extends DarkModeProps,
+  extends SharedSkeletonProps,
+    DarkModeProps,
     HTMLElementProps<'div'> {}

packages/skeleton-loader/src/FormSkeleton/FormSkeleton.stories.tsx

@@ -1,24 +1,32 @@
 import React from 'react';
-import { storybookArgTypes } from '@lg-tools/storybook-utils';
-import { StoryFn } from '@storybook/react';
+import { StoryMetaType, StoryType } from '@lg-tools/storybook-utils';
 
 import { FormSkeleton } from '.';
 
 export default {
   title: 'Components/SkeletonLoader',
   component: FormSkeleton,
+  parameters: {
+    controls: { exclude: ['darkMode', 'ref'] },
+    default: null,
+    generate: {
+      storyNames: ['Form'],
+      combineArgs: {
+        darkMode: [false, true],
+      },
+      decorator: Instance => (
+        <div style={{ width: 500 }}>
+          <Instance />
+        </div>
+      ),
+    },
+  },
+  args: {
+    enableAnimations: false,
+  },
   argTypes: {
-    darkMode: storybookArgTypes.darkMode,
+    enableAnimations: { control: 'boolean' },
   },
-  decorators: [
-    (Story: StoryFn) => (
-      <div style={{ width: 700 }}>
-        <Story />
-      </div>
-    ),
-  ],
-};
+} satisfies StoryMetaType<typeof FormSkeleton>;
 
-export const Form: StoryFn<typeof FormSkeleton> = props => (
-  <FormSkeleton {...props} />
-);
+export const Form: StoryType<typeof FormSkeleton> = () => <></>;

packages/skeleton-loader/src/FormSkeleton/FormSkeleton.tsx

@@ -12,18 +12,25 @@ import { FormSkeletonProps } from '.';
 
 export function FormSkeleton({
   darkMode: darkModeProp,
+  enableAnimations,
   className,
   ...rest
 }: FormSkeletonProps) {
   const { darkMode } = useDarkMode(darkModeProp);
   return (
     <LeafyGreenProvider darkMode={darkMode}>
       <div className={cx(baseStyles, className)} {...rest} aria-busy>
-        <Skeleton className={fullWidthStyles} />
-        <Skeleton />
-        <Skeleton />
-        <Skeleton className={fullWidthStyles} />
-        <Skeleton />
+        <Skeleton
+          className={fullWidthStyles}
+          enableAnimations={enableAnimations}
+        />
+        <Skeleton enableAnimations={enableAnimations} />
+        <Skeleton enableAnimations={enableAnimations} />
+        <Skeleton
+          className={fullWidthStyles}
+          enableAnimations={enableAnimations}
+        />
+        <Skeleton enableAnimations={enableAnimations} />
       </div>
     </LeafyGreenProvider>
   );

packages/skeleton-loader/src/FormSkeleton/FormSkeleton.types.ts

@@ -1,5 +1,8 @@
 import { DarkModeProps, HTMLElementProps } from '@leafygreen-ui/lib';
 
+import { SharedSkeletonProps } from '../Skeleton/Skeleton.types';
+
 export interface FormSkeletonProps
-  extends DarkModeProps,
+  extends SharedSkeletonProps,
+    DarkModeProps,
     HTMLElementProps<'div'> {}

packages/skeleton-loader/src/ListSkeleton/ListSkeleton.stories.tsx

@@ -1,36 +1,35 @@
 import React from 'react';
 import { StoryMetaType, StoryType } from '@lg-tools/storybook-utils';
 
-import { ListSkeleton, type ListSkeletonProps } from '.';
+import { ListSkeleton } from '.';
 
-const meta: StoryMetaType<typeof ListSkeleton> = {
-  title: 'Components/SkeletonLoader/List',
+export default {
+  title: 'Components/SkeletonLoader',
   component: ListSkeleton,
   parameters: {
     default: null,
+    controls: { exclude: ['darkMode', 'ref', 'size'] },
+    generate: {
+      storyNames: ['List'],
+      combineArgs: {
+        darkMode: [false, true],
+        bulletsOnly: [false, true],
+      },
+      decorator: Instance => (
+        <div style={{ width: 256 }}>
+          <Instance />
+        </div>
+      ),
+    },
   },
   args: {
+    enableAnimations: false,
     count: 5,
-    bulletsOnly: false,
   },
-};
-
-export default meta;
-
-export const Basic: StoryType<typeof ListSkeleton> = (
-  args: ListSkeletonProps,
-) => {
-  return (
-    <div style={{ width: 256 }}>
-      <ListSkeleton {...args} />
-    </div>
-  );
-};
+  argTypes: {
+    enableAnimations: { control: 'boolean' },
+    count: { control: 'number' },
+  },
+} satisfies StoryMetaType<typeof ListSkeleton>;
 
-export const BulletsOnly: StoryType<typeof ListSkeleton> = () => {
-  return (
-    <div style={{ width: 256 }}>
-      <ListSkeleton bulletsOnly />
-    </div>
-  );
-};
+export const List: StoryType<typeof ListSkeleton> = () => <></>;

packages/skeleton-loader/src/ListSkeleton/ListSkeleton.tsx

@@ -1,7 +1,10 @@
 import React from 'react';
 import range from 'lodash/range';
 
-import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
+import LeafyGreenProvider, {
+  useDarkMode,
+} from '@leafygreen-ui/leafygreen-provider';
+import { Size } from '@leafygreen-ui/tokens';
 
 import { Skeleton } from '../Skeleton';
 
@@ -12,17 +15,20 @@ import {
 import { ListSkeletonProps } from './ListSkeleton.types';
 
 export function ListSkeleton({
+  darkMode: darkModeProp,
+  enableAnimations,
   count = 5,
   bulletsOnly,
-  darkMode,
   ...rest
 }: ListSkeletonProps) {
+  const { darkMode } = useDarkMode(darkModeProp);
+
   return (
     <LeafyGreenProvider darkMode={darkMode}>
       <ul
         className={skeletonListWrapperStyles}
         data-testid="lg-skeleton-list"
-        aria-busy="true"
+        aria-busy
         {...rest}
       >
         {range(count).map(i => (
@@ -32,7 +38,7 @@ export function ListSkeleton({
             className={getSkeletonListItemStyles(i, bulletsOnly)}
             data-testid="lg-skeleton-list_item"
           >
-            <Skeleton size="small" />
+            <Skeleton enableAnimations={enableAnimations} size={Size.Small} />
           </li>
         ))}
       </ul>

packages/skeleton-loader/src/ListSkeleton/ListSkeleton.types.ts

@@ -1,7 +1,10 @@
 import { DarkModeProps, HTMLElementProps } from '@leafygreen-ui/lib';
 
+import { SharedSkeletonProps } from '../Skeleton/Skeleton.types';
+
 export interface ListSkeletonProps
-  extends DarkModeProps,
+  extends SharedSkeletonProps,
+    DarkModeProps,
     HTMLElementProps<'ul'> {
   /**
    * Defines the number of skeleton list items to render