🎨 add some themes stories

.storybook/preview-head.html

@@ -0,0 +1,3 @@
+
+
+<script defer data-domain="scottnath.com" src="https://plausible.io/js/script.js"></script>

custom-elements.json

@@ -239,6 +239,14 @@
               "description": "JSON stringified array of repositories",
               "name": "repos",
               "kind": "field"
+            },
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "color theme for the component",
+              "name": "theme",
+              "kind": "field"
             }
           ],
           "superclass": {

src/devto/user/index.js

@@ -20,6 +20,7 @@ import { styles } from '../styles/index.js';
  * @property {number} [post_count] - The number of posts the user has published
  * @property {string} [latest_post] - User's latest post content, JSON stringified 
  * @property {string} [popular_post] - User's most popular post content, JSON stringified 
+ * @property {string} [theme] - color theme for the component
  * 
  * @example
  * <!-- import the web component -->
@@ -56,6 +57,9 @@ export class DevtoUser extends HTMLElement {
     this.user = await generateUserContent(this.attrs, this.attrs.fetch);
     view += userHTML(this.user);
     this.shadowRoot.innerHTML = view;
+    if (this.attrs.theme) {
+      this.setAttribute('data-theme', this.attrs.theme);
+    }
   }
 
 }

src/devto/user/user.stories.js

@@ -78,7 +78,10 @@ export const FetchOverides = {
 }
 
 export const ContainerCheck = {
-  args: FetchOverides.args,
+  args: {
+    ...FetchOverides.args,
+    theme: 'dark'
+  },
 
   render: (args) => {
     const attributes = attrs(args);

src/github/styles/user.css

@@ -62,7 +62,7 @@ section[itemscope] {
     display: block;
     text-align: center;
     align-items: center;
-    padding: calc(var(--row-spacing) * 2) 0;
+    padding: var(--row-spacing) 0;
 
     [itemprop="image"] {
       display: block;
@@ -122,7 +122,7 @@ section[itemscope] {
   }
 
   [itemprop="description"] {
-    margin: calc(var(--row-spacing) * 2) 0;
+    margin-bottom: var(--row-spacing);
   }
 
   & dl:has([itemprop="follows"]),

src/github/user/index.js

@@ -19,6 +19,7 @@ import { styles } from '../styles/index.js';
  * @property {string} [following] - number of people user is following
  * @property {string} [followers] - number of followers
  * @property {string} [repos] - JSON stringified array of repositories
+ * @property {string} [theme] - color theme for the component
  * 
  * @example
  * <!-- import the web component -->
@@ -56,6 +57,9 @@ export class GitHubUser extends HTMLElement {
     this.content = await generateUserContent(this.attrs, this.attrs.fetch);
     view += html(this.content);
     this.shadowRoot.innerHTML = view;
+    if (this.attrs.theme) {
+      this.setAttribute('data-theme', this.attrs.theme);
+    }
   }
 }
 

src/github/user/user.stories.js

@@ -1,8 +1,9 @@
-import { repoScottnathdotcom, repoStorydocker, userScottnath, userSindresorhus } from '../fixtures';
+import { repoProfileComponents, repoStorydocker, userScottnath, userSindresorhus } from '../fixtures';
 import { generateMockResponse } from '../utils/testing';
 import { parseFetchedUser } from './content';
 import { parseFetchedRepo } from '../repository/content.js';
 import { getElements, ensureElements } from './user.shared-spec';
+import { primerThemes } from '../../../.storybook/primer-preview.js';
 
 import '.';
 
@@ -37,7 +38,7 @@ export const User  = {
 export const UserRepos = {
   args: {
     ...User.args,
-    repos: stringify([parseFetchedRepo(repoStorydocker), { ...parseFetchedRepo(repoScottnathdotcom), user_login: userScottnath.login }]),
+    repos: stringify([{ ...parseFetchedRepo(repoProfileComponents), user_login: userScottnath.login }, parseFetchedRepo(repoStorydocker)]),
   },
   play: User.play,
 }
@@ -105,7 +106,7 @@ export const ReposFetch = {
   args: {
     login: userScottnath.login,
     fetch: true,
-    repos: stringify([repoScottnathdotcom.name, repoStorydocker.full_name]),
+    repos: stringify([repoProfileComponents.name, repoStorydocker.full_name]),
   },
   parameters: {
     mockData: [
@@ -142,10 +143,11 @@ export const FetchError = {
   }
 };
 
-
 export const ContainerCheck = {
-  args: FetchOverides.args,
-
+  args: {
+    ...FetchOverides.args,
+    theme: 'light_high_contrast'
+  },
   render: (args) => {
     const attributes = attrs(args);
 
@@ -157,4 +159,42 @@ export const ContainerCheck = {
       </div>
     `;
   }
+}
+
+const themesRender = (args) => {
+  const attributes = attrs(args);
+
+  return `
+    <div style="display: flex; flex-wrap: wrap; width: 1000px; margin: 1em;">
+      ${primerThemes.map((theme) => {
+        return `
+        <github-user ${attributes} theme="${theme.value}" style="flex: 1 1 200px;"></github-user>
+        `;
+      }).join('')}
+      ${primerThemes.map((theme) => {
+        return `
+        <github-user ${attributes} theme="${theme.value}" style="flex: 1 1 300px;"></github-user>
+        `;
+      }).join('')}
+      ${primerThemes.map((theme) => {
+        return `
+        <github-user ${attributes} theme="${theme.value}" style="flex: 1 1 400px;"></github-user>
+        `;
+      }).join('')}
+    </div>
+  `;
+}
+
+export const Themes = {
+  args: {
+    ...ReposFetch.args,
+  },
+  render: themesRender
+}
+
+export const ThemesWithOverrides = {
+  args: {
+    ...FetchOverides.args,
+  },
+  render: themesRender
 }