Adding demo styling

Author: dcooney

components/atoms/Button/Button.module.css

@@ -16,7 +16,7 @@
   &:hover,
   &:focus,
   &:active:not([disabled]) {
-    @apply no-underline;
+    @apply underline;
   }
 
   /* SIZES */

components/atoms/RichText/RichText.module.css

@@ -3,13 +3,11 @@
     @apply text-center;
   }
 
-  /* Paragraph Styles */
-  &.p {
-    @apply mb-4;
-  }
-
+  /* List Styles */
   &.ul,
   &.ol {
+    @apply mb-4;
+
     & li {
       @apply mb-2 relative pl-6 list-none;
     }
@@ -22,7 +20,7 @@
 
   /* Unordered Lists */
   &.ul {
-    & li {
+    & > li {
       &::before {
         @apply absolute block rounded-full;
 

components/molecules/AlgoliaResults/templates/SearchResults.js

@@ -1,3 +1,4 @@
+import RichText from '@/components/atoms/RichText'
 import PropTypes from 'prop-types'
 import React from 'react'
 import {connectStateResults, InfiniteHits} from 'react-instantsearch-dom'
@@ -31,7 +32,7 @@ const SearchResults = connectStateResults(({searchResults, indexName}) => {
         <>
           <div className={styles.resultsHeader}>
             <div>
-              <h1>Search Results</h1>
+              <RichText tag="h1">Search Results</RichText>
               <p className={styles.total}>
                 <span>{searchResults.nbHits} Results</span> for{' '}
                 {searchResults.query}

pages/[...slug].js

@@ -1,6 +1,7 @@
 import getPostTypeStaticPaths from '@/api/wordpress/_global/getPostTypeStaticPaths'
 import getPostTypeStaticProps from '@/api/wordpress/_global/getPostTypeStaticProps'
 import Container from '@/components/atoms/Container'
+import RichText from '@/components/atoms/RichText'
 import BlockGravityForm from '@/components/blocks/Gutenberg/BlockGravityForm'
 import Layout from '@/components/common/Layout'
 import Blocks from '@/components/molecules/Blocks'
@@ -24,8 +25,8 @@ export default function Page({post}) {
   return (
     <Layout seo={{...post?.seo}}>
       <Container>
-        <article>
-          <h1 dangerouslySetInnerHTML={{__html: post?.title}} />
+        <article className="innerWrap">
+          <RichText tag="h1">{post?.title}</RichText>
           <Blocks blocks={post?.blocks} />
         </article>
         {post?.slug === 'form-demo' && (

pages/blog/[[...slug]].js

@@ -5,6 +5,7 @@ import getPostTypeStaticProps from '@/api/wordpress/_global/getPostTypeStaticPro
 import Breadcrumbs from '@/components/atoms/Breadcrumbs'
 import Container from '@/components/atoms/Container'
 import Text from '@/components/atoms/Inputs/Text'
+import RichText from '@/components/atoms/RichText'
 import Layout from '@/components/common/Layout'
 import Blocks from '@/components/molecules/Blocks'
 import Form from '@/components/molecules/Form'
@@ -69,11 +70,11 @@ export default function BlogPost({post, archive, posts, pagination}) {
   return (
     <Layout seo={{...post?.seo}} hasJsonLd={true}>
       <Container>
-        <article>
+        <article className="innerWrap">
           {!!post?.seo?.breadcrumbs && (
             <Breadcrumbs breadcrumbs={post.seo.breadcrumbs} />
           )}
-          <h1 dangerouslySetInnerHTML={{__html: post?.title}} />
+          <RichText tag="h1">{post?.title}</RichText>
           <Blocks blocks={post?.blocks} />
           <div
             dangerouslySetInnerHTML={{

pages/team/[[...slug]].js

@@ -3,6 +3,7 @@ import getPostTypeStaticPaths from '@/api/wordpress/_global/getPostTypeStaticPat
 import getPostTypeStaticProps from '@/api/wordpress/_global/getPostTypeStaticProps'
 import Breadcrumbs from '@/components/atoms/Breadcrumbs'
 import Container from '@/components/atoms/Container'
+import RichText from '@/components/atoms/RichText'
 import Layout from '@/components/common/Layout'
 import Blocks from '@/components/molecules/Blocks'
 import getPagePropTypes from '@/functions/getPagePropTypes'
@@ -63,11 +64,11 @@ export default function Team({post, archive, posts, pagination}) {
   return (
     <Layout seo={{...post?.seo}} hasJsonLd={true}>
       <Container>
-        <article>
+        <article className="innerWrap">
           {!!post?.seo?.breadcrumbs && (
             <Breadcrumbs breadcrumbs={post.seo.breadcrumbs} />
           )}
-          <h1 dangerouslySetInnerHTML={{__html: post?.title}} />
+          <RichText tag="h1">{post?.title}</RichText>
           <Blocks blocks={post?.blocks} />
         </article>
       </Container>

styles/demo.css

@@ -1,5 +1,12 @@
+/* This file is for demo purposes only. */
+
 #page-content {
-  /* Body Link Styles */
+  /* Global Styles */
+
+  & .innerWrap {
+    @apply max-w-5xl m-auto py-2;
+  }
+
   & ul:not(.breadcrumbs),
   & ol,
   & p {
@@ -18,22 +25,29 @@
   & h2,
   & h3,
   & h4 {
-    @apply mb-4 font-semibold;
+    @apply mb-6 font-semibold;
   }
 
   & h1 {
-    @apply mb-8 text-3xl;
+    @apply text-4xl;
   }
 
   & h2 {
     @apply text-2xl;
   }
 
   & h3 {
-    @apply text-xl;
+    @apply mb-4 text-xl;
   }
 
   & h4 {
-    @apply text-lg;
+    @apply mb-4 text-lg;
+  }
+
+  /* Rich Text Styles */
+  & p,
+  & ul,
+  & ol {
+    @apply mb-4;
   }
 }