change: page header props and styles for events and people

cuweb · Apr 6, 2024 · 8689ee6 · 8689ee6
1 parent 7635e65
commit 8689ee6
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 79 deletions.
diff --git a/CHANGELOG.mdx b/CHANGELOG.mdx
@@ -33,7 +33,7 @@ Prefix the change with one of these keywords:
 - Avatar: updated styles
 - Button: restricted to red and grey color
 - Button: removed outline style
-- Cards: removed button color options in footer subcomponent, restricted to red
+- Cards: removed button color options in footer sub component, restricted to red
 - Cards: removed shadow options, forced shadow on all cards
 - Cards: removed card bg color, forced white bg on all cards
 - Cards: updated card styles
@@ -44,6 +44,7 @@ Prefix the change with one of these keywords:
 - Listings: removed button color options in footer subcomponent, restricted to red
 - Listings: updated card styles
 - Nav: space between logo and site title
+- Page Header: updated props and styles for event and people sub components
 - Pagination: active text changed to red
 - Stacked List: removed border option
 - Stacked List: updated max width query sizes when offset used

diff --git a/lib/components/Figure/Figure.tsx b/lib/components/Figure/Figure.tsx
@@ -8,13 +8,22 @@ export interface FigureProps {
   size?: 'xs' | 'sm' | 'md' | 'lg' | 'full'
   align?: 'left' | 'right' | 'center' | 'none'
   hasShadow?: boolean
+  noMobile?: boolean
 }
 
