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

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

0
apps/scandic-web/components/TempDesignSystem/BackToTopButton/backToTopButton.module.css → packages/design-system/lib/components/BackToTopButton/backToTopButton.module.css
View File

38
packages/design-system/lib/components/BackToTopButton/index.tsx Normal file
View File

@@ -0,0 +1,38 @@
'use client'
import { type Button, Button as ButtonRAC } from 'react-aria-components'
import { MaterialIcon } from '../Icons/MaterialIcon'
import { Typography } from '../Typography'
import { backToTopButtonVariants } from './variants'
import styles from './backToTopButton.module.css'
import type { VariantProps } from 'class-variance-authority'
import type { ComponentProps } from 'react'
interface BackToTopButtonProps
extends ComponentProps<typeof Button>,
VariantProps<typeof backToTopButtonVariants> {
label: string
}
export function BackToTopButton({
position,
label,
...props
}: BackToTopButtonProps) {
return (
<Typography variant="Body/Supporting text (caption)/smBold">
<ButtonRAC
className={backToTopButtonVariants({ position })}
aria-label={label}
{...props}
>
<MaterialIcon icon="arrow_upward" color="CurrentColor" size={20} />
<span className={styles.text}>{label}</span>
</ButtonRAC>
</Typography>
)
}

6
apps/scandic-web/components/TempDesignSystem/BackToTopButton/variants.ts → packages/design-system/lib/components/BackToTopButton/variants.ts
View File

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

1
packages/design-system/package.json
View File

@@ -4,6 +4,7 @@
"version": "1.0.0-beta.1",
"type": "module",
"exports": {
"./BackToTopButton": "./dist/components/BackToTopButton/index.js",
"./Body": "./dist/components/Body/index.js",
"./Button": "./dist/components/Button/index.js",
"./Caption": "./dist/components/Caption/index.js",