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

packages/design-system/lib/components/BackToTopButton/backToTopButton.module.css

@@ -0,0 +1,48 @@
+.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);
+  }
+}

packages/design-system/lib/components/BackToTopButton/index.tsx

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

packages/design-system/lib/components/BackToTopButton/variants.ts

@@ -0,0 +1,16 @@
+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',
+  },
+})