scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(BOOK-204): Added dynamic h1 to startpage

Browse Source 
Approved-by: Christel Westerberg
This commit is contained in:
Erik Tiekstra
2025-11-26 14:26:11 +00:00
parent 05ed0533fb
commit 6ac8267c31
14 changed files with 199 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
apps/scandic-web/components/Blocks/FullWidthCampaign/index.tsx
View File

@@ -1,7 +1,5 @@
import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
import Image from "@scandic-hotels/design-system/Image"
import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
import Link from "@scandic-hotels/design-system/OldDSLink"
import Title from "@scandic-hotels/design-system/Title"
import { Typography } from "@scandic-hotels/design-system/Typography"
import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
@@ -12,10 +10,15 @@ import type { FullWidthCampaign } from "@/types/trpc/routers/contentstack/startP
interface FullWidthCampaignProps {
content: FullWidthCampaign
headingLevel?: "h1" | "h2"
}
export default function FullWidthCampaign({ content }: FullWidthCampaignProps) {
export default function FullWidthCampaign({
content,
headingLevel = "h2",
}: FullWidthCampaignProps) {
const { background_image, primary_button, secondary_button } = content
const Hx = headingLevel
return (
<div className={styles.container}>
@@ -36,53 +39,38 @@ export default function FullWidthCampaign({ content }: FullWidthCampaignProps) {
</BiroScript>
</div>
<div className={styles.mainContent}>
<Title
color="baseText"
textAlign="center"
textTransform="capitalize"
level="h3"
>
{content.heading}
</Title>
<Typography className={styles.bodyText} variant="Body/Lead text">
<p>{content.body_text}</p>
<Typography variant="Title/mdLowCase">
<Hx className={styles.bodyText}>{content.heading}</Hx>
</Typography>
<Typography variant="Body/Lead text">
<p className={styles.bodyText}>{content.body_text}</p>
</Typography>
<div className={styles.buttons}>
{content.has_primary_button ? (
<Button
intent="inverted"
size="small"
theme="base"
asChild
className={styles.buttonWrapper}
fullWidth
<ButtonLink
href={primary_button.href}
target={primary_button.openInNewTab ? "_blank" : undefined}
variant="Primary"
color="Inverted"
size="Small"
typography="Body/Supporting text (caption)/smBold"
className={styles.button}
>
<Link
href={primary_button.href}
target={primary_button.openInNewTab ? "_blank" : undefined}
color="none"
>
{primary_button.title}
</Link>
</Button>
{primary_button.title}
</ButtonLink>
) : null}
{content.has_secondary_button ? (
<Button
intent="secondary"
size="small"
theme="primaryStrong"
className={styles.buttonWrapper}
asChild
fullWidth
<ButtonLink
href={secondary_button.href}
target={secondary_button.openInNewTab ? "_blank" : undefined}
variant="Secondary"
size="Small"
color="Inverted"
className={styles.button}
typography="Body/Supporting text (caption)/smBold"
>
<Link
href={secondary_button.href}
target={secondary_button.openInNewTab ? "_blank" : undefined}
color="none"
>
{secondary_button.title}
</Link>
</Button>
{secondary_button.title}
</ButtonLink>
) : null}
</div>
</div>