Adds enableAnimations prop

mongodb · Apr 5, 2024 · b449747 · b449747
1 parent ca6801a
commit b449747
Show file tree

Hide file tree

Showing 16 changed files with 139 additions and 40 deletions.
diff --git a/packages/skeleton-loader/src/CardSkeleton/CardSkeleton.tsx b/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,7 @@ export function CardSkeleton({
       className={cx(rootStyles, className)}
       aria-busy
     >
-      <ParagraphSkeleton withHeader />
+      <ParagraphSkeleton withHeader enableAnimations={enableAnimations} />
     </Card>
   );
 }

diff --git a/packages/skeleton-loader/src/CardSkeleton/CardSkeleton.types.ts b/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 {}
diff --git a/packages/skeleton-loader/src/CodeSkeleton/CodeSkeleton.tsx b/packages/skeleton-loader/src/CodeSkeleton/CodeSkeleton.tsx
@@ -12,16 +12,29 @@ 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="small"
+          className={lineStyles}
+        />
+        <Skeleton
+          enableAnimations={enableAnimations}
+          size="small"
+          className={lineStyles}
+        />
+        <Skeleton
+          enableAnimations={enableAnimations}
+          size="small"
+          className={lineStyles}
+        />
       </div>
     </LeafyGreenProvider>
   );

diff --git a/packages/skeleton-loader/src/CodeSkeleton/CodeSkeleton.types.ts b/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'> {}
diff --git a/packages/skeleton-loader/src/FormSkeleton/FormSkeleton.tsx b/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>
   );

diff --git a/packages/skeleton-loader/src/FormSkeleton/FormSkeleton.types.ts b/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'> {}
diff --git a/packages/skeleton-loader/src/ListSkeleton/ListSkeleton.tsx b/packages/skeleton-loader/src/ListSkeleton/ListSkeleton.tsx
@@ -1,8 +1,11 @@
 import React from 'react';
 import range from 'lodash/range';
 
