fix(skeleton): code review suggestions

eBay · Dec 15, 2023 · 65fbff1 · 65fbff1
1 parent be493e6
commit 65fbff1
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 123 deletions.
diff --git a/src/components/ebay-skeleton/examples/withContent.marko b/src/components/ebay-skeleton/examples/withContent.marko
@@ -22,11 +22,11 @@ class {
 }
 
 <style>
-    .demo-container {
+    .demo-content-container {
         width: 88px;
     }
 </style>
-<div class="demo-container">
+<div class="demo-content-container">
     <if(state.isLoading)>
         <ebay-skeleton>
             <ebay-skeleton-button />

diff --git a/src/components/ebay-skeleton/skeleton.stories.js b/src/components/ebay-skeleton/skeleton.stories.js
@@ -1,5 +1,8 @@
 import { tagToString } from "../../../.storybook/storybook-code-source";
-import { addRenderBodies } from "../../../.storybook/utils";
+import {
+    addRenderBodies,
+    buildExtensionTemplate,
+} from "../../../.storybook/utils";
 import Component from "./index.marko";
 import Readme from "./README.md";
 import avatarTemplate from "./examples/avatar.marko";
@@ -89,132 +92,34 @@ Default.parameters = {
     },
 };
 
-export const Avatar = (args) => ({
-    input: args,
-    component: avatarTemplate,
-});
-Avatar.args = {};
-Avatar.parameters = {
-    docs: {
-        source: {
-            code: avatarCode,
-        },
-    },
-};
+export const Avatar = buildExtensionTemplate(avatarTemplate, avatarCode);
 
-export const Button = (args) => ({
-    input: args,
-    component: buttonTemplate,
-});
-Button.args = {};
-Button.parameters = {
-    docs: {
-        source: {
-            code: buttonCode,
-        },
-    },
-};
+export const Button = buildExtensionTemplate(buttonTemplate, buttonCode);
 
-export const ButtonSmall = (args) => ({
-    input: args,
-    component: buttonSmallTemplate,
-});
-ButtonSmall.args = {};
-ButtonSmall.parameters = {
-    docs: {
-        source: {
-            code: buttonSmallCode,
-        },
-    },
-};
+export const ButtonSmall = buildExtensionTemplate(
+    buttonSmallTemplate,
+    buttonSmallCode,
+);
 
-export const Text = (args) => ({
-    input: args,
-    component: textTemplate,
-});
-Text.args = {};
-Text.parameters = {
-    docs: {
-        source: {
-            code: textCode,
-        },
-    },
-};
+export const Text = buildExtensionTemplate(textTemplate, textCode);
 
-export const TextMultiLine = (args) => ({
-    input: args,
-    component: textMultilineTemplate,
-});
-TextMultiLine.args = {};
-TextMultiLine.parameters = {
-    docs: {
-        source: {
-            code: textMultilineCode,
-        },
-    },
-};
+export const TextMultiLine = buildExtensionTemplate(
+    textMultilineTemplate,
+    textMultilineCode,
+);
 
-export const TextBox = (args) => ({
-    input: args,
-    component: textboxTemplate,
-});
-TextBox.args = {};
-TextBox.parameters = {
-    docs: {
-        source: {
-            code: textboxCode,
-        },
-    },
-};
+export const TextBox = buildExtensionTemplate(textboxTemplate, textboxCode);
 
-export const Image = (args) => ({
-    input: args,
-    component: imageTemplate,
-});
-Image.args = {};
-Image.parameters = {
-    docs: {
-        source: {
-            code: imageCode,
-        },
-    },
-};
+export const Image = buildExtensionTemplate(imageTemplate, imageCode);
 
-export const Tile = (args) => ({
-    input: args,
-    component: tileTemplate,
-});
-Tile.args = {};
-Tile.parameters = {
-    docs: {
-        source: {
-            code: tileCode,
-        },
-    },
-};
+export const Tile = buildExtensionTemplate(tileTemplate, tileCode);
 
-export const composite = (args) => ({
-    input: args,
-    component: compositeTemplate,
-});
-composite.args = {};
-composite.parameters = {
-    docs: {
-        source: {
-            code: compositeCode,
-        },
-    },
-};
+export const composite = buildExtensionTemplate(
+    compositeTemplate,
+    compositeCode,
+);
 
-export const withContent = (args) => ({
-    input: args,
-    component: withContentTemplate,
-});
-withContent.args = {};
-withContent.parameters = {
-    docs: {
-        source: {
-            code: withContentCode,
-        },
-    },
-};
+export const withContent = buildExtensionTemplate(
+    withContentTemplate,
+    withContentCode,
+);