From 5f6b738ec843ca04504df04a57a31faa6835d938 Mon Sep 17 00:00:00 2001
From: Aaron Nance <anance@ebay.com>
Date: Tue, 4 Feb 2025 09:47:14 -0800
Subject: [PATCH] feat: Add skeleton loading component (#378)

* 308: Add skeleton loading component

* fix eslint

* Add support for 'as' for components and 'color' - add changeset

* Add readme content

* Remove default aria-label

---------

Co-authored-by: HenriqueLimas <henrique.ramos.limas@gmail.com>
---
 .changeset/lucky-shrimps-bathe.md             |   5 +
 .../__tests__/index.stories.tsx               |   1 +
 src/ebay-skeleton/README.md                   | 108 +++++++
 .../__snapshots__/render.spec.tsx.snap        | 272 ++++++++++++++++++
 src/ebay-skeleton/__tests__/index.stories.tsx | 121 ++++++++
 src/ebay-skeleton/__tests__/render.spec.tsx   |  45 +++
 src/ebay-skeleton/ebay-skeleton-avatar.tsx    |  15 +
 src/ebay-skeleton/ebay-skeleton-button.tsx    |  22 ++
 src/ebay-skeleton/ebay-skeleton-image.tsx     |  17 ++
 src/ebay-skeleton/ebay-skeleton-text.tsx      |  26 ++
 src/ebay-skeleton/ebay-skeleton-textbox.tsx   |  18 ++
 src/ebay-skeleton/ebay-skeleton.tsx           |  23 ++
 src/ebay-skeleton/index.ts                    |   6 +
 src/ebay-skeleton/types.ts                    |   5 +
 14 files changed, 684 insertions(+)
 create mode 100644 .changeset/lucky-shrimps-bathe.md
 create mode 100644 src/ebay-skeleton/README.md
 create mode 100644 src/ebay-skeleton/__tests__/__snapshots__/render.spec.tsx.snap
 create mode 100644 src/ebay-skeleton/__tests__/index.stories.tsx
 create mode 100644 src/ebay-skeleton/__tests__/render.spec.tsx
 create mode 100644 src/ebay-skeleton/ebay-skeleton-avatar.tsx
 create mode 100644 src/ebay-skeleton/ebay-skeleton-button.tsx
 create mode 100644 src/ebay-skeleton/ebay-skeleton-image.tsx
 create mode 100644 src/ebay-skeleton/ebay-skeleton-text.tsx
 create mode 100644 src/ebay-skeleton/ebay-skeleton-textbox.tsx
 create mode 100644 src/ebay-skeleton/ebay-skeleton.tsx
 create mode 100644 src/ebay-skeleton/index.ts
 create mode 100644 src/ebay-skeleton/types.ts

diff --git a/.changeset/lucky-shrimps-bathe.md b/.changeset/lucky-shrimps-bathe.md
new file mode 100644
index 00000000..8354e513
--- /dev/null
+++ b/.changeset/lucky-shrimps-bathe.md
@@ -0,0 +1,5 @@
+---
+"@ebay/ui-core-react": minor
+---
+
+feat(EbaySkeleton): add new skeleton component
diff --git a/src/ebay-accordion/__tests__/index.stories.tsx b/src/ebay-accordion/__tests__/index.stories.tsx
index 129b2b36..11adbe32 100644
--- a/src/ebay-accordion/__tests__/index.stories.tsx
+++ b/src/ebay-accordion/__tests__/index.stories.tsx
@@ -16,6 +16,7 @@ const meta: Meta<typeof EbayAccordion> = {
                 },
             },
             options: ["regular", "large"],
