fix(accordion): adds prop to heading level of parent component

packages/patternfly-4/react-charts/src/components/ChartDonutUtilization/ChartDonutThreshold.tsx

@@ -392,6 +392,7 @@ export const ChartDonutThreshold: React.FunctionComponent<ChartDonutThresholdPro
   children,
   data = [],
   donutOrientation = 'left',
+  labels = [], // Don't show any tooltip labels by default, let consumer override if needed
   standalone = true,
   themeColor,
   themeVariant,
@@ -405,25 +406,34 @@ export const ChartDonutThreshold: React.FunctionComponent<ChartDonutThresholdPro
   donutHeight = Math.min(height, width),
   donutWidth = Math.min(height, width),
   innerRadius = (Math.min(donutHeight, donutWidth) - 34) / 2,
-
   ...rest
 }: ChartDonutThresholdProps) => {
+
   // Returns computed data representing pie chart slices
   const getComputedData = () => {
-    const computedData = [];
-    const datum = getData(data);
-    let prevYVal = 0;
-    datum.forEach((dataPoint: {_x?: any, _y: any}) => {
-      computedData.push({ x: dataPoint._x, y: dataPoint._y ? Math.abs(dataPoint._y - prevYVal) : 0 });
-      prevYVal = dataPoint._y;
-    });
-    computedData.push({ y: prevYVal ? Math.abs(100 - prevYVal) : 0 });
-    return computedData;
-  };
+    // Format and sort data. Sorting ensures thresholds are displayed in the correct order and simplifies calculations.
+    const datum = Data.formatData(data, {x, y, ...rest}, ['x', 'y']).sort((a: any,b: any) => a._y - b._y);
 
-  const getData = (datum: any[]) => {
-    const accessorTypes = ['x', 'y'];
-    return Data.formatData(datum, { x, y, ...rest }, accessorTypes);
+    // Data must be offset so that the sum of all data point y-values (including the final slice) == 100.
+    const [prev, computedData] = datum.reduce((acc: [number, any], dataPoint: {_x: number | string, _y: number}) => {
+      return [
+        dataPoint._y, // Set the previous value to current y value
+        [
+          ...acc[1],
+          {
+            x: dataPoint._x, // Conditionally add x property only if it is in the original data object
+            y: dataPoint._y - acc[0] // Must be offset by previous value
+          }
+        ]
+      ];
+    }, [0, []]);
+
+    return [
+      ...computedData,
+      {
+        y: prev ? (100 - prev) : 0
+      }
+    ];
   };
 
   // Returns the horizontal shift for the dynamic utilization donut cart
@@ -449,24 +459,27 @@ export const ChartDonutThreshold: React.FunctionComponent<ChartDonutThresholdPro
   const renderChildren = () =>
     React.Children.toArray(children).map(child => {
       if (child.props) {
-        const datum = getData([{ ...child.props.data }]);
-        const orientation = child.props.donutOrientation || donutOrientation;
+        const {data: childData, ...childProps} = child.props;
+        const datum = Data.formatData([childData], childProps, ['x', 'y']); // Format child data independently of this component's props
+        const orientation = childProps.donutOrientation || donutOrientation;
         const dynamicTheme =
-          child.props.theme ||
-          getDonutThresholdDynamicTheme(child.props.themeColor || themeColor,
-            child.props.themeVariant || themeVariant);
+          childProps.theme ||
+          getDonutThresholdDynamicTheme(childProps.themeColor || themeColor,
+            childProps.themeVariant || themeVariant);
         return React.cloneElement(child, {
-          donutDx: child.props.donutDx || getDynamicDonutDx(dynamicTheme, orientation),
-          donutDy: child.props.donutDy || getDynamicDonutDy(dynamicTheme),
-          donutHeight: child.props.donutHeight || donutHeight - (theme.pie.height - dynamicTheme.pie.height),
+          data: childData,
+          donutDx: getDynamicDonutDx(dynamicTheme, orientation),
+          donutDy: getDynamicDonutDy(dynamicTheme),
+          donutHeight: donutHeight - (theme.pie.height - dynamicTheme.pie.height),
           donutOrientation: orientation,
-          donutWidth: child.props.donutWidth || donutWidth - (theme.pie.width - dynamicTheme.pie.width),
-          endAngle: child.props.endAngle || 360 * (datum[0]._y ? datum[0]._y / 100 : 100),
-          height: child.props.height || height,
-          showStatic: child.props.showStatic || false,
+          donutWidth: donutWidth - (theme.pie.width - dynamicTheme.pie.width),
+          endAngle: 360 * (datum[0]._y ? datum[0]._y / 100 : 100),
+          height,
+          showStatic: false,
           standalone: false,
           theme: dynamicTheme,
-          width: child.props.width || width
+          width: width,
+          ...childProps,
         });
       }
       return child;
@@ -479,6 +492,7 @@ export const ChartDonutThreshold: React.FunctionComponent<ChartDonutThresholdPro
         data={getComputedData()}
         height={donutHeight}
         innerRadius={innerRadius > 0 ? innerRadius : 0}
+        labels={labels}
         origin={getChartOrigin({
           chartHeight: donutHeight,
           chartWidth: donutWidth,

packages/patternfly-4/react-charts/src/components/ChartDonutUtilization/__snapshots__/ChartDonutThreshold.test.tsx.snap

@@ -15,6 +15,7 @@ exports[`Chart 1`] = `
     }
     height={230}
     innerRadius={98}
+    labels={Array []}
     origin={
       Object {
         "x": 115,
@@ -494,6 +495,7 @@ exports[`Chart 2`] = `
     }
     height={230}
     innerRadius={98}
+    labels={Array []}
     origin={
       Object {
         "x": 115,
@@ -966,25 +968,26 @@ exports[`renders component data 1`] = `
   <Component
     data={
       Array [
+        Object {
+          "x": "Birds",
+          "y": 10,
+        },
         Object {
           "x": "Cats",
-          "y": 35,
+          "y": 25,
         },
         Object {
           "x": "Dogs",
           "y": 20,
         },
         Object {
-          "x": "Birds",
           "y": 45,
         },
-        Object {
-          "y": 90,
-        },
       ]
     }
     height={200}
     innerRadius={83}
+    labels={Array []}
     origin={
       Object {
         "x": 100,

packages/patternfly-4/react-core/src/components/AboutModal/__snapshots__/AboutModalBoxCloseButton.test.tsx.snap

@@ -11,7 +11,6 @@ exports[`AboutModalBoxCloseButton Test 1`] = `
   >
     <TimesIcon
       color="currentColor"
-      noVerticalAlign={false}
       size="sm"
       title={null}
     />
@@ -30,7 +29,6 @@ exports[`AboutModalBoxCloseButton Test onclose 1`] = `
   >
     <TimesIcon
       color="currentColor"
-      noVerticalAlign={false}
       size="sm"
       title={null}
     />

packages/patternfly-4/react-core/src/components/Accordion/Accordion.test.tsx

@@ -2,6 +2,8 @@ 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', () => {
@@ -25,4 +27,17 @@ describe('Accordion', () => {
     expect(button.props['aria-expanded']).toBe(true);
     expect(button.props.className).toContain('pf-m-expanded');
   });
+
+  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();
+  });
+
 });

packages/patternfly-4/react-core/src/components/Accordion/Accordion.tsx

@@ -2,22 +2,27 @@ 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}>
-    {children}
+    <AccordionContext.Provider value={headingLevel}>{children}</AccordionContext.Provider>
   </dl>
 );

packages/patternfly-4/react-core/src/components/Accordion/AccordionToggle.tsx

@@ -2,7 +2,9 @@ import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Accordion/accordion';
 import { AngleRightIcon } from '@patternfly/react-icons';
+import { AccordionContext } from './Accordion';
 import { Omit } from '../../helpers/typeUtils';
+import { ElementType } from 'react';
 
 export interface AccordionToggleProps extends Omit<React.HTMLProps<HTMLButtonElement>, 'type'> {
   /** Content rendered inside the Accordion toggle  */
@@ -23,16 +25,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>
 );

packages/patternfly-4/react-core/src/components/Accordion/__snapshots__/Accordion.test.tsx.snap

@@ -6,3 +6,52 @@ 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>
+</dl>
+`;