From afd026255a9c4d29c9cf18e3b4059909caf146b4 Mon Sep 17 00:00:00 2001
From: Josiah Ivey <josiah.ivey@gmail.com>
Date: Mon, 18 Nov 2024 07:09:06 -0800
Subject: [PATCH] H3 (#60)

* add an h3 heading

* bump version

* use updated color
---
 package.json                                  |  2 +-
 src/components/Text.spec.tsx                  | 12 ++++++++++--
 src/components/Text.stories.tsx               | 19 ++++++++++++-------
 src/components/Text.tsx                       |  7 +++++++
 .../__snapshots__/Text.spec.tsx.snap          | 12 ++++++++++--
 5 files changed, 40 insertions(+), 12 deletions(-)

diff --git a/package.json b/package.json
index 55d4b7d1a..537986aa4 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/Text.spec.tsx b/src/components/Text.spec.tsx
index c6b92143d..c28cbb009 100644
--- a/src/components/Text.spec.tsx
+++ b/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();
+  });
+
 });
diff --git a/src/components/Text.stories.tsx b/src/components/Text.stories.tsx
index 05a96f07f..c83372b30 100644
--- a/src/components/Text.stories.tsx
+++ b/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>
+  </>
+);
diff --git a/src/components/Text.tsx b/src/components/Text.tsx
index a911230c7..23623593e 100644
--- a/src/components/Text.tsx
+++ b/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;
diff --git a/src/components/__snapshots__/Text.spec.tsx.snap b/src/components/__snapshots__/Text.spec.tsx.snap
index 600f505cf..043919a4e 100644
--- a/src/components/__snapshots__/Text.spec.tsx.snap
+++ b/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>
+`;