From 888be6982057a0c9c86eaeb0e6c3570116258ce1 Mon Sep 17 00:00:00 2001 From: Bhoomi Pipalia Date: Thu, 1 Oct 2026 12:11:06 -0400 Subject: [PATCH 01/15] add: red-solid new badge color --- lib/components/Badge/Badge.tsx | 2 +- lib/components/Badge/styles.css | 4 ++++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/lib/components/Badge/Badge.tsx b/lib/components/Badge/Badge.tsx index 615e82629..a403f0b3c 100644 --- a/lib/components/Badge/Badge.tsx +++ b/lib/components/Badge/Badge.tsx @@ -7,7 +7,7 @@ export interface BadgeProps { text: string link?: string rounded?: borderRadiusKeys - color?: 'grey' | 'white' | 'black80' | 'white80' | 'green' | 'red' | 'yellow' | 'blue' | 'purple' + color?: 'grey' | 'white' | 'black80' | 'white80' | 'green' | 'red' | 'red-solid' | 'yellow' | 'blue' | 'purple' noWordBreak?: boolean } diff --git a/lib/components/Badge/styles.css b/lib/components/Badge/styles.css index c67bc47b9..a863fc0b2 100644 --- a/lib/components/Badge/styles.css +++ b/lib/components/Badge/styles.css @@ -14,6 +14,10 @@ @apply bg-red-50 text-red-800; } +.cu-badge--red-solid { + @apply bg-cu-red text-white; +} + .cu-badge--yellow { @apply bg-yellow-50 text-yellow-800; } From 400823288ec898e2639a9aa510732f5a73efec40 Mon Sep 17 00:00:00 2001 From: Bhoomi Pipalia Date: Thu, 1 Oct 2026 12:12:14 -0400 Subject: [PATCH 02/15] change: campaign banner with categories and text content update --- .../CampaignBanner/CampaignBanner.stories.tsx | 20 ++++-- .../CampaignBanner/CampaignBanner.tsx | 70 +++++++++++++------ 2 files changed, 63 insertions(+), 27 deletions(-) diff --git a/lib/components/CampaignBanner/CampaignBanner.stories.tsx b/lib/components/CampaignBanner/CampaignBanner.stories.tsx index 75e85b756..52060d9c1 100644 --- a/lib/components/CampaignBanner/CampaignBanner.stories.tsx +++ b/lib/components/CampaignBanner/CampaignBanner.stories.tsx @@ -18,14 +18,22 @@ type Story = StoryObj export const Primary: Story = { args: { - title: 'Fund the Future of Clean Energy Research', - raised: 42500, - goal: 100000, + title: 'The Music Award for Indigenous, Black and Racialized Students', + content: ( + <> +

+ The Music Award for Indigenous, Black and Racialized Students is awarded annually to a student who is entering + or continuing in the undergraduate Music program. +

+ + ), + raised: 1349, + goal: 5000, endDate: '2026-08-27', categories: [ - { name: 'Environment', link: 'https://example.com/environment' }, - { name: 'Science & Innovation', link: 'https://example.com/science' }, - { name: 'Student Experience' }, + { name: 'Arts', link: 'https://example.com/environment', primary: true }, + { name: 'Arts & Social Sciences', link: 'https://example.com/science' }, + { name: 'Student Experience', link: 'https://example.com/student-experience' }, ], }, render: (args) => { diff --git a/lib/components/CampaignBanner/CampaignBanner.tsx b/lib/components/CampaignBanner/CampaignBanner.tsx index 3a40424bd..7846cd59a 100644 --- a/lib/components/CampaignBanner/CampaignBanner.tsx +++ b/lib/components/CampaignBanner/CampaignBanner.tsx @@ -1,17 +1,21 @@ import { Badge } from '../Badge/Badge' -import { BadgeGroup } from '../BadgeGroup/BadgeGroup' import { ButtonGroup } from '../ButtonGroup/ButtonGroup' import { PageHeader } from '../PageHeader/PageHeader' import { ProgressBar } from '../ProgressBar/ProgressBar' import { formatCurrency } from '../../helpers/formatCurrency' +import { Button } from '../Button/Button' +import { useLinkContext } from '../LinkProvider/useLinkContext' +import React from 'react' export interface CampaignCategory { name: string - link?: string + link: string + primary?: boolean } interface CampaignBannerProps { title: string + content?: React.ReactNode raised: number goal: number endDate: string @@ -30,29 +34,58 @@ const getTimeRemainingLabel = (endDate: string): string => { return `${Math.max(daysLeft, 0)} days to go` } -export const CampaignBanner = ({ title, raised, goal, endDate, categories }: CampaignBannerProps) => { +export const CampaignBanner = ({ title, content, raised, goal, endDate, categories }: CampaignBannerProps) => { + const LinkComponent = useLinkContext() + const percent = goal > 0 ? Math.min(Math.round((raised / goal) * 100), 100) : 0 const timeLabel = getTimeRemainingLabel(endDate) - const isActive = parseDateLocal(endDate).getTime() >= Date.now() - const statusText = isActive ? 'Active Campaign' : 'Campaign Completed' - const statusColor = isActive ? 'green' : 'red' + + // Sort categories so that primary ones come first + if (categories) { + categories.sort((a, b) => (b.primary ? 1 : 0) - (a.primary ? 1 : 0)) + } return (
- - - - - - {categories && categories.length > 0 && ( - - {categories.map((cat) => ( - +
+ {categories.map((cat, index) => ( + + {cat.primary ? ( + <> + + {index >= categories.filter((cat) => cat.primary).length - 1 && ( + | + )} + + ) : ( + + {cat.name} + + )} + ))} - +
)} + + + {content} + + + +
@@ -66,11 +99,6 @@ export const CampaignBanner = ({ title, raised, goal, endDate, categories }: Cam

{percent}% funded with {timeLabel}

- - - Fund this Project - -
From eb4b376aa96e3b1411c9da1fb9e71eb0c8bc0554 Mon Sep 17 00:00:00 2001 From: Bhoomi Pipalia Date: Thu, 1 Oct 2026 13:24:45 -0400 Subject: [PATCH 03/15] adding categories to banenr --- .../CampaignBanner/CampaignBanner.stories.tsx | 5 ++- .../CampaignBanner/CampaignBanner.tsx | 35 ++++--------------- 2 files changed, 10 insertions(+), 30 deletions(-) diff --git a/lib/components/CampaignBanner/CampaignBanner.stories.tsx b/lib/components/CampaignBanner/CampaignBanner.stories.tsx index 52060d9c1..aaed4488e 100644 --- a/lib/components/CampaignBanner/CampaignBanner.stories.tsx +++ b/lib/components/CampaignBanner/CampaignBanner.stories.tsx @@ -31,9 +31,12 @@ export const Primary: Story = { goal: 5000, endDate: '2026-08-27', categories: [ - { name: 'Arts', link: 'https://example.com/environment', primary: true }, + { name: 'Arts', link: 'https://example.com/environment' }, { name: 'Arts & Social Sciences', link: 'https://example.com/science' }, { name: 'Student Experience', link: 'https://example.com/student-experience' }, + { name: 'Scholarships', link: 'https://example.com/student-experience' }, + { name: 'Giving Day', link: 'https://example.com/student-experience' }, + { name: 'Healthcare', link: 'https://example.com/student-experience' }, ], }, render: (args) => { diff --git a/lib/components/CampaignBanner/CampaignBanner.tsx b/lib/components/CampaignBanner/CampaignBanner.tsx index 7846cd59a..370e7ded9 100644 --- a/lib/components/CampaignBanner/CampaignBanner.tsx +++ b/lib/components/CampaignBanner/CampaignBanner.tsx @@ -4,13 +4,11 @@ import { PageHeader } from '../PageHeader/PageHeader' import { ProgressBar } from '../ProgressBar/ProgressBar' import { formatCurrency } from '../../helpers/formatCurrency' import { Button } from '../Button/Button' -import { useLinkContext } from '../LinkProvider/useLinkContext' import React from 'react' export interface CampaignCategory { name: string link: string - primary?: boolean } interface CampaignBannerProps { @@ -35,47 +33,26 @@ const getTimeRemainingLabel = (endDate: string): string => { } export const CampaignBanner = ({ title, content, raised, goal, endDate, categories }: CampaignBannerProps) => { - const LinkComponent = useLinkContext() - const percent = goal > 0 ? Math.min(Math.round((raised / goal) * 100), 100) : 0 const timeLabel = getTimeRemainingLabel(endDate) - // Sort categories so that primary ones come first - if (categories) { - categories.sort((a, b) => (b.primary ? 1 : 0) - (a.primary ? 1 : 0)) - } - return (
+ + {content} + + {categories && categories.length > 0 && (
- {categories.map((cat, index) => ( + {categories.map((cat) => ( - {cat.primary ? ( - <> - - {index >= categories.filter((cat) => cat.primary).length - 1 && ( - | - )} - - ) : ( - - {cat.name} - - )} + ))}
)} - - {content} - -
-
-
+ +
+
{formatCurrency(raised)} of {formatCurrency(goal)} @@ -78,6 +125,14 @@ export const CampaignBanner = ({ title, content, raised, goal, endDate, categori

+ {/* Campaign bottom Section */} + + {StatData.slice(0, 4).map(({ id, stat, desc }) => ( + + + + ))} +
) } diff --git a/lib/components/PageHeader/PageHeader.tsx b/lib/components/PageHeader/PageHeader.tsx index fb56c9e6c..e9034f16e 100644 --- a/lib/components/PageHeader/PageHeader.tsx +++ b/lib/components/PageHeader/PageHeader.tsx @@ -15,7 +15,7 @@ const SIZE_CONFIG = { export interface PageHeaderProps { children?: React.ReactNode as?: 'h1' | 'h2' | 'h3' - preHeader?: string + preHeader?: string | React.ReactNode header: string content?: string metaData?: React.ReactNode From 508d9fad1afacecdc97d3c38aa2df0749e52bb3b Mon Sep 17 00:00:00 2001 From: Bhoomi Pipalia Date: Thu, 1 Oct 2026 16:11:07 -0400 Subject: [PATCH 05/15] adding cmapaing banner with final stucture --- .../CampaignBanner/CampaignBanner.stories.tsx | 57 +++---- .../CampaignBanner/CampaignBanner.tsx | 150 +++--------------- .../CampaignBanner/CampaignBannerContent.tsx | 74 +++++++++ .../CampaignBanner/CampaignBannerImage.tsx | 9 ++ .../CampaignBanner/CampaignBannerStats.tsx | 62 ++++++++ .../futurefunder/SingleProject.stories.tsx | 18 ++- 6 files changed, 204 insertions(+), 166 deletions(-) create mode 100644 lib/components/CampaignBanner/CampaignBannerContent.tsx create mode 100644 lib/components/CampaignBanner/CampaignBannerImage.tsx create mode 100644 lib/components/CampaignBanner/CampaignBannerStats.tsx diff --git a/lib/components/CampaignBanner/CampaignBanner.stories.tsx b/lib/components/CampaignBanner/CampaignBanner.stories.tsx index 0bc481176..9e62cfb65 100644 --- a/lib/components/CampaignBanner/CampaignBanner.stories.tsx +++ b/lib/components/CampaignBanner/CampaignBanner.stories.tsx @@ -1,4 +1,3 @@ -import React from 'react' import type { Meta, StoryObj } from '@storybook/react-vite' import { CampaignBanner } from './CampaignBanner' @@ -17,33 +16,35 @@ export default meta type Story = StoryObj export const Primary: Story = { - args: { - title: 'The Music Award for Indigenous, Black and Racialized Students', - content: ( - <> -

- The Music Award for Indigenous, Black and Racialized Students is awarded annually to a student who is entering - or continuing in the undergraduate Music program. -

- - ), - raised: 1349, - goal: 5000, - endDate: '2026-08-27', - tags: [ - { name: 'Music', link: 'https://example.com/music' }, - { name: 'Arts', link: 'https://example.com/arts' }, - ], - categories: [ - { name: 'Arts', link: 'https://example.com/environment' }, - { name: 'Arts & Social Sciences', link: 'https://example.com/science' }, - { name: 'Student Experience', link: 'https://example.com/student-experience' }, - { name: 'Scholarships', link: 'https://example.com/student-experience' }, - { name: 'Giving Day', link: 'https://example.com/student-experience' }, - { name: 'Healthcare', link: 'https://example.com/student-experience' }, - ], - }, + args: {}, render: (args) => { - return + return ( + + +

+ The Music Award for Indigenous, Black and Racialized Students is awarded annually to a student who is + entering or continuing in the undergraduate Music program. +

+ + + + + + + ) }, } diff --git a/lib/components/CampaignBanner/CampaignBanner.tsx b/lib/components/CampaignBanner/CampaignBanner.tsx index 0725f45a2..e0849ffbb 100644 --- a/lib/components/CampaignBanner/CampaignBanner.tsx +++ b/lib/components/CampaignBanner/CampaignBanner.tsx @@ -1,140 +1,28 @@ -import { Badge } from '../Badge/Badge' -import { ButtonGroup } from '../ButtonGroup/ButtonGroup' -import { PageHeader } from '../PageHeader/PageHeader' -import { ProgressBar } from '../ProgressBar/ProgressBar' -import { formatCurrency } from '../../helpers/formatCurrency' -import { Button } from '../Button/Button' -import React from 'react' -import { useLinkContext } from '../LinkProvider/useLinkContext' -import { Column } from '../../layouts/Column/Column' -import { Card } from '../Card/Card' +import { Children, isValidElement } from 'react' +import type { ReactNode } from 'react' +import { CampaignBannerContent } from './CampaignBannerContent' +import { CampaignBannerImage } from './CampaignBannerImage' +import { CampaignBannerStats } from './CampaignBannerStats' -export interface CampaignCategory { - name: string - link: string -} - -export interface CampaignTag { - name: string - link: string -} - -interface CampaignBannerProps { - title: string - content?: React.ReactNode - raised: number - goal: number - endDate: string - tags?: CampaignTag[] - categories?: CampaignCategory[] -} - -const parseDateLocal = (dateStr: string): Date => { - const [year, month, day] = dateStr.split('-').map(Number) - return new Date(year, month - 1, day) -} - -const getTimeRemainingLabel = (endDate: string): string => { - const daysLeft = Math.ceil((parseDateLocal(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 CampaignBanner = ({ title, content, raised, goal, endDate, categories, tags }: CampaignBannerProps) => { - const LinkComponent = useLinkContext() - const percent = goal > 0 ? Math.min(Math.round((raised / goal) * 100), 100) : 0 - const timeLabel = getTimeRemainingLabel(endDate) - - const StatData = [ - { - id: 'raised', - stat: formatCurrency(raised), - desc: 'Amount Raised', - }, - { - id: 'goal', - stat: formatCurrency(goal), - desc: 'Goal', - }, - { - id: 'goalReached', - stat: `${percent}%`, - desc: 'of Goal Reached', - }, - { - id: 'timeRemaining', - stat: getTimeRemainingLabel(endDate), - desc: 'Days Left', - }, - ] - - const tagNames = - tags && tags.length > 0 - ? tags.map((tag, index) => ( - <> - - {tag.name} - - {index < tags.length - 1 ? ', ' : null} - - )) - : '' +export const CampaignBannerWrapper = ({ children }: { children: ReactNode }) => { + const bannerChildren = Children.toArray(children) + const contentAndImage = bannerChildren.filter((child) => !isValidElement(child) || child.type !== CampaignBannerStats) + const stats = bannerChildren.filter((child) => isValidElement(child) && child.type === CampaignBannerStats) return ( -
+
-
- {/* Page Header */} - - {content} - - - {/* Categories */} - {categories && categories.length > 0 && ( -
- {categories.map((cat) => ( - - - - ))} -
- )} - - -
-
-
- {formatCurrency(raised)} - of {formatCurrency(goal)} -
-
- -
-

- {percent}% funded with {timeLabel} -

-
+ {contentAndImage}
- {/* Campaign bottom Section */} - - {StatData.slice(0, 4).map(({ id, stat, desc }) => ( - - - - ))} - + {stats}
) } -CampaignBanner.displayName = 'CampaignBanner' +export const CampaignBanner = Object.assign(CampaignBannerWrapper, { + Content: CampaignBannerContent, + Image: CampaignBannerImage, + Stats: CampaignBannerStats, +}) + +CampaignBannerWrapper.displayName = 'CampaignBanner' diff --git a/lib/components/CampaignBanner/CampaignBannerContent.tsx b/lib/components/CampaignBanner/CampaignBannerContent.tsx new file mode 100644 index 000000000..48a003ceb --- /dev/null +++ b/lib/components/CampaignBanner/CampaignBannerContent.tsx @@ -0,0 +1,74 @@ +import { Badge } from '../Badge/Badge' +import { ButtonGroup } from '../ButtonGroup/ButtonGroup' +import { PageHeader } from '../PageHeader/PageHeader' +import { Button } from '../Button/Button' +import React from 'react' +import { useLinkContext } from '../LinkProvider/useLinkContext' + +export interface CampaignCategory { + name: string + link: string +} + +export interface CampaignTag { + name: string + link: string +} + +interface CampaignBannerContentProps { + children?: React.ReactNode + title: string + tags?: CampaignTag[] + categories?: CampaignCategory[] +} + +export const CampaignBannerContent = ({ title, tags, categories, children }: CampaignBannerContentProps) => { + const LinkComponent = useLinkContext() + + const tagNames = + tags && tags.length > 0 + ? tags.map((tag, index) => ( + <> + + {tag.name} + + {index < tags.length - 1 ? ', ' : null} + + )) + : '' + + return ( +
+
+ {/* Page Header */} + + {children} + + + {/* Categories */} + {categories && categories.length > 0 && ( +
+ {categories.map((cat) => ( + + + + ))} +
+ )} + + +
+
+ ) +} + +CampaignBannerContent.displayName = 'CampaignBanner.Content' diff --git a/lib/components/CampaignBanner/CampaignBannerImage.tsx b/lib/components/CampaignBanner/CampaignBannerImage.tsx new file mode 100644 index 000000000..995e5bbaa --- /dev/null +++ b/lib/components/CampaignBanner/CampaignBannerImage.tsx @@ -0,0 +1,9 @@ +export interface CampaignBannerImageProps { + children: React.ReactNode +} + +export const CampaignBannerImage = ({ children }: CampaignBannerImageProps) => { + return
{children}
+} + +CampaignBannerImage.displayName = 'CampaignBanner.Image' diff --git a/lib/components/CampaignBanner/CampaignBannerStats.tsx b/lib/components/CampaignBanner/CampaignBannerStats.tsx new file mode 100644 index 000000000..d1e4782ce --- /dev/null +++ b/lib/components/CampaignBanner/CampaignBannerStats.tsx @@ -0,0 +1,62 @@ +import { formatCurrency } from '../../helpers/formatCurrency' +import { Column } from '../../layouts/Column/Column' +import { Card } from '../Card/Card' + +interface CampaignBannerStatsProps { + raised: number + goal: number + endDate: string +} + +const parseDateLocal = (dateStr: string): Date => { + const [year, month, day] = dateStr.split('-').map(Number) + return new Date(year, month - 1, day) +} + +const getTimeRemainingLabel = (endDate: string): string => { + const daysLeft = Math.ceil((parseDateLocal(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 CampaignBannerStats = ({ raised, goal, endDate }: CampaignBannerStatsProps) => { + const percent = goal > 0 ? Math.min(Math.round((raised / goal) * 100), 100) : 0 + + const StatData = [ + { + id: 'raised', + stat: formatCurrency(raised), + desc: 'Amount Raised', + }, + { + id: 'goal', + stat: formatCurrency(goal), + desc: 'Goal', + }, + { + id: 'goalReached', + stat: `${percent}%`, + desc: 'of Goal Reached', + }, + { + id: 'timeRemaining', + stat: getTimeRemainingLabel(endDate), + desc: 'Days Left', + }, + ] + + return ( +
+ + {StatData.slice(0, 4).map(({ id, stat, desc }) => ( + + + + ))} + +
+ ) +} + +CampaignBannerStats.displayName = 'CampaignBanner.Stats' diff --git a/lib/examples/projects/futurefunder/SingleProject.stories.tsx b/lib/examples/projects/futurefunder/SingleProject.stories.tsx index ff15c7a46..b7cc12c6a 100644 --- a/lib/examples/projects/futurefunder/SingleProject.stories.tsx +++ b/lib/examples/projects/futurefunder/SingleProject.stories.tsx @@ -48,13 +48,17 @@ export const SingleProject: Story = {
- + + + + {/*
Date: Thu, 1 Oct 2026 16:41:45 -0400 Subject: [PATCH 06/15] fixing layout --- .../CampaignBanner/CampaignBanner.stories.tsx | 12 ++--- .../CampaignBanner/CampaignBanner.tsx | 14 ++--- .../CampaignBanner/CampaignBannerContent.tsx | 52 +++++++++---------- .../CampaignBanner/CampaignBannerImage.tsx | 2 +- .../CampaignBanner/CampaignBannerStats.tsx | 2 +- lib/components/CampaignBanner/styles.css | 14 ++--- 6 files changed, 40 insertions(+), 56 deletions(-) diff --git a/lib/components/CampaignBanner/CampaignBanner.stories.tsx b/lib/components/CampaignBanner/CampaignBanner.stories.tsx index 9e62cfb65..2c8e0e698 100644 --- a/lib/components/CampaignBanner/CampaignBanner.stories.tsx +++ b/lib/components/CampaignBanner/CampaignBanner.stories.tsx @@ -27,12 +27,12 @@ export const Primary: Story = { { name: 'Arts', link: 'https://example.com/arts' }, ]} categories={[ - { name: 'Arts', link: 'https://example.com/environment' }, - { name: 'Arts & Social Sciences', link: 'https://example.com/science' }, + { name: 'Arts', link: 'https://example.com/arts' }, + { name: 'Arts & Social Sciences', link: 'https://example.com/arts-social-sciences' }, { name: 'Student Experience', link: 'https://example.com/student-experience' }, - { name: 'Scholarships', link: 'https://example.com/student-experience' }, - { name: 'Giving Day', link: 'https://example.com/student-experience' }, - { name: 'Healthcare', link: 'https://example.com/student-experience' }, + { name: 'Scholarships', link: 'https://example.com/scholarships' }, + { name: 'Giving Day', link: 'https://example.com/giving-day' }, + { name: 'Healthcare', link: 'https://example.com/healthcare' }, ]} >

@@ -41,7 +41,7 @@ export const Primary: Story = {

- + placeholder diff --git a/lib/components/CampaignBanner/CampaignBanner.tsx b/lib/components/CampaignBanner/CampaignBanner.tsx index e0849ffbb..de656678e 100644 --- a/lib/components/CampaignBanner/CampaignBanner.tsx +++ b/lib/components/CampaignBanner/CampaignBanner.tsx @@ -1,21 +1,13 @@ -import { Children, isValidElement } from 'react' import type { ReactNode } from 'react' import { CampaignBannerContent } from './CampaignBannerContent' import { CampaignBannerImage } from './CampaignBannerImage' import { CampaignBannerStats } from './CampaignBannerStats' export const CampaignBannerWrapper = ({ children }: { children: ReactNode }) => { - const bannerChildren = Children.toArray(children) - const contentAndImage = bannerChildren.filter((child) => !isValidElement(child) || child.type !== CampaignBannerStats) - const stats = bannerChildren.filter((child) => isValidElement(child) && child.type === CampaignBannerStats) - return ( -
-
- {contentAndImage} -
- {stats} -
+
+
{children}
+
) } diff --git a/lib/components/CampaignBanner/CampaignBannerContent.tsx b/lib/components/CampaignBanner/CampaignBannerContent.tsx index 48a003ceb..44d34f33b 100644 --- a/lib/components/CampaignBanner/CampaignBannerContent.tsx +++ b/lib/components/CampaignBanner/CampaignBannerContent.tsx @@ -38,35 +38,33 @@ export const CampaignBannerContent = ({ title, tags, categories, children }: Cam : '' return ( -
-
- {/* Page Header */} - - {children} - +
+ {/* Page Header */} + + {children} + - {/* Categories */} - {categories && categories.length > 0 && ( -
- {categories.map((cat) => ( - - - - ))} -
- )} + {/* Categories */} + {categories && categories.length > 0 && ( +
+ {categories.map((cat) => ( + + + + ))} +
+ )} - -
+ +
) } diff --git a/lib/components/CampaignBanner/CampaignBannerImage.tsx b/lib/components/CampaignBanner/CampaignBannerImage.tsx index 995e5bbaa..cc6436a95 100644 --- a/lib/components/CampaignBanner/CampaignBannerImage.tsx +++ b/lib/components/CampaignBanner/CampaignBannerImage.tsx @@ -3,7 +3,7 @@ export interface CampaignBannerImageProps { } export const CampaignBannerImage = ({ children }: CampaignBannerImageProps) => { - return
{children}
+ return
{children}
} CampaignBannerImage.displayName = 'CampaignBanner.Image' diff --git a/lib/components/CampaignBanner/CampaignBannerStats.tsx b/lib/components/CampaignBanner/CampaignBannerStats.tsx index d1e4782ce..ef3f8534b 100644 --- a/lib/components/CampaignBanner/CampaignBannerStats.tsx +++ b/lib/components/CampaignBanner/CampaignBannerStats.tsx @@ -47,7 +47,7 @@ export const CampaignBannerStats = ({ raised, goal, endDate }: CampaignBannerSta ] return ( -
+
{StatData.slice(0, 4).map(({ id, stat, desc }) => ( diff --git a/lib/components/CampaignBanner/styles.css b/lib/components/CampaignBanner/styles.css index e280bd3d8..3d35131fa 100644 --- a/lib/components/CampaignBanner/styles.css +++ b/lib/components/CampaignBanner/styles.css @@ -1,11 +1,5 @@ -.cu-campaign-banner p + .cu-badgegroup { - @apply pt-5; -} - -.cu-campaign-banner .cu-pageheader { - @apply mt-6 lg:mt-8; -} - -.cu-campaign-banner .cu-badgegroup:not(:first-child) { - @apply mt-4 lg:mt-6; +.cu-campaign-banner__image img { + object-fit: cover; + width: 100%; + height: 100%; } From 496b498de398cc8f098f195daf6f82b182a78ffc Mon Sep 17 00:00:00 2001 From: Bhoomi Pipalia Date: Thu, 1 Oct 2026 20:11:28 -0400 Subject: [PATCH 07/15] adding minor fixes to the layout --- .../CampaignBanner/CampaignBanner.stories.tsx | 56 ++++++------ .../CampaignBanner/CampaignBanner.tsx | 8 +- .../CampaignBanner/CampaignBannerContent.tsx | 2 +- .../CampaignBanner/CampaignBannerStats.tsx | 18 ++-- .../CampaignBanner/CampaignBannerTop.tsx | 13 +++ lib/components/CampaignBanner/styles.css | 22 +++++ .../futurefunder/SingleProject.stories.tsx | 86 ++++++++++--------- 7 files changed, 124 insertions(+), 81 deletions(-) create mode 100644 lib/components/CampaignBanner/CampaignBannerTop.tsx diff --git a/lib/components/CampaignBanner/CampaignBanner.stories.tsx b/lib/components/CampaignBanner/CampaignBanner.stories.tsx index 2c8e0e698..4d171561c 100644 --- a/lib/components/CampaignBanner/CampaignBanner.stories.tsx +++ b/lib/components/CampaignBanner/CampaignBanner.stories.tsx @@ -19,32 +19,36 @@ export const Primary: Story = { args: {}, render: (args) => { return ( - - -

- The Music Award for Indigenous, Black and Racialized Students is awarded annually to a student who is - entering or continuing in the undergraduate Music program. -

- - - placeholder - - - + <> + + + +

+ The Music Award for Indigenous, Black and Racialized Students is awarded annually to a student who is + entering or continuing in the undergraduate Music program. +

+ + + placeholder + + + + + ) }, } diff --git a/lib/components/CampaignBanner/CampaignBanner.tsx b/lib/components/CampaignBanner/CampaignBanner.tsx index de656678e..0e522ad01 100644 --- a/lib/components/CampaignBanner/CampaignBanner.tsx +++ b/lib/components/CampaignBanner/CampaignBanner.tsx @@ -2,16 +2,14 @@ import type { ReactNode } from 'react' import { CampaignBannerContent } from './CampaignBannerContent' import { CampaignBannerImage } from './CampaignBannerImage' import { CampaignBannerStats } from './CampaignBannerStats' +import { CampaignBannerTop } from './CampaignBannerTop' export const CampaignBannerWrapper = ({ children }: { children: ReactNode }) => { - return ( -
-
{children}
-
- ) + return
{children}
} export const CampaignBanner = Object.assign(CampaignBannerWrapper, { + Top: CampaignBannerTop, Content: CampaignBannerContent, Image: CampaignBannerImage, Stats: CampaignBannerStats, diff --git a/lib/components/CampaignBanner/CampaignBannerContent.tsx b/lib/components/CampaignBanner/CampaignBannerContent.tsx index 44d34f33b..85799ccee 100644 --- a/lib/components/CampaignBanner/CampaignBannerContent.tsx +++ b/lib/components/CampaignBanner/CampaignBannerContent.tsx @@ -38,7 +38,7 @@ export const CampaignBannerContent = ({ title, tags, categories, children }: Cam : '' return ( -
+
{/* Page Header */} {children} diff --git a/lib/components/CampaignBanner/CampaignBannerStats.tsx b/lib/components/CampaignBanner/CampaignBannerStats.tsx index ef3f8534b..4778e3351 100644 --- a/lib/components/CampaignBanner/CampaignBannerStats.tsx +++ b/lib/components/CampaignBanner/CampaignBannerStats.tsx @@ -47,14 +47,16 @@ export const CampaignBannerStats = ({ raised, goal, endDate }: CampaignBannerSta ] return ( -
- - {StatData.slice(0, 4).map(({ id, stat, desc }) => ( - - - - ))} - +
+
+ + {StatData.slice(0, 4).map(({ id, stat, desc }) => ( + + + + ))} + +
) } diff --git a/lib/components/CampaignBanner/CampaignBannerTop.tsx b/lib/components/CampaignBanner/CampaignBannerTop.tsx new file mode 100644 index 000000000..f2b1a0c56 --- /dev/null +++ b/lib/components/CampaignBanner/CampaignBannerTop.tsx @@ -0,0 +1,13 @@ +export interface CampaignBannerTopProps { + children: React.ReactNode +} + +export const CampaignBannerTop = ({ children }: CampaignBannerTopProps) => { + return ( +
+ {children} +
+ ) +} + +CampaignBannerTop.displayName = 'CampaignBanner.Top' diff --git a/lib/components/CampaignBanner/styles.css b/lib/components/CampaignBanner/styles.css index 3d35131fa..118992b79 100644 --- a/lib/components/CampaignBanner/styles.css +++ b/lib/components/CampaignBanner/styles.css @@ -1,5 +1,27 @@ +.cu-section > .cu-campaign-banner { + margin-top: -40px; + @apply -mt-6 lg:-mt-10; +} + +.cu-campaign-banner__image { + position: relative; +} + +.cu-campaign-banner__image:after { + content: ''; + display: block; + position: absolute; + top: 0; + right: 0; + width: calc(100% - 1024px / 2); + height: 100%; + background-image: linear-gradient(270deg, #191919, transparent); +} + .cu-campaign-banner__image img { object-fit: cover; width: 100%; height: 100%; + margin: 0; + border-radius: 0; } diff --git a/lib/examples/projects/futurefunder/SingleProject.stories.tsx b/lib/examples/projects/futurefunder/SingleProject.stories.tsx index b7cc12c6a..a5d572088 100644 --- a/lib/examples/projects/futurefunder/SingleProject.stories.tsx +++ b/lib/examples/projects/futurefunder/SingleProject.stories.tsx @@ -7,6 +7,7 @@ import { PageHeader } from '../../../components/PageHeader/PageHeader' import { Figure } from '../../../components/Figure/Figure' import { CampaignBanner } from '../../../components/CampaignBanner/CampaignBanner' import { NavButtonsData, NavFutureFunder } from '../../../data/NavData' +import { Section } from '../../../layouts/Section/Section' const meta: Meta = { title: 'Projects/FutureFunder', @@ -49,54 +50,57 @@ export const SingleProject: Story = {
- - + + +

+ The Music Award for Indigenous, Black and Racialized Students is awarded annually to a student who is + entering or continuing in the undergraduate Music program. +

+ + + placeholder + + + - - {/*
+
+ + +
Sample for figure stories file -
*/} - - - -
- Sample for figure stories file -
+
- - + + - - + + - - + + - -

The primary donation form would be placed here.

+ +

The primary donation form would be placed here.

+
From 027b173aac2fbbe378001d015b7990602ec793e3 Mon Sep 17 00:00:00 2001 From: Bhoomi Pipalia Date: Fri, 2 Oct 2026 09:06:03 -0400 Subject: [PATCH 08/15] adding more icons and updates stats cards --- .../CampaignBanner/CampaignBannerStats.tsx | 29 +++++++++++++------ public/assets/font-awesome/bullseye-arrow.svg | 1 + .../assets/font-awesome/database-regular.svg | 1 + public/assets/font-awesome/icon-list.js | 2 ++ 4 files changed, 24 insertions(+), 9 deletions(-) create mode 100644 public/assets/font-awesome/bullseye-arrow.svg create mode 100644 public/assets/font-awesome/database-regular.svg diff --git a/lib/components/CampaignBanner/CampaignBannerStats.tsx b/lib/components/CampaignBanner/CampaignBannerStats.tsx index 4778e3351..40de4ee73 100644 --- a/lib/components/CampaignBanner/CampaignBannerStats.tsx +++ b/lib/components/CampaignBanner/CampaignBannerStats.tsx @@ -1,6 +1,7 @@ import { formatCurrency } from '../../helpers/formatCurrency' import { Column } from '../../layouts/Column/Column' import { Card } from '../Card/Card' +import { Icon } from '../Icon' interface CampaignBannerStatsProps { raised: number @@ -17,7 +18,7 @@ const getTimeRemainingLabel = (endDate: string): string => { const daysLeft = Math.ceil((parseDateLocal(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` + return `${Math.max(daysLeft, 0)} days left` } export const CampaignBannerStats = ({ raised, goal, endDate }: CampaignBannerStatsProps) => { @@ -25,24 +26,24 @@ export const CampaignBannerStats = ({ raised, goal, endDate }: CampaignBannerSta const StatData = [ { - id: 'raised', + id: 'database-regular', stat: formatCurrency(raised), desc: 'Amount Raised', }, { - id: 'goal', + id: 'bullseye-arrow', stat: formatCurrency(goal), desc: 'Goal', }, { - id: 'goalReached', + id: 'file-chart-pie', stat: `${percent}%`, desc: 'of Goal Reached', + direction: 'bottom', }, { - id: 'timeRemaining', - stat: getTimeRemainingLabel(endDate), - desc: 'Days Left', + id: 'calendar-days', + stat: `${getTimeRemainingLabel(endDate)}`, }, ] @@ -50,9 +51,19 @@ export const CampaignBannerStats = ({ raised, goal, endDate }: CampaignBannerSta
- {StatData.slice(0, 4).map(({ id, stat, desc }) => ( + {StatData.slice(0, 4).map(({ id, stat, desc, direction }) => ( - +
+ +
+

{desc}

+

+ {stat} +

+
+
))} diff --git a/public/assets/font-awesome/bullseye-arrow.svg b/public/assets/font-awesome/bullseye-arrow.svg new file mode 100644 index 000000000..3165f38e6 --- /dev/null +++ b/public/assets/font-awesome/bullseye-arrow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/font-awesome/database-regular.svg b/public/assets/font-awesome/database-regular.svg new file mode 100644 index 000000000..575f56329 --- /dev/null +++ b/public/assets/font-awesome/database-regular.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/font-awesome/icon-list.js b/public/assets/font-awesome/icon-list.js index 107207dce..5e319f271 100644 --- a/public/assets/font-awesome/icon-list.js +++ b/public/assets/font-awesome/icon-list.js @@ -22,6 +22,7 @@ export const iconNames = [ { value: 'building-columns', label: 'Building columns' }, { value: 'building', label: 'Building' }, { value: 'bullhorn', label: 'Bullhorn' }, + { value: 'bullseye-arrow', label: 'Bullseye arrow' }, { value: 'bus', label: 'Bus' }, { value: 'calculator-simple', label: 'Calculator simple' }, { value: 'calculator', label: 'Calculator' }, @@ -71,6 +72,7 @@ export const iconNames = [ { value: 'computer', label: 'Computer' }, { value: 'court-sport', label: 'Court sport' }, { value: 'cubes-stacked', label: 'Cubes stacked' }, + { value: 'database-regular', label: 'Database regular' }, { value: 'display-chart-up-circle-dollar', label: 'Display chart up circle dollar' }, { value: 'dog', label: 'Dog' }, { value: 'dollar-sign', label: 'Dollar Sign' }, From f334e8b0c70b79546be37c3dd04cd391abdd6f61 Mon Sep 17 00:00:00 2001 From: Bhoomi Pipalia Date: Fri, 2 Oct 2026 10:57:34 -0400 Subject: [PATCH 09/15] adding export to the interfaces --- lib/components/CampaignBanner/CampaignBannerContent.tsx | 2 +- lib/components/CampaignBanner/CampaignBannerStats.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/components/CampaignBanner/CampaignBannerContent.tsx b/lib/components/CampaignBanner/CampaignBannerContent.tsx index 85799ccee..d6a5e9cec 100644 --- a/lib/components/CampaignBanner/CampaignBannerContent.tsx +++ b/lib/components/CampaignBanner/CampaignBannerContent.tsx @@ -15,7 +15,7 @@ export interface CampaignTag { link: string } -interface CampaignBannerContentProps { +export interface CampaignBannerContentProps { children?: React.ReactNode title: string tags?: CampaignTag[] diff --git a/lib/components/CampaignBanner/CampaignBannerStats.tsx b/lib/components/CampaignBanner/CampaignBannerStats.tsx index 40de4ee73..96524b17c 100644 --- a/lib/components/CampaignBanner/CampaignBannerStats.tsx +++ b/lib/components/CampaignBanner/CampaignBannerStats.tsx @@ -3,7 +3,7 @@ import { Column } from '../../layouts/Column/Column' import { Card } from '../Card/Card' import { Icon } from '../Icon' -interface CampaignBannerStatsProps { +export interface CampaignBannerStatsProps { raised: number goal: number endDate: string From 3e756addc706ff57917f997d8cbf4c830a61e331 Mon Sep 17 00:00:00 2001 From: Bhoomi Pipalia Date: Fri, 2 Oct 2026 10:59:50 -0400 Subject: [PATCH 10/15] removing the icons --- lib/components/CampaignBanner/CampaignBannerStats.tsx | 2 -- public/assets/font-awesome/bullseye-arrow.svg | 1 - public/assets/font-awesome/database-regular.svg | 1 - public/assets/font-awesome/icon-list.js | 2 -- 4 files changed, 6 deletions(-) delete mode 100644 public/assets/font-awesome/bullseye-arrow.svg delete mode 100644 public/assets/font-awesome/database-regular.svg diff --git a/lib/components/CampaignBanner/CampaignBannerStats.tsx b/lib/components/CampaignBanner/CampaignBannerStats.tsx index 96524b17c..cb58a9577 100644 --- a/lib/components/CampaignBanner/CampaignBannerStats.tsx +++ b/lib/components/CampaignBanner/CampaignBannerStats.tsx @@ -1,7 +1,6 @@ import { formatCurrency } from '../../helpers/formatCurrency' import { Column } from '../../layouts/Column/Column' import { Card } from '../Card/Card' -import { Icon } from '../Icon' export interface CampaignBannerStatsProps { raised: number @@ -54,7 +53,6 @@ export const CampaignBannerStats = ({ raised, goal, endDate }: CampaignBannerSta {StatData.slice(0, 4).map(({ id, stat, desc, direction }) => (
-
diff --git a/public/assets/font-awesome/bullseye-arrow.svg b/public/assets/font-awesome/bullseye-arrow.svg deleted file mode 100644 index 3165f38e6..000000000 --- a/public/assets/font-awesome/bullseye-arrow.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/assets/font-awesome/database-regular.svg b/public/assets/font-awesome/database-regular.svg deleted file mode 100644 index 575f56329..000000000 --- a/public/assets/font-awesome/database-regular.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/assets/font-awesome/icon-list.js b/public/assets/font-awesome/icon-list.js index 5e319f271..107207dce 100644 --- a/public/assets/font-awesome/icon-list.js +++ b/public/assets/font-awesome/icon-list.js @@ -22,7 +22,6 @@ export const iconNames = [ { value: 'building-columns', label: 'Building columns' }, { value: 'building', label: 'Building' }, { value: 'bullhorn', label: 'Bullhorn' }, - { value: 'bullseye-arrow', label: 'Bullseye arrow' }, { value: 'bus', label: 'Bus' }, { value: 'calculator-simple', label: 'Calculator simple' }, { value: 'calculator', label: 'Calculator' }, @@ -72,7 +71,6 @@ export const iconNames = [ { value: 'computer', label: 'Computer' }, { value: 'court-sport', label: 'Court sport' }, { value: 'cubes-stacked', label: 'Cubes stacked' }, - { value: 'database-regular', label: 'Database regular' }, { value: 'display-chart-up-circle-dollar', label: 'Display chart up circle dollar' }, { value: 'dog', label: 'Dog' }, { value: 'dollar-sign', label: 'Dollar Sign' }, From e25d9cfde1a03db8f90ef08b0f585147d0514714 Mon Sep 17 00:00:00 2001 From: Bhoomi Pipalia Date: Fri, 2 Oct 2026 11:13:27 -0400 Subject: [PATCH 11/15] adjusting the backgroung by adding grey to all the sections --- .../CampaignBanner/CampaignBanner.stories.tsx | 48 +++++++++---------- .../CampaignBanner/CampaignBanner.tsx | 8 ++-- .../CampaignBanner/CampaignBannerStats.tsx | 34 +++++++------ .../CampaignBanner/CampaignBannerTop.tsx | 13 ----- .../futurefunder/SingleProject.stories.tsx | 48 +++++++++---------- 5 files changed, 67 insertions(+), 84 deletions(-) delete mode 100644 lib/components/CampaignBanner/CampaignBannerTop.tsx diff --git a/lib/components/CampaignBanner/CampaignBanner.stories.tsx b/lib/components/CampaignBanner/CampaignBanner.stories.tsx index 4d171561c..078b3238d 100644 --- a/lib/components/CampaignBanner/CampaignBanner.stories.tsx +++ b/lib/components/CampaignBanner/CampaignBanner.stories.tsx @@ -21,31 +21,29 @@ export const Primary: Story = { return ( <> - - -

- The Music Award for Indigenous, Black and Racialized Students is awarded annually to a student who is - entering or continuing in the undergraduate Music program. -

- - - placeholder - - + +

+ The Music Award for Indigenous, Black and Racialized Students is awarded annually to a student who is + entering or continuing in the undergraduate Music program. +

+ + + placeholder + diff --git a/lib/components/CampaignBanner/CampaignBanner.tsx b/lib/components/CampaignBanner/CampaignBanner.tsx index 0e522ad01..7de7d8a2a 100644 --- a/lib/components/CampaignBanner/CampaignBanner.tsx +++ b/lib/components/CampaignBanner/CampaignBanner.tsx @@ -2,14 +2,16 @@ import type { ReactNode } from 'react' import { CampaignBannerContent } from './CampaignBannerContent' import { CampaignBannerImage } from './CampaignBannerImage' import { CampaignBannerStats } from './CampaignBannerStats' -import { CampaignBannerTop } from './CampaignBannerTop' export const CampaignBannerWrapper = ({ children }: { children: ReactNode }) => { - return
{children}
+ return ( +
+ {children} +
+ ) } export const CampaignBanner = Object.assign(CampaignBannerWrapper, { - Top: CampaignBannerTop, Content: CampaignBannerContent, Image: CampaignBannerImage, Stats: CampaignBannerStats, diff --git a/lib/components/CampaignBanner/CampaignBannerStats.tsx b/lib/components/CampaignBanner/CampaignBannerStats.tsx index cb58a9577..30fcdda0c 100644 --- a/lib/components/CampaignBanner/CampaignBannerStats.tsx +++ b/lib/components/CampaignBanner/CampaignBannerStats.tsx @@ -47,25 +47,23 @@ export const CampaignBannerStats = ({ raised, goal, endDate }: CampaignBannerSta ] return ( -
-
- - {StatData.slice(0, 4).map(({ id, stat, desc, direction }) => ( - -
-
-

{desc}

-

- {stat} -

-
+
+ + {StatData.slice(0, 4).map(({ id, stat, desc, direction }) => ( + +
+
+

{desc}

+

+ {stat} +

- - ))} - -
+
+ + ))} +
) } diff --git a/lib/components/CampaignBanner/CampaignBannerTop.tsx b/lib/components/CampaignBanner/CampaignBannerTop.tsx deleted file mode 100644 index f2b1a0c56..000000000 --- a/lib/components/CampaignBanner/CampaignBannerTop.tsx +++ /dev/null @@ -1,13 +0,0 @@ -export interface CampaignBannerTopProps { - children: React.ReactNode -} - -export const CampaignBannerTop = ({ children }: CampaignBannerTopProps) => { - return ( -
- {children} -
- ) -} - -CampaignBannerTop.displayName = 'CampaignBanner.Top' diff --git a/lib/examples/projects/futurefunder/SingleProject.stories.tsx b/lib/examples/projects/futurefunder/SingleProject.stories.tsx index a5d572088..1b38e98a5 100644 --- a/lib/examples/projects/futurefunder/SingleProject.stories.tsx +++ b/lib/examples/projects/futurefunder/SingleProject.stories.tsx @@ -50,31 +50,29 @@ export const SingleProject: Story = {
- - -

- The Music Award for Indigenous, Black and Racialized Students is awarded annually to a student who is - entering or continuing in the undergraduate Music program. -

- - - placeholder - - + +

+ The Music Award for Indigenous, Black and Racialized Students is awarded annually to a student who is + entering or continuing in the undergraduate Music program. +

+ + + placeholder +
From 5aa4feadbfee431037fa11baac659d01cc65151f Mon Sep 17 00:00:00 2001 From: Bhoomi Pipalia Date: Fri, 2 Oct 2026 11:16:57 -0400 Subject: [PATCH 12/15] remove icons and used stats cards to banner --- .../CampaignBanner/CampaignBannerStats.tsx | 22 +++++++------------ 1 file changed, 8 insertions(+), 14 deletions(-) diff --git a/lib/components/CampaignBanner/CampaignBannerStats.tsx b/lib/components/CampaignBanner/CampaignBannerStats.tsx index 30fcdda0c..37cebe35e 100644 --- a/lib/components/CampaignBanner/CampaignBannerStats.tsx +++ b/lib/components/CampaignBanner/CampaignBannerStats.tsx @@ -38,30 +38,24 @@ export const CampaignBannerStats = ({ raised, goal, endDate }: CampaignBannerSta id: 'file-chart-pie', stat: `${percent}%`, desc: 'of Goal Reached', - direction: 'bottom', + reverse: true, }, { id: 'calendar-days', stat: `${getTimeRemainingLabel(endDate)}`, + desc: '', }, ] return (
- {StatData.slice(0, 4).map(({ id, stat, desc, direction }) => ( - -
-
-

{desc}

-

- {stat} -

-
-
- + {StatData.slice(0, 4).map(({ id, stat, desc, reverse }) => ( + <> + + + + ))}
From 0e098e9b050fa4db038dd813149a83f36709e630 Mon Sep 17 00:00:00 2001 From: Bhoomi Pipalia Date: Fri, 2 Oct 2026 11:17:49 -0400 Subject: [PATCH 13/15] remove solid red badge --- lib/components/Badge/Badge.tsx | 2 +- lib/components/Badge/styles.css | 4 ---- 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/lib/components/Badge/Badge.tsx b/lib/components/Badge/Badge.tsx index a403f0b3c..615e82629 100644 --- a/lib/components/Badge/Badge.tsx +++ b/lib/components/Badge/Badge.tsx @@ -7,7 +7,7 @@ export interface BadgeProps { text: string link?: string rounded?: borderRadiusKeys - color?: 'grey' | 'white' | 'black80' | 'white80' | 'green' | 'red' | 'red-solid' | 'yellow' | 'blue' | 'purple' + color?: 'grey' | 'white' | 'black80' | 'white80' | 'green' | 'red' | 'yellow' | 'blue' | 'purple' noWordBreak?: boolean } diff --git a/lib/components/Badge/styles.css b/lib/components/Badge/styles.css index a863fc0b2..c67bc47b9 100644 --- a/lib/components/Badge/styles.css +++ b/lib/components/Badge/styles.css @@ -14,10 +14,6 @@ @apply bg-red-50 text-red-800; } -.cu-badge--red-solid { - @apply bg-cu-red text-white; -} - .cu-badge--yellow { @apply bg-yellow-50 text-yellow-800; } From 0e722b9c10589a9626eaa1cf137753eb617f3755 Mon Sep 17 00:00:00 2001 From: Bhoomi Pipalia Date: Fri, 2 Oct 2026 11:19:52 -0400 Subject: [PATCH 14/15] adding changelog --- CHANGELOG.mdx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/CHANGELOG.mdx b/CHANGELOG.mdx index 3742cc6c8..226346114 100644 --- a/CHANGELOG.mdx +++ b/CHANGELOG.mdx @@ -17,6 +17,10 @@ Prefix the change with one of these keywords: ## [Unreleased] +### Changed + +- New campaign banner + ## [0.29.4] ### Added From 106ea0e692748dad981e4360b03d1ade5c578b54 Mon Sep 17 00:00:00 2001 From: Bhoomi Pipalia Date: Fri, 2 Oct 2026 11:28:40 -0400 Subject: [PATCH 15/15] adding minor adjustment to the banner --- lib/components/CampaignBanner/CampaignBanner.stories.tsx | 2 +- lib/components/CampaignBanner/styles.css | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/lib/components/CampaignBanner/CampaignBanner.stories.tsx b/lib/components/CampaignBanner/CampaignBanner.stories.tsx index 078b3238d..138a0027d 100644 --- a/lib/components/CampaignBanner/CampaignBanner.stories.tsx +++ b/lib/components/CampaignBanner/CampaignBanner.stories.tsx @@ -44,7 +44,7 @@ export const Primary: Story = { placeholder - + ) diff --git a/lib/components/CampaignBanner/styles.css b/lib/components/CampaignBanner/styles.css index 118992b79..39dc751fc 100644 --- a/lib/components/CampaignBanner/styles.css +++ b/lib/components/CampaignBanner/styles.css @@ -5,6 +5,7 @@ .cu-campaign-banner__image { position: relative; + background-color: #191919; } .cu-campaign-banner__image:after {