Skip to content

Commit b2ff627

Browse files
yvonnetangsuyvonnetangsu
committed
Add HeaderNoImage; remove some old components
1 parent 33ed1db commit b2ff627

13 files changed

+97
-209
lines changed

‎components/Storyblok/PageRegions/Header.types.ts renamed to ‎components/Storyblok/Header/Header.types.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { type DarkBgColorsType, type MarginType } from '@/utilities/datasource';
1010
export type HeaderProps = React.HTMLAttributes<HTMLDivElement> & {
1111
blok: SbBlokData & {
1212
contentMenu?: SbBlokData[];
13-
title: string;
13+
title?: string;
1414
intro?: StoryblokRichtext;
1515
headerSpacingBottom?: MarginType;
1616
headerBackgroundColor?: DarkBgColorsType;

‎components/Storyblok/PageRegions/HeaderFullWidthImage.tsx renamed to ‎components/Storyblok/Header/HeaderFullWidthImage.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ export const HeaderFullWidthImage = ({ blok }: HeaderFullWidthImageProps) => {
5252
as="h1"
5353
id="page-title"
5454
align="center"
55-
className="text-black w-full mb-20 fluid-type-5 md:text-left"
55+
className="text-black w-full mb-08em fluid-type-5 md:text-left text-balance"
5656
>
5757
{title}
5858
</Heading>

‎components/Storyblok/PageRegions/HeaderMinimal.tsx renamed to ‎components/Storyblok/Header/HeaderMinimal.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { cnb } from 'cnbuilder';
22
import { Container } from '@/components/Container';
33
import { Heading } from '@/components/Typography';
4-
import { type HeaderProps } from '@/components/Storyblok/PageRegions';
4+
import { type HeaderProps } from '@/components/Storyblok/Header';
55
import { darkBgColors } from '@/utilities/datasource';
66

77
type HeaderMinimalProps = Partial<HeaderProps>;
@@ -13,7 +13,7 @@ export const HeaderMinimal = ({ blok }: HeaderMinimalProps) => {
1313
<Container
1414
className={cnb(
1515
'py-38 md:py-72 lg:py-108 xl:py-[11.1rem] break-words',
16-
darkBgColors[bgColor || 'palo-alto'],
16+
darkBgColors[bgColor || 'palo-alto-dark'],
1717
)}
1818
>
1919
<Heading

‎components/Storyblok/Header/HeaderNoImage.tsx

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import { Container } from '@/components/Container';
2+
import { Heading } from '@/components/Typography';
3+
import { RichText } from '@/components/RichText';
4+
import { hasRichText } from '@/utilities/hasRichText';
5+
import { type HeaderProps } from './Header.types';
6+
import { darkBgColors } from '@/utilities/datasource';
7+
8+
type HeaderNoImageProps = Partial<HeaderProps>;
9+
10+
export const HeaderNoImage = ({ blok }: HeaderNoImageProps) => {
11+
const {
12+
title,
13+
intro: introText,
14+
headerBackgroundColor: bgColor,
15+
} = blok;
16+
17+
return (
18+
<div className="break-words">
19+
<Container pt={7} pb={9} className={darkBgColors[bgColor || 'palo-alto-dark']}>
20+
<Heading
21+
as="h1"
22+
id="page-title"
23+
align="center"
24+
size="f5"
25+
mb="none"
26+
color={bgColor === 'fog-light' ? 'black' : 'white'}
27+
className="relative w-full mx-auto max-w-1200"
28+
>
29+
{title}
30+
</Heading>
31+
</Container>
32+
<Container mb="none">
33+
<div className="bg-white w-full mb-0 mt-[-3em] md:mt-[-6em] rs-p-4 relative basis-0 shrink-0 max-w-full shadow-md">
34+
{hasRichText(introText) && (
35+
<div className="relative w-full xl:w-3/4 mx-auto">
36+
<RichText wysiwyg={introText} className="md:text-center text-20 md:text-25 lg:text-29" />
37+
</div>
38+
)}
39+
</div>
40+
</Container>
41+
</div>
42+
);
43+
};

‎components/Storyblok/PageRegions/index.ts renamed to ‎components/Storyblok/Header/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
export * from './HeaderFullWidthImage';
22
export * from './HeaderMinimal';
3+
export * from './HeaderNoImage';
34
export * from './Header.types';

‎components/Storyblok/SbInteriorPage.tsx

Lines changed: 36 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,19 @@
11
import { type SbBlokData, storyblokEditable } from '@storyblok/react/rsc';
2-
// import { HeaderNoImage, type HeaderNoImageProps } from '@/components/Storyblok/partials/HeaderNoImage';
3-
// import { HeaderWithImage, type HeaderWithImageProps } from '@/components/Storyblok/partials/HeaderWithImage';
4-
import { BelowContent, type BelowContentProps } from '@/components/Storyblok/partials/BelowContent';
52
import {
6-
HeaderFullWidthImage, HeaderMinimal, type HeaderProps,
7-
} from '@/components/Storyblok/PageRegions';
3+
HeaderFullWidthImage, HeaderMinimal, HeaderNoImage, type HeaderProps,
4+
} from '@/components/Storyblok/Header';
85
import { BodyLeftSidebar, type BodyLeftSidebarProps } from '@/components/Storyblok/partials/BodyLeftSidebar';
96
import { BodyNoSidebar, type BodyNoSidebarProps } from '@/components/Storyblok/partials/BodyNoSidebar';
107
import { IconCardSection, type IconCardSectionProps } from '@/components/Storyblok/partials/IconCardSection';
118
import { Footer, type FooterProps } from '@/components/Storyblok/partials/Footer';
129
import { CenteredContainer } from '@/components/Storyblok/partials/CenteredContainer';
1310
import { Heading } from '@/components/Typography';
1411
import { CreateBloks } from '@/components/CreateBloks';
12+
import { getNumBloks } from '@/utilities/getNumBloks';
1513

1614
export type SbInteriorPageProps = HeaderProps
1715
& BodyNoSidebarProps
1816
& BodyLeftSidebarProps
19-
& BelowContentProps
2017
& IconCardSectionProps
2118
& FooterProps
2219
& {
@@ -25,6 +22,7 @@ export type SbInteriorPageProps = HeaderProps
2522
alertPicker: SbBlokData[];
2623
aboveContent: SbBlokData[];
2724
content: SbBlokData[];
25+
belowContent: SbBlokData[];
2826
bodyTitle: string;
2927
};
3028
slug?: string;
@@ -37,44 +35,44 @@ export const SbInteriorPage = (props: SbInteriorPageProps) => {
3735
<CreateBloks blokSection={props.blok.localHeader} slug={props.slug} />
3836
<main id="main-content" className={`ood-interior-page ood-interior-page--${props.blok.headerStyle}`}>
3937
<article className="bg-fog-light">
40-
{/* {props.blok.headerStyle === 'has-image' && (
41-
<HeaderWithImage {...props} />
42-
)}
43-
{props.blok.headerStyle === 'no-image' && (
44-
<HeaderNoImage {...props} />
45-
)} */}
46-
{props.blok.headerStyle === 'minimal' && <HeaderMinimal {...props} />}
47-
{props.blok.headerStyle === 'full-width-image' && (
48-
<HeaderFullWidthImage {...props} />
49-
)}
50-
{props.blok.aboveContent != null &&
51-
Object.keys(props.blok.aboveContent).length > 0 && (
52-
<div className="ood-interior-page__above-body">
53-
<CreateBloks blokSection={props.blok.aboveContent} />
54-
</div>
38+
<header>
39+
{/* {props.blok.headerStyle === 'has-image' && (
40+
<HeaderWithImage {...props} />
41+
)} */}
42+
{props.blok.headerStyle === 'no-image' && (
43+
<HeaderNoImage {...props} />
5544
)}
56-
{(props.blok.bodyTitle ||
57-
(props.blok.pageContent != null && Object.keys(props.blok.pageContent).length > 0)) && (
58-
<section className="ood-interior-page__body">
59-
{props.blok.bodyTitle && (
60-
<header className="centered-container ood-interior-page__body-header text-left">
61-
<Heading className="ood-interior-page__body-header-title ood-has-tab-before">
62-
{props.blok.bodyTitle}
63-
</Heading>
64-
</header>
45+
{props.blok.headerStyle === 'minimal' && <HeaderMinimal {...props} />}
46+
{props.blok.headerStyle === 'full-width-image' && (
47+
<HeaderFullWidthImage {...props} />
48+
)}
49+
</header>
50+
{!!getNumBloks(props.blok.aboveContent) && (
51+
<div className="ood-interior-page__above-body">
52+
<CreateBloks blokSection={props.blok.aboveContent} />
53+
</div>
54+
)}
55+
{(props.blok.bodyTitle || !!getNumBloks(props.blok.pageContent)) && (
56+
<section className="ood-interior-page__body">
57+
{props.blok.bodyTitle && (
58+
<header className="centered-container ood-interior-page__body-header text-left">
59+
<Heading className="ood-interior-page__body-header-title ood-has-tab-before">
60+
{props.blok.bodyTitle}
61+
</Heading>
62+
</header>
6563
)}
66-
<CenteredContainer flex={true} classes={`ood-interior-page__body-container`}>
67-
{props.blok.layout === 'no-sidebar' && (
68-
<BodyNoSidebar {...props} />
64+
<CenteredContainer flex={true} classes={`ood-interior-page__body-container`}>
65+
{props.blok.layout === 'no-sidebar' && (
66+
<BodyNoSidebar {...props} />
6967
)}
70-
{props.blok.layout === 'left-sidebar' && (
71-
<BodyLeftSidebar {...props} />
68+
{props.blok.layout === 'left-sidebar' && (
69+
<BodyLeftSidebar {...props} />
7270
)}
73-
</CenteredContainer>
74-
</section>
71+
</CenteredContainer>
72+
</section>
7573
)
7674
}
77-
<BelowContent {...props} />
75+
<CreateBloks blokSection={props.blok.belowContent} />
7876
<footer className="ood-interior-page__main-footer">
7977
<IconCardSection {...props} />
8078
</footer>

‎components/Storyblok/SbStoryOverviewPage.tsx

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,16 @@
1-
import React from 'react';
21
import { type SbBlokData } from '@storyblok/react/rsc';
32
import { storyblokEditable } from '@storyblok/react/rsc';
43
import { CreateBloks } from '@/components/CreateBloks';
54
import { Footer, type FooterProps } from '@/components/Storyblok/partials/Footer';
65
import { HeaderNoImage, type HeaderNoImageProps } from '@/components/Storyblok/partials/HeaderNoImage';
76
import { IconCardSection, type IconCardSectionProps } from '@/components/Storyblok/partials/IconCardSection';
8-
import { BelowContent, type BelowContentProps } from '@/components/Storyblok/partials/BelowContent';
97

10-
type SbStoryOverviewPageProps = HeaderNoImageProps & IconCardSectionProps & BelowContentProps & FooterProps & {
8+
type SbStoryOverviewPageProps = HeaderNoImageProps & IconCardSectionProps & FooterProps & {
119
blok: SbBlokData & {
1210
localHeader: SbBlokData[];
1311
alertPicker: SbBlokData[];
1412
stories: SbBlokData[];
13+
belowContent: SbBlokData[];
1514
}
1615
};
1716

@@ -27,7 +26,7 @@ export const SbStoryOverviewPage = (props: SbStoryOverviewPageProps) => {
2726
<article className="bg-white">
2827
<HeaderNoImage {...props} />
2928
<CreateBloks blokSection={props.blok.stories} />
30-
<BelowContent {...props} />
29+
<CreateBloks blokSection={props.blok.belowContent} />
3130
<footer className="ood-interior-page__main-footer">
3231
<IconCardSection {...props} />
3332
</footer>

‎components/Storyblok/SbStoryPage/SbStoryFullView.tsx

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,18 @@
1-
import React from 'react';
21
import { storyblokEditable, type SbBlokData } from '@storyblok/react/rsc';
32
import { CreateBloks } from '@/components/CreateBloks';
43
import { CenteredContainer } from '@/components/Storyblok/partials/CenteredContainer';
54
import { IconCardSection, type IconCardSectionProps } from '@/components/Storyblok/partials/IconCardSection';
65
import { Footer, type FooterProps } from '@/components/Storyblok/partials/Footer';
7-
import { BelowContent, type BelowContentProps } from '@/components/Storyblok/partials/BelowContent';
86
import { Heading, Paragraph } from '@/components/Typography';
97
import { FlexCell } from '@/components/Storyblok/partials/FlexCell';
108
import { FullWidthImage, type VisibleVerticalType } from '@/components/Image';
119
import { type SbImageType } from '../Storyblok.types';
1210

13-
export type SbStoryFullViewProps = IconCardSectionProps & FooterProps & BelowContentProps & {
11+
export type SbStoryFullViewProps = IconCardSectionProps & FooterProps & {
1412
blok: SbBlokData & {
1513
localHeader: SbBlokData[];
1614
alertPicker: SbBlokData[];
15+
belowContent: SbBlokData[];
1716
publishedDate?: string;
1817
manualDate?: string;
1918
heroImage: SbImageType;
@@ -144,7 +143,7 @@ export const SbStoryFullView = (props: SbStoryFullViewProps) => {
144143
</CenteredContainer>
145144
</div>
146145
)}
147-
<BelowContent {...props} />
146+
<CreateBloks blokSection={props.blok.belowContent} />
148147
<IconCardSection {...props} />
149148
</footer>
150149
</article>

‎components/Storyblok/SbSupportPage.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
11
'use client';
2-
import React, { type MouseEventHandler, useCallback, useEffect } from 'react';
2+
import { type MouseEventHandler, useCallback, useEffect } from 'react';
33
import { useRouter } from 'next/navigation';
44
import { storyblokEditable, type SbBlokData } from '@storyblok/react/rsc';
55
import { CreateBloks } from '@/components/CreateBloks';
66
import { HeaderNoImage, type HeaderNoImageProps } from '@/components/Storyblok/partials/HeaderNoImage';
77
import { Footer, type FooterProps } from '@/components/Storyblok/partials/Footer';
8-
import { BelowContent, type BelowContentProps } from '@/components/Storyblok/partials/BelowContent';
98
import { IconCardSection, type IconCardSectionProps } from '@/components/Storyblok/partials/IconCardSection';
109
import { CenteredContainer } from '@/components/Storyblok/partials/CenteredContainer';
1110
import { Heading, SrOnlyText } from '@/components/Typography';
1211
import { Grid } from '../Grid';
1312

14-
export type SbSupportPageProps = HeaderNoImageProps & IconCardSectionProps & FooterProps & BelowContentProps & {
13+
export type SbSupportPageProps = HeaderNoImageProps & IconCardSectionProps & FooterProps & {
1514
blok: SbBlokData & {
1615
localHeader: SbBlokData[];
1716
alertPicker: SbBlokData[];
17+
belowContent: SbBlokData[];
1818
bodyTitle: string;
1919
srText: string;
2020
undergraduate: SbBlokData[];
@@ -191,7 +191,7 @@ export const SbSupportPage = (props: SbSupportPageProps) => {
191191
</Grid>
192192
</CenteredContainer>
193193
</section>
194-
<BelowContent {...props} />
194+
<CreateBloks blokSection={props.blok.belowContent} />
195195
<footer className="ood-support-page__main-footer">
196196
<IconCardSection {...props} />
197197
</footer>

‎components/Storyblok/partials/BelowContent.tsx

Lines changed: 0 additions & 21 deletions
This file was deleted.

0 commit comments

Comments
 (0)