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"> <Caption type="bold">
{intl.formatMessage({ id: "From" })} {intl.formatMessage({ id: "From" })}
</Caption> </Caption>
<Subtitle type="two"> {publicPrice && (
{publicPrice} {currency} <Subtitle type="two">
<Body asChild> {publicPrice} {currency}
<span>/{intl.formatMessage({ id: "night" })}</span> <Body asChild>
</Body> <span>/{intl.formatMessage({ id: "night" })}</span>
</Subtitle> </Body>
</Subtitle>
)}
{memberPrice && ( {memberPrice && (
<Subtitle <Subtitle
type="two" 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" })} text={intl.formatMessage({ id: "filters.nohotel.text" })}
/> />
) : null} ) : null}
{showBackToTop && <BackToTopButton onClick={scrollToTop} />} {showBackToTop && (
<BackToTopButton position="right" onClick={scrollToTop} />
)}
</section> </section>
) )
} }

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

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

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

@@ -5,7 +5,6 @@
align-items: flex-end; align-items: flex-end;
position: fixed; position: fixed;
bottom: 20px; bottom: 20px;
right: 20px;
z-index: 1000; z-index: 1000;
background-color: var(--Base-Surface-Primary-light-Normal); background-color: var(--Base-Surface-Primary-light-Normal);
color: var(--Base-Button-Secondary-On-Fill-Normal); color: var(--Base-Button-Secondary-On-Fill-Normal);
@@ -28,6 +27,14 @@
display: none; display: none;
} }
.left {
left: 32px;
}
.right {
right: 32px;
}
@media (min-width: 768px) { @media (min-width: 768px) {
.backToTopButtonText { .backToTopButtonText {
display: initial; 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 { ArrowUpIcon } from "@/components/Icons"
import { backToTopButtonVariants } from "./variants"
import styles from "./backToTopButton.module.css" 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() const intl = useIntl()
return ( return (
<ButtonRAC className={styles.backToTopButton} onPress={onClick}> <ButtonRAC
className={backToTopButtonVariants({ position })}
onPress={onClick}
>
<ArrowUpIcon color="burgundy" /> <ArrowUpIcon color="burgundy" />
<span className={styles.backToTopButtonText}> <span className={styles.backToTopButtonText}>
{intl.formatMessage({ id: "Back to top" })} {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",
},
})