feat: add align attribute to pass down to tabs on render

elements/pfe-content-set/README.md

@@ -43,6 +43,9 @@ Each header must have an attribute of `pfe-content-set--header` and each panel m
 - `vertical`
     - Accordion: No effect.
     - Tabs: Headings stack on the left, content pane is shown on the right.
+- `pfe-align="center"`
+    - Accordion: No effect.
+    - Tabs: Tabs are centered.
 
 
 

elements/pfe-content-set/demo/index.html

@@ -276,6 +276,24 @@ <h2 pfe-content-set--header>Heading 2</h2>
       <div pfe-content-set--panel>Content for heading 2. Sed posuere consectetur est at lobortis. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas faucibus mollis interdum.</div>
     </pfe-content-set>
 
+    <hr>
+
+    <h2>Align: center</h2>
+    <pfe-content-set pfe-align="center">
+      <h2 pfe-content-set--header>Heading 1</h2>
+      <div pfe-content-set--panel>
+        <p>Content for heading 1. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod.</p>
+        <div class="cta">
+          <a href="https://redhat.com">Primary CTA</a>
+        </div>
+      </div>
+      <h2 pfe-content-set--header>Heading 2</h2>
+      <div pfe-content-set--panel>Content for heading 2. Sed posuere consectetur est at lobortis. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas faucibus mollis interdum.</div>
+      <h2 pfe-content-set--header>Heading 3</h2>
+      <div pfe-content-set--panel>Content for heading 3. Donec ullamcorper nulla non metus auctor fringilla. Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.</div>
+    </pfe-content-set>
+
+    <hr>
     <h2>This content set's markup is incorrect.</h2>
     <pfe-content-set>
       <h2>Heading 1</h2>

elements/pfe-content-set/src/pfe-content-set.js

@@ -155,6 +155,10 @@ class PfeContentSet extends PFElement {
       tabs.setAttribute("on", this.on.value);
     }
 
+    if (this.align.value) {
+      tabs.setAttribute("pfe-tab-align", this.align.value);
+    }
+
     if (!existingTabs) {
       this.appendChild(fragment);
     }

elements/pfe-content-set/src/pfe-content-set.json

@@ -41,6 +41,12 @@
           "default": "wind",
           "prefixed": true
         },
+        "align": {
+          "title": "Align",
+          "type": "string",
+          "enum": ["center"],
+          "prefixed": true
+        },
         "on": {
           "title": "Context",
           "type": "string",

elements/pfe-content-set/test/pfe-content-set_test.html

@@ -70,6 +70,11 @@ <h2 pfe-content-set--header>Heading 1</h2>
       </pfe-content-set>
     </div>
 
+    <pfe-content-set id="align" pfe-align="center">
+      <h2 pfe-content-set--header>Heading 1</h2>
+      <p pfe-content-set--panel>Panel 1</p>
+    </pfe-content-set>
+
     <script>
       suite('<pfe-content-set>', () => {
         test('it should have the proper attributes for tabs', () => {
@@ -163,6 +168,15 @@ <h2 pfe-content-set--header>Heading 1</h2>
             done();
           });
         });
+
+        test("it should set pfe-tab-align on the tabs if the pfe-align attribute is present on pfe-content-set", () => {
+          const pfeContentSet = document.querySelector("#align");
+          const pfeTabs = pfeContentSet.querySelector("pfe-tabs");
+          const alignValue = pfeContentSet.getAttribute("pfe-align");
+          const pfeTabAlignValue = pfeTabs.getAttribute("pfe-tab-align");
+
+          assert.equal(alignValue, pfeTabAlignValue);
+        });
       });
     </script>
   </body>