From 432128f65566d90afe10f51876718b97e728abf1 Mon Sep 17 00:00:00 2001
From: Leah Wagner <leah@leahwagner.ca>
Date: Fri, 18 Jun 2021 11:26:16 -0700
Subject: [PATCH] Add title to page and add styling for base typography
 elements for Text component

---
 components/ui/Text/Text.module.css | 61 ++++++++++++++++++++++++++++++
 pages/[...pages].tsx               |  1 +
 2 files changed, 62 insertions(+)

diff --git a/components/ui/Text/Text.module.css b/components/ui/Text/Text.module.css
index f572fdf18..b3bc8342b 100644
--- a/components/ui/Text/Text.module.css
+++ b/components/ui/Text/Text.module.css
@@ -13,3 +13,64 @@
 .sectionHeading {
   @apply pt-1 pb-2 text-2xl font-bold tracking-wide cursor-pointer mb-2;
 }
+
+
+/* Apply base font sizes and styles for typography markup (h2, h2, ul, p, etc.).
+   A helpful addition for whenn page content is consumed from a source managed through a wysiwyg editor. */
+
+.body :is(h1, h2, h3, h4, h5, h6, p, ul, ol) {
+  @apply mb-4;
+}
+
+.body :is(h1, h2, h3, h4, h5, h6):not(:first-child) {
+  @apply mt-8;
+}
+
+.body :is(h1, h2, h3, h4, h5, h6) {
+  @apply font-semibold tracking-wide;
+}
+
+.body h1 {
+  @apply text-5xl;
+}
+
+.body h2 {
+  @apply text-4xl;
+}
+
+.body h3 {
+  @apply text-3xl;
+}
+
+.body h4 {
+  @apply text-2xl;
+}
+
+.body h5 {
+  @apply text-xl;
+}
+
+.body h6 {
+  @apply text-lg;
+}
+
+.body ul,
+.body ol {
+  @apply pl-6;
+}
+
+.body ul {
+  @apply list-disc;
+}
+
+.body ol {
+  @apply list-decimal;
+}
+
+.body a {
+  @apply underline;
+}
+
+.body a:hover {
+  @apply no-underline;
+}
diff --git a/pages/[...pages].tsx b/pages/[...pages].tsx
index a8a24b3aa..8100bc8f6 100644
--- a/pages/[...pages].tsx
+++ b/pages/[...pages].tsx
@@ -78,6 +78,7 @@ export default function Pages({
     <h1>Loading...</h1> // TODO (BC) Add Skeleton Views
   ) : (
     <div className="max-w-2xl mx-8 sm:mx-auto py-20">
+      {page?.name && <Text variant="heading">{page.name}</Text>}
       {page?.body && <Text html={page.body} />}
     </div>
   )