Change/future funder

lib/components/FundingDetails/FundingDetails.stories.tsx

@@ -17,7 +17,15 @@ export default meta
 type Story = StoryObj<typeof FundingDetails>
 
 export const Primary: Story = {
-  args: {},
+  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 <FundingDetails {...args} />
   },

lib/components/FundingDetails/FundingDetails.tsx

@@ -1,29 +1,48 @@
 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
+  categories?: 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 = ({
+  title,
+  raised,
+  goal,
+  endDate,
+  imageUrl,
+  imageAlt,
+  categories,
+}: FundingDetailsProps) => {
   const percent = goal > 0 ? Math.min(Math.round((raised / goal) * 100), 100) : 0
+  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 (
     <>
-      <div className="flex flex-col lg:flex-row items-stretch gap-8 lg:gap-16 lg:border-b lg:border-cu-black-300/50 lg:rounded-sm lg:pb-8">
-        <div className="lg:w-1/2 lg:py-10">
+      <div className="cu-fundingdetails flex flex-col lg:flex-row items-stretch gap-8 lg:gap-16 lg:rounded-sm ">
+        <div className="lg:py-8">
           <BadgeGroup bottom={0} gap="2" left={0} right={0} top={0}>
-            <Badge color="green" text={status} />
+            <Badge color={statusColor} text={statusText} rounded="base" />
           </BadgeGroup>
 
           <PageHeader as="h1" header={title} size="lg" noUnderline />
@@ -37,21 +56,28 @@ export const FundingDetails = ({ status, title, raised, goal, imageUrl, imageAlt
             <ProgressBar value={raised} max={goal} />
           </div>
 
-          <p className="text-sm text-cu-black-600 mb-8">{percent}% funded</p>
+          <p className="text-sm text-cu-black-600 italic">
+            {percent}% funded with {timeLabel}
+          </p>
+
+          {categories && categories.length > 0 && (
+            <BadgeGroup bottom={0} gap="2" left={0} right={0} top={0}>
+              {categories.map((cat) => (
+                <Badge key={cat} color="grey" text={cat} rounded="base" />
+              ))}
+            </BadgeGroup>
+          )}
 
           <ButtonGroup align="start" gap="5">
-            <Button onClick={() => {}} title="Fund this Project" />
+            <a href="#fund-this-campaign" className="cu-button not-prose cu-button--red">
+              Fund this Project
+            </a>
           </ButtonGroup>
         </div>
 
         {/* Image */}
-        <div className="lg:w-1/2">
-          <img
-            src={imageUrl}
-            alt={imageAlt}
-            className="w-full h-full object-cover rounded-xl !m-0"
-            // style={{ minHeight: '380px' }}
-          />
+        <div>
+          <img src={imageUrl} alt={imageAlt} className="w-full h-full object-cover rounded-xl !m-0" />
         </div>
       </div>
     </>

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

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,20 +47,32 @@ export const SingleProject: Story = {
       </Nav>
 
       <Main>
-        <Section as="div" maxWidth="max">
+        <Section as="div" maxWidth="7xl">
           <FundingDetails
-            status="ACTIVE CAMPAIGN"
             title="Annual Musical Production 2026"
+            endDate="2027-09-01"
             raised={45250}
             goal={75000}
+            categories={['Community', 'Health', 'Student Experience']}
             imageUrl="https://fastly.picsum.photos/id/237/1200/800.jpg?hmac=Zig5Q0Oa_5oSGNOhgbpE-lgHzdREZIxTf94rVP1-uCg"
             imageAlt="Black labrador puppy looking up"
           />
         </Section>
 
+        <PageHeader as="h2" header="The Overview" size="md" />
         <SinglePara />
+
+        <PageHeader as="h2" header="The Background" size="md" />
         <SinglePara />
+
+        <PageHeader as="h2" header="The Rollout" size="md" />
         <SinglePara />
+
+        <PageHeader as="h2" header="The Impact" size="md" />
+        <SinglePara />
+
+        <PageHeader as="h2" header="Fund this campaign" size="md" />
+        <p>The primary donation form would be placed here.</p>
       </Main>
 
       <FooterStandard />

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