fix: make all heading elements customizable

src/ActionBar/ActionBar.test.js

@@ -74,6 +74,20 @@ describe('<ActionBar />', () => {
         expect(tree).toMatchSnapshot();
     });
 
+    describe('ActionBar Header', () => {
+        test('should allow customization of header level', () => {
+            const element = mount(
+                <ActionBar.Header
+                    description=''
+                    headingLevel={2}
+                    title='' />
+            );
+            expect(
+                element.find('.fd-action-bar__title').type()
+            ).toBe('h2');
+        });
+    });
+
     describe('Prop spreading', () => {
         test('should allow props to be spread to the ActionBar component', () => {
             const element = mount(<ActionBar data-sample='Sample' />);
@@ -121,7 +135,7 @@ describe('<ActionBar />', () => {
             ).toBe('Sample');
         });
 
-        test('should allow props to be spread to the ActionBarHeader component\'s h1 element', () => {
+        test('should allow props to be spread to the ActionBarHeader component\'s heading element', () => {
             const element = mount(
                 <ActionBar.Header
                     description=''
@@ -130,7 +144,7 @@ describe('<ActionBar />', () => {
             );
 
             expect(
-                element.find('h1').getDOMNode().attributes['data-sample'].value
+                element.find('h3').getDOMNode().attributes['data-sample'].value
             ).toBe('Sample');
         });
 

src/ActionBar/_ActionBarHeader.js

@@ -1,18 +1,21 @@
 import classnames from 'classnames';
+import CustomPropTypes from '../utils/CustomPropTypes/CustomPropTypes';
 import PropTypes from 'prop-types';
 import React from 'react';
 
-const ActionBarHeader = ({ className, description, descriptionProps, title, titleProps, ...props }) => {
+const ActionBarHeader = ({ className, description, descriptionProps, headingLevel, title, titleProps, ...props }) => {
     const actionBarHeaderClasses = classnames(
         'fd-action-bar__header',
         className
     );
 
+    const HeadingTag = `h${headingLevel}`;
+
     return (
         <div {...props} className={actionBarHeaderClasses}>
-            <h1
+            <HeadingTag
                 {...titleProps}
-                className='fd-action-bar__title'>{title}</h1>
+                className='fd-action-bar__title'>{title}</HeadingTag>
             {description &&
                 <p
                     {...descriptionProps}
@@ -29,12 +32,18 @@ ActionBarHeader.propTypes = {
     className: PropTypes.string,
     description: PropTypes.string,
     descriptionProps: PropTypes.object,
+    headingLevel: CustomPropTypes.range(1, 6),
     titleProps: PropTypes.object
 };
 
+ActionBarHeader.defaultProps = {
+    headingLevel: 3
+};
+
 ActionBarHeader.propDescriptions = {
     description: 'Localized text for the description.',
-    descriptionProps: 'Additional props to be spread to the description\'s `<p>` element.'
+    descriptionProps: 'Additional props to be spread to the description\'s `<p>` element.',
+    headingLevel: 'Heading level. `<h1>` is reserved for the page title.'
 };
 
 export default ActionBarHeader;

src/ActionBar/__snapshots__/ActionBar.test.js.snap

@@ -14,11 +14,11 @@ exports[`<ActionBar /> create basic Action Bar 1`] = `
   <div
     className="fd-action-bar__header blue"
   >
-    <h1
+    <h3
       className="fd-action-bar__title"
     >
       Page Title
-    </h1>
+    </h3>
     <p
       className="fd-action-bar__description"
     >
@@ -49,11 +49,11 @@ exports[`<ActionBar /> create basic Action Bar 2`] = `
   <div
     className="fd-action-bar__header blue"
   >
-    <h1
+    <h3
       className="fd-action-bar__title"
     >
       Page Title
-    </h1>
+    </h3>
     <p
       className="fd-action-bar__description"
     >
@@ -91,11 +91,11 @@ exports[`<ActionBar /> create basic mobile Action Bar 1`] = `
     <div
       className="fd-action-bar__header"
     >
-      <h1
+      <h3
         className="fd-action-bar__title"
       >
         Page Title
-      </h1>
+      </h3>
       <p
         className="fd-action-bar__description"
       >
@@ -134,11 +134,11 @@ exports[`<ActionBar /> create basic mobile Action Bar 2`] = `
     <div
       className="fd-action-bar__header"
     >
-      <h1
+      <h3
         className="fd-action-bar__title"
       >
         Page Title
-      </h1>
+      </h3>
       <p
         className="fd-action-bar__description"
       >

src/Menu/Menu.test.js

@@ -131,6 +131,16 @@ describe('<Menu />', () => {
         expect(tree).toMatchSnapshot();
     });
 
+    describe('MenuGroup', () => {
+        test('should allow customization of header level', () => {
+            const element = mount(<Menu.Group headingLevel={2} title='Sample' />);
+
+            expect(
+                element.find('.fd-menu__title').type()
+            ).toBe('h2');
+        });
+    });
+
     describe('Prop spreading', () => {
         test('should allow props to be spread to the Menu component', () => {
             const element = mount(<Menu data-sample='Sample' />);
@@ -221,11 +231,11 @@ describe('<Menu />', () => {
             ).toBe('Sample');
         });
 
-        test('should allow props to be spread to the MenuGroup h1 component', () => {
+        test('should allow props to be spread to the MenuGroup heading component', () => {
             const element = mount(<Menu.Group title='Sample' titleProps={{ 'data-sample': 'Sample' }} />);
 
             expect(
-                element.find('h1').getDOMNode().attributes['data-sample'].value
+                element.find('h3').getDOMNode().attributes['data-sample'].value
             ).toBe('Sample');
         });
     });

src/Menu/_MenuGroup.js

@@ -1,16 +1,19 @@
 import classnames from 'classnames';
+import CustomPropTypes from '../utils/CustomPropTypes/CustomPropTypes';
 import PropTypes from 'prop-types';
 import React from 'react';
 
-const MenuGroup = ({ title, children, className, titleProps, ...props }) => {
+const MenuGroup = ({ title, children, className, headingLevel, titleProps, ...props }) => {
     const menuGroupClasses = classnames(
         'fd-menu__group',
         className
     );
 
+    const HeadingTag = `h${headingLevel}`;
+
     return (
         <div {...props} className={menuGroupClasses}>
-            <h1 {...titleProps} className='fd-menu__title'>{title}</h1>
+            <HeadingTag {...titleProps} className='fd-menu__title'>{title}</HeadingTag>
             {children}
         </div>
     );
@@ -21,7 +24,12 @@ MenuGroup.displayName = 'Menu.Group';
 MenuGroup.propTypes = {
     title: PropTypes.string.isRequired,
     className: PropTypes.string,
+    headingLevel: CustomPropTypes.range(2, 6),
     titleProps: PropTypes.object
 };
 
+MenuGroup.defaultProps = {
+    headingLevel: 3
+};
+
 export default MenuGroup;

src/Menu/__snapshots__/Menu.test.js.snap

@@ -144,11 +144,11 @@ exports[`<Menu /> create menu group component 1`] = `
   <div
     className="fd-menu__group blue"
   >
-    <h1
+    <h3
       className="fd-menu__title"
     >
       Group Header
-    </h1>
+    </h3>
     <ul
       className="fd-menu__list"
     >
@@ -184,11 +184,11 @@ exports[`<Menu /> create menu group component 1`] = `
   <div
     className="fd-menu__group"
   >
-    <h1
+    <h3
       className="fd-menu__title"
     >
       Group Header 2
-    </h1>
+    </h3>
     <ul
       className="fd-menu__list"
     >

src/Modal/Modal.js

@@ -30,7 +30,7 @@ class Modal extends Component {
     }
 
     render() {
-        const { localizedText, children, title, actions, className, show, titleProps, closeProps, contentProps, headerProps, footerProps, bodyProps, ...rest } = this.props;
+        const { localizedText, children, title, actions, className, headingLevel, show, titleProps, closeProps, contentProps, headerProps, footerProps, bodyProps, ...rest } = this.props;
 
         const modalClasses = classnames(
             'fd-ui__overlay',
@@ -39,6 +39,8 @@ class Modal extends Component {
             className
         );
 
+        const HeadingTag = `h${headingLevel}`;
+
         if (!show) {
             return null;
         }
@@ -63,9 +65,9 @@ class Modal extends Component {
                                 className='fd-modal__content'
                                 role='document'>
                                 <div {...headerProps} className='fd-modal__header'>
-                                    <h1 {...titleProps} className='fd-modal__title'>
+                                    <HeadingTag {...titleProps} className='fd-modal__title'>
                                         {title}
-                                    </h1>
+                                    </HeadingTag>
                                     <button
                                         {...closeProps}
                                         aria-label={localizedText.closeButton}
@@ -106,6 +108,7 @@ Modal.propTypes = {
     contentProps: PropTypes.object,
     footerProps: PropTypes.object,
     headerProps: PropTypes.object,
+    headingLevel: CustomPropTypes.range(2, 6),
     localizedText: CustomPropTypes.i18n({
         closeButton: PropTypes.string
     }),
@@ -114,6 +117,7 @@ Modal.propTypes = {
 };
 
 Modal.defaultProps = {
+    headingLevel: 3,
     localizedText: {
         closeButton: 'Close'
     }

src/Modal/Modal.test.js

@@ -90,7 +90,7 @@ describe('<Modal />', () => {
 
     test('create information modal', () => {
         component = mount(infoModal);
-        expect(component.find('h1.fd-modal__title').text()).toEqual(modalInfoTitle);
+        expect(component.find('.fd-modal__title').text()).toEqual(modalInfoTitle);
 
         // close modal
         component.find('button.fd-button--light.fd-modal__close').simulate('click');
@@ -114,19 +114,32 @@ describe('<Modal />', () => {
 
     test('create confirm modal', () => {
         component = mount(confirmModal);
-        expect(component.find('h1.fd-modal__title').text()).toEqual(
+        expect(component.find('.fd-modal__title').text()).toEqual(
             modalConfirmTitle
         );
     });
 
     test('create form modal', () => {
         component = mount(formModal);
-        expect(component.find('h1.fd-modal__title').text()).toEqual(modalFormTitle);
+        expect(component.find('.fd-modal__title').text()).toEqual(modalFormTitle);
     });
 
     test('do not show info modal', () => {
         component = mount(infoNoShowModal);
-        expect(component.find('h1.fd-modal__title').exists()).toBeFalsy();
+        expect(component.find('.fd-modal__title').exists()).toBeFalsy();
+    });
+
+    describe('Modal Headings', () => {
+        test('should allow customization of header level', () => {
+            component = mount(
+                <Modal headingLevel={2}
+                    show
+                    title='Sample' />);
+
+            expect(
+                component.find('.fd-modal__title').type()
+            ).toBe('h2');
+        });
     });
 
     describe('Prop spreading', () => {
@@ -171,7 +184,7 @@ describe('<Modal />', () => {
             ).toBe('Sample Title');
         });
 
-        test('should allow props to be spread to the Modal component\'s h1 element', () => {
+        test('should allow props to be spread to the Modal component\'s header element', () => {
             component = mount(
                 <Modal
                     show
@@ -180,7 +193,7 @@ describe('<Modal />', () => {
             );
 
             expect(
-                component.find('h1').getDOMNode().attributes['data-sample']
+                component.find('.fd-modal__title').getDOMNode().attributes['data-sample']
                     .value
             ).toBe('Sample Title');
         });

src/Panel/Panel.test.js

@@ -140,6 +140,16 @@ describe('<Panel />', () => {
         expect(tree).toMatchSnapshot();
     });
 
+    describe('PanelHead', () => {
+        test('should allow customization of header level', () => {
+            const element = mount(<Panel.Head headingLevel={2} title='Sample' />);
+
+            expect(
+                element.find('.fd-panel__title').type()
+            ).toBe('h2');
+        });
+    });
+
     describe('Prop spreading', () => {
         test('should allow props to be spread to the Panel component', () => {
             const element = mount(<Panel data-sample='Sample' />);
@@ -181,7 +191,7 @@ describe('<Panel />', () => {
             ).toBe('Sample');
         });
 
-        xtest('should allow props to be spread to the PanelHead component\'s h1 element', () => {
+        xtest('should allow props to be spread to the PanelHead component\'s heading element', () => {
             // TODO: placeholder for this test description once that functionality is built
         });