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

4
components/MyPages/Blocks/Stays/Container/container.module.css
View File

@@ -1,10 +1,10 @@
.container {
display: grid;
gap: 2rem;
gap: var(--Spacing-x3);
}
@media screen and (min-width: 1367px) {
.container {
gap: 3.5rem;
gap: var(--Spacing-x7);
}
}

2
components/MyPages/Blocks/Stays/ListContainer/container.module.css
View File

@@ -1,4 +1,4 @@
.container {
display: grid;
gap: 3rem;
gap: var(--Spacing-x2);
}

4
components/MyPages/Blocks/Stays/Previous/EmptyPreviousStays/emptyPreviousStays.module.css
View File

@@ -1,8 +1,8 @@
.container {
align-items: center;
background-color: var(--some-grey-color, #f2f2f2);
border-radius: var(--Corner-radius-Medium);
display: flex;
justify-content: center;
min-height: 25rem;
background-color: var(--some-grey-color, #f2f2f2);
border-radius: 0.8rem;
}

6
components/MyPages/Blocks/Stays/Previous/index.tsx
View File

@@ -3,7 +3,7 @@
import { trpc } from "@/lib/trpc/client"
import LoadingSpinner from "@/components/LoadingSpinner"
import CardGrid from "@/components/TempDesignSystem/CardGrid"
import Grids from "@/components/TempDesignSystem/Grids"
import Header from "../../Header"
import Container from "../Container"
@@ -43,7 +43,7 @@ export default function PreviousStays({
<LoadingSpinner />
) : stays.length ? (
<ListContainer>
<CardGrid>
<Grids.Stackable>
{stays.map((stay) => (
<StayCard
key={stay.attributes.confirmationNumber}
@@ -51,7 +51,7 @@ export default function PreviousStays({
stay={stay}
/>
))}
</CardGrid>
</Grids.Stackable>
{hasNextPage ? (
<ShowMoreButton disabled={isFetching} loadMoreData={loadMoreData} />
) : null}

32
components/MyPages/Blocks/Stays/Soonest/EmptyUpcomingStays/emptyUpcomingStays.module.css
View File

@@ -1,25 +1,17 @@
.button {
background-color: var(--some-red-color, #ed2027);
}
.link {
text-decoration: none;
.container {
align-items: center;
background-color: var(--Scandic-Brand-Warm-White);
border-radius: var(--Corner-radius-Medium);
display: flex;
flex-direction: column;
gap: var(--Spacing-x3);
justify-content: center;
margin-bottom: var(--Spacing-x1);
min-height: 250px;
padding: var(--Spacing-x0) var(--Spacing-x3);
}
.grayTitle {
color: var(--some-grey-color, #727272);
color: var(--UI-Grey-60);
display: block;
}
.container {
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 25rem;
gap: 2.5rem;
background-color: var(--some-grey-color, #f2f2f2);
border-radius: 0.8rem;
margin-bottom: 0.5rem;
padding: 0 2rem;
}

4
components/MyPages/Blocks/Stays/Soonest/EmptyUpcomingStays/index.tsx
View File

@@ -17,9 +17,7 @@ export default async function EmptyUpcomingStaysBlock() {
</span>
</Title>
<Button asChild intent="primary" type="button">
<Link className={styles.link} href="#" key="getInspired">
{formatMessage({ id: "Get inspired" })}
</Link>
<Link href="#">{formatMessage({ id: "Get inspired" })}</Link>
</Button>
</section>
)

6
components/MyPages/Blocks/Stays/Soonest/index.tsx
View File

@@ -1,6 +1,6 @@
import { serverClient } from "@/lib/trpc/server"
import CardGrid from "@/components/TempDesignSystem/CardGrid"
import Grids from "@/components/TempDesignSystem/Grids"
import Header from "../../Header"
import StayCard from "../StayCard"
@@ -22,7 +22,7 @@ export default async function SoonestStays({
<section className={styles.container}>
<Header title={title} subtitle={subtitle} link={link} />
{stays.length ? (
<CardGrid>
<Grids.Stackable>
{stays.map((stay) => (
<StayCard
key={stay.attributes.confirmationNumber}
@@ -30,7 +30,7 @@ export default async function SoonestStays({
stay={stay}
/>
))}
</CardGrid>
</Grids.Stackable>
) : (
<EmptyUpcomingStaysBlock />
)}

2
components/MyPages/Blocks/Stays/Soonest/soonest.module.css
View File

@@ -1,4 +1,4 @@
.container {
display: grid;
gap: 1.5rem;
gap: var(--Spacing-x2);
}

6
components/MyPages/Blocks/Stays/StayCard/index.tsx
View File

@@ -33,7 +33,11 @@ export default function StayCard({ stay, lang }: StayCardProps) {
{hotelInformation.hotelName}
</Title>
<div className={styles.date}>
<Calendar height={20} width={20} color="var(--Main-Brand-Burgundy)" />
<Calendar
height={20}
width={20}
color="var(--Scandic-Brand-Burgundy)"
/>
<time dateTime={arrivalDateTime}>{arrivalDate}</time>
{" - "}
<time dateTime={departDateTime}>{departDate}</time>

38
components/MyPages/Blocks/Stays/StayCard/stay.module.css
View File

@@ -1,43 +1,43 @@
.stay {
border-radius: 0.4rem;
background-color: var(--Main-Grey-White);
border: 1px solid var(--Scandic-Brand-Burgundy);
border-radius: var(--Corner-radius-Small);
display: grid;
overflow: hidden;
background-color: var(--Main-Grey-White);
border: 1px solid #4d001b1a; /* var(--Main-Brand-Burgundy) 10% */
}
.image {
height: auto;
width: 100%;
min-height: 22rem;
min-height: 220px;
object-fit: cover;
overflow: hidden;
width: 100%;
}
.footer {
color: var(--Main-Brand-Burgundy);
padding: 1.6rem;
overflow: hidden;
margin-top: auto;
width: 100%;
color: var(--Scandic-Brand-Burgundy);
display: grid;
gap: 1.6rem;
gap: var(--Spacing-x2);
margin-top: auto;
overflow: hidden;
padding: var(--Spacing-x2);
width: 100%;
}
.hotel {
overflow: hidden;
text-wrap: nowrap;
text-overflow: ellipsis;
padding: 0;
margin: 0;
overflow: hidden;
padding: 0;
text-overflow: ellipsis;
text-wrap: nowrap;
}
.date {
align-items: center;
display: flex;
gap: var(--Spacing-x-half);
font-family: var(--typography-Caption-Regular-fontFamily);
font-size: var(--typography-Caption-Regular-fontSize);
font-weight: var(--typography-Caption-Regular-fontWeight);
line-height: var(--typography-Caption-Regular-lineHeight);
display: flex;
align-items: center;
gap: 0.4rem;
}

32
components/MyPages/Blocks/Stays/Upcoming/EmptyUpcomingStays/emptyUpcomingStays.module.css
View File

@@ -1,25 +1,17 @@
.button {
background-color: var(--some-red-color, #ed2027);
}
.link {
text-decoration: none;
.container {
align-items: center;
background-color: var(--some-grey-color, #f2f2f2);
border-radius: var(--Corner-radius-Medium);
display: flex;
gap: var(--Spacing-x3);
flex-direction: column;
justify-content: center;
margin-bottom: var(--Spacing-x-half);
min-height: 250px;
padding: var(--Spacing-x0) var(--Spacing-x3);
}
.grayTitle {
color: var(--some-grey-color, #727272);
color: var(--UI-Grey-60);
display: block;
}
.container {
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 25rem;
gap: 2.5rem;
background-color: var(--some-grey-color, #f2f2f2);
border-radius: 0.8rem;
margin-bottom: 0.5rem;
padding: 0 2rem;
}

4
components/MyPages/Blocks/Stays/Upcoming/EmptyUpcomingStays/index.tsx
View File

@@ -18,9 +18,7 @@ export default function EmptyUpcomingStaysBlock() {
</span>
</Title>
<Button asChild intent="primary" type="button">
<Link className={styles.link} href="#" key="getInspired">
{formatMessage({ id: "Get inspired" })}
</Link>
<Link href="#">{formatMessage({ id: "Get inspired" })}</Link>
</Button>
</section>
)

6
components/MyPages/Blocks/Stays/Upcoming/index.tsx
View File

@@ -3,7 +3,7 @@
import { trpc } from "@/lib/trpc/client"
import LoadingSpinner from "@/components/LoadingSpinner"
import CardGrid from "@/components/TempDesignSystem/CardGrid"
import Grids from "@/components/TempDesignSystem/Grids"
import Header from "../../Header"
import Container from "../Container"
@@ -43,7 +43,7 @@ export default function UpcomingStays({
<LoadingSpinner />
) : stays.length ? (
<ListContainer>
<CardGrid>
<Grids.Stackable>
{stays.map((stay) => (
<StayCard
key={stay.attributes.confirmationNumber}
@@ -51,7 +51,7 @@ export default function UpcomingStays({
stay={stay}
/>
))}
</CardGrid>
</Grids.Stackable>
{hasNextPage ? (
<ShowMoreButton disabled={isFetching} loadMoreData={loadMoreData} />
) : null}