From a5f85d6f812139d24daf64dd50e2bdf869829b6a Mon Sep 17 00:00:00 2001 From: Olha Lyubinets Date: Tue, 14 Jan 2020 14:43:18 +0000 Subject: [PATCH 1/9] Add clock icon --- .../psammead-assets/src/svgs/mediaIcons.jsx | 29 ++++++++++++++++--- 1 file changed, 25 insertions(+), 4 deletions(-) diff --git a/packages/utilities/psammead-assets/src/svgs/mediaIcons.jsx b/packages/utilities/psammead-assets/src/svgs/mediaIcons.jsx index 5984bf873f..bcc45bc306 100644 --- a/packages/utilities/psammead-assets/src/svgs/mediaIcons.jsx +++ b/packages/utilities/psammead-assets/src/svgs/mediaIcons.jsx @@ -6,6 +6,10 @@ import { GEL_SPACING_DBL, } from '@bbc/gel-foundations/spacings'; +const defaultAttrs = { + focusable: 'false', +}; + // `currentColor` has been used to better reflect user colour choices in Firefox. const MediaIcon = styled.svg` vertical-align: middle; @@ -34,13 +38,18 @@ const GuidanceIcon = styled(MediaIcon)` height: ${GEL_SPACING_DBL}; `; +const ClockIcon = styled(MediaIcon)` + width: 0.725rem; + height: 0.725rem; +`; + const mediaIcons = { video: ( @@ -50,7 +59,7 @@ const mediaIcons = { viewBox="0 0 13 12" width="13px" height="12px" - focusable="false" + {...defaultAttrs} > @@ -61,17 +70,29 @@ const mediaIcons = { viewBox="0 0 32 26" width="16px" height="13px" - focusable="false" + {...defaultAttrs} > ), guidance: ( - + ), + clock: ( + + ), }; export default mediaIcons; From 29d9b8aa2f53517cc17450a38375b8e0296640ce Mon Sep 17 00:00:00 2001 From: Olha Lyubinets Date: Tue, 14 Jan 2020 14:43:40 +0000 Subject: [PATCH 2/9] Update readme --- packages/utilities/psammead-assets/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/utilities/psammead-assets/README.md b/packages/utilities/psammead-assets/README.md index e40f041dad..221327c8f0 100644 --- a/packages/utilities/psammead-assets/README.md +++ b/packages/utilities/psammead-assets/README.md @@ -56,7 +56,7 @@ import { coreIcons } from '@bbc/psammead-assets/svgs'; ## Media Icons SVGs -Media icons is an object containing styled SVG icons for video, audio and photogallery. Media icons are sized to work well alongside specific text with typography group `GEL Minion`. They are used in `psammead-media-indicator` component. +Media icons is an object containing styled SVG icons for video, audio, photogallery, guidance and clock. Media icons are sized to work well alongside specific text with typography group `GEL Minion`. They are used in `psammead-media-indicator` component. ### Usage From 98cd14089245ea2e4d844d0fe42027743446fce6 Mon Sep 17 00:00:00 2001 From: Olha Lyubinets Date: Tue, 14 Jan 2020 14:44:04 +0000 Subject: [PATCH 3/9] Bump up version of psammead-assets --- packages/utilities/psammead-assets/CHANGELOG.md | 5 +++-- packages/utilities/psammead-assets/package-lock.json | 2 +- packages/utilities/psammead-assets/package.json | 2 +- 3 files changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/utilities/psammead-assets/CHANGELOG.md b/packages/utilities/psammead-assets/CHANGELOG.md index a3ea338c40..c07db77234 100644 --- a/packages/utilities/psammead-assets/CHANGELOG.md +++ b/packages/utilities/psammead-assets/CHANGELOG.md @@ -3,14 +3,15 @@ | Version | Description | |---------|-------------| +| 2.12.0 | [PR#xxxx](https://github.com/bbc/psammead/pull/xxxx) Add a Clock icon to media icons | | 2.11.0 | [PR#2826](https://github.com/bbc/psammead/pull/2826) Add amp ads js script boilerplate | | 2.10.3 | [PR#2694](https://github.com/bbc/psammead/pull/2694) Add properties to hide Navigation Icons from screen readers | | 2.10.2 | [PR#2686](https://github.com/bbc/psammead/pull/2686) Add SVG for Archive brand logo | | 2.10.1 | [PR#2655](https://github.com/bbc/psammead/pull/2655) Update Navigation Icons to scale with browser font size | | 2.10.0 | [PR#2631](https://github.com/bbc/psammead/pull/2631) Add AMP_BIND, AMP_LIST, AMP_MUSTACHE scripts to amp-boilerplate exports | | 2.9.0 | [PR#2641](https://github.com/bbc/psammead/pull/2641) Add Core icons group with Alert and Info icons | -| 2.8.0 | [PR#2581](https://github.com/bbc/psammead/pull/2581) Added hamburger and cross icons for Navigation | -| 2.7.0 | [PR#2531](https://github.com/bbc/psammead/pull/2531) Added Guidance icon | +| 2.8.0 | [PR#2581](https://github.com/bbc/psammead/pull/2581) Add hamburger and cross icons for Navigation | +| 2.7.0 | [PR#2531](https://github.com/bbc/psammead/pull/2531) Add Guidance icon | | 2.6.0 | [PR#2433](https://github.com/bbc/psammead/pull/2433) Add AMP js script boilerplate to psammead-assets. | | 2.5.0 | [PR#2309](https://github.com/bbc/psammead/pull/2309) Add SVGs for Weather, Cymru Fyw and Naidheachdan | | 2.4.1 | [PR#2189](https://github.com/bbc/psammead/pull/2189) Add storybook stories for media icons in psammead-assets | diff --git a/packages/utilities/psammead-assets/package-lock.json b/packages/utilities/psammead-assets/package-lock.json index 2be186a033..300b2309d3 100644 --- a/packages/utilities/psammead-assets/package-lock.json +++ b/packages/utilities/psammead-assets/package-lock.json @@ -1,5 +1,5 @@ { "name": "@bbc/psammead-assets", - "version": "2.11.0", + "version": "2.12.0", "lockfileVersion": 1 } diff --git a/packages/utilities/psammead-assets/package.json b/packages/utilities/psammead-assets/package.json index 5b493152df..1fa3e9522f 100644 --- a/packages/utilities/psammead-assets/package.json +++ b/packages/utilities/psammead-assets/package.json @@ -1,6 +1,6 @@ { "name": "@bbc/psammead-assets", - "version": "2.11.0", + "version": "2.12.0", "sideEffects": false, "description": "A collection of common assets that are likely to be required by many Psammead components or users, such as SVGs or small scripts.", "repository": { From 7ed72805cbc8f0769c364956a05669f3c4f4de46 Mon Sep 17 00:00:00 2001 From: Olha Lyubinets Date: Tue, 14 Jan 2020 14:52:07 +0000 Subject: [PATCH 4/9] Update correct PR number --- packages/utilities/psammead-assets/CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/utilities/psammead-assets/CHANGELOG.md b/packages/utilities/psammead-assets/CHANGELOG.md index c07db77234..ed44fc0451 100644 --- a/packages/utilities/psammead-assets/CHANGELOG.md +++ b/packages/utilities/psammead-assets/CHANGELOG.md @@ -3,7 +3,7 @@ | Version | Description | |---------|-------------| -| 2.12.0 | [PR#xxxx](https://github.com/bbc/psammead/pull/xxxx) Add a Clock icon to media icons | +| 2.12.0 | [PR#2935](https://github.com/bbc/psammead/pull/2935) Add a Clock icon to media icons | | 2.11.0 | [PR#2826](https://github.com/bbc/psammead/pull/2826) Add amp ads js script boilerplate | | 2.10.3 | [PR#2694](https://github.com/bbc/psammead/pull/2694) Add properties to hide Navigation Icons from screen readers | | 2.10.2 | [PR#2686](https://github.com/bbc/psammead/pull/2686) Add SVG for Archive brand logo | From ca7d4a94efc99ba37e88682f8c99450545754e9d Mon Sep 17 00:00:00 2001 From: Olha Lyubinets Date: Wed, 15 Jan 2020 10:47:40 +0000 Subject: [PATCH 5/9] Update readme --- packages/utilities/psammead-assets/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/utilities/psammead-assets/README.md b/packages/utilities/psammead-assets/README.md index 221327c8f0..c532fb05d7 100644 --- a/packages/utilities/psammead-assets/README.md +++ b/packages/utilities/psammead-assets/README.md @@ -56,7 +56,7 @@ import { coreIcons } from '@bbc/psammead-assets/svgs'; ## Media Icons SVGs -Media icons is an object containing styled SVG icons for video, audio, photogallery, guidance and clock. Media icons are sized to work well alongside specific text with typography group `GEL Minion`. They are used in `psammead-media-indicator` component. +Media icons is an object containing styled SVG icons for video, audio, photogallery, guidance and clock. Media icons are sized to work well alongside specific text with typography group `GEL Minion`. They are used in `psammead-media-indicator`, `psammead-media-player` and radio schedules components. ### Usage From 811fb0f415f8547824462deb46453a95045b75cd Mon Sep 17 00:00:00 2001 From: Olha Lyubinets Date: Mon, 20 Jan 2020 09:54:18 +0000 Subject: [PATCH 6/9] Hide all icons from assistive tech --- .../utilities/psammead-assets/src/svgs/mediaIcons.jsx | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/packages/utilities/psammead-assets/src/svgs/mediaIcons.jsx b/packages/utilities/psammead-assets/src/svgs/mediaIcons.jsx index bcc45bc306..bafe5aeac3 100644 --- a/packages/utilities/psammead-assets/src/svgs/mediaIcons.jsx +++ b/packages/utilities/psammead-assets/src/svgs/mediaIcons.jsx @@ -49,6 +49,7 @@ const mediaIcons = { viewBox="0 0 32 32" width="12px" height="12px" + aria-hidden="true" {...defaultAttrs} > @@ -59,6 +60,7 @@ const mediaIcons = { viewBox="0 0 13 12" width="13px" height="12px" + aria-hidden="true" {...defaultAttrs} > @@ -70,6 +72,7 @@ const mediaIcons = { viewBox="0 0 32 26" width="16px" height="13px" + aria-hidden="true" {...defaultAttrs} > @@ -77,7 +80,13 @@ const mediaIcons = { ), guidance: ( - + ), From 1e63ba1619d66b7a36134f7c44572ce659d3d024 Mon Sep 17 00:00:00 2001 From: Olha Lyubinets Date: Mon, 20 Jan 2020 10:34:14 +0000 Subject: [PATCH 7/9] Make aria-hidden a default attribute --- .../psammead-assets/src/svgs/mediaIcons.jsx | 20 +++---------------- 1 file changed, 3 insertions(+), 17 deletions(-) diff --git a/packages/utilities/psammead-assets/src/svgs/mediaIcons.jsx b/packages/utilities/psammead-assets/src/svgs/mediaIcons.jsx index bafe5aeac3..f4788c0782 100644 --- a/packages/utilities/psammead-assets/src/svgs/mediaIcons.jsx +++ b/packages/utilities/psammead-assets/src/svgs/mediaIcons.jsx @@ -8,6 +8,7 @@ import { const defaultAttrs = { focusable: 'false', + 'aria-hidden': 'true', }; // `currentColor` has been used to better reflect user colour choices in Firefox. @@ -49,7 +50,6 @@ const mediaIcons = { viewBox="0 0 32 32" width="12px" height="12px" - aria-hidden="true" {...defaultAttrs} > @@ -60,7 +60,6 @@ const mediaIcons = { viewBox="0 0 13 12" width="13px" height="12px" - aria-hidden="true" {...defaultAttrs} > @@ -72,7 +71,6 @@ const mediaIcons = { viewBox="0 0 32 26" width="16px" height="13px" - aria-hidden="true" {...defaultAttrs} > @@ -80,24 +78,12 @@ const mediaIcons = { ), guidance: ( - ), - clock: ( - - - - - ), }; export default mediaIcons; From cf78fe5fc7366dc4152ad7ea905ba3fc383fd01a Mon Sep 17 00:00:00 2001 From: Olha Lyubinets Date: Mon, 20 Jan 2020 11:14:50 +0000 Subject: [PATCH 9/9] Update changelog and readme --- packages/utilities/psammead-assets/CHANGELOG.md | 2 +- packages/utilities/psammead-assets/README.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/utilities/psammead-assets/CHANGELOG.md b/packages/utilities/psammead-assets/CHANGELOG.md index ed44fc0451..3bb3380abc 100644 --- a/packages/utilities/psammead-assets/CHANGELOG.md +++ b/packages/utilities/psammead-assets/CHANGELOG.md @@ -3,7 +3,7 @@ | Version | Description | |---------|-------------| -| 2.12.0 | [PR#2935](https://github.com/bbc/psammead/pull/2935) Add a Clock icon to media icons | +| 2.12.0 | [PR#2935](https://github.com/bbc/psammead/pull/2935) Add a Clock icon to core icons | | 2.11.0 | [PR#2826](https://github.com/bbc/psammead/pull/2826) Add amp ads js script boilerplate | | 2.10.3 | [PR#2694](https://github.com/bbc/psammead/pull/2694) Add properties to hide Navigation Icons from screen readers | | 2.10.2 | [PR#2686](https://github.com/bbc/psammead/pull/2686) Add SVG for Archive brand logo | diff --git a/packages/utilities/psammead-assets/README.md b/packages/utilities/psammead-assets/README.md index c532fb05d7..8a85aa2caf 100644 --- a/packages/utilities/psammead-assets/README.md +++ b/packages/utilities/psammead-assets/README.md @@ -56,7 +56,7 @@ import { coreIcons } from '@bbc/psammead-assets/svgs'; ## Media Icons SVGs -Media icons is an object containing styled SVG icons for video, audio, photogallery, guidance and clock. Media icons are sized to work well alongside specific text with typography group `GEL Minion`. They are used in `psammead-media-indicator`, `psammead-media-player` and radio schedules components. +Media icons is an object containing styled SVG icons for video, audio, photogallery and guidance. Media icons are sized to work well alongside specific text with typography group `GEL Minion`. They are used in `psammead-media-indicator` and `psammead-media-player` components. ### Usage