-export const FigureWrapper = ({ children, caption, hasShadow, size = 'full', align = 'none' }: FigureProps) => {
+export const FigureWrapper = ({
+  children,
+  caption,
+  hasShadow,
+  noMobile,
+  size = 'full',
+  align = 'none',
+}: FigureProps) => {
   const shadow = hasShadow ? styles.shadow : ''
+  const hideMobile = noMobile ? 'hidden md:block' : 'block'
 
   return (
-    <figure className="cu-figure">
+    <figure className={`cu-figure ${hideMobile}`}>
       <div className={`not-prose rounded-lg ${styles.container} ${figureSize[size]} ${figureAlign[align]} ${shadow}`}>
         {children}
         {caption && <figcaption className={styles.caption}>{caption}</figcaption>}

diff --git a/lib/components/PageHeaders/PageHeaders.Styles.tsx b/lib/components/PageHeaders/PageHeaders.Styles.tsx
@@ -1,7 +1,6 @@
 export const listStyles = {
   listWrapper: `cu-pageheaders-group not-prose mb-6 mt-6`,
   listGroup: `pl-0 list-none`,
-  listVertical: `space-y-0.5`,
   listHorizontal: `flex gap-6 items-center`,
   listLink: 'font-semibold text-cu-red hover:underline',
 }

diff --git a/lib/components/PageHeaders/PageHeaders.stories.tsx b/lib/components/PageHeaders/PageHeaders.stories.tsx
@@ -34,27 +34,6 @@ export const PageHeaderCentre: Story = {
   },
 }
 
-export const MediumPageHeader: Story = {
-  args: {
-    header: 'Medium size',
-    size: 'md',
-  },
-}
-
-export const SmallPageHeader: Story = {
-  args: {
-    header: 'Small size',
-    size: 'sm',
-  },
-}
-
-export const ExtraSmallPageHeader: Story = {
-  args: {
-    header: 'Extra small page header',
-    size: 'xs',
-  },
-}
-
 export const DefaultWithContent: Story = {
   args: {
     header: 'Large header with content',
@@ -76,40 +55,12 @@ export const CenterWithContent: Story = {
   },
 }
 
-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',
     children: (
       <>
-        <Figure size="sm" align="right" hasShadow>
+        <Figure size="sm" align="right" hasShadow noMobile>
           <img
             src="https://fastly.picsum.photos/id/1062/400/400.jpg?hmac=zaTGri35k94fGnPFBesQ7tRVfjy6BUCtXDFQdWQ3r-k"
             alt="Required alt text"

diff --git a/lib/components/PageHeaders/PageHeadersEvent.tsx b/lib/components/PageHeaders/PageHeadersEvent.tsx
@@ -1,5 +1,5 @@
 import { listStyles } from './PageHeaders.Styles'
-import { proseStyles, proseGroups } from '../../utils/globalClasses'
+import { proseStyles } from '../../utils/globalClasses'
 import { Button } from '../Button/Button'
 
 export interface PageHeadersEventProps {
@@ -40,12 +40,18 @@ export const PageHeadersEvent = ({
 
   return (
     <>
-      {startDate && <p className={proseGroups.largeLight}>{startDate}</p>}
-      {endDate && <p className={proseGroups.largeLight}>{endDate}</p>}
+      {(startDate || endDate) && (
+        <div className={`${listStyles.listWrapper} ${proseStyles.base}`}>
+          <ul>
+            {startDate && <li>{startDate}</li>}
+            {endDate && <li>{endDate}</li>}
+          </ul>
+        </div>
+      )}
 
       {/* Check if details are set and output as ul */}
       <div className={`${listStyles.listWrapper} ${proseStyles.base}`}>
-        <ul className={listStyles.listVertical}>
+        <ul>
           <li>
             <strong className="font-semibold">{eventType} Event</strong>
           </li>
@@ -72,7 +78,7 @@ export const PageHeadersEvent = ({
       {/* Check is socials are set and render div */}
       {Object.values(eventDetails).some((info) => info) && (
         <div className={`${listStyles.listWrapper} ${proseStyles.base}`}>
-          <ul className={listStyles.listVertical}>
+          <ul>
             {contactName && (
               <li>
                 <strong className="block font-semibold">Contact:</strong>
@@ -98,7 +104,6 @@ export const PageHeadersEvent = ({
             {primaryButtonUrl && (
               <li>
                 <Button
-                  isSmall
                   onClick={() => {
                     if (typeof primaryButtonUrl === 'string') {
                       window.location.href = primaryButtonUrl
@@ -111,7 +116,6 @@ export const PageHeadersEvent = ({
             {secondaryButtonUrl && (
               <li>
                 <Button
-                  isSmall
                   color="grey"
                   onClick={() => {
                     if (typeof secondaryButtonUrl === 'string') {

diff --git a/lib/components/PageHeaders/PageHeadersPeople.tsx b/lib/components/PageHeaders/PageHeadersPeople.tsx
@@ -1,6 +1,5 @@
 import { listStyles, socialStyles } from './PageHeaders.Styles'
-import { proseStyles, proseGroups } from '../../utils/globalClasses'
-import { Button } from '../Button/Button'
+import { proseStyles } from '../../utils/globalClasses'
 
 export interface PageHeadersPeopleProps {
   jobTitle?: string
@@ -21,18 +20,24 @@ export interface PageHeadersSocialProps {
 }
 
 export const PageHeadersPeople = ({ jobTitle, ...restProps }: PageHeadersPeopleProps & PageHeadersSocialProps) => {
-  const { degrees, building, room, email, phone, phoneExt, resume, website, linkedin, twitter, facebook } = restProps
+  const { degrees, building, room, email, phone, phoneExt, website, linkedin, twitter, facebook } = restProps
   const profileDetails = ['degrees', 'building', 'room', 'email', 'phone', 'phoneExt']
   const socialDetails = ['resume', 'linkedin', 'twitter', 'facebook']
 
   return (
     <>
-      {jobTitle && <p className={proseGroups.largeLight}>{jobTitle}</p>}
+      {jobTitle && (
+        <div className={`${listStyles.listWrapper} ${proseStyles.base}`}>
+          <ul>
+            <li>{jobTitle}</li>
+          </ul>
+        </div>
+      )}
 
       {/* Check if details are set and output as ul */}
       {Object.values(profileDetails).some((info) => info) && (
         <div className={`${listStyles.listWrapper} ${proseStyles.base}`}>
-          <ul className={listStyles.listVertical}>
+          <ul>
             {degrees && <li>{degrees}</li>}
             {building && (
               <li>
@@ -61,19 +66,6 @@ export const PageHeadersPeople = ({ jobTitle, ...restProps }: PageHeadersPeopleP
       {Object.values(socialDetails).some((info) => info) && (
         <div className={`${listStyles.listWrapper} ${proseStyles.base}`}>
           <ul className={listStyles.listHorizontal}>
-            {resume && (
-              <li>
-                <Button
-                  isSmall
-                  color="grey"
-                  onClick={() => {
-                    window.location.href = resume
-                  }}
-                  title="Resume"
-                />
-              </li>
-            )}
-
             {linkedin && (
               <li>
                 <a className={`${socialStyles.link} hover:text-[#0072b1]`} href={linkedin}>