chore: content loader

README.md

@@ -18,10 +18,10 @@ This project has been [shared in a discussion](https://github.com/primer/react/d
 - [ ] BrandHeader
 - [ ] BrandHeaderLines
 - [ ] BrandFooter
+- [ ] ContentLoader
 - [x] Card
 - [x] ClosableFlash
 - [ ] MasonryBox
-- [ ] Skeleton
 - [x] Slider
 - [x] Toolbar
 

package.json

@@ -30,6 +30,7 @@
     "@primer/react-brand": "0.29.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-loading-skeleton": "3.3.1",
     "styled-components": "5.3.10"
   },
   "devDependencies": {

src/components/content-loader/ContentLoader.tsx

@@ -0,0 +1,20 @@
+import { Box } from "@primer/react";
+import Skeleton, { SkeletonTheme }  from "react-loading-skeleton";
+
+import 'react-loading-skeleton/dist/skeleton.css';
+
+export interface ContentLoaderProps {
+  count?: number;
+}
+
+export const ContentLoader = (props: ContentLoaderProps) => {
+  return (
+    <Box>
+      <SkeletonTheme>
+        <Skeleton {...props}/>
+      </SkeletonTheme>
+    </Box>
+  );
+};
+
+export default ContentLoader;

src/components/content-loader/stories/ContentLoader.stories.tsx

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import {
+  ThemeProvider,
+  ThemeProviderProps,
+  BaseStyles,
+} from "@primer/react";
+
+import { ContentLoader, ContentLoaderProps } from '../../../index';
+
+const meta = {
+  title: 'Components/ContentLoader',
+  component: ContentLoader,
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+  tags: ['autodocs'],
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof ContentLoader>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const ThemedContentLoader = (props: {colorMode?: ThemeProviderProps["colorMode"]} & ContentLoaderProps) =>
+  <ThemeProvider colorMode={props.colorMode}>
+    <BaseStyles>
+      <ContentLoader {...props}/>
+    </BaseStyles>
+  </ThemeProvider>
+
+export const ContentLoaderDay: Story = {
+  args: {
+    count: 3
+  },
+  render: (args) => <ThemedContentLoader {...args} colorMode="day" />
+};
+
+export const ContentLoaderNight: Story = {
+  args: {
+    count: 3
+  },
+  render: (args) => <ThemedContentLoader {...args} colorMode="night" />
+};

src/components/overlay/Overlay.tsx

@@ -29,7 +29,7 @@ const PrimerAddonOverlay = (props: OverlayProps) => {
   const closeOverlay = () => setIsOpen!(false);
 
   return (
-    confirmButtonRef && buttonRef && headingRef ? 
+    confirmButtonRef && buttonRef ? 
     <>
       {isOpen ? 
         direction === 'left' ? 

src/components/overlay/stories/Overlay.stories.tsx

@@ -39,24 +39,26 @@ const ThemedOverlay = (props: {colorMode?: ThemeProviderProps["colorMode"]} & Ov
       <BaseStyles>
         <Box p={3} bg="canvas.default">
           <Box>
-            <Box sx={{width: '100%', bg: 'darkgray'}}><Heading ref={headingRef}>Header</Heading></Box>
-              <Box>
-                <Button ref={buttonRef} onClick={() => {
-                  setIsOpen(!isOpen);
-                }}>
-                  Open overlay
-                </Button>
-                <Overlay
-                  {...props}
-                  isOpen={isOpen}
-                  setIsOpen={setIsOpen}
-                  buttonRef={buttonRef}
-                  confirmButtonRef={confirmButtonRef}
-                  headingRef={headingRef}
-                  />
-              </Box>
+            <Box sx={{width: '100%', bg: 'darkgray'}}>
+              <Heading ref={headingRef}>Header</Heading>
+            </Box>
+            <Box>
+              <Button ref={buttonRef} onClick={() => {
+                setIsOpen(!isOpen);
+              }}>
+                Open overlay
+              </Button>
+              <Overlay
+                {...props}
+                isOpen={isOpen}
+                setIsOpen={setIsOpen}
+                buttonRef={buttonRef}
+                confirmButtonRef={confirmButtonRef}
+                headingRef={props.direction === 'left' ? headingRef : undefined}
+                />
             </Box>
           </Box>
+        </Box>
       </BaseStyles>
     </ThemeProvider>
   )
@@ -65,31 +67,31 @@ const ThemedOverlay = (props: {colorMode?: ThemeProviderProps["colorMode"]} & Ov
 export const OverlayDayLeft: Story = {
   args: {
     direction: "left",
-    content: <Text>👈 Look, left aligned.</Text>,
+    content: <Text>👈 Look, left aligned, no heading.</Text>,
   },
   render: (args) => <ThemedOverlay {...args} colorMode="day" />
 };
 
 export const OverlayDayRight: Story = {
   args: {
     direction: "right",
-    content: <Text>Look, right aligned 👉</Text>,
+    content: <Text>Look, right aligned, on heading 👉</Text>,
   },
   render: (args) => <ThemedOverlay {...args} colorMode="day" />
 };
 
 export const OverlayNightLeft: Story = {
   args: {
     direction: "left",
-    content: <Text>👈 Look, left aligned.</Text>,
+    content: <Text>👈 Look, left aligned, no heading.</Text>,
   },
   render: (args) => <ThemedOverlay {...args} colorMode="night" />
 };
 
 export const OverlayNightRight: Story = {
   args: {
     direction: "right",
-    content: <Text>Look, right aligned 👉</Text>,
+    content: <Text>Look, right aligned, on heading 👉</Text>
   },
   render: (args) => <ThemedOverlay {...args} colorMode="night" />
 };

src/index.ts

@@ -1,4 +1,6 @@
 export * from "./components/card/Card";
+export * from "./components/content-loader/ContentLoader";
 export * from "./components/closeable-flash/CloseableFlash";
+export * from "./components/overlay/Overlay";
 export * from "./components/slider/Slider";
 export * from "./components/toolbar/Toolbar";