Add/future funder

.storybook/main.ts

@@ -7,13 +7,7 @@ const config: StorybookConfig = {
     '../lib/**/*.stories.@(mdx|js|jsx|ts|tsx)',
     '../lib/**/**/*.stories.@(mdx|js|jsx|ts|tsx)',
   ],
-  addons: [
-    '@storybook/addon-a11y',
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@storybook/addon-onboarding',
-    '@storybook/addon-interactions',
-  ],
+  addons: ['@storybook/addon-a11y', '@storybook/addon-links', '@storybook/addon-docs', '@storybook/addon-onboarding'],
   framework: {
     name: '@storybook/react-vite',
     options: {},

eslint.config.mjs

@@ -7,14 +7,16 @@ import typescriptParser from '@typescript-eslint/parser'
 import prettier from 'eslint-plugin-prettier'
 import storybook from 'eslint-plugin-storybook'
 import eslintConfigPrettier from 'eslint-config-prettier'
-import pluginCypress from 'eslint-plugin-cypress/flat'
+import pluginCypress from 'eslint-plugin-cypress'
 
 const config = [
+  {
+    ignores: ['dist/**', 'node_modules/**', 'public/**'],
+  },
   ...storybook.configs['flat/recommended'],
   pluginCypress.configs.recommended,
   eslintConfigPrettier,
   {
-    ignores: ['dist/**', 'node_modules/**', 'public/**'],
     files: ['lib/**/*.ts', 'lib/**/*.tsx', 'lib/**/*.cy.ts', 'lib/**/*.cy.tsx'],
     plugins: {
       react,
@@ -46,7 +48,7 @@ const config = [
       'no-undef': 'error',
       '@typescript-eslint/no-explicit-any': 'error',
       'prettier/prettier': 'error',
-      'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
+      'react-refresh/only-export-components': 'off',
       'cypress/unsafe-to-chain-command': 'error',
     },
   },

lib/components/Alert/Alert.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react-vite'
 import { Main } from '../../layouts/Main/Main'
 import { Alert } from './Alert'
 

lib/components/Alert/Examples.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import type { Meta, StoryObj } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
 import { Section } from '../../layouts/Section/Section'
 import { Main } from '../../layouts/Main/Main'
 import { FooterStandard } from '../Footer/FooterStandard/FooterStandard'

lib/components/Avatar/Avatar.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import type { Meta, StoryObj } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
 import { Avatar } from './Avatar'
 
 const meta: Meta<typeof Avatar> = {

lib/components/Avatar/Examples.stories.TODO.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import type { Meta, StoryObj } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
 import { Section } from '../../layouts/Section/Section'
 import { Main } from '../../layouts/Main/Main'
 import { FooterStandard } from '../Footer/FooterStandard/FooterStandard'

lib/components/Badge/Badge.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
 import { Badge } from './Badge'
 
 const meta: Meta<typeof Badge> = {

lib/components/Badge/Examples.stories.TODO.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import type { Meta, StoryObj } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
 import { Section } from '../../layouts/Section/Section'
 import { Main } from '../../layouts/Main/Main'
 import { FooterStandard } from '../Footer/FooterStandard/FooterStandard'

lib/components/BadgeGroup/BadgeGroup.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import type { Meta, StoryObj } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
 import { Badge } from '../Badge/Badge'
 import { BadgeGroup } from './BadgeGroup'
 import { Main } from '../../layouts/Main/Main'

lib/components/BadgeGroup/Examples.stories.TODO.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import type { Meta, StoryObj } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
 import { Section } from '../../layouts/Section/Section'
 import { Main } from '../../layouts/Main/Main'
 import { FooterStandard } from '../Footer/FooterStandard/FooterStandard'

lib/components/Button/Button.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
 import { Button } from './Button'
 
 const meta: Meta<typeof Button> = {

lib/components/ButtonGroup/ButtonGroup.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import type { Meta, StoryObj } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
 import { ButtonGroup } from './ButtonGroup'
 import { Button } from '../Button/Button'
 import { Main } from '../../layouts/Main/Main'

lib/components/ButtonGroup/Examples.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import type { Meta, StoryObj } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
 import { Section } from '../../layouts/Section/Section'
 import { Main } from '../../layouts/Main/Main'
 import { FooterStandard } from '../Footer/FooterStandard/FooterStandard'

lib/components/Calendar/Calendar.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { useCallback, useState } from 'react'
-import type { Meta, StoryObj } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
 import { Calendar } from './Calendar'
 import { CalendarData } from '../../data/CalendarData'
 import { Main } from '../../layouts/Main/Main'

lib/components/Calendar/Examples.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import type { Meta, StoryObj } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
 import { Section } from '../../layouts/Section/Section'
 import { Main } from '../../layouts/Main/Main'
 import { FooterStandard } from '../Footer/FooterStandard/FooterStandard'

lib/components/CallOut/CallOut.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import type { Meta, StoryObj } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
 import { CallOut } from './CallOut'
 import { Main } from '../../layouts/Main/Main'
 import { ButtonGroup } from '../ButtonGroup/ButtonGroup'

lib/components/CallOut/Examples.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import type { Meta, StoryObj } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
 import { Section } from '../../layouts/Section/Section'
 import { Main } from '../../layouts/Main/Main'
 import { FooterStandard } from '../Footer/FooterStandard/FooterStandard'

lib/components/Card/Card.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import type { Meta, StoryObj } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
 import { Column } from '../../layouts/Column/Column'
 import { Main } from '../../layouts/Main/Main'
 import { Card } from './Card'

lib/components/Card/Card.tsx

@@ -4,6 +4,7 @@ import { CardContent } from './CardContent'
 import { CardDateThumb } from './CardDateThumb'
 import { CardExcerpt } from './CardExcerpt'
 import { CardEventMeta } from './CardEventMeta'
+import { CardFundingMeta } from './CardFundingMeta'
 import { CardFigure } from './CardFigure'
 import { CardFooter } from './CardFooter'
 import { CardHeader } from './CardHeader'
@@ -81,6 +82,7 @@ export const Card = Object.assign(CardWrapper, {
   Footer: CardFooter,
   Excerpt: CardExcerpt,
   EventMeta: CardEventMeta,
+  FundingMeta: CardFundingMeta,
   PeopleMeta: CardPeopleMeta,
   Stats: CardStats,
 })

lib/components/Card/CardFundingMeta.tsx

@@ -0,0 +1,76 @@
+import { Icon } from '../Icon'
+import { useEffect, useState } from 'react'
+
+interface CardFundingMetaProps {
+  raised: number
+  goal: number
+  daysLeft: number
+  showPercentage?: boolean
+}
+
+const styles = {
+  redIcon: 'flex-shrink-0 mr-2',
+  iconSize: 16,
+  iconColor: '#808080',
+}
+
+export function CardFundingMeta({ raised, goal, daysLeft, showPercentage = true }: CardFundingMetaProps) {
+  const [animatedWidth, setAnimatedWidth] = useState(0)
+  const percentage = (raised / goal) * 100
+
+  // Animate progress bar on mount
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setAnimatedWidth(percentage)
+    }, 100)
+    return () => clearTimeout(timer)
+  }, [percentage])
+
+  const formatCurrency = (amount: number) => {
+    return new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'USD',
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 0,
+    }).format(amount)
+  }
+
+  const getTimeText = () => {
+    if (daysLeft === 0) return 'Last day'
+    if (daysLeft === 1) return '1 day left'
+    if (daysLeft < 30) return `${daysLeft} days left`
+    const months = Math.floor(daysLeft / 30)
+    return months === 1 ? '1 month left' : `${months} months left`
+  }
+
+  return (
+    <div>
+      {/* Amount Display */}
+      <div className="flex items-baseline gap-0 flex-wrap">
+        <span className="font-bold text-sm md:text-base text-cu-black">{formatCurrency(raised)}</span>
+        <span className="text-xs text-slate-500 px-1">raised out of</span>
+        <span className="text-sm md:text-base font-bold text-cu-black">{formatCurrency(goal)}</span>
+      </div>
+
+      {/* Progress Bar */}
+      <div className="h-3 bg-slate-200 rounded-full overflow-hidden mt-2 mb-3.5">
+        <div
+          className="h-full bg-gradient-to-r from-cu-red-400 to-cu-red-600 rounded-full transition-all duration-1000 ease-out"
+          style={{ width: `${animatedWidth}%` }}
+        />
+      </div>
+
+      {/* Bottom Info */}
+      <div className="flex items-center justify-between">
+        {/* Time Left */}
+        <div className="flex items-center">
+          <Icon name="clock" size={styles.iconSize} color={styles.iconColor} className={styles.redIcon} />
+          <span className="text-xs font-medium text-cu-black-600">{getTimeText()}</span>
+        </div>
+
+        {/* Percentage */}
+        {showPercentage && <span className="text-xs font-medium text-cu-black-600">{percentage.toFixed(2)}%</span>}
+      </div>
+    </div>
+  )
+}

