diff --git a/README.md b/README.md
index f2c6bd7d98..5a30f68205 100644
--- a/README.md
+++ b/README.md
@@ -50,7 +50,7 @@ This project uses [LHCI](https://www.npmjs.com/package/@lhci/cli).
```bash
yarn global add @lhci/cli
-yarn test-lighthouse
+yarn test-lighthouse
```
## Testing - macros and scripts
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-error_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-error_0_document_0_desktop.png
index fb4959c617..1982865c39 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-error_0_document_0_desktop.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-error_0_document_0_desktop.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:f3a7c23c0a9e8ac81d128f569b170a3fca7f391594b9aac965d65a4ad683c29b
-size 30282
+oid sha256:858aa58ddd0f909ab9d87abe56cd2007c6a4145b09d5dc8927a6b74bec4cbf71
+size 30289
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-error_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-error_0_document_1_tablet.png
index 295b535949..df36e4b3f8 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-error_0_document_1_tablet.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-error_0_document_1_tablet.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:da820b03a84525d6ac25e7b0a131865b59c9c2db9d962526b57bd820a7f938f2
-size 24603
+oid sha256:8672504043d2049adfbd377ce4b6ae068835577033e619d1e17e00fadb5bc3a9
+size 24611
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-error_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-error_0_document_2_mobile.png
index 07eb240900..ab0d3c0dfb 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-error_0_document_2_mobile.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-error_0_document_2_mobile.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:a3bcd254ad91ed2bc6af8badc8e089543dcc4da957d6258f376e9aa93c94f381
-size 22184
+oid sha256:84075d5d8ee7f29e197c6f3495507c8d8740c79b38847897932abd566d05fcd7
+size 22188
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-checkboxes-expanded_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-checkboxes-expanded_0_document_0_desktop.png
index a4c36575ed..15a40c8fad 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-checkboxes-expanded_0_document_0_desktop.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-checkboxes-expanded_0_document_0_desktop.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:565cd3e8ac33951ff4ce81cd9fd852c88f1584116e33efdcced4b86be3be3bfa
-size 35687
+oid sha256:4f051774126f2806ff3a1b86cddbd375941217ec835cf1e7534f2ce7af85e17a
+size 35690
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-checkboxes-expanded_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-checkboxes-expanded_0_document_1_tablet.png
index fdecc6ac7a..40fadedbfe 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-checkboxes-expanded_0_document_1_tablet.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-checkboxes-expanded_0_document_1_tablet.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:39d67d263492fa33c4cbfba348a1fc3c3e16ff6f657fe2abd810b453a67e86e3
-size 29775
+oid sha256:91dca1e53deb160d553f389fa53e6cceef3bf342f15279d728c3cea932dc9c2b
+size 29781
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-checkboxes-expanded_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-checkboxes-expanded_0_document_2_mobile.png
index ec3ff776fc..36ab43dbed 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-checkboxes-expanded_0_document_2_mobile.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-checkboxes-expanded_0_document_2_mobile.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:0bb16a95bd9484c07584460eceaff08095b06dc61b9710ed0fdc9f7f7f6a3cae
-size 25514
+oid sha256:ca73fbad469afebcddeaa99ec8ff7f68df820960d8f896b21bbb6e68620a66f3
+size 25508
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-radios-expanded_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-radios-expanded_0_document_0_desktop.png
index 37ea7e9ab4..58be6d1c8c 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-radios-expanded_0_document_0_desktop.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-radios-expanded_0_document_0_desktop.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:095ffe2cdf248d22413d7cec2b26656f5e25cd3101810c8159f821d5b1dd2995
-size 35889
+oid sha256:185cb00b8c45e1a4971952ec712f6ed52ab7074bc06e21829bfded282ff36370
+size 35899
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-radios-expanded_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-radios-expanded_0_document_1_tablet.png
index 51e2314025..c90a67c7f4 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-radios-expanded_0_document_1_tablet.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-radios-expanded_0_document_1_tablet.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:5e500345d0699a3522cea9e417b84f22de16dfc44e3a5bcaf4886c77e5ddca63
-size 29971
+oid sha256:b3079cb68ca2e836f52e8b4af2177aca3dca1c7aef59a7997c68b510fbd40cda
+size 29982
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-radios-expanded_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-radios-expanded_0_document_2_mobile.png
index c094321712..f86e431ff9 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-radios-expanded_0_document_2_mobile.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-radios-expanded_0_document_2_mobile.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:19c5aa7dd4942aa92fe64a7e983a096bc2c5866553999d4941e5e6a229a14d95
-size 26485
+oid sha256:01ef6e682f5de81b82c8d8c09cf35deae50d59d4c952bd44e8f1e8a881d343cb
+size 26480
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-select-expanded_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-select-expanded_0_document_0_desktop.png
index efc6f4e247..c28da430c0 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-select-expanded_0_document_0_desktop.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-select-expanded_0_document_0_desktop.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:8b66c9c4f50ba66b43b183ad84e70949cac42e5f47658b688c99412c652e9c40
-size 32209
+oid sha256:29a08189d7c3577d34b3416e140d8aac9cc39b312a0b00ad454974274d4e361e
+size 32205
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-select-expanded_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-select-expanded_0_document_1_tablet.png
index 5b7e4962b1..795d44a4ce 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-select-expanded_0_document_1_tablet.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-select-expanded_0_document_1_tablet.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:75d2b5c205ffdb3cf2065a9ef547abfc44e2db10769408aebb558fe1e158ee84
-size 26160
+oid sha256:b0be039013e92b93b88e1a92eb3d6bd1fd99ecb8230fcc8340e7d9cd5bd360c6
+size 26161
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-select-expanded_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-select-expanded_0_document_2_mobile.png
index 43df05e81b..c9d42f59e5 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-select-expanded_0_document_2_mobile.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-select-expanded_0_document_2_mobile.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:ca041c936dac4c19d49aa124093aca1b19a9dfdc468d7b4960fae3fad7d2f098
-size 22906
+oid sha256:a9d0e37165503ce3a58ea934439b29b18c2d897556938e70f34edd675bd663db
+size 22903
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-text-area-expanded_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-text-area-expanded_0_document_0_desktop.png
index d834f157c6..56f1dac9da 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-text-area-expanded_0_document_0_desktop.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-text-area-expanded_0_document_0_desktop.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:2dad1e4ba510cd38c3afecbe7b20f47b61edd11e6028354c5387a363e034e532
+oid sha256:c753bfa974b477a7c33a66336b8b07f2fa67adaa631f02e1200c4ba70630367b
size 36883
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-text-area-expanded_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-text-area-expanded_0_document_1_tablet.png
index bec81ad3ae..4f4ec3ef6c 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-text-area-expanded_0_document_1_tablet.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-text-area-expanded_0_document_1_tablet.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:99dfd895a6f302dcfc7ff80685961de73e5848d087fae171614e8bb20cccd6b6
-size 30668
+oid sha256:e393fbdaeab1ea8911380740d3c34309e27f367451bce9ff31369d0a6e148774
+size 30671
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-text-area-expanded_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-text-area-expanded_0_document_2_mobile.png
index d8c2431530..cb661af7a2 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-text-area-expanded_0_document_2_mobile.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-text-area-expanded_0_document_2_mobile.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:0a82f374ecd8fa4af57d44f251044de74f36fd12e344ecbf65de427ced17ee9b
-size 27588
+oid sha256:b1e7b653d8d37c8323727da4c2da1e5e52a4af4cdf8445071b4822c3410fe5a6
+size 27775
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-text-input-expanded_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-text-input-expanded_0_document_0_desktop.png
index a3de92bff6..f32ab5d815 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-text-input-expanded_0_document_0_desktop.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-text-input-expanded_0_document_0_desktop.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:e9da71a7e3a319cb36a70f8917c5d2abec6ab346617f00b4938dd80893302e05
-size 33681
+oid sha256:4a261e4b4311ce327b95705af2c8c9a79be0cf1c60c251f6b576239d1570f9ef
+size 33676
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-text-input-expanded_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-text-input-expanded_0_document_1_tablet.png
index adfdd7e625..3c952e750e 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-text-input-expanded_0_document_1_tablet.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-text-input-expanded_0_document_1_tablet.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:92e285b2b955be97431fa396ad9251c66e3f157d78c54d5dacf4f19cbd6e3b85
+oid sha256:5262737324ecccd981447ea1a3aeabd0ca0f04783db423cd28bf94200c6a6643
size 27654
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-text-input-expanded_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-text-input-expanded_0_document_2_mobile.png
index 3cda89ccc7..54fb49fd57 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-text-input-expanded_0_document_2_mobile.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-text-input-expanded_0_document_2_mobile.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:68d68fa1659948c1e61d32d61149f8c618a632ba93f0271d69e14cb8f415e024
-size 24118
+oid sha256:19cd5bd3db4db8a929a86bfed52bef18052f7f385cad0f86739ee0c0c7e1b6a6
+size 24117
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-visible-text-input_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-visible-text-input_0_document_0_desktop.png
index f4c5e74585..6c0eca5628 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-visible-text-input_0_document_0_desktop.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-visible-text-input_0_document_0_desktop.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:91fecfa5398a881ffccb3c6a37174d432c12bd9bd936b9cd2a25efb6770994af
-size 33133
+oid sha256:3157414ba2f3f25376922083ba6cc491d774a1ce5cf0b9db9e4e2c1f53eb9302
+size 33127
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-visible-text-input_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-visible-text-input_0_document_1_tablet.png
index 49e62f2cb5..cefb314761 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-visible-text-input_0_document_1_tablet.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-visible-text-input_0_document_1_tablet.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:3a9f45fd0d3e98932b248907b3d2fc7b8944d35e762cf0bdfd5dddcfe640fb4d
+oid sha256:ce08087d4fee71a794c920d900bcce4323fa467bc615cfb0c67dab7c61e7116f
size 27169
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-visible-text-input_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-visible-text-input_0_document_2_mobile.png
index ded5295bb4..1715f94569 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-visible-text-input_0_document_2_mobile.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-visible-text-input_0_document_2_mobile.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:82fbf0bf9fa1eb1dc83e74b9dcd80e69af2267f60a92e11f6339100f2a4242aa
-size 23702
+oid sha256:231cd3d8957a2e261718b49a823769e98e8a3214afa9cfed014c520007ee4fc0
+size 23700
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-clear-button-expanded_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-clear-button-expanded_0_document_0_desktop.png
index d809739e00..c6aa2351e8 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-clear-button-expanded_0_document_0_desktop.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-clear-button-expanded_0_document_0_desktop.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:7c3c8ad5aee328715e6c5f9b41dde93606902ca8ae30c706e9ce259907c450df
-size 50104
+oid sha256:24ebc5a077886b710c4d7126a13e3eef49f7011f10f55f0dd662da379fc88f59
+size 50106
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-clear-button-expanded_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-clear-button-expanded_0_document_1_tablet.png
index b9126b17d0..dbca32fb6f 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-clear-button-expanded_0_document_1_tablet.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-clear-button-expanded_0_document_1_tablet.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:f632823c5be4f41118aa24760e90dd7c83053cbc49ac70e4ad61c42bbc5e7504
-size 43052
+oid sha256:d0b17fcb18147698cc89198dd347a5042b26ecc70bf61330868b611993c7a647
+size 43044
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-clear-button-expanded_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-clear-button-expanded_0_document_2_mobile.png
index 0e611ab4ad..e1c7ae7384 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-clear-button-expanded_0_document_2_mobile.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-clear-button-expanded_0_document_2_mobile.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:e4e96aac298f1eeb0498e485ed3fdafb5b5200073000d72b43ba9b9249574960
-size 38447
+oid sha256:c7bfdf8f5dce967dc31107c25bcf4d5b692d12ca5c927192d823eff7be781aa1
+size 38448
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-error_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-error_0_document_0_desktop.png
index a478b6d5f2..3c3535e4af 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-error_0_document_0_desktop.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-error_0_document_0_desktop.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:c1c89a55f704b25e62cb40054f62e685b9bc050c7f0655e0ce6e405dc851fecd
-size 20662
+oid sha256:a86f793cad2d88d88a26552543d09cf7a01f751fad73834e0a39f72166e4a084
+size 20666
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-error_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-error_0_document_1_tablet.png
index 6ba21e32b2..be58a7e81f 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-error_0_document_1_tablet.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-error_0_document_1_tablet.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:32a2e26de072b23dc7e679b8edfabe80e50951c36b44e90ebbc1264d251cce43
-size 15463
+oid sha256:e8b1f68ae98ce6a6f9d2af36af20444a7c7b284c7e43482256b4abbeb68453b6
+size 15475
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-error_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-error_0_document_2_mobile.png
index 2635a3f57f..3dbe18a2ab 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-error_0_document_2_mobile.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-error_0_document_2_mobile.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:4bd4ffdf24742fc491b93fd15618c238d3524186143bb3cd1575c941bfa6be79
-size 13136
+oid sha256:7813aba6e46cfb84288f8f3abe064cdc534365f5c5ce3acfd32600305862a829
+size 13133
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-checkboxes-expanded_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-checkboxes-expanded_0_document_0_desktop.png
index b6562f7a86..71294141d4 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-checkboxes-expanded_0_document_0_desktop.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-checkboxes-expanded_0_document_0_desktop.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:0f9cd6946ed0286cda2439f3fb9e9be16a92d60332b0869c85196fdc23bd6443
-size 33079
+oid sha256:0fb053c799725ad17811019e7a60ebd7a00b2c721244ffc222785e2c9506bd4e
+size 33071
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-checkboxes-expanded_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-checkboxes-expanded_0_document_1_tablet.png
index 89cdd1e21d..9e63a96cd3 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-checkboxes-expanded_0_document_1_tablet.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-checkboxes-expanded_0_document_1_tablet.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:0fca534c806b9f46e390f9273953f8c14221ce8131a3843a77ee313d9ea55fc0
-size 26928
+oid sha256:43700c2f70b4402d083d9d166453ffdfa5366c91c78dce7f9b6f7eb8263b83b0
+size 26936
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-checkboxes-expanded_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-checkboxes-expanded_0_document_2_mobile.png
index 44a6d603e6..69dcb04ac4 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-checkboxes-expanded_0_document_2_mobile.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-checkboxes-expanded_0_document_2_mobile.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:2a1d6d45a3c1ce54960775e4f0d7a9a89a7af583efc6d595989421155ebbba07
-size 23822
+oid sha256:7202b600019cb34e43598cc42857923f3a7db9f955f8580e74b52da3fb6255ab
+size 23807
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-radios-expanded_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-radios-expanded_0_document_0_desktop.png
index 27995f7324..12dafc7db9 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-radios-expanded_0_document_0_desktop.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-radios-expanded_0_document_0_desktop.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:19cd973033a93acfe12b17367eb038eedb12452eef98bd3e869d75e851bd2796
-size 35608
+oid sha256:90d92245c57d1d4fa23f6d3e7efcb2c9916ff1a266c8f431cb4f5e08db1e473b
+size 35600
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-radios-expanded_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-radios-expanded_0_document_1_tablet.png
index e77dc753ee..2d502a4714 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-radios-expanded_0_document_1_tablet.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-radios-expanded_0_document_1_tablet.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:a06e8655dfc0645b00871d8d622fb98485a45f5e7a0425685b8b0255778fc2e7
-size 29619
+oid sha256:6716640507a65b9da541d50a10badaef993ed8b88106d0bf5a9950586f8af9bf
+size 29628
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-radios-expanded_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-radios-expanded_0_document_2_mobile.png
index 8da34f201b..fa3cf43d78 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-radios-expanded_0_document_2_mobile.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-radios-expanded_0_document_2_mobile.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:3a0803c9498044a9621fd652cf703662a0fa95aa7a83e85a504e9fbf18af3c32
-size 26221
+oid sha256:fcc32707872e1f497b6a9175a22db32cd6fd4f7564ad527b7568ef23a9eed839
+size 26210
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-select-expanded_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-select-expanded_0_document_0_desktop.png
index f2b949107a..acc6165e32 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-select-expanded_0_document_0_desktop.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-select-expanded_0_document_0_desktop.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:5cc7c72670eb161a63ad7256caf2906ffd0362b56eebf2158a34964d648d58f8
-size 32242
+oid sha256:2eb2514485318209dc30e89b412461fc2108c42890b68f21dbd48413e576337d
+size 32240
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-select-expanded_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-select-expanded_0_document_1_tablet.png
index a08925dbbd..07e5fb8f43 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-select-expanded_0_document_1_tablet.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-select-expanded_0_document_1_tablet.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:fc778b78cf7e419bfe4ea27d10d14323c638486fd6567d0dc03771176940d23f
-size 26073
+oid sha256:a3056dd1cf047bac217209c9b0768a22a693f888b9ef370c3159db59ad85f74d
+size 26075
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-select-expanded_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-select-expanded_0_document_2_mobile.png
index e9c64f9b67..920bb0a728 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-select-expanded_0_document_2_mobile.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-select-expanded_0_document_2_mobile.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:4a02769b0f4848f35e047c8ff6aafd6b0453f09e6dd7905e2eda3cc967978053
-size 22725
+oid sha256:7ecb33404684dff559930079bf07ff6e5f0246819631fec668bf59942e36b786
+size 22722
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-text-area-expanded_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-text-area-expanded_0_document_0_desktop.png
index 73e5d7e21c..4bd9682688 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-text-area-expanded_0_document_0_desktop.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-text-area-expanded_0_document_0_desktop.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:94ae99edeca9b3c9c10583cdc06f16ca3c887e67e3d29c0df4051a79af373b5b
-size 47542
+oid sha256:bf2d08ca6f8b0dee03967fd85f9871e2657e2dcde61e348cf766f1accca991fd
+size 47551
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-text-area-expanded_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-text-area-expanded_0_document_1_tablet.png
index 82718971c5..bacb2eaa90 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-text-area-expanded_0_document_1_tablet.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-text-area-expanded_0_document_1_tablet.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:ea52d4ae20ce6ca37b0e5e25824a745d66c62745122b3a7974f94d72820912b5
-size 40440
+oid sha256:76f81faaca6f5b4138aa90c98ce9a9ce47e060d3d10e9a82d02617079be28f1e
+size 40443
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-text-area-expanded_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-text-area-expanded_0_document_2_mobile.png
index 28e210f28b..1e399e7089 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-text-area-expanded_0_document_2_mobile.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-text-area-expanded_0_document_2_mobile.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:6778243f968387c67d32e3e31eca7ba2431d533c3e76d8fed32958f44272dc31
-size 38178
+oid sha256:5c29e2693fe9967633709852212959a16dc976be9589faa5a85bbcc6e9472026
+size 38351
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-text-input-expanded_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-text-input-expanded_0_document_0_desktop.png
index 648aa30a56..4d35a7d239 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-text-input-expanded_0_document_0_desktop.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-text-input-expanded_0_document_0_desktop.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:92ddb310343e11a7f053224ec55e28ae756a71312b1758294072f1a28e2cb70c
-size 43967
+oid sha256:fea3b6f5618ade5626db1aee3277775d540cbb2e6188e4ab4046d86a9e72f818
+size 43969
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-text-input-expanded_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-text-input-expanded_0_document_1_tablet.png
index fe51acaf55..17d4e55be7 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-text-input-expanded_0_document_1_tablet.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-text-input-expanded_0_document_1_tablet.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:57fd0dd9f1d0e9fb5049540f5d80b5f1baaac8a73b42d3fc5ac1311ffafdbe80
-size 36906
+oid sha256:313737736a9dbb1ccecf62561e742d8f4a5ae5be44209b6ea060ecd2824c369d
+size 36907
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-text-input-expanded_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-text-input-expanded_0_document_2_mobile.png
index f0975e223c..3af59f65ee 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-text-input-expanded_0_document_2_mobile.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-text-input-expanded_0_document_2_mobile.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:43585908689e9fe5846a5079181fbea7ace1390e38084df9cd2a37ef8e7593d6
-size 33937
+oid sha256:62cbfcb4a038e1ee4c540eb21b5cd84d80eb5decccd9f032369024c3129b0a66
+size 33930
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-visible-text-input_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-visible-text-input_0_document_0_desktop.png
index 72b32dd700..dbf9a08a1f 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-visible-text-input_0_document_0_desktop.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-visible-text-input_0_document_0_desktop.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:e69db469e57efb7ce0d0b8fd28a7a9f17d4f6819c44ec2615b813f5ba4d5667b
-size 27103
+oid sha256:108ab5639c9b50a8e821fde10d160357580d5b73432f041683747f5bd6165471
+size 27105
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-visible-text-input_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-visible-text-input_0_document_1_tablet.png
index 88bf1259d9..a5062ed760 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-visible-text-input_0_document_1_tablet.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-visible-text-input_0_document_1_tablet.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:0098fdc37759cce2bc2eca6c81aadb14502b4139bc0a2708cffc4ec3ed0925d3
-size 24955
+oid sha256:2f038b54989df701d397b1f6510cbf90b46701a668ff62c59a032254b579f3ce
+size 24962
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-visible-text-input_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-visible-text-input_0_document_2_mobile.png
index 0b469fba8c..54cebc9d06 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-visible-text-input_0_document_2_mobile.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-visible-text-input_0_document_2_mobile.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:d396c8adb0278fe7e33d52b616b728fb48687845513b4d7788c52046b4a5c0da
-size 21976
+oid sha256:0b2a234c5d89111730e7a2c4488398c7556eb341baf37ca67aea7d051c348ad9
+size 21974
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__patterns_correct-errors_example-errors-proto-errors_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__patterns_correct-errors_example-errors-proto-errors_0_document_0_desktop.png
index b5d53a97a0..da9be7169b 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__patterns_correct-errors_example-errors-proto-errors_0_document_0_desktop.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__patterns_correct-errors_example-errors-proto-errors_0_document_0_desktop.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:4f35220f3c2411023624a1d75bc3ceb1655b4be3737df616a525715457f018ae
+oid sha256:05e3bb81f69caad36b6ecaf704157282852255b1c70243064fe0d4f650115540
size 214399
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__patterns_correct-errors_example-errors-proto-errors_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__patterns_correct-errors_example-errors-proto-errors_0_document_1_tablet.png
index df7404ab47..7fdd591bdb 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__patterns_correct-errors_example-errors-proto-errors_0_document_1_tablet.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__patterns_correct-errors_example-errors-proto-errors_0_document_1_tablet.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:6a8b00a7c563f9a6105c594d41799861942b598a51f7b0045dbe759a0fc75c29
-size 191686
+oid sha256:795326fc32442a4133bf9aa85a94c37a986afa3607d61fb98c234cc6dc2c0865
+size 191687
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__patterns_correct-errors_example-errors-proto-errors_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__patterns_correct-errors_example-errors-proto-errors_0_document_2_mobile.png
index 31884ae0fb..e9840fa632 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__patterns_correct-errors_example-errors-proto-errors_0_document_2_mobile.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__patterns_correct-errors_example-errors-proto-errors_0_document_2_mobile.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:49a7576581f13992afee037c38ff663f3df87b16b00306cc2a25cc95d9c5d7b3
-size 201665
+oid sha256:12accec79feb6f26e79b66f0289ce7e38cff44ab1a9047cfb7b0740c53ffd218
+size 202070
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__patterns_correct-errors_example-errors-proto_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__patterns_correct-errors_example-errors-proto_0_document_0_desktop.png
index 4a316f61e3..54f1b53eaf 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__patterns_correct-errors_example-errors-proto_0_document_0_desktop.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__patterns_correct-errors_example-errors-proto_0_document_0_desktop.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:262cf1fc5178abbe72a7541c3b493bbbb315499f98440b971b0d6ad8d7781c6f
-size 122109
+oid sha256:8f86e957f7a5b915e9a356f9202c5143f2fe443b79b2cbb9a8b880ace361891f
+size 122106
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__patterns_correct-errors_example-errors-proto_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__patterns_correct-errors_example-errors-proto_0_document_1_tablet.png
index 1c2a81aa0d..79f8b522eb 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__patterns_correct-errors_example-errors-proto_0_document_1_tablet.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__patterns_correct-errors_example-errors-proto_0_document_1_tablet.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:e88404cf5f19ca63523a46a144b8c0ba683f400d5e5e3f4c01c33b14af19080a
-size 107402
+oid sha256:a952994a703d981518be206cb0307f858926ee07f0b7bc185a534daac0f138a3
+size 107396
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__patterns_correct-errors_example-errors-proto_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__patterns_correct-errors_example-errors-proto_0_document_2_mobile.png
index 172fffa6fb..dd7fbe450c 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__patterns_correct-errors_example-errors-proto_0_document_2_mobile.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__patterns_correct-errors_example-errors-proto_0_document_2_mobile.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:0cebe7b2143dce7cb61aca91edc8a4eacb56ca2de8bd81d0376ba0fa8897bf6e
-size 102361
+oid sha256:d6f8e851a8bb10e0372681d8686d1e371bdb8461212cf2a763afc40035400452
+size 102371
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__patterns_feedback_example-feedback-form-errors_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__patterns_feedback_example-feedback-form-errors_0_document_0_desktop.png
index d89834abd6..135fcd2c8c 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__patterns_feedback_example-feedback-form-errors_0_document_0_desktop.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__patterns_feedback_example-feedback-form-errors_0_document_0_desktop.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:28270fb455eef546cf003946d997ae32f024675daf11a699b7cd622169adb964
-size 93132
+oid sha256:91dbbd33e3aba9b7d3a5947bb7fe58af34af3afc85bff4c7069fa5e2e2dd3b53
+size 93137
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__patterns_feedback_example-feedback-form-errors_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__patterns_feedback_example-feedback-form-errors_0_document_1_tablet.png
index e90ed781d0..fc81630e05 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__patterns_feedback_example-feedback-form-errors_0_document_1_tablet.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__patterns_feedback_example-feedback-form-errors_0_document_1_tablet.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:3d7f40e4466d5f842ef6cdc639f8e1a3ab46c6da92014c67aab530747e6e10bd
-size 82843
+oid sha256:37440463817cfc423f98fb6684d5299e036d30a672dd195832f29e610dd537da
+size 82850
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__patterns_feedback_example-feedback-form-errors_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__patterns_feedback_example-feedback-form-errors_0_document_2_mobile.png
index 185b75da9e..bfbb46df13 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__patterns_feedback_example-feedback-form-errors_0_document_2_mobile.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__patterns_feedback_example-feedback-form-errors_0_document_2_mobile.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:b6b03ebbd5c8b87ed4e2b9775dbc32eb463ec8c8b115b5ad714daf8b8c3ecba8
-size 83672
+oid sha256:716c091045c127984e66e44c6be8de7859fa9b8aff96b3a080fb96bfab0881d2
+size 83673
diff --git a/src/components/accordion/_macro.spec.js b/src/components/accordion/_macro.spec.js
index 432d9a9b2d..f038c690f1 100644
--- a/src/components/accordion/_macro.spec.js
+++ b/src/components/accordion/_macro.spec.js
@@ -63,7 +63,7 @@ describe('FOR: Macro: Accordion', () => {
expect(titleText).toBe('Title for item 1');
});
});
- describe('WHEN: titleTag is not provided', () => {
+ describe('WHEN: headingLevel is not provided', () => {
const $ = cheerio.load(
renderComponent('accordion', {
itemsList: [
@@ -79,7 +79,7 @@ describe('FOR: Macro: Accordion', () => {
expect(titleTag).toBe('h2');
});
});
- describe('WHEN: titleTag is provided', () => {
+ describe('WHEN: headingLevel is provided', () => {
const $ = cheerio.load(
renderComponent('accordion', {
itemsList: [
diff --git a/src/components/browser-banner/_macro.spec.js b/src/components/browser-banner/_macro.spec.js
index 7a00b4e293..962b75dd46 100644
--- a/src/components/browser-banner/_macro.spec.js
+++ b/src/components/browser-banner/_macro.spec.js
@@ -10,22 +10,22 @@ describe('FOR: Macro: Browser-banner', () => {
describe('WHEN: params are at default state', () => {
const $ = cheerio.load(renderComponent('browser-banner', {}));
- it('THEN: passes jest-axe checks', async () => {
+ test('THEN: passes jest-axe checks', async () => {
const results = await axe($.html());
expect(results).toHaveNoViolations();
});
- it('THEN: has the english default bannerLeadingText', () => {
+ test('THEN: has the english default bannerLeadingText', () => {
const bannerLeadingText = $('.ons-browser-banner__lead').text().trim();
expect(bannerLeadingText).toBe('This website no longer supports your browser.');
});
- it('THEN: has the english default bannerCTA', () => {
+ test('THEN: has the english default bannerCTA', () => {
const bannerCtaHtml = $('.ons-browser-banner__cta').text().trim();
expect(bannerCtaHtml).toBe('You can upgrade your browser to the latest version.');
});
- it('THEN: has the english default bannerLinkUrl', () => {
+ test('THEN: has the english default bannerLinkUrl', () => {
expect($('.ons-browser-banner__link').attr('href')).toBe('https://www.ons.gov.uk/help/browsers');
});
});
@@ -33,17 +33,17 @@ describe('FOR: Macro: Browser-banner', () => {
describe('WHEN: params are at default and language is set to welsh', () => {
const $ = cheerio.load(renderComponent('browser-banner', { lang: 'cy' }));
- it('THEN: has the welsh default bannerLeadingText', () => {
+ test('THEN: has the welsh default bannerLeadingText', () => {
const bannerLeadingText = $('.ons-browser-banner__lead').text().trim();
expect(bannerLeadingText).toBe('Nid yw’r wefan hon yn cefnogi eich porwr mwyach.');
});
- it('THEN: has the welsh default bannerCTA', () => {
+ test('THEN: has the welsh default bannerCTA', () => {
const bannerCtaHtml = $('.ons-browser-banner__cta').text().trim();
expect(bannerCtaHtml).toBe('Gallwch ddiweddaru eich porwr i’r fersiwn ddiweddaraf.');
});
- it('THEN: has the welsh default bannerLinkUrl', () => {
+ test('THEN: has the welsh default bannerLinkUrl', () => {
expect($('.ons-browser-banner__link').attr('href')).toBe('https://cy.ons.gov.uk/help/browsers');
});
});
@@ -51,7 +51,7 @@ describe('FOR: Macro: Browser-banner', () => {
describe('GIVEN: Params: wide', () => {
describe('WHEN: wide is set to true', () => {
- it('THEN: has container--wide class', () => {
+ test('THEN: has container--wide class', () => {
const $ = cheerio.load(
renderComponent('browser-banner', {
...{},
@@ -64,7 +64,7 @@ describe('FOR: Macro: Browser-banner', () => {
});
describe('WHEN: wide is not set', () => {
- it('THEN: does not have container--wide class', () => {
+ test('THEN: does not have container--wide class', () => {
const $ = cheerio.load(
renderComponent('browser-banner', {
...{},
@@ -78,7 +78,7 @@ describe('FOR: Macro: Browser-banner', () => {
describe('GIVEN: Params: fullWidth', () => {
describe('WHEN: fullWidth is set to true', () => {
- it('THEN: has container--full-width class', () => {
+ test('THEN: has container--full-width class', () => {
const $ = cheerio.load(
renderComponent('browser-banner', {
...{},
@@ -91,7 +91,7 @@ describe('FOR: Macro: Browser-banner', () => {
});
describe('WHEN: fullWidth is not set', () => {
- it('THEN: does not have container--full-width class', () => {
+ test('THEN: does not have container--full-width class', () => {
const $ = cheerio.load(
renderComponent('browser-banner', {
...{},
diff --git a/src/components/button/_macro.njk b/src/components/button/_macro.njk
index e4f0c71b82..bb0113777b 100644
--- a/src/components/button/_macro.njk
+++ b/src/components/button/_macro.njk
@@ -11,7 +11,7 @@
{# Default icon position before label #}
{% set iconPosition = "before" %}
{% endif %}
- {% elif params.iconType is not defined and params.noIcon is not defined %}
+ {% elif params.iconType is not defined and params.noIcon != true %}
{% if params.url and params.newWindow %}
{# CTA link opening in new tab #}
{% set iconType = "external-link" %}
diff --git a/src/components/button/_macro.spec.js b/src/components/button/_macro.spec.js
index b64c38240c..6733f50118 100644
--- a/src/components/button/_macro.spec.js
+++ b/src/components/button/_macro.spec.js
@@ -5,296 +5,316 @@ import * as cheerio from 'cheerio';
import axe from '../../tests/helpers/axe';
import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
-describe('macro: button', () => {
- it('has the provided `id` attribute', () => {
- const $ = cheerio.load(
- renderComponent('button', {
- id: 'example-id',
- }),
- );
-
- expect($('#example-id').length).toBe(1);
- });
-
- it('has additionally provided `attributes`', () => {
- const $ = cheerio.load(
- renderComponent('button', {
- attributes: {
- a: 123,
- b: 456,
- },
- }),
- );
-
- expect($('button').attr('a')).toBe('123');
- expect($('button').attr('b')).toBe('456');
- });
-
- it('has expected style classes', () => {
- const $ = cheerio.load(renderComponent('button'));
-
- expect($('.ons-btn .ons-btn__inner').length).toBe(1);
- });
-
- it('has provided variant style classes', () => {
- const $ = cheerio.load(
- renderComponent('button', {
- variants: ['variant-a', 'variant-b'],
- }),
- );
-
- expect($('.ons-btn').hasClass('ons-btn--variant-a')).toBe(true);
- expect($('.ons-btn').hasClass('ons-btn--variant-b')).toBe(true);
- });
-
- it('has download variant style class when `variants` contains `download`', () => {
- const $ = cheerio.load(
- renderComponent('button', {
- url: 'http://example.com',
- variants: 'download',
- }),
- );
-
- expect($('.ons-btn').hasClass('ons-btn--download')).toBe(true);
- });
-
- it('has `download` icon when `variants` contains "download"', () => {
- const faker = templateFaker();
- const iconsSpy = faker.spy('icon');
+describe('FOR: Macro: Button', () => {
+ describe('GIVEN: Params: no params', () => {
+ describe('WHEN: there are no params provided', () => {
+ test('THEN: has expected style classes', () => {
+ const $ = cheerio.load(renderComponent('button'));
+ expect($('.ons-btn .ons-btn__inner').length).toBe(1);
+ });
- faker.renderComponent('button', {
- url: 'http://example.com',
- variants: 'download',
+ test('THEN: the button is rendered', () => {
+ const $ = cheerio.load(renderComponent('button'));
+ expect($('button').length).toBe(1);
+ });
});
-
- expect(iconsSpy.occurrences[0].iconType).toBe('download');
- });
-
- it('has provided variant style classes when `variants` contains "print"', () => {
- const $ = cheerio.load(
- renderComponent('button', {
- variants: 'print',
- }),
- );
-
- expect($('.ons-btn').hasClass('ons-btn--print')).toBe(true);
- expect($('.ons-btn').hasClass('ons-u-d-no')).toBe(true);
- expect($('.ons-btn').hasClass('ons-js-print-btn')).toBe(true);
});
-
- it('has `print` icon when `variants` contains "print"', () => {
- const faker = templateFaker();
- const iconsSpy = faker.spy('icon');
-
- faker.renderComponent('button', {
- url: 'http://example.com',
- variants: 'print',
+ describe('GIVEN: Params: text, name and value', () => {
+ describe('WHEN: text, name and value params are provided', () => {
+ test('THEN: passes jest-axe checks', async () => {
+ const $ = cheerio.load(
+ renderComponent('button', {
+ text: 'Example button',
+ name: 'example',
+ value: 'example-value',
+ }),
+ );
+ const results = await axe($.html());
+ expect(results).toHaveNoViolations();
+ });
});
-
- expect(iconsSpy.occurrences[0].iconType).toBe('print');
- });
-
- it('has provided variant style classes when `variants` contains "loader"', () => {
- const $ = cheerio.load(
- renderComponent('button', {
- variants: 'loader',
- }),
- );
-
- expect($('.ons-btn').hasClass('ons-btn--loader')).toBe(true);
- expect($('.ons-btn').hasClass('ons-js-loader')).toBe(true);
- expect($('.ons-btn').hasClass('ons-js-submit-btn')).toBe(true);
});
-
- it('has `loader` icon when `variants` contains "loader"', () => {
- const faker = templateFaker();
- const iconsSpy = faker.spy('icon');
-
- faker.renderComponent('button', {
- variants: 'loader',
+ describe('GIVEN: Params: id', () => {
+ describe('WHEN: the id param is provided', () => {
+ it('THEN: the button has the provided id', () => {
+ const $ = cheerio.load(
+ renderComponent('button', {
+ id: 'example-id',
+ }),
+ );
+ expect($('#example-id').length).toBe(1);
+ });
});
-
- expect(iconsSpy.occurrences[0].iconType).toBe('loader');
});
-
- it('has `chevron` icon when `variants` contains "mobile"', () => {
- const faker = templateFaker();
- const iconsSpy = faker.spy('icon');
-
- faker.renderComponent('button', {
- variants: 'mobile',
+ describe('GIVEN: Params: attributes', () => {
+ describe('WHEN: the attributes param is provided', () => {
+ it('THEN: the button has the additionally provided attributes', () => {
+ const $ = cheerio.load(
+ renderComponent('button', {
+ attributes: {
+ a: 123,
+ b: 456,
+ },
+ }),
+ );
+ expect($('button').attr('a')).toBe('123');
+ expect($('button').attr('b')).toBe('456');
+ });
});
-
- expect(iconsSpy.occurrences[0].iconType).toBe('chevron');
- });
-
- it('has provided variant style classes when `variants` contains "timer"', () => {
- const $ = cheerio.load(
- renderComponent('button', {
- variants: 'timer',
- }),
- );
-
- expect($('.ons-btn').hasClass('ons-js-timer')).toBe(true);
- expect($('.ons-btn').hasClass('ons-js-submit-btn')).toBe(true);
});
-
- it('has additionally provided style classes', () => {
- const $ = cheerio.load(
- renderComponent('button', {
- classes: 'extra-class another-extra-class',
- }),
- );
-
- expect($('.ons-btn').hasClass('extra-class')).toBe(true);
- expect($('.ons-btn').hasClass('another-extra-class')).toBe(true);
+ describe('GIVEN: Params: text', () => {
+ describe('WHEN: the text param is provided', () => {
+ test('THEN: the button has the label text', () => {
+ const $ = cheerio.load(
+ renderComponent('button', {
+ text: 'Click > me!',
+ }),
+ );
+ expect($('.ons-btn__text').html()).toBe('Click > me!');
+ });
+ });
});
-
- it('has additionally provided inner style classes', () => {
- const $ = cheerio.load(
- renderComponent('button', {
- innerClasses: 'extra-inner-class another-extra-inner-class',
- }),
- );
-
- expect($('.ons-btn__inner').hasClass('extra-inner-class')).toBe(true);
- expect($('.ons-btn__inner').hasClass('another-extra-inner-class')).toBe(true);
+ describe('GIVEN: Params: name', () => {
+ describe('WHEN: the name param is provided', () => {
+ test('THEN: the button renders with the provided name', () => {
+ const $ = cheerio.load(
+ renderComponent('button', {
+ name: 'example',
+ }),
+ );
+ expect($('button').attr('name')).toBe('example');
+ });
+ });
});
-
- it('has label text when `text` is provided', () => {
- const $ = cheerio.load(
- renderComponent('button', {
- text: 'Click > me!',
- }),
- );
-
- expect($('.ons-btn__text').html()).toBe('Click > me!');
+ describe('GIVEN: Params: value', () => {
+ describe('WHEN: the value param is provided', () => {
+ test('THEN: the button renders with the provided value', () => {
+ const $ = cheerio.load(
+ renderComponent('button', {
+ value: 'example-value',
+ }),
+ );
+ expect($('button').attr('value')).toBe('example-value');
+ });
+ });
});
-
- it('has label text when `html` is provided', () => {
- const $ = cheerio.load(
- renderComponent('button', {
- html: 'Click me!',
- }),
- );
-
- expect($('.ons-btn__text').html()).toBe('Click me!');
+ describe('GIVEN: Params: buttonContext', () => {
+ describe('WHEN: buttonContext parameter is provided', () => {
+ test('THEN: the button has the provided button context', () => {
+ const $ = cheerio.load(
+ renderComponent('button', {
+ buttonContext: 'button context text',
+ }),
+ );
+ expect($('.ons-btn__context').text()).toBe('button context text');
+ });
+ });
});
-
- it('has button context text when `buttonContext` is provided', () => {
- const $ = cheerio.load(
- renderComponent('button', {
- buttonContext: 'button context text',
- }),
- );
-
- expect($('.ons-btn__context').text()).toBe('button context text');
+ describe('GIVEN: Params: html', () => {
+ describe('WHEN: html parameter is provided', () => {
+ test('THEN: the button label has the provided html', () => {
+ const $ = cheerio.load(
+ renderComponent('button', {
+ html: 'Click me!',
+ }),
+ );
+ expect($('.ons-btn__text').html()).toBe('Click me!');
+ });
+ });
});
-
- it('has custom icon before button text', () => {
- const $ = cheerio.load(
- renderComponent('button', {
- text: 'Click me!',
- iconPosition: 'before',
- iconType: 'exit',
- }),
- );
-
- expect($('.ons-icon + .ons-btn__text').text()).toBe('Click me!');
+ describe('GIVEN: Params: iconPosition', () => {
+ describe('WHEN: iconPosition is set to before for custom icon', () => {
+ test('THEN: renders custom icon before button text', () => {
+ const $ = cheerio.load(
+ renderComponent('button', {
+ text: 'Click me!',
+ iconPosition: 'before',
+ iconType: 'exit',
+ }),
+ );
+ expect($('.ons-icon + .ons-btn__text').text()).toBe('Click me!');
+ });
+ });
+ describe('WHEN: iconPosition is set to after for custom icon', () => {
+ test('THEN: renders custom icon after button text', () => {
+ const $ = cheerio.load(
+ renderComponent('button', {
+ text: 'Click me!',
+ iconPosition: 'after',
+ iconType: 'exit',
+ }),
+ );
+ expect($('.ons-btn__text + .ons-icon').prev().text()).toBe('Click me!');
+ });
+ });
});
- it('has custom icon after button text', () => {
- const $ = cheerio.load(
- renderComponent('button', {
- text: 'Click me!',
- iconPosition: 'after',
- iconType: 'exit',
- }),
- );
-
- expect($('.ons-btn__text + .ons-icon').prev().text()).toBe('Click me!');
+ describe('GIVEN: Params: iconType', () => {
+ describe('WHEN: iconType parameter is provided', () => {
+ test('THEN: the button has an svg element', () => {
+ const $ = cheerio.load(
+ renderComponent('button', {
+ text: 'Click me!',
+ iconPosition: 'after',
+ iconType: 'exit',
+ }),
+ );
+ expect($('svg').length).toBe(1);
+ });
+ });
});
- describe('mode: standard', () => {
- it('passes jest-axe checks', async () => {
- const $ = cheerio.load(
- renderComponent('button', {
- text: 'Example button',
- name: 'example',
- value: 'example-value',
- }),
- );
-
- const results = await axe($.html());
- expect(results).toHaveNoViolations();
+ describe('GIVEN: Params: variants', () => {
+ describe('WHEN: variants are present', () => {
+ test('THEN: the button has the expected variant classes', () => {
+ const $ = cheerio.load(
+ renderComponent('button', {
+ variants: ['variant-a', 'variant-b'],
+ }),
+ );
+
+ expect($('.ons-btn').hasClass('ons-btn--variant-a')).toBe(true);
+ expect($('.ons-btn').hasClass('ons-btn--variant-b')).toBe(true);
+ });
});
+ describe('WHEN: variants contains download', () => {
+ test('THEN: the button has the download class', () => {
+ const $ = cheerio.load(
+ renderComponent('button', {
+ url: 'http://example.com',
+ variants: 'download',
+ }),
+ );
+ expect($('.ons-btn').hasClass('ons-btn--download')).toBe(true);
+ });
+ test('THEN: the button has the download icon', () => {
+ const faker = templateFaker();
+ const iconsSpy = faker.spy('icon');
- it('is an `button` element', () => {
- const $ = cheerio.load(renderComponent('button'));
+ faker.renderComponent('button', {
+ url: 'http://example.com',
+ variants: 'download',
+ });
- expect($('button').length).toBe(1);
+ expect(iconsSpy.occurrences[0].iconType).toBe('download');
+ });
+ test('THEN: the button has the download attribute', () => {
+ const $ = cheerio.load(
+ renderComponent('button', {
+ variants: 'download',
+ }),
+ );
+
+ expect($('.ons-btn').attr('download')).toBeDefined();
+ });
});
+ describe('WHEN: variants contains loader', () => {
+ test('THEN: the button has the loader classes', () => {
+ const $ = cheerio.load(
+ renderComponent('button', {
+ variants: 'loader',
+ }),
+ );
+
+ expect($('.ons-btn').hasClass('ons-btn--loader')).toBe(true);
+ expect($('.ons-btn').hasClass('ons-js-loader')).toBe(true);
+ expect($('.ons-btn').hasClass('ons-js-submit-btn')).toBe(true);
+ });
+ test('THEN: the button has the loader icon', () => {
+ const faker = templateFaker();
+ const iconsSpy = faker.spy('icon');
- it('has the provided `type` attribute', () => {
- const $ = cheerio.load(
- renderComponent('button', {
- type: 'special-type',
- }),
- );
+ faker.renderComponent('button', {
+ variants: 'loader',
+ });
- expect($('button').attr('type')).toBe('special-type');
+ expect(iconsSpy.occurrences[0].iconType).toBe('loader');
+ });
});
-
- it('has the provided `type` attribute even if print variant is provided', () => {
- const $ = cheerio.load(
- renderComponent('button', {
- type: 'special-type',
- variants: 'print',
- }),
- );
-
- expect($('button').attr('type')).toBe('special-type');
+ describe('WHEN: variants contains timer', () => {
+ test('THEN: the button has the timer classes', () => {
+ const $ = cheerio.load(
+ renderComponent('button', {
+ variants: 'timer',
+ }),
+ );
+
+ expect($('.ons-btn').hasClass('ons-js-timer')).toBe(true);
+ expect($('.ons-btn').hasClass('ons-js-submit-btn')).toBe(true);
+ });
});
+ describe('WHEN: variants contains print', () => {
+ test('THEN: renders provided variant style classes', () => {
+ const $ = cheerio.load(
+ renderComponent('button', {
+ variants: 'print',
+ }),
+ );
+
+ expect($('.ons-btn').hasClass('ons-btn--print')).toBe(true);
+ expect($('.ons-btn').hasClass('ons-u-d-no')).toBe(true);
+ expect($('.ons-btn').hasClass('ons-js-print-btn')).toBe(true);
+ });
- it('defaults to being a "submit" button when `type` is not provided', () => {
- const $ = cheerio.load(renderComponent('button'));
-
- expect($('button').attr('type')).toBe('submit');
- });
+ test('THEN: button has the print icon', () => {
+ const faker = templateFaker();
+ const iconsSpy = faker.spy('icon');
- it('defaults to being a "button" when `type` is not provided and `variants` contains "print"', () => {
- const $ = cheerio.load(
- renderComponent('button', {
+ faker.renderComponent('button', {
+ url: 'http://example.com',
variants: 'print',
- }),
- );
+ });
- expect($('button').attr('type')).toBe('button');
+ expect(iconsSpy.occurrences[0].iconType).toBe('print');
+ });
});
-
- it('has the provided `value` attribute', () => {
- const $ = cheerio.load(
- renderComponent('button', {
- value: 'special-value',
- }),
- );
-
- expect($('button').attr('value')).toBe('special-value');
+ });
+ describe('GIVEN: Params: type', () => {
+ describe('WHEN: type parameter is provided', () => {
+ test('THEN: has the provided type attribute', () => {
+ const $ = cheerio.load(
+ renderComponent('button', {
+ type: 'special-type',
+ }),
+ );
+
+ expect($('button').attr('type')).toBe('special-type');
+ });
});
+ describe('WHEN: type parameter is provided and variant contains print', () => {
+ test('THEN: has the provided type attribute', () => {
+ const $ = cheerio.load(
+ renderComponent('button', {
+ type: 'special-type',
+ variants: 'print',
+ }),
+ );
+
+ expect($('button').attr('type')).toBe('special-type');
+ });
+ });
+ describe('WHEN: type parameter is not provided', () => {
+ test('THEN: defaults to being a submit button', () => {
+ const $ = cheerio.load(renderComponent('button'));
- it('has the provided `name` attribute', () => {
- const $ = cheerio.load(
- renderComponent('button', {
- name: 'special-name',
- }),
- );
-
- expect($('button').attr('name')).toBe('special-name');
+ expect($('button').attr('type')).toBe('submit');
+ });
+ });
+ describe('WHEN: type parameter is not provided and variant contains print', () => {
+ test('THEN: defaults to being a button', () => {
+ const $ = cheerio.load(
+ renderComponent('button', {
+ variants: 'print',
+ }),
+ );
+
+ expect($('button').attr('type')).toBe('button');
+ });
});
});
- describe('mode: link', () => {
- it('passes jest-axe checks', async () => {
+ describe('GIVEN: Params: url', () => {
+ describe('WHEN: url parameter is provided', () => {
const $ = cheerio.load(
renderComponent('button', {
text: 'Example button',
@@ -303,130 +323,164 @@ describe('macro: button', () => {
url: 'http://example.com',
}),
);
+ test('THEN: passes jest-axe checks', async () => {
+ const results = await axe($.html());
+ expect(results).toHaveNoViolations();
+ });
- const results = await axe($.html());
- expect(results).toHaveNoViolations();
- });
-
- it('is an `a` element', () => {
- const $ = cheerio.load(
- renderComponent('button', {
- url: 'http://example.com',
- }),
- );
+ test('THEN: renders an element', () => {
+ expect($('a').length).toBe(1);
+ });
- expect($('a').length).toBe(1);
- });
+ test('THEN: has expected style classes', () => {
+ expect($('a').hasClass('ons-btn')).toBe(true);
+ expect($('.ons-btn').hasClass('ons-btn--link')).toBe(true);
+ expect($('.ons-btn').hasClass('ons-js-submit-btn')).toBe(true);
+ });
- it('has expected style classes', () => {
- const $ = cheerio.load(
- renderComponent('button', {
- url: 'http://example.com',
- }),
- );
+ test('THEN: the link points to the provided url', () => {
+ expect($('a').attr('href')).toBe('http://example.com');
+ });
- expect($('a').hasClass('ons-btn')).toBe(true);
- expect($('.ons-btn').hasClass('ons-btn--link')).toBe(true);
- expect($('.ons-btn').hasClass('ons-js-submit-btn')).toBe(true);
- });
+ test('THEN: the link button has the arrow-next icon by default', () => {
+ const faker = templateFaker();
+ const iconsSpy = faker.spy('icon');
- it('has the provided link', () => {
- const $ = cheerio.load(
- renderComponent('button', {
+ faker.renderComponent('button', {
url: 'http://example.com',
- }),
- );
+ });
- expect($('a').attr('href')).toBe('http://example.com');
- });
+ expect(iconsSpy.occurrences[0].iconType).toBe('arrow-next');
+ });
- it('has `arrow-next` icon by default', () => {
- const faker = templateFaker();
- const iconsSpy = faker.spy('icon');
+ test('THEN: the role attribute is set to button', () => {
+ expect($('.ons-btn').attr('role')).toBe('button');
+ });
- faker.renderComponent('button', {
- url: 'http://example.com',
+ test('THEN: the link does not have a name attribute', () => {
+ expect($('a').attr('name')).toBeUndefined();
});
- expect(iconsSpy.occurrences[0].iconType).toBe('arrow-next');
+ test('THEN: the link does not have a value attribute', () => {
+ expect($('a').attr('value')).toBeUndefined();
+ });
});
-
- it('opens in a new window when `newWindow` is `true`', () => {
- const $ = cheerio.load(
- renderComponent('button', {
- url: 'http://example.com',
- newWindow: true,
- }),
- );
-
- expect($('a').attr('target')).toBe('_blank');
- expect($('a').attr('rel')).toBe('noopener');
+ describe('WHEN: url parameter is provided and newWindow is true', () => {
+ test('THEN: has default new window description', () => {
+ const $ = cheerio.load(
+ renderComponent('button', {
+ url: 'http://example.com',
+ newWindow: true,
+ }),
+ );
+ expect($('.ons-btn__new-window-description').text()).toBe('(opens in a new tab)');
+ });
});
-
- it('has `external-link` icon when `newWindow` is `true`', () => {
- const faker = templateFaker();
- const iconsSpy = faker.spy('icon');
-
- faker.renderComponent('button', {
- url: 'http://example.com',
- newWindow: true,
+ describe('WHEN: url parameter is provided, newWindow is true and newWindowDescription is provided', () => {
+ test('THEN: has custom new window description', () => {
+ const $ = cheerio.load(
+ renderComponent('button', {
+ url: 'http://example.com',
+ newWindow: true,
+ newWindowDescription: 'custom opens in a new window text',
+ }),
+ );
+ expect($('.ons-btn__new-window-description').text()).toBe('(custom opens in a new window text)');
});
-
- expect(iconsSpy.occurrences[0].iconType).toBe('external-link');
});
+ });
- it('has the `button` role', () => {
- const $ = cheerio.load(
- renderComponent('button', {
- url: 'http://example.com',
- }),
- );
-
- expect($('.ons-btn').attr('role')).toBe('button');
+ describe('GIVEN: Params: classes', () => {
+ describe('WHEN: classes parameter is provided', () => {
+ test('THEN: the button has the additionally provided style classes', () => {
+ const $ = cheerio.load(
+ renderComponent('button', {
+ classes: 'extra-class another-extra-class',
+ }),
+ );
+
+ expect($('.ons-btn').hasClass('extra-class')).toBe(true);
+ expect($('.ons-btn').hasClass('another-extra-class')).toBe(true);
+ });
});
+ describe('WHEN: innerClasses parameter is provided', () => {
+ test('THEN: the button inner has the additionally provided inner style classes', () => {
+ const $ = cheerio.load(
+ renderComponent('button', {
+ innerClasses: 'extra-inner-class another-extra-inner-class',
+ }),
+ );
+
+ expect($('.ons-btn__inner').hasClass('extra-inner-class')).toBe(true);
+ expect($('.ons-btn__inner').hasClass('another-extra-inner-class')).toBe(true);
+ });
+ });
+ });
- it('has a default new window description when `newWindow` is `true`', () => {
- const $ = cheerio.load(
- renderComponent('button', {
- url: 'http://example.com',
- newWindow: true,
- }),
- );
-
- expect($('.ons-btn__new-window-description').text()).toBe('(opens in a new tab)');
+ describe('GIVEN: Params: removeDownloadAttribute', () => {
+ describe('WHEN: variants contains download and removeDownloadAttribute is true', () => {
+ test('THEN: the button does not have the download attribute', () => {
+ const $ = cheerio.load(
+ renderComponent('button', {
+ variants: 'download',
+ removeDownloadAttribute: true,
+ }),
+ );
+
+ expect($('.ons-btn').attr('download')).toBeUndefined();
+ });
});
+ });
- it('has a custom new window description when `newWindow` is `true` and `newWindowDescription` is provided', () => {
- const $ = cheerio.load(
- renderComponent('button', {
+ describe('GIVEN: Params: noIcon', () => {
+ describe('WHEN: noIcon is set to true', () => {
+ test('THEN: the button does not have the default arrow-next icon', () => {
+ const faker = templateFaker();
+ const iconsSpy = faker.spy('icon');
+
+ faker.renderComponent('button', {
url: 'http://example.com',
- newWindow: true,
- newWindowDescription: 'custom opens in a new window text',
- }),
- );
+ noIcon: true,
+ });
- expect($('.ons-btn__new-window-description').text()).toBe('(custom opens in a new window text)');
+ expect(iconsSpy.occurrences[0]).toBeUndefined();
+ });
});
+ describe('WHEN: noIcon is set to false', () => {
+ test('THEN: the button has the default arrow-next icon', () => {
+ const faker = templateFaker();
+ const iconsSpy = faker.spy('icon');
- it('has the `download` attribute when `variants` contains "download"', () => {
- const $ = cheerio.load(
- renderComponent('button', {
- variants: 'download',
- }),
- );
+ faker.renderComponent('button', {
+ url: 'http://example.com',
+ noIcon: false,
+ });
- expect($('.ons-btn').attr('download')).toBeDefined();
+ expect(iconsSpy.occurrences[0].iconType).toBe('arrow-next');
+ });
});
+ });
- it('does not have the `download` attribute when `variants` contains "download" and `removeDownloadAttribute` is `true`', () => {
- const $ = cheerio.load(
- renderComponent('button', {
- variants: 'download',
- removeDownloadAttribute: true,
- }),
- );
-
- expect($('.ons-btn').attr('download')).toBeUndefined();
+ describe('GIVEN: Params: listeners', () => {
+ describe('WHEN: listeners are provided', () => {
+ test('THEN: the button renders each listener', () => {
+ const $ = cheerio.load(
+ renderComponent('button', {
+ id: 'example-id',
+ listeners: {
+ click: `alert('Input was clicked')`,
+ keypress: `alert('Key was pressed')`,
+ },
+ }),
+ );
+ const script = $('script').html();
+ expect(script).toContain(
+ `document.getElementById("example-id").addEventListener('click', function(){ alert('Input was clicked') });`,
+ );
+ expect(script).toContain(
+ `document.getElementById("example-id").addEventListener('keypress', function(){ alert('Key was pressed') });`,
+ );
+ });
});
});
});
diff --git a/src/components/button/example-button-group.njk b/src/components/button/example-button-group.njk
index 0663e0b273..e4a9b19575 100644
--- a/src/components/button/example-button-group.njk
+++ b/src/components/button/example-button-group.njk
@@ -10,6 +10,7 @@
onsButton({
"type": 'button',
"text": 'Cancel',
+ "name": 'example',
"variants": 'secondary'
})
}}
diff --git a/src/components/checkboxes/_checkbox.scss b/src/components/checkboxes/_checkbox.scss
index 0fc7929214..94d51bf117 100644
--- a/src/components/checkboxes/_checkbox.scss
+++ b/src/components/checkboxes/_checkbox.scss
@@ -107,7 +107,7 @@ $checkbox-padding: 10px;
}
.ons-checkbox__other {
- margin: 0.5rem 0 0.5rem 0.5rem;
+ margin: 0.5rem 0 0.5rem 0.625rem;
}
}
@@ -170,8 +170,8 @@ $checkbox-padding: 10px;
&__other {
border-left: 4px solid var(--ons-color-borders-indent);
display: block;
- margin: 0 1rem 0.5rem;
- padding: 0 $checkbox-padding $checkbox-padding $checkbox-padding * 2 - 1;
+ margin: 0 1.1875rem 0.5rem;
+ padding: 0 $checkbox-padding $checkbox-padding $checkbox-padding * 2;
}
&__input:checked + &__label::before {
diff --git a/src/components/section-navigation/_macro.njk b/src/components/section-navigation/_macro.njk
index 2c79b08f14..0c6c18b9b3 100644
--- a/src/components/section-navigation/_macro.njk
+++ b/src/components/section-navigation/_macro.njk
@@ -31,9 +31,12 @@
class="ons-section-nav__item{{ ' ' + item.classes if item.classes else '' }}{{ ' ons-section-nav__item--active' if isCurrent == true }}"
>
{% if isCurrent == true %}
- {{ openingHeadingTag | replace(headingLevel, sectionItemHeadingLevel | string) | safe }}
- class="ons-section-nav__link ons-section-nav__item-header" href="{{ item.url }}"
- aria-current="location">{{ item.text }}{{ closingHeadingTag | replace(headingLevel, sectionItemHeadingLevel | string) | safe }}
+
{% else %}
{{ item.text }}
{% endif %}
@@ -71,9 +74,9 @@
class="ons-section-nav__item{{ ' ' + item.classes if item.classes else '' }}{% if isCurrent == true %}{{ ' ' }}ons-section-nav__item--active{% endif %}"
>
{% if isCurrent == true %}
- {{ openingHeadingTag | replace(headingLevel, sectionItemHeadingLevel | string) | safe }}
- class="ons-section-nav__link ons-section-nav__item-header" href="{{ item.url }}"
- aria-current="location">{{ item.text }}{{ closingHeadingTag | replace(headingLevel, sectionItemHeadingLevel | string) | safe }}
+
{% else %}
{{ item.text }}
{% endif %}