🎨 more viewed examples

scottnath · Oct 10, 2023 · e42efb2 · e42efb2
1 parent 0d8c798
commit e42efb2
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 10 deletions.
diff --git a/src/devto/user/user.stories.js b/src/devto/user/user.stories.js
@@ -9,15 +9,17 @@ import './index.js';
 
 const stringify = (obj) => JSON.stringify(obj).replace(/"/g, "&quot;");
 
+const attrs = (args) => Object.entries(args)
+.filter(([key, value]) => value)
+.map(([key, value]) => `${key}="${value}"`)
+.join(' ');
+
 export default {
   title: 'DevTo/devto-user',
   component: 'devto-user',
   tags: ['autodocs'],
   render: (args) => {
-    const attributes = Object.entries(args)
-      .filter(([key, value]) => value)
-      .map(([key, value]) => `${key}="${value}"`)
-      .join(' ');
+    const attributes = attrs(args);
 
     return `
       <devto-user ${attributes}></devto-user>
@@ -74,3 +76,19 @@ export const FetchOverides = {
     }),
   },
 }
+
+export const ContainerCheck = {
+  args: FetchOverides.args,
+
+  render: (args) => {
+    const attributes = attrs(args);
+
+    return `
+      <div style="display: flex; width: 1000px; margin: 1em;">
+        <devto-user ${attributes} style="flex: 1 1 200px;"></devto-user>
+        <devto-user ${attributes} style="flex: 1 1 300px;"></devto-user>
+        <devto-user ${attributes} style="flex: 1 1 400px;"></devto-user>
+      </div>
+    `;
+  }
+}
diff --git a/src/github/user/user.stories.js b/src/github/user/user.stories.js
@@ -8,15 +8,17 @@ import '.';
 
 const stringify = (obj) => JSON.stringify(obj).replace(/"/g, "&quot;");
 
+const attrs = (args) => Object.entries(args)
+.filter(([key, value]) => value)
+.map(([key, value]) => `${key}="${value}"`)
+.join(' ');
+
 export default {
   title: 'GitHub/github-user',
   component: 'github-user',
   tags: ['autodocs'],
   render: (args) => {
-    const attributes = Object.entries(args)
-      .filter(([key, value]) => value)
-      .map(([key, value]) => `${key}="${value}"`)
-      .join(' ');
+    const attributes = attrs(args);
 
     return `
       <github-user ${attributes}></github-user>
@@ -120,7 +122,6 @@ export const ReposFetch = {
   }
 }
 
-
 export const FetchError = {
   args: {
     login: 'not-a-real-user',
@@ -139,4 +140,21 @@ export const FetchError = {
     };
     await ensureElements(elements, argsAfterFetch);
   }
-};
+};
+
+
+export const ContainerCheck = {
+  args: FetchOverides.args,
+
+  render: (args) => {
+    const attributes = attrs(args);
+
+    return `
+      <div style="display: flex; width: 1000px; margin: 1em;">
+        <github-user ${attributes} style="flex: 1 1 200px;"></github-user>
+        <github-user ${attributes} style="flex: 1 1 300px;"></github-user>
+        <github-user ${attributes} style="flex: 1 1 400px;"></github-user>
+      </div>
+    `;
+  }
+}