feat: create BentoPod #11

Sveb · 2025-07-08T16:38:19Z

Component Created: BentoPod.vue

Stories: ~/stories/BentoPod.stories.js

** 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 the new BentoPod Vue component along with Storybook stories showcasing its configurable states and content.

Added a fully styled, collapsible BentoPod.vue component with expand/collapse logic and customizable labels.
Created BentoPod.stories.js to demonstrate the component with various item counts and real content.

Reviewed Changes

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

File	Description
packages/vue-component-library/src/lib-components/BentoPod.vue	New Vue component providing a collapsible list (“Bento Pod”) layout
packages/vue-component-library/src/stories/BentoPod.stories.js	Storybook stories illustrating default, edge, and real-data cases

Comments suppressed due to low confidence (2)

packages/vue-component-library/src/lib-components/BentoPod.vue:15

[nitpick] The prop names 'labelOpen' and 'labelClose' are ambiguous; consider renaming them to 'collapseLabel' and 'expandLabel' (or similar) to more clearly convey when each label is shown.

    labelOpen?: string

packages/vue-component-library/src/lib-components/BentoPod.vue:1

There are no unit tests covering the expand/collapse behavior or edge cases (e.g., fewer than three items). Consider adding Jest/Vitest tests to validate dynamic height measurement and state toggling.

<script setup lang="ts">

Copilot · 2025-07-15T14:33:35Z

packages/vue-component-library/src/lib-components/BentoPod.vue

