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

feat(SW-2873): Move BackToTopButton to design-system * Remove dependency on i18n in BackToTopButton * Move BackToTopButton to design-system Approved-by: Hrishikesh Vaipurkar
2025-08-05 08:41:31 +00:00
parent 6b43022c7d
commit 03c9244fdf
11 changed files with 85 additions and 57 deletions
@@ -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);
-  }
-}
@@ -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> {}
@@ -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>
-  )
-}
@@ -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",
-  },
-})