diff --git a/components/Cta/Cta.styles.ts b/components/Cta/Cta.styles.ts index 700ee1a0..f2bbb8ab 100644 --- a/components/Cta/Cta.styles.ts +++ b/components/Cta/Cta.styles.ts @@ -131,6 +131,7 @@ export const ctaIconMap: CtaIconMapType = { }; export const iconAnimation = { + none: '', 'top-right': 'group-hocus:translate-x-01em group-hocus:-translate-y-01em', down: 'group-hocus:translate-y-02em', up: 'group-hocus:-translate-y-02em', @@ -152,6 +153,9 @@ export const iconLeftMarginDefault = 'ml-03em'; export const iconLeftMargin: CtaIconLeftMarginType = { 'arrow-right': 'ml-04em', back: 'ml-04em', + email: 'ml-05em', + external: 'ml-04em', + link: 'ml-05em', 'triangle-right': 'ml-04em', 'triangle-down': 'ml-04em', 'triangle-up': 'ml-04em', diff --git a/components/HeroIcon/HeroIcon.styles.tsx b/components/HeroIcon/HeroIcon.styles.tsx index 6a186bdd..69ee5a2b 100644 --- a/components/HeroIcon/HeroIcon.styles.tsx +++ b/components/HeroIcon/HeroIcon.styles.tsx @@ -73,13 +73,14 @@ export const iconBaseStyleDefault = 'w-1em'; export const iconBaseStyle: IconBaseStyleType = { 'arrow-left': 'w-09em -mt-01em', 'arrow-right': 'w-09em -mt-01em', - 'triangle-right': 'w-09em scale-x-[0.9] mt-01em', - 'triangle-down': 'w-09em scale-x-[0.9] rotate-90 mt-01em', - 'triangle-up': 'w-09em scale-x-[0.9] -rotate-90 mt-02em', - email: 'w-[1.2em]', + 'triangle-right': 'w-09em scale-x-90 mt-01em', + 'triangle-down': 'w-09em scale-x-90 rotate-90 mt-01em', + 'triangle-up': 'w-09em scale-x-90 -rotate-90 mt-02em', + download: 'w-09em', + email: 'w-1em', external: 'w-08em', left: 'w-08em', - link: 'w-1em -mt-01em', + link: 'w-09em -mt-01em', more: 'w-08em', plus: 'w-08em', right: 'w-08em', diff --git a/components/Storyblok/SbCta.tsx b/components/Storyblok/SbCta.tsx index 2ec75d2e..967e4920 100644 --- a/components/Storyblok/SbCta.tsx +++ b/components/Storyblok/SbCta.tsx @@ -1,8 +1,13 @@ import { storyblokEditable } from '@storyblok/react/rsc'; -import { CtaLink, type CtaColorType, type CtaVariantType } from '../Cta'; +import { + CtaLink, + type CtaColorType, + type CtaVariantType, + type CtaCurveType, + type IconAnimationType, +} from '../Cta'; import { type IconType } from '../HeroIcon'; import { type SbLinkType } from './Storyblok.types'; -import { type CtaCurveType } from '../Cta'; type SbCtaType = { blok: { @@ -14,6 +19,7 @@ type SbCtaType = { curve?: CtaCurveType; isLarge?: boolean; icon?: IconType; + animation?: IconAnimationType; }; }; @@ -26,6 +32,7 @@ export const SbCta = ({ curve, isLarge, icon, + animation, }, blok, }: SbCtaType) => { @@ -43,6 +50,7 @@ export const SbCta = ({ color={color} srText={srText} icon={icon} + animate={animation} > {label} diff --git a/components/Storyblok/SbHomepageThemeSection/SbHomepageThemeSection.styles.ts b/components/Storyblok/SbHomepageThemeSection/SbHomepageThemeSection.styles.ts index 00b327be..04d10758 100644 --- a/components/Storyblok/SbHomepageThemeSection/SbHomepageThemeSection.styles.ts +++ b/components/Storyblok/SbHomepageThemeSection/SbHomepageThemeSection.styles.ts @@ -9,3 +9,4 @@ export const heading = 'fluid-type-7 md:gc-splash mb-0 whitespace-pre-line'; export const introWrapper = 'cc relative z-20'; export const intro = 'intro-text *:leading-display *:md:leading-cozy *:text-shadow-sm rs-mt-7 max-w-1000'; export const contentWrapper = 'relative z-20'; +export const cta = 'relative cc md:flex-row *:mx-auto rs-mt-6 gap-20 lg:gap-27 w-fit'; diff --git a/components/Storyblok/SbHomepageThemeSection/SbHomepageThemeSection.tsx b/components/Storyblok/SbHomepageThemeSection/SbHomepageThemeSection.tsx index 0823cde2..2b61d9d3 100644 --- a/components/Storyblok/SbHomepageThemeSection/SbHomepageThemeSection.tsx +++ b/components/Storyblok/SbHomepageThemeSection/SbHomepageThemeSection.tsx @@ -3,6 +3,7 @@ import { AnimateInView } from '@/components/Animate'; import { storyblokEditable, type SbBlokData } from '@storyblok/react/rsc'; import { type StoryblokRichtext } from 'storyblok-rich-text-react-renderer-ts'; import { CreateBloks } from '@/components/CreateBloks'; +import { FlexBox } from '@/components/FlexBox'; import { Heading, SrOnlyText, Text } from '@/components/Typography'; import { Container } from '@/components/Container'; import { RichText } from '@/components/RichText'; @@ -13,6 +14,7 @@ import * as styles from './SbHomepageThemeSection.styles'; import { bgBlurs, type BgBlurType, gradientFroms, type GradientFromType, gradientTos, type GradientToType, } from '@/utilities/datasource'; +import { getNumBloks } from '@/utilities/getNumBloks'; type SbHomepageThemeSectionProps = { blok: { @@ -21,6 +23,7 @@ type SbHomepageThemeSectionProps = { heading?: string; intro?: StoryblokRichtext; content?: SbBlokData[]; + cta?: SbBlokData[]; bgImage?: SbImageType; bgBlur?: BgBlurType; gradientTop?: GradientToType; @@ -34,6 +37,7 @@ export const SbHomepageThemeSection = ({ heading, intro, content, + cta, bgImage: { filename, focus } = {}, bgBlur, gradientTop, @@ -137,6 +141,11 @@ export const SbHomepageThemeSection = ({ + {!!getNumBloks(cta) && ( + + + + )} ); }; diff --git a/components/Storyblok/SbSection/SbSection.styles.ts b/components/Storyblok/SbSection/SbSection.styles.ts index 8157dcc5..3f801cac 100644 --- a/components/Storyblok/SbSection/SbSection.styles.ts +++ b/components/Storyblok/SbSection/SbSection.styles.ts @@ -1,4 +1,3 @@ -import { header } from '@/components/Scrollytelling'; import { cnb } from 'cnbuilder'; export type AlignType = 'left' | 'center' | 'right'; @@ -35,4 +34,5 @@ export const subhead = (headerAlign?: AlignType) => cnb('relative z-10 rs-mt-3 ' 'max-w-prose': headerAlign !== 'center', }); export const contentWrapper = 'relative z-10'; +export const cta = 'cc md:flex-row *:mx-auto rs-mt-3 gap-20 lg:gap-27 w-fit'; export const caption = 'caption *:leading-display mt-08em max-w-prose-wide'; diff --git a/components/Storyblok/SbSection/SbSection.tsx b/components/Storyblok/SbSection/SbSection.tsx index a5e54e6e..f08644ae 100644 --- a/components/Storyblok/SbSection/SbSection.tsx +++ b/components/Storyblok/SbSection/SbSection.tsx @@ -23,6 +23,7 @@ import { paletteAccentColors, type PaletteAccentHexColorType } from '@/utilities import { type SbImageType, type SbColorStopProps } from '../Storyblok.types'; import { getProcessedImage } from '@/utilities/getProcessedImage'; import { hasRichText } from '@/utilities/hasRichText'; +import { getNumBloks } from '@/utilities/getNumBloks'; import * as styles from './SbSection.styles'; type SbSectionProps = { @@ -36,6 +37,7 @@ type SbSectionProps = { headingLevel?: HeadingType; isSerifHeader?: boolean; subheading?: string; + cta?: SbBlokData[]; caption?: StoryblokRichtext; captionColumnWidth?: '12' | '10' | '8' | '6' | '4'; barColor?: { @@ -61,6 +63,7 @@ export const SbSection = ({ isSerifHeader, headingLevel, subheading, + cta, caption, captionColumnWidth, barColor: { value: barColorValue } = {}, @@ -182,6 +185,11 @@ export const SbSection = ({ + {!!getNumBloks(cta) && ( + + + + )} {hasRichText(caption) && (