From 8d815fdcae58f770ffc201408d63235b66e32419 Mon Sep 17 00:00:00 2001
From: Taylor Johnson <taylor.christian.johnson@gmail.com>
Date: Sun, 15 Mar 2020 23:44:25 -0400
Subject: [PATCH 1/4] Update Heading Component

Change default heading level to `h2` and include prop type validation for styled-component `as` prop.
---
 src/Heading.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/Heading.js b/src/Heading.js
index f75ff14c3bc..1027da6ace7 100644
--- a/src/Heading.js
+++ b/src/Heading.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import {TYPOGRAPHY, COMMON, get} from './constants'
 import theme from './theme'
 
-const Heading = styled.h1`
+const Heading = styled.h2`
   font-weight: ${get('fontWeights.bold')};
   font-size: ${get('fontSizes.5')};
   margin: 0;
@@ -17,7 +17,8 @@ Heading.defaultProps = {
 Heading.propTypes = {
   ...COMMON.propTypes,
   ...TYPOGRAPHY.propTypes,
-  theme: PropTypes.object
+  theme: PropTypes.object,
+  as: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']),
 }
 
 export default Heading

From 8ed569a0f9c2398689c414f8370ce1c92c24d7d3 Mon Sep 17 00:00:00 2001
From: Taylor Johnson <taylor.christian.johnson@gmail.com>
Date: Sun, 15 Mar 2020 23:48:55 -0400
Subject: [PATCH 2/4] Update Heading component documentation

Updates the Heading component documentation to note the new default heading level (`h2`) and how to change the heading level by passing another heading value to the `as` prop.
---
 docs/content/Heading.md | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/docs/content/Heading.md b/docs/content/Heading.md
index 824a33be9f4..3e71f224abf 100644
--- a/docs/content/Heading.md
+++ b/docs/content/Heading.md
@@ -2,11 +2,13 @@
 title: Heading
 ---
 
-The Heading component will render an html `h1-6` tag without any default styling. Please reference the [w3 recommendations for headings](https://www.w3.org/WAI/tutorials/page-structure/headings/) to ensure your headings provide an accessible experience for screen reader users.
+The Heading component will render an html `h2` tag without any default styling. Other heading level elements `h1-h6` are available through use of the `as` prop (see [System Props](/system-props) for additional explanation). Please reference the [w3 recommendations for headings](https://www.w3.org/WAI/tutorials/page-structure/headings/) to ensure your headings provide an accessible experience for screen reader users.
+
+**Attention:** Make sure to include a valid heading element to render a Heading component other than `h2` (`<Heading as="h1">H1 Element</Heading>`).
 
 ## Default example
 ```jsx live
-<Heading fontSize={1} mb={2}>With fontSize={1}</Heading>
+<Heading fontSize={1} mb={2}>H2 heading with fontSize={1}</Heading>
 ```
 
 ## System props
@@ -15,4 +17,6 @@ Heading components get `TYPOGRAPHY` and `COMMON` system props. Read our [System
 
 ## Component props
 
-Heading does not get any additional props other than the system props mentioned above.
+| Prop name | Type    | Description                                      |
+| :-------- | :------ | :----------------------------------------------- |
+| as        | String  | sets the HTML tag for the component              |

From 20584c142ead27c79b4a2a87ce3b7ef537a0b95d Mon Sep 17 00:00:00 2001
From: Taylor Johnson <taylor.christian.johnson@gmail.com>
Date: Tue, 17 Mar 2020 00:09:32 -0400
Subject: [PATCH 3/4] Update Heading component TypeScript type definition

---
 index.d.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/index.d.ts b/index.d.ts
index deeb1649689..6759c0445a4 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -70,7 +70,9 @@ declare module '@primer/components' {
     extends BaseProps,
       CommonProps,
       TypographyProps,
-      Omit<React.HTMLAttributes<HTMLHeadingElement>, 'color'> {}
+      Omit<React.HTMLAttributes<HTMLHeadingElement>, 'color'> {
+    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+  }
 
   export const Heading: React.FunctionComponent<HeadingProps>
 

From 6b11b9a5f6e0af0de144ee9efa4983687b570952 Mon Sep 17 00:00:00 2001
From: Taylor Johnson <taylor.christian.johnson@gmail.com>
Date: Wed, 1 Apr 2020 17:52:04 -0400
Subject: [PATCH 4/4] Update Heading component tests

---
 src/__tests__/Heading.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/__tests__/Heading.js b/src/__tests__/Heading.js
index d447cc2c587..2540da192c0 100644
--- a/src/__tests__/Heading.js
+++ b/src/__tests__/Heading.js
@@ -31,8 +31,8 @@ const theme = {
 }
 
 describe('Heading', () => {
-  it('renders <h1> by default', () => {
-    expect(render(<Heading />).type).toEqual('h1')
+  it('renders <h2> by default', () => {
+    expect(render(<Heading />).type).toEqual('h2')
   })
 
   it('should have no axe violations', async () => {
@@ -94,7 +94,6 @@ describe('Heading', () => {
 
   it('respects the "fontStyle" prop', () => {
     expect(render(<Heading fontStyle="italic" />)).toHaveStyleRule('font-style', 'italic')
-    expect(render(<Heading as="i" fontStyle="normal" />)).toHaveStyleRule('font-style', 'normal')
   })
 
   it.skip('renders fontSize with f* classes using inverse scale', () => {