✨ - feat: add Placeholder component

src/components/typography/index.ts

@@ -5,3 +5,5 @@ export * from "./h2";
 export * from "./h3";
 export * from "./hr";
 export * from "./p";
+export * from "./placeholder";
+export * from "./ul";

src/components/typography/placeholder/index.ts

@@ -0,0 +1 @@
+export * from "./placeholder";

src/components/typography/placeholder/placeholder.scss

@@ -0,0 +1,31 @@
+.mykn-placeholder {
+  --mykn-placeholder-color-dark: var(--typography-color-border);
+  --mykn-placeholder-color-light: var(--typography-color-background-alt);
+
+  animation: shift-background var(--animation-duration-slow) infinite
+    var(--animation-timing-function) reverse;
+  background: linear-gradient(
+    90deg,
+    var(--mykn-placeholder-color-dark),
+    var(--mykn-placeholder-color-light),
+    var(--mykn-placeholder-color-dark)
+  );
+  background-size: 200% 100%;
+  border: none;
+  border-radius: 1em;
+  display: inline-block;
+  height: 1em;
+  margin: 0;
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+}
+
+@keyframes shift-background {
+  0% {
+    background-position: 0% 0%;
+  }
+  100% {
+    background-position: 200% 0%;
+  }
+}

src/components/typography/placeholder/placeholder.stories.tsx

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Placeholder } from "./placeholder";
+
+const meta: Meta<typeof Placeholder> = {
+  title: "Typography/Placeholder",
+  component: Placeholder,
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const PlaceholderComponent: Story = {};

src/components/typography/placeholder/placeholder.tsx

@@ -0,0 +1,13 @@
+import clsx from "clsx";
+import React from "react";
+
+import "./placeholder.scss";
+
+export type PlaceholderProps = React.ComponentProps<"hr">;
+
+/**
+ * Placeholder component, indicates that content is loading.
+ */
+export const Placeholder: React.FC<PlaceholderProps> = ({ ...props }) => (
+  <hr className={clsx("mykn-placeholder")} aria-hidden={true} {...props} />
+);