fix(SW-2681): Fixed position of scripted text and using design system components
Approved-by: Matilda Landström
This commit is contained in:
Erik Tiekstra
@@ -1,11 +1,8 @@
|
||||
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 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 styles from "./joinScandicFriends.module.css"
|
||||
@@ -44,53 +41,44 @@ export default async function JoinScandicFriends({
|
||||
<div className={styles.textContent}>
|
||||
{show_header ? (
|
||||
<header className={styles.header}>
|
||||
<div>
|
||||
<BiroScript
|
||||
color="red"
|
||||
type="two"
|
||||
tilted="small"
|
||||
className={styles.scriptedText}
|
||||
>
|
||||
{content.scripted_top_title}
|
||||
</BiroScript>
|
||||
</div>
|
||||
<Title level="h2" as="h4">
|
||||
{content.title}
|
||||
</Title>
|
||||
{content.scripted_top_title ? (
|
||||
<Typography variant="Title/Decorative/md">
|
||||
<span className={styles.scriptedText}>
|
||||
{content.scripted_top_title}
|
||||
</span>
|
||||
</Typography>
|
||||
) : null}
|
||||
<Typography variant="Title/xs">
|
||||
<h2 className={styles.heading}>{content.title}</h2>
|
||||
</Typography>
|
||||
</header>
|
||||
) : null}
|
||||
|
||||
<Body>{content.preamble}</Body>
|
||||
<Typography variant="Body/Paragraph/mdRegular">
|
||||
<p>{content.preamble}</p>
|
||||
</Typography>
|
||||
|
||||
{show_usp && usp.length ? (
|
||||
<ul className={styles.usp}>
|
||||
{usp.map((uspBullet) => (
|
||||
<Body asChild key={uspBullet}>
|
||||
<Typography key={uspBullet} variant="Body/Paragraph/mdRegular">
|
||||
<li>{uspBullet}</li>
|
||||
</Body>
|
||||
</Typography>
|
||||
))}
|
||||
</ul>
|
||||
) : null}
|
||||
</div>
|
||||
{content.has_primary_button ? (
|
||||
<div className={styles.buttonContainer}>
|
||||
<Button
|
||||
theme="base"
|
||||
intent="primary"
|
||||
size="small"
|
||||
fullWidth
|
||||
asChild
|
||||
>
|
||||
<Link
|
||||
href={primary_button.href}
|
||||
target={primary_button.openInNewTab ? "_blank" : undefined}
|
||||
color="none"
|
||||
size="regular"
|
||||
>
|
||||
{primary_button.title}
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
<ButtonLink
|
||||
variant="Primary"
|
||||
size="Small"
|
||||
href={primary_button.href}
|
||||
target={primary_button.openInNewTab ? "_blank" : undefined}
|
||||
typography="Body/Supporting text (caption)/smBold"
|
||||
className={styles.primaryButton}
|
||||
>
|
||||
{primary_button.title}
|
||||
</ButtonLink>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
.container {
|
||||
border-radius: var(--Corner-radius-lg);
|
||||
background-color: var(--Main-Brand-WarmWhite);
|
||||
padding: 0 var(--Spacing-x2);
|
||||
background-color: var(--Surface-Primary-OnSurface-Default);
|
||||
padding: 0 var(--Space-x2);
|
||||
display: flex;
|
||||
gap: var(--Spacing-x5);
|
||||
gap: var(--Space-x5);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 900px) {
|
||||
.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) {
|
||||
.iconContainer {
|
||||
flex: 0 1 384;
|
||||
flex: 0 1 337px;
|
||||
display: flex; /* gets rid of whitespace */
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 1367px) {
|
||||
.iconContainer {
|
||||
flex-basis: 367px;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x3);
|
||||
padding: var(--Spacing-x3) 0;
|
||||
gap: var(--Space-x3);
|
||||
padding: var(--Space-x3) 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.textContent {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x2);
|
||||
gap: var(--Space-x2);
|
||||
color: var(--Text-Default);
|
||||
}
|
||||
|
||||
.header {
|
||||
display: grid;
|
||||
gap: var(--Spacing-x-quarter);
|
||||
gap: var(--Space-x025);
|
||||
}
|
||||
|
||||
.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 {
|
||||
list-style: none;
|
||||
display: grid;
|
||||
gap: var(--Spacing-x1);
|
||||
gap: var(--Space-x1);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
@@ -57,7 +70,7 @@
|
||||
grid-template-rows: repeat(3, auto);
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-auto-flow: column;
|
||||
padding: var(--Spacing-x-one-and-half) 0;
|
||||
padding: var(--Space-x15) 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -77,7 +90,7 @@
|
||||
|
||||
.usp li {
|
||||
display: flex;
|
||||
gap: var(--Spacing-x1);
|
||||
gap: var(--Space-x1);
|
||||
}
|
||||
|
||||
.usp li:before {
|
||||
@@ -86,9 +99,7 @@
|
||||
top: 3px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.buttonContainer {
|
||||
display: flex;
|
||||
width: 180px;
|
||||
}
|
||||
.primaryButton {
|
||||
min-width: 180px;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user