DS-1445 | CTA Group component (#501)

* Update next and storyblok packages

* Beginning using Momentum CTA components

* Keep working on CtaLinks

* ts errors and WIP

* Gradient links and other styles; remove Masthead component

* Button align and styles

* CTA icons

* Use CtaLink for local footer links

* Remove flexbox wrapper from CtaContent

* Add variant prop for styles not mapped to SbCtaLink; special icon styles

* Remove react loading skeleton and update sa11y

* test

* Update storyblok packages

* Add editor check to access key in window URL for storyblokInit for Storyblok provider

* Only do the editor check for the token in the URL for storyblok provider

* test

* test

* Undo

* try next 15.3.0

* Remove params of getStoryblokApi utility

* fixup URL param for editor token

* undo accidentally changed path of not-found

* test

* Add placeholder components

* import storyblok things from rsc directory

* Update components/Storyblok/SbRowOneColumn.tsx

Co-authored-by: Sherakama <sheamck@stanford.edu>

* Update components/Storyblok/SbRowOneColumn.tsx

Co-authored-by: Sherakama <sheamck@stanford.edu>

* Extract reusable subcomponent for link groups

* CtaGroup component

* use destructured linkText prop

* Reduce leading in CTAs so it more closely match the live site

---------

Co-authored-by: Sherakama <sheamck@stanford.edu>

Author: yvonnetangsu

components/CreateBloks.tsx

@@ -2,11 +2,14 @@ import { StoryblokServerComponent, type SbBlokData } from '@storyblok/react/rsc'
 
 type CreateBloksProps = {
   blokSection: SbBlokData[];
+  isListItems?: boolean;
   [k: string]: unknown;
 };
 
-export const CreateBloks = ({ blokSection, ...props }: CreateBloksProps) => {
-  if (blokSection) {
+export const CreateBloks = ({ blokSection, isListItems, ...props }: CreateBloksProps) => {
+  if (blokSection && isListItems) {
+    return blokSection.map((blok) => <li key={blok._uid}><StoryblokServerComponent blok={blok} {...props} /></li>);
+  } else if (blokSection) {
     return blokSection.map((blok) => <StoryblokServerComponent key={blok._uid} blok={blok} {...props} />);
   }
 

components/Cta/Cta.styles.ts

@@ -1,10 +1,10 @@
 import { type CtaIconLeftMarginType } from './Cta.types';
 
 export const cta = 'group/cta transition-all';
-export const buttonBase = 'block font-normal w-fit no-underline hocus:underline';
+export const buttonBase = 'block font-normal w-fit no-underline hocus:underline leading-tight';
 // hocus to plum dark gradient instead of solid plum dark to avoid a flash of white background on hocus
 export const gradientButtonBase = 'bg-gradient-to-tr hocus:from-plum-dark hocus:to-plum-dark text-white hocus:text-white';
-export const textLinkBase = 'block font-semibold w-fit no-underline text-18 md:text-20';
+export const textLinkBase = 'block font-semibold w-fit no-underline text-18 md:text-20 leading-tight';
 export const gradientTextLinkBase = 'bg-clip-text bg-gradient-to-tr text-transparent hocus:text-transparent';
 
 // Maps to linkButtonStyle props in SbCtaLink. Only used for the Button style.
@@ -107,3 +107,5 @@ export const ctaAligns = {
   center: 'su-text-center mx-auto',
   right: 'su-text-right ml-auto mr-0',
 };
+
+export const ctaGroup = 'list-unstyled gap-x-08em gap-y-1em [&_li]:mb-0 [&_a]:text-09em [&_a]:md:text-20 [&_a]:p-07em [&_a]:md:pt-11 [&_a]:md:pb-12 [&_a]:md:px-30';

components/Cta/Cta.types.ts

@@ -29,3 +29,5 @@ export interface CtaCommonProps {
   mb?: MarginType;
   children?: React.ReactNode;
 }
+
+export type CtaGroupDisplayType = 'inline' | 'inline-block';

components/Cta/CtaGroup.tsx

@@ -0,0 +1,28 @@
+import { cnb } from 'cnbuilder';
+import { FlexBox } from '@/components/FlexBox';
+import * as styles from './Cta.styles';
+import * as types from './Cta.types';
+
+type CtaGroupProps = React.HTMLAttributes<HTMLDivElement> & {
+  display: types.CtaGroupDisplayType;
+};
+
+export const CtaGroup = ({
+  display = 'inline-block',
+  className,
+  children,
+  ...props
+}: CtaGroupProps) => {
+  return (
+    <FlexBox
+      {...props}
+      as="ul"
+      direction={display === 'inline-block' ? 'row' : 'col'}
+      wrap={display === 'inline-block' ? 'wrap' : 'nowrap'}
+      justifyContent={display === 'inline-block' ? 'center' : 'start'}
+      className={cnb(styles.ctaGroup, className)}
+    >
+      {children}
+    </FlexBox>
+  );
+};

components/Cta/index.ts

@@ -2,5 +2,6 @@ export * from './CtaButton';
 export * from './CtaExternalLink';
 export * from './CtaNextLink';
 export * from './CtaLink';
+export * from './CtaGroup';
 export * from './Cta.styles';
 export * from './Cta.types';

components/Storyblok/SbCtaGroup.tsx

@@ -0,0 +1,24 @@
+import { storyblokEditable, type SbBlokData } from '@storyblok/react/rsc';
+import { CreateBloks } from '@/components/CreateBloks';
+import { CtaGroup, type CtaGroupDisplayType } from '@/components/Cta';
+import { getNumBloks } from '@/utilities/getNumBloks';
+
+type SbCtaGroupProps = {
+  blok: SbBlokData & {
+    ctaLinks?: SbBlokData[];
+    display?: CtaGroupDisplayType;
+  };
+};
+
+export const SbCtaGroup = (props: SbCtaGroupProps) => {
+  const { ctaLinks, display } = props.blok;
+  if (!getNumBloks(ctaLinks)) {
+    return null; // Return null if there are no ctaLinks to display
+  }
+
+  return (
+    <CtaGroup display={display} {...storyblokEditable(props.blok)}>
+      <CreateBloks blokSection={ctaLinks} isListItems />
+    </CtaGroup>
+  );
+};

components/Storyblok/SbCtaLink.tsx

@@ -39,7 +39,7 @@ export const SbCtaLink = React.forwardRef<HTMLAnchorElement, SbCtaProps>((props,
     linkTextColor,
   } = props.blok;
 
-  if (!props.blok.linkText) {
+  if (!linkText) {
     return null;
   }
 

utilities/getNumBloks.ts

@@ -0,0 +1,15 @@
+import { type SbBlokData } from '@storyblok/react/rsc';
+/**
+ * Returns the number of nested bloks when we use the CreateBloks utility.
+ *
+ * @param sbField - The Storyblok field to count bloks in.
+ * @returns The number of bloks added to this Storyblok field.
+ */
+
+export const getNumBloks = (sbField: SbBlokData[]) => {
+  if (sbField?.length) {
+    return sbField.length;
+  }
+
+  return 0;
+};

utilities/storyblok.tsx

@@ -21,13 +21,14 @@ import { SbStoryImage } from '@/components/Storyblok/SbStoryImage';
 import { SbSection } from '@/components/Storyblok/SbSection';
 import { SbRowOneColumn } from '@/components/Storyblok/SbRowOneColumn';
 import { SbBasicCard } from '@/components/Storyblok/SbBasicCard';
+import { SbCtaGroup } from '@/components/Storyblok/SbCtaGroup';
 
 export const components = {
-  // TODO DS-1417: Remove and clean up page
   page: SbPage,
   redirect: Redirect,
   storyPicker: SbStoryPicker,
   ctaLink: SbCtaLink,
+  ctaGroup: SbCtaGroup,
   navItem: SbNavItem,
   lockup: SbLockup,
   // Cards