Skip to content

Commit c95fbbb

Browse files
yvonnetangsuyvonnetangsu
committed
test
1 parent 3c3e3f6 commit c95fbbb

File tree

3 files changed

+108
-43
lines changed

3 files changed

+108
-43
lines changed

‎components/Storyblok/SbCtaLink.tsx

Lines changed: 45 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,67 @@
11
import React from 'react';
2+
import { cnb } from 'cnbuilder';
23
import { storyblokEditable, type SbBlokData } from '@storyblok/react';
3-
import {
4-
CtaLink,
5-
type CtaAlignType,
6-
type CtaButtonStyleType,
7-
type CtaButtonSizeType,
8-
type CtaTextColorType,
9-
type CtaIconType,
10-
} from '@/components/Cta';
4+
import { SbLink } from '@/components/Storyblok/partials/SbLink';
5+
import { SrOnlyText } from '@/components/Typography';
116
import { type SbLinkType } from './Storyblok.types';
7+
import {
8+
ctaLinkColors,
9+
ctaLinkStyles,
10+
ctaSizes,
11+
type CtaLinkStylesType,
12+
type CtaLinkColorsType,
13+
type CtaSizesType,
14+
type LinkIconsType,
15+
} from '@/utilities/datasource';
1216

1317
export type SbCtaProps = {
1418
blok: SbBlokData & {
15-
align?: CtaAlignType;
19+
align?: string;
1620
link: SbLinkType;
1721
linkText?: string;
1822
isButton?: boolean;
19-
linkButtonStyle?: CtaButtonStyleType;
20-
linkButtonSize?: CtaButtonSizeType;
21-
linkTextColor?: CtaTextColorType;
22-
linkIcon?: CtaIconType;
23+
linkButtonStyle?: CtaLinkStylesType;
24+
linkButtonSize?: CtaSizesType;
25+
linkIcon?: LinkIconsType;
26+
linkTextColor?: CtaLinkColorsType;
2327
rel?: string;
2428
srText?: string;
2529
}
2630
};
2731

2832
export const SbCtaLink = React.forwardRef<HTMLAnchorElement, SbCtaProps>((props, ref) => {
29-
const {
30-
linkText,
31-
link,
32-
isButton,
33-
rel,
34-
srText,
35-
align,
36-
linkButtonStyle,
37-
linkButtonSize,
38-
linkIcon,
39-
linkTextColor,
40-
} = props.blok;
41-
4233
if (!props.blok.linkText) {
4334
return null;
4435
}
4536

4637
return (
47-
<CtaLink
48-
{...storyblokEditable(props.blok)}
49-
ref={ref}
50-
sbLink={link}
51-
isButton={isButton}
52-
buttonStyle={linkButtonStyle}
53-
buttonSize={linkButtonSize || 'default'}
54-
textColor={linkTextColor}
55-
icon={linkIcon}
56-
align={align || 'left'}
57-
srText={srText}
58-
rel={rel}
59-
>
60-
{linkText}
61-
</CtaLink>
38+
<div {...storyblokEditable(props.blok)} className={`ood-cta block text-${props.blok.align}`}>
39+
<SbLink
40+
ref={ref}
41+
link={props.blok.link}
42+
classes={cnb(props.blok.linkIcon,
43+
'text-18 md:text-20',
44+
{
45+
[
46+
`text-digital-red hocus:text-sky-dark hocus:underline
47+
${ctaLinkColors[props.blok.linkTextColor]}`
48+
]: !props.blok.isButton,
49+
[
50+
`pt-11 px-30 pb-12 font-sans
51+
inline-block w-auto border-none font-regular
52+
no-underline transition-colors hocus:underline
53+
${ctaLinkStyles?.[props.blok.linkButtonStyle]}
54+
${ctaSizes?.[props.blok.linkButtonSize]}`
55+
]: props.blok.isButton,
56+
},
57+
)}
58+
attributes={props.blok.rel ? {rel: props.blok.rel} : {}}
59+
>
60+
{props.blok.linkText}
61+
{props.blok.srText && (
62+
<SrOnlyText>{props.blok.srText}</SrOnlyText>
63+
)}
64+
</SbLink>
65+
</div>
6266
);
6367
});

‎utilities/datasource.ts

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,67 @@ export const lightPageBgColors = {
66
};
77
export type LightPageBgColorsType = keyof typeof lightPageBgColors;
88

