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

Merged in feat/SW-3289-replace-sidepeek-hotel-reservation (pull request #2686)

Browse Source 
feat(SW-3289): replace sidepeek

* fix(SW-3289): replace sidepeek

* fix(SW-3289): add wrapping prop and change prop name to buttonVariant

* fix(SW-3289): replace body with typography

* fix(SW-3289): fix intl message


Approved-by: Joakim Jäderberg
This commit is contained in:
Bianca Widstam
2025-08-22 11:43:39 +00:00
parent e2544f9f89
commit d9b858c823
47 changed files with 527 additions and 708 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/booking-flow/lib/components/Contact/contact.module.css
View File

@@ -59,9 +59,3 @@
flex-direction: column;
justify-content: center;
}
.link {
text-decoration: underline;
font-family: var(--typography-Body-Regular-fontFamily);
color: var(--Text-Interactive-Secondary);
}

98
packages/booking-flow/lib/components/Contact/index.tsx
View File

@@ -2,7 +2,6 @@
import { useIntl } from "react-intl"
import Body from "@scandic-hotels/design-system/Body"
import FacebookIcon from "@scandic-hotels/design-system/Icons/FacebookIcon"
import InstagramIcon from "@scandic-hotels/design-system/Icons/InstagramIcon"
import Image from "@scandic-hotels/design-system/Image"
@@ -13,6 +12,7 @@ import useLang from "../../hooks/useLang"
import styles from "./contact.module.css"
import type { Hotel } from "@scandic-hotels/trpc/types/hotel"
import { Typography } from "@scandic-hotels/design-system/Typography"
interface ContactProps {
hotel: Hotel
@@ -30,55 +30,67 @@ export default function Contact({ hotel }: ContactProps) {
<address className={styles.address}>
<ul className={styles.contactInfo}>
<li>
<Body textTransform="bold">
{intl.formatMessage({
defaultMessage: "Address",
})}
</Body>
<Body>
{addressStr}
<br />
{cityStr}
</Body>
<Typography variant="Body/Paragraph/mdBold">
<p>
{intl.formatMessage({
defaultMessage: "Address",
})}
</p>
</Typography>
<Typography variant="Body/Paragraph/mdRegular">
<p>
{addressStr}
<br />
{cityStr}
</p>
</Typography>
</li>
<li>
<Body textTransform="bold">
{intl.formatMessage({
defaultMessage: "Driving directions",
})}
</Body>
<Typography variant="Body/Paragraph/mdBold">
<p>
{intl.formatMessage({
defaultMessage: "Driving directions",
})}
</p>
</Typography>
<Link
href={`https://www.google.com/maps/dir/?api=1&destination=${encodeURIComponent(
`${hotel.name}, ${hotel.address.streetAddress}, ${hotel.address.zipCode} ${hotel.address.city}`
)}`}
>
<span className={styles.link}>
{intl.formatMessage({
defaultMessage: "Google Maps",
})}
</span>
<Typography variant="Body/Underline/md">
<p>
{intl.formatMessage({
defaultMessage: "Google Maps",
})}
</p>
</Typography>
</Link>
</li>
<li>
<Body textTransform="bold">
{intl.formatMessage({
defaultMessage: "Contact us",
})}
</Body>
<Typography variant="Body/Paragraph/mdBold">
<p>
{intl.formatMessage({
defaultMessage: "Contact us",
})}
</p>
</Typography>
<Link href={`tel:${hotel.contactInformation.phoneNumber}`}>
<span className={styles.link}>
{hotel.contactInformation.phoneNumber}
</span>
<Typography variant="Body/Underline/md">
<p>{hotel.contactInformation.phoneNumber}</p>
</Typography>
</Link>
</li>
<li>
{(hotel.socialMedia.facebook || hotel.socialMedia.instagram) && (
<>
<Body textTransform="bold">
{intl.formatMessage({
defaultMessage: "Follow us",
})}
</Body>
<Typography variant="Body/Paragraph/mdBold">
<p>
{intl.formatMessage({
defaultMessage: "Follow us",
})}
</p>
</Typography>
<div className={styles.soMeIcons}>
{hotel.socialMedia.instagram && (
<Link href={hotel.socialMedia.instagram} target="_blank">
@@ -95,15 +107,17 @@ export default function Contact({ hotel }: ContactProps) {
)}
</li>
<li>
<Body textTransform="bold">
{intl.formatMessage({
defaultMessage: "Email",
})}
</Body>
<Typography variant="Body/Paragraph/mdBold">
<p>
{intl.formatMessage({
defaultMessage: "Email",
})}
</p>
</Typography>
<Link href={`mailto:${hotel.contactInformation.email}`}>
<span className={styles.link}>
{hotel.contactInformation.email}
</span>
<Typography variant="Body/Underline/md">
<p>{hotel.contactInformation.email}</p>
</Typography>
</Link>
</li>
</ul>