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 <[email protected]>
eBay · Feb 7, 2025 · 5f6b738 · 5f6b738
1 parent ba897f7
commit 5f6b738
Show file tree

Hide file tree

Showing 14 changed files with 684 additions and 0 deletions.
diff --git a/.changeset/lucky-shrimps-bathe.md 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
@@ -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
@@ -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
@@ -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>
+`;