feat: add reusable copy button component

Author: alsolovyev

src/backend/views/components/copy-button.twig

@@ -0,0 +1,25 @@
+{#
+  Reusable copy button component.
+  Available props:
+    - ariaLabel: label for better accessibility
+    - class: additional class for the button
+    - textToCopy: text to be copied to the clipboard (use '#' for anchor links)
+
+  Usage examples:
+    {% include 'components/copy-button.twig' with { textToCopy: 'Lorem ipsum dolor' }  %}
+    {% include 'components/copy-button.twig' with { textToCopy: '#anchor-link-dolor' } %}
+#}
+
+{% set attrNameForTextToCopy = 'data-text-to-copy' %}
+
+{% set ariaLabel = ariaLabel ?? 'Copy to the Clipboard' %}
+
+{% set mainTag = 'button' %}
+{% set mainClass = 'copy-button' %}
+
+<{{ mainTag }} class="{{ mainClass }} {{ class ?? '' }}" aria-label="{{ ariaLabel }}" {{ attrNameForTextToCopy }}="{{ textToCopy }}">
+  <div class="{{ mainClass }}__inner">
+    <div class="{{ mainClass }}__icon--initial">{{ svg('copy') }}</div>
+    <div class="{{ mainClass }}__icon--success">{{ svg('check') }}</div>
+  </div>
+</{{ mainTag }}>

src/frontend/js/modules/page.js

@@ -20,7 +20,9 @@ export default class Page {
    */
   static get CSS() {
     return {
-      page: 'page'
+      copyButton: 'copy-button',
+      copyButtonCopied: 'copy-button__copied',
+      page: 'page',
     };
   }
 
@@ -36,7 +38,11 @@ export default class Page {
      */
     const page = document.querySelector(`.${Page.CSS.page}`);
 
-    page.addEventListener('click', (event) => { });
+    page.addEventListener('click', (event) => {
+      if (event.target.classList.contains(Page.CSS.copyButton)) {
+        this.handleCopyButtonClickEvent(event);
+      }
+    });
   }
 
   /**
@@ -73,4 +79,33 @@ export default class Page {
       console.error(error); // @todo send to Hawk
     }
   }
+
+  /**
+   * Handles copy button click events
+   *
+   * @param {Event} e - Event Object.
+   * @returns {Promise<void>}
+   */
+  async handleCopyButtonClickEvent({ target }) {
+    if (target.classList.contains(Page.CSS.copyButtonCopied)) return;
+
+    let textToCopy = target.getAttribute('data-text-to-copy');
+    if (!textToCopy) return;
+
+    // Check if text to copy is an anchor link
+    if (/^#\S*$/.test(textToCopy))
+      textToCopy = window.location.origin + window.location.pathname + textToCopy;
+
+    try {
+      await copyToClipboard(textToCopy);
+
+      target.classList.add(Page.CSS.copyButtonCopied);
+      target.addEventListener('mouseleave', () => {
+        setTimeout(() => target.classList.remove(Page.CSS.copyButtonCopied), 5e2);
+      }, { once: true });
+
+    } catch (error) {
+      console.error(error); // @todo send to Hawk
+    }
+  }
 }

src/frontend/styles/components/copy-button.pcss

@@ -0,0 +1,103 @@
+.copy-button {
+  position: relative;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: none;
+  background: none;
+  cursor: pointer;
+  transition: opacity 200ms;
+
+  @media (--can-hover) {
+    &:hover .copy-button__inner {
+      background: var(--color-link-hover);
+    }
+  }
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    border-radius: 100%;
+    background-color: var(--color-success);
+    visibility: hidden;
+    pointer-events: none;
+    transform: scale(1);
+    transition: transform 400ms ease-out, opacity 400ms;
+  }
+
+  &__inner {
+    @apply --squircle;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    background: white;
+    pointer-events: none;
+  }
+
+  &__icon--initial {
+    display: flex;
+    transform: translateZ(0);
+  }
+
+  &__icon--success {
+    display: none;
+    width: 24px;
+    height: 24px;
+    color: white;
+  }
+
+  &__copied {
+
+    &::before {
+      opacity: 0;
+      visibility: visible;
+      transform: scale(3.5);
+    }
+
+    .copy-button__inner,
+    .copy-button__inner:hover {
+      background: var(--color-success) !important;
+      animation: check-square-in 250ms ease-in;
+    }
+
+    .copy-button__icon--initial {
+      display: none;
+    }
+
+    .copy-button__icon--success {
+      display: flex;
+      animation: check-sign-in 350ms ease-in forwards;
+    }
+  }
+
+  @keyframes check-sign-in {
+    from {
+        transform: scale(.7);
+    }
+    80% {
+        transform: scale(1.1);
+    }
+    to {
+        transform: none;
+    }
+  }
+
+  @keyframes check-square-in {
+    from {
+      transform: scale(1.05);
+    }
+    80% {
+      transform: scale(.96);
+    }
+    to {
+      transform: none;
+    }
+  }
+}

src/frontend/styles/main.pcss

@@ -5,6 +5,7 @@
 @import './carbon.pcss';
 @import './components/header.pcss';
 @import './components/writing.pcss';
+@import './components/copy-button.pcss';
 @import './components/page.pcss';
 @import './components/greeting.pcss';
 @import './components/auth.pcss';