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

Merged in fix/SW-1128-side-peek (pull request #1031)

Browse Source 
Fix/SW-1128/SW-1124 side peek and gallery

* fix(SW-1128): updated style and mobile design for sidepeek select hotel

* fix(SW-1128): update link sidepeek

* fix(SW-1124): fix padding gallery

* fix(SW-1128): fix sidepeek mobile design

* fix(SW-1128): fix mobile design

* fix(SW-1128): fix gallery icon caption


Approved-by: Niclas Edenvin
This commit is contained in:
Bianca Widstam
2024-12-05 07:39:06 +00:00
parent 94725297d7
commit bed674df87
16 changed files with 100 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
components/HotelReservation/Contact/contact.module.css
View File

@@ -4,6 +4,7 @@
grid-template-rows: auto; grid-template-rows: auto;
gap: var(--Spacing-x2); gap: var(--Spacing-x2);
font-family: var(--typography-Body-Regular-fontFamily); font-family: var(--typography-Body-Regular-fontFamily);
margin-bottom: var(--Spacing-x3);
} }
.address, .address,
@@ -20,6 +21,7 @@
list-style-type: none; list-style-type: none;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-width: 0;
} }
.soMeIcons { .soMeIcons {
@@ -28,6 +30,19 @@
} }
.ecoLabel { .ecoLabel {
width: 38px;
height: auto;
}
.ecoLabel img {
width: 100%;
height: auto;
flex-shrink: 0;
grid-column: 1 / 3;
grid-row: 4 / 4;
}
.ecoContainer {
display: flex; display: flex;
align-items: center; align-items: center;
column-gap: var(--Spacing-x-one-and-half); column-gap: var(--Spacing-x-one-and-half);
@@ -38,10 +53,6 @@
margin-bottom: var(--Spacing-x1); margin-bottom: var(--Spacing-x1);
} }
.ecoLabel img {
flex-shrink: 0;
}
.ecoLabelText { .ecoLabelText {
display: flex; display: flex;
color: var(--UI-Text-Medium-contrast); color: var(--UI-Text-Medium-contrast);
@@ -49,8 +60,8 @@
justify-content: center; justify-content: center;
} }
.googleMaps { .link {
text-decoration: none; text-decoration: underline;
font-family: var(--typography-Body-Regular-fontFamily); font-family: var(--typography-Body-Regular-fontFamily);
color: var(--Base-Text-Medium-contrast); color: var(--Base-Text-High-contrast);
} }

47
components/HotelReservation/Contact/index.tsx
View File

