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

Merged in feat/sw-2873-move-backtotopbutton-to-design-system (pull request #2593)

Browse Source 
feat(SW-2873): Move BackToTopButton to design-system

* Remove dependency on i18n in BackToTopButton

* Move BackToTopButton to design-system


Approved-by: Hrishikesh Vaipurkar
This commit is contained in:
Anton Gunnarsson
2025-08-05 08:41:31 +00:00
parent 6b43022c7d
commit 03c9244fdf
11 changed files with 85 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
apps/scandic-web/components/ContentType/DestinationPage/CityListing/index.tsx
View File

@@ -3,6 +3,7 @@
import { useRef } from "react"
import { useIntl } from "react-intl"
import { BackToTopButton } from "@scandic-hotels/design-system/BackToTopButton"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { AlertTypeEnum } from "@scandic-hotels/trpc/types/alertType"
@@ -10,7 +11,6 @@ import { useDestinationDataStore } from "@/stores/destination-data"
import DestinationFilterAndSort from "@/components/DestinationFilterAndSort"
import Alert from "@/components/TempDesignSystem/Alert"
import { BackToTopButton } from "@/components/TempDesignSystem/BackToTopButton"
import { useScrollToTop } from "@/hooks/useScrollToTop"
import CityListingItem from "./CityListingItem"
@@ -69,7 +69,13 @@ export default function CityListing() {
))}
</ul>
{showBackToTop ? (
<BackToTopButton position="right" onClick={scrollToTop} />
<BackToTopButton
position="right"
onClick={scrollToTop}
label={intl.formatMessage({
defaultMessage: "Back to top",
})}
/>
) : null}
</>
)}

10
apps/scandic-web/components/ContentType/DestinationPage/HotelListing/index.tsx
View File

@@ -5,6 +5,7 @@ import { useParams } from "next/navigation"
import { useEffect, useRef, useState } from "react"
import { useIntl } from "react-intl"
import { BackToTopButton } from "@scandic-hotels/design-system/BackToTopButton"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
import { Typography } from "@scandic-hotels/design-system/Typography"
@@ -14,7 +15,6 @@ import { useDestinationDataStore } from "@/stores/destination-data"
import DestinationFilterAndSort from "@/components/DestinationFilterAndSort"
import Alert from "@/components/TempDesignSystem/Alert"
import { BackToTopButton } from "@/components/TempDesignSystem/BackToTopButton"
import { useScrollToTop } from "@/hooks/useScrollToTop"
import HotelListingItem from "./HotelListingItem"
@@ -100,7 +100,13 @@ export default function HotelListing() {
))}
</ul>
{showBackToTop ? (
<BackToTopButton position="right" onClick={scrollToTop} />
<BackToTopButton
position="right"
onClick={scrollToTop}
label={intl.formatMessage({
defaultMessage: "Back to top",
})}
/>
) : null}
</>
)}

10
apps/scandic-web/components/ContentType/DestinationPage/Map/index.tsx
View File