-import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
-import { Skeleton } from '@leafygreen-ui/skeleton-loader';
+import LeafyGreenProvider, {
+  useDarkMode,
+} from '@leafygreen-ui/leafygreen-provider';
+
+import { Skeleton } from '../Skeleton';
 
 import {
   getSkeletonListItemStyles,
@@ -11,17 +14,21 @@ 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
+        data-animate={enableAnimations}
         {...rest}
       >
         {range(count).map(i => (
@@ -31,7 +38,7 @@ export function ListSkeleton({
             className={getSkeletonListItemStyles(i, bulletsOnly)}
             data-testid="lg-skeleton-list_item"
           >
-            <Skeleton size="small" />
+            <Skeleton enableAnimations={enableAnimations} size="small" />
           </li>
         ))}
       </ul>

diff --git a/packages/skeleton-loader/src/ListSkeleton/ListSkeleton.types.ts b/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'> {
   count?: number;
   bulletsOnly?: boolean;

diff --git a/packages/skeleton-loader/src/ParagraphSkeleton/ParagraphSkeleton.tsx b/packages/skeleton-loader/src/ParagraphSkeleton/ParagraphSkeleton.tsx
@@ -16,8 +16,9 @@ import {
 import { ParagraphSkeletonProps } from '.';
 
 export function ParagraphSkeleton({
-  withHeader = false,
   darkMode: darkModeProp,
+  enableAnimations,
+  withHeader = false,
   className,
   ...rest
 }: ParagraphSkeletonProps) {
@@ -27,13 +28,26 @@ export function ParagraphSkeleton({
       <div {...rest} className={cx(rootStyles, className)} aria-busy>
         {withHeader && (
           <Skeleton
+            enableAnimations={enableAnimations}
             className={headerStyles}
             data-testid="lg-paragraph-skeleton-header"
           />
         )}
-        <Skeleton size="small" className={lineStyles} />
-        <Skeleton size="small" className={lineStyles} />
-        <Skeleton size="small" className={lastLineStyles} />
+        <Skeleton
+          enableAnimations={enableAnimations}
+          size="small"
+          className={lineStyles}
+        />
+        <Skeleton
+          enableAnimations={enableAnimations}
+          size="small"
+          className={lineStyles}
+        />
+        <Skeleton
+          enableAnimations={enableAnimations}
+          size="small"
+          className={lastLineStyles}
+        />
       </div>
     </LeafyGreenProvider>
   );

diff --git a/packages/skeleton-loader/src/ParagraphSkeleton/ParagraphSkeleton.types.ts b/packages/skeleton-loader/src/ParagraphSkeleton/ParagraphSkeleton.types.ts
@@ -1,7 +1,10 @@
 import { DarkModeProps, HTMLElementProps } from '@leafygreen-ui/lib';
 
+import { SharedSkeletonProps } from '../Skeleton/Skeleton.types';
+
 export interface ParagraphSkeletonProps
-  extends DarkModeProps,
+  extends SharedSkeletonProps,
+    DarkModeProps,
     HTMLElementProps<'div'> {
   /**
    * Determines whether the header skeleton should be rendered

diff --git a/packages/skeleton-loader/src/Skeleton/Skeleton.styles.ts b/packages/skeleton-loader/src/Skeleton/Skeleton.styles.ts
@@ -5,27 +5,42 @@ import { spacing } from '@leafygreen-ui/tokens';
 
 import { Size } from './Skeleton.types';
 
-export const rootStyles = css`
+interface SkeletonStyleArgs {
+  enableAnimations: boolean;
+}
+export const getSkeletonBaseStyles = ({
+  enableAnimations,
+}: SkeletonStyleArgs) => css`
   width: 100%;
-  border-radius: 6px;
-  animation: bgslide 1.5s infinite linear;
+  border-radius: ${spacing[150]}px;
+  background-position: 50vw 0;
 
-  @keyframes bgslide {
-    to {
-      background-position: 100vw 0;
+  ${enableAnimations &&
+  css`
+    animation: SkeletonShimmer 1.5s infinite linear;
+
+    @keyframes SkeletonShimmer {
+      to {
+        background-position: 100vw 0;
+      }
     }
-  }
+  `}
+`;
+
+export const rootStyles = css`
+  width: 100%;
+  border-radius: 6px;
 `;
 
 export const sizeStyles: Record<Size, string> = {
   [Size.Small]: css`
-    height: ${spacing[3]}px;
+    height: ${spacing[400]}px;
   `,
   [Size.Default]: css`
-    height: ${spacing[5]}px;
+    height: ${spacing[800]}px;
   `,
   [Size.Large]: css`
-    height: ${spacing[5] + spacing[3]}px;
+    height: ${spacing[1200]}px;
   `,
 };
 

diff --git a/packages/skeleton-loader/src/Skeleton/Skeleton.tsx b/packages/skeleton-loader/src/Skeleton/Skeleton.tsx
@@ -3,11 +3,16 @@ import React from 'react';
 import { cx } from '@leafygreen-ui/emotion';
 import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
 
-import { rootStyles, sizeStyles, themeStyles } from './Skeleton.styles';
+import {
+  getSkeletonBaseStyles,
+  sizeStyles,
+  themeStyles,
+} from './Skeleton.styles';
 import { Size } from './Skeleton.types';
 import { SkeletonProps } from '.';
 
 export function Skeleton({
+  enableAnimations = true,
   size = Size.Default,
   darkMode,
   className,
@@ -17,7 +22,7 @@ export function Skeleton({
   return (
     <div
       className={cx(
-        rootStyles,
+        getSkeletonBaseStyles({ enableAnimations }),
         sizeStyles[size],
         themeStyles[theme],
         className,

diff --git a/packages/skeleton-loader/src/Skeleton/Skeleton.types.ts b/packages/skeleton-loader/src/Skeleton/Skeleton.types.ts
@@ -1,6 +1,18 @@
 import { DarkModeProps, HTMLElementProps } from '@leafygreen-ui/lib';
 
-export interface SkeletonProps extends DarkModeProps, HTMLElementProps<'div'> {
+export interface SharedSkeletonProps {
+  /**
+   * Defines whether the loading "shimmer" animation renders
+   *
+   * @default true
+   */
+  enableAnimations?: boolean;
+}
+
+export interface SkeletonProps
+  extends SharedSkeletonProps,
+    DarkModeProps,
+    HTMLElementProps<'div'> {
   /**
    * Determines the height of the skeleton
    * @default "default"

diff --git a/packages/skeleton-loader/src/SkeletonLoader.story.tsx b/packages/skeleton-loader/src/SkeletonLoader.story.tsx
@@ -6,6 +6,7 @@ import { css } from '@leafygreen-ui/emotion';
 import { spacing } from '@leafygreen-ui/tokens';
 import { Body, InlineCode } from '@leafygreen-ui/typography';
 
+import { SharedSkeletonProps } from './Skeleton/Skeleton.types';
 import {
   CardSkeleton,
   CodeSkeleton,
@@ -20,6 +21,10 @@ export default {
   title: 'Components/SkeletonLoader',
   argTypes: {
     darkMode: storybookArgTypes.darkMode,
+    enableAnimations: { control: 'boolean' },
+  },
+  args: {
+    enableAnimations: true,
   },
   parameters: {
     default: 'LiveExample',
@@ -56,11 +61,11 @@ const skeletonComponents = {
   TableSkeleton,
 };
 
-export const LiveExample: StoryFn<any> = () => (
+export const LiveExample: StoryFn<any> = (args: SharedSkeletonProps) => (
   <div className={storyRootStyles}>
     {Object.entries(skeletonComponents).map(([name, SkeletonVariant]) => (
       <div key={name} className={displayOptionContainerStyles}>
-        <SkeletonVariant />
+        <SkeletonVariant {...args} />
         <Body className={labelStyles} weight="medium">
           <InlineCode>{name}</InlineCode>
         </Body>

diff --git a/packages/skeleton-loader/src/TableSkeleton/TableSkeleton.tsx b/packages/skeleton-loader/src/TableSkeleton/TableSkeleton.tsx
@@ -22,6 +22,7 @@ import { TableSkeletonProps } from '.';
 export function TableSkeleton({
   darkMode: darkModeProp,
   baseFontSize: baseFontSizeProp = BaseFontSize.Body1,
+  enableAnimations,
   numRows = 5,
   numCols = 4,
   columnLabels,
@@ -45,7 +46,7 @@ export function TableSkeleton({
                     {columnLabels[i]}
                   </Body>
                 ) : (
-                  <Skeleton size="small" />
+                  <Skeleton enableAnimations={enableAnimations} size="small" />
                 )}
               </th>
             ))}
@@ -57,6 +58,7 @@ export function TableSkeleton({
               {[...Array(numCols)].map((_, j) => (
                 <td key={j} className={cellStyles}>
                   <Skeleton
+                    enableAnimations={enableAnimations}
                     size="small"
                     className={cx({ [firstRowStyles]: i === 0 })}
                   />

diff --git a/packages/skeleton-loader/src/TableSkeleton/TableSkeleton.types.ts b/packages/skeleton-loader/src/TableSkeleton/TableSkeleton.types.ts
@@ -1,8 +1,11 @@
 import { DarkModeProps, HTMLElementProps } from '@leafygreen-ui/lib';
 import { BaseFontSize } from '@leafygreen-ui/tokens';
 
+import { SharedSkeletonProps } from '../Skeleton/Skeleton.types';
+
 export interface TableSkeletonProps
-  extends DarkModeProps,
+  extends SharedSkeletonProps,
+    DarkModeProps,
     HTMLElementProps<'table'> {
   /**
    * Base font size