9+
export const ctaLinkStyles = {
10+
'ood-cta__button--primary su-after-bg-white': 'bg-bay-dark text-white hocus:bg-palo-alto hocus:text-white hocus:after:bg-white after:bg-white',
11+
'ood-cta__button--secondary su-after-bg-bay-dark su-after-bg-hocus-white': 'bg-white text-bay-dark shadow-bay-dark shadow-[inset_0_0_0_1px] after:text-bay-dark after:bg-bay-dark hocus:bg-bay-dark hocus:text-white hocus:after:text-white hocus:after:bg-white',
12+
'su-bg-digital-red su-bg-hocus-plum-dark su-text-white su-text-hocus-white su-after-bg-white su-after-bg-hocus-white': 'bg-digital-red hocus:bg-plum-dark text-white hocus:text-white after:bg-white hocus:after:bg-white',
13+
'su-bg-white su-bg-hocus-plum-dark su-text-digital-red su-text-hocus-white su-after-bg-digital-red su-after-bg-hocus-white': 'bg-white hocus:bg-plum-dark text-digital-red hocus:text-white after:bg-digital-red hocus:after:bg-white',
14+
'ood-cta__button--ghost su-after-bg-white': 'text-white bg-transparent shadow-white shadow-[inset_0_0_0_1px] transition-shadow hocus:text-white hocus:shadow-[inset_0_0_0_3px] after:bg-white hocus:after:bg-white',
15+
'su-bg-plum su-bg-hocus-plum-dark su-text-white su-text-hocus-white su-after-bg-white su-after-bg-hocus-white': 'bg-plum hocus:bg-plum-dark text-white hocus:text-white after:bg-white hocus:after:bg-white',
16+
'su-bg-cardinal-dark-to-spirited-dark su-bg-hocus-plum-dark su-text-white su-text-hocus-white su-after-bg-white su-after-bg-hocus-white su-transition-none': 'from-cardinal-dark to-spirited-dark hocus:bg-plum-dark text-white hocus:text-white after:bg-white hocus:after:bg-white transition-none',
17+
'su-bg-plum-to-digital-red su-bg-hocus-plum-dark su-text-white su-text-hocus-white su-after-bg-white su-after-bg-hocus-white su-transition-none': 'from-plum to-digital-red hocus:bg-plum-dark text-white hocus:text-white after:bg-white hocus:after:bg-white transition-none',
18+
'su-bg-plum-to-spirited-dark su-bg-hocus-plum-dark su-text-white su-text-hocus-white su-after-bg-white su-after-bg-hocus-white su-transition-none': 'from-plum to-spirited-dark hocus:bg-plum-dark text-white hocus:text-white after:bg-white hocus:after:bg-white transition-none',
19+
'su-bg-palo-alto-dark-to-palo-verde-dark su-bg-hocus-plum-dark su-text-white su-text-hocus-white su-after-bg-white su-after-bg-hocus-white su-transition-none': 'from-palo-alto-dark to-palo-verde-dark hocus:bg-plum-dark text-white hocus:text-white after:bg-white hocus:after:bg-white transition-none',
20+
'su-bg-sky-dark-to-olive-dark su-bg-hocus-plum-dark su-text-white su-text-hocus-white su-after-bg-white su-after-bg-hocus-white su-transition-none': 'from-sky-dark to-olive-dark hocus:bg-plum-dark text-white hocus:text-white after:bg-white hocus:after:bg-white transition-none',
21+
'su-bg-sky-dark-to-bay-dark su-bg-hocus-plum-dark su-text-white su-text-hocus-white su-after-bg-white su-after-bg-hocus-white su-transition-none': 'from-sky-dark to-bay-dark hocus:bg-plum-dark text-white hocus:text-white after:bg-white hocus:after:bg-white transition-none',
22+
};
23+
24+
export type CtaLinkStylesType = keyof typeof ctaLinkStyles;
25+
26+
export const ctaLinkColors = {
27+
'su-text-digital-red su-after-bg-digital-red su-text-hocus-sky-dark su-after-bg-hocus-sky-dark': 'text-digital-red after:bg-digital-red hocus:text-sky-dark hocus:after:bg-sky-dark',
28+
'su-text-white su-text-hocus-white su-hocus-underline su-after-bg-white su-after-bg-hocus-white': 'text-white hocus:text-white hocus:underline after:bg-white hocus:after:bg-white',
29+
'ood-cta__link-gradient su-bg-sky-dark-to-bay-dark su-after-bg-sky-dark-to-bay-dark': 'bg-clip-text from-sky-dark to-bay-dark after:from-sky-dark after:to-bay-dark',
30+
'ood-cta__link-gradient su-bg-cardinal-dark-to-spirited-dark su-after-bg-cardinal-dark-to-spirited-dark': 'bg-clip-text from-cardinal-dark to-spirited-dark after:from-cardinal-dark after:to-spirited-dark',
31+
'ood-cta__link-gradient su-bg-plum-to-digital-red su-after-bg-plum-to-digital-red': 'bg-clip-text from-plum to-digital-red after:from-plum after:to-digital-red',
32+
'ood-cta__link-gradient su-bg-plum-to-spirited-dark su-after-bg-plum-to-spirited-dark': 'bg-clip-text from-plum to-spirited-dark after:from-plum after:to-spirited-dark',
33+
'ood-cta__link-gradient su-bg-palo-alto-dark-to-palo-verde-dark su-after-bg-palo-alto-dark-to-palo-verde-dark': 'bg-clip-text from-palo-alto-dark to-palo-verde-dark after:from-palo-alto-dark after:to-palo-verde-dark',
34+
'ood-cta__link-gradient su-bg-sky-dark-to-olive-dark su-after-bg-sky-dark-to-olive-dark': 'bg-clip-text from-sky-dark to-olive-dark after:from-sky-dark after:to-olive-dark',
35+
// TODO: Has an extra su-after-bg-sky-dark-to-bay-dark in SB
36+
'ood-cta__link-gradient su-bg-sky-dark-to-bay-dark': 'bg-clip-text from-sky-dark to-bay-dark',
37+
'su-text-lagunita-dark su-after-bg-lagunita-dark su-text-hocus-plum-dark su-after-bg-hocus-plum-dark': 'text-lagunita-dark after:bg-lagunita-dark hocus:text-plum-dark hocus:after:bg-plum-dark',
38+
'su-text-palo-verde su-after-bg-palo-verde su-text-hocus-plum-dark su-after-bg-hocus-plum-dark': 'text-palo-verde after:bg-palo-verde hocus:text-plum-dark hocus:after:bg-plum-dark',
39+
'su-text-plum su-after-bg-plum su-text-hocus-plum-dark su-after-bg-hocus-plum-dark': 'text-plum after:bg-plum hocus:text-plum-dark hocus:after:bg-plum-dark',
40+
'su-text-brick su-after-bg-brick su-text-hocus-plum-dark su-after-bg-hocus-plum-dark': 'text-brick after:bg-brick hocus:text-plum-dark hocus:after:bg-plum-dark',
41+
'su-text-cardinal-red su-after-bg-cardinal-red su-text-hocus-plum-dark su-after-bg-hocus-plum-dark': 'text-cardinal-red after:bg-cardinal-red hocus:text-plum-dark hocus:after:bg-plum-dark',
42+
'su-text-palo-alto su-after-bg-palo-alto su-text-hocus-plum-dark su-after-bg-hocus-plum-dark': 'text-palo-alto after:bg-palo-alto hocus:text-plum-dark hocus:after:bg-plum-dark',
43+
'su-text-bay-dark su-after-bg-bay-dark su-text-hocus-plum-dark su-after-bg-hocus-plum-dark': 'text-bay-dark after:bg-bay-dark hocus:text-plum-dark hocus:after:bg-plum-dark',
44+
'su-text-sky-dark su-after-bg-sky-dark su-text-hocus-plum-dark su-after-bg-hocus-plum-dark': 'text-sky-dark after:bg-sky-dark hocus:text-plum-dark hocus:after:bg-plum-dark',
45+
'su-text-lagunita su-after-bg-lagunita su-text-hocus-plum-dark su-after-bg-hocus-plum-dark': 'text-lagunita after:bg-lagunita hocus:text-plum-dark hocus:after:bg-plum-dark',
46+
};
47+
48+
export type CtaLinkColorsType = keyof typeof ctaLinkColors;
49+
50+
export const ctaSizes = {
51+
'': '',
52+
'ood-cta__button--medium': 'pt-11 px-30 pb-12 text-20 md:py-14 md:px-34 md:text-24',
53+
'ood-cta__button--large': 'py-16 px-30 text-22 md:py-20 md:px-36 md:text-28',
54+
};
55+
56+
export type CtaSizesType = keyof typeof ctaSizes;
57+
58+
export const linkIcons = {
59+
'su-link--action': '',
60+
'su-link--jump': '',
61+
'su-link--external': '',
62+
'su-link--internal': '',
63+
'su-link--download': '',
64+
'su-link--video': '',
65+
'su-link--no-icon': '',
66+
};
67+
68+
export type LinkIconsType = keyof typeof linkIcons;
69+
970
export const paddingTops = {
1071
none: '',
1172
base: 'rs-pt-0',

‎utilities/storyblok.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import { SbStoryPicker } from '@/components/Storyblok/SbStoryPage';
1313
import { Redirect } from '@/components/Redirect';
1414
import { SbLocalFooterPicker } from '@/components/Storyblok/SbLocalFooterPicker';
1515
import { SbLocalFooter } from '@/components/Storyblok/SbLocalFooter';
16-
// import { SbCtaLink } from '@/components/Storyblok/SbCtaLink';
16+
import { SbCtaLink } from '@/components/Storyblok/SbCtaLink';
1717
import { SbNavItem } from '@/components/Storyblok/SbNavItem';
1818
import { SbLockup } from '@/components/Storyblok/SbLockup';
1919
import { SbSingleColumnContent } from '@/components/Storyblok/SbSingleColumnContent';
@@ -24,7 +24,7 @@ export const components = {
2424
page: SbPage,
2525
redirect: Redirect,
2626
storyPicker: SbStoryPicker,
27-
// ctaLink: SbCtaLink,
27+
ctaLink: SbCtaLink,
2828
navItem: SbNavItem,
2929
lockup: SbLockup,
3030
// Pages

0 commit comments

Comments
 (0)