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

feat: add mobile design to accordions

Browse Source
This commit is contained in:
Christel Westerberg
2024-11-11 10:15:47 +01:00
parent 66b2dc0c78
commit ee6aa8d188
9 changed files with 164 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
components/HotelReservation/EnterDetails/Summary/BottomSheet/bottomSheet.module.css
View File

@@ -19,7 +19,7 @@
transition: 0.5s ease-in-out;
}
.priceDetails {
.priceDetailsButton {
display: block;
border: none;
background: none;
@@ -28,6 +28,7 @@
transition:
opacity 0.5s ease-in-out,
padding 0.5s ease-in-out;
cursor: pointer;
}
.wrapper[data-open="true"] {
@@ -38,12 +39,12 @@
grid-template-columns: 0fr 1fr;
}
.wrapper[data-open="true"] .priceDetails {
.wrapper[data-open="true"] .priceDetailsButton {
opacity: 0;
padding: 0;
}
.content,
.priceDetails {
.priceDetailsButton {
overflow: hidden;
}

5
components/HotelReservation/EnterDetails/Summary/BottomSheet/index.tsx
View File

@@ -8,7 +8,6 @@ import { useEnterDetailsStore } from "@/stores/enter-details"
import Button from "@/components/TempDesignSystem/Button"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import { formatNumber } from "@/utils/format"
import styles from "./bottomSheet.module.css"
@@ -30,14 +29,14 @@ export function SummaryBottomSheet({ children }: PropsWithChildren) {
<button
data-open={isSummaryOpen}
onClick={toggleSummaryOpen}
className={styles.priceDetails}
className={styles.priceDetailsButton}
>
<Caption>{intl.formatMessage({ id: "Total price" })}:</Caption>
<Subtitle>
{intl.formatMessage(
{ id: "{amount} {currency}" },
{
amount: formatNumber(totalPrice.local.price),
amount: intl.formatNumber(totalPrice.local.price),
currency: totalPrice.local.currency,
}
)}

21
components/HotelReservation/EnterDetails/Summary/index.tsx
View File

@@ -1,12 +1,14 @@
"use client"
import { useEffect, useState } from "react"
import { ChevronDown } from "react-feather"
import { useIntl } from "react-intl"
import { dt } from "@/lib/dt"
import { useEnterDetailsStore } from "@/stores/enter-details"
import { ArrowRightIcon, CloseIcon } from "@/components/Icons"
import { ArrowRightIcon } from "@/components/Icons"
import Button from "@/components/TempDesignSystem/Button"
import Divider from "@/components/TempDesignSystem/Divider"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
@@ -116,18 +118,25 @@ export default function Summary({
})
}, [room.localPrice, room.euroPrice, setTotalPrice])
const showToggleButton = true
return (
<section className={styles.summary}>
<header>
<Subtitle type="two">{intl.formatMessage({ id: "Summary" })}</Subtitle>
<header className={styles.header}>
<Subtitle className={styles.title} type="two">
{intl.formatMessage({ id: "Summary" })}
</Subtitle>
<Body className={styles.date} color="baseTextMediumContrast">
{dt(fromDate).locale(lang).format("ddd, D MMM")}
<ArrowRightIcon color="peach80" height={15} width={15} />
{dt(toDate).locale(lang).format("ddd, D MMM")} ({nights})
</Body>
{showToggleButton ? <CloseIcon onClick={toggleSummaryOpen} /> : null}
<Button
intent="text"
size="small"
className={styles.chevronButton}
onClick={toggleSummaryOpen}
>
<ChevronDown height="20" width="20" />
</Button>
</header>
<Divider color="primaryLightSubtle" />
<div className={styles.addOns}>

25
components/HotelReservation/EnterDetails/Summary/summary.module.css
View File

@@ -7,11 +7,28 @@
height: 100%;
}
.header {
display: grid;
grid-template-areas: "title button" "date button";
}
.title {
grid-area: title;
}
.chevronButton {
grid-area: button;
justify-self: end;
align-items: center;
margin-right: calc(0px - var(--Spacing-x2));
}
.date {
align-items: center;
display: flex;
gap: var(--Spacing-x1);
justify-content: flex-start;
grid-area: date;
}
.link {
@@ -47,4 +64,12 @@
.bottomDivider {
display: block;
}
.header {
display: block;
}
.chevronButton {
display: none;
}
}