feat(accordion): add two variations of html markup (#1990)

* feat(accordion): add two variations of html markup

* fix(accordion): add period to docs

* fix(accordion): updates based on Jenns review

src/patternfly/components/Accordion/accordion-expanded-content.hbs

@@ -1,9 +1,9 @@
-<dd class="pf-c-accordion__expanded-content{{#if accordion-expanded-content--IsExpanded}} pf-m-expanded{{/if}}{{#if accordion-expanded-content--IsFixed}} pf-m-fixed{{/if}}{{#if accordion-expanded-content--modifier}} {{accordion-expanded-content--modifier}}{{/if}}"
+<{{#if accordion--IsDefinitionList}}dd{{else}}div{{/if}} class="pf-c-accordion__expanded-content{{#if accordion-expanded-content--IsExpanded}} pf-m-expanded{{/if}}{{#if accordion-expanded-content--IsFixed}} pf-m-fixed{{/if}}{{#if accordion-expanded-content--modifier}} {{accordion-expanded-content--modifier}}{{/if}}"
   {{#unless accordion-expanded-content--IsExpanded}}hidden{{/unless}}
   {{#if accordion-expanded-content--attribute}}
     {{{accordion-expanded-content--attribute}}}
   {{/if}}>
   {{#> accordion-expanded-content-body}}
     {{> @partial-block}}
   {{/accordion-expanded-content-body}}
-</dd>
+</{{#if accordion--IsDefinitionList}}dd{{else}}div{{/if}}>

src/patternfly/components/Accordion/accordion-toggle.hbs

@@ -1,6 +1,6 @@
-<dt><h3><button class="pf-c-accordion__toggle{{#if accordion-toggle--IsExpanded}} pf-m-expanded{{/if}}{{#if accordion-toggle--modifier}} {{accordion-toggle--modifier}}{{/if}}"
+<{{#if accordion--IsDefinitionList}}dt>{{else}}h3>{{/if}}<button class="pf-c-accordion__toggle{{#if accordion-toggle--IsExpanded}} pf-m-expanded{{/if}}{{#if accordion-toggle--modifier}} {{accordion-toggle--modifier}}{{/if}}"
  {{#if accordion-toggle--attribute}}
    {{{accordion-toggle--attribute}}}
  {{/if}}>
  {{> @partial-block}}
-</button></h3></dt>
+</button></{{#if accordion--IsDefinitionList}}dt{{else}}h3{{/if}}>

src/patternfly/components/Accordion/accordion.hbs

@@ -1,6 +1,6 @@
-<dl class="pf-c-accordion{{#if accordion--modifier}} {{accordion--modifier}}{{/if}}"
+<{{#if accordion--IsDefinitionList}}dl{{else}}div{{/if}} class="pf-c-accordion{{#if accordion--modifier}} {{accordion--modifier}}{{/if}}"
  {{#if accordion--attribute}}
    {{{accordion--attribute}}}
  {{/if}}>
  {{> @partial-block}}
-</dl>
+</{{#if accordion--IsDefinitionList}}dl{{else}}div{{/if}}>

src/patternfly/components/Accordion/docs/code.md

@@ -1,5 +1,12 @@
 ## Overview
 
+There are two variations to build the accordion component:
+One way uses `<div>` and `<h1 - h6>` tags to build the component. 
+In these examples `.pf-c-accordion` uses `<div>`, `.pf-c-accordion__toggle` uses `<h3><button>`, and `.pf-c-accordion__expanded-content` uses `<div>`. The heading level that you use should fit within the rest of the headings outlined on your page.
+
+Another variation is using the definition list:
+In these examples `.pf-c-accordion` uses `<dl>`, `.pf-c-accordion__toggle` uses `<dt><button>`, and `.pf-c-accordion__expanded-content` uses `<dd>`.
+
 
 ## Accessibility
 
@@ -15,11 +22,11 @@
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-c-accordion` | `<dl>` | Initiates an accordion component. **Required**|
-| `.pf-c-accordion__toggle` | `<dt><h3><button>` | Initiates a toggle in the accordion. **Required** |
+| `.pf-c-accordion` | `<div>`, `<dl>` | Initiates an accordion component. **Required**|
+| `.pf-c-accordion__toggle` | `<h1-h6><button>`, `<dt><button>` | Initiates a toggle in the accordion. **Required** |
 | `.pf-c-accordion__toggle-text` | `<span>` | Initiates the text inside the toggle. **Required** |
 | `.pf-c-accordion__toggle-icon` | `<i>` | Initiates the toggle icon. **Required** |
-| `.pf-c-accordion__expanded-content` | `<dd>` | Initiates expanded content. **Must be paired with a button** |
+| `.pf-c-accordion__expanded-content` | `<div>`, `<dd>` | Initiates expanded content. **Must be paired with a button** |
 | `.pf-c-accordion__expanded-content-body` | `<div>` | Initiates expanded content body. **Required** |
 | `.pf-m-expanded` | `.pf-c-accordion__toggle`, `.pf-c-accordion__expanded-content` | Modifies the accordion button and expanded content for the expanded state. |
 | `.pf-m-hover` | `.pf-c-accordion__toggle` | Modifies the accordion button for the hover state. |

src/patternfly/components/Accordion/examples/accordion-definition-list-example.hbs

@@ -0,0 +1,41 @@
+{{#> accordion accordion--IsDefinitionList="true"}}
+    {{#> accordion-toggle accordion-toggle--attribute='aria-expanded="false"'}}
+      {{#> accordion-toggle-text}}Item one{{/accordion-toggle-text}}
+      {{#> accordion-toggle-icon}}{{/accordion-toggle-icon}}
+    {{/accordion-toggle}}
+    {{#> accordion-expanded-content}}
+      This text is hidden
+    {{/accordion-expanded-content}}
+
+    {{#> accordion-toggle accordion-toggle--attribute='aria-expanded="false"'}}
+      {{#> accordion-toggle-text}}Item two{{/accordion-toggle-text}}
+      {{#> accordion-toggle-icon}}{{/accordion-toggle-icon}}
+    {{/accordion-toggle}}
+    {{#> accordion-expanded-content}}
+      This text is hidden
+    {{/accordion-expanded-content}}
+
+    {{#> accordion-toggle accordion-toggle--attribute='aria-expanded="false"'}}
+      {{#> accordion-toggle-text}}Item three{{/accordion-toggle-text}}
+      {{#> accordion-toggle-icon}}{{/accordion-toggle-icon}}
+    {{/accordion-toggle}}
+    {{#> accordion-expanded-content}}
+      This text is hidden
+    {{/accordion-expanded-content}}
+
+    {{#> accordion-toggle accordion-toggle--IsExpanded="true" accordion-toggle--attribute='aria-expanded="true"'}}
+      {{#> accordion-toggle-text}}Item four{{/accordion-toggle-text}}
+      {{#> accordion-toggle-icon}}{{/accordion-toggle-icon}}
+    {{/accordion-toggle}}
+    {{#> accordion-expanded-content accordion-expanded-content--IsExpanded="true"}}
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis molestie lorem lacinia dolor aliquet faucibus. Suspendisse gravida imperdiet accumsan. Aenean auctor lorem justo, vitae tincidunt enim blandit vel. Aenean quis tempus dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+    {{/accordion-expanded-content}}
+
+    {{#> accordion-toggle accordion-toggle--attribute='aria-expanded="false"'}}
+      {{#> accordion-toggle-text}}Item five{{/accordion-toggle-text}}
+      {{#> accordion-toggle-icon}}{{/accordion-toggle-icon}}
+    {{/accordion-toggle}}
+    {{#> accordion-expanded-content}}
+      This text is hidden
+    {{/accordion-expanded-content}}
+{{/accordion}}

src/patternfly/components/Accordion/examples/index.js

@@ -3,15 +3,18 @@ import Documentation from '@siteComponents/Documentation';
 import Example from '@siteComponents/Example';
 import accordionFluidExampleRaw from '!raw!./accordion-fluid-example.hbs';
 import accordionFixedExampleRaw from '!raw!./accordion-fixed-example.hbs';
+import accordionDefinitionListExampleRaw from '!raw!./accordion-definition-list-example.hbs';
 import AccordionFluidExample from './accordion-fluid-example.hbs';
 import AccordionFixedExample from './accordion-fixed-example.hbs';
+import AccordionDefinitionListExample from './accordion-definition-list-example.hbs';
 import docs from '../docs/code.md';
 
 export const Docs = docs;
 
-export default (props) => {
+export default props => {
   const accordionFluidExample = AccordionFluidExample();
   const accordionFixedExample = AccordionFixedExample();
+  const accordionDefinitionListExample = AccordionDefinitionListExample();
   const headingText = 'Accordion';
   const variablesRoot = 'pf-c-accordion';
 
@@ -23,6 +26,9 @@ export default (props) => {
       <Example heading="Accordion fixed example" handlebars={accordionFixedExampleRaw}>
         {accordionFixedExample}
       </Example>
+      <Example heading="Accordion definition list example" handlebars={accordionDefinitionListExampleRaw}>
+        {accordionDefinitionListExample}
+      </Example>
     </Documentation>
   );
 };