From 34ff482ca8cc358439539dc4c31ef9a1a29b998f Mon Sep 17 00:00:00 2001
From: Troy Chaplin <troy.chaplin@gmail.com>
Date: Sat, 23 Mar 2024 21:39:51 -0400
Subject: [PATCH 1/2] add: changelog notes, updated alert

---
 CHANGELOG.mdx                              |  8 +++++
 lib/components/Alert/Alert.tsx             |  2 +-
 lib/components/Badge/Badge.tsx             |  1 +
 lib/components/PageHeaders/PageHeaders.tsx | 41 ++++++++++++++++++----
 4 files changed, 44 insertions(+), 8 deletions(-)

diff --git a/CHANGELOG.mdx b/CHANGELOG.mdx
index 6021d9421..72f131e1c 100644
--- a/CHANGELOG.mdx
+++ b/CHANGELOG.mdx
@@ -16,6 +16,14 @@ Prefix the change with one of these keywords:
 
 ## [Unreleased]
 
+### Added
+
+- Check in alert if content exists
+
+### Changed
+
+- PageHeader padding and margin
+
 ## [0.8.10]
 
 ### Added
diff --git a/lib/components/Alert/Alert.tsx b/lib/components/Alert/Alert.tsx
index 661f8c10a..a493f445a 100644
--- a/lib/components/Alert/Alert.tsx
+++ b/lib/components/Alert/Alert.tsx
@@ -52,7 +52,7 @@ export const Alert = ({ title, content, type, textSize = 'small' }: PropsWithChi
       })}
       <div className={`${textSize == 'large' ? 'mt-0.5' : ''} ml-3 space-y-2 w-full`}>
         <p className={`${alertTextSize} ${AlertTypes[type].alertHeading} my-0 font-semibold`}>{title}</p>
-        <p className={`${alertTextSize} ${AlertTypes[type].alertSubhead}`}>{content}</p>
+        {content && <p className={`${alertTextSize} ${AlertTypes[type].alertSubhead}`}>{content}</p>}
       </div>
     </div>
   )
diff --git a/lib/components/Badge/Badge.tsx b/lib/components/Badge/Badge.tsx
index 87b5ae75a..23dcbdccf 100644
--- a/lib/components/Badge/Badge.tsx
+++ b/lib/components/Badge/Badge.tsx
@@ -32,6 +32,7 @@ export const Badge = ({ children, color = 'grey', noWordBreak = false }: BadgePr
       badgeColor = 'bg-cu-black-50 text-cu-black-800'
       break
   }