+    description: string
+    buttonLabel?: string
+    buttonLink?: string
+    items?: Array<{


Items in props require a 'to' property, but story args do not include it, leading to undefined links. Consider making 'to' optional or updating the stories to include a valid to value for each item.

Copilot · 2025-07-15T14:33:35Z

packages/vue-component-library/src/lib-components/BentoPod.vue

+
+<template>
+    <div :class="classes">
+        <h4 class="title" v-html="title" v-if="title" />


Rendering title and description with v-html can introduce XSS vulnerabilities if the content isn't sanitized. Consider using v-text or sanitizing input before binding.

Copilot · 2025-07-15T14:33:35Z

packages/vue-component-library/src/lib-components/BentoPod.vue

+// Lifecycle Hooks
+onMounted(() => {
+    measureHeights()
+    window.addEventListener("resize", measureHeights)


[nitpick] Listening to resize without throttling can trigger expensive layout recalculations rapidly. Consider debouncing measureHeights to reduce performance impact on window resize.

Copilot · 2025-07-15T14:33:36Z

packages/vue-component-library/src/lib-components/BentoPod.vue

+            <transition name="fade-label" mode="out-in">
+                <span :key="dynamicLabel" class="label" v-html="dynamicLabel" />
+            </transition>
+            <SvgArrowDown class="caret-icon" />


SVG icons inside interactive elements should include aria-hidden="true" or appropriate role/title attributes to ensure they are announced correctly (or hidden) for screen readers.

Suggested change

<SvgArrowDown class="caret-icon" />

<SvgArrowDown class="caret-icon" aria-hidden="true" />

adjusts the titles on phones

- uses the commonly used mixins for fonts and transitions. - uses the dlc theme and provides it in the strories.

…oded data props - as discused

…fo rgrowing space and inpropper wrapping

* adds components list * Update COMPONENTS.md * Update COMPONENTS.md * Update COMPONENTS.md * Update COMPONENTS.md * adds notes * Update COMPONENTS.md * claimed component * Update COMPONENTS.md * claim a component * claim a component * Update COMPONENTS.md * Update COMPONENTS.md * Update COMPONENTS.md * take a component * take a component * take a component * Update COMPONENTS.md * Update COMPONENTS.md * Adjust the component name - already exists * take a component * take a component * Update COMPONENTS.md - marks footer as already existing * Update COMPONENTS.md * Update COMPONENTS.md * Update COMPONENTS.md * Update COMPONENTS.md - marking BentoPod * add component * add component * Update COMPONENTS.md * Update COMPONENTS.md * take a component * take a component * fix component description * Update COMPONENTS.md Component exists * Update COMPONENTS.md * change component's name * Update COMPONENTS.md Clean up the list somewhat - added a new component for the bento-box-result, as bento-bod is allready.a different component. - removed a footer component as it doesn't really exist. - added some checkboxes to taken/completed compoents * take a component * take a component * take a component * remove AssetFeaturedImage definition * take a component * take a components * take a components * take a component * take a component * add a new line * add detailed component description * add detailed component description * take a component * update component description * Adds a button component * Update COMPONENTS.md * Update COMPONENTS.md * Update COMPONENTS.md * Clean up components.md * Taking the block-collection component * Taking the grid-collections component as well. * Update COMPONENTS.md * Clean up component list * add spacing * add spacing * update component name * Update Button definition * Update COMPONENTS.md * Update COMPONENTS.md * Remove duplicates * remove duplicates * remove duplicates * Remove already existing components * take a component * add a component * Take a component * adjust prop for block anchor nav * take a component * Update COMPONENTS.md * Taking the DropdownSingleSelect * Take the ButtonDropdownSearch component * adding the correct packageMenager version for netlify to see. pnpm Netlify supports pnpm for Node.js 16.9.0 and later. If your site’s base directory includes a pnpm-lock.yaml file, we will run pnpm install to install the dependencies listed in your package.json. To specify a pnpm version, you can edit your package.json file: "packageManager": "pnpm@6.3.2" This tells Corepack to use and download your preferred pnpm version instead of the default version that Netlify sets. * Update COMPONENTS.md * Marking a component as taken * Remove packageManager field from package.json * Update component statuses and remove completed items Updated the status of various components to reflect their existence and removed existing components from the list. * Update COMPONENTS.md * Taking the FiltersDropdown * Update COMPONENTS.md * Add note regarding existing header component tweaks Added a note about existing similar functionality that requires tweaks. * Update RefineSearchPanel ownership in COMPONENTS.md * Update DetailMedia component owner to Svebor * Update component list * Clarify CTAHexButton entry in COMPONENTS.md * Update COMPONENTS.md to remove and modify components Removed BlockMediaViewer and updated BlockRichText entry. Adjusted completion status for DetailMedia. * Update component status and ownership in COMPONENTS.md * Update component ownership in COMPONENTS.md * Styles the component to fit the designs better, adds optional extra buttons for better design fit. * fix: lint error * prepare for PR * fix: the CI errors Error: HttpError: Resource not accessible by integration Error: Resource not accessible by integration * fix: removes the empty theme privders --------- Co-authored-by: dchiamp <derek.chiampas@gmail.com> Co-authored-by: Austin Blanchard <austinpdx@gmail.com> Co-authored-by: Luka Vuk <61590027+lux-v@users.noreply.github.com> Co-authored-by: Jess <jessica.divers@gmail.com>

# [@ucla-library-monorepo/ucla-library-website-components-v1.53.0](https://github.com/UCLALibrary/ucla-library-website-components/compare/@ucla-library-monorepo/ucla-library-website-components-v1.52.2...@ucla-library-monorepo/ucla-library-website-components-v1.53.0) (2025-11-19) ### Features * Adjust BannerFeatured for new designs. ([UCLALibrary#864](UCLALibrary#864)) ([c93a416](UCLALibrary@c93a416))

…[skip ci]

# [@ucla-library/component-library-nuxt-module-v1.2.110](https://github.com/UCLALibrary/ucla-library-website-components/compare/@ucla-library/component-library-nuxt-module-v1.2.109...@ucla-library/component-library-nuxt-module-v1.2.110) (2025-11-19)

BentoPod

2db4065

Sveb changed the title ~~BentoPod~~ UCLA - BentoPod Jul 8, 2025

Sveb added 2 commits July 8, 2025 18:55

Update BentoPod.vue

9be0252

Update BentoPod.vue

3671a01

Sveb requested a review from Copilot July 15, 2025 14:32

Copilot AI reviewed Jul 15, 2025

View reviewed changes

Sveb added 9 commits July 15, 2025 19:46

Adds debounce to the resize event function

7b9c1e1

adjusts the titles on phones

Clean up props

4b9ef7e

Move the component styles to the theme file

b61371d

update package

33787b8

Merge remote-tracking branch 'upstream/main'

2e670a6

Merge remote-tracking branch 'upstream/main'

09043d2

Merge remote-tracking branch 'upstream/main'

99240ef

Merge remote-tracking branch 'upstream/main'

8301316

Updates component with new knowledge.

9e56dc3

- uses the commonly used mixins for fonts and transitions. - uses the dlc theme and provides it in the strories.

Sveb had a problem deploying to netlify-preview August 25, 2025 13:20 — with GitHub Actions Failure

Adds a default class alongside the dlc one.

fd83840

Sveb had a problem deploying to netlify-preview August 27, 2025 07:47 — with GitHub Actions Failure

Sveb added 2 commits August 27, 2025 10:00

WIP, updating the component

19063e9

Adjust bento pod to use meta type props for the data instead of hardc…

90c894b

…oded data props - as discused

Sveb had a problem deploying to netlify-preview August 27, 2025 09:20 — with GitHub Actions Failure

run fix lint

7b51bd9

Sveb had a problem deploying to netlify-preview August 27, 2025 09:21 — with GitHub Actions Failure

Create BentoPod.spec.js

6bfc1c4

Sveb had a problem deploying to netlify-preview August 27, 2025 09:27 — with GitHub Actions Failure

run eslink fix

1fa1e26

Sveb had a problem deploying to netlify-preview August 27, 2025 13:13 — with GitHub Actions Failure

Sveb added 3 commits August 27, 2025 18:21

Merge remote-tracking branch 'upstream/main'

b87f27e

Merge remote-tracking branch 'upstream/main'

16e863a

Update BentoPod.vue

628c062

update stories

817b7b7

Sveb had a problem deploying to netlify-preview November 10, 2025 12:53 — with GitHub Actions Failure

simplify cypress, clean up, run lint fix.

f7c75d7

Sveb had a problem deploying to netlify-preview November 10, 2025 13:00 — with GitHub Actions Failure

prepare for ucla PR

b94a841

Sveb had a problem deploying to netlify-preview November 10, 2025 13:02 — with GitHub Actions Failure

Sveb added 2 commits November 10, 2025 14:13

chore: Adjust how the ciolumns are created and distibuted to account …

e3e49bc

…fo rgrowing space and inpropper wrapping

fix lint

564887c

Sveb had a problem deploying to netlify-preview November 10, 2025 13:13 — with GitHub Actions Failure

Merge branch 'main' into BentoPod

e675303

Sveb had a problem deploying to netlify-preview November 10, 2025 13:13 — with GitHub Actions Failure

Merge branch 'main' into BentoPod

586e907

Sveb had a problem deploying to netlify-preview November 10, 2025 13:14 — with GitHub Actions Failure

Sveb added the Made into a PR to UCLA label Nov 10, 2025

Merge branch 'main' into BentoPod

0d8a7ca

pghorpade had a problem deploying to netlify-preview November 13, 2025 20:28 — with GitHub Actions Failure

Merge branch 'main' into BentoPod

341382e

Sveb had a problem deploying to netlify-preview November 14, 2025 09:35 — with GitHub Actions Failure

Sveb and others added 6 commits November 17, 2025 09:50

Merge remote-tracking branch 'upstream/main'

005be22

chore(nuxt-module): force release after vue-component-library update …

72e52b0

…[skip ci]

Merge branch 'main' into BentoPod

0d14a11

Sveb had a problem deploying to netlify-preview November 19, 2025 19:04 — with GitHub Actions Failure

Merge branch 'main' into BentoPod

abbc689

Sveb had a problem deploying to netlify-preview November 19, 2025 19:18 — with GitHub Actions Failure

Sveb added 2 commits November 19, 2025 20:18

Merge remote-tracking branch 'upstream/main'

cac8cc2

Merge branch 'main' into BentoPod

a5819ea

Sveb had a problem deploying to netlify-preview November 19, 2025 19:18 — with GitHub Actions Failure

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: create BentoPod #11

feat: create BentoPod #11

Uh oh!

Sveb commented Jul 8, 2025 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Jul 15, 2025

Uh oh!

Copilot AI Jul 15, 2025

Uh oh!

Copilot AI Jul 15, 2025

Uh oh!

Copilot AI Jul 15, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

	<SvgArrowDown class="caret-icon" />
	<SvgArrowDown class="caret-icon" aria-hidden="true" />

feat: create BentoPod #11

Are you sure you want to change the base?

feat: create BentoPod #11

Uh oh!

Conversation

Sveb commented Jul 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Jul 15, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jul 15, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jul 15, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jul 15, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Sveb commented Jul 8, 2025 •

edited

Loading