Release/v1.2.1

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',

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',

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}
     </CtaLink>

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';

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 = ({
       <Container pt={8} width="full" className={styles.contentWrapper}>
         <CreateBloks blokSection={content} isDarkTheme />
       </Container>
+      {!!getNumBloks(cta) && (
+        <FlexBox direction="col" className={styles.cta}>
+          <CreateBloks blokSection={cta} />
+        </FlexBox>
+      )}
     </Container>
   );
 };

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';

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 = ({
           <Container pt={hasHeader ? 8 : undefined} width="full" className={styles.contentWrapper}>
             <CreateBloks blokSection={content} isDarkTheme={bgColor === 'black'} />
           </Container>
+          {!!getNumBloks(cta) && (
+            <FlexBox direction="col" className={styles.cta}>
+              <CreateBloks blokSection={cta} />
+            </FlexBox>
+          )}
         </Container>
       </m.div>
       {hasRichText(caption) && (