Remove small blue badge variant (#235)

Remove small blue badge variant
nhsuk · Jan 28, 2025 · fbb003f · fbb003f
1 parent 43163f5
commit fbb003f
Show file tree

Hide file tree

Showing 6 changed files with 13 additions and 33 deletions.
diff --git a/CHANGELOG.md b/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
diff --git a/docs/assets/css/_content.scss b/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

diff --git a/docs/components/badge.md b/docs/components/badge.md
@@ -23,8 +23,6 @@ Badges should be dynamic and temporary. After users have viewed the relevant inf
 - disappear
 - remain if there are still unread items (but with an adjusted number count, if one is used)
 
-There are different size and colour variations of badges.
-
 ### Large badges
 
 Large badges always include a number count. This tells users how many items need their attention.
@@ -42,18 +40,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" %}
-
-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
+{% example "badges/badge-small.njk" %}
 
-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" %}
 

diff --git a/docs/examples/badges/badge-small-red.njk b/docs/examples/badges/badge-small-red.njk
diff --git a/src/components/badge/_badge.scss b/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 {

diff --git a/src/components/badge/small/badge-small.njk b/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>