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

Merged in fix/STAY-133 (pull request #3313)

Browse Source 
Fix/STAY-133

* fix: Add static summary buttons row on add ancillary flow

* fix: refactor handling of modals

* fix: refactor file structure for add ancillary flow

* Merged in chore/replace-deprecated-body (pull request #3300)

Replace deprecated <Body> with <Typography>

* chore: replace deprecated body component

* refactor: replace Body component with Typography across various components

* merge

Approved-by: Bianca Widstam
Approved-by: Matilda Landström


Approved-by: Bianca Widstam
Approved-by: Matilda Landström
This commit is contained in:
Christel Westerberg
2025-12-11 07:29:36 +00:00
parent 5bcbc23732
commit cd8b30f2ec
35 changed files with 208 additions and 214 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/index.tsx
View File

@@ -1,13 +1,10 @@
"use client"
import { Dialog, DialogTrigger } from "react-aria-components"
import { useState } from "react"
import { useIntl } from "react-intl"
import { Button } from "@scandic-hotels/design-system/Button"
import { IconButton } from "@scandic-hotels/design-system/IconButton"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"
import Modal from "@/components/HotelReservation/MyStay/Modal"
import Modal from "@scandic-hotels/design-system/Modal"
import Actions from "./Actions"
import Info from "./Info"
@@ -15,6 +12,7 @@ import Info from "./Info"
import styles from "./manageStay.module.css"
export default function ManageStay() {
const [isOpen, setIsOpen] = useState(false)
const intl = useIntl()
const manageStay = intl.formatMessage({
@@ -22,36 +20,26 @@ export default function ManageStay() {
defaultMessage: "Manage stay",
})
function onClose() {
setIsOpen(false)
}
return (
<DialogTrigger>
<>
<Button
size="Medium"
variant="Tertiary"
typography="Body/Supporting text (caption)/smBold"
onPress={() => setIsOpen(true)}
>
<span>{manageStay}</span>
<MaterialIcon color="CurrentColor" icon="keyboard_arrow_down" />
</Button>
<Modal>
<Dialog className={styles.dialog}>
{({ close }) => (
<>
<header className={styles.header}>
<Typography variant="Title/Subtitle/lg">
<span className={styles.title}>{manageStay}</span>
</Typography>
<IconButton onPress={close} theme="Inverted">
<MaterialIcon color="CurrentColor" icon="close" />
</IconButton>
</header>
<div className={styles.content}>
<Actions onClose={close} />
<Info />
</div>
</>
)}
</Dialog>
<Modal isOpen={isOpen} onToggle={onClose} title={manageStay}>
<div className={styles.content}>
<Actions onClose={onClose} />
<Info />
</div>
</Modal>
</DialogTrigger>
</>
)
}

23
apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/manageStay.module.css
View File

@@ -1,30 +1,11 @@
.dialog {
display: grid;
flex: 1;
gap: var(--Space-x2);
}
.header {
align-items: center;
display: flex;
gap: var(--Space-x2);
justify-content: space-between;
}
.title {
color: var(--Text-Default);
}
.content {
padding-top: var(--Space-x1);
display: grid;
gap: var(--Space-x2);
width: 100%;
}
@media screen and (min-width: 768px) {
.dialog {
gap: var(--Space-x3);
}
.content {
gap: var(--Space-x3);
grid-template-columns: 1fr 1fr;