From 477fc2f2c1f53746000ae61067aa5a82529de2f5 Mon Sep 17 00:00:00 2001
From: Colby Cook <colby.cook@pega.com>
Date: Thu, 14 Oct 2021 10:30:18 -0400
Subject: [PATCH 1/2] Updated the tabs 'More' button label to be translatable

---
 packages/components/bolt-tabs/src/tabs.js    |  2 +-
 packages/components/bolt-tabs/src/tabs.twig  | 19 ++++++++++---------
 packages/components/bolt-tabs/tabs.schema.js |  5 +++++
 3 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/packages/components/bolt-tabs/src/tabs.js b/packages/components/bolt-tabs/src/tabs.js
index bbca90c58b..9b4926d92a 100644
--- a/packages/components/bolt-tabs/src/tabs.js
+++ b/packages/components/bolt-tabs/src/tabs.js
@@ -595,7 +595,7 @@ class BoltTabs extends withContext(BoltElement) {
             @keyup=${e => this.handleOnKeyup(e)}
           >
             <span class="${cx('c-bolt-tabs__show-text')}">
-              ${this.moreText ? this.moreText : 'More'}
+              ${this.dataset.boltMoreText || 'More'}
             </span>
             <span class="${cx('c-bolt-tabs__show-icon')}">
               <bolt-icon name="chevron-down"></bolt-icon>
diff --git a/packages/components/bolt-tabs/src/tabs.twig b/packages/components/bolt-tabs/src/tabs.twig
index b9e786934b..9fe819bb0b 100644
--- a/packages/components/bolt-tabs/src/tabs.twig
+++ b/packages/components/bolt-tabs/src/tabs.twig
@@ -1,4 +1,4 @@
-{% set schema = bolt.data.components["@bolt-components-tabs"].schema %}
+{% set schema = bolt.data.components['@bolt-components-tabs'].schema %}
 
 {% if enable_json_schema_validation %}
   {{ validate_data_schema(schema, _self) | raw }}
@@ -9,13 +9,13 @@
 {% set inner_attributes = create_attribute({}) %}
 
 {# Append string to `random()` to coerce to string #}
-{% set uuid = bolt.data.config.env == "test" ? "12345" : random() ~ "" %}
+{% set uuid = bolt.data.config.env == 'test' ? '12345' : random() ~ '' %}
 
 {# Array of classes based on the defined + default props #}
 {% set classes = [
-  "c-bolt-tabs",
-  this.data.align.value ? "c-bolt-tabs--align-" ~ this.data.align.value : "",
-  this.data.inset.value == "auto" or this.data.inset.value == "on" ? "c-bolt-tabs--inset" : ""
+  'c-bolt-tabs',
+  this.data.align.value ? 'c-bolt-tabs--align-' ~ this.data.align.value : '',
+  this.data.inset.value == 'auto' or this.data.inset.value == 'on' ? 'c-bolt-tabs--inset' : ''
 ] %}
 
 {#
@@ -27,23 +27,24 @@
 {% set inner_classes = classes %}
 
 {% for class in this.props['class'] %}
-  {% if class starts with "is-" or class starts with "has-" %}
+  {% if class starts with 'is-' or class starts with 'has-' %}
     {% set inner_classes = inner_classes|merge([class]) %}
-  {% elseif class starts with "c-bolt-" == false %}
+  {% elseif class starts with 'c-bolt-' == false %}
     {% set outer_classes = outer_classes|merge([class]) %}
   {% endif %}
 {% endfor %}
 
 <bolt-tabs
   {% if outer_classes %} class="{{ outer_classes|join(' ') }}" {% endif %}
-  {{ this.props|without("content")|without("class") }}
+  {{ this.props|without('class') }}
+  data-bolt-more-text="{{ 'More'|t }}"
   >
   {% if panels %}
     <div
       {% if inner_classes %} class="{{ inner_classes|join(' ') }}" {% endif %}
     >
     {% for panel in panels %}
-      {% include "@bolt-components-tabs/TabPanel/tab-panel.twig" with panel|merge({
+      {% include '@bolt-components-tabs/TabPanel/tab-panel.twig' with panel|merge({
         index: loop.index,
         uuid: uuid,
         label_spacing: this.data.label_spacing.value,
diff --git a/packages/components/bolt-tabs/tabs.schema.js b/packages/components/bolt-tabs/tabs.schema.js
index 38f61bb3b8..4f98757895 100644
--- a/packages/components/bolt-tabs/tabs.schema.js
+++ b/packages/components/bolt-tabs/tabs.schema.js
@@ -3,6 +3,11 @@ module.exports = {
   title: 'Tabs',
   type: 'object',
   properties: {
+    attributes: {
+      type: 'object',
+      description:
+        'A Drupal-style attributes object with extra attributes to append to this component.',
+    },
     panels: {
       type: 'array',
       description:

From 3b8158942d6b8b4cc25bb66baec5db516e659e0b Mon Sep 17 00:00:00 2001
From: Colby Cook <colby.cook@pega.com>
Date: Thu, 14 Oct 2021 13:13:14 -0400
Subject: [PATCH 2/2] Updated the tabs snapshot

---
 .../__tests__/__snapshots__/tabs.js.snap      | 63 ++++++++++++++-----
 1 file changed, 46 insertions(+), 17 deletions(-)

diff --git a/packages/components/bolt-tabs/__tests__/__snapshots__/tabs.js.snap b/packages/components/bolt-tabs/__tests__/__snapshots__/tabs.js.snap
index d6b0695ee4..e62eaac7dc 100644
--- a/packages/components/bolt-tabs/__tests__/__snapshots__/tabs.js.snap
+++ b/packages/components/bolt-tabs/__tests__/__snapshots__/tabs.js.snap
@@ -1,7 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Bolt Tabs Props Inset: auto 1`] = `
-<bolt-tabs inset="auto">
+<bolt-tabs inset="auto"
+           data-bolt-more-text="More"
+>
   <div class="c-bolt-tabs c-bolt-tabs--align-start c-bolt-tabs--inset">
     <input type="radio"
            name="tabs-12345"
@@ -111,7 +113,9 @@ exports[`Bolt Tabs Props Inset: auto 1`] = `
 `;
 
 exports[`Bolt Tabs Props Inset: off 1`] = `
-<bolt-tabs inset="off">
+<bolt-tabs inset="off"
+           data-bolt-more-text="More"
+>
   <div class="c-bolt-tabs c-bolt-tabs--align-start ">
     <input type="radio"
            name="tabs-12345"
@@ -221,7 +225,9 @@ exports[`Bolt Tabs Props Inset: off 1`] = `
 `;
 
 exports[`Bolt Tabs Props Inset: on 1`] = `
-<bolt-tabs inset="on">
+<bolt-tabs inset="on"
+           data-bolt-more-text="More"
+>
   <div class="c-bolt-tabs c-bolt-tabs--align-start c-bolt-tabs--inset">
     <input type="radio"
            name="tabs-12345"
@@ -331,7 +337,9 @@ exports[`Bolt Tabs Props Inset: on 1`] = `
 `;
 
 exports[`Bolt Tabs Props align: center 1`] = `
-<bolt-tabs align="center">
+<bolt-tabs align="center"
+           data-bolt-more-text="More"
+>
   <div class="c-bolt-tabs c-bolt-tabs--align-center c-bolt-tabs--inset">
     <input type="radio"
            name="tabs-12345"
@@ -441,7 +449,9 @@ exports[`Bolt Tabs Props align: center 1`] = `
 `;
 
 exports[`Bolt Tabs Props align: end 1`] = `
-<bolt-tabs align="end">
+<bolt-tabs align="end"
+           data-bolt-more-text="More"
+>
   <div class="c-bolt-tabs c-bolt-tabs--align-end c-bolt-tabs--inset">
     <input type="radio"
            name="tabs-12345"
@@ -551,7 +561,9 @@ exports[`Bolt Tabs Props align: end 1`] = `
 `;
 
 exports[`Bolt Tabs Props align: start 1`] = `
-<bolt-tabs align="start">
+<bolt-tabs align="start"
+           data-bolt-more-text="More"
+>
   <div class="c-bolt-tabs c-bolt-tabs--align-start c-bolt-tabs--inset">
     <input type="radio"
            name="tabs-12345"
@@ -661,7 +673,9 @@ exports[`Bolt Tabs Props align: start 1`] = `
 `;
 
 exports[`Bolt Tabs Props label_spacing: medium 1`] = `
-<bolt-tabs label-spacing="medium">
+<bolt-tabs label-spacing="medium"
+           data-bolt-more-text="More"
+>
   <div class="c-bolt-tabs c-bolt-tabs--align-start c-bolt-tabs--inset">
     <input type="radio"
            name="tabs-12345"
@@ -771,7 +785,9 @@ exports[`Bolt Tabs Props label_spacing: medium 1`] = `
 `;
 
 exports[`Bolt Tabs Props label_spacing: small 1`] = `
-<bolt-tabs label-spacing="small">
+<bolt-tabs label-spacing="small"
+           data-bolt-more-text="More"
+>
   <div class="c-bolt-tabs c-bolt-tabs--align-start c-bolt-tabs--inset">
     <input type="radio"
            name="tabs-12345"
@@ -881,7 +897,9 @@ exports[`Bolt Tabs Props label_spacing: small 1`] = `
 `;
 
 exports[`Bolt Tabs Props panel_spacing: medium 1`] = `
-<bolt-tabs panel-spacing="medium">
+<bolt-tabs panel-spacing="medium"
+           data-bolt-more-text="More"
+>
   <div class="c-bolt-tabs c-bolt-tabs--align-start c-bolt-tabs--inset">
     <input type="radio"
            name="tabs-12345"
@@ -991,7 +1009,9 @@ exports[`Bolt Tabs Props panel_spacing: medium 1`] = `
 `;
 
 exports[`Bolt Tabs Props panel_spacing: none 1`] = `
-<bolt-tabs panel-spacing="none">
+<bolt-tabs panel-spacing="none"
+           data-bolt-more-text="More"
+>
   <div class="c-bolt-tabs c-bolt-tabs--align-start c-bolt-tabs--inset">
     <input type="radio"
            name="tabs-12345"
@@ -1101,7 +1121,9 @@ exports[`Bolt Tabs Props panel_spacing: none 1`] = `
 `;
 
 exports[`Bolt Tabs Props panel_spacing: small 1`] = `
-<bolt-tabs panel-spacing="small">
+<bolt-tabs panel-spacing="small"
+           data-bolt-more-text="More"
+>
   <div class="c-bolt-tabs c-bolt-tabs--align-start c-bolt-tabs--inset">
     <input type="radio"
            name="tabs-12345"
@@ -1211,7 +1233,9 @@ exports[`Bolt Tabs Props panel_spacing: small 1`] = `
 `;
 
 exports[`Bolt Tabs Props scrollOffset 1`] = `
-<bolt-tabs scroll-offset="100">
+<bolt-tabs scroll-offset="100"
+           data-bolt-more-text="More"
+>
   <div class="c-bolt-tabs c-bolt-tabs--align-start c-bolt-tabs--inset">
     <input type="radio"
            name="tabs-12345"
@@ -1321,7 +1345,9 @@ exports[`Bolt Tabs Props scrollOffset 1`] = `
 `;
 
 exports[`Bolt Tabs Props scrollOffsetSelector 1`] = `
-<bolt-tabs scroll-offset-selector=".example-selector">
+<bolt-tabs scroll-offset-selector=".example-selector"
+           data-bolt-more-text="More"
+>
   <div class="c-bolt-tabs c-bolt-tabs--align-start c-bolt-tabs--inset">
     <input type="radio"
            name="tabs-12345"
@@ -1431,7 +1457,9 @@ exports[`Bolt Tabs Props scrollOffsetSelector 1`] = `
 `;
 
 exports[`Bolt Tabs Props selected_tab 1`] = `
-<bolt-tabs selected-tab="2">
+<bolt-tabs selected-tab="2"
+           data-bolt-more-text="More"
+>
   <div class="c-bolt-tabs c-bolt-tabs--align-start c-bolt-tabs--inset">
     <input type="radio"
            name="tabs-12345"
@@ -1541,7 +1569,7 @@ exports[`Bolt Tabs Props selected_tab 1`] = `
 `;
 
 exports[`Bolt Tabs default 1`] = `
-<bolt-tabs>
+<bolt-tabs data-bolt-more-text="More">
   <div class="c-bolt-tabs c-bolt-tabs--align-start c-bolt-tabs--inset">
     <input type="radio"
            name="tabs-12345"
@@ -1651,7 +1679,7 @@ exports[`Bolt Tabs default 1`] = `
 `;
 
 exports[`Bolt Tabs default with web component 1`] = `
-<bolt-tabs>
+<bolt-tabs data-bolt-more-text="More">
   <div class="c-bolt-tabs c-bolt-tabs--align-start c-bolt-tabs--inset">
     <input type="radio"
            name="tabs-12345"
@@ -1911,7 +1939,8 @@ exports[`Bolt Tabs default with web component 2`] = `
 `;
 
 exports[`Bolt Tabs default with web component 3`] = `
-<bolt-tabs ready
+<bolt-tabs data-bolt-more-text="More"
+           ready
            class
 >
   <bolt-tab-panel selected>