feat: Accordion expand on load (#859) (#1583)

* feat: Setting up support for selected-index; history; and fix a few small styling bugs

* feat: Adding variable hooks to pfe-layouts

* feat: History in URL is working

* feat: Adding multi-select to the expanded-index attribute

* feat: Update documentation

* feat: Updating baselines

* feat: Update accordion header styles for disclosure to fix IE11 preview

* feat: Update baseline for IE11

* feat: Updating disclosure regression

* feat: Update accordion tests

* feat: Uncomment out framework tests

* feat: Update changelog; demo page

* feat: Adding in spacing

* feat: Update package-lock

* feat: Add full-width demo example to pfe-band

* feat: Update storybook

* feat: Resolve failing tests on accordion; update storybook

* feat: Update console log tests

* feat: Resolve rounding error in pfe-card tests

* feat: Resolving test errors

* feat: Resolve pfelement console errors and content set inconsitencies

* Apply suggestions from code review

* feat: Update package-lock

* Update CHANGELOG-1.x.md

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Author: castastrophe

CHANGELOG-1.x.md

@@ -1,7 +1,8 @@
 # 1.7.0 (2021)
 
+- [](https://github.com/patternfly/patternfly-elements/commit/) feat: Accordion direct link / expand on load (#859)
+- [b57c5b0](https://github.com/patternfly/patternfly-elements/commit/b57c5b013acef370ba962b7796a870c37802a33f) feat: Adds Web Test Runner which will eventually replace Web Component Tester
 - [20cb906](https://github.com/patternfly/patternfly-elements/commit/20cb906b5bf3d9340097170d6be7bdacbb4b12a5) fix: Updating PFElement.log (aka this.log) so it logs arrays and objects, instead of converting them to strings
-- [b57c5b0](https://github.com/patternfly/patternfly-elements/commit/b57c5b013acef370ba962b7796a870c37802a33f) feat: Adds Web Test Runner which will replace Web Component Tester
 
 # 1.6.0 (2021-04-23)
 

elements/pfe-accordion/README.md

@@ -5,16 +5,16 @@
 ```
 <pfe-accordion>
   <pfe-accordion-header>
-    <h2>Why do wizards need money if they could just create it?</h2>
+    <h3>Consetetur sadipscing elitr?</h3>
   </pfe-accordion-header>
   <pfe-accordion-panel>
-    <p>There is legislation that decides what you can conjure and what you can not. Because things that you conjure out of thin air will not last, it is illegal in the wizarding world.</p>
+    <p><a href="#">Lorem ipsum dolor sit amet</a>, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
   </pfe-accordion-panel>
   <pfe-accordion-header>
-    <h2>Why doesn't Harry have a portrait of his parents?</h2>
+    <h3>Labore et dolore magna aliquyam erat?</h3>
   </pfe-accordion-header>
   <pfe-accordion-panel>
-    <p>The characters in the portraits are not actually ghosts. They mainly are there just to repeat common phrases or serve as a general representation of the individual they depict. A portrait of his parents would not be of much help to Harry.</p>
+    <p><a href="#">Lorem ipsum dolor sit amet</a>, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
   </pfe-accordion-panel>
 </pfe-accordion>
 ```
@@ -27,12 +27,11 @@ Place the `pfe-accordion-header` and `pfe-accordion-panel` elements here.
 
 ### Default slot in pfe-accordion-header
 
-We expect the light DOM of the `pfe-accordion-header` to be a heading level tag
-(h1, h2, h3, h4, h5, h6)
+We expect the light DOM of the `pfe-accordion-header` to be a heading level tag (h1, h2, h3, h4, h5, h6). This content is copied into shadow DOM and so most external styles will not penetrate.
 
 ### Default slot in pfe-accordion-panel
 
-Add the content for your accordion panel here.
+Add the content for your accordion panel here. This content remains in the light DOM; external styles will penetrate this region.
 
 ## Attributes
 
@@ -47,6 +46,42 @@ This will override any context being passed from a parent component and will add
 **`disclosure`**
 If `pfe-accordion` has one `pfe-accordion-header`, it will get tagged with `disclosure="true"`. This applies a slightly different set of styles: chevron appears on the left side, the header has a single border on all four sides. Applying `disclosure="false"` to a `pfe-accordion` element containing only one header/panel pairing will set the element to display as a standard accordion.
 
+**`history`**
+Updates window.history and the URL to create sharable links. With the `history` attribute, the accordion *must* have an `id`.
+
+The URL pattern will be `?{id-of-tabs}={index-of-expanded-items}`. In the example
+below, selecting "Accordion 2" will update the URL as follows: `?lorem-ipsum=2`. The index value for the expanded items starts at 1.
+
+```html
+<pfe-accordion history id="lorem-ipsum">
+  <pfe-accordion-header>
+    <h3>Accordion 1</h3>
+  </pfe-accordion-header>
+  <pfe-accordion-panel>
+    <p>Accordion 1 panel content.</p>
+  </pfe-accordion-panel>
+  <pfe-accordion-header>
+    <h3>Accordion 2</h3>
+  </pfe-accordion-header>
+  <pfe-accordion-panel>
+    <p>Accordion 2 panel content.</p>
+  </pfe-accordion-panel>
+</pfe-accordion>
+```
+
+To expand multiple sets, you can dash separate indexes: `?lorem-ipsum=1-2`.
+
+*Note:* This feature is not supported in IE11.
+
+**`expanded-index`**
+Sets and reflects the currently expanded accordion indexes. Use commas to separate multiple indexes.  The index value for the expanded items starts at 1.
+
+```html
+<pfe-accordion expanded-index="2,3">
+  ...
+</pfe-accordion>
+```
+
 ## Events
 
 ### pfe-accordion:change
@@ -60,6 +95,28 @@ detail: {
 }
 ```
 
+## API
+
+### toggle(index)
+
+Accepts a 0-based index value (integer) for the set of accordion items to expand or collapse.
+
+### expand(index)
+
+Accepts a 0-based index value (integer) for the set of accordion items to expand.
+
+### expandAll()
+
+Expands all accordion items.
+
+### collapse(index)
+
+Accepts a 0-based index value (integer) for the set of accordion items to collapse.
+
+### collapseAll()
+
+Collapse all accordion items.
+
 ## Test
 
     npm run test

elements/pfe-accordion/demo/demo.css

@@ -2,6 +2,10 @@ section {
     padding: 2rem;
 }
 
+pfe-jump-links-nav {
+    --pfe-accordion__panel-container--Padding: calc(var(--pfe-theme--container-spacer, 1rem) * 1.5);
+}
+
 .dark-background {
     background-color: #252525;
     --context: dark;