DS-1445 | CTA Group component

[yvonnetangsu]

READY FOR REVIEW

Summary

• Create CTA Group component
• Add getNumsBlok utility

Review By (Date)

• Retro

Criticality

• 4

Review Tasks

Setup tasks and/or behavior to test

1. Go to https://deploy-preview-501--adapt-giving.netlify.app/contact
2. Check that the CTA group looks the same as the one on live https://giving.stanford.edu/contact/ (except for the width of the group - that's being controlled in the parent SbSection component which hasn't been worked on yet)
3. Look at code

Associated Issues and/or People

• DS-1445

[netlify]

✅ Deploy Preview for adapt-giving ready!

Name	Link
🔨 Latest commit	b492e07
🔍 Latest deploy log	https://app.netlify.com/projects/adapt-giving/deploys/685084eed82263000861e08b
😎 Deploy Preview	https://deploy-preview-501--adapt-giving.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[Copilot]

Pull Request Overview

This PR introduces the new CTA Group component along with several updates to Storyblok components and the CTA component suite. Key changes include:

• Updating imports from '@storyblok/react' to '@storyblok/react/rsc' for multiple components.
• Creating a new SbCtaGroup component that leverages the CTA Group and CreateBloks components.
• Adding several new CTA components and updating related types and styles.

Reviewed Changes

Copilot reviewed 49 out of 49 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
components/Storyblok/SbLandingPage.tsx	Updated Storyblok import to use @storyblok/react/rsc.
components/Storyblok/SbInteriorPage.tsx	Updated Storyblok import to use @storyblok/react/rsc.
components/Storyblok/SbGlobalFooterPicker.tsx	Updated Storyblok import to use @storyblok/react/rsc.
components/Storyblok/SbGlobalFooter.tsx	Updated Storyblok import to use @storyblok/react/rsc.
components/Storyblok/SbCtaLink.tsx	Refactored to leverage the new CTA components and updated CTA prop types.
components/Storyblok/SbCtaGroup.tsx	Added new CTA Group component implementation.
components/Storyblok/SbCampaignPage.tsx	Updated Storyblok import to use @storyblok/react/rsc.
components/Storyblok/SbBasicCard.tsx	Added a basic card component as a placeholder.
components/RichText/RichText.tsx	Cast inline link configuration to SbLinkType explicitly.
components/HeroIcon/HeroIcon.styles.tsx	Updated icon mappings and spacing adjustments.
components/Cta/*	Introduced new CTA components (CtaButton, CtaExternalLink, CtaNextLink, CtaLink, CtaGroup, CtaContent), along with updated types and styles.
components/CreateBloks.tsx	Modified to optionally render list items when isListItems is true.

Comments suppressed due to low confidence (1)

components/Storyblok/SbCtaLink.tsx:42

• [nitpick] Consider using the destructured variable 'linkText' instead of accessing 'props.blok.linkText' directly for consistency and improved readability.

if (!props.blok.linkText) {

[sherakama]

GTG

[sherakama]

The CTA's have slightly more padding/height to them in the new one but I like it so green lights.

[yvonnetangsu]

The CTA's have slightly more padding/height to them in the new one but I like it so green lights.

Good eye @sherakama! I pushed up a reduction in the leading of the CTA text which would make the button shorter like on live 😄

I like the slightly bigger buttons myself but not sure if that'll cause any unintended consequences so having it match the live site more closely for now.