feat: add lang as a prop, update demo

Author: Daniel Morse

docs-site/src/pages/pattern-lab/_patterns/02-components/blockquote/35-blockquote-language-specific-quotation-marks.twig

@@ -1,66 +1,58 @@
+<bolt-text>
+  For language-specific quotes, Blockquote inherits the value of the closest <code>lang</code> attribute. Override that value by setting the <code>lang</code> prop directly on the component.
+</bolt-text>
+
 {% include "@bolt-components-headline/headline.twig" with {
   text: "English",
   size: "xlarge",
   tag: "h2"
 } only %}
-
-<div lang="en" class="u-bolt-margin-bottom-large">
 {% include "@bolt-components-blockquote/blockquote.twig" with {
   "author": {
     "name": "Michelangelo di Lodovico Buonarroti Simoni",
     "title": "Renaissance Artist"
   },
   "content": "<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>"
 } %}
-</div>
-
 
 {% include "@bolt-components-headline/headline.twig" with {
   text: "German",
   size: "xlarge",
   tag: "h2"
 } only %}
-
-<div lang="de" class="u-bolt-margin-bottom-large">
 {% include "@bolt-components-blockquote/blockquote.twig" with {
   "author": {
     "name": "Michelangelo di Lodovico Buonarroti Simoni",
     "title": "Renaissance Artist"
   },
-  "content": "<p>Echtzeit bedeutet Relevanz. Kunden erwarten von uns, dass wir jederzeit wissen, was sie gerade denken.</p>"
+  "content": "<p>Echtzeit bedeutet Relevanz. Kunden erwarten von uns, dass wir jederzeit wissen, was sie gerade denken.</p>",
+  "lang": "de"
 } %}
-</div>
-
 
 {% include "@bolt-components-headline/headline.twig" with {
   text: "French",
   size: "xlarge",
   tag: "h2"
 } only %}
-
-<div lang="fr" class="u-bolt-margin-bottom-large">
 {% include "@bolt-components-blockquote/blockquote.twig" with {
   "author": {
     "name": "Michelangelo di Lodovico Buonarroti Simoni",
     "title": "Renaissance Artist"
   },
-  "content": "<p>Davantage de temps réel, c'est plus de pertinence. Les clients s’attendent à ce que nous lisions dans leurs pensées, dans l’instant présent.</p>"
+  "content": "<p>Davantage de temps réel, c'est plus de pertinence. Les clients s’attendent à ce que nous lisions dans leurs pensées, dans l’instant présent.</p>",
+  "lang": "fr"
 } %}
-</div>
-
 
 {% include "@bolt-components-headline/headline.twig" with {
   text: "Japanese",
   size: "xlarge",
   tag: "h2"
 } only %}
-
-<div lang="ja" class="u-bolt-margin-bottom-large">
 {% include "@bolt-components-blockquote/blockquote.twig" with {
   "author": {
     "name": "Michelangelo di Lodovico Buonarroti Simoni",
     "title": "Renaissance Artist"
   },
-  "content": "<p>リアルタイムであればあるほど、関連性は高まります。顧客は自分たちが今何を考えているかこちらが把握することを期待しています。</p>"
+  "content": "<p>リアルタイムであればあるほど、関連性は高まります。顧客は自分たちが今何を考えているかこちらが把握することを期待しています。</p>",
+  "lang": "ja"
 } %}
-</div>

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

@@ -45,6 +45,9 @@ properties:
     description: Hide quotation marks.
     default: false
     type: boolean
+  lang:
+    description: Set language-specific quotation marks. By default, inherits the value of the closest `lang` attribute.
+    type: string
   logo:
     description: Add a logo component.
     type: object

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

@@ -22,6 +22,7 @@ class BoltBlockquote extends withLitHtml() {
     indent: props.boolean,
     fullBleed: props.boolean,
     noQuotes: props.boolean,
+    lang: props.string,
     authorName: props.string,
     authorTitle: props.string,
     authorImage: props.string,
@@ -141,6 +142,7 @@ class BoltBlockquote extends withLitHtml() {
       indent,
       fullBleed,
       noQuotes,
+      lang,
       authorName,
       authorTitle,
       authorImage,
@@ -159,9 +161,6 @@ class BoltBlockquote extends withLitHtml() {
       [`c-bolt-blockquote--no-quotes`]: noQuotes,
     });
 
-    // Get closest [lang] tag and add to blockquote element so that CSS selector will work inside shadow DOM
-    const lang = this.closest('[lang]');
-
     let footerItems = [];
     footerItems.push(AuthorImage(this), AuthorName(this), AuthorTitle(this));
 
@@ -187,7 +186,13 @@ class BoltBlockquote extends withLitHtml() {
       <blockquote
         class="${classes}"
         lang="${ifDefined(
-          lang ? lang.getAttribute('lang').toLowerCase() : undefined,
+          lang
+            ? lang
+            : this.closest('[lang]')
+            ? this.closest('[lang]')
+                .getAttribute('lang')
+                .toLowerCase()
+            : undefined,
         )}"
       >
         ${this.slots.logo