From 3af897ae2d5a8bc6569043c54f4e3963be157d6a Mon Sep 17 00:00:00 2001 From: troychaplin Date: Mon, 22 Jun 2026 12:09:13 -0400 Subject: [PATCH 1/4] change: single project layout --- .../FundingDetails/FundingDetails.stories.tsx | 4 ++- .../FundingDetails/FundingDetails.tsx | 34 +++++++++++++------ .../futurefunder/SingleProject.stories.tsx | 14 +++++++- 3 files changed, 39 insertions(+), 13 deletions(-) diff --git a/lib/components/FundingDetails/FundingDetails.stories.tsx b/lib/components/FundingDetails/FundingDetails.stories.tsx index f19b848a4..97414eb4f 100644 --- a/lib/components/FundingDetails/FundingDetails.stories.tsx +++ b/lib/components/FundingDetails/FundingDetails.stories.tsx @@ -17,7 +17,9 @@ export default meta type Story = StoryObj export const Primary: Story = { - args: {}, + args: { + endDate: new Date(Date.now() + 45 * 24 * 60 * 60 * 1000).toISOString().split('T')[0], + }, render: (args) => { return }, diff --git a/lib/components/FundingDetails/FundingDetails.tsx b/lib/components/FundingDetails/FundingDetails.tsx index cfeb91593..5e9786271 100644 --- a/lib/components/FundingDetails/FundingDetails.tsx +++ b/lib/components/FundingDetails/FundingDetails.tsx @@ -13,15 +13,24 @@ interface FundingDetailsProps { goal: number imageUrl: string imageAlt: string + endDate?: string } -export const FundingDetails = ({ status, title, raised, goal, imageUrl, imageAlt }: FundingDetailsProps) => { +const getTimeRemainingLabel = (endDate: string): string => { + const daysLeft = Math.ceil((new Date(endDate).getTime() - Date.now()) / (1000 * 60 * 60 * 24)) + if (daysLeft > 365) return 'more than a year to go' + if (daysLeft > 30) return `${Math.round(daysLeft / 30)} months to go` + return `${Math.max(daysLeft, 0)} days to go` +} + +export const FundingDetails = ({ status, title, raised, goal, imageUrl, imageAlt, endDate }: FundingDetailsProps) => { const percent = goal > 0 ? Math.min(Math.round((raised / goal) * 100), 100) : 0 + const timeLabel = endDate ? getTimeRemainingLabel(endDate) : undefined return ( <> -
-
+
+
@@ -37,7 +46,15 @@ export const FundingDetails = ({ status, title, raised, goal, imageUrl, imageAlt
-

{percent}% funded

+

+ {percent}% funded{timeLabel ? ` with ${timeLabel}` : ''} +

+ + + + + +
{/* Image */} -
- {imageAlt} +
+ {imageAlt}
diff --git a/lib/examples/projects/futurefunder/SingleProject.stories.tsx b/lib/examples/projects/futurefunder/SingleProject.stories.tsx index 745641c8c..ad5f90fc4 100644 --- a/lib/examples/projects/futurefunder/SingleProject.stories.tsx +++ b/lib/examples/projects/futurefunder/SingleProject.stories.tsx @@ -4,6 +4,7 @@ import { Main } from '../../../layouts/Main/Main' import { Section } from '../../../layouts/Section/Section' import { FooterStandard } from '../../../components/Footer/FooterStandard/FooterStandard' import { Nav } from '../../../components/Nav/Nav' +import { PageHeader } from '../../../components/PageHeader/PageHeader' import { FundingDetails } from '../../../components/FundingDetails/FundingDetails' import { NavButtonsData, NavFutureFunder } from '../../../data/NavData' @@ -46,10 +47,11 @@ export const SingleProject: Story = {
-
+
+ + + + + + + + + +

The primary donation form would be placed here.

From 365aef15dc715647d2e69b16296eca0ca1aad0ca Mon Sep 17 00:00:00 2001 From: troychaplin Date: Mon, 22 Jun 2026 12:12:56 -0400 Subject: [PATCH 2/4] change: single project layout --- lib/examples/projects/futurefunder/SingleProject.stories.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/lib/examples/projects/futurefunder/SingleProject.stories.tsx b/lib/examples/projects/futurefunder/SingleProject.stories.tsx index ad5f90fc4..916633103 100644 --- a/lib/examples/projects/futurefunder/SingleProject.stories.tsx +++ b/lib/examples/projects/futurefunder/SingleProject.stories.tsx @@ -59,6 +59,7 @@ export const SingleProject: Story = { /> + From 7036c2e864096ff797d1a6a9bbe6181bd60848bb Mon Sep 17 00:00:00 2001 From: troychaplin Date: Mon, 22 Jun 2026 12:47:51 -0400 Subject: [PATCH 3/4] change: single project layout --- .../FundingDetails/FundingDetails copy 2.tsx | 16 --- .../FundingDetails/FundingDetails copy.tsx | 104 ------------------ .../FundingDetails/FundingDetails.stories.tsx | 6 + .../FundingDetails/FundingDetails.tsx | 46 +++++--- lib/components/FundingDetails/styles.css | 31 +----- .../futurefunder/SingleProject.stories.tsx | 4 +- lib/style.css | 1 + 7 files changed, 41 insertions(+), 167 deletions(-) delete mode 100644 lib/components/FundingDetails/FundingDetails copy 2.tsx delete mode 100644 lib/components/FundingDetails/FundingDetails copy.tsx diff --git a/lib/components/FundingDetails/FundingDetails copy 2.tsx b/lib/components/FundingDetails/FundingDetails copy 2.tsx deleted file mode 100644 index 9fc3aa105..000000000 --- a/lib/components/FundingDetails/FundingDetails copy 2.tsx +++ /dev/null @@ -1,16 +0,0 @@ -export interface FundingDetailsProps { - image?: string -} - -export const FundingDetails = ({ image }: FundingDetailsProps) => { - console.log('FundingDetails image prop:', image) // Debug log to check the image prop value - - return ( -
-
Left
-
Right
-
- ) -} - -FundingDetails.displayName = 'FundingDetails' diff --git a/lib/components/FundingDetails/FundingDetails copy.tsx b/lib/components/FundingDetails/FundingDetails copy.tsx deleted file mode 100644 index f7bd76f2a..000000000 --- a/lib/components/FundingDetails/FundingDetails copy.tsx +++ /dev/null @@ -1,104 +0,0 @@ -import { useState } from 'react' - -const ERROR_IMG_SRC = - 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODgiIGhlaWdodD0iODgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc3Ryb2tlPSIjMDAwIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBvcGFjaXR5PSIuMyIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIzLjciPjxyZWN0IHg9IjE2IiB5PSIxNiIgd2lkdGg9IjU2IiBoZWlnaHQ9IjU2IiByeD0iNiIvPjxwYXRoIGQ9Im0xNiA1OCAxNi0xOCAzMiAzMiIvPjxjaXJjbGUgY3g9IjUzIiBjeT0iMzUiIHI9IjciLz48L3N2Zz4KCg==' - -const DEFAULT_IMAGE = - 'https://fastly.picsum.photos/id/237/1200/800.jpg?hmac=Zig5Q0Oa_5oSGNOhgbpE-lgHzdREZIxTf94rVP1-uCg' - -export interface FundingDetailsProps { - image?: string -} - -export const FundingDetails = ({ image }: FundingDetailsProps) => { - const [didError, setDidError] = useState(false) - - // Sample data - replace with actual campaign data - const raised = 45250 - const goal = 75000 - const percentComplete = (raised / goal) * 100 - const supporters = 342 - const daysLeft = 28 - - return ( -
- {/* Hero Container */} -
-
- {/* Left Side - Campaign Content (Desktop) / Image First (Mobile) */} -
-
- {/* Header */} -
- - Active Campaign - -

Annual Musical Production 2026

-

Help bring the magic of live theater to our campus community

-
- - {/* Campaign Progress */} -
-
- ${raised.toLocaleString()} - of ${goal.toLocaleString()} -
- - {/* Progress Bar */} -
-
-
-
{Math.round(percentComplete)}% funded
-
- - {/* Stats Grid */} -
-
-
{Math.round(percentComplete)}%
-
Complete
-
-
-
{supporters}
-
Supporters
-
-
-
{daysLeft}
-
Days Left
-
-
-
${Math.round(raised / supporters)}
-
Average
-
-
- - {/* Call to Action */} -
- - -
-
-
- - {/* Right Side - Image */} -
- Students performing in musical production setDidError(true)} - /> -
-
-
-
- ) -} - -FundingDetails.displayName = 'FundingDetails' diff --git a/lib/components/FundingDetails/FundingDetails.stories.tsx b/lib/components/FundingDetails/FundingDetails.stories.tsx index 97414eb4f..e7c3794e0 100644 --- a/lib/components/FundingDetails/FundingDetails.stories.tsx +++ b/lib/components/FundingDetails/FundingDetails.stories.tsx @@ -18,7 +18,13 @@ type Story = StoryObj export const Primary: Story = { args: { + title: 'Fund the Future of Clean Energy Research', + raised: 42500, + goal: 100000, endDate: new Date(Date.now() + 45 * 24 * 60 * 60 * 1000).toISOString().split('T')[0], + imageUrl: 'https://picsum.photos/seed/funding/800/600', + imageAlt: 'Funding campaign image', + categories: ['Environment', 'Science & Innovation', 'Student Experience'], }, render: (args) => { return diff --git a/lib/components/FundingDetails/FundingDetails.tsx b/lib/components/FundingDetails/FundingDetails.tsx index 5e9786271..4fa5e2379 100644 --- a/lib/components/FundingDetails/FundingDetails.tsx +++ b/lib/components/FundingDetails/FundingDetails.tsx @@ -1,19 +1,18 @@ import { Badge } from '../Badge/Badge' import { BadgeGroup } from '../BadgeGroup/BadgeGroup' -import { Button } from '../Button/Button' import { ButtonGroup } from '../ButtonGroup/ButtonGroup' import { PageHeader } from '../PageHeader/PageHeader' import { ProgressBar } from '../ProgressBar/ProgressBar' import { formatCurrency } from '../../helpers/formatCurrency' interface FundingDetailsProps { - status: string title: string raised: number goal: number + endDate: string imageUrl: string imageAlt: string - endDate?: string + categories?: string[] } const getTimeRemainingLabel = (endDate: string): string => { @@ -23,16 +22,27 @@ const getTimeRemainingLabel = (endDate: string): string => { return `${Math.max(daysLeft, 0)} days to go` } -export const FundingDetails = ({ status, title, raised, goal, imageUrl, imageAlt, endDate }: FundingDetailsProps) => { +export const FundingDetails = ({ + title, + raised, + goal, + endDate, + imageUrl, + imageAlt, + categories, +}: FundingDetailsProps) => { const percent = goal > 0 ? Math.min(Math.round((raised / goal) * 100), 100) : 0 - const timeLabel = endDate ? getTimeRemainingLabel(endDate) : undefined + const timeLabel = getTimeRemainingLabel(endDate) + const isActive = new Date(endDate).getTime() >= Date.now() + const statusText = isActive ? 'Active Campaign' : 'Campaign Completed' + const statusColor = isActive ? 'green' : 'red' return ( <> -
-
+
+
- + @@ -46,18 +56,22 @@ export const FundingDetails = ({ status, title, raised, goal, imageUrl, imageAlt
-

- {percent}% funded{timeLabel ? ` with ${timeLabel}` : ''} +

+ {percent}% funded with {timeLabel}

- - - - - + {categories && categories.length > 0 && ( + + {categories.map((cat) => ( + + ))} + + )} -
diff --git a/lib/components/FundingDetails/styles.css b/lib/components/FundingDetails/styles.css index 7910c8bb0..9f2c57f37 100644 --- a/lib/components/FundingDetails/styles.css +++ b/lib/components/FundingDetails/styles.css @@ -1,30 +1,3 @@ -/* TODO GLOBAL: negative top based on primary spacing */ -.cu-main > .cu-section > .cu-fullbanner:first-of-type { - @apply -mt-6 lg:-mt-10; -} - -.cu-main > .cu-section > .cu-fullbanner:first-of-type video { - @apply mt-0; -} - -/* TODO GLOBAL: negative bottom based on primary spacing */ -.cu-main > .cu-section--primary > .cu-fullbanner:last-child { - @apply -mb-6 lg:-mb-10; -} - -.cu-fullbanner .cu-pageheader { - @apply mb-0; -} - -.cu-fullbanner img { - @apply rounded-none m-0; -} - -.cu-fullbanner h1, -.cu-fullbanner h2, -.cu-fullbanner h3, -.cu-fullbanner h4, -.cu-fullbanner h5, -.cu-fullbanner h6 { - @apply text-white; +.cu-fundingdetails p + .cu-badgegroup { + @apply pt-5; } diff --git a/lib/examples/projects/futurefunder/SingleProject.stories.tsx b/lib/examples/projects/futurefunder/SingleProject.stories.tsx index 916633103..4d3a70d81 100644 --- a/lib/examples/projects/futurefunder/SingleProject.stories.tsx +++ b/lib/examples/projects/futurefunder/SingleProject.stories.tsx @@ -49,11 +49,11 @@ export const SingleProject: Story = {
diff --git a/lib/style.css b/lib/style.css index 5cf5cd45d..c3489b677 100644 --- a/lib/style.css +++ b/lib/style.css @@ -25,6 +25,7 @@ @import './components/Form/styles.css'; @import './components/Form/AutoSuggest/styles.css'; @import './components/Form/DateTime/styles.css'; +@import './components/FundingDetails/styles.css'; @import './components/ImageGrid/styles.css'; @import './components/Listing/styles.css'; @import './components/Nav/priority-plus/priority-plus.css'; From 5579651e40580be67cb8a3f4737adf1bd0aee600 Mon Sep 17 00:00:00 2001 From: troychaplin Date: Mon, 22 Jun 2026 12:48:40 -0400 Subject: [PATCH 4/4] change: single project layout --- lib/components/FundingDetails/styles.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/components/FundingDetails/styles.css b/lib/components/FundingDetails/styles.css index 9f2c57f37..9a24d4bd0 100644 --- a/lib/components/FundingDetails/styles.css +++ b/lib/components/FundingDetails/styles.css @@ -1,3 +1,3 @@ .cu-fundingdetails p + .cu-badgegroup { - @apply pt-5; + @apply pt-5; }