feat: APPS-2999 Add BlockCTA FTVA variants

[tinuola]

Connected to APPS-2999

Component Updated: BlockCallToAction.vue

Stories:

• ~/stories/BlockCallToAction.stories.js
• ~/stories/TwoColLayoutWStickySideBar.stories.js

Notes:

• Updated design tokens from 5.23.0 to 5.26.0 5.27.0
• Refactored component to use CAPI, Typescript and new theming setup
• Created FTVA Slim variant of CTA block
  • Included additional icons, new isCentered prop to cue default or left (slim) alignment
  • Variant's width should be set/constrained by a containing/parent element
• Updated component stories with new variant

StoryBook Previews:

• FTVA Slim, Left-Aligned, Titled, Using global data

  • https://deploy-preview-630--ucla-library-storybook.netlify.app/?path=/story/block-call-to-action--ftva-slim-cta-titled

• FTVA Slim, Left-Aligned, No Title

  • https://deploy-preview-630--ucla-library-storybook.netlify.app/?path=/story/block-call-to-action--ftva-slim-cta-no-title

• FTVA Slim, Left-Aligned, Long Text

  • https://deploy-preview-630--ucla-library-storybook.netlify.app/?path=/story/block-call-to-action--ftva-slim-cta-long-text

• FTVA Slim in 2-Column Sidebar Layout

  • https://deploy-preview-630--ucla-library-storybook.netlify.app/?path=/story/layout-2-column-layout-with-sticky-sidebar--ftva-slim-cta

• FTVA CTA Default (Mimics component's current use on Library, MEAP sites)

  • https://deploy-preview-630--ucla-library-storybook.netlify.app/?path=/story/block-call-to-action--ftva-cta-default

Local Preview:

• Download icon can be added as a pseudo-element for full-width component at the page level:

Checklist:

• [x] I checked that it is working locally in the dev server
• [x] I checked that it is working locally in the storybook
• ~~[ ] I checked that it is working locally in the library-website-nuxt dev server~~
• [x] I added a screenshot of it working
• [ ] 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-630--ucla-library-storybook.netlify.app

[axamei]

@tinuola Let's adjust the heading:

.title {
  line-height: 1.2;
  margin-bottom: 4px;
} 

[pghorpade]

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

The release is available on:

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

Your semantic-release bot :package::rocket: