diff --git a/CHANGELOG.mdx b/CHANGELOG.mdx index 3f8b69655..cbcd2f184 100644 --- a/CHANGELOG.mdx +++ b/CHANGELOG.mdx @@ -21,6 +21,10 @@ Prefix the change with one of these keywords: ### Added +- No image prop added and added few new styles to the card with no image + +### Added + - Card animations in lieu of hover scale ## [0.26.8] diff --git a/docs/motion-enhancement-plan.md b/docs/motion-enhancement-plan.md index a20004c09..efcf9c5ec 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/components/Card/Card.tsx b/lib/components/Card/Card.tsx index 6634bffcf..16a06c8c8 100644 --- a/lib/components/Card/Card.tsx +++ b/lib/components/Card/Card.tsx @@ -23,6 +23,7 @@ export interface CardProps { isCenter?: boolean isCenterDesktop?: boolean noHover?: boolean + noImage?: boolean leftBorder?: boolean isDark?: boolean revealOnScroll?: boolean @@ -35,6 +36,7 @@ export const CardWrapper = ({ isCenterDesktop, isCenter, noHover, + noImage, leftBorder, isDark, revealOnScroll = true, @@ -47,13 +49,14 @@ export const CardWrapper = ({ const centerTextDesktop = isCenterDesktop ? 'md:text-center' : '' const hoverStyles = noHover ? '' : 'group hover:shadow-cu-black-200 dark:hover:shadow-none' const addRedBorder = leftBorder ? 'border-l-8 border-l-cu-red' : '' + const noImageStyles = noImage ? 'cu-card--no-image' : '' return (
{children} diff --git a/lib/components/Card/Examples.stories.tsx b/lib/components/Card/Examples.stories.tsx index 4b281e72a..c15681dac 100644 --- a/lib/components/Card/Examples.stories.tsx +++ b/lib/components/Card/Examples.stories.tsx @@ -164,6 +164,43 @@ export const LayoutExamples: Story = { )} + + + {EventData.slice(0, 3).map( + ({ + id, + title, + link, + startDate, + endDate, + on_campus, + on_campus_building, + on_campus_room_number, + event_address, + }) => ( + + + + + + + + + More info + + + + ), + )} + + diff --git a/lib/components/Card/styles.css b/lib/components/Card/styles.css index 17e0bf7af..06a40de7c 100644 --- a/lib/components/Card/styles.css +++ b/lib/components/Card/styles.css @@ -98,6 +98,14 @@ @apply mx-auto h-32 w-32 rounded-full border-4 border-white object-cover shadow-md @sm:md:h-48 @sm:md:w-48; } +/* No image variant */ +.cu-card.cu-card--no-image > h2, +.cu-card.cu-card--no-image > h3 { + margin-top: 1.25rem !important; + background-color: theme('colors.cu-black.50') !important; + box-shadow: none !important; +} + .cu-card-button a { @apply gap-1 p-3 text-sm font-medium rounded-md md:px-6; }