From e42efb25ed4fdf2ddd10e138f766399d62ecff65 Mon Sep 17 00:00:00 2001
From: Scott Nath <github@scottnath.com>
Date: Mon, 9 Oct 2023 21:19:51 -0400
Subject: [PATCH] :art: more viewed examples

---
 src/devto/user/user.stories.js  | 26 ++++++++++++++++++++++----
 src/github/user/user.stories.js | 30 ++++++++++++++++++++++++------
 2 files changed, 46 insertions(+), 10 deletions(-)

diff --git a/src/devto/user/user.stories.js b/src/devto/user/user.stories.js
index dcca59e..33c39a0 100644
--- 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>
+    `;
+  }
+}
\ No newline at end of file
diff --git a/src/github/user/user.stories.js b/src/github/user/user.stories.js
index eb33169..1f1292c 100644
--- 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);
   }
-};
\ No newline at end of file
+};
+
+
+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>
+    `;
+  }
+}
\ No newline at end of file