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, 54 insertions, 0 deletions

diff --git a/src/components/molecules/buttons/back-to-top/back-to-top.module.scss b/src/components/molecules/buttons/back-to-top/back-to-top.module.scss
new file mode 100644
index 0000000..10171d2
--- /dev/null
+++ b/src/components/molecules/buttons/back-to-top/back-to-top.module.scss
@@ -0,0 +1,54 @@
+@use "../../../../styles/abstracts/functions" as fun;
+
+.link {
+  --button-height: clamp(#{fun.convert-px(48)}, 8vw, #{fun.convert-px(55)});
+
+  height: var(--button-height);
+  padding: 0;
+
+  svg {
+    max-width: 100%;
+    max-height: 100%;
+  }
+
+  :global {
+    .arrow-head {
+      transform: translateX(-10%) translateY(30%) scale(1.2);
+      transition: all 0.45s ease-in-out 0s;
+    }
+
+    .arrow-bar {
+      opacity: 0;
+      transform: translateY(30%) scaleY(0);
+      transition:
+        transform 0.45s ease-in-out 0s,
+        opacity 0.1s linear 0.2s;
+    }
+  }
+
+  &:hover,
+  &:focus {
+    :global {
+      .arrow-head {
+        transform: translateY(0) scale(1);
+      }
+
+      .arrow-bar {
+        opacity: 1;
+        transform: translateY(0) scaleY(1);
+      }
+    }
+
+    svg {
+      :global {
+        animation: pulse 1.2s ease-in-out 0.6s infinite;
+      }
+    }
+  }
+
+  &:active {
+    svg {
+      animation-play-state: paused;
+    }
+  }
+}