@@ -24,31 +24,27 @@ export default function Contact({ hotel }: ContactProps) {
<Body textTransform="bold"> <Body textTransform="bold">
{intl.formatMessage({ id: "Address" })} {intl.formatMessage({ id: "Address" })}
</Body> </Body>
<Body> <Body>{`${hotel.address.streetAddress}, `}</Body>
{`${hotel.address.streetAddress}, ${hotel.address.city}`} <Body>{hotel.address.city}</Body>
</Body>
</li> </li>
<li> <li>
<Body textTransform="bold"> <Body textTransform="bold">
{intl.formatMessage({ id: "Driving directions" })} {intl.formatMessage({ id: "Driving directions" })}
</Body> </Body>
<a <Link
href={`https://www.google.com/maps/dir/?api=1&destination=${hotel.location.latitude},${hotel.location.longitude}`} href={`https://www.google.com/maps/dir/?api=1&destination=${hotel.location.latitude},${hotel.location.longitude}`}
className={styles.googleMaps}
target="_blank"
> >
Google Maps <span className={styles.link}>Google Maps</span>
</a> </Link>
</li> </li>
<li> <li>
<Body textTransform="bold"> <Body textTransform="bold">
{intl.formatMessage({ id: "Contact us" })} {intl.formatMessage({ id: "Contact us" })}
</Body> </Body>
<Link <Link href={`tel:${hotel.contactInformation.phoneNumber}`}>
href={`tel:${hotel.contactInformation.phoneNumber}`} <span className={styles.link}>
color="peach80" {hotel.contactInformation.phoneNumber}
> </span>
{hotel.contactInformation.phoneNumber}
</Link> </Link>
</li> </li>
<li> <li>
@@ -76,23 +72,24 @@ export default function Contact({ hotel }: ContactProps) {
<Body textTransform="bold"> <Body textTransform="bold">
{intl.formatMessage({ id: "Email" })} {intl.formatMessage({ id: "Email" })}
</Body> </Body>
<Link <Link href={`mailto:${hotel.contactInformation.email}`}>
href={`mailto:${hotel.contactInformation.email}`} <span className={styles.link}>
color="peach80" {hotel.contactInformation.email}
> </span>
{hotel.contactInformation.email}
</Link> </Link>
</li> </li>
</ul> </ul>
</address> </address>
{hotel.hotelFacts.ecoLabels?.nordicEcoLabel ? ( {hotel.hotelFacts.ecoLabels?.nordicEcoLabel ? (
<div className={styles.ecoLabel}> <div className={styles.ecoContainer}>
<Image <div className={styles.ecoLabel}>
height={38} <Image
width={43} height={38}
alt={intl.formatMessage({ id: "Nordic Swan Ecolabel" })} width={38}
src={`/_static/img/icons/swan-eco/swan_eco_dark_${lang}.png`} alt={intl.formatMessage({ id: "Nordic Swan Ecolabel" })}
/> src={`/_static/img/icons/swan-eco/swan_eco_dark_${lang}.png`}
/>
</div>
<div className={styles.ecoLabelText}> <div className={styles.ecoLabelText}>
<span>{intl.formatMessage({ id: "Nordic Swan Ecolabel" })}</span> <span>{intl.formatMessage({ id: "Nordic Swan Ecolabel" })}</span>
<span> <span>

7
components/ImageGallery/index.tsx
View File

@@ -6,7 +6,8 @@ import { useIntl } from "react-intl"
import { GalleryIcon } from "@/components/Icons" import { GalleryIcon } from "@/components/Icons"
import Image from "@/components/Image" import Image from "@/components/Image"
import Lightbox from "@/components/Lightbox" import Lightbox from "@/components/Lightbox"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
import Caption from "../TempDesignSystem/Text/Caption"
import styles from "./imageGallery.module.css" import styles from "./imageGallery.module.css"
@@ -44,9 +45,9 @@ function ImageGallery({
/> />
<div className={styles.imageCount}> <div className={styles.imageCount}>
<GalleryIcon color="white" /> <GalleryIcon color="white" />
<Footnote color="white" type="label"> <Caption color="white" type="label">
{images.length} {images.length}
</Footnote> </Caption>
</div> </div>
</div> </div>
<Lightbox <Lightbox

1
components/Lightbox/Lightbox.module.css
View File

@@ -122,6 +122,7 @@
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: var(--Spacing-x1); gap: var(--Spacing-x1);
max-height: none; max-height: none;
padding: var(--Spacing-x3) 0;
} }
.thumbnailContainer { .thumbnailContainer {

1
components/SidePeeks/HotelSidePeek/Accordions/Accessibility.tsx
View File

@@ -14,6 +14,7 @@ export default function Accessibility({
<AccordionItem <AccordionItem
title={intl.formatMessage({ id: "Accessibility" })} title={intl.formatMessage({ id: "Accessibility" })}
icon={IconName.Accessibility} icon={IconName.Accessibility}
variant="sidepeek"
> >
<Body>{accessibilityElevatorPitchText}</Body> <Body>{accessibilityElevatorPitchText}</Body>
</AccordionItem> </AccordionItem>

1
components/SidePeeks/HotelSidePeek/Accordions/CheckInCheckOut.tsx
View File

@@ -13,6 +13,7 @@ export default function CheckinCheckOut({ checkin }: CheckInCheckOutProps) {
<AccordionItem <AccordionItem
title={intl.formatMessage({ id: "Check-in/Check-out" })} title={intl.formatMessage({ id: "Check-in/Check-out" })}
icon={IconName.Calendar} icon={IconName.Calendar}
variant="sidepeek"
> >
<Body textTransform="bold">{intl.formatMessage({ id: "Hours" })}</Body> <Body textTransform="bold">{intl.formatMessage({ id: "Hours" })}</Body>
<Body>{`${intl.formatMessage({ id: "Check in from" })}: ${checkin.checkInTime}`}</Body> <Body>{`${intl.formatMessage({ id: "Check in from" })}: ${checkin.checkInTime}`}</Body>

1
components/SidePeeks/HotelSidePeek/Accordions/MeetingsAndConferences.tsx
View File

@@ -14,6 +14,7 @@ export default function MeetingsAndConferences({
<AccordionItem <AccordionItem
title={intl.formatMessage({ id: "Meetings & Conferences" })} title={intl.formatMessage({ id: "Meetings & Conferences" })}
icon={IconName.Business} icon={IconName.Business}
variant="sidepeek"
> >
<Body>{meetingDescription}</Body> <Body>{meetingDescription}</Body>
</AccordionItem> </AccordionItem>

1
components/SidePeeks/HotelSidePeek/Accordions/Parking.tsx
View File

@@ -16,6 +16,7 @@ export default function Parking({ parking }: ParkingProps) {
title={intl.formatMessage({ id: "Parking" })} title={intl.formatMessage({ id: "Parking" })}
icon={IconName.Parking} icon={IconName.Parking}
className={styles.parking} className={styles.parking}
variant="sidepeek"
> >
{parking.map((p) => ( {parking.map((p) => (
<div key={p.name}> <div key={p.name}>

1
components/SidePeeks/HotelSidePeek/Accordions/Restaurant.tsx
View File

@@ -15,6 +15,7 @@ export default function Restaurant({
<AccordionItem <AccordionItem
title={intl.formatMessage({ id: "Restaurant" }, { count: 1 })} title={intl.formatMessage({ id: "Restaurant" }, { count: 1 })}
icon={IconName.Restaurant} icon={IconName.Restaurant}
variant="sidepeek"
> >
<Body>{restaurantsContentDescriptionMedium}</Body> <Body>{restaurantsContentDescriptionMedium}</Body>
</AccordionItem> </AccordionItem>

1
components/SidePeeks/HotelSidePeek/Accordions/sidePeekAccordion.module.css
View File

@@ -10,6 +10,7 @@
align-items: center; align-items: center;
gap: var(--Spacing-x1); gap: var(--Spacing-x1);
padding-left: var(--Spacing-x1); padding-left: var(--Spacing-x1);
justify-items: flex-start;
} }
.list li svg { .list li svg {

23
components/SidePeeks/HotelSidePeek/hotelSidePeek.module.css
View File

@@ -9,13 +9,24 @@
gap: var(--Spacing-x2); gap: var(--Spacing-x2);
} }
.amenity { .content:last-child {
font-family: var(--typography-Body-Regular-fontFamily); gap: 0;
border-bottom: 1px solid var(--Base-Border-Subtle); }
/* padding set to align with AccordionItem which has a different composition */
padding: calc(var(--Spacing-x1) + var(--Spacing-x-one-and-half)) .content > p {
var(--Spacing-x3); margin-bottom: var(--Spacing-x-one-and-half);
}
.content > ul > li:first-child {
border-top: 1px solid var(--Base-Border-Subtle);
}
.amenity > p {
border-top: 1px solid var(--Base-Border-Subtle);
padding: calc(var(--Spacing-x-one-and-half) + var(--Spacing-x1))
var(--Spacing-x1);
display: flex; display: flex;
align-items: center;
gap: var(--Spacing-x1); gap: var(--Spacing-x1);
} }

19
components/SidePeeks/HotelSidePeek/index.tsx
View File

@@ -71,24 +71,21 @@ export default function HotelSidePeek({
} }
/> />
)} )}
</Accordion>
<div className={styles.amenity}>
{amenitiesList.map((amenity) => { {amenitiesList.map((amenity) => {
const Icon = mapFacilityToIcon(amenity.id) const Icon = mapFacilityToIcon(amenity.id)
return ( return (
<div key={amenity.id} className={styles.amenity}> <Subtitle type="two" key={amenity.id} color="uiTextHighContrast">
{Icon && ( {Icon && (
<Icon width={24} height={24} color="uiTextMediumContrast" /> <Icon width={24} height={24} color="uiTextHighContrast" />
)} )}
<Body {amenity.name}
asChild </Subtitle>
className={!Icon ? styles.noIcon : undefined}
color="uiTextMediumContrast"
>
<span>{amenity.name}</span>
</Body>
</div>
) )
})} })}
</Accordion> </div>
{/* TODO: handle linking to Hotel Page */} {/* TODO: handle linking to Hotel Page */}
{/* {showCTA && ( {/* {showCTA && (
<Button theme="base" intent="secondary" size="large"> <Button theme="base" intent="secondary" size="large">

11
components/TempDesignSystem/Accordion/AccordionItem/accordionItem.module.css
View File

@@ -6,6 +6,10 @@
padding: var(--Spacing-x1); padding: var(--Spacing-x1);
} }
.accordionItem.sidepeek {
padding: var(--Spacing-x1) 0;
}
.summary { .summary {
position: relative; position: relative;
display: flex; display: flex;
@@ -18,7 +22,7 @@
font-weight: var(--typography-Body-Bold-fontWeight); font-weight: var(--typography-Body-Bold-fontWeight);
transition: background-color 0.3s; transition: background-color 0.3s;
} }
.summary:hover { .summary.card:hover {
background-color: var(--Base-Surface-Primary-light-Hover-alt); background-color: var(--Base-Surface-Primary-light-Hover-alt);
} }
.accordionItem.light .summary:hover { .accordionItem.light .summary:hover {
@@ -33,6 +37,11 @@
border-radius: var(--Corner-radius-Medium); border-radius: var(--Corner-radius-Medium);
} }
.accordionItem.sidepeek .summary {
padding: var(--Spacing-x-one-and-half) var(--Spacing-x1);
align-items: center;
}
.title { .title {
flex-grow: 1; flex-grow: 1;
} }

22
components/TempDesignSystem/Accordion/AccordionItem/index.tsx
View File

@@ -50,16 +50,10 @@ export default function AccordionItem({
<li className={accordionItemVariants({ className, variant, theme })}> <li className={accordionItemVariants({ className, variant, theme })}>
<details ref={detailsRef} onToggle={toggleAccordion}> <details ref={detailsRef} onToggle={toggleAccordion}>
<summary className={styles.summary}> <summary className={styles.summary}>
{IconComp && <IconComp className={styles.icon} color="burgundy" />} {IconComp && (
{variant === "card" ? ( <IconComp className={styles.icon} color="baseTextHighcontrast" />
<Body )}
textTransform="bold" {variant === "sidepeek" ? (
color="baseTextHighContrast"
className={styles.title}
>
{title}
</Body>
) : (
<Subtitle <Subtitle
className={styles.title} className={styles.title}
type="two" type="two"
@@ -67,6 +61,14 @@ export default function AccordionItem({
> >
{title} {title}
</Subtitle> </Subtitle>
) : (
<Body
textTransform="bold"
color="baseTextHighContrast"
className={styles.title}
>
{title}
</Body>
)} )}
<ChevronDownIcon <ChevronDownIcon
className={styles.chevron} className={styles.chevron}

1
components/TempDesignSystem/Accordion/AccordionItem/variants.ts
View File

@@ -6,6 +6,7 @@ export const accordionItemVariants = cva(styles.accordionItem, {
variants: { variants: {
variant: { variant: {
card: styles.card, card: styles.card,
sidepeek: styles.sidepeek,
}, },
theme: { theme: {
default: styles.default, default: styles.default,

1
components/TempDesignSystem/Accordion/variants.ts
View File

@@ -6,6 +6,7 @@ export const accordionVariants = cva(styles.accordion, {
variants: { variants: {
variant: { variant: {
card: styles.card, card: styles.card,
sidepeek: styles.sidepeek,
}, },
theme: { theme: {
default: styles.default, default: styles.default,