lib/components/Card/CardHeader.tsx

@@ -1,5 +1,9 @@
+import { useLinkContext } from '../LinkProvider/useLinkContext'
+
 export interface CardHeaderProps {
   title: string
+  link?: string
+  extraText?: string
   as?: 'h2' | 'h3'
   date?: string | Date
   datePrefix?: string
@@ -9,12 +13,15 @@ export interface CardHeaderProps {
 
 export const CardHeader = ({
   title = 'No title available',
+  link,
+  extraText,
   as = 'h2',
   date,
   datePrefix,
   readTime,
   datePosition = 'top',
 }: CardHeaderProps) => {
+  const LinkComponent = useLinkContext()
   const HeaderComponent = as
   const formattedDate = date
     ? new Date(date).toLocaleString('en-US', {
@@ -44,8 +51,16 @@ export const CardHeader = ({
         </div>
       )}
 
+      {extraText && !date && (
+        <div className="flex flex-row gap-1 w-full mb-1">
+          <p className="flex flex-row items-center italic text-sm text-cu-black-600 dark:text-white @sm:md:text-base">
+            {extraText}
+          </p>
+        </div>
+      )}
+
       <HeaderComponent className="line-clamp-3 text-lg font-semibold text-cu-black  dark:text-white @sm:md:text-xl leading-6 @sm:md:leading-8">
-        {title}
+        {link ? <LinkComponent href={link}>{title}</LinkComponent> : title}
       </HeaderComponent>
 
       {date && datePosition === 'bottom' && (

lib/components/Card/Examples.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import type { Meta, StoryObj } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
 import { Section } from '../../layouts/Section/Section'
 import { Main } from '../../layouts/Main/Main'
 import { PageHeader } from '../PageHeader/PageHeader'

lib/components/Carleton360/Carleton360.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
 import { Carleton360 } from './Carleton360'
 import { Main } from '../../layouts/Main/Main'
 import { ButtonGroup } from '../ButtonGroup/ButtonGroup'

lib/components/Carleton360/Examples.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import type { Meta, StoryObj } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
 import { Section } from '../../layouts/Section/Section'
 import { Main } from '../../layouts/Main/Main'
 import { FooterStandard } from '../Footer/FooterStandard/FooterStandard'

lib/components/Description/Description.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import type { Meta, StoryObj } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
 import { Main } from '../../layouts/Main/Main'
 import { PageHeader } from '../PageHeader/PageHeader'
 import { Description } from './Description'

lib/components/Description/Examples.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import type { Meta, StoryObj } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
 import { Section } from '../../layouts/Section/Section'
 import { Main } from '../../layouts/Main/Main'
 import { FooterStandard } from '../Footer/FooterStandard/FooterStandard'

lib/components/Details/Details.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import type { Meta, StoryObj } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
 import { Details } from './Details'
 import { Main } from '../../layouts/Main/Main'
 

lib/components/Details/Examples.Events.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import type { Meta, StoryObj } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
 import { Main } from '../../layouts/Main/Main'
 import { FooterStandard } from '../Footer/FooterStandard/FooterStandard'
 import { Nav } from '../Nav/Nav'

lib/components/Details/Examples.People.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import type { Meta, StoryObj } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
 import { Main } from '../../layouts/Main/Main'
 import { FooterStandard } from '../Footer/FooterStandard/FooterStandard'
 import { Nav } from '../Nav/Nav'

lib/components/Details/Examples.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import type { Meta, StoryObj } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
 import { Section } from '../../layouts/Section/Section'
 import { Main } from '../../layouts/Main/Main'
 import { FooterStandard } from '../Footer/FooterStandard/FooterStandard'

lib/components/Dialog/Dialog.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import type { Meta, StoryObj } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
 import { Dialog } from './Dialog'
 import { Button } from '../Button/Button'
 import { useState } from 'react'

lib/components/Dialog/Examples.stories.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import type { Meta, StoryObj } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
 import { Main } from '../../layouts/Main/Main'
 import { FooterStandard } from '../Footer/FooterStandard/FooterStandard'
 import { PageHeader } from '../PageHeader/PageHeader'

lib/components/Embed/Embed.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import type { Meta, StoryObj } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
 import { Embed } from './Embed'
 import { EmbedHubSpot } from './EmbedHubSpot'
 import { Main } from '../../layouts/Main/Main'

lib/components/Embed/Examples.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import type { Meta, StoryObj } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
 import { Section } from '../../layouts/Section/Section'
 import { Main } from '../../layouts/Main/Main'
 import { FooterStandard } from '../Footer/FooterStandard/FooterStandard'

lib/components/ErrorMessages/Forbidden403/Examples.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import type { Meta, StoryObj } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
 import { Main } from '../../../layouts/Main/Main'
 import { FooterStandard } from '../../Footer/FooterStandard/FooterStandard'
 import { Nav } from '../../Nav/Nav'

lib/components/ErrorMessages/Forbidden403/Forbidden403.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import type { Meta, StoryObj } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
 import { Forbidden403 } from './Forbidden403'
 import { Main } from '../../../layouts/Main/Main'