refactor(skeleton): refactor code

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

@@ -0,0 +1 @@
+<ebay-skeleton-loader type="image" style="width:220px; height:220px" ...input/>

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

@@ -0,0 +1,29 @@
+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;
+        }
+    }
+}
+
+<if(state.isLoading)>
+    <ebay-skeleton-loader type="button" style="width:88px" ...input/>
+</if>
+<else>
+    <ebay-button> ${state.data} </ebay-button>
+</else>

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

@@ -7,9 +7,12 @@ static var ignoredAttributes = [
     "multiline",
     "count",
     "columns",
+    "isVisible",
 ];
-$ var size = input.size || "default";
-$ var type = input.type || "button";
+static var validTypes = ["avatar", "button", "text", "form", "image", "tile"];
+static var validSizes = ["large", "small"];
+$ var size = validSizes.includes(input.size) ? input.size : "default";
+$ var type = validTypes.includes(input.type) ? input.type : "button";
 $ var typeClass = type === "button" ? "skeleton--btn" : `skeleton--${type}`;
 $ var skeletonClass = (
     size !== "default"
@@ -19,23 +22,27 @@ $ var skeletonClass = (
         : typeClass
 );
 
-<div
-    ...processHtmlAttributes(input, ignoredAttributes)
-    class=[
-        type !== "tile" ? `skeleton ${skeletonClass}` : typeClass,
-        input.multiline && type === "text" && "skeleton--text-multiline",
-        input.class,
-    ]
-    role="img"
-    aria-label=input.a11yText || "Loading"
->
-    <if(type === "tile")>
-        <div class="skeleton-image-container">
-            <div class="skeleton skeleton--image"/>
-        </div>
-        <div class=[
-            `skeleton skeleton--text-${size !== "default" ? size : "small"}`,
-            input.multiline && "skeleton--text-multiline",
-        ]/>
-    </if>
-</div>
+<if(typeof input.isVisible === "undefined" ? true : input.isVisible)>
+    <div
+        ...processHtmlAttributes(input, ignoredAttributes)
+        class=[
+            type !== "tile" ? `skeleton ${skeletonClass}` : typeClass,
+            input.multiline && type === "text" && "skeleton--text-multiline",
+            input.class,
+        ]
+        role="img"
+        aria-label=input.a11yText || "Loading"
+    >
+        <if(type === "tile")>
+            <div class="skeleton-image-container">
+                <div class="skeleton skeleton--image"/>
+            </div>
+            <div class=[
+                `skeleton skeleton--text-${
+                    size !== "default" ? size : "small"
+                }`,
+                input.multiline && "skeleton--text-multiline",
+            ]/>
+        </if>
+    </div>
+</if>

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

@@ -1 +1,18 @@
-{}
+{
+    "attribute-groups": ["html-attributes"],
+    "@*": {
+        "targetProperty": null,
+        "type": "expression"
+    },
+    "@html-attributes": "expression",
+    "@role": "never",
+    "@type": {
+        "enum": ["avatar", "button", "form", "text", "tile"]
+    },
+    "@size": {
+        "enum": ["default", "small", "large"]
+    },
+    "@multiline": "boolean",
+    "@isVisible": "boolean",
+    "@a11yText": "string"
+}

src/components/ebay-skeleton-loader/skeleton-loader.stories.js

@@ -12,8 +12,12 @@ import textMultilineTemplate from "./examples/text-multiline.marko";
 import textMultilineCode from "./examples/text-multiline.marko?raw";
 import formTemplate from "./examples/form.marko";
 import formCode from "./examples/form.marko?raw";
+import imageTemplate from "./examples/image.marko";
+import imageCode from "./examples/image.marko?raw";
 import tileTemplate from "./examples/tile.marko";
 import tileCode from "./examples/tile.marko?raw";
+import withContentTemplate from "./examples/withContent.marko";
+import withContentCode from "./examples/withContent.marko?raw";
 
 const Template = (args) => ({
     input: addRenderBodies(args),
@@ -33,7 +37,7 @@ export default {
     argTypes: {
         size: {
             control: { type: "select" },
-            options: ["default", "small", "large"],
+            options: ["small", "large"],
             table: {
                 defaultValue: {
                     summary: "default",
@@ -52,6 +56,15 @@ export default {
             description:
                 "If the text should be multiline. Applicable for type `text` or `tile` only",
         },
+        isVisible: {
+            control: { type: "boolean" },
+            table: {
+                defaultValue: {
+                    summary: "true",
+                },
+            },
+            description: "If set to true, the skeleton will be visible",
+        },
         a11yText: {
             control: { type: "text" },
             description: "The accessibility text for the component",
@@ -141,6 +154,19 @@ Form.parameters = {
     },
 };
 
+export const Image = (args) => ({
+    input: args,
+    component: imageTemplate,
+});
+Image.args = {};
+Image.parameters = {
+    docs: {
+        source: {
+            code: imageCode,
+        },
+    },
+};
+
 export const Tile = (args) => ({
     input: args,
     component: tileTemplate,
@@ -153,3 +179,16 @@ Tile.parameters = {
         },
     },
 };
+
+export const withContent = (args) => ({
+    input: args,
+    component: withContentTemplate,
+});
+withContent.args = {};
+withContent.parameters = {
+    docs: {
+        source: {
+            code: withContentCode,
+        },
+    },
+};