refactor: break out the blockquote's author into more standalone sub-…

…components
boltdesignsystem · Jan 11, 2019 · 60fa53c · 60fa53c
1 parent cf0a027
commit 60fa53c
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 59 deletions.
diff --git a/packages/components/bolt-blockquote/src/Author/AuthorImage.js b/packages/components/bolt-blockquote/src/Author/AuthorImage.js
@@ -0,0 +1,28 @@
+import { html } from '@bolt/core/renderers/renderer-lit-html';
+import { ifDefined } from 'lit-html/directives/if-defined';
+import classNames from 'classnames/bind';
+import styles from '../blockquote.scss';
+
+const cx = classNames.bind(styles);
+
+export const AuthorImage = elem => {
+  const { props, slots } = elem;
+  if (slots['author-image'] || props.authorImage) {
+    return html`
+      <div class="${cx('c-bolt-blockquote__image')}">
+        ${
+          slots['author-image']
+            ? html`
+                ${elem.slot('author-image')}
+              `
+            : html`
+                <img
+                  src="${props.authorImage}"
+                  alt=${ifDefined(props.authorTitle)}
+                />
+              `
+        }
+      </div>
+    `;
+  }
+};
diff --git a/packages/components/bolt-blockquote/src/Author/AuthorName.js b/packages/components/bolt-blockquote/src/Author/AuthorName.js
@@ -0,0 +1,21 @@
+import { html } from '@bolt/core/renderers/renderer-lit-html';
+
+export const AuthorName = elem => {
+  const { props, slots } = elem;
+  if (slots['author-name'] || props.authorName) {
+    return html`
+      <bolt-text
+        tag="cite"
+        font-size="xsmall"
+        color="theme-headline"
+        font-weight="bold"
+      >
+        ${
+          elem.slots['author-name']
+            ? elem.slot('author-name')
+            : props.authorName
+        }
+      </bolt-text>
+    `;
+  }
+};
diff --git a/packages/components/bolt-blockquote/src/Author/AuthorTitle.js b/packages/components/bolt-blockquote/src/Author/AuthorTitle.js
@@ -0,0 +1,16 @@
+import { html } from '@bolt/core/renderers/renderer-lit-html';
+
+export const AuthorTitle = elem => {
+  const { props, slots } = elem;
+  if (slots['author-title'] || props.authorTitle) {
+    return html`
+      <bolt-text tag="cite" font-size="xsmall" color="theme-headline">
+        ${
+          elem.slots['author-title']
+            ? elem.slot('author-title')
+            : props.authorTitle
+        }
+      </bolt-text>
+    `;
+  }
+};
diff --git a/packages/components/bolt-blockquote/src/Author/index.js b/packages/components/bolt-blockquote/src/Author/index.js
@@ -0,0 +1,3 @@
+export { AuthorImage } from './AuthorImage';
+export { AuthorName } from './AuthorName';
+export { AuthorTitle } from './AuthorTitle';
diff --git a/packages/components/bolt-blockquote/src/blockquote.js b/packages/components/bolt-blockquote/src/blockquote.js
@@ -1,11 +1,11 @@
 import { props, define, hasNativeShadowDomSupport } from '@bolt/core/utils';
 import { withLitHtml, html } from '@bolt/core/renderers/renderer-lit-html';
-import { ifDefined } from 'lit-html/directives/if-defined';
 
 import { convertInitialTags } from '@bolt/core/decorators';
 import classNames from 'classnames/bind';
 import styles from './blockquote.scss';
 import schema from '../blockquote.schema.yml';
+import { AuthorImage, AuthorName, AuthorTitle } from './Author';
 
 let cx = classNames.bind(styles);
 
@@ -98,67 +98,10 @@ class BoltBlockquote extends withLitHtml() {
       [`c-bolt-blockquote--full`]: fullBleed,
     });
 
-    const AuthorImage = elem => {
-      const { props, slots } = elem;
-      if (slots['author-image'] || props.authorImage) {
-        return html`
-          <div class="${cx('c-bolt-blockquote__image')}">
-            ${
-              slots['author-image']
-                ? html`
-                    ${elem.slot('author-image')}
-                  `
-                : html`
-                    <img
-                      src="${props.authorImage}"
-                      alt=${ifDefined(props.authorTitle)}
-                    />
-                  `
-            }
-          </div>
-        `;
-      }
-    };
-
-    const AuthorTitle = elem => {
-      const { props, slots } = elem;
-      if (slots['author-title'] || props.authorTitle) {
-        return html`
-          <bolt-text tag="cite" font-size="xsmall" color="theme-headline">
-            ${
-              this.slots['author-title']
-                ? this.slot('author-title')
-                : props.authorTitle
-            }
-          </bolt-text>
-        `;
-      }
-    };
-
-    const AuthorName = elem => {
-      const { props, slots } = elem;
-      if (slots['author-name'] || props.authorName) {
-        return html`
-          <bolt-text
-            tag="cite"
-            font-size="xsmall"
-            color="theme-headline"
-            font-weight="bold"
-          >
-            ${
-              this.slots['author-name']
-                ? this.slot('author-name')
-                : props.authorName
-            }
-          </bolt-text>
-        `;
-      }
-    };
-
     let footerItems = [];
     footerItems.push(AuthorImage(this), AuthorName(this), AuthorTitle(this));
 
-    // console.log(footerItems);
+    // automatically add classes for the first and last slotted item to help with tricky ::slotted selectors
     if (this.slots.default) {
       const defaultSlot = [];