From 95b4a23ef67007763823d5969e4c546c1bc7cd1a Mon Sep 17 00:00:00 2001
From: benjest85 <74179403+benjest85@users.noreply.github.com>
Date: Thu, 11 Jul 2024 10:08:56 +0100
Subject: [PATCH 1/6] pushed change which hadn't been applied before. To make
links strong for alert
---
components/alert/spec/Alert.stories.mdx | 10 +++++++---
1 file changed, 7 insertions(+), 3 deletions(-)
diff --git a/components/alert/spec/Alert.stories.mdx b/components/alert/spec/Alert.stories.mdx
index 8cc2fc77..82e4f330 100644
--- a/components/alert/spec/Alert.stories.mdx
+++ b/components/alert/spec/Alert.stories.mdx
@@ -27,6 +27,8 @@ Alert users to important information.
<Props of={ Alert } />
+
+
## When to use this component
Use alerts to inform users that something important has happened, notify them of a success or failure or to take action.
@@ -50,7 +52,7 @@ Use the green version of the alert to confirm that something they’re expecting
<Preview>
<Story name="Success">
<Alert heading="Payment successful" classModifiers="success">
- We've sent details to test-email@test-corp.co.uk <br /><a href="#">Download confirmation</a>
+ We've sent details to test-email@test-corp.co.uk <br /><strong><a href="#">Download confirmation</a></strong>
</Alert>
</Story>
</Preview>
@@ -62,7 +64,7 @@ Use the red version of the alert to confirm that something has gone wrong.
<Preview>
<Story name="Error">
<Alert heading="Payment unsuccessful" classModifiers="error">
- Please try again or contact our <a href="#">support team</a> for assistance.
+ Please try again or contact our <strong><a href="#">support team</a></strong> for assistance.
</Alert>
</Story>
</Preview>
@@ -83,7 +85,7 @@ Try to keep alerts to one or two lines of text and not necessarily in full sente
Tell users what to do next. If you can, give them a link that will take them directly to further support or the next action.
-Only use bold for headings.
+Only use bold for headings and links.
If the alert is about people, make sure your content is dynamic and personalised. Use ‘person’ when it’s about one person and ‘people’ for more than one and include names if you can.
@@ -91,6 +93,8 @@ If the alert is about people, make sure your content is dynamic and personalised
All users benefit from clear, visible notification messages which are presented in a consistent, predictable way. See the <a href="/accessibility/notifications">notifications guidance</a> for more information.
+Make the link text bold so that it contrasts enough with the background colours.
+
In the Atlas caseworking system, it was found this alert should sit under the H1 heading level.
## Research
From c02d94c0b67d70af42c38cb660a58a44652a6da9 Mon Sep 17 00:00:00 2001
From: benjest85 <74179403+benjest85@users.noreply.github.com>
Date: Thu, 11 Jul 2024 16:53:22 +0100
Subject: [PATCH 2/6] Fixed error on plain english page and added correct style
to anchors in alert comp
---
.../content-style-guide/designing-for-limited-english.tsx | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/apps/docs/src/common/pages/content-style-guide/designing-for-limited-english.tsx b/apps/docs/src/common/pages/content-style-guide/designing-for-limited-english.tsx
index 026a6308..5469a1fd 100644
--- a/apps/docs/src/common/pages/content-style-guide/designing-for-limited-english.tsx
+++ b/apps/docs/src/common/pages/content-style-guide/designing-for-limited-english.tsx
@@ -96,8 +96,8 @@ const Page: FC<PageProps> = ({ location }) => (
<p>A phrasal verb is where you combine a verb with other words to make it mean something different, such as ‘carry out’, ‘get over’ or ‘look after’. English is full of them. But their meaning is not always clear until you have learned them. </p>
<p>There is nearly always a one-word alternative to a phrasal verb that is easier to translate. </p>
- <div class="govuk-grid-row">
- <div class="govuk-grid-column-one-half">
+ <div className="govuk-grid-row">
+ <div className="govuk-grid-column-one-half">
<table className="govuk-table">
<thead className="govuk-table__head">
From ad7bb372c6839390e90cc486cae01c9488de1736 Mon Sep 17 00:00:00 2001
From: benjest85 <74179403+benjest85@users.noreply.github.com>
Date: Thu, 11 Jul 2024 16:57:21 +0100
Subject: [PATCH 3/6] Added alert style fix
---
components/alert/assets/Alert.scss | 4 ++++
components/alert/spec/Alert.stories.mdx | 4 ++--
2 files changed, 6 insertions(+), 2 deletions(-)
diff --git a/components/alert/assets/Alert.scss b/components/alert/assets/Alert.scss
index 4b52863f..d5ce8781 100644
--- a/components/alert/assets/Alert.scss
+++ b/components/alert/assets/Alert.scss
@@ -28,4 +28,8 @@
@include govuk-font(24, 'bold');
@include govuk-responsive-margin(3, "bottom");
}
+
+ a{
+ font-weight: bold;
+ }
}
diff --git a/components/alert/spec/Alert.stories.mdx b/components/alert/spec/Alert.stories.mdx
index 82e4f330..711ba075 100644
--- a/components/alert/spec/Alert.stories.mdx
+++ b/components/alert/spec/Alert.stories.mdx
@@ -52,7 +52,7 @@ Use the green version of the alert to confirm that something they’re expecting
<Preview>
<Story name="Success">
<Alert heading="Payment successful" classModifiers="success">
- We've sent details to test-email@test-corp.co.uk <br /><strong><a href="#">Download confirmation</a></strong>
+ We've sent details to test-email@test-corp.co.uk <br /><a href="#">Download confirmation</a>
</Alert>
</Story>
</Preview>
@@ -64,7 +64,7 @@ Use the red version of the alert to confirm that something has gone wrong.
<Preview>
<Story name="Error">
<Alert heading="Payment unsuccessful" classModifiers="error">
- Please try again or contact our <strong><a href="#">support team</a></strong> for assistance.
+ Please try again or contact our <a href="#">support team</a> for assistance.
</Alert>
</Story>
</Preview>
From 1fb493de352f6a6e9b84080bb3005ab6bb75dc4b Mon Sep 17 00:00:00 2001
From: benjest85 <74179403+benjest85@users.noreply.github.com>
Date: Thu, 11 Jul 2024 10:08:56 +0100
Subject: [PATCH 4/6] pushed change which hadn't been applied before. To make
links strong for alert
---
components/alert/spec/Alert.stories.mdx | 10 +++++++---
1 file changed, 7 insertions(+), 3 deletions(-)
diff --git a/components/alert/spec/Alert.stories.mdx b/components/alert/spec/Alert.stories.mdx
index 8cc2fc77..82e4f330 100644
--- a/components/alert/spec/Alert.stories.mdx
+++ b/components/alert/spec/Alert.stories.mdx
@@ -27,6 +27,8 @@ Alert users to important information.
<Props of={ Alert } />
+
+
## When to use this component
Use alerts to inform users that something important has happened, notify them of a success or failure or to take action.
@@ -50,7 +52,7 @@ Use the green version of the alert to confirm that something they’re expecting
<Preview>
<Story name="Success">
<Alert heading="Payment successful" classModifiers="success">
- We've sent details to test-email@test-corp.co.uk <br /><a href="#">Download confirmation</a>
+ We've sent details to test-email@test-corp.co.uk <br /><strong><a href="#">Download confirmation</a></strong>
</Alert>
</Story>
</Preview>
@@ -62,7 +64,7 @@ Use the red version of the alert to confirm that something has gone wrong.
<Preview>
<Story name="Error">
<Alert heading="Payment unsuccessful" classModifiers="error">
- Please try again or contact our <a href="#">support team</a> for assistance.
+ Please try again or contact our <strong><a href="#">support team</a></strong> for assistance.
</Alert>
</Story>
</Preview>
@@ -83,7 +85,7 @@ Try to keep alerts to one or two lines of text and not necessarily in full sente
Tell users what to do next. If you can, give them a link that will take them directly to further support or the next action.
-Only use bold for headings.
+Only use bold for headings and links.
If the alert is about people, make sure your content is dynamic and personalised. Use ‘person’ when it’s about one person and ‘people’ for more than one and include names if you can.
@@ -91,6 +93,8 @@ If the alert is about people, make sure your content is dynamic and personalised
All users benefit from clear, visible notification messages which are presented in a consistent, predictable way. See the <a href="/accessibility/notifications">notifications guidance</a> for more information.
+Make the link text bold so that it contrasts enough with the background colours.
+
In the Atlas caseworking system, it was found this alert should sit under the H1 heading level.
## Research
From 22c268571b6f081a4783e0ad1bbe248d8c5ffa66 Mon Sep 17 00:00:00 2001
From: benjest85 <74179403+benjest85@users.noreply.github.com>
Date: Thu, 11 Jul 2024 16:57:21 +0100
Subject: [PATCH 5/6] Added alert style fix
---
components/alert/assets/Alert.scss | 4 ++++
components/alert/spec/Alert.stories.mdx | 4 ++--
2 files changed, 6 insertions(+), 2 deletions(-)
diff --git a/components/alert/assets/Alert.scss b/components/alert/assets/Alert.scss
index 4b52863f..d5ce8781 100644
--- a/components/alert/assets/Alert.scss
+++ b/components/alert/assets/Alert.scss
@@ -28,4 +28,8 @@
@include govuk-font(24, 'bold');
@include govuk-responsive-margin(3, "bottom");
}
+
+ a{
+ font-weight: bold;
+ }
}
diff --git a/components/alert/spec/Alert.stories.mdx b/components/alert/spec/Alert.stories.mdx
index 82e4f330..711ba075 100644
--- a/components/alert/spec/Alert.stories.mdx
+++ b/components/alert/spec/Alert.stories.mdx
@@ -52,7 +52,7 @@ Use the green version of the alert to confirm that something they’re expecting
<Preview>
<Story name="Success">
<Alert heading="Payment successful" classModifiers="success">
- We've sent details to test-email@test-corp.co.uk <br /><strong><a href="#">Download confirmation</a></strong>
+ We've sent details to test-email@test-corp.co.uk <br /><a href="#">Download confirmation</a>
</Alert>
</Story>
</Preview>
@@ -64,7 +64,7 @@ Use the red version of the alert to confirm that something has gone wrong.
<Preview>
<Story name="Error">
<Alert heading="Payment unsuccessful" classModifiers="error">
- Please try again or contact our <strong><a href="#">support team</a></strong> for assistance.
+ Please try again or contact our <a href="#">support team</a> for assistance.
</Alert>
</Story>
</Preview>
From c05da03001a28f554d2bf8668e634283e95e84d1 Mon Sep 17 00:00:00 2001
From: benjest85 <74179403+benjest85@users.noreply.github.com>
Date: Tue, 6 Aug 2024 11:18:49 +0100
Subject: [PATCH 6/6] Added exclude for bold links within buttons in alerts
---
components/alert/assets/Alert.scss | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/components/alert/assets/Alert.scss b/components/alert/assets/Alert.scss
index d5ce8781..87bd60b9 100644
--- a/components/alert/assets/Alert.scss
+++ b/components/alert/assets/Alert.scss
@@ -29,7 +29,7 @@
@include govuk-responsive-margin(3, "bottom");
}
- a{
+ a:not(.govuk-button){
font-weight: bold;
}
}