feat: create BlockCollection/GridCollections

[Sveb]

Connected to APPS-

Component Created: {filename}.vue
Component Created: {filename}.vue

Stories: ~/stories/BlockCollection.stories.js
Spec: ~/stories/GridCollections.spec.js

Notes:

• Creates the collection block and grid collections components.

Screenshots

Checklist:

• I checked that it is working locally in the dev server
• I checked that it is working locally in the storybook
• I checked that it is working locally in the
  library-website-nuxt dev server
• I added a screenshot of it working
• UX has reviewed and approved this
• I assigned this PR to someone on the dev team to review
• I used a conventional commit message
• I assigned myself to this PR

[Copilot]

Pull Request Overview

This PR introduces two new Vue components for displaying collections: a BlockCollection component for individual collection items and a GridCollections component that renders multiple collections in a responsive grid layout. The components support displaying collection metadata including images, titles, and descriptions with hover interactions.

• Creates BlockCollection component for individual collection display with responsive images and hover effects
• Creates GridCollections component for grid-based collection layouts with responsive breakpoints
• Adds Storybook stories with test data including edge cases for long text content

Reviewed Changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 5 comments.

File	Description
BlockCollection.vue	Individual collection block component with image, title, description and smart link functionality
GridCollections.vue	Grid container component that renders multiple BlockCollection components in a responsive layout
BlockCollection.stories.ts	Storybook stories for BlockCollection with default and long text scenarios
GridCollections.stories.ts	Storybook stories for GridCollections with multiple test scenarios

Comments suppressed due to low confidence (1)

[Copilot]

Duplicate ID 'collection-1' found in the defaultItems array. This creates two items with the same ID, which violates the uniqueness requirement for component keys and could cause rendering issues.

Suggested change

	id: 'collection-1',
	href: 'https://www.example.com/1',
	image: baseImage,
	title: 'Rare Books',
	description: 'A curated selection of rare and antique books from our archives.'
	},
	{
	id: 'collection-2',
	href: 'https://www.example.com/2',
	image: baseImage,
	title: 'Historical Photos',
	description: 'Photographs documenting Los Angeles history from the 19th and 20th centuries.'
	},
	{
	id: 'collection-3',
	id: 'collection-4',
	href: 'https://www.example.com/1',
	image: baseImage,
	title: 'Rare Books',
	description: 'A curated selection of rare and antique books from our archives.'
	},
	{
	id: 'collection-5',
	href: 'https://www.example.com/2',
	image: baseImage,
	title: 'Historical Photos',
	description: 'Photographs documenting Los Angeles history from the 19th and 20th centuries.'
	},
	{
	id: 'collection-6',

[Copilot]

Duplicate ID 'collection-2' found in the defaultItems array. This creates two items with the same ID, which violates the uniqueness requirement for component keys and could cause rendering issues.

Suggested change

	id: 'collection-1',
	href: 'https://www.example.com/1',
	image: baseImage,
	title: 'Rare Books',
	description: 'A curated selection of rare and antique books from our archives.'
	},
	{
	id: 'collection-2',
	href: 'https://www.example.com/2',
	image: baseImage,
	title: 'Historical Photos',
	description: 'Photographs documenting Los Angeles history from the 19th and 20th centuries.'
	},
	{
	id: 'collection-3',
	id: 'collection-4',
	href: 'https://www.example.com/1',
	image: baseImage,
	title: 'Rare Books',
	description: 'A curated selection of rare and antique books from our archives.'
	},
	{
	id: 'collection-5',
	href: 'https://www.example.com/2',
	image: baseImage,
	title: 'Historical Photos',
	description: 'Photographs documenting Los Angeles history from the 19th and 20th centuries.'
	},
	{
	id: 'collection-6',

[Copilot]

Duplicate ID 'collection-3' found in the defaultItems array. This creates two items with the same ID, which violates the uniqueness requirement for component keys and could cause rendering issues.

Suggested change

	id: 'collection-1',
	href: 'https://www.example.com/1',
	image: baseImage,
	title: 'Rare Books',
	description: 'A curated selection of rare and antique books from our archives.'
	},
	{
	id: 'collection-2',
	href: 'https://www.example.com/2',
	image: baseImage,
	title: 'Historical Photos',
	description: 'Photographs documenting Los Angeles history from the 19th and 20th centuries.'
	},
	{
	id: 'collection-3',
	id: 'collection-4',
	href: 'https://www.example.com/1',
	image: baseImage,
	title: 'Rare Books',
	description: 'A curated selection of rare and antique books from our archives.'
	},
	{
	id: 'collection-5',
	href: 'https://www.example.com/2',
	image: baseImage,
	title: 'Historical Photos',
	description: 'Photographs documenting Los Angeles history from the 19th and 20th centuries.'
	},
	{
	id: 'collection-6',

[Copilot]

Type mismatch: The image property is defined as MediaItemType[] (array) but BlockCollection component expects MediaItemType (single object) according to line 10 in BlockCollection.vue.

[Copilot]

The emptyItems constant is defined but never used in any story. Consider removing it or creating an EmptyState story to test the component's behavior with no items.

[netlify]

❌ Deploy Preview for ucla-components-storybook failed. Why did it fail? →

Name	Link
🔨 Latest commit	ad01b18
🔍 Latest deploy log	https://app.netlify.com/projects/ucla-components-storybook/deploys/68f7cea0f456d700084b1e27