From d858fc0ca1d91d6d03b29029de68d42ca679f651 Mon Sep 17 00:00:00 2001 From: Olha Lyubinets Date: Wed, 1 Apr 2020 11:21:46 +0100 Subject: [PATCH 1/7] Fix high contrast mode --- .../components/psammead-radio-schedule/src/ProgramCard/index.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/psammead-radio-schedule/src/ProgramCard/index.jsx b/packages/components/psammead-radio-schedule/src/ProgramCard/index.jsx index 8fd043f689..22d80a56e2 100644 --- a/packages/components/psammead-radio-schedule/src/ProgramCard/index.jsx +++ b/packages/components/psammead-radio-schedule/src/ProgramCard/index.jsx @@ -86,6 +86,7 @@ const ButtonWrapper = styled.div` ${({ script }) => script && getMinion(script)}; padding: ${GEL_SPACING}; background-color: ${({ backgroundColor }) => backgroundColor}; + outline: 0.0625rem solid transparent; color: ${({ durationColor }) => durationColor}; @media screen and (-ms-high-contrast: active) { background-color: transparent; From bfb10fdcc9e85474581baebd4f7c41e46fee146a Mon Sep 17 00:00:00 2001 From: Olha Lyubinets Date: Wed, 1 Apr 2020 11:22:14 +0100 Subject: [PATCH 2/7] Update snapshots --- .../src/ProgramCard/__snapshots__/index.test.jsx.snap | 5 +++++ .../src/__snapshots__/index.test.jsx.snap | 6 ++++++ 2 files changed, 11 insertions(+) diff --git a/packages/components/psammead-radio-schedule/src/ProgramCard/__snapshots__/index.test.jsx.snap b/packages/components/psammead-radio-schedule/src/ProgramCard/__snapshots__/index.test.jsx.snap index 0685ff314e..ce3302cdea 100644 --- a/packages/components/psammead-radio-schedule/src/ProgramCard/__snapshots__/index.test.jsx.snap +++ b/packages/components/psammead-radio-schedule/src/ProgramCard/__snapshots__/index.test.jsx.snap @@ -122,6 +122,7 @@ exports[`ProgramCard should render correctly for live 1`] = ` line-height: 1rem; padding: 0.5rem; background-color: #B80000; + outline: 0.0625rem solid transparent; color: #FFFFFF; } @@ -394,6 +395,7 @@ exports[`ProgramCard should render correctly for next 1`] = ` line-height: 1rem; padding: 0.5rem; background-color: #FFFFFF; + outline: 0.0625rem solid transparent; color: #11708C; } @@ -682,6 +684,7 @@ exports[`ProgramCard should render correctly for onDemand 1`] = ` line-height: 1rem; padding: 0.5rem; background-color: #222222; + outline: 0.0625rem solid transparent; color: #FFFFFF; } @@ -955,6 +958,7 @@ exports[`ProgramCard should render correctly in RTL 1`] = ` line-height: 1rem; padding: 0.5rem; background-color: #222222; + outline: 0.0625rem solid transparent; color: #FFFFFF; } @@ -1226,6 +1230,7 @@ exports[`ProgramCard should render correctly without summary 1`] = ` line-height: 1rem; padding: 0.5rem; background-color: #B80000; + outline: 0.0625rem solid transparent; color: #FFFFFF; } diff --git a/packages/components/psammead-radio-schedule/src/__snapshots__/index.test.jsx.snap b/packages/components/psammead-radio-schedule/src/__snapshots__/index.test.jsx.snap index b6bffeaa1d..218703f679 100644 --- a/packages/components/psammead-radio-schedule/src/__snapshots__/index.test.jsx.snap +++ b/packages/components/psammead-radio-schedule/src/__snapshots__/index.test.jsx.snap @@ -163,6 +163,7 @@ exports[`RadioSchedule should render ltr radio schedules correctly 1`] = ` line-height: 1rem; padding: 0.5rem; background-color: #B80000; + outline: 0.0625rem solid transparent; color: #FFFFFF; } @@ -174,6 +175,7 @@ exports[`RadioSchedule should render ltr radio schedules correctly 1`] = ` line-height: 1rem; padding: 0.5rem; background-color: #222222; + outline: 0.0625rem solid transparent; color: #FFFFFF; } @@ -185,6 +187,7 @@ exports[`RadioSchedule should render ltr radio schedules correctly 1`] = ` line-height: 1rem; padding: 0.5rem; background-color: #FFFFFF; + outline: 0.0625rem solid transparent; color: #11708C; } @@ -1262,6 +1265,7 @@ exports[`RadioSchedule should render rtl radio schedules correctly 1`] = ` line-height: 1rem; padding: 0.5rem; background-color: #B80000; + outline: 0.0625rem solid transparent; color: #FFFFFF; } @@ -1273,6 +1277,7 @@ exports[`RadioSchedule should render rtl radio schedules correctly 1`] = ` line-height: 1rem; padding: 0.5rem; background-color: #222222; + outline: 0.0625rem solid transparent; color: #FFFFFF; } @@ -1284,6 +1289,7 @@ exports[`RadioSchedule should render rtl radio schedules correctly 1`] = ` line-height: 1rem; padding: 0.5rem; background-color: #FFFFFF; + outline: 0.0625rem solid transparent; color: #11708C; } From 75170d861144dccfb578a842311d111e91450f21 Mon Sep 17 00:00:00 2001 From: Olha Lyubinets Date: Wed, 1 Apr 2020 11:22:43 +0100 Subject: [PATCH 3/7] Bump up radio schedules version --- packages/components/psammead-radio-schedule/CHANGELOG.md | 1 + packages/components/psammead-radio-schedule/package-lock.json | 2 +- packages/components/psammead-radio-schedule/package.json | 2 +- 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/components/psammead-radio-schedule/CHANGELOG.md b/packages/components/psammead-radio-schedule/CHANGELOG.md index 40d0a134d7..ff71238597 100644 --- a/packages/components/psammead-radio-schedule/CHANGELOG.md +++ b/packages/components/psammead-radio-schedule/CHANGELOG.md @@ -3,6 +3,7 @@ | Version | Description | |---------|-------------| +| 0.1.0-alpha.28 | [PR#xxxx](https://github.com/bbc/psammead/pull/xxxx) Fix Duration border on FireFox High Contrast Mode | | 0.1.0-alpha.27 | [PR#3309](https://github.com/bbc/psammead/pull/3309) Fix Program Card styling | | 0.1.0-alpha.26 | [PR#3312](https://github.com/bbc/psammead/pull/3312) Fix `ProgramCard` border on Windows High Contrast Mode | | 0.1.0-alpha.25 | [PR#3302](https://github.com/bbc/psammead/pull/3302) Fix radio schedules duration formatting | diff --git a/packages/components/psammead-radio-schedule/package-lock.json b/packages/components/psammead-radio-schedule/package-lock.json index 0450113485..ce9f68fd65 100644 --- a/packages/components/psammead-radio-schedule/package-lock.json +++ b/packages/components/psammead-radio-schedule/package-lock.json @@ -1,6 +1,6 @@ { "name": "@bbc/psammead-radio-schedule", - "version": "0.1.0-alpha.27", + "version": "0.1.0-alpha.28", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/packages/components/psammead-radio-schedule/package.json b/packages/components/psammead-radio-schedule/package.json index 9452ab26bf..e7c7b233f2 100644 --- a/packages/components/psammead-radio-schedule/package.json +++ b/packages/components/psammead-radio-schedule/package.json @@ -1,6 +1,6 @@ { "name": "@bbc/psammead-radio-schedule", - "version": "0.1.0-alpha.27", + "version": "0.1.0-alpha.28", "main": "dist/index.js", "module": "esm/index.js", "sideEffects": false, From aaa2eddb25143fd0c33542581900bed51e155a7f Mon Sep 17 00:00:00 2001 From: Olha Lyubinets Date: Wed, 1 Apr 2020 12:13:28 +0100 Subject: [PATCH 4/7] Update packages/components/psammead-radio-schedule/CHANGELOG.md --- packages/components/psammead-radio-schedule/CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/psammead-radio-schedule/CHANGELOG.md b/packages/components/psammead-radio-schedule/CHANGELOG.md index ff71238597..8b0c1d0ede 100644 --- a/packages/components/psammead-radio-schedule/CHANGELOG.md +++ b/packages/components/psammead-radio-schedule/CHANGELOG.md @@ -3,7 +3,7 @@ | Version | Description | |---------|-------------| -| 0.1.0-alpha.28 | [PR#xxxx](https://github.com/bbc/psammead/pull/xxxx) Fix Duration border on FireFox High Contrast Mode | +| 0.1.0-alpha.28 | [PR#3324](https://github.com/bbc/psammead/pull/3324) Fix Duration border on FireFox High Contrast Mode | | 0.1.0-alpha.27 | [PR#3309](https://github.com/bbc/psammead/pull/3309) Fix Program Card styling | | 0.1.0-alpha.26 | [PR#3312](https://github.com/bbc/psammead/pull/3312) Fix `ProgramCard` border on Windows High Contrast Mode | | 0.1.0-alpha.25 | [PR#3302](https://github.com/bbc/psammead/pull/3302) Fix radio schedules duration formatting | From 55ba31c33e7efab115c5a0ea2b3c6533eee81864 Mon Sep 17 00:00:00 2001 From: Olha Lyubinets Date: Thu, 2 Apr 2020 15:28:38 +0100 Subject: [PATCH 5/7] Change border to outline --- .../src/ProgramCard/__snapshots__/index.test.jsx.snap | 10 +++++----- .../psammead-radio-schedule/src/ProgramCard/index.jsx | 2 +- .../src/__snapshots__/index.test.jsx.snap | 4 ++-- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/components/psammead-radio-schedule/src/ProgramCard/__snapshots__/index.test.jsx.snap b/packages/components/psammead-radio-schedule/src/ProgramCard/__snapshots__/index.test.jsx.snap index 725d994fbd..21c6080254 100644 --- a/packages/components/psammead-radio-schedule/src/ProgramCard/__snapshots__/index.test.jsx.snap +++ b/packages/components/psammead-radio-schedule/src/ProgramCard/__snapshots__/index.test.jsx.snap @@ -70,7 +70,7 @@ exports[`ProgramCard should render correctly for live 1`] = ` -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; - border: 0.0625rem solid transparent; + outline: 0.0625rem solid transparent; height: 100%; } @@ -331,7 +331,7 @@ exports[`ProgramCard should render correctly for next 1`] = ` -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; - border: 0.0625rem solid transparent; + outline: 0.0625rem solid transparent; height: 100%; } @@ -630,7 +630,7 @@ exports[`ProgramCard should render correctly for onDemand 1`] = ` -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; - border: 0.0625rem solid transparent; + outline: 0.0625rem solid transparent; height: 100%; } @@ -903,7 +903,7 @@ exports[`ProgramCard should render correctly in RTL 1`] = ` -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; - border: 0.0625rem solid transparent; + outline: 0.0625rem solid transparent; height: 100%; } @@ -1185,7 +1185,7 @@ exports[`ProgramCard should render correctly without summary 1`] = ` -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; - border: 0.0625rem solid transparent; + outline: 0.0625rem solid transparent; height: 100%; } diff --git a/packages/components/psammead-radio-schedule/src/ProgramCard/index.jsx b/packages/components/psammead-radio-schedule/src/ProgramCard/index.jsx index 33ca4b9922..4a5500c3e7 100644 --- a/packages/components/psammead-radio-schedule/src/ProgramCard/index.jsx +++ b/packages/components/psammead-radio-schedule/src/ProgramCard/index.jsx @@ -35,7 +35,7 @@ const CardWrapper = styled.div` background-color: ${C_WHITE}; display: flex; flex-direction: column; - border: 0.0625rem solid transparent; + outline: 0.0625rem solid transparent; height: 100%; `; diff --git a/packages/components/psammead-radio-schedule/src/__snapshots__/index.test.jsx.snap b/packages/components/psammead-radio-schedule/src/__snapshots__/index.test.jsx.snap index 856f0fc21e..74faa97d42 100644 --- a/packages/components/psammead-radio-schedule/src/__snapshots__/index.test.jsx.snap +++ b/packages/components/psammead-radio-schedule/src/__snapshots__/index.test.jsx.snap @@ -79,7 +79,7 @@ exports[`RadioSchedule should render ltr radio schedules correctly 1`] = ` -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; - border: 0.0625rem solid transparent; + outline: 0.0625rem solid transparent; height: 100%; } @@ -1177,7 +1177,7 @@ exports[`RadioSchedule should render rtl radio schedules correctly 1`] = ` -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; - border: 0.0625rem solid transparent; + outline: 0.0625rem solid transparent; height: 100%; } From 04ad6ea70552653e9a0b1c8de2222826c7da724a Mon Sep 17 00:00:00 2001 From: Olha Lyubinets Date: Thu, 2 Apr 2020 17:20:43 +0100 Subject: [PATCH 6/7] Fix contrast mode in FF --- .../__snapshots__/index.test.jsx.snap | 20 ++++++++++++++----- .../src/ProgramCard/index.jsx | 4 +++- .../src/__snapshots__/index.test.jsx.snap | 16 +++++++++++++-- 3 files changed, 32 insertions(+), 8 deletions(-) diff --git a/packages/components/psammead-radio-schedule/src/ProgramCard/__snapshots__/index.test.jsx.snap b/packages/components/psammead-radio-schedule/src/ProgramCard/__snapshots__/index.test.jsx.snap index 21c6080254..83884c4697 100644 --- a/packages/components/psammead-radio-schedule/src/ProgramCard/__snapshots__/index.test.jsx.snap +++ b/packages/components/psammead-radio-schedule/src/ProgramCard/__snapshots__/index.test.jsx.snap @@ -70,7 +70,7 @@ exports[`ProgramCard should render correctly for live 1`] = ` -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; - outline: 0.0625rem solid transparent; + border: 0.0625rem solid transparent; height: 100%; } @@ -197,6 +197,8 @@ exports[`ProgramCard should render correctly for live 1`] = ` @media screen and (-ms-high-contrast:active) { .c8 { background-color: transparent; + outline: none; + border-top: 0.0625rem solid transparent; } } @@ -331,7 +333,7 @@ exports[`ProgramCard should render correctly for next 1`] = ` -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; - outline: 0.0625rem solid transparent; + border: 0.0625rem solid transparent; height: 100%; } @@ -483,6 +485,8 @@ exports[`ProgramCard should render correctly for next 1`] = ` @media screen and (-ms-high-contrast:active) { .c7 { background-color: transparent; + outline: none; + border-top: 0.0625rem solid transparent; } } @@ -630,7 +634,7 @@ exports[`ProgramCard should render correctly for onDemand 1`] = ` -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; - outline: 0.0625rem solid transparent; + border: 0.0625rem solid transparent; height: 100%; } @@ -757,6 +761,8 @@ exports[`ProgramCard should render correctly for onDemand 1`] = ` @media screen and (-ms-high-contrast:active) { .c7 { background-color: transparent; + outline: none; + border-top: 0.0625rem solid transparent; } } @@ -903,7 +909,7 @@ exports[`ProgramCard should render correctly in RTL 1`] = ` -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; - outline: 0.0625rem solid transparent; + border: 0.0625rem solid transparent; height: 100%; } @@ -1030,6 +1036,8 @@ exports[`ProgramCard should render correctly in RTL 1`] = ` @media screen and (-ms-high-contrast:active) { .c7 { background-color: transparent; + outline: none; + border-top: 0.0625rem solid transparent; } } @@ -1185,7 +1193,7 @@ exports[`ProgramCard should render correctly without summary 1`] = ` -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; - outline: 0.0625rem solid transparent; + border: 0.0625rem solid transparent; height: 100%; } @@ -1287,6 +1295,8 @@ exports[`ProgramCard should render correctly without summary 1`] = ` @media screen and (-ms-high-contrast:active) { .c7 { background-color: transparent; + outline: none; + border-top: 0.0625rem solid transparent; } } diff --git a/packages/components/psammead-radio-schedule/src/ProgramCard/index.jsx b/packages/components/psammead-radio-schedule/src/ProgramCard/index.jsx index 4a5500c3e7..424478ae3d 100644 --- a/packages/components/psammead-radio-schedule/src/ProgramCard/index.jsx +++ b/packages/components/psammead-radio-schedule/src/ProgramCard/index.jsx @@ -35,7 +35,7 @@ const CardWrapper = styled.div` background-color: ${C_WHITE}; display: flex; flex-direction: column; - outline: 0.0625rem solid transparent; + border: 0.0625rem solid transparent; height: 100%; `; @@ -90,6 +90,8 @@ const ButtonWrapper = styled.div` color: ${({ durationColor }) => durationColor}; @media screen and (-ms-high-contrast: active) { background-color: transparent; + outline: none; + border-top: 0.0625rem solid transparent; } `; diff --git a/packages/components/psammead-radio-schedule/src/__snapshots__/index.test.jsx.snap b/packages/components/psammead-radio-schedule/src/__snapshots__/index.test.jsx.snap index 74faa97d42..b324e7637e 100644 --- a/packages/components/psammead-radio-schedule/src/__snapshots__/index.test.jsx.snap +++ b/packages/components/psammead-radio-schedule/src/__snapshots__/index.test.jsx.snap @@ -79,7 +79,7 @@ exports[`RadioSchedule should render ltr radio schedules correctly 1`] = ` -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; - outline: 0.0625rem solid transparent; + border: 0.0625rem solid transparent; height: 100%; } @@ -396,6 +396,8 @@ exports[`RadioSchedule should render ltr radio schedules correctly 1`] = ` @media screen and (-ms-high-contrast:active) { .c18 { background-color: transparent; + outline: none; + border-top: 0.0625rem solid transparent; } } @@ -416,6 +418,8 @@ exports[`RadioSchedule should render ltr radio schedules correctly 1`] = ` @media screen and (-ms-high-contrast:active) { .c22 { background-color: transparent; + outline: none; + border-top: 0.0625rem solid transparent; } } @@ -436,6 +440,8 @@ exports[`RadioSchedule should render ltr radio schedules correctly 1`] = ` @media screen and (-ms-high-contrast:active) { .c26 { background-color: transparent; + outline: none; + border-top: 0.0625rem solid transparent; } } @@ -1177,7 +1183,7 @@ exports[`RadioSchedule should render rtl radio schedules correctly 1`] = ` -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; - outline: 0.0625rem solid transparent; + border: 0.0625rem solid transparent; height: 100%; } @@ -1494,6 +1500,8 @@ exports[`RadioSchedule should render rtl radio schedules correctly 1`] = ` @media screen and (-ms-high-contrast:active) { .c18 { background-color: transparent; + outline: none; + border-top: 0.0625rem solid transparent; } } @@ -1514,6 +1522,8 @@ exports[`RadioSchedule should render rtl radio schedules correctly 1`] = ` @media screen and (-ms-high-contrast:active) { .c22 { background-color: transparent; + outline: none; + border-top: 0.0625rem solid transparent; } } @@ -1534,6 +1544,8 @@ exports[`RadioSchedule should render rtl radio schedules correctly 1`] = ` @media screen and (-ms-high-contrast:active) { .c26 { background-color: transparent; + outline: none; + border-top: 0.0625rem solid transparent; } } From 2967774685fe7abdd36f1124583d855222c05e2a Mon Sep 17 00:00:00 2001 From: Olha Lyubinets Date: Fri, 3 Apr 2020 10:32:17 +0100 Subject: [PATCH 7/7] Remove border in high contrast --- .../src/ProgramCard/__snapshots__/index.test.jsx.snap | 5 ----- .../psammead-radio-schedule/src/ProgramCard/index.jsx | 1 - .../src/__snapshots__/index.test.jsx.snap | 6 ------ 3 files changed, 12 deletions(-) diff --git a/packages/components/psammead-radio-schedule/src/ProgramCard/__snapshots__/index.test.jsx.snap b/packages/components/psammead-radio-schedule/src/ProgramCard/__snapshots__/index.test.jsx.snap index 83884c4697..c4fbfb4054 100644 --- a/packages/components/psammead-radio-schedule/src/ProgramCard/__snapshots__/index.test.jsx.snap +++ b/packages/components/psammead-radio-schedule/src/ProgramCard/__snapshots__/index.test.jsx.snap @@ -198,7 +198,6 @@ exports[`ProgramCard should render correctly for live 1`] = ` .c8 { background-color: transparent; outline: none; - border-top: 0.0625rem solid transparent; } } @@ -486,7 +485,6 @@ exports[`ProgramCard should render correctly for next 1`] = ` .c7 { background-color: transparent; outline: none; - border-top: 0.0625rem solid transparent; } } @@ -762,7 +760,6 @@ exports[`ProgramCard should render correctly for onDemand 1`] = ` .c7 { background-color: transparent; outline: none; - border-top: 0.0625rem solid transparent; } } @@ -1037,7 +1034,6 @@ exports[`ProgramCard should render correctly in RTL 1`] = ` .c7 { background-color: transparent; outline: none; - border-top: 0.0625rem solid transparent; } } @@ -1296,7 +1292,6 @@ exports[`ProgramCard should render correctly without summary 1`] = ` .c7 { background-color: transparent; outline: none; - border-top: 0.0625rem solid transparent; } } diff --git a/packages/components/psammead-radio-schedule/src/ProgramCard/index.jsx b/packages/components/psammead-radio-schedule/src/ProgramCard/index.jsx index 424478ae3d..000fe6d2b5 100644 --- a/packages/components/psammead-radio-schedule/src/ProgramCard/index.jsx +++ b/packages/components/psammead-radio-schedule/src/ProgramCard/index.jsx @@ -91,7 +91,6 @@ const ButtonWrapper = styled.div` @media screen and (-ms-high-contrast: active) { background-color: transparent; outline: none; - border-top: 0.0625rem solid transparent; } `; diff --git a/packages/components/psammead-radio-schedule/src/__snapshots__/index.test.jsx.snap b/packages/components/psammead-radio-schedule/src/__snapshots__/index.test.jsx.snap index b324e7637e..fa282bf1f2 100644 --- a/packages/components/psammead-radio-schedule/src/__snapshots__/index.test.jsx.snap +++ b/packages/components/psammead-radio-schedule/src/__snapshots__/index.test.jsx.snap @@ -397,7 +397,6 @@ exports[`RadioSchedule should render ltr radio schedules correctly 1`] = ` .c18 { background-color: transparent; outline: none; - border-top: 0.0625rem solid transparent; } } @@ -419,7 +418,6 @@ exports[`RadioSchedule should render ltr radio schedules correctly 1`] = ` .c22 { background-color: transparent; outline: none; - border-top: 0.0625rem solid transparent; } } @@ -441,7 +439,6 @@ exports[`RadioSchedule should render ltr radio schedules correctly 1`] = ` .c26 { background-color: transparent; outline: none; - border-top: 0.0625rem solid transparent; } } @@ -1501,7 +1498,6 @@ exports[`RadioSchedule should render rtl radio schedules correctly 1`] = ` .c18 { background-color: transparent; outline: none; - border-top: 0.0625rem solid transparent; } } @@ -1523,7 +1519,6 @@ exports[`RadioSchedule should render rtl radio schedules correctly 1`] = ` .c22 { background-color: transparent; outline: none; - border-top: 0.0625rem solid transparent; } } @@ -1545,7 +1540,6 @@ exports[`RadioSchedule should render rtl radio schedules correctly 1`] = ` .c26 { background-color: transparent; outline: none; - border-top: 0.0625rem solid transparent; } }