Merge pull request #2727 from GSA/feature/remove-govuk

Update govuk-link to usa-link

app/assets/stylesheets/main.scss

@@ -34,12 +34,6 @@ $path: '/static/images/';
 // Dependencies from GOV.UK Frontend, packaged to be specific to this application
 @import './govuk-frontend/all';
 
-// Custom overrides
-.govuk-link {
-    font-weight: bold;
-    color: #005ea5;
-}
-
 // Specific to this application
 @import 'local/typography';
 @import 'grids';

notifications_utils/template.py

@@ -403,7 +403,7 @@ class SMSPreviewTemplate(BaseSMSTemplate):
                     .then(nl2br)
                     .then(
                         autolink_urls,
-                        classes="govuk-link govuk-link--no-visited-state",
+                        classes="usa-link usa-link--external",
                     ),
                 }
             )

paas-failwhale/static_503/stylesheets/main.css

@@ -1668,13 +1668,6 @@ table caption {
     padding: .75em 1.25em .5625em 0
 }
 
-.govuk-link,
-a {
-    font-family: "nta", Arial, sans-serif;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale
-}
-
 /*! Copyright (c) 2011 by Margaret Calvert & Henrik Kubel. All rights reserved. The font has been customised for exclusive use on gov.uk. This cut is not commercially available. */
 @font-face {
     font-family: "nta";
@@ -1713,107 +1706,12 @@ a {
 }
 
 @media print {
-
-    .govuk-link,
-    a {
-        font-family: sans-serif
-    }
-}
-
-.govuk-link:focus,
-a:focus {
-    outline: 3px solid #ffbf47;
-    outline-offset: 0;
-    background-color: #ffbf47
-}
-
-.govuk-link:link,
-a:link {
-    color: #005ea5
-}
-
-.govuk-link:visited,
-a:visited {
-    color: #4c2c92
-}
-
-.govuk-link:hover,
-a:hover {
-    color: #2b8cc4
-}
-
-.govuk-link:active,
-a:active {
-    color: #2b8cc4
-}
-
-.govuk-link:focus,
-a:focus {
-    color: #0b0c0c
 }
 
 @media print {
-
-    .govuk-link[href^="/"]::after,
-    a[href^="/"]::after,
-    .govuk-link[href^="http://"]::after,
-    a[href^="http://"]::after,
-    .govuk-link[href^="https://"]::after,
-    a[href^="https://"]::after {
-        content: " (" attr(href) ")";
-        font-size: 90%;
-        word-wrap: break-word
-    }
-}
-
-.govuk-link--muted:link,
-.govuk-link--muted:visited,
-.govuk-link--muted:hover,
-.govuk-link--muted:active {
-    color: #6f777b
-}
-
-.govuk-link--muted:focus {
-    color: #0b0c0c
-}
-
-.govuk-link--text-colour:link,
-.govuk-link--text-colour:visited,
-.govuk-link--text-colour:hover,
-.govuk-link--text-colour:active,
-.govuk-link--text-colour:focus {
-    color: #0b0c0c
 }
 
 @media print {
-
-    .govuk-link--text-colour:link,
-    .govuk-link--text-colour:visited,
-    .govuk-link--text-colour:hover,
-    .govuk-link--text-colour:active,
-    .govuk-link--text-colour:focus {
-        color: #000
-    }
-}
-
-.govuk-link--no-visited-state:link {
-    color: #005ea5
-}
-
-.govuk-link--no-visited-state:visited {
-    color: #005ea5
-}
-
-.govuk-link--no-visited-state:hover {
-    color: #2b8cc4
-}
-
-.govuk-link--no-visited-state:active {
-    color: #2b8cc4
-}
-
-.govuk-link--no-visited-state:focus {
-    color: #0b0c0c
 }
 
 .govuk-list {

tests/notifications_utils/test_formatters.py

@@ -29,11 +29,11 @@ from notifications_utils.template import (
     [
         (
             """https://example.com/"onclick="alert('hi')""",
-            """<a class="govuk-link govuk-link--no-visited-state" href="https://example.com/%22onclick=%22alert%28%27hi%27%29">https://example.com/"onclick="alert('hi')</a>""",  # noqa
+            """<a class="usa-link usa-link--external" href="https://example.com/%22onclick=%22alert%28%27hi%27%29">https://example.com/"onclick="alert('hi')</a>""",  # noqa
         ),
         (
             """https://example.com/"style='text-decoration:blink'""",
-            """<a class="govuk-link govuk-link--no-visited-state" href="https://example.com/%22style=%27text-decoration:blink%27">https://example.com/"style='text-decoration:blink'</a>""",  # noqa
+            """<a class="usa-link usa-link--external" href="https://example.com/%22style=%27text-decoration:blink%27">https://example.com/"style='text-decoration:blink'</a>""",  # noqa
         ),
     ],
 )
@@ -560,9 +560,9 @@ def test_autolink_urls_matches_correctly(content, expected_html):
         ),
         (
             {
-                "classes": "govuk-link",
+                "classes": "usa-link",
             },
-            '<a class="govuk-link" href="http://example.com">http://example.com</a>',
+            '<a class="usa-link" href="http://example.com">http://example.com</a>',
         ),
     ],
 )

