new headings

src/components/Text.spec.tsx

@@ -1,4 +1,4 @@
-import { Paragraph, H2 } from './Text';
+import { Paragraph, H2, H3, H4 } from './Text';
 import renderer from 'react-test-renderer';
 
 describe('Text', () => {
@@ -11,7 +11,11 @@ describe('Text', () => {
 
   it('matches heading snapshot', () => {
     const tree = renderer.create(
-      <H2>This is a heading</H2>
+      <>
+        <H2>This is an h2</H2>
+        <H3>This is an h3</H3>
+        <H4>This is an h4</H4>
+      </>
     ).toJSON();
     expect(tree).toMatchSnapshot();
   });

src/components/Text.stories.tsx

@@ -1,9 +1,11 @@
-import { H2, Paragraph } from "./Text";
+import { H2, H3, H4, Paragraph } from "./Text";
 
 export const PText = () => <>
   <Paragraph>Body text</Paragraph>
 </>;
 
-export const Heading = () => <>
+export const Headings = () => <>
   <H2>Heading text</H2>
+  <H3>Heading text</H3>
+  <H4>Heading text</H4>
 </>;

src/components/Text.tsx

@@ -7,6 +7,21 @@ export const H2 = styled.h2`
   font-weight: 700;
 `;
 
+export const H3 = styled.h3`
+  color: ${palette.neutralDarker};
+  font-size: 1.4rem;
+  font-weight: 700;
+  line-height: 2.4rem;
+`;
+
+export const H4 = styled.h4`
+  color: ${palette.neutralThin};
+  font-size: 1.4rem;
+  font-weight: 700;
+  line-height: 2rem;
+  text-transform: uppercase;
+`;
+
 export const Paragraph = styled.p`
   color: ${palette.neutralDarker};
   font-size: 1.8rem;