Skip to content

Commit

Permalink
Merge pull request #241 from SU-SWS/release/v1.2.1
Browse files Browse the repository at this point in the history
Release/v1.2.1
  • Loading branch information
yvonnetangsu authored Mar 5, 2024
2 parents 0b78eee + 879b341 commit 89453d0
Show file tree
Hide file tree
Showing 7 changed files with 39 additions and 8 deletions.
4 changes: 4 additions & 0 deletions components/Cta/Cta.styles.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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',
Expand Down
11 changes: 6 additions & 5 deletions components/HeroIcon/HeroIcon.styles.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
12 changes: 10 additions & 2 deletions components/Storyblok/SbCta.tsx
Original file line number Diff line number Diff line change
@@ -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: {
Expand All @@ -14,6 +19,7 @@ type SbCtaType = {
curve?: CtaCurveType;
isLarge?: boolean;
icon?: IconType;
animation?: IconAnimationType;
};
};

Expand All @@ -26,6 +32,7 @@ export const SbCta = ({
curve,
isLarge,
icon,
animation,
},
blok,
}: SbCtaType) => {
Expand All @@ -43,6 +50,7 @@ export const SbCta = ({
color={color}
srText={srText}
icon={icon}
animate={animation}
>
{label}
</CtaLink>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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: {
Expand All @@ -21,6 +23,7 @@ type SbHomepageThemeSectionProps = {
heading?: string;
intro?: StoryblokRichtext;
content?: SbBlokData[];
cta?: SbBlokData[];
bgImage?: SbImageType;
bgBlur?: BgBlurType;
gradientTop?: GradientToType;
Expand All @@ -34,6 +37,7 @@ export const SbHomepageThemeSection = ({
heading,
intro,
content,
cta,
bgImage: { filename, focus } = {},
bgBlur,
gradientTop,
Expand Down Expand Up @@ -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>
);
};
2 changes: 1 addition & 1 deletion components/Storyblok/SbSection/SbSection.styles.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { header } from '@/components/Scrollytelling';
import { cnb } from 'cnbuilder';

export type AlignType = 'left' | 'center' | 'right';
Expand Down Expand Up @@ -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';
8 changes: 8 additions & 0 deletions components/Storyblok/SbSection/SbSection.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand All @@ -36,6 +37,7 @@ type SbSectionProps = {
headingLevel?: HeadingType;
isSerifHeader?: boolean;
subheading?: string;
cta?: SbBlokData[];
caption?: StoryblokRichtext;
captionColumnWidth?: '12' | '10' | '8' | '6' | '4';
barColor?: {
Expand All @@ -61,6 +63,7 @@ export const SbSection = ({
isSerifHeader,
headingLevel,
subheading,
cta,
caption,
captionColumnWidth,
barColor: { value: barColorValue } = {},
Expand Down Expand Up @@ -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) && (
Expand Down

0 comments on commit 89453d0

Please sign in to comment.