tests/notifications_utils/test_template_types.py

@@ -480,11 +480,11 @@ def test_markdown_in_templates(
         #     "email",
         #     'style="word-wrap: break-word; color: #1D70B8;"',
         # ),
-        (SMSPreviewTemplate, "sms", 'class="govuk-link govuk-link--no-visited-state"'),
+        (SMSPreviewTemplate, "sms", 'class="usa-link usa-link--external"'),
         (
             BroadcastPreviewTemplate,
             "broadcast",
-            'class="govuk-link govuk-link--no-visited-state"',
+            'class="usa-link usa-link--external"',
         ),
         pytest.param(
             SMSBodyPreviewTemplate,
@@ -558,7 +558,7 @@ def test_makes_links_out_of_URLs_without_protocol_in_sms_and_broadcast(
 ):
     assert (
         f"<a "
-        f'class="govuk-link govuk-link--no-visited-state" '
+        f'class="usa-link usa-link--external" '
         f'href="http://{url_with_entities_replaced}">'
         f"{url_with_entities_replaced}"
         f"</a>"

urls.js

@@ -11,6 +11,13 @@ const routes = {
     { label: 'Notify.gov Sign In', path: '/sign-in' },
   ],
 
+  authenticated: [
+    {
+      label: 'SMS Template Preview',
+      path: '/services/e6de050d-bd56-4f49-b44b-cb789c4f79fd/send/a4e530e7-cae2-4e24-a1e9-752141a0b58e/one-off/step-0',
+    },
+  ],
+
   // Using Notify section
   usingNotify: [
     { label: 'Get Started', path: '/using-notify/get-started' },
@@ -24,11 +31,26 @@ const routes = {
   // Best Practices subsection
   bestPractices: [
     { label: 'Clear Goals', path: '/using-notify/best-practices/clear-goals' },
-    { label: 'Rules And Regulations', path: '/using-notify/best-practices/rules-and-regulations' },
-    { label: 'Establish Trust', path: '/using-notify/best-practices/establish-trust' },
-    { label: 'Write For Action', path: '/using-notify/best-practices/write-for-action' },
-    { label: 'Multiple Languages', path: '/using-notify/best-practices/multiple-languages' },
-    { label: 'Benchmark Performance', path: '/using-notify/best-practices/benchmark-performance' },
+    {
+      label: 'Rules And Regulations',
+      path: '/using-notify/best-practices/rules-and-regulations',
+    },
+    {
+      label: 'Establish Trust',
+      path: '/using-notify/best-practices/establish-trust',
+    },
+    {
+      label: 'Write For Action',
+      path: '/using-notify/best-practices/write-for-action',
+    },
+    {
+      label: 'Multiple Languages',
+      path: '/using-notify/best-practices/multiple-languages',
+    },
+    {
+      label: 'Benchmark Performance',
+      path: '/using-notify/best-practices/benchmark-performance',
+    },
   ],
 
   // About section
@@ -45,6 +67,7 @@ const sublinks = [
   ...routes.usingNotify,
   ...routes.bestPractices,
   ...routes.about,
+  ...routes.authenticated,
   // Add more sections here as needed
 ];