Merge pull request #272 from cuweb/feature/hrDigital

Feature/hr digital

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

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>
   )

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}`}

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',

lib/components/PageHeaders/PageHeaders.tsx

@@ -4,39 +4,76 @@ 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
 }
 
 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 = ({
   children,
-  header,
   as = 'h1',
+  header,
+  content,
   size = 'lg',
   noUnderline = false,
   pronoun,
 }: PageHeadersProps) => {
   const HeaderComponent = as
+
+  // Set spacing for header with underline
+  let headerPadding
+  let headerMargin
+  let contentStyle
+
+  switch (size) {
+    case 'xs':
+      headerPadding = 'pb-4'
+      headerMargin = 'mb-6'
+      contentStyle = 'prose-md md:prose-lg'
+      break
+    case 'sm':
+      headerPadding = 'pb-5'
+      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
+  }
+
   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>
+      {content && <p className={contentStyle}>{content}</p>}
       {children}
     </>
   )