Merge branch 'main' into brooke/enable-merge-queues

.changeset/swift-garlics-wave.md

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

.changeset/warm-avocados-enjoy.md

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

packages/skeleton-loader/package.json

@@ -35,7 +35,8 @@
     "@leafygreen-ui/lib": "^13.3.0",
     "@leafygreen-ui/palette": "^4.0.9",
     "@leafygreen-ui/tokens": "^2.5.2",
-    "@leafygreen-ui/typography": "^18.3.0"
+    "@leafygreen-ui/typography": "^18.3.0",
+    "lodash": "^4.17.21"
   },
   "peerDependencies": {
     "@leafygreen-ui/leafygreen-provider": "^3.1.12"

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.spec.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import { ListSkeleton } from '.';
+
+describe('packages/skeleton-list', () => {
+  test('renders', () => {
+    const { queryByTestId } = render(<ListSkeleton />);
+    expect(queryByTestId('lg-skeleton-list')).toBeInTheDocument();
+  });
+
+  test('renders `count` items', () => {
+    const { queryAllByTestId } = render(<ListSkeleton count={3} />);
+    const listItems = queryAllByTestId('lg-skeleton-list_item');
+    expect(listItems.length).toBe(3);
+  });
+});

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import { StoryMetaType, StoryType } from '@lg-tools/storybook-utils';
+
+import { ListSkeleton } from '.';
+
+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,
+  },
+  argTypes: {
+    enableAnimations: { control: 'boolean' },
+    count: { control: 'number' },
+  },
+} satisfies StoryMetaType<typeof ListSkeleton>;
+
+export const List: StoryType<typeof ListSkeleton> = () => <></>;

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

@@ -0,0 +1,40 @@
+import { css } from '@leafygreen-ui/emotion';
+import { spacing } from '@leafygreen-ui/tokens';
+
+export const skeletonListWrapperStyles = css`
+  width: 100%;
+  padding: 0;
+  margin: 0;
+`;
+
+export const getSkeletonListItemStyles = (
+  index = 0,
+  bulletsOnly?: boolean,
+) => css`
+  list-style: none;
+  margin-block: ${spacing[300]}px;
+
+  width: ${getWidth(index, bulletsOnly)};
+`;
+
+const getWidth = (index = 0, bulletsOnly?: boolean) => {
+  if (bulletsOnly) {
+    return spacing[400] + 'px';
+  }
+
+  /**
+   * The first item will take up 100% of the available width.
+   * Subsequent items will take up 1/4 less space,
+   * until the item is 50% the available width.
+   * Then repeat
+   *
+   * ----------
+   * -------
+   * -----
+   * ----------
+   * -------
+   * ... etc
+   */
+  const offset = 25 * (index % 3);
+  return 100 - offset + '%';
+};