fix(Accordion): final changes (#2290)

patternfly · Jun 18, 2019 · 6fce654 · 6fce654
1 parent 4b7e797
commit 6fce654
Show file tree

Hide file tree

Showing 4 changed files with 127 additions and 11 deletions.
diff --git a/packages/patternfly-4/react-core/src/components/Accordion/Accordion.test.tsx b/packages/patternfly-4/react-core/src/components/Accordion/Accordion.test.tsx
@@ -2,13 +2,28 @@ import React from 'react';
 import { shallow, mount } from 'enzyme';
 import { Accordion } from './Accordion';
 import { AccordionToggle } from './AccordionToggle';
+import { AccordionContent } from './AccordionContent';
+import { AccordionItem } from './AccordionItem';
 
 describe('Accordion', () => {
   test('Accordion default', () => {
     const view = shallow(<Accordion aria-label="this is a simple accordion" />);
     expect(view.render()).toMatchSnapshot();
   });
 
+  test('Accordion with non-default headingLevel', () => {
+    const view = shallow(
+      <Accordion headingLevel="h2">
+        <AccordionItem>
+          <AccordionToggle id="item-1">Item One</AccordionToggle>
+          <AccordionContent>Item One Content</AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    );
+    expect(view.render()).toMatchSnapshot();
+  });
+
+
   test('It should pass optional aria props', () => {
     const view = mount(
       <AccordionToggle aria-label="Toggle details for" aria-labelledby="ex-toggle2 ex-item2" id="ex-toggle2" />

diff --git a/packages/patternfly-4/react-core/src/components/Accordion/Accordion.tsx b/packages/patternfly-4/react-core/src/components/Accordion/Accordion.tsx
@@ -2,22 +2,28 @@ import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Accordion/accordion';
 
+export const AccordionContext = React.createContext('h3');
+
 export interface AccordionProps extends React.HTMLProps<HTMLDListElement> {
   /** Content rendered inside the Accordion  */
   children?: React.ReactNode;
   /** Additional classes added to the Accordion  */
   className?: string;
   /** Adds accessible text to the Accordion */
   'aria-label'?: string;
+  /** the heading level to use */
+  headingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 }
 
 export const Accordion: React.FunctionComponent<AccordionProps> = ({
   children = null,
   className = '',
   'aria-label': ariaLabel = '',
+  headingLevel = 'h3',
   ...props
 }: AccordionProps) => (
   <dl className={css(styles.accordion, className)} aria-label={ariaLabel} {...props}>
+    <AccordionContext.Provider value={headingLevel}>{children}</AccordionContext.Provider>
     {children}
   </dl>
 );
diff --git a/packages/patternfly-4/react-core/src/components/Accordion/AccordionToggle.tsx b/packages/patternfly-4/react-core/src/components/Accordion/AccordionToggle.tsx
@@ -3,6 +3,7 @@ import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Accordion/accordion';
 import { AngleRightIcon } from '@patternfly/react-icons';
 import { Omit } from '../../helpers/typeUtils';
+import { AccordionContext } from './Accordion';
 
 export interface AccordionToggleProps extends Omit<React.HTMLProps<HTMLButtonElement>, 'type'> {
   /** Content rendered inside the Accordion toggle  */
@@ -23,16 +24,20 @@ export const AccordionToggle: React.FunctionComponent<AccordionToggleProps> = ({
   ...props
 }: AccordionToggleProps) => (
   <dt>
-    <h3>
-      <button
-        id={id}
-        className={css(styles.accordionToggle, isExpanded && styles.modifiers.expanded, className)}
-        {...props}
-        aria-expanded={isExpanded}
-      >
-        <span className={css(styles.accordionToggleText)}>{children}</span>
-        <AngleRightIcon className={css(styles.accordionToggleIcon)} />
-      </button>
-    </h3>
+    <AccordionContext.Consumer>
+      {(AccordionHeadingLevel: any) => (
+        <AccordionHeadingLevel>
+          <button
+            id={id}
+            className={css(styles.accordionToggle, isExpanded && styles.modifiers.expanded, className)}
+            {...props}
+            aria-expanded={isExpanded}
+          >
+            <span className={css(styles.accordionToggleText)}>{children}</span>
+            <AngleRightIcon className={css(styles.accordionToggleIcon)} />
+          </button>
+        </AccordionHeadingLevel>
+      )}
+    </AccordionContext.Consumer>
   </dt>
 );
diff --git a/...es/patternfly-4/react-core/src/components/Accordion/__snapshots__/Accordion.test.tsx.snap b/...es/patternfly-4/react-core/src/components/Accordion/__snapshots__/Accordion.test.tsx.snap
@@ -6,3 +6,93 @@ exports[`Accordion Accordion default 1`] = `
   class="pf-c-accordion"
 />
 `;
+
+exports[`Accordion Accordion with non-default headingLevel 1`] = `
+<dl
+  aria-label=""
+  class="pf-c-accordion"
+>
+  <dt>
+    <h2>
+      <button
+        aria-expanded="false"
+        class="pf-c-accordion__toggle"
+        id="item-1"
+      >
+        <span
+          class="pf-c-accordion__toggle-text"
+        >
+          Item One
+        </span>
+        <svg
+          aria-hidden="true"
+          class="pf-c-accordion__toggle-icon"
+          fill="currentColor"
+          height="1em"
+          role="img"
+          style="vertical-align:-0.125em"
+          viewBox="0 0 256 512"
+          width="1em"
+        >
+          <path
+            d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+            transform=""
+          />
+        </svg>
+      </button>
+    </h2>
+  </dt>
+  <dd
+    aria-label=""
+    class="pf-c-accordion__expanded-content pf-m-expanded"
+    id=""
+  >
+    <div
+      class="pf-c-accordion__expanded-content-body"
+    >
+      Item One Content
+    </div>
+  </dd>
+  <dt>
+    <h3>
+      <button
+        aria-expanded="false"
+        class="pf-c-accordion__toggle"
+        id="item-1"
+      >
+        <span
+          class="pf-c-accordion__toggle-text"
+        >
+          Item One
+        </span>
+        <svg
+          aria-hidden="true"
+          class="pf-c-accordion__toggle-icon"
+          fill="currentColor"
+          height="1em"
+          role="img"
+          style="vertical-align:-0.125em"
+          viewBox="0 0 256 512"
+          width="1em"
+        >
+          <path
+            d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+            transform=""
+          />
+        </svg>
+      </button>
+    </h3>
+  </dt>
+  <dd
+    aria-label=""
+    class="pf-c-accordion__expanded-content pf-m-expanded"
+    id=""
+  >
+    <div
+      class="pf-c-accordion__expanded-content-body"
+    >
+      Item One Content
+    </div>
+  </dd>
+</dl>
+`;