@@ -11,6 +11,7 @@ import {
} from "react"
import { useIntl } from "react-intl"
import { BackToTopButton } from "@scandic-hotels/design-system/BackToTopButton"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
@@ -18,7 +19,6 @@ import { useDestinationDataStore } from "@/stores/destination-data"
import { useDestinationPageHotelsMapStore } from "@/stores/destination-page-hotels-map"
import DestinationFilterAndSort from "@/components/DestinationFilterAndSort"
import { BackToTopButton } from "@/components/TempDesignSystem/BackToTopButton"
import { useScrollToTop } from "@/hooks/useScrollToTop"
import { debounce } from "@/utils/debounce"
@@ -157,7 +157,13 @@ export default function Map({
<aside className={styles.sidebar} ref={scrollRef}>
{children}
{showBackToTop ? (
<BackToTopButton position="left" onClick={scrollToTop} />
<BackToTopButton
position="left"
onClick={scrollToTop}
label={intl.formatMessage({
defaultMessage: "Back to top",
})}
/>
) : null}
</aside>
<DynamicMap

13
apps/scandic-web/components/HotelReservation/HotelCardListing/index.tsx
View File

@@ -2,12 +2,14 @@
import { useSearchParams } from "next/navigation"
import { useSession } from "next-auth/react"
import { useEffect, useMemo, useRef } from "react"
import { useIntl } from "react-intl"
import { BackToTopButton } from "@scandic-hotels/design-system/BackToTopButton"
import { useBookingCodeFilterStore } from "@/stores/bookingCode-filter"
import { useHotelFilterStore } from "@/stores/hotel-filters"
import { useHotelsMapStore } from "@/stores/hotels-map"
import { BackToTopButton } from "@/components/TempDesignSystem/BackToTopButton"
import { useScrollToTop } from "@/hooks/useScrollToTop"
import { isValidClientSession } from "@/utils/clientSession"
@@ -29,6 +31,7 @@ export default function HotelCardListing({
type = HotelCardListingTypeEnum.PageListing,
isAlternative,
}: HotelCardListingProps) {
const intl = useIntl()
const { data: session } = useSession()
const isUserLoggedIn = isValidClientSession(session)
const searchParams = useSearchParams()
@@ -140,7 +143,13 @@ export default function HotelCardListing({
))
: null}
{showBackToTop && (
<BackToTopButton position="right" onClick={scrollToTop} />
<BackToTopButton
position="right"
onClick={scrollToTop}
label={intl.formatMessage({
defaultMessage: "Back to top",
})}
/>
)}
</section>
)

10
apps/scandic-web/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/index.tsx
View File

@@ -4,6 +4,7 @@ import { useCallback, useMemo, useRef, useState } from "react"
import { useIntl } from "react-intl"
import { useMediaQuery } from "usehooks-ts"
import { BackToTopButton } from "@scandic-hotels/design-system/BackToTopButton"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
@@ -17,7 +18,6 @@ import { useHotelsMapStore } from "@/stores/hotels-map"
import { RoomCardSkeleton } from "@/components/HotelReservation/RoomCardSkeleton/RoomCardSkeleton"
import InteractiveMap from "@/components/Maps/InteractiveMap"
import { BackToTopButton } from "@/components/TempDesignSystem/BackToTopButton"
import Link from "@/components/TempDesignSystem/Link"
import useLang from "@/hooks/useLang"
import { useScrollToTop } from "@/hooks/useScrollToTop"
@@ -203,7 +203,13 @@ export default function SelectHotelContent({
/>
)}
{showBackToTop && (
<BackToTopButton position="left" onClick={scrollToTop} />
<BackToTopButton
position="left"
onClick={scrollToTop}
label={intl.formatMessage({
defaultMessage: "Back to top",
})}
/>
)}
</div>
<InteractiveMap

48
apps/scandic-web/components/TempDesignSystem/BackToTopButton/backToTopButton.module.css
View File

@@ -1,48 +0,0 @@
.backToTopButton {
display: inline-flex;
padding: var(--Space-x1);
justify-content: center;
align-items: center;
gap: var(--Space-x05);
width: max-content;
color: var(--Component-Button-Brand-Secondary-On-fill-Default);
background-color: var(--Component-Button-Brand-Secondary-Fill-Inverted);
border: 2px solid var(--Component-Button-Brand-Secondary-Border-Default);
border-radius: var(--Corner-radius-Rounded);
box-shadow: 0px 0px 8px 3px rgba(0, 0, 0, 0.1);
cursor: pointer;
position: sticky;
bottom: var(--Space-x2);
&:hover {
color: var(--Component-Button-Brand-Secondary-On-fill-Inverted);
background-color: var(
--Component-Button-Brand-Secondary-Fill-Hover-Inverted
);
}
}
.left {
left: 0;
}
.right {
left: 100%;
}
.center {
left: 50%;
transform: translateX(-50%);
}
@media screen and (max-width: 767px) {
.text {
display: none;
}
}
@media screen and (min-width: 768px) {
.backToTopButton {
padding: 10px var(--Space-x2);
}
}

9
apps/scandic-web/components/TempDesignSystem/BackToTopButton/backToTopButton.ts
View File

@@ -1,9 +0,0 @@
import type { VariantProps } from "class-variance-authority"
import type { ComponentProps } from "react"
import type { Button } from "react-aria-components"
import type { backToTopButtonVariants } from "./variants"
export interface BackToTopButtonProps
extends ComponentProps<typeof Button>,
VariantProps<typeof backToTopButtonVariants> {}

35
apps/scandic-web/components/TempDesignSystem/BackToTopButton/index.tsx
View File

@@ -1,35 +0,0 @@
"use client"
import { Button as ButtonRAC } from "react-aria-components"
import { useIntl } from "react-intl"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { backToTopButtonVariants } from "./variants"
import styles from "./backToTopButton.module.css"
import type { BackToTopButtonProps } from "./backToTopButton"
export function BackToTopButton({ position, ...props }: BackToTopButtonProps) {
const intl = useIntl()
return (
<Typography variant="Body/Supporting text (caption)/smBold">
<ButtonRAC
className={backToTopButtonVariants({ position })}
aria-label={intl.formatMessage({
defaultMessage: "Back to top",
})}
{...props}
>
<MaterialIcon icon="arrow_upward" color="CurrentColor" size={20} />
<span className={styles.text}>
{intl.formatMessage({
defaultMessage: "Back to top",
})}
</span>
</ButtonRAC>
</Typography>
)
}

16
apps/scandic-web/components/TempDesignSystem/BackToTopButton/variants.ts
View File

@@ -1,16 +0,0 @@
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,
center: styles.center,
},
},
defaultVariants: {
position: "right",
},
})