Convert blockquote to web component

docs-site/src/pages/pattern-lab/_patterns/02-components/blockquote/35-blockquote-web-component.twig

@@ -0,0 +1,87 @@
+{% macro code_example(code, copy) %}
+  <bolt-code-snippet syntax="dark" lang="html" {{ copy ? 'copy-to-clipboard' : '' }}>{% spaceless %}
+    {{ code | replace({
+      '<': '&lt;',
+      '>': '&gt;',
+    }) | trim | raw }}
+  {% endspaceless %}</bolt-code-snippet>
+{% endmacro %}
+
+{% import _self as blockquote_demo %}
+
+{% set blockquote_demo_simple %}
+<bolt-blockquote author-name="Michelangelo di Lodovico Buonarroti Simoni" author-title="Renaissance Artist" author-image="/images/placeholders/500x500.jpg">
+  <p>The greater danger for most of us lies not in setting our aim too high and falling short; but in setting our aim too low, and achieving our mark.</p>
+</bolt-blockquote>
+{% endset %}
+
+{% set blockquote_demo_attributes %}
+<bolt-blockquote align-items="center" border="horizontal" author-name="Michelangelo di Lodovico Buonarroti Simoni" author-title="Renaissance Artist" author-image="/images/placeholders/500x500.jpg">
+  <p>The greater danger for most of us lies not in setting our aim too high and falling short; but in setting our aim too low, and achieving our mark.</p>
+</bolt-blockquote>
+{% endset %}
+
+{% set blockquote_demo_logo %}
+<bolt-blockquote author-name="Michelangelo di Lodovico Buonarroti Simoni" author-title="Renaissance Artist" author-image="/images/placeholders/500x500.jpg">
+  <img slot="logo" src="/images/content/logos/logo-paypal.svg" alt="PayPal Logo">
+  <p>The greater danger for most of us lies not in setting our aim too high and falling short...</p>
+  <p>In fact, the greater danger is setting our aim too low and achieving our mark.</p>
+</bolt-blockquote>
+{% endset %}
+
+<div class="o-bolt-wrapper">
+  <bolt-text headline>
+    Web Component Usage
+  </bolt-text>
+  <bolt-text>
+    Bolt Link is a web component that renders a semantic blockquote with Bolt styles. For a simple blockquote, wrap your quote content in the <bolt-code-snippet display="inline" lang="html">&lt;bolt-blockquote&gt;</bolt-code-snippet> custom element. Note: you must wrap your quote text in <bolt-code-snippet display="inline" lang="html">&lt;p&gt;</bolt-code-snippet> tags for the appropriate quotation marks to appear. Add attribution to the quote by adding the <bolt-code-snippet display="inline" lang="html">author-name</bolt-code-snippet>, <bolt-code-snippet display="inline" lang="html">author-title</bolt-code-snippet>, and <bolt-code-snippet display="inline" lang="html">author-image</bolt-code-snippet> attributes to <bolt-code-snippet display="inline" lang="html">&lt;bolt-blockquote&gt;</bolt-code-snippet>. 
+  </bolt-text>
+  <div class="t-bolt-light u-bolt-margin-bottom-small u-bolt-padding-medium">
+    {% grid "o-bolt-grid--flex o-bolt-grid--matrix o-bolt-grid--center" %}
+      {% cell "u-bolt-width-12/12" %}
+        {{ blockquote_demo_simple }}
+      {% endcell %}
+    {% endgrid %}
+  </div>
+  <div class="u-bolt-margin-bottom-large">
+    {% include blockquote_demo.code_example(blockquote_demo_simple, true) %}
+  </div>
+</div>
+
+<div class="o-bolt-wrapper">
+  <bolt-text headline>
+    Additional Options
+  </bolt-text>
+  <bolt-text>
+    Apply additional configuration options via attributes on the <bolt-code-snippet display="inline" lang="html">&lt;bolt-blockquote&gt;</bolt-code-snippet> element. Attribute names and values match the Twig schema but use "kebab-case" instead of "camelCase". For example, <bolt-code-snippet display="inline" lang="html">alignItems</bolt-code-snippet> becomes <bolt-code-snippet display="inline" lang="html">align-items</bolt-code-snippet>.
+  </bolt-text>
+  <div class="t-bolt-light u-bolt-margin-bottom-small u-bolt-padding-medium">
+    {% grid "o-bolt-grid--flex o-bolt-grid--matrix o-bolt-grid--center" %}
+      {% cell "u-bolt-width-12/12" %}
+        {{ blockquote_demo_attributes }}
+      {% endcell %}
+    {% endgrid %}
+  </div>
+  <div class="u-bolt-margin-bottom-large">
+    {% include blockquote_demo.code_example(blockquote_demo_attributes, true) %}
+  </div>
+</div>
+
+<div class="o-bolt-wrapper">
+  <bolt-text headline>
+    Advanced Usage
+  </bolt-text>
+  <bolt-text>
+    To add a logo to <bolt-code-snippet display="inline" lang="html">&lt;bolt-blockquote&gt;</bolt-code-snippet> place logo content (for example: <bolt-code-snippet display="inline" lang="html">&lt;bolt-logo&gt;</bolt-code-snippet> or <bolt-code-snippet display="inline" lang="html">&lt;img&gt;</bolt-code-snippet>) next to blockquote text, and add the attribute <bolt-code-snippet display="inline" lang="html">slot="logo"</bolt-code-snippet> to the logo's outermost container.
+  </bolt-text>
+  <div class="t-bolt-light u-bolt-margin-bottom-small u-bolt-padding-medium">
+    {% grid "o-bolt-grid--flex o-bolt-grid--matrix o-bolt-grid--center" %}
+      {% cell "u-bolt-width-12/12" %}
+        {{ blockquote_demo_logo }}
+      {% endcell %}
+    {% endgrid %}
+  </div>
+  <div class="u-bolt-margin-bottom-large">
+    {% include blockquote_demo.code_example(blockquote_demo_logo, true) %}
+  </div>
+</div>

