From 084d80fe2f4407523419495be28894555011f4e7 Mon Sep 17 00:00:00 2001 From: Bernard Date: Wed, 4 Mar 2020 10:01:19 -0600 Subject: [PATCH] [WNMGDS-384] Allow custom heading level (#638) * Add headingLevel and make it more consistent across components * Rename title to heading in Dialog * Rename title to heading in HelpDrawer * Rename title to heading in StepList * Fix tests * Fix lint errors * PR feedback --- packages/core/src/components/Alert/Alert.jsx | 12 +++-- .../src/components/Dialog/Dialog.example.jsx | 2 +- .../core/src/components/Dialog/Dialog.jsx | 22 ++++++-- .../src/components/Dialog/Dialog.test.jsx | 2 +- .../Dialog/ThirdPartyLink.example.jsx | 2 +- .../Dialog/__snapshots__/Dialog.test.jsx.snap | 2 +- .../Dialog/dialog-size.example.html | 20 ++++---- .../src/components/Dialog/dialog.example.html | 4 +- .../HelpDrawer/HelpDrawer.example.jsx | 2 +- .../src/components/HelpDrawer/HelpDrawer.jsx | 50 +++++++++++++++---- .../HelpDrawer/help-drawer.example.html | 2 +- .../core/src/components/Review/Review.jsx | 7 +-- .../core/src/components/StepList/Step.jsx | 25 ++++++++-- .../src/components/StepList/Step.test.jsx | 4 +- .../components/StepList/StepList.example.jsx | 14 +++--- .../core/src/components/StepList/StepList.jsx | 10 ++-- .../src/components/StepList/StepList.scss | 8 +-- .../core/src/components/StepList/SubStep.jsx | 2 +- .../src/components/StepList/SubStep.test.jsx | 6 +-- .../components/StepList/_StepList.docs.scss | 29 +++++++---- .../components/StepList/steplist.example.html | 14 +++--- packages/docs/src/scripts/example.js | 4 +- 22 files changed, 160 insertions(+), 83 deletions(-) diff --git a/packages/core/src/components/Alert/Alert.jsx b/packages/core/src/components/Alert/Alert.jsx index 242e6e35cc..22f80e9ba4 100644 --- a/packages/core/src/components/Alert/Alert.jsx +++ b/packages/core/src/components/Alert/Alert.jsx @@ -19,11 +19,12 @@ export class Alert extends React.PureComponent { } heading() { + const Heading = `h${this.props.headingLevel}` || `h3`; if (this.props.heading) { return ( -

+ {this.props.heading} -

+ ); } } @@ -51,7 +52,8 @@ export class Alert extends React.PureComponent { } } Alert.defaultProps = { - role: 'region' + role: 'region', + headingLevel: '3' }; Alert.propTypes = { /** @@ -66,6 +68,10 @@ Alert.propTypes = { * Optional id used to link the `aria-labelledby` attribute to the heading. If not provided, a unique id will be automatically generated and used. */ headingId: PropTypes.string, + /** + * Heading type to override default `

`. + */ + headingLevel: PropTypes.oneOf(['1', '2', '3', '4', '5']), /** * Boolean to hide the `Alert` icon */ diff --git a/packages/core/src/components/Dialog/Dialog.example.jsx b/packages/core/src/components/Dialog/Dialog.example.jsx index 616dade938..3ea57b0e2e 100644 --- a/packages/core/src/components/Dialog/Dialog.example.jsx +++ b/packages/core/src/components/Dialog/Dialog.example.jsx @@ -31,7 +31,7 @@ class Example extends React.PureComponent { this.hideModal()} getApplicationNode={() => document.getElementById('App')} - title="Dialog title" + heading="Dialog heading" actions={[