From 8e44811c55a3815bb03fe0464dd8fcbe4568e1e3 Mon Sep 17 00:00:00 2001 From: troychaplin Date: Fri, 5 Jun 2026 14:08:53 -0400 Subject: [PATCH 1/2] fix: formatting --- .storybook/preview.ts | 11 +- docs/motion-enhancement-plan.md | 32 +- .../futurefunder/BrowseProjects.stories.tsx | 107 + .../futurefunder/Homepage.stories.tsx | 80 +- ....stories.tsx => SingleProject.stories.tsx} | 2 +- package-lock.json | 4953 +++++++++++------ public/assets/json/videoBanner.json | 2 +- public/assets/json/videoSplash.json | 2 +- 8 files changed, 3517 insertions(+), 1672 deletions(-) create mode 100644 lib/examples/projects/futurefunder/BrowseProjects.stories.tsx rename lib/examples/projects/futurefunder/{ProjectLayout.stories.tsx => SingleProject.stories.tsx} (98%) diff --git a/.storybook/preview.ts b/.storybook/preview.ts index fd11e5f76..542dfebcc 100644 --- a/.storybook/preview.ts +++ b/.storybook/preview.ts @@ -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', diff --git a/docs/motion-enhancement-plan.md b/docs/motion-enhancement-plan.md index efcf9c5ec..a20004c09 100644 --- a/docs/motion-enhancement-plan.md +++ b/docs/motion-enhancement-plan.md @@ -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 `` `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 `` `showModal()`) | `lib/components/Dialog/Dialog.tsx:21` | Same — no entrance/exit | ### 2.2 What's missing diff --git a/lib/examples/projects/futurefunder/BrowseProjects.stories.tsx b/lib/examples/projects/futurefunder/BrowseProjects.stories.tsx new file mode 100644 index 000000000..bfa50bcd9 --- /dev/null +++ b/lib/examples/projects/futurefunder/BrowseProjects.stories.tsx @@ -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: () => ( + <> + + +
+
+ +
+ +
+ + + + + + {NewsData.slice(0, 8).map(({ id, link, title, image, alt, date }) => ( + + + {alt} + + + + + + + + Read more + + + + ))} + + undefined} + callbackPage={() => undefined} + /> +
+ +
+ + + + + + + + + + + + + + +
+
+ + + + ), +} diff --git a/lib/examples/projects/futurefunder/Homepage.stories.tsx b/lib/examples/projects/futurefunder/Homepage.stories.tsx index eb5abee0b..7255196f3 100644 --- a/lib/examples/projects/futurefunder/Homepage.stories.tsx +++ b/lib/examples/projects/futurefunder/Homepage.stories.tsx @@ -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' @@ -31,7 +31,7 @@ export const Homepage: Story = { <>