Add character count component

CHANGELOG.md

@@ -21,6 +21,11 @@
 
   ([PR #1015](https://github.com/alphagov/govuk-frontend/pull/1015))
 
+- Add character count component
+
+  ([PR #959](https://github.com/alphagov/govuk-frontend/pull/959))
+
+
 🔧 Fixes:
 
 - Apply max-width to the `<select>` element

src/all.js

@@ -1,6 +1,7 @@
 import { nodeListForEach } from './common'
 import Button from './components/button/button'
 import Details from './components/details/details'
+import CharacterCount from './components/character-count/character-count'
 import Checkboxes from './components/checkboxes/checkboxes'
 import ErrorSummary from './components/error-summary/error-summary'
 import Header from './components/header/header'
@@ -17,6 +18,11 @@ function initAll () {
     new Details($detail).init()
   })
 
+  var $characterCount = document.querySelectorAll('[data-module="character-count"]')
+  nodeListForEach($characterCount, function ($characterCount) {
+    new CharacterCount($characterCount).init()
+  })
+
   var $checkboxes = document.querySelectorAll('[data-module="checkboxes"]')
   nodeListForEach($checkboxes, function ($checkbox) {
     new Checkboxes($checkbox).init()
@@ -45,6 +51,7 @@ export {
   initAll,
   Button,
   Details,
+  CharacterCount,
   Checkboxes,
   ErrorSummary,
   Header,

src/all.test.js

@@ -65,6 +65,7 @@ describe('GOV.UK Frontend', () => {
       expect(components).toEqual([
         'Button',
         'Details',
+        'CharacterCount',
         'Checkboxes',
         'ErrorSummary',
         'Header',

src/components/_all.scss

@@ -2,6 +2,7 @@
 @import "breadcrumbs/breadcrumbs";
 @import "button/button";
 @import "checkboxes/checkboxes";
+@import "character-count/character-count";
 @import "date-input/date-input";
 @import "details/details";
 @import "error-message/error-message";