Skip to content

Commit ad9475c

Browse files
yvonnetangsuyvonnetangsu
committed
Extract reusable subcomponent for link groups
1 parent 32430be commit ad9475c

File tree

1 file changed

+100
-99
lines changed

1 file changed

+100
-99
lines changed

‎components/Storyblok/SbLocalFooter.tsx

Lines changed: 100 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,36 @@ export type SbLocalFooterProps = {
2828
}
2929
};
3030

31+
type FooterLinkGroupProps = {
32+
heading?: string;
33+
links?: SbNavItemProps[];
34+
ariaLabel?: string;
35+
};
36+
37+
// Extract subcomponent for the link groups
38+
const FooterLinkGroup = ({
39+
heading,
40+
links,
41+
ariaLabel,
42+
}: FooterLinkGroupProps) => (
43+
<nav aria-label={ariaLabel}>
44+
{heading && (
45+
<Heading tracking="normal" className={styles.linkGroupHeading}>
46+
{heading}
47+
</Heading>
48+
)}
49+
<ul className={styles.linkGroup}>
50+
{links?.map((navItem) => (
51+
<li key={navItem._uid}>
52+
<CtaLink sbLink={navItem.link} variant="local-footer" icon={navItem.linkClass}>
53+
{navItem.linkTextLabel}
54+
</CtaLink>
55+
</li>
56+
))}
57+
</ul>
58+
</nav>
59+
);
60+
3161
const styles = {
3262
root: 'w-full',
3363
logoWrapper: 'rs-pb-3',
@@ -38,107 +68,78 @@ const styles = {
3868
linkGroupHeading: 'text-20',
3969
};
4070

41-
export const SbLocalFooter = (props: SbLocalFooterProps) => (
42-
<Container {...storyblokEditable(props.blok)} bgColor="white" pt={4} pb={5} className={styles.root}>
43-
<div className={styles.logoWrapper}>
44-
<CreateBloks blokSection={props.blok.websiteLogo} />
45-
</div>
46-
<Grid as="section" md={2} xl={4} className={styles.grid}>
47-
<div>
48-
{props.blok.contactHeading && (
49-
<Heading tracking="normal" className={styles.linkGroupHeading}>
50-
{props.blok.contactHeading}
51-
</Heading>
52-
)}
53-
<FlexBox as="address" direction="col" className={styles.address}>
54-
{props.blok.addressLine1 && (
55-
<span>{props.blok.addressLine1}</span>
56-
)}
57-
{props.blok.addressLine2 && (
58-
<span>{props.blok.addressLine2}</span>
59-
)}
60-
{props.blok.addressLine3 && (
61-
<span>{props.blok.addressLine3}</span>
62-
)}
63-
{props.blok.phone && <span>{props.blok.phone}</span>}
64-
{props.blok.email && (
65-
<a href={`mailto:${props.blok.email}`}>{props.blok.email}</a>
66-
)}
67-
</FlexBox>
68-
{props.blok.cta && (
69-
<div className={styles.ctaWrapper}>
70-
<CreateBloks blokSection={props.blok.cta} />
71-
</div>
72-
)}
73-
</div>
74-
<div>
75-
<nav aria-label="Local footer Office of Development links">
76-
{props.blok.headingGroupOod && (
77-
<Heading tracking="normal" className={styles.linkGroupHeading}>
78-
{props.blok.headingGroupOod}
79-
</Heading>
80-
)}
81-
<ul className={styles.linkGroup}>
82-
{props.blok.linkGroupOod?.map((navItem) => (
83-
<li key={navItem._uid}>
84-
<CtaLink
85-
sbLink={navItem.link}
86-
variant="local-footer"
87-
icon={navItem.linkClass}
88-
>
89-
{navItem.linkTextLabel}
90-
</CtaLink>
91-
</li>
92-
))}
93-
</ul>
94-
</nav>
71+
export const SbLocalFooter = (props: SbLocalFooterProps) => {
72+
const {
73+
contactHeading,
74+
addressLine1,
75+
addressLine2,
76+
addressLine3,
77+
phone,
78+
email,
79+
headingGroupOod,
80+
headingGroupGift,
81+
taxId,
82+
headingGroupInfo,
83+
websiteLogo,
84+
cta,
85+
linkGroupOod,
86+
linkGroupGift,
87+
linkGroupInfo,
88+
} = props.blok;
89+
90+
return (
91+
<Container {...storyblokEditable(props.blok)} bgColor="white" pt={4} pb={5} className={styles.root}>
92+
<div className={styles.logoWrapper}>
93+
<CreateBloks blokSection={websiteLogo} />
9594
</div>
96-
<div>
97-
<nav aria-label="Local footer Make a Gift links">
98-
{props.blok.headingGroupGift && (
95+
<Grid as="section" md={2} xl={4} className={styles.grid}>
96+
<div>
97+
{contactHeading && (
9998
<Heading tracking="normal" className={styles.linkGroupHeading}>
100-
{props.blok.headingGroupGift}
99+
{contactHeading}
101100
</Heading>
102101
)}
103-
<ul className={styles.linkGroup}>
104-
{props.blok.linkGroupGift?.map((navItem) => (
105-
<li key={navItem._uid}>
106-
<CtaLink
107-
sbLink={navItem.link}
108-
variant="local-footer"
109-
icon={navItem.linkClass}
110-
>
111-
{navItem.linkTextLabel}
112-
</CtaLink>
113-
</li>
114-
))}
115-
</ul>
116-
</nav>
117-
<Heading tracking="normal" mt={2} className={styles.linkGroupHeading}>Tax ID</Heading>
118-
<span>{props.blok.taxId}</span>
119-
</div>
120-
<div>
121-
<nav aria-label="Local footer information links">
122-
{props.blok.headingGroupInfo && (
123-
<Heading tracking="normal" className={styles.linkGroupHeading}>
124-
{props.blok.headingGroupInfo}
125-
</Heading>
102+
<FlexBox as="address" direction="col" className={styles.address}>
103+
{addressLine1 && (
104+
<span>{addressLine1}</span>
105+
)}
106+
{addressLine2 && (
107+
<span>{addressLine2}</span>
108+
)}
109+
{addressLine3 && (
110+
<span>{addressLine3}</span>
111+
)}
112+
{phone && <span>{phone}</span>}
113+
{email && (
114+
<a href={`mailto:${email}`}>{email}</a>
115+
)}
116+
</FlexBox>
117+
{cta && (
118+
<div className={styles.ctaWrapper}>
119+
<CreateBloks blokSection={cta} />
120+
</div>
126121
)}
127-
<ul className={styles.linkGroup}>
128-
{props.blok.linkGroupInfo?.map((navItem) => (
129-
<li key={navItem._uid}>
130-
<CtaLink
131-
sbLink={navItem.link}
132-
variant="local-footer"
133-
icon={navItem.linkClass}
134-
>
135-
{navItem.linkTextLabel}
136-
</CtaLink>
137-
</li>
138-
))}
139-
</ul>
140-
</nav>
141-
</div>
142-
</Grid>
143-
</Container>
144-
);
122+
</div>
123+
<FooterLinkGroup
124+
heading={headingGroupOod}
125+
links={linkGroupOod}
126+
ariaLabel="Local footer Office of Development links"
127+
/>
128+
<div>
129+
<FooterLinkGroup
130+
heading={headingGroupGift}
131+
links={linkGroupGift}
132+
ariaLabel="Local footer Make a Gift links"
133+
/>
134+
<Heading tracking="normal" mt={2} className={styles.linkGroupHeading}>Tax ID</Heading>
135+
<span>{taxId}</span>
136+
</div>
137+
<FooterLinkGroup
138+
heading={headingGroupInfo}
139+
links={linkGroupInfo}
140+
ariaLabel="Local footer information links"
141+
/>
142+
</Grid>
143+
</Container>
144+
);
145+
};

0 commit comments

Comments
 (0)