refactor(components): rewrite BackToTop component

* replace `link` prop with `anchor` prop
* add a `label` prop to let consumer handle the accessible name

1 files changed, 45 insertions, 0 deletions

diff --git a/src/components/molecules/buttons/back-to-top/back-to-top.tsx b/src/components/molecules/buttons/back-to-top/back-to-top.tsx
new file mode 100644
index 0000000..83e2161
--- /dev/null
+++ b/src/components/molecules/buttons/back-to-top/back-to-top.tsx
@@ -0,0 +1,45 @@
+import type { FC } from 'react';
+import {
+  ButtonLink,
+  type ButtonLinkProps,
+  Icon,
+  VisuallyHidden,
+} from '../../../atoms';
+import styles from './back-to-top.module.scss';
+
+export type BackToTopProps = Omit<
+  ButtonLinkProps,
+  'children' | 'isExternal' | 'kind' | 'to'
+> & {
+  /**
+   * Define the anchor.
+   */
+  anchor: string;
+  /**
+   * Define an accessible label for the button.
+   */
+  label: string;
+};
+
+/**
+ * BackToTop component
+ *
+ * Render a back to top link.
+ */
+export const BackToTop: FC<BackToTopProps> = ({
+  anchor,
+  className = '',
+  label,
+  shape = 'square',
+  ...props
+}) => {
+  const btnClass = `${styles.link} ${className}`;
+
+  return (
+    <ButtonLink {...props} className={btnClass} shape={shape} to={anchor}>
+      {/* eslint-disable-next-line react/jsx-no-literals -- Config allowed */}
+      <Icon aria-hidden orientation="top" shape="arrow" />
+      <VisuallyHidden>{label}</VisuallyHidden>
+    </ButtonLink>
+  );
+};