feat(alert): add link styles for info, success and error

ministryofjustice · Feb 6, 2025 · eb251b0 · eb251b0
1 parent 51baf68
commit eb251b0
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 5 deletions.
diff --git a/docs/examples/alerts/index.njk b/docs/examples/alerts/index.njk
@@ -31,7 +31,7 @@ figma_link: https://www.figma.com/file/N2xqOFkyehXwcD9DxU1gEq/MoJ-Figma-Kit?type
   })
 }}
 
-<h2>with headings</h2>
+<h2>With headings</h2>
 
 {{ mojAlert({
  type: "information",
@@ -58,7 +58,7 @@ heading: "Woah, hold up!",
 text: "Bad things happened."
 }) }}
 
-<h2>with headings level 3</h2>
+<h2>With headings level 3</h2>
 
 {{ mojAlert({
  type: "information",
@@ -67,7 +67,7 @@ text: "Bad things happened."
   text: "Content that informs you of a thing."
 }) }}
 
-<h2>attempt to pass just a heading</h2>
+<h2>Attempt to pass just a heading</h2>
 
 {{ mojAlert({
   type: "information",
@@ -76,7 +76,7 @@ text: "Bad things happened."
   })
 }}
 
-<h2>attempt to use h1</h2>
+<h2>Attempt to use h1</h2>
 
 {{ mojAlert({
   type: "information",
@@ -129,7 +129,7 @@ dismissible: "yes",
 }}
 
 
-<h2>with headings and links</h2>
+<h2>With headings and links</h2>
 
 {{ mojAlert({
  type: "information",

diff --git a/src/moj/components/alert/_alert.scss b/src/moj/components/alert/_alert.scss
@@ -76,11 +76,21 @@ $moj-colour-orange: #eb611c;
 .moj-alert--information {
   border-color: $govuk-brand-colour;
   color: $govuk-brand-colour;
+
+  .moj-alert__action,
+  .moj-alert__content a {
+    @include govuk-link-style-default;
+  }
 }
 
 .moj-alert--success {
   border-color: govuk-colour("green");
   color: govuk-colour("green");
+
+  .moj-alert__action,
+  .moj-alert__content a {
+    @include govuk-link-style-success;
+  }
 }
 
 .moj-alert--warning {
@@ -91,4 +101,9 @@ $moj-colour-orange: #eb611c;
 .moj-alert--error {
   border-color: govuk-colour("red");
   color: govuk-colour("red");
+
+  .moj-alert__action,
+  .moj-alert__content a {
+    @include govuk-link-style-error;
+  }
 }