feat: APPS-2959 FlexibleMediaGallery FTVA variant

[tinuola]

Connected to APPS-2959

Components Updated:

• MediaBadge.vue
• ~/Flexible/MediaGallery.vue
• ~/Flexible/MediaGallery/BannerImage.vue
• ~/Flexible/MediaGallery/NewLightbox.vue
• ~/Flexible/MediaGallery/ThumbnailCard.vue

Stories:

• ~/stories/MediaBadge.stories.js
• ~/stories/MediaGallery_BannerImage.stories.js
• ~/stories/MediaGallery_NewLightbox.stories.js
• ~/stories/MediaGallery_ThumbnailCard.stories.js
• ~/stories/Flexible_MediaGallery.stories.js

Notes:

• Updated multiple components that comprise the FlexibleMediaGallery with FTVA variants
• Added new prop inline to be used to set the Lightbox component to display as an inline component, preserving the default overlay behavior when needed
  • Any FTVA template currently using the Lightbox component inline should be updated with the prop
  • Related: https://uclalibrary.atlassian.net/browse/APPS-2998
• Moved and updated CSS files
• Although not specified explicitly in the ticket or the design comps, I included a halfWidth gallery option/story for FTVA
  • If the gallery might be used on the FTVA site, it can be updated later with confirmed/theme specs

StoryBook Previews:

• MediaBadge

  • https://deploy-preview-626--ucla-library-storybook.netlify.app/?path=/story/media-badge--ftva

• Media Gallery BannerImage

  • https://deploy-preview-626--ucla-library-storybook.netlify.app/?path=/story/media-gallery-banner-image--ftva

• Media Gallery ThumbnailCard

  • https://deploy-preview-626--ucla-library-storybook.netlify.app/?path=/story/media-gallery-thumbnail-card--ftva

• NewLightbox (Default)

  • https://deploy-preview-626--ucla-library-storybook.netlify.app/?path=/story/media-gallery-new-lightbox--ftva-default-lightbox
  • Using inline prop set to true:
  • https://deploy-preview-626--ucla-library-storybook.netlify.app/?path=/story/media-gallery-new-lightbox--ftva-event-detail-carousel

• FlexibleMediaGallery (FullWidth)

  • https://deploy-preview-626--ucla-library-storybook.netlify.app/?path=/story/flexible-media-gallery--ftva

• FlexibleMediaGallery (HalfWidth)

  • https://deploy-preview-626--ucla-library-storybook.netlify.app/?path=/story/flexible-media-gallery--ftva-half-width

Local Nuxt Previews (with craft data):

• Collapsed/Default

• Expanded

• Lightbox

Checklist:

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

[github-actions[bot]]

Percy Screenshots

In order to conserve our percy screenshot allowance, percy is not configured to run automatically. Please make sure the PR is ready and all other checks are passing, then start it manually:

1. Visit https://github.com/UCLALibrary/ucla-library-website-components/actions/workflows/percy.yml 2. Click the 'Run workflow' button in the blue bar. 3. Select the correct branch for this PR and click 'Run workflow' again to confirm.

[github-actions[bot]]

🚀 Deployed on https://deploy-preview-626--ucla-library-storybook.netlify.app

[axamei]

@tinuola the blue icon overlay should be a circle instead of the molecule. that is the only discrepancy with the design that i see

[pghorpade]

:tada: This PR is included in version 3.28.0 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: