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

fix(SW-2681): Fixed position of scripted text and using design system components

Browse Source 
Approved-by: Matilda Landström
This commit is contained in:
Erik Tiekstra
2025-05-26 12:32:53 +00:00
parent d73f8d844e
commit 7e17e9cf4c
2 changed files with 56 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
apps/scandic-web/components/Blocks/JoinScandicFriends/index.tsx
View File

@@ -1,11 +1,8 @@
import SurpriseIcon from "@scandic-hotels/design-system/Icons/SurpriseIcon" import SurpriseIcon from "@scandic-hotels/design-system/Icons/SurpriseIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"
import ButtonLink from "@/components/ButtonLink"
import Image from "@/components/Image" import Image from "@/components/Image"
import Button from "@/components/TempDesignSystem/Button"
import Link from "@/components/TempDesignSystem/Link"
import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
import Body from "@/components/TempDesignSystem/Text/Body"
import Title from "@/components/TempDesignSystem/Text/Title"
import { isLoggedInUser } from "@/utils/isLoggedInUser" import { isLoggedInUser } from "@/utils/isLoggedInUser"
import styles from "./joinScandicFriends.module.css" import styles from "./joinScandicFriends.module.css"
@@ -44,53 +41,44 @@ export default async function JoinScandicFriends({
<div className={styles.textContent}> <div className={styles.textContent}>
{show_header ? ( {show_header ? (
<header className={styles.header}> <header className={styles.header}>
<div> {content.scripted_top_title ? (
<BiroScript <Typography variant="Title/Decorative/md">
color="red" <span className={styles.scriptedText}>
type="two" {content.scripted_top_title}
tilted="small" </span>
className={styles.scriptedText} </Typography>
> ) : null}
{content.scripted_top_title} <Typography variant="Title/xs">
</BiroScript> <h2 className={styles.heading}>{content.title}</h2>
</div> </Typography>
<Title level="h2" as="h4">
{content.title}
</Title>
</header> </header>
) : null} ) : null}
<Body>{content.preamble}</Body> <Typography variant="Body/Paragraph/mdRegular">
<p>{content.preamble}</p>
</Typography>
{show_usp && usp.length ? ( {show_usp && usp.length ? (
<ul className={styles.usp}> <ul className={styles.usp}>
{usp.map((uspBullet) => ( {usp.map((uspBullet) => (
<Body asChild key={uspBullet}> <Typography key={uspBullet} variant="Body/Paragraph/mdRegular">
<li>{uspBullet}</li> <li>{uspBullet}</li>
</Body> </Typography>
))} ))}
</ul> </ul>
) : null} ) : null}
</div> </div>
{content.has_primary_button ? ( {content.has_primary_button ? (
<div className={styles.buttonContainer}> <ButtonLink
<Button variant="Primary"
theme="base" size="Small"
intent="primary" href={primary_button.href}
size="small" target={primary_button.openInNewTab ? "_blank" : undefined}
fullWidth typography="Body/Supporting text (caption)/smBold"
asChild className={styles.primaryButton}
> >
<Link {primary_button.title}
href={primary_button.href} </ButtonLink>
target={primary_button.openInNewTab ? "_blank" : undefined}
color="none"
size="regular"
>
{primary_button.title}
</Link>
</Button>
</div>
) : null} ) : null}
</div> </div>
</div> </div>

47
apps/scandic-web/components/Blocks/JoinScandicFriends/joinScandicFriends.module.css
View File

@@ -1,14 +1,14 @@
.container { .container {
border-radius: var(--Corner-radius-lg); border-radius: var(--Corner-radius-lg);
background-color: var(--Main-Brand-WarmWhite); background-color: var(--Surface-Primary-OnSurface-Default);
padding: 0 var(--Spacing-x2); padding: 0 var(--Space-x2);
display: flex; display: flex;
gap: var(--Spacing-x5); gap: var(--Space-x5);
} }
@media screen and (min-width: 900px) { @media screen and (min-width: 900px) {
.container { .container {
padding: 0 var(--Spacing-x4) 0 0; padding: 0 var(--Space-x4) 0 0;
} }
} }
@@ -18,38 +18,51 @@
@media screen and (min-width: 900px) { @media screen and (min-width: 900px) {
.iconContainer { .iconContainer {
flex: 0 1 384; flex: 0 1 337px;
display: flex; /* gets rid of whitespace */ display: flex; /* gets rid of whitespace */
} }
} }
@media screen and (min-width: 1367px) {
.iconContainer {
flex-basis: 367px;
}
}
.content { .content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--Spacing-x3); gap: var(--Space-x3);
padding: var(--Spacing-x3) 0; padding: var(--Space-x3) 0;
flex: 1; flex: 1;
} }
.textContent { .textContent {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--Spacing-x2); gap: var(--Space-x2);
color: var(--Text-Default);
} }
.header { .header {
display: grid; display: grid;
gap: var(--Spacing-x-quarter); gap: var(--Space-x025);
} }
.scriptedText { .scriptedText {
display: inline-block; transform: rotate(-3deg);
color: var(--Text-Accent-Primary);
transform-origin: bottom left;
margin-top: var(--Space-x3);
}
.heading {
color: var(--Text-Heading);
} }
.usp { .usp {
list-style: none; list-style: none;
display: grid; display: grid;
gap: var(--Spacing-x1); gap: var(--Space-x1);
} }
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
@@ -57,7 +70,7 @@
grid-template-rows: repeat(3, auto); grid-template-rows: repeat(3, auto);
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
grid-auto-flow: column; grid-auto-flow: column;
padding: var(--Spacing-x-one-and-half) 0; padding: var(--Space-x15) 0;
} }
} }
@@ -77,7 +90,7 @@
.usp li { .usp li {
display: flex; display: flex;
gap: var(--Spacing-x1); gap: var(--Space-x1);
} }
.usp li:before { .usp li:before {
@@ -86,9 +99,7 @@
top: 3px; top: 3px;
} }
@media screen and (min-width: 768px) { .primaryButton {
.buttonContainer { min-width: 180px;
display: flex; width: fit-content;
width: 180px;
}
} }