H3 (#60)

* add an h3 heading

* bump version

* use updated color

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openstax/ui-components",
-  "version": "1.10.7",
+  "version": "1.10.8",
   "license": "MIT",
   "source": "./src/index.ts",
   "types": "./dist/index.d.ts",

src/components/Text.spec.tsx

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

src/components/Text.stories.tsx

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

src/components/Text.tsx

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

src/components/__snapshots__/Text.spec.tsx.snap

@@ -2,16 +2,24 @@
 
 exports[`Text matches body snapshot 1`] = `
 <p
-  className="sc-gsnTZi eGRQDn"
+  className="sc-dkzDqf fZIluk"
 >
   This is a paragraph
 </p>
 `;
 
-exports[`Text matches heading snapshot 1`] = `
+exports[`Text matches h2 snapshot 1`] = `
 <h2
   className="sc-bczRLJ fZeHof"
 >
   This is a heading
 </h2>
 `;
+
+exports[`Text matches h3 snapshot 1`] = `
+<h3
+  className="sc-gsnTZi kMMRnk"
+>
+  This is a heading
+</h3>
+`;