Skip to content

Change/futurefunder layouts #560

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
troychaplin merged 2 commits into from
Jun 5, 2026
Merged

Change/futurefunder layouts #560

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8e44811
fix: formatting
troychaplin Jun 5, 2026
bb39f41
change: video json
troychaplin Jun 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 9 additions & 2 deletions .storybook/preview.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,19 @@ const preview: Preview = {
options: {
storySort: {
method: 'alphabetical',
includeNames: true,
order: [
'Get Started',
['Introduction', 'Changelog'],
'Projects',
['cutheme'],
['Event Calendar'],
[
'cutheme',
['Homepage', 'Page Layout', 'Post Layout', 'Graduate Program'],
'Event Calendar',
['Homepage', 'Single Event'],
'FutureFunder',
['Homepage', 'Browse Projects', 'Single Project'],
],
'Prototypes',
['Layouts'],
'Components',
Expand Down
32 changes: 16 additions & 16 deletions docs/motion-enhancement-plan.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,23 +60,23 @@ This plan proposes a cohesive motion-and-interactivity layer for RDS. It is an _

### 2.1 Motion already in the codebase

| Component | Motion present | File:line | Notes |
| -------------------------------------- | --------------------------------------------------- | --------------------------------------------------------------------------- | ---------------------------------------------------------------- |
| Card | hover scale (1.02) + shadow | `lib/components/Card/Card.tsx:45` | `duration-300 ease-in`. No `motion-reduce` |
| Toast | slide-in + fade, JS removal after 200 ms | `lib/components/Toast/Toast.tsx:48,57` | Hard-coded timeout couples JS to CSS |
| Nav | header hide-on-scroll | `lib/components/Nav/Nav.tsx:28`, `scrollingNav.ts:12-32` | Unthrottled scroll listener; no `motion-reduce` |
| Nav | item color transitions, arrow rotation | `lib/components/Nav/Nav.Styles.ts:8-13`, `priority-plus.css:17,60` | No `motion-reduce` |
| Component | Motion present | File:line | Notes |
| -------------------------------------- | -------------------------------------------------- | --------------------------------------------------------------------------- | ---------------------------------------------------------------- |
| Card | hover scale (1.02) + shadow | `lib/components/Card/Card.tsx:45` | `duration-300 ease-in`. No `motion-reduce` |
| Toast | slide-in + fade, JS removal after 200 ms | `lib/components/Toast/Toast.tsx:48,57` | Hard-coded timeout couples JS to CSS |
| Nav | header hide-on-scroll | `lib/components/Nav/Nav.tsx:28`, `scrollingNav.ts:12-32` | Unthrottled scroll listener; no `motion-reduce` |
| Nav | item color transitions, arrow rotation | `lib/components/Nav/Nav.Styles.ts:8-13`, `priority-plus.css:17,60` | No `motion-reduce` |
| Description | accordion icon rotation (`rotate-0` ↔ `rotate-90`) | `lib/components/Description/DescriptionAccordion.tsx:27`, `script.ts` | Content shows/hides via `hidden` attribute — no height animation |
| FilterPanel | dropdown arrow rotation + color | `lib/components/FilterPanel/FilterPanelTop.tsx:34`, `dropdown.ts:66,88,141` | No `motion-reduce` |
| ProgressBar | width fill animation | `lib/components/ProgressBar/ProgressBar.tsx:31-32` | `transition-all duration-1000` — animates `width` (H3 violation) |
| ImageSlider | carousel slide (inline `transform 0.5s`) | `lib/components/ImageSlider/script.ts:78-113` | JS-set transitions; 50 ms timeouts to sequence phases |
| ImageSlider item | 5 s background-image transition | `lib/components/ImageSlider/ImageSliderItem.tsx:31` | `duration-[5000]`. Borderline H6 |
| Loaders (21+) | `animate-pulse` skeletons | `lib/components/Loaders/**` | None opt into `motion-reduce` (Tailwind does NOT auto-disable) |
| PageLoader | `animate-spin` + slowed-spin under reduced-motion | `lib/components/Loaders/PageLoader/PageLoader.tsx:5` | **Only** component currently honouring reduced-motion |
| TopNavLoader | `animate-spin` | `lib/components/Loaders/TopNavLoader/TopNavLoader.tsx:6` | No `motion-reduce` |
| Splash / FullBanner / WideBanner video | `autoPlay muted loop playsInline` | `lib/hooks/useVideoBanner.tsx:39-41` | Loops indefinitely. No pause control. **H6 risk.** |
| Modal | none (snap `block`/`hidden`) | `lib/components/Modal/Modal.tsx:129` | Open/close is instant — felt jarring per typical UX |
| Dialog | none (uses native `<dialog>` `showModal()`) | `lib/components/Dialog/Dialog.tsx:21` | Same — no entrance/exit |
| FilterPanel | dropdown arrow rotation + color | `lib/components/FilterPanel/FilterPanelTop.tsx:34`, `dropdown.ts:66,88,141` | No `motion-reduce` |
| ProgressBar | width fill animation | `lib/components/ProgressBar/ProgressBar.tsx:31-32` | `transition-all duration-1000` — animates `width` (H3 violation) |
| ImageSlider | carousel slide (inline `transform 0.5s`) | `lib/components/ImageSlider/script.ts:78-113` | JS-set transitions; 50 ms timeouts to sequence phases |
| ImageSlider item | 5 s background-image transition | `lib/components/ImageSlider/ImageSliderItem.tsx:31` | `duration-[5000]`. Borderline H6 |
| Loaders (21+) | `animate-pulse` skeletons | `lib/components/Loaders/**` | None opt into `motion-reduce` (Tailwind does NOT auto-disable) |
| PageLoader | `animate-spin` + slowed-spin under reduced-motion | `lib/components/Loaders/PageLoader/PageLoader.tsx:5` | **Only** component currently honouring reduced-motion |
| TopNavLoader | `animate-spin` | `lib/components/Loaders/TopNavLoader/TopNavLoader.tsx:6` | No `motion-reduce` |
| Splash / FullBanner / WideBanner video | `autoPlay muted loop playsInline` | `lib/hooks/useVideoBanner.tsx:39-41` | Loops indefinitely. No pause control. **H6 risk.** |
| Modal | none (snap `block`/`hidden`) | `lib/components/Modal/Modal.tsx:129` | Open/close is instant — felt jarring per typical UX |
| Dialog | none (uses native `<dialog>` `showModal()`) | `lib/components/Dialog/Dialog.tsx:21` | Same — no entrance/exit |

### 2.2 What's missing

Expand Down
107 changes: 107 additions & 0 deletions lib/examples/projects/futurefunder/BrowseProjects.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
import React from 'react'
import type { Meta, StoryObj } from '@storybook/react-vite'
import { Main } from '../../../layouts/Main/Main'
import { Section } from '../../../layouts/Section/Section'
import { Column } from '../../../layouts/Column/Column'
import { FooterStandard } from '../../../components/Footer/FooterStandard/FooterStandard'
import { Nav } from '../../../components/Nav/Nav'
import { Card } from '../../../components/Card/Card'
import { FilterPanel } from '../../../components/FilterPanel/FilterPanel'
import { WideImage } from '../../../components/WideImage/WideImage'
import { Pagination } from '../../../components/Pagination/Pagination'

import { NavButtonsData, NavFutureFunder } from '../../../data/NavData'
import { FilterPanelData } from '../../../data/FilterData'
import { NewsData } from '../../../data/NewsData'

const meta: Meta = {
title: 'Projects/FutureFunder',
parameters: {
layout: 'fullscreen',
},
}

export default meta
type Story = StoryObj

export const BrowseProjects: Story = {
render: () => (
<>
<Nav>
<Nav.Top>
<Nav.Logo title="FutureFunder" link="https://futurefunder.carleton.ca" />
<Nav.Buttons menu={NavButtonsData} isSearch onClickSearch={() => {}} />
</Nav.Top>
<Nav.Bottom>
<Nav.Menu menu={NavFutureFunder} />
<Nav.Buttons menu={NavButtonsData} isSearch onClickSearch={() => {}} />
</Nav.Bottom>
</Nav>

<Main>
<Section maxWidth="7xl">
<WideImage
focalPointX={50}
focalPointY={50}
headerType="h1"
isType="image"
opacity={60}
title="Browse the Campaigns"
image="https://picsum.photos/id/381/1920/840"
/>
</Section>

<Section maxWidth="7xl">
<FilterPanel>
<FilterPanel.Top sortOptions={FilterPanelData.sortOptions} filterOptions={FilterPanelData.filters} />
<FilterPanel.Bottom />
</FilterPanel>
<Column cols="4">
{NewsData.slice(0, 8).map(({ id, link, title, image, alt, date }) => (
<Card key={id}>
<Card.Figure>
<img src={image} alt={alt} width="400" height="300" />
</Card.Figure>
<Card.Header title={title} date={date} />
<Card.Body>
<Card.Excerpt text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pharetra laoreet lobortis. In hac habitasse platea dictumst. Nulla porta posuere est, aliquam mollis mi accumsan id. Morbi mauris ex, gravida eu sodales sed, tempor vel mauris." />
</Card.Body>
<Card.Footer>
<a href={link} className="cu-button cu-button--red cu-button--small">
Read more
</a>
</Card.Footer>
</Card>
))}
</Column>
<Pagination
totalCount={48}
siblingCount={1}
pageSize={5}
callback={() => undefined}
callbackPage={() => undefined}
/>
</Section>

<Section maxWidth="7xl" isGrey>
<Column cols="4">
<Card leftBorder noHover>
<Card.Stats desc="Student Population" stat="30,500+" />
</Card>
<Card leftBorder noHover>
<Card.Stats desc="Clubs & Societies" stat="170+" />
</Card>
<Card leftBorder noHover>
<Card.Stats desc="Scholarships & Bursaries" stat="85.4 M+" />
</Card>
<Card leftBorder noHover>
<Card.Stats desc="Research Funding" stat="$116 M" />
</Card>
</Column>
</Section>
</Main>

<FooterStandard />
</>
),
}
80 changes: 30 additions & 50 deletions lib/examples/projects/futurefunder/Homepage.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import React from 'react'
import type { Meta, StoryObj } from '@storybook/react-vite'
import { Main } from '../../../layouts/Main/Main'
import { FooterDept } from '../../../components/Footer/FooterDept/FooterDept'
import { Nav } from '../../../components/Nav/Nav'
import { PageHeader } from '../../../components/PageHeader/PageHeader'
import { FullBanner } from '../../../components/FullBanner/FullBanner'
import { CallOut } from '../../../components/CallOut/CallOut'
import { ButtonGroup } from '../../../components/ButtonGroup/ButtonGroup'
import { Button } from '../../../components/Button/Button'
import { Column } from '../../../layouts/Column/Column'
Expand All @@ -31,7 +31,7 @@ export const Homepage: Story = {
<>
<Nav>
<Nav.Top>
<Nav.Logo title="FutureFunder" link="https://graduate.carleton.ca" />
<Nav.Logo title="FutureFunder" link="https://futurefunder.carleton.ca" />
<Nav.Buttons menu={NavButtonsData} isSearch onClickSearch={() => {}} />
</Nav.Top>
<Nav.Bottom>
Expand All @@ -43,7 +43,7 @@ export const Homepage: Story = {
<Main>
<FullBanner>
<FullBanner.Image>
<img alt="Top down view of a desk" src="https://picsum.photos/id/565/1920/840" />
<img alt="Top down view of a desk" src="https://picsum.photos/id/566/1920/840" />
</FullBanner.Image>
<FullBanner.Content headerType="h1" title="Welcome to the FutureFunder">
<p>Your platform to make lasting change through higher education!</p>
Expand All @@ -54,7 +54,7 @@ export const Homepage: Story = {
</FullBanner.Content>
</FullBanner>

<Section maxWidth="7xl" isGrey>
<Section maxWidth="7xl">
<PageHeader as="h2" header="Featured Campaigns" size="md" />
<Column cols="4">
{NewsData.slice(0, 8).map(({ id, title, link, image, alt }) => (
Expand All @@ -71,59 +71,39 @@ export const Homepage: Story = {
</Column>
</Section>

<Section>
<PageHeader as="h2" header="Why Give?" size="md" isCenter />
<Column cols="2">
<Column.Content>
<p>
Since its founding moments Carleton has had a mandate to serve the community, providing citizens with
education, knowledge and opportunity. This mandate defines our promise to you as a supporter. We are
Here for Good.
</p>
</Column.Content>
<Column.Content>
<p>
Your gift to Carleton brings real change to your community. If you share our conviction that there are
good things to be done, we could use your help. Collaborate with us and do good things for the world.
</p>
</Column.Content>
</Column>
<CallOut justify="center" maxWidth="4xl" title="Open House">
<p>
Since its founding moments Carleton has had a mandate to serve the community, providing citizens with
education, knowledge and opportunity. This mandate defines our promise to you as a supporter. We are Here
for Good.
</p>
<p>
Your gift to Carleton brings real change to your community. If you share our conviction that there are
good things to be done, we could use your help. Collaborate with us and do good things for the world.
</p>
<ButtonGroup align="center" gap="5">
<Button onClick={() => {}} title="Learn More" />
</ButtonGroup>
</Section>
</CallOut>

<Section isGrey>
<PageHeader
as="h2"
header="Browse by Department"
size="md"
content="Add design for browsing by category."
isCenter
/>
<Section maxWidth="7xl" isGrey>
<Column cols="4">
<Card leftBorder noHover>
<Card.Stats desc="Student Population" stat="30,500+" />
</Card>
<Card leftBorder noHover>
<Card.Stats desc="Clubs & Societies" stat="170+" />
</Card>
<Card leftBorder noHover>
<Card.Stats desc="Scholarships & Bursaries" stat="85.4 M+" />
</Card>
<Card leftBorder noHover>
<Card.Stats desc="Research Funding" stat="$116 M" />
</Card>
</Column>
</Section>
</Main>

<FooterDept
buildingName="Pigiarvik (ᐱᒋᐊᕐᕕᒃ)"
deptName="Information Technology Services"
email="noreply@carleton.ca"
footerButtons={[
{
id: 1,
title: 'Contact support',
url: '#',
},
{
id: 2,
title: 'Recent alerts',
url: '#',
},
]}
officeNumber="400"
phone="613-520-2600"
/>

<FooterStandard />
<FooterCookie />
</>
Expand Down
2 changes: 1 addition & 1 deletion ...ts/futurefunder/ProjectLayout.stories.tsx → ...ts/futurefunder/SingleProject.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ const SinglePara = () => {
)
}

export const ProjectLayout: Story = {
export const SingleProject: Story = {
render: () => (
<>
<Nav>
Expand Down
Loading
Loading