docs-site/src/templates/_site-head.twig

@@ -20,7 +20,7 @@
 {% set cacheBuster = bolt.data.config.prod ? "?v=" ~ bolt.data.fullManifest.version : "" %}
 
 <!DOCTYPE html>
-<html lang="en-US" class="{{ bolt.data.config.prod ? '' : 'js-fonts-loaded' }}">
+<html lang="en-US">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width" />
@@ -83,5 +83,4 @@
     {% endif %} #}
 
   </head>
-  <body class="c-bolt-site  c-bds-layout {% if currentUrl == 'index.html' %} t-bolt-xdark {% endif %} c-bds-layout--{{ urlChunks | length >= 2 ? urlChunks|first : 'parent' }} {{ hasSidebar ? 'c-bds-layout--has-sidebar' : ''}}">
-
+  <body class="c-bolt-site  c-bds-layout {% if currentUrl == 'index.html' %} t-bolt-xdark {% endif %} c-bds-layout--{{ urlChunks | length >= 2 ? urlChunks|first : 'parent' }} {{ hasSidebar ? 'c-bds-layout--has-sidebar' : ''}} {{ patternLabFoot ? 'u-bolt-min-height-none' : '' }}">

packages/components/bolt-blockquote/TESTING.md

@@ -0,0 +1,34 @@
+# Testing Steps
+
+## Simple Use Case
+
+As a user, I view a simple Blockquote. [View example »](https://feature-convert-blockquote-to-web-component.boltdesignsystem.com/pattern-lab/patterns/02-components-blockquote-05-blockquote/02-components-blockquote-05-blockquote.html)
+
+### Quotation
+
+I verify that:
+
+- The blockquote contains a quotation.
+- The quotation has opening and closing quotation marks.
+- If the quotation contains more than one paragraph, the closing quotation mark comes only at the end of the second paragraph.
+
+### Author information
+
+Blockquotes may include the author's photo, name, and title after the quotation.
+
+If there is information about the author, I verify that:
+
+- The author's photo (optional) is below the quotation, after a small space.
+- The author's name and/or title is smaller in size than the quotation.
+- The author's name is bold and the author's title is normal font weight.
+
+### Decoration
+
+Blockquotes may have decorative borders.
+
+If there is a decorative border, I verify that:
+
+- The border color is green.
+- The border appears to the left of the quotation content.
+- The border spans from the top of the quotation to the last piece of author information.
+- There is a small space between the border and the quotation and author content.

packages/components/bolt-blockquote/blockquote.schema.yml

@@ -1,4 +1,3 @@
-$schema: http://json-schema.org/draft-04/schema#
 title: Blockquote
 type: object
 required:
@@ -8,7 +7,7 @@ properties:
     type: object
     description: A Drupal-style attributes object with extra attributes to append to this component.
   content:
-    description: Text to appear in blockquote.
+    description: Text to appear in blockquote (Twig only). May be plain text or text wrapped in <p> tags.
     type: string
   size:
     description: Text size.
@@ -43,19 +42,19 @@ properties:
     default: false
     type: boolean
   logo:
-      description: Add a logo component.
-      type: object
-      ref: '@bolt-components-logo/logo.schema.yml'
+    description: Add a logo component.
+    type: object
+    ref: '@bolt-components-logo/logo.schema.yml'
   author:
-      description: Author of the quote.
-      type: object
-      properties:
-        name:
-          type: string
-          description: Author's name.
-        title:
-          type: string
-          description: Author's title.
-        image:
-          type: object
-          ref: '@bolt-components-image/image.schema.yml'
+    description: Author of the quote.
+    type: object
+    properties:
+      name:
+        type: string
+        description: Author's name.
+      title:
+        type: string
+        description: Author's title.
+      image:
+        type: object
+        ref: '@bolt-components-image/image.schema.yml'

packages/components/bolt-blockquote/index.js

@@ -0,0 +1,5 @@
+import { polyfillLoader } from '@bolt/core/polyfills';
+
+polyfillLoader.then(res => {
+  import(/* webpackMode: 'eager', webpackChunkName: 'bolt-blockquote' */ './src/blockquote');
+});

packages/components/bolt-blockquote/index.scss

@@ -0,0 +1 @@
+@import 'src/blockquote.scss';

packages/components/bolt-blockquote/package.json

@@ -26,13 +26,17 @@
   "license": "MIT",
   "repository": "https://github.com/bolt-design-system/bolt/tree/master/packages/components/bolt-blockquote",
   "bugs": "https://github.com/bolt-design-system/bolt/issues",
-  "style": "src/blockquote.scss",
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
-    "@bolt/core": "^2.3.0-rc.0"
+    "@bolt/core": "^2.3.0-rc.0",
+    "@bolt/components-text": "^2.3.0-rc.0",
+    "@bolt/components-image": "^2.3.0-rc.0"
   },
+  "style": "index.scss",
+  "main": "index.js",
+  "twig": "src/blockquote.twig",
   "schema": "blockquote.schema.yml",
   "gitHead": "b47538629e315eeecbdfcb8d0c22e787b3bcc089"
 }

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>
+    `;
+  }
+};

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>
+    `;
+  }
+};

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>
+    `;
+  }
+};

packages/components/bolt-blockquote/src/Author/index.js

@@ -0,0 +1,3 @@
+export { AuthorImage } from './AuthorImage';
+export { AuthorName } from './AuthorName';
+export { AuthorTitle } from './AuthorTitle';