+            control: { type: 'select'}
         },
         autoCollapse: {
             type: "boolean",
diff --git a/src/ebay-skeleton/README.md b/src/ebay-skeleton/README.md
new file mode 100644
index 00000000..71aae93c
--- /dev/null
+++ b/src/ebay-skeleton/README.md
@@ -0,0 +1,108 @@
+# EbaySkeleton
+
+## Demo
+
+[Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/docs/building-blocks-ebay-skeleton--docs)
+
+## Import JS
+
+```jsx harmony
+import {
+    EbaySkeleton,
+    EbaySkeletonAvatar,
+    EbaySkeletonButton,
+    EbaySkeletonImage,
+    EbaySkeletonText,
+    EbaySkeletonTextbox,
+} from "@ebay/ui-core-react/ebay-skeleton";
+```
+
+## Import following styles from SKIN
+
+```js
+import "@ebay/skin/skeleton";
+```
+
+## Import styles using SCSS/CSS
+
+```js
+import "@ebay/skin/skeleton.css";
+```
+
+## Usage
+
+```jsx
+<EbaySkeleton aria-label="Loading...">
+    <EbaySkeletonImage style={{ width: "220px", height: "220px" }} />
+    <EbaySkeletonText multiline />
+</EbaySkeleton>
+```
+
+## Attributes
+
+### EbaySkeleton
+
+| Name    | Type   | Required | Description                                        |
+| ------- | ------ | -------- | -------------------------------------------------- |
+| `color` | string | No       | Color of the Skeleton, `purple`, `green` or `blue` |
+
+### EbaySkeletonAvatar
+
+| Name | Type   | Required | Description                                            |
+| ---- | ------ | -------- | ------------------------------------------------------ |
+| `as` | string | No       | Attribute to define the element to use `div` or `span` |
+
+### EbaySkeletonButton
+
+| Name   | Type   | Required | Description                                            |
+| ------ | ------ | -------- | ------------------------------------------------------ |
+| `as`   | string | No       | Attribute to define the element to use `div` or `span` |
+| `size` | string | No       | size of the button can be `small` or `large`           |
+
+### EbaySkeletonImage
+
+| Name | Type   | Required | Description                                            |
+| ---- | ------ | -------- | ------------------------------------------------------ |
+| `as` | string | No       | Attribute to define the element to use `div` or `span` |
+
+### EbaySkeletonText
+
+| Name        | Type    | Required | Description                                            |
+| ----------- | ------- | -------- | ------------------------------------------------------ |
+| `as`        | string  | No       | Attribute to define the element to use `div` or `span` |
+| `multiline` | boolean | No       | Attribute to define the text as multiline              |
+| `size`      | string  | No       | size of the text can be `small` or `large`             |
+
+### EbaySkeletonTextbox
+
+| Name | Type   | Required | Description                                            |
+| ---- | ------ | -------- | ------------------------------------------------------ |
+| `as` | string | No       | Attribute to define the element to use `div` or `span` |
+
+## Examples
+
+### Composite
+
+```jsx
+<EbaySkeleton color={color} style={{ width: "300px" }}>
+    <div>
+        <EbaySkeletonAvatar as="span" />
+        <EbaySkeletonText
+            multiline={multiline}
+            as="span"
+            size={size}
+            style={{ width: "220px", verticalAlign: "top" }}
+        />
+    </div>
+    <EbaySkeletonButton size={size} />
+</EbaySkeleton>
+```
+
+### Tile
+
+```jsx
+<EbaySkeleton color={color} style={{ width: "220px" }}>
+    <EbaySkeletonImage style={{ width: "220px", height: "220px" }} />
+    <EbaySkeletonText multiline={multiline} size={size} />
+</EbaySkeleton>
+```
diff --git a/src/ebay-skeleton/__tests__/__snapshots__/render.spec.tsx.snap b/src/ebay-skeleton/__tests__/__snapshots__/render.spec.tsx.snap
new file mode 100644
index 00000000..87fcc52f
--- /dev/null
+++ b/src/ebay-skeleton/__tests__/__snapshots__/render.spec.tsx.snap
@@ -0,0 +1,272 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Render <EbaySkeleton /> component should render the EbaySkeleton color blue component 1`] = `
+<div
+  aria-label="Loading..."
+  class="skeleton skeleton--blue"
+  role="img"
+  style="width: 220px;"
+>
+  <div
+    class="skeleton__textbox"
+  />
+</div>
+`;
+
+exports[`Render <EbaySkeleton /> component should render the EbaySkeleton color green component 1`] = `
+<div
+  aria-label="Loading..."
+  class="skeleton skeleton--green"
+  role="img"
+  style="width: 220px;"
+>
+  <div
+    class="skeleton__textbox"
+  />
+</div>
+`;
+
+exports[`Render <EbaySkeleton /> component should render the EbaySkeleton color purple component 1`] = `
+<div
+  aria-label="Loading..."
+  class="skeleton skeleton--purple"
+  role="img"
+  style="width: 220px;"
+>
+  <div
+    class="skeleton__textbox"
+  />
+</div>
+`;
+
+exports[`Render <EbaySkeleton /> component should render the EbaySkeleton component 1`] = `
+<div
+  aria-label="Loading..."
+  class="skeleton"
+  role="img"
+  style="width: 220px;"
+>
+  <div
+    class="skeleton__textbox"
+  />
+</div>
+`;
+
+exports[`Render <EbaySkeleton /> component should render the EbaySkeleton composite component 1`] = `
+<div
+  aria-label="Loading..."
+  class="skeleton"
+  role="img"
+  style="width: 300px;"
+>
+  <div>
+    <span
+      class="skeleton__avatar"
+    />
+    <span
+      class="skeleton__text skeleton__text--multiline"
+      style="width: 220px; vertical-align: top;"
+    />
+  </div>
+  <div
+    class="skeleton__button"
+  />
+</div>
+`;
+
+exports[`Render <EbaySkeleton /> component should render the EbaySkeleton tile component 1`] = `
+<div
+  aria-label="Loading..."
+  class="skeleton"
+  role="img"
+  style="width: 220px;"
+>
+  <div
+    class="skeleton__image"
+    style="width: 220px; height: 220px;"
+  />
+  <div
+    class="skeleton__text skeleton__text--multiline skeleton__text--large"
+  />
+</div>
+`;
+
+exports[`Render <EbaySkeleton /> component should render the EbaySkeletonAvatar component 1`] = `
+<div
+  aria-label="Loading..."
+  class="skeleton"
+  role="img"
+>
+  <div
+    class="skeleton__avatar"
+  />
+</div>
+`;
+
+exports[`Render <EbaySkeleton /> component should render the EbaySkeletonAvatar with "as" prop component 1`] = `
+<div
+  aria-label="Loading..."
+  class="skeleton"
+  role="img"
+>
+  <span
+    class="skeleton__avatar"
+  />
+</div>
+`;
+
+exports[`Render <EbaySkeleton /> component should render the EbaySkeletonButton component 1`] = `
+<div
+  aria-label="Loading..."
+  class="skeleton"
+  role="img"
+  style="width: 220px;"
+>
+  <div
+    class="skeleton__button"
+  />
+</div>
+`;
+
+exports[`Render <EbaySkeleton /> component should render the EbaySkeletonButton with "as" prop component 1`] = `
+<div
+  aria-label="Loading..."
+  class="skeleton"
+  role="img"
+  style="width: 220px;"
+>
+  <span
+    class="skeleton__button"
+  />
+</div>
+`;
+
+exports[`Render <EbaySkeleton /> component should render the EbaySkeletonButton with size prop large component 1`] = `
+<div
+  aria-label="Loading..."
+  class="skeleton"
+  role="img"
+  style="width: 220px;"
+>
+  <div
+    class="skeleton__button skeleton__button--large"
+  />
+</div>
+`;
+
+exports[`Render <EbaySkeleton /> component should render the EbaySkeletonButton with size prop small component 1`] = `
+<div
+  aria-label="Loading..."
+  class="skeleton"
+  role="img"
+  style="width: 220px;"
+>
+  <div
+    class="skeleton__button skeleton__button--small"
+  />
+</div>
+`;
+
+exports[`Render <EbaySkeleton /> component should render the EbaySkeletonImage component 1`] = `
+<div
+  aria-label="Loading..."
+  class="skeleton"
+  role="img"
+>
+  <div
+    class="skeleton__image"
+    style="width: 220px; height: 220px;"
+  />
+</div>
+`;
+
+exports[`Render <EbaySkeleton /> component should render the EbaySkeletonImage with "as" prop component 1`] = `
+<div
+  aria-label="Loading..."
+  class="skeleton"
+  role="img"
+>
+  <span
+    class="skeleton__image"
+    style="width: 220px; height: 220px;"
+  />
+</div>
+`;
+
+exports[`Render <EbaySkeleton /> component should render the EbaySkeletonText component 1`] = `
+<div
+  aria-label="Loading..."
+  class="skeleton"
+  role="img"
+  style="width: 220px;"
+>
+  <div
+    class="skeleton__text"
+  />
+</div>
+`;
+
+exports[`Render <EbaySkeleton /> component should render the EbaySkeletonText with "as" prop component 1`] = `
+<div
+  aria-label="Loading..."
+  class="skeleton"
+  role="img"
+  style="width: 220px;"
+>
+  <span
+    class="skeleton__text"
+  />
+</div>
+`;
+
+exports[`Render <EbaySkeleton /> component should render the EbaySkeletonText with multiline prop component 1`] = `
+<div
+  aria-label="Loading..."
+  class="skeleton"
+  role="img"
+  style="width: 220px;"
+>
+  <div
+    class="skeleton__text skeleton__text--multiline"
+  />
+</div>
+`;
+
+exports[`Render <EbaySkeleton /> component should render the EbaySkeletonText with size prop component 1`] = `
+<div
+  aria-label="Loading..."
+  class="skeleton"
+  role="img"
+  style="width: 220px;"
+>
+  <div
+    class="skeleton__text skeleton__text--large"
+  />
+</div>
+`;
+
+exports[`Render <EbaySkeleton /> component should render the EbaySkeletonTextBox component 1`] = `
+<div
+  aria-label="Loading..."
+  class="skeleton"
+  role="img"
+  style="width: 220px;"
+>
+  <div
+    class="skeleton__textbox"
+  />
+</div>
+`;
+
+exports[`Render <EbaySkeleton /> component should render the EbaySkeletonTextBox with "as" prop component 1`] = `
+<div
+  aria-label="Loading..."
+  class="skeleton"
+  role="img"
+  style="width: 220px;"
+>
+  <span
+    class="skeleton__textbox"
+  />
+</div>
+`;
diff --git a/src/ebay-skeleton/__tests__/index.stories.tsx b/src/ebay-skeleton/__tests__/index.stories.tsx
new file mode 100644
index 00000000..be4bf67c
--- /dev/null
+++ b/src/ebay-skeleton/__tests__/index.stories.tsx
@@ -0,0 +1,121 @@
+import React, { ComponentProps, useEffect, useState } from 'react'
+import { EbaySkeleton, EbaySkeletonAvatar, EbaySkeletonButton, EbaySkeletonButtonProps, EbaySkeletonImage, EbaySkeletonProps, EbaySkeletonText, EbaySkeletonTextbox } from '../'
+import { EbayButton } from '../../ebay-button'
+import { Meta, StoryFn } from '@storybook/react'
+
+export type EbaySkeletonStoriesProps = ComponentProps<typeof EbaySkeleton> & ComponentProps<typeof EbaySkeletonButton> & ComponentProps<typeof EbaySkeletonText>
+
+const meta: Meta<EbaySkeletonStoriesProps> = {
+    component: EbaySkeleton,
+    title: 'building blocks/ebay-skeleton',
+    argTypes: {
+        color: {
+            description: 'Color of the skeleton',
+            options: ['', 'purple', 'green', 'blue'],
+            control: { type: 'select'}
+        },
+        as: {
+            description: 'Element type to render',
+            table: {
+                defaultValue: {
+                    summary: 'div',
+                },
+            },
+            options: ['div', 'span'],
+            control: { type: 'select'}
+        },
+        size: {
+            description: 'Size of the EbaySkeletonButton or EbaySkeletonText',
+            options: ['', 'small', 'large'],
+            control: { type: 'select'}
+        },
+        multiline: {
+            description: 'Render multiple lines of text on EbaySkeletonText',
+            control: { type: 'boolean'}
+        }
+    }
+}
+
+export default meta
+
+export const Default: StoryFn<EbaySkeletonStoriesProps> = ({ color, as }) => (
+    <EbaySkeleton color={color} style={{ width: '220px' }} aria-label="Loading...">
+        <EbaySkeletonTextbox as={as} />
+    </EbaySkeleton>
+)
+
+export const Avatar: StoryFn<EbaySkeletonStoriesProps> = ({ color, as }) => (
+    <EbaySkeleton color={color} aria-label="Loading...">
+        <EbaySkeletonAvatar as={as} />
+    </EbaySkeleton>
+)
+
+export const Button: StoryFn<EbaySkeletonStoriesProps> = ({ color, as, size }) => (
+    <EbaySkeleton color={color}  style={{ width: '220px'}} aria-label="Loading...">
+        <EbaySkeletonButton as={as} size={size} />
+    </EbaySkeleton>
+)
+
+export const Text: StoryFn<EbaySkeletonStoriesProps> = ({ color, as, multiline, size }) => (
+    <EbaySkeleton color={color} style={{ width: '220px'}} aria-label="Loading...">
+        <EbaySkeletonText as={as} multiline={multiline} size={size} />
+    </EbaySkeleton>
+)
+
+export const TextBox: StoryFn<EbaySkeletonStoriesProps> = ({ color, as }) => (
+    <EbaySkeleton color={color} style={{ width: '220px'}} aria-label="Loading...">
+        <EbaySkeletonTextbox as={as} />
+    </EbaySkeleton>
+)
+
+export const Image: StoryFn<EbaySkeletonStoriesProps> = ({ color, as }) => (
+    <EbaySkeleton color={color} aria-label="Loading...">
+        <EbaySkeletonImage style={{ width: '220px', height: '220px' }} as={as} />
+    </EbaySkeleton>
+)
+
+export const Tile: StoryFn<EbaySkeletonStoriesProps> = ({ color, multiline = true, size = 'large' }) => (
+    <EbaySkeleton color={color} style={{ width: '220px' }} aria-label="Loading...">
+        <EbaySkeletonImage style={{ width: '220px', height: '220px' }} />
+        <EbaySkeletonText multiline={multiline} size={size} />
+    </EbaySkeleton>
+)
+
+export const Composite: StoryFn<EbaySkeletonStoriesProps> = ({ color, size, multiline = true }) => (
+    <EbaySkeleton color={color} style={{ width: '300px' }} aria-label="Loading...">
+        <div>
+            <EbaySkeletonAvatar as="span" />
+            <EbaySkeletonText multiline={multiline} as="span" size={size} style={{ width: '220px', verticalAlign: 'top' }}/>
+        </div>
+        <EbaySkeletonButton size={size} />
+    </EbaySkeleton>
+)
+
+export const WithContent = ({ color, as }) => {
+    // TODO: Replace this example with "use()" hook and Suspense when upgrading to React 19
+    const [isLoading, setIsLoading] = useState(true)
+
+    useEffect(() => {
+        const timeout = setTimeout(() => {
+            setIsLoading(false)
+        }, 2000)
+
+        return () => {
+            clearTimeout(timeout)
+        }
+    }, [])
+
+    return (
+        <div style={{ width: '88px' }}>
+            {isLoading ? (
+                <EbaySkeleton color={color} aria-label="Loading...">
+                    <EbaySkeletonButton as={as} />
+                </EbaySkeleton>
+            ) : (
+                <div>
+                    <EbayButton>Button</EbayButton>
+                </div>
+            )}
+        </div>
+    )
+}
diff --git a/src/ebay-skeleton/__tests__/render.spec.tsx b/src/ebay-skeleton/__tests__/render.spec.tsx
new file mode 100644
index 00000000..832e7c38
--- /dev/null
+++ b/src/ebay-skeleton/__tests__/render.spec.tsx
@@ -0,0 +1,45 @@
+/// <reference types="@testing-library/jest-dom" />
+import React, { ReactElement } from 'react'
+import { render, screen } from '@testing-library/react'
+import { composeStories } from '@storybook/react'
+import * as stories from './index.stories'
+
+const {
+    Default,
+    Avatar,
+    Button,
+    Text,
+    Composite,
+    Image,
+    Tile,
+    TextBox,
+} = composeStories(stories)
+
+
+describe('Render <EbaySkeleton /> component', () => {
+    it.each([
+        ['EbaySkeleton', Default, {}],
+        ['EbaySkeleton color purple', Default, { color: 'purple' }],
+        ['EbaySkeleton color green', Default, { color: 'green' }],
+        ['EbaySkeleton color blue', Default, { color: 'blue' }],
+        ['EbaySkeletonAvatar', Avatar, {}],
+        ['EbaySkeletonAvatar with "as" prop', Avatar, { as: 'span' }],
+        ['EbaySkeletonButton', Button, {}],
+        ['EbaySkeletonButton with size prop large', Button, { size: 'large' }],
+        ['EbaySkeletonButton with size prop small', Button, { size: 'small' }],
+        ['EbaySkeletonButton with "as" prop', Button, { as: 'span' }],
+        ['EbaySkeletonText', Text, {}],
+        ['EbaySkeletonText with multiline prop', Text, { multiline: true }],
+        ['EbaySkeletonText with size prop', Text, { size: 'large' }],
+        ['EbaySkeletonText with "as" prop', Text, { as: 'span' }],
+        ['EbaySkeleton composite', Composite, {}],
+        ['EbaySkeletonImage', Image, {}],
+        ['EbaySkeletonImage with "as" prop', Image, { as: 'span' }],
+        ['EbaySkeleton tile', Tile, {}],
+        ['EbaySkeletonTextBox', TextBox, {}],
+        ['EbaySkeletonTextBox with "as" prop', TextBox, { as: 'span' }],
+    ])(`should render the %s component`, (_, Component, props) => {
+        render(<Component {...(props as stories.EbaySkeletonStoriesProps)} />)
+        expect(screen.getByLabelText('Loading...')).toMatchSnapshot()
+    })
+})
diff --git a/src/ebay-skeleton/ebay-skeleton-avatar.tsx b/src/ebay-skeleton/ebay-skeleton-avatar.tsx
new file mode 100644
index 00000000..05bb2c32
--- /dev/null
+++ b/src/ebay-skeleton/ebay-skeleton-avatar.tsx
@@ -0,0 +1,15 @@
+import React, { ReactNode } from 'react'
+import classNames from 'classnames'
+import { BaseSkeletonComponentProps, SupportedElements } from './types'
+
+export type EbaySkeletonAvatarProps<T extends SupportedElements> = BaseSkeletonComponentProps<T>
+
+const EbaySkeletonAvatar = <T extends SupportedElements = 'div'>(props: EbaySkeletonAvatarProps<T>): ReactNode => {
+    const { as: Component = 'div', className, ...rest } = props
+
+    return (
+        <Component className={classNames('skeleton__avatar', className)} {...rest} />
+    )
+}
+
+export default EbaySkeletonAvatar
diff --git a/src/ebay-skeleton/ebay-skeleton-button.tsx b/src/ebay-skeleton/ebay-skeleton-button.tsx
new file mode 100644
index 00000000..9ae62793
--- /dev/null
+++ b/src/ebay-skeleton/ebay-skeleton-button.tsx
@@ -0,0 +1,22 @@
+import React, { ReactNode } from 'react'
+import classNames from 'classnames'
+import { BaseSkeletonComponentProps, SupportedElements } from './types'
+
+export type EbaySkeletonButtonProps<T extends SupportedElements> = BaseSkeletonComponentProps<T> & {
+    size?: 'small' | 'large';
+}
+
+const EbaySkeletonButton = <T extends SupportedElements = 'div'>(props: EbaySkeletonButtonProps<T>): ReactNode => {
+    const { as: Component = 'div', className, size, ...rest } = props
+
+    return (
+        <Component
+            className={classNames(
+                'skeleton__button',
+                size && `skeleton__button--${size}`,
+                className)}
+            {...rest}
+        />
+    )
+}
+export default EbaySkeletonButton
diff --git a/src/ebay-skeleton/ebay-skeleton-image.tsx b/src/ebay-skeleton/ebay-skeleton-image.tsx
new file mode 100644
index 00000000..5400626d
--- /dev/null
+++ b/src/ebay-skeleton/ebay-skeleton-image.tsx
@@ -0,0 +1,17 @@
+import React, { ReactNode } from 'react'
+import classNames from 'classnames'
+import { BaseSkeletonComponentProps, SupportedElements } from './types'
+
+export type EbaySkeletonImageProps<T extends SupportedElements> = BaseSkeletonComponentProps<T>
+
+const EbaySkeletonImage = <T extends SupportedElements = 'div'>(props: EbaySkeletonImageProps<T>): ReactNode => {
+    const { as: Component = 'div', className, ...rest } = props
+    return (
+        <Component
+            className={classNames('skeleton__image', className)}
+            {...rest}
+        />
+    )
+}
+
+export default EbaySkeletonImage
diff --git a/src/ebay-skeleton/ebay-skeleton-text.tsx b/src/ebay-skeleton/ebay-skeleton-text.tsx
new file mode 100644
index 00000000..337d132d
--- /dev/null
+++ b/src/ebay-skeleton/ebay-skeleton-text.tsx
@@ -0,0 +1,26 @@
+import React, { ReactNode } from 'react'
+import classNames from 'classnames'
+import { BaseSkeletonComponentProps, SupportedElements } from './types'
+
+export type EbaySkeletonTextProps<T extends SupportedElements> = BaseSkeletonComponentProps<T> & {
+    size?: 'small' | 'large';
+    multiline?: boolean;
+}
+
+const EbaySkeletonText = <T extends SupportedElements = 'div'>(props: EbaySkeletonTextProps<T>): ReactNode => {
+    const { as: Component = 'div', className, size, multiline, ...rest } = props
+
+    return (
+        <Component
+            className={classNames(
+                'skeleton__text',
+                multiline && 'skeleton__text--multiline',
+                size === 'large' && `skeleton__text--large`,
+                className
+            )}
+            {...rest}
+        />
+    )
+}
+
+export default EbaySkeletonText
diff --git a/src/ebay-skeleton/ebay-skeleton-textbox.tsx b/src/ebay-skeleton/ebay-skeleton-textbox.tsx
new file mode 100644
index 00000000..0fead76d
--- /dev/null
+++ b/src/ebay-skeleton/ebay-skeleton-textbox.tsx
@@ -0,0 +1,18 @@
+import React, { ReactNode } from 'react'
+import classNames from 'classnames'
+import { BaseSkeletonComponentProps, SupportedElements } from './types'
+
+export type EbaySkeletonTextboxProps<T extends SupportedElements> = BaseSkeletonComponentProps<T>
+
+const EbaySkeletonTextbox = <T extends SupportedElements = 'div'>(props: EbaySkeletonTextboxProps<T>): ReactNode => {
+    const { as: Component = 'div', className, ...rest } = props
+
+    return (
+        <Component
+            className={classNames('skeleton__textbox', className)}
+            {...rest}
+        />
+    )
+}
+
+export default EbaySkeletonTextbox
diff --git a/src/ebay-skeleton/ebay-skeleton.tsx b/src/ebay-skeleton/ebay-skeleton.tsx
new file mode 100644
index 00000000..43812c71
--- /dev/null
+++ b/src/ebay-skeleton/ebay-skeleton.tsx
@@ -0,0 +1,23 @@
+import React, { ComponentProps, FC } from 'react'
+import classNames from 'classnames'
+
+export type EbaySkeletonProps = ComponentProps<'div'> & {
+    color?: 'purple' | 'green' | 'blue'
+}
+
+const EbaySkeleton: FC<EbaySkeletonProps> = ({
+    children,
+    className,
+    color,
+    ...rest
+}) => (
+    <div
+        role="img"
+        className={classNames('skeleton', color && `skeleton--${color}`, className)}
+        {...rest}
+    >
+        {children}
+    </div>
+)
+
+export default EbaySkeleton
diff --git a/src/ebay-skeleton/index.ts b/src/ebay-skeleton/index.ts
new file mode 100644
index 00000000..7e229b58
--- /dev/null
+++ b/src/ebay-skeleton/index.ts
@@ -0,0 +1,6 @@
+export { default as EbaySkeleton, type EbaySkeletonProps } from './ebay-skeleton'
+export { default as EbaySkeletonAvatar, type EbaySkeletonAvatarProps } from './ebay-skeleton-avatar'
+export { default as EbaySkeletonButton, type EbaySkeletonButtonProps } from './ebay-skeleton-button'
+export { default as EbaySkeletonImage, type EbaySkeletonImageProps } from './ebay-skeleton-image'
+export { default as EbaySkeletonText, type EbaySkeletonTextProps } from './ebay-skeleton-text'
+export { default as EbaySkeletonTextbox, type EbaySkeletonTextboxProps } from './ebay-skeleton-textbox'
diff --git a/src/ebay-skeleton/types.ts b/src/ebay-skeleton/types.ts
new file mode 100644
index 00000000..450c9927
--- /dev/null
+++ b/src/ebay-skeleton/types.ts
@@ -0,0 +1,5 @@
+export type SupportedElements = 'div' | 'span'
+
+export type BaseSkeletonComponentProps<T extends SupportedElements = 'div'> = {
+    as?: T,
+} & Omit<JSX.IntrinsicElements[T], 'ref'>