From 3dc8a86a55ae7848c9b0b03aa48f21059ea4740c Mon Sep 17 00:00:00 2001
From: Aditya Unnithan_ONS <56112669+adi-unni@users.noreply.github.com>
Date: Mon, 6 Nov 2023 14:16:16 +0000
Subject: [PATCH 1/2] CTA button component invokes :active with keyboard
(#2879)
* Apply active styles with keyboard presses
* Fix colouring issue
* Fixed secondary styles
* Clean up
---
src/components/button/_button.scss | 35 ++++++++++++++++++++----------
src/components/button/button.js | 15 ++++++++++---
2 files changed, 35 insertions(+), 15 deletions(-)
diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss
index 3955c1bb76..6fbe515620 100644
--- a/src/components/button/_button.scss
+++ b/src/components/button/_button.scss
@@ -78,13 +78,15 @@ $button-shadow-size: 3px;
}
}
- &:focus:hover:not(:active) &__inner {
+ &:focus:hover:not(:active, .active) &__inner {
background: var(--ons-color-focus-dark);
}
// When down
&:active &,
- &:active:focus & {
+ &:active:focus &,
+ &.active &,
+ &.active:focus & {
&__inner {
background: var(--ons-color-button);
box-shadow: none;
@@ -96,7 +98,8 @@ $button-shadow-size: 3px;
}
}
- &:active {
+ &:active,
+ &.active {
top: ems($button-shadow-size);
}
@@ -132,7 +135,9 @@ $button-shadow-size: 3px;
&--secondary &,
&--secondary:active &,
- &--secondary:active:focus & {
+ &--secondary.active &,
+ &--secondary:active:focus &,
+ &--secondary.active:focus & {
&__inner {
background: var(--ons-color-button-secondary);
color: var(--ons-color-text);
@@ -169,8 +174,8 @@ $button-shadow-size: 3px;
text-decoration: none;
}
- &--link:focus:not(:active, &--secondary) &,
- &--link:focus:hover:not(:active, &--secondary) & {
+ &--link:focus:not(:active, .active, &--secondary) &,
+ &--link:focus:hover:not(:active, .active, &--secondary) & {
outline: inherit;
&__inner {
@@ -238,8 +243,8 @@ $button-shadow-size: 3px;
}
&--text-link:focus &,
- &--text-link.active:focus &,
- &--text-link:active:focus & {
+ &--text-link:active:focus &,
+ &--text-link.active:focus & {
&__inner {
background-color: var(--ons-color-focus);
box-shadow: 0 -2px var(--ons-color-focus),
@@ -288,7 +293,9 @@ $button-shadow-size: 3px;
}
&--ghost:active:focus,
- &--ghost-dark:active:focus {
+ &--ghost.active:focus
+ &--ghost-dark:active:focus
+ &--ghost-dark.active:focus {
box-shadow: none;
outline: 3px solid transparent;
}
@@ -403,7 +410,8 @@ $button-shadow-size: 3px;
}
}
- &--loader.ons-is-loading:active & {
+ &--loader.ons-is-loading:active &,
+ &--loader.ons-is-loading.active & {
&__inner {
box-shadow: 0 ems($button-shadow-size) 0 var(--ons-color-button-shadow);
}
@@ -448,7 +456,8 @@ $button-shadow-size: 3px;
cursor: not-allowed;
}
- &--disabled:active & {
+ &--disabled:active &,
+ &--disabled.active & {
&__inner {
box-shadow: 0 ems($button-shadow-size) 0 var(--ons-color-button-shadow);
}
@@ -496,7 +505,9 @@ $button-shadow-size: 3px;
}
&--dropdown:active &,
- &--dropdown:active:focus & {
+ &--dropdown.active &,
+ &--dropdown:active:focus &,
+ &--dropdown.active:focus & {
&__inner {
background: var(--ons-color-branded-secondary);
color: var(--ons-color-white);
diff --git a/src/components/button/button.js b/src/components/button/button.js
index f6bc91a82f..d499ff5d6e 100644
--- a/src/components/button/button.js
+++ b/src/components/button/button.js
@@ -18,7 +18,8 @@ export default class SubmitButton {
this.button.addEventListener('click', this.timerButton.bind(this));
}
} else if (this.submitType == 'link') {
- this.button.addEventListener('keydown', this.linkButton.bind(this));
+ this.button.addEventListener('keydown', this.linkButtonDown.bind(this));
+ this.button.addEventListener('keyup', this.linkButtonUp.bind(this));
}
}
@@ -48,10 +49,18 @@ export default class SubmitButton {
);
}
- linkButton(e) {
- if (e.keyCode == 32) {
+ linkButtonDown(e){
+ if (e.keyCode == 32 || e.keyCode == 13){
+ this.button.classList.add("active");
+ }
+ }
+
+ linkButtonUp(e){
+ if (e.keyCode == 32 || e.keyCode == 13) {
+ this.button.classList.remove("active");
e.preventDefault();
this.button.click();
}
}
+
}
From 81c18ece4872e93ce52c8fc2bbe1f1a82850646b Mon Sep 17 00:00:00 2001
From: Aditya Unnithan_ONS <56112669+adi-unni@users.noreply.github.com>
Date: Tue, 7 Nov 2023 14:13:47 +0000
Subject: [PATCH 2/2] =?UTF-8?q?Share=20page=20component=20updates=20to=20n?=
=?UTF-8?q?ew=20"=F0=9D=95=8F"=20icon=20(#2883)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* Updated twitter icon
* Update new reference images
* Remove unnecessary parameters
* Merge main
---
...e-related-content-social-media_0_document_0_desktop.png | 4 ++--
...le-related-content-social-media_0_document_1_tablet.png | 4 ++--
...le-related-content-social-media_0_document_2_mobile.png | 4 ++--
..._share-page_example-share-page_0_document_0_desktop.png | 4 ++--
...s_share-page_example-share-page_0_document_1_tablet.png | 4 ++--
...s_share-page_example-share-page_0_document_2_mobile.png | 4 ++--
...ple-panel-with-timeout-warning_0_document_0_desktop.png | 4 ++--
...mple-panel-with-timeout-warning_0_document_2_mobile.png | 4 ++--
...e-list-with-social-icon-prefix_0_document_0_desktop.png | 4 ++--
...ne-list-with-social-icon-prefix_0_document_1_tablet.png | 4 ++--
...ne-list-with-social-icon-prefix_0_document_2_mobile.png | 4 ++--
..._example-list-with-icon-prefix_0_document_0_desktop.png | 2 +-
...s_example-list-with-icon-prefix_0_document_1_tablet.png | 2 +-
...s_example-list-with-icon-prefix_0_document_2_mobile.png | 2 +-
..._example-list-with-icon-suffix_0_document_0_desktop.png | 2 +-
...s_example-list-with-icon-suffix_0_document_1_tablet.png | 2 +-
...s_example-list-with-icon-suffix_0_document_2_mobile.png | 2 +-
..._patterns_news_example-article_0_document_0_desktop.png | 4 ++--
...__patterns_news_example-article_0_document_1_tablet.png | 4 ++--
...__patterns_news_example-article_0_document_2_mobile.png | 4 ++--
...patterns_news_example-category_0_document_0_desktop.png | 4 ++--
..._patterns_news_example-category_0_document_1_tablet.png | 4 ++--
..._patterns_news_example-category_0_document_2_mobile.png | 4 ++--
..._patterns_news_example-landing_0_document_0_desktop.png | 4 ++--
...__patterns_news_example-landing_0_document_1_tablet.png | 4 ++--
...__patterns_news_example-landing_0_document_2_mobile.png | 4 ++--
...est__patterns_news_example-tag_0_document_0_desktop.png | 4 ++--
...test__patterns_news_example-tag_0_document_1_tablet.png | 4 ++--
...test__patterns_news_example-tag_0_document_2_mobile.png | 4 ++--
src/components/icon/_macro.njk | 7 ++++---
src/components/list/_list.scss | 2 +-
31 files changed, 57 insertions(+), 56 deletions(-)
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_related-content_example-related-content-social-media_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__components_related-content_example-related-content-social-media_0_document_0_desktop.png
index a1c2cc0c78..5ad07761b8 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__components_related-content_example-related-content-social-media_0_document_0_desktop.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_related-content_example-related-content-social-media_0_document_0_desktop.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:2de09fe3fafb8950bd99f95e29a5b9629ecd5e47727fd2056651ee58e8d1e2e7
-size 22540
+oid sha256:a05f09d4da195bc793373e107dbd44733a7109a773dc4f03311bf8ea79f46431
+size 22750
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_related-content_example-related-content-social-media_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_related-content_example-related-content-social-media_0_document_1_tablet.png
index 33ba04d645..7376ee5762 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__components_related-content_example-related-content-social-media_0_document_1_tablet.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_related-content_example-related-content-social-media_0_document_1_tablet.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:92d85cfda1cae67e52b0e12c9cb334029feaf0804caf49c68cc79fb392ba32e1
-size 16937
+oid sha256:94def9767de37a71aa945a22b41f3fb07e4ff0810cf722ab3b7f2fbe3ea34c5d
+size 17124
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_related-content_example-related-content-social-media_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__components_related-content_example-related-content-social-media_0_document_2_mobile.png
index 0061feb5ab..fa238aedbe 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__components_related-content_example-related-content-social-media_0_document_2_mobile.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_related-content_example-related-content-social-media_0_document_2_mobile.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:60e53d25a44a176513ec8922a80db4df75f8a1c22d3d97d55028238f5c3bea1f
-size 12656
+oid sha256:ab181e4eb68f2d597d196f68bd55ffdd68f1ee268a9a4fedd72f3ad2cf6ef3ed
+size 12739
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_share-page_example-share-page_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__components_share-page_example-share-page_0_document_0_desktop.png
index 368dd0b418..8485bf02c5 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__components_share-page_example-share-page_0_document_0_desktop.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_share-page_example-share-page_0_document_0_desktop.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:5abb7f24e906b9a0d8edae746bf1f5929ff27d7980c9385d597148d0b781f5be
-size 17917
+oid sha256:3ee394cccfe2027bd6ef0084837e0fe720cfb1daaf13b8590b7c650582cc48dd
+size 18054
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_share-page_example-share-page_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_share-page_example-share-page_0_document_1_tablet.png
index aadf84620c..ed023ca652 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__components_share-page_example-share-page_0_document_1_tablet.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_share-page_example-share-page_0_document_1_tablet.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:3dbce5d639582b0e2af8f4e14e971caee06420288bd42c42dc7e10dfcba26304
-size 12706
+oid sha256:24342316e0324b6a74c4a396e23fe8e11b86f2041decce09b5fe1d84bb5bf9bc
+size 12809
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_share-page_example-share-page_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__components_share-page_example-share-page_0_document_2_mobile.png
index abecf9f68c..c023d94b8e 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__components_share-page_example-share-page_0_document_2_mobile.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_share-page_example-share-page_0_document_2_mobile.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:8c379b39bfe5729f8f1cf57339bd732f11700260865c303eea90498f7fd20fb3
-size 9205
+oid sha256:dc1c2b885f68dfbf5450fe012414c29d7ce6c011f3d33aa8808c068007de35f7
+size 9218
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_timeout-panel_example-panel-with-timeout-warning_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__components_timeout-panel_example-panel-with-timeout-warning_0_document_0_desktop.png
index 7f20b39e92..6ff63d5d1d 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__components_timeout-panel_example-panel-with-timeout-warning_0_document_0_desktop.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_timeout-panel_example-panel-with-timeout-warning_0_document_0_desktop.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:67986068c453ec5534fd2138bd3974e43a6b837e2603416495be0e48679a66d6
-size 17441
+oid sha256:47df53d9a4630fa991d39f9420d0920c814cbf2b78891da45b678b1f45452b04
+size 17486
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_timeout-panel_example-panel-with-timeout-warning_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__components_timeout-panel_example-panel-with-timeout-warning_0_document_2_mobile.png
index 2695f0770a..f0f681a56c 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__components_timeout-panel_example-panel-with-timeout-warning_0_document_2_mobile.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_timeout-panel_example-panel-with-timeout-warning_0_document_2_mobile.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:ca21587d7e4bf313e46414c7c484509716ee93ad9d66e7b02efc844b2757bb25
-size 13752
+oid sha256:f67e4ca5163a3770c17f4768fd548fc4e4ac0099d5cef4330b6176ee7c5174f2
+size 13805
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-inline-list-with-social-icon-prefix_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-inline-list-with-social-icon-prefix_0_document_0_desktop.png
index a827f5e164..912b6e4eb4 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-inline-list-with-social-icon-prefix_0_document_0_desktop.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-inline-list-with-social-icon-prefix_0_document_0_desktop.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:1609e6b91d29dd196d1694609a5aad6df2d134a93e16ed7d7b8a97a4fb2d4b84
-size 18803
+oid sha256:846552ce1541f25fdc5d1db9ef362d8ebc5c2a0c1f2433d051e0f5e37387086d
+size 18490
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-inline-list-with-social-icon-prefix_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-inline-list-with-social-icon-prefix_0_document_1_tablet.png
index bcf9ee8494..f3f7fb51ca 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-inline-list-with-social-icon-prefix_0_document_1_tablet.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-inline-list-with-social-icon-prefix_0_document_1_tablet.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:d25a1d8d08ccafc4795f6ad936add47833789971c5ac4a6859282639a8312fbc
-size 13276
+oid sha256:64860fea1489374595ebe38c34b9c7e0faf36c58371e307fe375b2839ef0c4b1
+size 13304
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-inline-list-with-social-icon-prefix_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-inline-list-with-social-icon-prefix_0_document_2_mobile.png
index 3e922dd727..ce4669deae 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-inline-list-with-social-icon-prefix_0_document_2_mobile.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-inline-list-with-social-icon-prefix_0_document_2_mobile.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:3fc2fa40fbb0ee843901400d8eb1845a55c3aad0d6f8d0ec9077ca888783c332
-size 10711
+oid sha256:9899e605d4973856ba9638ae602c8e738c779d90331430aa0b7a9737225d4678
+size 10648
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-list-with-icon-prefix_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-list-with-icon-prefix_0_document_0_desktop.png
index f1f44f2da3..9e1466fefc 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-list-with-icon-prefix_0_document_0_desktop.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-list-with-icon-prefix_0_document_0_desktop.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:a72a186698a0d5d2af4f0b7026c1f3ed792618fb806cffa247fd5760468c97ed
+oid sha256:c9ddcf434dbb9e435cc5d37c4067634c30db43e56821932a7d4b31d86adb223c
size 17050
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-list-with-icon-prefix_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-list-with-icon-prefix_0_document_1_tablet.png
index 583eb342a9..fb00204c58 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-list-with-icon-prefix_0_document_1_tablet.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-list-with-icon-prefix_0_document_1_tablet.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:bdb8e0178f39940532f6e37cb8bfe6e7254124fb1de0c9c4978aaca2a36d29de
+oid sha256:c8e1a8ede34db7cb1ad6ac2d742d779b25ca54e147d1782465268300dcafc6fd
size 11956
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-list-with-icon-prefix_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-list-with-icon-prefix_0_document_2_mobile.png
index aca94959e5..9b078c3c63 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-list-with-icon-prefix_0_document_2_mobile.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-list-with-icon-prefix_0_document_2_mobile.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:297a410fc217811a7d647b2876db9ec8d35a6c8c07c62a61f8aa2c8c53bdd5c7
+oid sha256:b1eced87f6af497ad911f61e38a28f4dadc03bed37c661107e3b70bb98e14638
size 8858
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-list-with-icon-suffix_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-list-with-icon-suffix_0_document_0_desktop.png
index 3c85ea75d5..29c4b6ec42 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-list-with-icon-suffix_0_document_0_desktop.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-list-with-icon-suffix_0_document_0_desktop.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:988977e7abc93c7ae599c756e8e9488c4fca8b5051f2287dd142875d4bf2d112
+oid sha256:7cbcbfb963eb026c42566f7bd1fc757548cfa9f159b1b6ab83cd37fc9c624dbf
size 17037
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-list-with-icon-suffix_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-list-with-icon-suffix_0_document_1_tablet.png
index be258c5ec8..d7d01ce7ab 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-list-with-icon-suffix_0_document_1_tablet.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-list-with-icon-suffix_0_document_1_tablet.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:62a10e2aff1967bbfbec94d50950b0c68fa9c076ba74a316763f5e976bc2059c
+oid sha256:62b506c25a0403d942567ea69db9e90f279c647a353a6236768c65b4ab4a78e3
size 11919
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-list-with-icon-suffix_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-list-with-icon-suffix_0_document_2_mobile.png
index 1b6ff906b6..9f8a8d6007 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-list-with-icon-suffix_0_document_2_mobile.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__foundations_lists_example-list-with-icon-suffix_0_document_2_mobile.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:ae11cc323486ac8b19dd635bfa2a0b5811b0613387bbe4ac12673d0de12b9a0d
+oid sha256:865cfe47c350d296e70dbf09b7517805ddb294a66de3e9b3e7cdf4921ab6b1df
size 8841
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-article_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-article_0_document_0_desktop.png
index 7ed65b970c..c94c76a4b5 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-article_0_document_0_desktop.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-article_0_document_0_desktop.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:19c5fcde3126b95851dceca570a8d6fa69fd77248ac98eefc6f452f7e7c78e1b
-size 654089
+oid sha256:fb9657b15ba8ecd9402024320298e560734f921a54ae993e3583929c55523ebd
+size 654281
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-article_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-article_0_document_1_tablet.png
index 6ab5d5810e..7f55806fae 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-article_0_document_1_tablet.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-article_0_document_1_tablet.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:60dfef285c196f2e7c7fd741ff16e7ba3a2b356ba8e8b1c31209a94b774b5386
-size 505747
+oid sha256:349949d4c206b0ce92e19aee0f752d7b174cbf5d15f5260847d42a4b30944e70
+size 505928
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-article_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-article_0_document_2_mobile.png
index 1d8af95f7a..b15c3e860e 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-article_0_document_2_mobile.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-article_0_document_2_mobile.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:64d865321df0e510d5044d3c06b14fc79a07ea16b1bf2329be41eb22b01d2449
-size 446683
+oid sha256:b513869c11efb9786e489c09ea73b67061e68c457ad94e85c49764742e4b1138
+size 446766
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-category_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-category_0_document_0_desktop.png
index e62240f8b4..30281749c6 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-category_0_document_0_desktop.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-category_0_document_0_desktop.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:914540844c7ebf0f39dcbde5dc8c324b38b0f1cd8fd7ab82b52513509cd1a6e0
-size 293682
+oid sha256:c01c1925e5df933cb950a121c6f6fd33189cc78aef345ac2fb5e6c5d09ae2af8
+size 293903
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-category_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-category_0_document_1_tablet.png
index 4930c5fa23..bf69b5cd5d 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-category_0_document_1_tablet.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-category_0_document_1_tablet.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:e33e17953c6ac97ba088ccf683b897403ba9fc218b3b8f78d11cdb1a5177e9e7
-size 308531
+oid sha256:b72ce452dfa7815358aca5ca0ca737b2908f89db1d7369b19b5c133c3d0b5893
+size 308684
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-category_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-category_0_document_2_mobile.png
index 3ed4b70c60..154d65ee98 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-category_0_document_2_mobile.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-category_0_document_2_mobile.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:858955065fbda43688fcccc9f628256d12ea03472c7c2de46bc39768a4a87786
-size 268017
+oid sha256:9ffd1d718109c94439d9b2d4c8b107f2357115353705f23dc5bc91689946cebf
+size 268104
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-landing_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-landing_0_document_0_desktop.png
index 3b4e4e41ea..e6430e8332 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-landing_0_document_0_desktop.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-landing_0_document_0_desktop.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:3d6325031bc340c8a7394850a4157d5946cbe1b3ad84525cbfbaca1d8fd5b9fc
-size 497091
+oid sha256:c246170fa4734ed891c02a647dc65164f374dd8b76967f8c15b76337a497474d
+size 497302
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-landing_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-landing_0_document_1_tablet.png
index aa2a29eb95..8fbee0fbf9 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-landing_0_document_1_tablet.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-landing_0_document_1_tablet.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:3501e963525fa8b6ee208df7d0b91003c9fea2a603356159f3eb884e2efed081
-size 510442
+oid sha256:be3ab82dc8c3d208497bc01aa4282fb4b4993d2635d5cb783097d7320296a001
+size 510554
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-landing_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-landing_0_document_2_mobile.png
index e2593d37a2..74bda565e0 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-landing_0_document_2_mobile.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-landing_0_document_2_mobile.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:f423eb2658489e1bfd02e99c52a50e503d725112617fb4504b16dc80452c0204
-size 375416
+oid sha256:fbd9c5302f44fde722dad820abc8aabd62544806a7c54c83fe85200788df3e12
+size 375495
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-tag_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-tag_0_document_0_desktop.png
index 6b8b68b4e6..08a2ab2d4d 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-tag_0_document_0_desktop.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-tag_0_document_0_desktop.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:a9e6a662f6cd6a0c622fc8d632cb0a6d4b092356d081bd9f0b313e3eaba85108
-size 181135
+oid sha256:2c7117422320ba17f19b9c3ad43a984ccef49ed3446368961beb2d4a727b9850
+size 181352
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-tag_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-tag_0_document_1_tablet.png
index 197973352e..622944029e 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-tag_0_document_1_tablet.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-tag_0_document_1_tablet.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:d44eb90addaddb2bf9bf24db3241ba40c05b12e63a2fdb5fe7812a1034fc914f
-size 182221
+oid sha256:d1781bd76031a51e1288a7729b27f7d60ae0708121fbc4ed1a4d0bd9dd960d78
+size 182396
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-tag_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-tag_0_document_2_mobile.png
index ea2d50b3a2..6e0a3380b1 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-tag_0_document_2_mobile.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__patterns_news_example-tag_0_document_2_mobile.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:05f2e2b088cd01650ff3e6d21e8904e7fa7274aadbc8d6663e4546052db37a77
-size 162322
+oid sha256:7228de0db3c1d70d53190dc85b8efb91bca025bba3168baeb15ff5713414d520
+size 162425
diff --git a/src/components/icon/_macro.njk b/src/components/icon/_macro.njk
index 6710a295ef..83d33abb6d 100644
--- a/src/components/icon/_macro.njk
+++ b/src/components/icon/_macro.njk
@@ -72,9 +72,10 @@
{% elif params.iconType == "twitter" %}
-
+
{% elif params.iconType == "instagram" %}