diff --git a/README.md b/README.md
index fa2bfbe..2960f0d 100755
--- a/README.md
+++ b/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
diff --git a/package.json b/package.json
index 819eadf..04f1b98 100644
--- a/package.json
+++ b/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": {
diff --git a/src/components/content-loader/ContentLoader.tsx b/src/components/content-loader/ContentLoader.tsx
new file mode 100644
index 0000000..cb43789
--- /dev/null
+++ b/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 (
+
+
+
+
+
+ );
+};
+
+export default ContentLoader;
diff --git a/src/components/content-loader/stories/ContentLoader.stories.tsx b/src/components/content-loader/stories/ContentLoader.stories.tsx
new file mode 100644
index 0000000..63cf131
--- /dev/null
+++ b/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;
+
+export default meta;
+
+type Story = StoryObj;
+
+const ThemedContentLoader = (props: {colorMode?: ThemeProviderProps["colorMode"]} & ContentLoaderProps) =>
+
+
+
+
+
+
+export const ContentLoaderDay: Story = {
+ args: {
+ count: 3
+ },
+ render: (args) =>
+};
+
+export const ContentLoaderNight: Story = {
+ args: {
+ count: 3
+ },
+ render: (args) =>
+};
diff --git a/src/components/overlay/Overlay.tsx b/src/components/overlay/Overlay.tsx
index 96dee71..72c1d46 100644
--- a/src/components/overlay/Overlay.tsx
+++ b/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' ?
diff --git a/src/components/overlay/stories/Overlay.stories.tsx b/src/components/overlay/stories/Overlay.stories.tsx
index 3d3f0a7..3c6d216 100644
--- a/src/components/overlay/stories/Overlay.stories.tsx
+++ b/src/components/overlay/stories/Overlay.stories.tsx
@@ -39,24 +39,26 @@ const ThemedOverlay = (props: {colorMode?: ThemeProviderProps["colorMode"]} & Ov
- Header
-
-
-
-
+
+ Header
+
+
+
+
+
)
@@ -65,7 +67,7 @@ const ThemedOverlay = (props: {colorMode?: ThemeProviderProps["colorMode"]} & Ov
export const OverlayDayLeft: Story = {
args: {
direction: "left",
- content: 👈 Look, left aligned.,
+ content: 👈 Look, left aligned, no heading.,
},
render: (args) =>
};
@@ -73,7 +75,7 @@ export const OverlayDayLeft: Story = {
export const OverlayDayRight: Story = {
args: {
direction: "right",
- content: Look, right aligned 👉,
+ content: Look, right aligned, on heading 👉,
},
render: (args) =>
};
@@ -81,7 +83,7 @@ export const OverlayDayRight: Story = {
export const OverlayNightLeft: Story = {
args: {
direction: "left",
- content: 👈 Look, left aligned.,
+ content: 👈 Look, left aligned, no heading.,
},
render: (args) =>
};
@@ -89,7 +91,7 @@ export const OverlayNightLeft: Story = {
export const OverlayNightRight: Story = {
args: {
direction: "right",
- content: Look, right aligned 👉,
+ content: Look, right aligned, on heading 👉
},
render: (args) =>
};
diff --git a/src/index.ts b/src/index.ts
index 5b67769..0ec74ab 100644
--- a/src/index.ts
+++ b/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";