Adds ListSkeleton component [LG-4196]

.changeset/swift-garlics-wave.md

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

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/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,36 @@
+import React from 'react';
+import { StoryMetaType, StoryType } from '@lg-tools/storybook-utils';
+
+import { ListSkeleton, type ListSkeletonProps } from '.';
+
+const meta: StoryMetaType<typeof ListSkeleton> = {
+  title: 'Components/SkeletonLoader/List',
+  component: ListSkeleton,
+  parameters: {
+    default: null,
+  },
+  args: {
+    count: 5,
+    bulletsOnly: false,
+  },
+};
+
+export default meta;
+
+export const Basic: StoryType<typeof ListSkeleton> = (
+  args: ListSkeletonProps,
+) => {
+  return (
+    <div style={{ width: 256 }}>
+      <ListSkeleton {...args} />
+    </div>
+  );
+};
+
+export const BulletsOnly: StoryType<typeof ListSkeleton> = () => {
+  return (
+    <div style={{ width: 256 }}>
+      <ListSkeleton bulletsOnly />
+    </div>
+  );
+};

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

@@ -0,0 +1,31 @@
+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;
+
+  &:not(:first-child),
+  &:not(:last-child) {
+    margin-block: ${spacing[300]}px;
+  }
+
+  width: ${getWidth(index, bulletsOnly)};
+`;
+
+const getWidth = (index = 0, bulletsOnly?: boolean) => {
+  if (bulletsOnly) {
+    return spacing[400] + 'px';
+  }
+
+  const offset = 25 * (index % 3);
+  return 100 - offset + '%';
+};

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

@@ -0,0 +1,43 @@
+import React from 'react';
+import range from 'lodash/range';
+
+import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
+
+import { Skeleton } from '../Skeleton';
+
+import {
+  getSkeletonListItemStyles,
+  skeletonListWrapperStyles,
+} from './ListSkeleton.styles';
+import { ListSkeletonProps } from './ListSkeleton.types';
+
+export function ListSkeleton({
+  count = 5,
+  bulletsOnly,
+  darkMode,
+  ...rest
+}: ListSkeletonProps) {
+  return (
+    <LeafyGreenProvider darkMode={darkMode}>
+      <ul
+        className={skeletonListWrapperStyles}
+        data-testid="lg-skeleton-list"
+        aria-busy="true"
+        {...rest}
+      >
+        {range(count).map(i => (
+          <li
+            // Update the key when `count` changes so the item animation stays in sync
+            key={`${i}/${count}`}
+            className={getSkeletonListItemStyles(i, bulletsOnly)}
+            data-testid="lg-skeleton-list_item"
+          >
+            <Skeleton size="small" />
+          </li>
+        ))}
+      </ul>
+    </LeafyGreenProvider>
+  );
+}
+
+ListSkeleton.displayName = 'ListSkeleton';

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

@@ -0,0 +1,8 @@
+import { DarkModeProps, HTMLElementProps } from '@leafygreen-ui/lib';
+
+export interface ListSkeletonProps
+  extends DarkModeProps,
+    HTMLElementProps<'ul'> {
+  count?: number;
+  bulletsOnly?: boolean;
+}

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

@@ -0,0 +1,2 @@
+export { ListSkeleton } from './ListSkeleton';
+export { ListSkeletonProps } from './ListSkeleton.types';

packages/skeleton-loader/src/SkeletonLoader.story.tsx

@@ -3,14 +3,14 @@ import { storybookArgTypes } from '@lg-tools/storybook-utils';
 import { StoryFn } from '@storybook/react';
 
 import { css } from '@leafygreen-ui/emotion';
-import { DarkModeProps } from '@leafygreen-ui/lib';
 import { spacing } from '@leafygreen-ui/tokens';
 import { Body, InlineCode } from '@leafygreen-ui/typography';
 
 import {
   CardSkeleton,
   CodeSkeleton,
   FormSkeleton,
+  ListSkeleton,
   ParagraphSkeleton,
   Skeleton,
   TableSkeleton,
@@ -46,44 +46,26 @@ const labelStyles = css`
   margin-top: ${spacing[5]}px;
 `;
 
-export const LiveExample: StoryFn<any> = (props: DarkModeProps) => (
+const skeletonComponents = {
+  Skeleton,
+  CardSkeleton,
+  CodeSkeleton,
+  FormSkeleton,
+  ListSkeleton,
+  ParagraphSkeleton,
+  TableSkeleton,
+};
+
+export const LiveExample: StoryFn<any> = () => (
   <div className={storyRootStyles}>
-    <div className={displayOptionContainerStyles}>
-      <Skeleton />
-      <Body className={labelStyles} weight="medium">
-        <InlineCode>Skeleton</InlineCode>
-      </Body>
-    </div>
-    <div className={displayOptionContainerStyles}>
-      <ParagraphSkeleton withHeader />
-      <Body className={labelStyles} weight="medium">
-        <InlineCode>ParagraphSkeleton</InlineCode>
-      </Body>
-    </div>
-    <div className={displayOptionContainerStyles}>
-      <CardSkeleton />
-      <Body className={labelStyles} weight="medium">
-        <InlineCode>CardSkeleton</InlineCode>
-      </Body>
-    </div>
-    <div className={displayOptionContainerStyles}>
-      <FormSkeleton {...props} />
-      <Body className={labelStyles} weight="medium">
-        <InlineCode>FormSkeleton</InlineCode>
-      </Body>
-    </div>
-    <div className={displayOptionContainerStyles}>
-      <TableSkeleton />
-      <Body className={labelStyles} weight="medium">
-        <InlineCode>TableSkeleton</InlineCode>
-      </Body>
-    </div>
-    <div className={displayOptionContainerStyles}>
-      <CodeSkeleton />
-      <Body className={labelStyles} weight="medium">
-        <InlineCode>CodeSkeleton</InlineCode>
-      </Body>
-    </div>
+    {Object.entries(skeletonComponents).map(([name, SkeletonVariant]) => (
+      <div key={name} className={displayOptionContainerStyles}>
+        <SkeletonVariant />
+        <Body className={labelStyles} weight="medium">
+          <InlineCode>{name}</InlineCode>
+        </Body>
+      </div>
+    ))}
   </div>
 );
 LiveExample.parameters = {

packages/skeleton-loader/src/index.ts

@@ -1,6 +1,7 @@
 export { CardSkeleton, type CardSkeletonProps } from './CardSkeleton';
 export { CodeSkeleton, type CodeSkeletonProps } from './CodeSkeleton';
 export { FormSkeleton, type FormSkeletonProps } from './FormSkeleton';
+export { ListSkeleton, type ListSkeletonProps } from './ListSkeleton';
 export {
   ParagraphSkeleton,
   type ParagraphSkeletonProps,