Merge branch '13.0.0' of https://github.com/eBay/ebayui-core into flo…

…atingui

README.md

@@ -85,6 +85,7 @@ Each layer does its bit to enforce and enhance accessibility. We consider this l
 -   [`ebay-segmented-buttons`](https://github.com/eBay/ebayui-core/tree/master/src/components/ebay-segmented-buttons)
 -   [`ebay-select`](https://github.com/eBay/ebayui-core/tree/master/src/components/ebay-select)
 -   [`ebay-signal`](https://github.com/eBay/ebayui-core/tree/master/src/components/ebay-signal)
+-   [`ebay-skeleton`](https://github.com/eBay/ebayui-core/tree/master/src/components/ebay-skeleton)
 -   [`ebay-snackbar-dialog`](https://github.com/eBay/ebayui-core/tree/master/src/components/ebay-snackbar-dialog)
 -   [`ebay-split-button`](https://github.com/eBay/ebayui-core/tree/master/src/components/ebay-split-button)
 -   [`ebay-star-rating`](https://github.com/eBay/ebayui-core/tree/master/src/components/ebay-star-rating)

src/components/ebay-skeleton/README.md

@@ -0,0 +1,15 @@
+<h1 style="display: flex; justify-content: space-between; align-items: center;">
+    <span>
+        ebay-skeleton
+    </span>
+    <span style="font-weight: normal; font-size: medium; margin-bottom: -15px;">
+        DS v1.0.0 [BETA]
+    </span>
+</h1>
+
+The Skeletons are simplified versions of layouts to indicate that information has not been fully loaded to improve the perceived performance.
+
+## Examples and Documentation
+
+-   [Storybook](https://ebay.github.io/ebayui-core/?path=/docs/building-blocks-ebay-skeleton--documentation)
+-   [Code Examples](https://github.com/eBay/ebayui-core/tree/master/src/components/ebay-skeleton/examples)

src/components/ebay-skeleton/components/ebay-skeleton-avatar/index.marko

@@ -0,0 +1,15 @@
+import { processHtmlAttributes } from "../../../../common/html-attributes";
+import type { AttrClass } from "marko/tags-html";
+static var ignoredAttributes = ["as", "class"];
+
+static interface SkeletonAvatarInput extends Omit<Marko.Input<"div">, `on${string}`> {
+    as?: Marko.NativeTags;
+    class?: AttrClass;
+}
+
+export interface Input extends WithNormalizedProps<SkeletonAvatarInput> {}
+
+<${input.as || 'div'}
+    class=["skeleton__avatar", input.class]
+    ...processHtmlAttributes(input, ignoredAttributes)
+/>

src/components/ebay-skeleton/components/ebay-skeleton-button/index.marko

@@ -0,0 +1,18 @@
+import { processHtmlAttributes } from "../../../../common/html-attributes";
+import type { AttrClass } from "marko/tags-html";
+static var ignoredAttributes = ["as", "class", "size"];
+
+static interface SkeletonButtonInput extends Omit<Marko.Input<"div">, `on${string}`> {
+    as?: Marko.NativeTags;
+    class?: AttrClass;
+    size?: "small" | "large";
+}
+
+export interface Input extends WithNormalizedProps<SkeletonButtonInput> {}
+
+$ let sizeClass = input.size ? `skeleton__button--${input.size}` :  "";
+
+<${input.as || "div"}
+    class=["skeleton__button", sizeClass, input.class]
+    ...processHtmlAttributes(input, ignoredAttributes)
+/>

src/components/ebay-skeleton/components/ebay-skeleton-image/index.marko

@@ -0,0 +1,15 @@
+import { processHtmlAttributes } from "../../../../common/html-attributes";
+import type { AttrClass } from "marko/tags-html";
+static var ignoredAttributes = ["as", "class"];
+
+static interface SkeletonImageInput extends Omit<Marko.Input<"div">, `on${string}`> {
+    as?: Marko.NativeTags;
+    class?: AttrClass;
+}
+
+export interface Input extends WithNormalizedProps<SkeletonImageInput> {}
+
+<${input.as || 'div'}
+    class=["skeleton__image", input.class]
+    ...processHtmlAttributes(input, ignoredAttributes)
+/>

src/components/ebay-skeleton/components/ebay-skeleton-text/index.marko

@@ -0,0 +1,24 @@
+import { processHtmlAttributes } from "../../../../common/html-attributes";
+import type { AttrClass } from "marko/tags-html";
+static var ignoredAttributes = ["as", "class", "size", "multiline"];
+
+static interface SkeletonTextInput extends Omit<Marko.Input<"div">, `on${string}`> {
+    as?: Marko.NativeTags;
+    class?: AttrClass;
+    size?: "small" | "large";
+    multiline?: boolean;
+}
+
+export interface Input extends WithNormalizedProps<SkeletonTextInput> {}
+
+$ const { size, multiline } = input;
+
+<${input.as || "div"}
+    class=[
+        "skeleton__text",
+        multiline && "skeleton__text--multiline",
+        size && size === "large" && `skeleton__text--large`,
+        input.class,
+    ]
+    ...processHtmlAttributes(input, ignoredAttributes)
+/>

src/components/ebay-skeleton/components/ebay-skeleton-textbox/index.marko

@@ -0,0 +1,15 @@
+import { processHtmlAttributes } from "../../../../common/html-attributes";
+import type { AttrClass } from "marko/tags-html";
+static var ignoredAttributes = ["as", "class"];
+
+static interface SkeletonTextBoxInput extends Omit<Marko.Input<"div">, `on${string}`> {
+    as?: Marko.NativeTags;
+    class?: AttrClass;
+}
+
+export interface Input extends WithNormalizedProps<SkeletonTextBoxInput> {}
+
+<${input.as || 'div'}
+    class=["skeleton__textbox", input.class]
+    ...processHtmlAttributes(input, ignoredAttributes)
+/>

src/components/ebay-skeleton/examples/avatar.marko

@@ -0,0 +1,3 @@
+<ebay-skeleton>
+    <ebay-skeleton-avatar />
+</ebay-skeleton>

src/components/ebay-skeleton/examples/button-small.marko

@@ -0,0 +1,10 @@
+<style>
+    .demo-btn-container {
+        width: 220px;
+    }
+</style>
+<div class="demo-btn-container">
+    <ebay-skeleton>
+        <ebay-skeleton-button size="small" />
+    </ebay-skeleton>
+</div>

src/components/ebay-skeleton/examples/button.marko

@@ -0,0 +1,10 @@
+<style>
+    .demo-btn-container {
+        width: 220px;
+    }
+</style>
+<div class="demo-btn-container">
+    <ebay-skeleton>
+        <ebay-skeleton-button />
+    </ebay-skeleton>
+</div>

src/components/ebay-skeleton/examples/composite.marko

@@ -0,0 +1,19 @@
+<style>
+    .demo-composite-container {
+        width: 300px;
+    }
+
+    .demo-composite-text {
+        vertical-align: top;
+        width: 220px;
+    }
+</style>
+<div class="demo-composite-container">
+    <ebay-skeleton>
+        <div>
+            <ebay-skeleton-avatar as="span"/>
+            <ebay-skeleton-text multiline="true" as="span" class="demo-composite-text"/>
+        </div>
+        <ebay-skeleton-button/>
+    </ebay-skeleton>
+</div>

src/components/ebay-skeleton/examples/image.marko

@@ -0,0 +1,15 @@
+<style>
+    .demo-image-container {
+        width: 220px;
+    }
+    .demo-image {
+        height: 220px;
+        width: 220px;
+    }
+</style>
+
+<div class="demo-image-container">
+    <ebay-skeleton>
+        <ebay-skeleton-image class="demo-image"/>
+    </ebay-skeleton>
+</div>

src/components/ebay-skeleton/examples/text-multiline.marko

@@ -0,0 +1,10 @@
+<style>
+    .demo-text-container {
+        width: 220px;
+    }
+</style>
+<div class="demo-text-container">
+    <ebay-skeleton style="width:220px">
+        <ebay-skeleton-text size="large" multiline="true"/>
+    </ebay-skeleton>
+</div>

src/components/ebay-skeleton/examples/text.marko

@@ -0,0 +1,10 @@
+<style>
+    .demo-text-container {
+        width: 220px;
+    }
+</style>
+<div class="demo-text-container">
+    <ebay-skeleton>
+        <ebay-skeleton-text />
+    </ebay-skeleton>
+</div>

src/components/ebay-skeleton/examples/textbox.marko

@@ -0,0 +1,10 @@
+<style>
+    .demo-textbox-container {
+        width: 220px;
+    }
+</style>
+<div class="demo-textbox-container">
+    <ebay-skeleton>
+        <ebay-skeleton-textbox />
+    </ebay-skeleton>
+</div>

src/components/ebay-skeleton/examples/tile.marko

@@ -0,0 +1,16 @@
+<style>
+    .demo-tile-container {
+        width: 220px;
+    }
+    .custom-image {
+        height: 220px;
+        width: 220px;
+    }
+</style>
+
+<div class="demo-tile-container">
+    <ebay-skeleton>
+        <ebay-skeleton-image class="custom-image"/>
+        <ebay-skeleton-text large multiline/>
+    </ebay-skeleton>
+</div>

src/components/ebay-skeleton/examples/withContent.marko

@@ -0,0 +1,38 @@
+class {
+    onCreate() {
+        this.state = {
+            isLoading: true,
+            data: null,
+        };
+    }
+    async getData() {
+        return new Promise((resolve, reject) => {
+            setTimeout(() => resolve("Button"), 2000);
+        });
+    }
+    async onMount() {
+        try {
+            this.state.data = await this.getData();
+        } catch (err) {
+            this.state.error = err;
+        } finally {
+            this.state.isLoading = false;
+        }
+    }
+}
+
+<style>
+    .demo-content-container {
+        width: 88px;
+    }
+</style>
+<div class="demo-content-container">
+    <if(state.isLoading)>
+        <ebay-skeleton>
+            <ebay-skeleton-button />
+        </ebay-skeleton>
+    </if>
+    <else>
+        <ebay-button> ${state.data} </ebay-button>
+    </else>
+</div>

src/components/ebay-skeleton/index.marko

@@ -0,0 +1,17 @@
+import { processHtmlAttributes } from "../../common/html-attributes";
+static var ignoredAttributes = ["a11yText", "class"];
+
+static interface SkeletonInput extends Omit<Marko.Input<"div">, `on${string}`> {
+    "a11y-text"?: string;
+}
+
+export interface Input extends WithNormalizedProps<SkeletonInput> {}
+
+<div
+    role="img"
+    aria-label=input.a11yText || "Loading..."
+    class=["skeleton", input.class]
+    ...processHtmlAttributes(input, ignoredAttributes)
+>
+    <${input.renderBody}/>
+</div>

src/components/ebay-skeleton/marko-tag.json

@@ -0,0 +1,14 @@
+{
+    "attribute-groups": ["html-attributes"],
+    "@*": {
+        "targetProperty": null,
+        "type": "expression"
+    },
+    "@html-attributes": "expression",
+    "@role": "never",
+    "@size": {
+        "enum": ["small", "large"]
+    },
+    "@multiline": "boolean",
+    "@a11yText": "string"
+}