Icon animation (#240)

SU-SWS · Mar 5, 2024 · 879b341 · 879b341
1 parent fb1c80c
commit 879b341
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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>