added copy link and updated styling

components/footer.js

@@ -23,15 +23,30 @@ export default function Footer(props) {
     ));
 
     const [showShareState, setShowShareState] = useState(false);
+    const [copySuccess, setCopySuccess] = useState("");
 
     let shareState = () => {
         showShareState == true
-            ? setShowShareState(false)
+            ? (setShowShareState(false), setCopySuccess(""))
             : setShowShareState(true);
     };
 
-    //console.log(router.asPath);
+    const copyToClipBoard = async (copyMe) => {
-    const shareBodyStr = t("common:service-home-url") + router.asPath;
+        try {
+            await navigator.clipboard.writeText(copyMe);
+            setCopySuccess(" - done!");
+        } catch (err) {
+            setCopySuccess("Failed to copy!");
+        }
+    };
+
+    const shareBodyStr =
+        t("common:service-home-url") +
+        (router.route == "/case" ||
+        router.route == "/dnsdetails" ||
+        router.route == "/myportal/case"
+            ? "/case/" + encodeURIComponent(props.ticketnumber)
+            : router.asPath);
     const shareSubjectStr =
         t("common:social-shared-from") +
         " " +
@@ -110,7 +125,7 @@ export default function Footer(props) {
                                             shareBodyStr +
                                             "&subject=" +
                                             shareSubjectStr
-                                        } //</li>https%3A//gov.wales/&amp;subject=Shared%20from%20gov.wales"
+                                        }
                                         className="email"
                                     >
                                         <span className="vo_hidden">
@@ -119,6 +134,19 @@ export default function Footer(props) {
                                         Email
                                     </a>
                                 </li>
+                                <li>
+                                    <a
+                                        onClick={() => {
+                                            copyToClipBoard(shareBodyStr);
+                                        }}
+                                        className="link"
+                                    >
+                                        <span className="vo_hidden">
+                                            Share this page via{" "}
+                                        </span>
+                                        Copy Link {copySuccess}
+                                    </a>
+                                </li>
                             </ul>
                         </div>
                         <div
@@ -244,21 +272,6 @@ export default function Footer(props) {
                                             )}
                                         </Link>
                                     </li>
-                                    {/* <li className="govuk-footer__inline-list-item">
-                                    <a
-                                        href={t(
-                                            "common:footer-alternative-languages-link"
-                                        )}
-                                        id="aTermsConds"
-                                        className="govuk-footer__link"
-                                        target="_blank"
-                                        rel="noreferrer"
-                                    >
-                                        {t(
-                                            "common:footer-alternative-languages-link-label"
-                                        )}
-                                    </a>
-                                </li> */}
                                 </ul>
                             </nav>
                             <div

styles/sass/welshgov/_application.scss

@@ -1496,6 +1496,31 @@ ul#sharePageLinks.active {
     background-repeat: no-repeat;
 }
 
+
+.block-share ul li a.link,
+.block-share-top ul li a.link,
+.page-header__block-share__list ul li a.link,
+.page-header__block-share ul li a.link {
+    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id=%22Layer_1%22 data-name=%22Layer 1%22 xmlns=%22http://www.w3.org/2000/svg%22 width=%2217.9%22 height=%2220%22 viewBox=%220 0 17.9 20%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%233b7dc5;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3Eshare%3C/title%3E%3Cpath class=%22cls-1%22 d=%22M15.4,14.1a3,3,0,0,0-2,.8L6.2,10.7a1.7,1.7,0,0,0,.1-.7,1.7,1.7,0,0,0-.1-.7l7.1-4.1a3,3,0,0,0,5-2.2,3,3,0,0,0-6,0,1.7,1.7,0,0,0,.1.7l-7,4.1a2.79,2.79,0,0,0-2-.8,3,3,0,1,0,0,6,2.79,2.79,0,0,0,2-.8l7.1,4.2c0,.2-.1.4-.1.7a2.9,2.9,0,0,0,5.8,0,2.84,2.84,0,0,0-2.68-3Z%22 transform=%22translate%28-0.4 0%29%22/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+}
+
+.block-share ul li a.link:hover,
+.block-share-top ul li a.link:hover,
+.page-header__block-share__list ul li a.link:hover,
+.page-header__block-share ul li a.link:hover {
+    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id=%22Layer_1%22 data-name=%22Layer 1%22 xmlns=%22http://www.w3.org/2000/svg%22 width=%2217.9%22 height=%2220%22 viewBox=%220 0 17.9 20%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23111;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3Eshare%3C/title%3E%3Cpath class=%22cls-1%22 d=%22M15.4,14.1a3,3,0,0,0-2,.8L6.2,10.7a1.7,1.7,0,0,0,.1-.7,1.7,1.7,0,0,0-.1-.7l7.1-4.1a3,3,0,0,0,5-2.2,3,3,0,0,0-6,0,1.7,1.7,0,0,0,.1.7l-7,4.1a2.79,2.79,0,0,0-2-.8,3,3,0,1,0,0,6,2.79,2.79,0,0,0,2-.8l7.1,4.2c0,.2-.1.4-.1.7a2.9,2.9,0,0,0,5.8,0,2.84,2.84,0,0,0-2.68-3Z%22 transform=%22translate%28-0.4 0%29%22/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+}
+
+.block-share ul li a.link:focus,
+.block-share-top ul li a.link:focus,
+.page-header__block-share__list ul li a.link:focus,
+.page-header__block-share ul li a.link:focus {
+    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id=%22Layer_1%22 data-name=%22Layer 1%22 xmlns=%22http://www.w3.org/2000/svg%22 width=%2217.9%22 height=%2220%22 viewBox=%220 0 17.9 20%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23111;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3Eshare%3C/title%3E%3Cpath class=%22cls-1%22 d=%22M15.4,14.1a3,3,0,0,0-2,.8L6.2,10.7a1.7,1.7,0,0,0,.1-.7,1.7,1.7,0,0,0-.1-.7l7.1-4.1a3,3,0,0,0,5-2.2,3,3,0,0,0-6,0,1.7,1.7,0,0,0,.1.7l-7,4.1a2.79,2.79,0,0,0-2-.8,3,3,0,1,0,0,6,2.79,2.79,0,0,0,2-.8l7.1,4.2c0,.2-.1.4-.1.7a2.9,2.9,0,0,0,5.8,0,2.84,2.84,0,0,0-2.68-3Z%22 transform=%22translate%28-0.4 0%29%22/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+}
+
 //dropzone
 
 .dropzone {