+
   return (
     <p
       className={`inline-flex px-3 py-1 mr-2 text-xs font-semibold cu-badge not-prose rounded-full last:mr-0 ${badgeColor} ${wordBreakClass}`}
diff --git a/lib/components/PageHeaders/PageHeaders.tsx b/lib/components/PageHeaders/PageHeaders.tsx
index d562c45fc..c37837aeb 100644
--- a/lib/components/PageHeaders/PageHeaders.tsx
+++ b/lib/components/PageHeaders/PageHeaders.tsx
@@ -12,10 +12,10 @@ export interface PageHeadersProps {
 }
 
 const headerSize = {
-  xs: `text-lg md:text-xl lg:text-2xl lg:leading-[3.5rem] pb-2`,
-  sm: `text-xl md:text-2xl lg:text-3xl lg:leading-[3.5rem] pb-2`,
-  md: `text-2xl md:text-3xl lg:text-4xl lg:leading-[3.5rem] pb-4`,
-  lg: `text-3xl md:text-4xl lg:text-5xl lg:leading-[3.5rem] pb-6`,
+  xs: `text-lg md:text-xl lg:text-2xl lg:leading-[2rem]`,
+  sm: `text-xl md:text-2xl lg:text-3xl lg:leading-[2.5rem]`,
+  md: `text-2xl md:text-3xl lg:text-4xl lg:leading-[3rem]`,
+  lg: `text-3xl md:text-4xl lg:text-5xl lg:leading-[3.5rem]`,
 }
 
 export const PageHeadersWrapper = ({
@@ -27,13 +27,40 @@ export const PageHeadersWrapper = ({
   pronoun,
 }: PageHeadersProps) => {
   const HeaderComponent = as
+
+  // Set spacing for header with underline
+  let headerPadding
+  let headerMargin
+  switch (size) {
+    case 'xs':
+      headerPadding = 'pb-4'
+      headerMargin = 'mb-8'
+      break
+    case 'sm':
+      headerPadding = 'pb-5'
+      headerMargin = 'mb-10'
+      break
+    case 'md':
+      headerPadding = 'pb-6'
+      headerMargin = 'mb-10'
+      break
+    case 'lg':
+      headerPadding = 'pb-8'
+      headerMargin = 'mb-10'
+      break
+    default:
+      headerPadding = 'pb-8'
+      headerMargin = 'mb-10'
+      break
+  }
+
   const hasUnderline = !noUnderline
-    ? 'relative after:absolute after:w-10 after:h-px after:bottom-0 after:bg-cu-red after:left-px'
-    : ''
+    ? `relative after:absolute after:w-10 after:h-px after:bottom-0 after:bg-cu-red after:left-px ${headerPadding} ${headerMargin}`
+    : headerMargin
 
   return (
     <>
-      <HeaderComponent className={`${headerSize[size]} font-semibold text-cu-black-700 not-prose mb-6 ${hasUnderline}`}>
+      <HeaderComponent className={`${headerSize[size]} font-semibold text-cu-black-700 not-prose ${hasUnderline}`}>
         {header}{' '}
         {pronoun && <span className="text-xl font-light lowercase lg:text-3xl text-cu-black-500">({pronoun})</span>}
       </HeaderComponent>

From bbc630850833acc68aa53f4988e929b3eecb7a8d Mon Sep 17 00:00:00 2001
From: Troy Chaplin <troy.chaplin@gmail.com>
Date: Sun, 24 Mar 2024 15:09:10 -0400
Subject: [PATCH 2/2] change: updated page header content styles

---
 .../PageHeaders/PageHeaders.stories.tsx       | 39 +++++++++++++++++++
 lib/components/PageHeaders/PageHeaders.tsx    | 18 +++++++--
 2 files changed, 53 insertions(+), 4 deletions(-)

diff --git a/lib/components/PageHeaders/PageHeaders.stories.tsx b/lib/components/PageHeaders/PageHeaders.stories.tsx
index b4738caef..a5275c028 100644
--- a/lib/components/PageHeaders/PageHeaders.stories.tsx
+++ b/lib/components/PageHeaders/PageHeaders.stories.tsx
@@ -1,3 +1,4 @@
+import React from 'react'
 import type { Meta, StoryObj } from '@storybook/react'
 import { PageHeaders } from './PageHeaders'
 import { Figure } from '../Figure/Figure'
@@ -46,6 +47,44 @@ export const ExtraSmallPageHeader: Story = {
   },
 }
 
+export const DefaultWithContent: Story = {
+  args: {
+    header: 'Large header with content',
+    content:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc varius feugiat euismod. Ut ut diam dapibus nisi ullamcorper sollicitudin id vitae turpis.',
+    size: 'lg',
+    as: 'h1',
+  },
+}
+
+export const MediumWithContent: Story = {
+  args: {
+    header: 'Medium header with content',
+    content:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc varius feugiat euismod. Ut ut diam dapibus nisi ullamcorper sollicitudin id vitae turpis.',
+    size: 'md',
+  },
+}
+
+export const SmallWithContent: Story = {
+  args: {
+    header: 'Small header with content',
+    content:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc varius feugiat euismod. Ut ut diam dapibus nisi ullamcorper sollicitudin id vitae turpis.',
+    size: 'sm',
+  },
+}
+
+export const ExtraSmallWithContent: Story = {
+  args: {
+    header: 'Extra small header with content, no underline',
+    content:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc varius feugiat euismod. Ut ut diam dapibus nisi ullamcorper sollicitudin id vitae turpis.',
+    size: 'xs',
+    noUnderline: true,
+  },
+}
+
 export const EventPageHeader: Story = {
   args: {
     header: 'Upcoming Event Header',
diff --git a/lib/components/PageHeaders/PageHeaders.tsx b/lib/components/PageHeaders/PageHeaders.tsx
index c37837aeb..293ae6ade 100644
--- a/lib/components/PageHeaders/PageHeaders.tsx
+++ b/lib/components/PageHeaders/PageHeaders.tsx
@@ -4,8 +4,9 @@ import { PageHeadersEvent } from './PageHeadersEvent'
 
 export interface PageHeadersProps {
   children?: React.ReactNode
-  header: string
   as?: 'h1' | 'h2' | 'h3'
+  header: string
+  content?: string
   size?: 'xs' | 'sm' | 'md' | 'lg'
   pronoun?: string
   noUnderline?: boolean
@@ -20,8 +21,9 @@ const headerSize = {
 
 export const PageHeadersWrapper = ({
   children,
-  header,
   as = 'h1',
+  header,
+  content,
   size = 'lg',
   noUnderline = false,
   pronoun,
@@ -31,26 +33,33 @@ export const PageHeadersWrapper = ({
   // Set spacing for header with underline
   let headerPadding
   let headerMargin
+  let contentStyle
+
   switch (size) {
     case 'xs':
       headerPadding = 'pb-4'
-      headerMargin = 'mb-8'
+      headerMargin = 'mb-6'
+      contentStyle = 'prose-md md:prose-lg'
       break
     case 'sm':
       headerPadding = 'pb-5'
-      headerMargin = 'mb-10'
+      headerMargin = 'mb-6'
+      contentStyle = 'prose-md md:prose-lg'
       break
     case 'md':
       headerPadding = 'pb-6'
       headerMargin = 'mb-10'
+      contentStyle = 'prose-lg md:prose-xl'
       break
     case 'lg':
       headerPadding = 'pb-8'
       headerMargin = 'mb-10'
+      contentStyle = 'prose-lg md:prose-xl'
       break
     default:
       headerPadding = 'pb-8'
       headerMargin = 'mb-10'
+      contentStyle = 'prose-lg md:prose-xl'
       break
   }
 
@@ -64,6 +73,7 @@ export const PageHeadersWrapper = ({
         {header}{' '}
         {pronoun && <span className="text-xl font-light lowercase lg:text-3xl text-cu-black-500">({pronoun})</span>}
       </HeaderComponent>
+      {content && <p className={contentStyle}>{content}</p>}
       {children}
     </>
   )