feat(accordion): 1:1

[brianferry]

What I Did

• Removed all SCSS specific styles and replaced with CSS friendly styles
• Updated the stylings for pfe-accordion to match pf-accordion
• Created base classes for all of the pfe-accordion classes that will share the logic between PFE and RHDS accordions. Classes include:
  • BaseAccordion
  • BaseAccordionHeader
  • BaseAccordionPanel
• Implemented the following attributes for pfe-accordion
  • single
    • Only a single panel for an accordion can be open at a time
  • fixed
    • pfe-accordion-panel specific
    • If text goes over a maximum height (default 9.375rem) a scrollbar is added to the panel vertically
  • bordered
    • Adds a border between the headers in the accordion & on the top / bottom of the accordion.
  • large
    • Makes the font / spacing larger for the component.
    • Automatically gets the bordered styles
• Fixed an issue where nested accordions did not behave correctly to the single attribute by looking for the nearest accordion parent element and performing the expand / collapse check on it instead of bubbling all the way to the top level component.

Choices

• Disclosure has been removed from pfe-accordion and will be implemented back into the RHDS accordions rh-accordion

To Do

• Implement spec test files for the new attributes
• Update the css props with the updated attributes

Testing Instructions

• Load up the demo at https://deploy-preview-2114--patternfly-elements.netlify.app/components/accordion/demo/
• Load up the patternfly accordion examples at https://www.patternfly.org/v4/components/accordion/html/
• Compare & Contrast

Note To Reviews

This PR is breaking and will align pfe-accordion with the PFv4 accordion element.

Closes #2047

Example patternfly.org accordion component

<Accordion>
  <AccordionItem>
    <AccordionToggle onClick={() => { onToggle('def-list-toggle1'); }} isExpanded={expanded === 'def-list-toggle1'} id="def-list-toggle1">
        Item one
      </AccordionToggle>
      <AccordionContent id="def-list-expand1" isHidden={expanded !== 'def-list-toggle1'}>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
          dolore magna aliqua.
        </p>
       </AccordionContent>
      </AccordionItem>
  </Accordion>

Example proposed patternfly-elements accordion component

<pfe-accordion>
  <pfe-accordion-header>
    <h4>Accordion header 1</h4>
  </pfe-accordion-header>
  <pfe-accordion-panel>
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quos eius architecto sint sed provident. Fugiat quibusdam voluptas eveniet, facere repellendus aperiam aliquid voluptate est porro magni itaque laboriosam voluptatem modi?</p>
    </pfe-accordion-panel>
</pfe-accordion>

[changeset-bot]

🦋 Changeset detected

Latest commit: 567bc14

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@patternfly/pfe-accordion	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

✅ Deploy Preview for patternfly-elements ready!

Name	Link
🔨 Latest commit	ada08fe
😎 Deploy Preview	https://deploy-preview-2114--patternfly-elements.netlify.app/

---

_To edit notification comments on pull requests, go to your Netlify site settings.

[bennypowers]

make sure to add a changeset and keep it up to date with api changes

[bennypowers]

some notes from system fed discovery:

• we'd prefer to remove all the url state code from this component, so that it becomes an app-level concern instead
• similarly, expanded-index attr should be removed in favour of expanded attr on individual panels. the js property can stay though, and so could any sort of expandIndex(i: number): void method

[marionnegp]

Added one comment. The nested accordions look good!