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

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}>