fix: Accordion design kit alignment (#1512) (#1726)

* fix: Isolating styles from pfe-accordion PR

* fix: Migrating styles over from accordion PR and fixing IE11 discrepencies

* fix: Update demo page text

* fix: Update docs

* fix: Update polyfills for accordion

* fix: Add a create for pfe-icon if not defined

* fix: Pull JS changes out of pfelement

* Update elements/pfelement/src/pfelement.js

* fix: Resolving define bugs

* fix: Fixing a design feedback and cleaning up duplication

* fix: Update the pfe-collapsible extend

* fix: Resolving IE11 discrepencies

* fix: Add a warning for version  mismatches

* fix: Update baselines

* fix: Update baselines; snapshot IE

* fix: Remove unused extends

* fix: Pull out polyfill updates to other PRs

* fix: Remove duplicate region roles

* fix: Update documentation

* fix: correct pfe-icon duplicate define calls; update slot docs for accent

* fix: Update styles to fix bug on h-tags with margin-top

* fix: adjust comment

* fix: Update documentation

* fix: Update demo page and adjust mark's placement

* fix: Pull out unrelated updates

* fix: Changelog update

* fix: Adjusting margins for alignment

* fix: Apply design feedback; tweaking the animation

* fix: Resolve IE11 bug, clean up styles, demo page

* fix: Make more room for accents to align themselves

* fix: Correct active background color duplication

* fix: Update baseline images; remove HP refs

* fix: Design feedback applied

* fix: Migrate tests to new testing framework

* fix: Remove references from WCT for items converted to new test framework

* fix: Bring back commented out tests

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

Author: castastrophe

CHANGELOG-1.x.md

@@ -1,6 +1,7 @@
 # 1.11.0 (2021)
 
 - [d3ea7fa](https://github.com/patternfly/patternfly-elements/commit/d3ea7facb0c36b7f3e20e2568bdc4bf2e5a5a852) feat: Graceful failure for component registry
+- [](https://github.com/patternfly/patternfly-elements/commit/) fix: Accordion alignment with latest design kit
 - [5f88c39](https://github.com/patternfly/patternfly-elements/commit/5f88c3963f8a6c13a9aeba6e9f664678453d46ce) fix: Jump links parseInt for IE11
 
 # 1.10.1 (2021-07-12)

docs/demo.html

@@ -74,37 +74,36 @@ <h3 slot="pfe-card--header">Card 3</h3>
     </pfe-band>
     <pfe-band>
       <h2 slot="pfe-band--header">Accordion component</h2>
-      <pfe-accordion>
+      <pfe-accordion expanded-index="1">
         <pfe-accordion-header>
-          <h3>Why do wizards need money if they could just create it?</h3>
+          <h3>Laboris sunt qui dolor consectetur excepteur in aliqua ipsum?</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>Culpa adipisicing sunt dolor ullamco dolor duis in ad commodo.</p>
+          <pfe-cta>
+            <a href="#">Call to action</a>
+          </pfe-cta>
         </pfe-accordion-panel>
         <pfe-accordion-header>
-          <h3>Why doesn't Harry have a portrait of his parents?</h3>
+          <h3>Anim est tempor fugiat pariatur laborum deserunt ex mollit aliquip?</h3>
         </pfe-accordion-header>
         <pfe-accordion-panel>
-          <p><a href="#">The characters in the portraits</a> are not actually ghosts. They mainly are there just to repeat common phrases or serve as a general <a href="foobarbaz.com">representation of the individual</a> they depict. A portrait of his parents would not be of much help to Harry.</p>
+          <p><a href="#">Ullamco ullamco sint</a> ex id magna elit deserunt dolore nostrud eu et dolore est Lorem. Esse laborum do ut consectetur occaecat proident et nostrud ut nostrud veniam officia Lorem.</p>
         </pfe-accordion-panel>
         <pfe-accordion-header>
-          <h3>Why is Harry considered a half-blood if both of his parents could use magic?</h3>
+          <h3>Nostrud ad sit commodo nostrud?</h3>
         </pfe-accordion-header>
         <pfe-accordion-panel>
-          <p>Because Harry's grandparents were not able to do magic. This is generally frowned upon by those who consider themselves pure, such as the Malfoy's or other antagonists.</p>
+          <p>Nisi veniam tempor reprehenderit laboris amet laborum et do ut. Veniam eiusmod aliquip ullamco quis esse laborum Lorem exercitation consequat.</p>
         </pfe-accordion-panel>
         <pfe-accordion-header>
-          <h3>Is Hogwarts the only wizarding school?</h3>
+          <h3>Reprehenderit cupidatat labore?</h3>
         </pfe-accordion-header>
         <pfe-accordion-panel>
-          <p>No! It has been revealed that there are actually 11 long established and prestigious schools around the globe. These include Castelobruxo in the rainforest of Brazil, Durmstrang Institute (whereas nobody is certain of it’s whereabouts), and Ilvermorny, right here in the United States.</p>
-        </pfe-accordion-panel>
-        <pfe-accordion-header>
-          <h3>Where do the main characters work as adults?</h3>
-        </pfe-accordion-header>
-        <pfe-accordion-panel>
-          <p>Harry and Hermione are at the Ministry: he ends up leading the Auror department. Ron helps George at the joke shop and does very well. Ginny becomes a professional Quidditch player and then sportswriter for the Daily Prophet.</p>
-          <p><a href="https://www.pottermore.com/collection/characters" target="blank">Read more about the characters</a></p>
+          <p>Magna incididunt aliquip consectetur dolor adipisicing amet cillum officia nostrud. Elit exercitation voluptate aute nostrud.</p>
+          <pfe-cta>
+            <a href="#">Call to action</a>
+          </pfe-cta>
         </pfe-accordion-panel>
       </pfe-accordion>
     </pfe-band>

elements/pfe-accordion/README.md

@@ -117,6 +117,32 @@ Accepts a 0-based index value (integer) for the set of accordion items to collap
 
 Collapse all accordion items.
 
+## Styling hooks
+
+| Theme hook | Description | Default |
+| --- | --- | --- |
+| `--pfe-accordion--Padding` | Applied to header and panel components | var(--pfe-theme--container-padding, 1rem) calc(var(--pfe-theme--container-padding, 1rem) * 1.5) |
+| `--pfe-accordion--BorderColor` | Color of the encompassing borders | var(--pfe-theme--color--surface--border, #d2d2d2) |
+| `--pfe-accordion--BorderWidth` | Width of the encompassing borders | var(--pfe-theme--surface--border-width, 1px) |
+| `--pfe-accordion--accent--width` | Width of the accent mark | var(--pfe-theme--surface--border-width--active, 3px) |
+| `--pfe-accordion--Width` | Maximum width for the accordion element | 100% |
+| `--pfe-accordion--MaxWidth--content` | Maximum width for the content inside the accordion panel | 80ch |
+| `--pfe-accordion--BoxShadow` | Box shadow on the header and panel in closed state | 0 5px 4px transparent |
+| `--pfe-accordion--ZIndex` | Accordion's z-index for the stack | 3 |
+| `--pfe-accordion--FontSize--header` | Font-size for the accordion header text | var(--pf-global--FontSize--xl, 1.25rem) |
+| `--pfe-accordion--FontWeight--header` | Font-weight for the accordion header text | var(--pfe-theme--font-weight--normal, 400) |
+| `--pfe-accordion--TextAlign` | Text alignment for the accordion header text | left |
+| `--pfe-accordion--BackgroundColor` | Background color for the accordion header and panel | transparent |
+| `--pfe-accordion--Color` | Text color for the accordion header and panel | var(--pfe-broadcasted--text, #3c3f42) |
+| `--pfe-accordion--accent` | Left accent line color for the accordion header and panel | transparent |
+| `--pfe-accordion--BackgroundColor--active` | Background color when the accordion is active (hover, focus) | var(--pfe-theme--color--surface--lighter, #f0f0f0) |
+| `--pfe-accordion--Color--active` | Text color when the accordion is active (hover, focus) | var(--pfe-broadcasted--text, #3c3f42) |
+| `--pfe-accordion--accent--active` | Color of the accent mark when the accordion is active (hover, focus) | var(--pfe-theme--color--ui-accent, #06c) |
+| `--pfe-accordion--BackgroundColor--expanded` | Background color when the accordion is open | var(--pfe-theme--color--surface--lightest, #fff) |
+| `--pfe-accordion--Color--expanded` | Text color when the accordion is open | var(--pfe-broadcasted--text, #3c3f42) |
+| `--pfe-accordion--accent--expanded` | Color of the accent mark when the accordion is open | var(--pfe-theme--color--ui-accent, #06c) |
+| `--pfe-accordion--BoxShadow--expanded` | Box shadow when the accordion is open | 0 5px 4px rgba(140, 140, 140, 0.35) |
+
 ## Test
 
     npm run test

elements/pfe-accordion/demo/demo.css

@@ -2,10 +2,6 @@ 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;
@@ -44,35 +40,43 @@ h2 {
 
 /* Example not using context variable */
 .custom-styles {
-    background-color: #e00;
-    --pfe-broadcasted--text: pink;
+    background-color: rgb(108, 245, 154);
+    --context: saturated;
+    
+    --pfe-broadcasted--text: #444;
     --pfe-broadcasted--link: green;
     --pfe-broadcasted--link--hover: #eee;
     --pfe-broadcasted--link--focus: #fff;
-}
 
-.custom-styles pfe-accordion {
-    --pfe-accordion--accent: #fff;
-    --pfe-theme--color--ui-accent: #ad41ad;
-}
+    --pfe-accordion--BackgroundColor--active: rgba(255, 255, 255, 0.5);
+    --pfe-accordion--accent--active: hotpink;
+    --pfe-accordion--Color--active: inherit;
+    
+    --pfe-accordion--accent--expanded: hotpink;
+    --pfe-accordion--BackgroundColor--expanded: pink;
+    --pfe-accordion--Color--expanded: #000;
 
-.custom-styles pfe-accordion-header[expanded] {
-    --pfe-accordion--accent: #ad41ad;
+    --pfe-accordion--BorderColor: #fff;
 }
 
-.custom-styles pfe-accordion pfe-accordion {
+.custom-styles pfe-accordion-panel pfe-accordion {
+    --context: light;
+
     --pfe-accordion--accent: initial;
-    --pfe-theme--color--ui-accent: initial;
+    --pfe-accordion--accent--expanded: initial;
+    --pfe-accordion--accent--active: initial;
+    --pfe-accordion--BackgroundColor--expanded: initial;
+    --pfe-accordion--Color--expanded: initial;
+    --pfe-accordion--Color--active: initial;
+
+    --pfe-accordion--BorderColor: #fff;
+
     --pfe-broadcasted--text: initial;
     --pfe-broadcasted--link: initial;
     --pfe-broadcasted--link--hover: initial;
     --pfe-broadcasted--link--focus: initial;
 }
 
-.custom-styles pfe-accordion pfe-accordion-header[expanded] {
-    --pfe-accordion--accent: initial;
-}
-
 .custom-styles h2 {
     margin-top: 0;
 }