From 61afbe7a8f27656902b4c9ef1e1cfd5239503b47 Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Wed, 11 Dec 2019 10:11:54 +0000
Subject: [PATCH] Add styles for destructive links

This colour is used in a few places so worth
making into its own block and classes.

Note: this establishes a
`app/assets/stylesheets/local` folder for any Sass
files whose names clash with files from vendored
libraries.

`_typography.scss` already exists in GOV.UK
Elements Sass.

This will no longer be needed when GOV.UK Elements
is gone and GOV.UK Frontend is at version 3, where
all its folders are in a `govuk` folder.
---
 .../govuk-frontend/extensions.scss            | 27 ++++++++
 app/assets/stylesheets/local/_typography.scss | 62 +++++++++++++++++++
 app/assets/stylesheets/main.scss              |  1 +
 3 files changed, 90 insertions(+)
 create mode 100644 app/assets/stylesheets/local/_typography.scss

diff --git a/app/assets/stylesheets/govuk-frontend/extensions.scss b/app/assets/stylesheets/govuk-frontend/extensions.scss
index 0d4b693fa..dfb5d7ae7 100644
--- a/app/assets/stylesheets/govuk-frontend/extensions.scss
+++ b/app/assets/stylesheets/govuk-frontend/extensions.scss
@@ -8,3 +8,30 @@
   }
 }
 
+// Extends govuk-link to create a class of link that causes a destructive action
+// Based on styles of link in:
+// https://github.com/alphagov/govuk-frontend/blob/v2.13.0/src/helpers/_links.scss
+//
+// Note: all destructive actions must have a confirmation step these links navigate to
+@mixin govuk-link-style-destructive-no-visited-state {
+  &:link,
+  &:visited {
+    color: $govuk-error-colour;
+  }
+
+  &:hover {
+    color: govuk-tint($govuk-error-colour, 25%);
+  }
+
+  // When focussed, the text colour needs to be darker to ensure that colour
+  // contrast is still acceptable against the focus colour
+  // Activated links are usually focused so this applies to them as well
+  &:active,
+  &:focus {
+    color: $govuk-focus-text-colour;
+  }
+}
+
+.govuk-link--destructive {
+  @include govuk-link-style-destructive-no-visited-state;
+}
diff --git a/app/assets/stylesheets/local/_typography.scss b/app/assets/stylesheets/local/_typography.scss
new file mode 100644
index 000000000..401562515
--- /dev/null
+++ b/app/assets/stylesheets/local/_typography.scss
@@ -0,0 +1,62 @@
+@import 'settings/all';
+@import 'helpers/all';
+
+@mixin destructive-link-style-default {
+  &:link {
+    color: $govuk-error-colour;
+  }
+
+  &:visited {
+    color: $govuk-link-visited-colour;
+  }
+
+  &:hover {
+    color: govuk-tint( $govuk-error-colour, 25% );
+  }
+
+  &:active {
+    color: $govuk-link-active-colour;
+  }
+
+  // When focussed, the text colour needs to be darker to ensure that colour
+  // contrast is still acceptable
+  &:focus {
+    color: $govuk-focus-text-colour;
+  }
+}
+
+@mixin destructive-link-style-no-visited-state {
+  &:link {
+    color: $govuk-error-colour;
+  }
+
+  &:visited {
+    color: $govuk-error-colour;
+  }
+
+  &:hover {
+    color: govuk-tint( $govuk-error-colour, 25% );
+  }
+
+  &:active {
+    color: $govuk-link-active-colour;
+  }
+
+  // When focussed, the text colour needs to be darker to ensure that colour
+  // contrast is still acceptable
+  &:focus {
+    color: $govuk-focus-text-colour;
+  }
+}
+
+// mimics styles for govuk-link:
+// https://github.com/alphagov/govuk-frontend/blob/063cd8e2470b62b824c6e50ca66342ac7a95d2d8/package/core/_links.scss#L7
+.destructive-link {
+  @include govuk-link-common;
+  @include destructive-link-style-default;
+  @include govuk-link-print-friendly;
+}
+
+.destructive-link--no-visited-state {
+  @include destructive-link-style-no-visited-state;
+}
diff --git a/app/assets/stylesheets/main.scss b/app/assets/stylesheets/main.scss
index cec02421b..bff09e95e 100644
--- a/app/assets/stylesheets/main.scss
+++ b/app/assets/stylesheets/main.scss
@@ -36,6 +36,7 @@ $path: '/static/images/';
 @import './govuk-frontend/all';
 
 // Specific to this application
+@import 'local/typography';
 @import 'grids';
 @import 'components/cookie-message';
 @import 'components/site-footer';