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

feat(WEB-304): remaning UI from design system primitives

Browse Source
This commit is contained in:
Simon Emanuelsson
2024-06-07 10:36:23 +02:00
parent 6737970f54
commit 7c4b8401e9
228 changed files with 3516 additions and 3237 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
components/Loyalty/Sidebar/JoinLoyalty/Contact/ContactRow/contactRow.module.css
View File

@@ -1,21 +1,5 @@
.container {
display: grid;
text-align: center;
gap: 0.4rem;
padding: 1rem;
}
.title {
font-family: var(--typography-Body-Regular-fontFamily);
font-size: 1.6rem;
font-weight: 700;
margin: 0;
}
.value {
font-family: var(--typography-Body-Regular-fontFamily);
font-size: 1.6rem;
font-weight: 400;
margin: 0;
.icon,
.icon * {
fill: var(--Scandic-Brand-Burgundy);
margin-bottom: var(--Spacing-x-half);
}

22
components/Loyalty/Sidebar/JoinLoyalty/Contact/ContactRow/index.tsx
View File

@@ -1,5 +1,7 @@
import { serverClient } from "@/lib/trpc/server"
import { EmailIcon, PhoneIcon } from "@/components/Icons"
import Body from "@/components/TempDesignSystem/Text/Body"
import { getValueFromContactConfig } from "@/utils/contactConfig"
import styles from "./contactRow.module.css"
@@ -7,7 +9,7 @@ import styles from "./contactRow.module.css"
import type { ContactRowProps } from "@/types/components/loyalty/sidebar"
export default async function ContactRow({ contact }: ContactRowProps) {
const data = await serverClient().contentstack.config.contact()
const data = await serverClient().contentstack.base.contact()
const val = getValueFromContactConfig(contact.contact_field, data)
@@ -15,10 +17,22 @@ export default async function ContactRow({ contact }: ContactRowProps) {
return null
}
let Icon = null
if (contact.contact_field.includes("email")) {
Icon = EmailIcon
} else if (contact.contact_field.includes("phone")) {
Icon = PhoneIcon
}
return (
<div className={styles.container}>
<h4 className={styles.title}>{contact.display_text}</h4>
<p className={styles.value}>{val}</p>
<div>
{Icon ? <Icon className={styles.icon} /> : null}
<Body color="burgundy" textAlign="center" textTransform="bold">
{contact.display_text}
</Body>
<Body color="burgundy" textAlign="center">
{val}
</Body>
</div>
)
}

13
components/Loyalty/Sidebar/JoinLoyalty/Contact/contact.module.css
View File

@@ -4,13 +4,18 @@
@media screen and (min-width: 1367px) {
.contactContainer {
align-items: center;
border-top: 1px solid var(--UI-Grey-30);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--Spacing-x5);
justify-content: center;
border-top: 0.5px solid var(--UI-Grey-30);
padding: 3.4rem;
padding: var(--Spacing-x4) var(--Spacing-x2) var(--Spacing-x5);
text-align: center;
gap: 6.2rem;
}
.contact {
display: grid;
gap: var(--Spacing-x-one-and-half);
}
}

12
components/Loyalty/Sidebar/JoinLoyalty/Contact/index.tsx
View File

@@ -1,4 +1,4 @@
import Title from "@/components/TempDesignSystem/Text/Title"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import { getIntl } from "@/i18n"
import ContactRow from "./ContactRow"
@@ -11,9 +11,11 @@ import type { ContactProps } from "@/types/components/loyalty/sidebar"
export default async function Contact({ contactBlock }: ContactProps) {
const { formatMessage } = await getIntl()
return (
<div className={styles.contactContainer}>
<Title level="h5">{formatMessage({ id: "Contact us" })}</Title>
<section>
<article className={styles.contactContainer}>
<Subtitle textAlign="center">
{formatMessage({ id: "Contact us" })}
</Subtitle>
<section className={styles.contact}>
{contactBlock.map(({ contact, __typename }, i) => {
switch (__typename) {
case JoinLoyaltyContactTypenameEnum.LoyaltyPageSidebarJoinLoyaltyContactBlockContactContact:
@@ -28,6 +30,6 @@ export default async function Contact({ contactBlock }: ContactProps) {
}
})}
</section>
</div>
</article>
)
}