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

feat(SW-2042): Synced sidebar ui with design

Browse Source 
Approved-by: Christian Andolf
Approved-by: Matilda Landström
This commit is contained in:
Erik Tiekstra
2025-06-02 09:37:39 +00:00
parent 09879d2f4a
commit 5d6776c383
8 changed files with 81 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/HotelList/hotelList.module.css
View File

@@ -1,18 +1,18 @@
.hotelListWrapper {
display: grid;
gap: var(--Spacing-x3);
gap: var(--Space-x3);
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
}
.hotelList {
display: grid;
gap: var(--Spacing-x3);
gap: var(--Space-x3);
list-style: none;
}

21
apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/HotelList/index.tsx
View File

@@ -4,10 +4,11 @@ import { useMap, useMapsLibrary } from "@vis.gl/react-google-maps"
import { useEffect, useMemo, useState } from "react"
import { useIntl } from "react-intl"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { useDestinationDataStore } from "@/stores/destination-data"
import DestinationFilterAndSort from "@/components/DestinationFilterAndSort"
import Body from "@/components/TempDesignSystem/Text/Body"
import { debounce } from "@/utils/debounce"
import HotelListContent from "./Content"
@@ -60,14 +61,16 @@ export default function HotelList() {
return (
<div className={styles.hotelListWrapper}>
<div className={styles.header}>
<Body>
{intl.formatMessage(
{
defaultMessage: "{count} hotels",
},
{ count: visibleHotels.length }
)}
</Body>
<Typography variant="Body/Paragraph/mdRegular">
<p>
{intl.formatMessage(
{
defaultMessage: "{count} hotels",
},
{ count: visibleHotels.length }
)}
</p>
</Typography>
<DestinationFilterAndSort listType="hotel" />
</div>

32
apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/HotelListItem/hotelListItem.module.css
View File

@@ -1,9 +1,10 @@
.hotelListItem {
display: grid;
background-color: var(--Base-Surface-Primary-light-Normal);
border: 1px solid var(--Base-Border-Subtle);
background-color: var(--Surface-Primary-Default);
border: 1px solid var(--Border-Default);
border-radius: var(--Corner-radius-md);
overflow: hidden;
scroll-margin-top: var(--Space-x2);
}
.activeCard {
@@ -13,8 +14,8 @@
.content {
display: flex;
flex-direction: column;
gap: var(--Spacing-x2);
padding: var(--Spacing-x2) var(--Spacing-x3);
gap: var(--Space-x2);
padding: var(--Space-x2) var(--Space-x3);
align-content: flex-start;
justify-items: flex-start;
}
@@ -30,25 +31,22 @@
left: 16px;
display: flex;
align-items: center;
gap: var(--Spacing-x-half);
background-color: var(--Base-Surface-Primary-light-Normal);
padding: var(--Spacing-x-quarter) var(--Spacing-x1);
gap: var(--Space-x05);
background-color: var(--Surface-Primary-Default);
padding: var(--Space-x025) var(--Space-x1);
border-radius: var(--Corner-radius-sm);
color: var(--Text-Interactive-Default);
}
.hotelName {
color: var(--Text-Default);
}
.intro {
display: grid;
gap: var(--Spacing-x-half);
gap: var(--Space-x05);
}
.captions {
display: flex;
gap: var(--Spacing-x1);
column-gap: var(--Space-x1);
flex-wrap: wrap;
color: var(--Text-Tertiary);
}
@@ -66,14 +64,14 @@
.amenityList {
display: flex;
gap: var(--Spacing-x-one-and-half);
gap: var(--Space-x025) var(--Space-x1);
flex-wrap: wrap;
color: var(--Text-Secondary);
}
.amenityItem {
display: flex;
gap: var(--Spacing-x-half);
gap: var(--Space-x05);
align-items: center;
}
@@ -98,8 +96,8 @@
}
.content {
padding: var(--Spacing-x-one-and-half);
gap: var(--Spacing-x1);
padding: var(--Space-x15);
gap: var(--Space-x1);
}
.logo,

20
apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/HotelListItem/index.tsx
View File

@@ -38,7 +38,7 @@ export default function HotelListItem(data: DestinationPagesHotelData) {
if (element) {
element.scrollIntoView({
behavior: "smooth",
block: "nearest",
block: "start",
inline: "start",
})
}
@@ -89,10 +89,10 @@ export default function HotelListItem(data: DestinationPagesHotelData) {
<HotelLogoIcon hotelId={hotel.id} hotelType={hotel.hotelType} />
</div>
<Typography variant="Title/Subtitle/lg">
<h3 className={styles.hotelName}>{hotel.name}</h3>
<h3>{hotel.name}</h3>
</Typography>
<Typography variant="Body/Supporting text (caption)/smRegular">
<div className={styles.captions}>
<p className={styles.captions}>
<Typography variant="Link/sm">
<ButtonRAC
className={styles.addressButton}
@@ -101,8 +101,14 @@ export default function HotelListItem(data: DestinationPagesHotelData) {
{address}
</ButtonRAC>
</Typography>
<Divider variant="vertical" color="beige" />
<p>
<span>
<Divider
className={styles.divider}
variant="vertical"
color="Border/Divider/Default"
/>
</span>
<span>
{intl.formatMessage(
{
defaultMessage: "{number} km to city center",
@@ -113,8 +119,8 @@ export default function HotelListItem(data: DestinationPagesHotelData) {
),
}
)}
</p>
</div>
</span>
</p>
</Typography>
</div>
<Typography variant="Body/Supporting text (caption)/smRegular">

50
apps/scandic-web/components/ContentType/DestinationPage/Map/map.module.css
View File

@@ -1,51 +1,57 @@
.mapWrapper {
position: fixed;
display: flex;
flex-direction: column;
height: 100dvh;
width: 100dvw;
background-color: var(--Base-Surface-Primary-light-Normal);
background-color: var(--Background-Primary);
z-index: 1;
}
.sidebar {
width: 100%;
max-width: 500px;
background-color: var(--Base-Surface-Primary-Normal);
overflow-y: auto;
padding: var(--Spacing-x4);
display: flex;
flex-direction: column;
gap: var(--Spacing-x4);
gap: var(--Space-x4);
}
.closeButton {
pointer-events: initial;
box-shadow: var(--button-box-shadow);
gap: var(--Spacing-x-half);
gap: var(--Space-x05);
}
.mobileNavigation {
display: none;
display: flex;
padding: var(--Space-x2);
justify-content: space-between;
background-color: var(--Surface-Primary-OnSurface-Default);
}
@media screen and (max-width: 949px) {
.mapWrapper {
flex-direction: column;
}
.mobileNavigation {
display: flex;
padding: var(--Spacing-x2);
justify-content: space-between;
background-color: var(--Surface-Primary-OnSurface-Default);
}
.sidebar {
position: absolute;
max-width: none;
padding: 0 0 var(--Spacing-x2) 0;
width: 100%;
padding-bottom: var(--Space-x2);
overflow: hidden;
bottom: 0;
z-index: 3;
}
}
@media screen and (min-width: 950px) {
.mapWrapper {
flex-direction: row;
}
.sidebar {
width: 420px;
flex-shrink: 0;
overflow-y: auto;
padding: var(--Space-x5);
background-color: var(--Background-Primary);
}
.mobileNavigation {
display: none;
}
}

14
apps/scandic-web/components/ImageGallery/imageGallery.module.css
View File

@@ -7,16 +7,15 @@
.imageCount {
position: absolute;
bottom: 16px;
right: 16px;
max-height: 32px;
width: 48px;
background-color: rgba(0, 0, 0, 0.6);
padding: var(--Spacing-x-quarter) var(--Spacing-x-half);
bottom: var(--Space-x2);
right: var(--Space-x2);
background-color: var(--Overlay-90);
padding: var(--Space-x025) var(--Space-x05);
border-radius: var(--Corner-radius-sm);
display: flex;
align-items: center;
gap: var(--Spacing-x-quarter);
justify-content: center;
gap: var(--Space-x025);
color: var(--Text-Inverted);
}
@@ -40,7 +39,6 @@
.imagePlaceholder {
height: 100%;
min-height: 190px;
aspect-ratio: 16/9;
width: 100%;
background-color: #fff;
background-image:

6
apps/scandic-web/components/ImageGallery/index.tsx
View File

@@ -1,7 +1,7 @@
"use client"
import { memo, useState } from "react"
import { Button } from "react-aria-components"
import { Button as ButtonRAC } from "react-aria-components"
import { useIntl } from "react-intl"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
@@ -45,11 +45,11 @@ function ImageGallery({
/>
<Typography variant={"Body/Supporting text (caption)/smRegular"}>
<span className={styles.imageCount}>
<MaterialIcon icon="filter" color="Icon/Inverted" />
<MaterialIcon icon="filter" color="Icon/Inverted" size={16} />
<span>{images.length}</span>
</span>
</Typography>
<Button
<ButtonRAC
className={styles.triggerArea}
onPress={() => setIsOpen(true)}
aria-label={intl.formatMessage({

2
apps/scandic-web/components/TempDesignSystem/Divider/divider.module.css
View File

@@ -1,11 +1,11 @@
.divider {
pointer-events: none;
border: 0;
}
.horizontal {
height: 1px;
width: 100%;
border: 0;
}
.vertical {