Updated notification badge

CHANGELOG.md

@@ -7,6 +7,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Unreleased]
 ### Updated
+- Updated notification badge CSS, code and examples [#934](https://github.com/hmrc/assets-frontend/pull/934)
 - Fixed a typo in open links in a new window or tab page [#935](https://github.com/hmrc/assets-frontend/pull/935)
 - Fixed a typo in technical problem page [#933](https://github.com/hmrc/assets-frontend/pull/933)
 - Added documentation for page title [#928](https://github.com/hmrc/assets-frontend/pull/928)

assets/components/notification-badge/README.md

@@ -1,4 +1,4 @@
-# Notification Badge
+# Notification badge
 
 {{ wip(142) }}
 
@@ -38,4 +38,4 @@ Notification badges are common on many sites and services. It has been tested as
 - people understand what it is for
 - it does not distract people from their task
 
-More work is needed to make it accessible – [add your research on GitHub](https://github.com/hmrc/design-patterns/issues/142).
+{{ research(142) }}

assets/components/notification-badge/_notification_badge.scss

@@ -1,16 +1,12 @@
 .badge {
-  position: relative;
   display: inline-block;
-  top: -10px;
-  left: -6px;
-  min-width: 19px;
-  padding: 3px 6px 2px 6px;
+  min-width: 10px;
+  padding: 5px 8px 1px 8px;
   font-size: 14px;
   font-weight: 600;
-  line-height: 1;
   background: #B10E1E;
   color: #FFF;
   text-align: center;
   white-space: nowrap;
   border-radius: 10px;
-}
+}

assets/components/notification-badge/notification-badge.html

@@ -1 +1 @@
-<a href="#">Messages<span class="badge" aria-label="Number of x">36</span></a>
+<a href="#">Messages<span class="badge">36</span></a>