Merge pull request #346 from patternfly/pfe-content-set-fix

Fixes issue #345: pfe-content-set

Author: castastrophe

elements/pfe-accordion/src/pfe-accordion.js

@@ -185,8 +185,8 @@ class PfeAccordion extends PFElement {
     headers.forEach(header => {
       const panel = this._panelForHeader(header);
 
-      header.setAttribute("aria-controls", panel.id);
-      panel.setAttribute("aria-labelledby", header.id);
+      header.setAttribute("aria-controls", panel.pfeId);
+      panel.setAttribute("aria-labelledby", header.pfeId);
     });
   }
 
@@ -356,6 +356,18 @@ class PfeAccordionHeader extends PFElement {
     return "pfe-accordion-header.html";
   }
 
+  get pfeId() {
+    return this.getAttribute("pfe-id");
+  }
+
+  set pfeId(id) {
+    if (!id) {
+      return;
+    }
+
+    this.setAttribute("pfe-id", id);
+  }
+
   static get observedAttributes() {
     return ["aria-expanded"];
   }
@@ -372,8 +384,8 @@ class PfeAccordionHeader extends PFElement {
       this.setAttribute("role", "header");
     }
 
-    if (!this.id) {
-      this.id = `${PfeAccordionHeader.tag}-${generateId()}`;
+    if (!this.pfeId) {
+      this.pfeId = `${PfeAccordionHeader.tag}-${generateId()}`;
     }
 
     this.button = this.shadowRoot.querySelector("button");
@@ -456,6 +468,18 @@ class PfeAccordionPanel extends PFElement {
     return "pfe-accordion-panel.html";
   }
 
+  get pfeId() {
+    return this.getAttribute("pfe-id");
+  }
+
+  set pfeId(id) {
+    if (!id) {
+      return;
+    }
+
+    this.setAttribute("pfe-id", id);
+  }
+
   constructor() {
     super(PfeAccordionPanel);
   }
@@ -467,8 +491,8 @@ class PfeAccordionPanel extends PFElement {
       this.setAttribute("role", "region");
     }
 
-    if (!this.id) {
-      this.id = `${PfeAccordionPanel.tag}-${generateId()}`;
+    if (!this.pfeId) {
+      this.pfeId = `${PfeAccordionPanel.tag}-${generateId()}`;
     }
   }
 

elements/pfe-accordion/test/pfe-accordion_test.html

@@ -68,8 +68,8 @@ <h2>Where do the main characters work as adults?</h2>
           assert.equal(header.getAttribute('role'), 'header');
           assert.isTrue(panel.hasAttribute('aria-labelledby'));
           assert.equal(panel.getAttribute('role'), 'region');
-          assert.equal(header.id, panel.getAttribute('aria-labelledby'));
-          assert.equal(panel.id, header.getAttribute('aria-controls'));
+          assert.equal(header.pfeId, panel.getAttribute('aria-labelledby'));
+          assert.equal(panel.pfeId, header.getAttribute('aria-controls'));
         });
 
         test('it should expand a panel when a header is selected', () => {

elements/pfe-content-set/LICENSE.txt

@@ -1,4 +1,4 @@
-Copyright 2018 Red Hat, Inc.
+Copyright 2019 Red Hat, Inc.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

elements/pfe-content-set/README.md

@@ -3,35 +3,26 @@
 
 ## Overview
 
-`pfe-content-set` is a combo component, which brings together the utilities of the accordion and tabs components. Effectively both of these components do the same job, which is to encapsulate chunks of information under headings for easier browsing. Hiding some information and allowing the user to toggle through the headings to show other bits of information. 
+`pfe-content-set` is a combo component, which brings together the utilities of the accordion and tabs components. Effectively both of these components do the same job, which is to encapsulate chunks of information under headings for easier browsing. Hiding some information and allowing the user to toggle through the headings to show other bits of information.
 
 Since tabs can pose a layout issue on mobile because of the lack of horizontal space, this component will first assess the width of the parent container. If the width is less than 768px, the component will render the content within the `<pfe-accordion>` component. If it is larger than this value, the content will be rendered inside the `<pfe-tabs>` component.
 
 ## Dependencies
 
 Requires both the `pfe-accordion` and `pfe-tabs` components, as well as the base `pfelement`.
 
-
 ## Usage
 
-You must wrap each chunk of information (heading + content) in a `<pfe-content-set-group>` tag. 
-
-You must also apply the `pfe-heading` to the HTML heading element, like an H2 or H3. Otherwise content within the component will not be rendered.
+Each header must have an attribute of `pfe-content-set--header` and each panel must have an attribute of `pfe-content-set--panel`. Each header must be immediately followed by a panel.
 
 ```html
 <pfe-content-set>
-  <pfe-content-set-group>
-    <h2 pfe-heading>Heading 1</h2>
-    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore </p>
-  </pfe-content-set-group>
-  <pfe-content-set-group>
-    <h2 pfe-heading>Heading 2</h2>
-    <p>Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam volu et jen, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
-  </pfe-content-set-group>
-  <pfe-content-set-group>
-    <h2 pfe-heading>Heading 3</h2>
-    <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
-  </pfe-content-set-group>
+  <h2 pfe-content-set--header>Heading 1</h2>
+  <p pfe-content-set--panel>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore </p>
+  <h2 pfe-content-set--header>Heading 2</h2>
+  <p pfe-content-set--panel>Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam volu et jen, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
+  <h2 pfe-content-set--header>Heading 3</h2>
+  <p pfe-content-set--panel>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
 </pfe-content-set>
 
 ```
@@ -48,7 +39,7 @@ You must also apply the `pfe-heading` to the HTML heading element, like an H2 or
     - Tabs: Borders are removed, only an indicator appears under the active heading.
 - `pfe-variant="secondary"`
     - Accordion: Headings are on a dark background, text color is reversed.
-    - Tabs: Headings are encased in a block. The active heading is solid, with a caret pointing downward towards the content. Other headings have a border with no fill. 
+    - Tabs: Headings are encased in a block. The active heading is solid, with a caret pointing downward towards the content. Other headings have a border with no fill.
 - `vertical`
     - Accordion: No effect.
     - Tabs: Headings stack on the left, content pane is shown on the right.