add codeSkeleton (#1950)

Co-authored-by: Brooke Scarlett Yalof <brooke.yalof@mongodb.com>
mongodb · Aug 25, 2023 · 8366594 · 8366594
1 parent 9829e1d
commit 8366594
Show file tree

Hide file tree

Showing 9 changed files with 109 additions and 0 deletions.
diff --git a/.changeset/four-cats-press.md b/.changeset/four-cats-press.md
@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/skeleton-loader': minor
+---
+
+Adds `CodeSkeleton`
diff --git a/packages/skeleton-loader/src/CodeSkeleton/CodeSkeleton.spec.tsx b/packages/skeleton-loader/src/CodeSkeleton/CodeSkeleton.spec.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { axe } from 'jest-axe';
+
+import { CodeSkeleton } from './CodeSkeleton';
+
+describe('packages/skeleton-loader/CodeSkeleton', () => {
+  describe('a11y', () => {
+    test('does not have basic accessibility issues', async () => {
+      const { container } = render(<CodeSkeleton />);
+      const results = await axe(container);
+      expect(results).toHaveNoViolations();
+    });
+  });
+});
diff --git a/packages/skeleton-loader/src/CodeSkeleton/CodeSkeleton.stories.tsx b/packages/skeleton-loader/src/CodeSkeleton/CodeSkeleton.stories.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { StoryFn } from '@storybook/react';
+
+import { storybookArgTypes } from '@leafygreen-ui/lib';
+
+import { CodeSkeleton } from '..';
+
+export default {
+  title: 'Components/SkeletonLoader',
+  component: CodeSkeleton,
+  argTypes: {
+    darkMode: storybookArgTypes.darkMode,
+  },
+  decorators: [
+    (Story: StoryFn) => (
+      <div style={{ width: 700 }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const Code: StoryFn<typeof CodeSkeleton> = props => (
+  <CodeSkeleton {...props} />
+);
diff --git a/packages/skeleton-loader/src/CodeSkeleton/CodeSkeleton.styles.ts b/packages/skeleton-loader/src/CodeSkeleton/CodeSkeleton.styles.ts
@@ -0,0 +1,19 @@
+import { css } from '@leafygreen-ui/emotion';
+import { spacing } from '@leafygreen-ui/tokens';
+
+export const rootStyles = css`
+  width: 100%;
+  display: grid;
+  row-gap: ${spacing[3]}px;
+  grid-template-columns: 75px 1fr 75px;
+`;
+
+export const lineStyles = css`
+  &:nth-child(even) {
+    grid-column: 2 / -1;
+  }
+
+  &:nth-child(odd) {
+    grid-column: 1 / span 2;
+  }
+`;
diff --git a/packages/skeleton-loader/src/CodeSkeleton/CodeSkeleton.tsx b/packages/skeleton-loader/src/CodeSkeleton/CodeSkeleton.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+
+import { cx } from '@leafygreen-ui/emotion';
+import LeafyGreenProvider, {
+  useDarkMode,
+} from '@leafygreen-ui/leafygreen-provider';
+
+import { Skeleton } from '..';
+
+import { lineStyles, rootStyles } from './CodeSkeleton.styles';
+import { CodeSkeletonProps } from '.';
+
+export function CodeSkeleton({
+  darkMode: darkModeProp,
+  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} />
+      </div>
+    </LeafyGreenProvider>
+  );
+}
+
+CodeSkeleton.displayName = 'CodeSkeleton';
diff --git a/packages/skeleton-loader/src/CodeSkeleton/CodeSkeleton.types.ts b/packages/skeleton-loader/src/CodeSkeleton/CodeSkeleton.types.ts
@@ -0,0 +1,5 @@
+import { DarkModeProps, HTMLElementProps } from '@leafygreen-ui/lib';
+
+export interface CodeSkeletonProps
+  extends DarkModeProps,
+    HTMLElementProps<'div'> {}
diff --git a/packages/skeleton-loader/src/CodeSkeleton/index.ts b/packages/skeleton-loader/src/CodeSkeleton/index.ts
@@ -0,0 +1,2 @@
+export { CodeSkeleton } from './CodeSkeleton';
+export { type CodeSkeletonProps } from './CodeSkeleton.types';
diff --git a/packages/skeleton-loader/src/SkeletonLoader.story.tsx b/packages/skeleton-loader/src/SkeletonLoader.story.tsx
@@ -8,6 +8,7 @@ import { Body, InlineCode } from '@leafygreen-ui/typography';
 
 import {
   CardSkeleton,
+  CodeSkeleton,
   FormSkeleton,
   ParagraphSkeleton,
   Skeleton,
@@ -76,6 +77,12 @@ export const LiveExample: StoryFn<any> = (props: DarkModeProps) => (
         <InlineCode>TableSkeleton</InlineCode>
       </Body>
     </div>
+    <div className={displayOptionContainerStyles}>
+      <CodeSkeleton />
+      <Body className={labelStyles} weight="medium">
+        <InlineCode>CodeSkeleton</InlineCode>
+      </Body>
+    </div>
   </div>
 );
 LiveExample.parameters = {

diff --git a/packages/skeleton-loader/src/index.ts b/packages/skeleton-loader/src/index.ts
@@ -1,4 +1,5 @@
 export { CardSkeleton, type CardSkeletonProps } from './CardSkeleton';
+export { CodeSkeleton, type CodeSkeletonProps } from './CodeSkeleton';
 export { FormSkeleton, type FormSkeletonProps } from './FormSkeleton';
 export {
   ParagraphSkeleton,