Remove small blue badge variant

CHANGELOG.md

@@ -79,3 +79,9 @@ New icons added. [See full commit](https://github.com/nhsuk/nhsapp-frontend/comm
 
 - New [Seconday Button](https://design-system.nhsapp.service.nhs.uk/components/buttons/) styling added
 - New [Confirmation Panel](https://design-system.nhsapp.service.nhs.uk/components/panel/) component
+
+## `v2.4.0` - UNRELEASED
+
+### Components
+
+- Updated [Badge](https://design-system.nhsapp.service.nhs.uk/components/badge/) - removing small blue variant

docs/assets/css/_content.scss

@@ -1,5 +1,8 @@
 .app-content {
   img {
+    @include nhsuk-responsive-margin(5, "bottom");
+    @include nhsuk-responsive-margin(5, "top");
+
     border: nhsuk-spacing(1) solid $app-img-border-color;
     display: block; // To remove extra spacing beneath images
     max-width: 100%; // So images do not break the container

docs/components/badge.md

@@ -42,18 +42,13 @@ Small badges are simple circles. They can be placed:
 - on the edge of icons, such as on the bottom navigation
 - on cards, alongside text, such as “Document attached” on appointment cards
 
-{% example "badges/badge-small-red.njk" %}
+{% example "badges/badge-small.njk" %}
 
-The colour of small badges can be:
-
-- red for important notifications that needs to stand out on a page
-- blue for secondary notifications that can afford to be less prominent
-
-For example, users will see a red badge on the bottom navigation to indicate unread messages.
+We show a red badge on the bottom navigation to indicate unread messages.
 
 ![The bottom navigation menu with a red badge on the messages item to indicate unread messages.](/assets/images/bottom-nav-badge.png)
 
-When they then navigate to their messages inbox to view those messages, unread message headings are indicated by blue badges.
+When users then navigate to their messages inbox to view those messages, unread message headings are indicated by red badges.
 
 {% example "cards/card-messages.njk" %}
 

src/components/badge/_badge.scss

@@ -53,13 +53,7 @@ $nhsapp-badge-size-tablet: 12px;
     @include small-badge-position($nhsapp-badge-size-tablet);
   }
 
-  background-color: $color_nhsuk-blue;
-}
-
-.nhsapp-badge-small--red {
-  .nhsapp-badge-small__indicator {
-    background-color: $nhsuk-error-color;
-  }
+  background-color: $nhsuk-error-color;
 }
 
 .nhsapp-badge-small--absolute {

src/components/badge/small/badge-small.njk

@@ -1,6 +1,5 @@
 <span class="
     nhsapp-badge-small 
-    {{ 'nhsapp-badge-small--red' if params.color === 'red' }}
     {{ 'nhsapp-badge-small--absolute' if params.positionAbsolute }}
     {{ params.classes if params.classes }}">
     <span class="nhsapp-badge-small__indicator" aria-hidden="true"></span>