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

fix(SW-1111) added position for backToTopButton

Browse Source
This commit is contained in:
Pontus Dreij
2024-12-05 10:40:09 +01:00
parent 21b0306fd2
commit 098e35d8d7
6 changed files with 50 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
components/HotelReservation/HotelCardDialog/index.tsx
View File

@@ -103,12 +103,14 @@ export default function HotelCardDialog({
<Caption type="bold">
{intl.formatMessage({ id: "From" })}
</Caption>
<Subtitle type="two">
{publicPrice} {currency}
<Body asChild>
<span>/{intl.formatMessage({ id: "night" })}</span>
</Body>
</Subtitle>
{publicPrice && (
<Subtitle type="two">
{publicPrice} {currency}
<Body asChild>
<span>/{intl.formatMessage({ id: "night" })}</span>
</Body>
</Subtitle>
)}
{memberPrice && (
<Subtitle
type="two"

4
components/HotelReservation/HotelCardListing/index.tsx
View File

@@ -128,7 +128,9 @@ export default function HotelCardListing({
text={intl.formatMessage({ id: "filters.nohotel.text" })}
/>
) : null}
{showBackToTop && <BackToTopButton onClick={scrollToTop} />}
{showBackToTop && (
<BackToTopButton position="right" onClick={scrollToTop} />
)}
</section>
)
}

4
components/HotelReservation/SelectHotel/SelectHotelMap/index.tsx
View File

@@ -125,7 +125,9 @@ export default function SelectHotelMap({
activeHotelPin={activeHotelPin}
setActiveHotelPin={setActiveHotelPin}
/>
{showBackToTop && <BackToTopButton onClick={scrollToTop} />}
{showBackToTop && (
<BackToTopButton position="right" onClick={scrollToTop} />
)}
</div>
<InteractiveMap
closeButton={closeButton}

9
components/TempDesignSystem/BackToTopButton/backToTopButton.module.css
View File

@@ -5,7 +5,6 @@
align-items: flex-end;
position: fixed;
bottom: 20px;
right: 20px;
z-index: 1000;
background-color: var(--Base-Surface-Primary-light-Normal);
color: var(--Base-Button-Secondary-On-Fill-Normal);
@@ -28,6 +27,14 @@
display: none;
}
.left {
left: 32px;
}
.right {
right: 32px;
}
@media (min-width: 768px) {
.backToTopButtonText {
display: initial;

15
components/TempDesignSystem/BackToTopButton/index.tsx
View File

@@ -5,12 +5,23 @@ import { useIntl } from "react-intl"
import { ArrowUpIcon } from "@/components/Icons"
import { backToTopButtonVariants } from "./variants"
import styles from "./backToTopButton.module.css"
export function BackToTopButton({ onClick }: { onClick: () => void }) {
export function BackToTopButton({
onClick,
position,
}: {
onClick: () => void
position: "left" | "right"
}) {
const intl = useIntl()
return (
<ButtonRAC className={styles.backToTopButton} onPress={onClick}>
<ButtonRAC
className={backToTopButtonVariants({ position })}
onPress={onClick}
>
<ArrowUpIcon color="burgundy" />
<span className={styles.backToTopButtonText}>
{intl.formatMessage({ id: "Back to top" })}

15
components/TempDesignSystem/BackToTopButton/variants.ts Normal file
View File

@@ -0,0 +1,15 @@
import { cva } from "class-variance-authority"
import styles from "./backToTopButton.module.css"
export const backToTopButtonVariants = cva(styles.backToTopButton, {
variants: {
position: {
left: styles.left,
right: styles.right,
},
},
defaultVariants: {
position: "right",
},
})