From 8d808b734dd111f58082e05b39348596fb847fb8 Mon Sep 17 00:00:00 2001 From: Alice Bartlett Date: Tue, 19 Nov 2019 16:29:12 +0000 Subject: [PATCH 01/11] Hide podcast app launchers on desktop We have had customer feedback that these buttons don't do anything on desktop and it is a concern that we are losing out on opportunities for engagement by showing people broken buttons. This commit: - Uses a media query to hide the app launcher buttons on desktop as they don't work - Introduces an oGrid dependency to get the standard breakpoint for desktop --- components/x-podcast-launchers/bower.json | 3 ++- components/x-podcast-launchers/src/PodcastLaunchers.scss | 5 +++++ 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/components/x-podcast-launchers/bower.json b/components/x-podcast-launchers/bower.json index b7c3e50cb..efe18de22 100644 --- a/components/x-podcast-launchers/bower.json +++ b/components/x-podcast-launchers/bower.json @@ -4,6 +4,7 @@ "main": "dist/PodcastLaunchers.es5.js", "private": true, "dependencies": { - "o-typography": "^5.12.0" + "o-typography": "^5.12.0", + "o-grid": "^4.5.3" } } diff --git a/components/x-podcast-launchers/src/PodcastLaunchers.scss b/components/x-podcast-launchers/src/PodcastLaunchers.scss index 2afc1ae2a..8f1ce64c1 100644 --- a/components/x-podcast-launchers/src/PodcastLaunchers.scss +++ b/components/x-podcast-launchers/src/PodcastLaunchers.scss @@ -1,5 +1,7 @@ $o-typography-is-silent: true; +$o-grid-is-silent: true; @import 'o-typography/main'; +@import 'o-grid/main'; :global { @import "~@financial-times/x-follow-button/dist/FollowButton"; @@ -48,6 +50,9 @@ $o-typography-is-silent: true; } .podcastAppLink { + @include oGridRespondTo(L) { + display: none; + } width: 100%; margin-top: 8px; } From 340859803e579ba01e4b6415cbfba9d8fce4ba65 Mon Sep 17 00:00:00 2001 From: Alice Bartlett Date: Tue, 7 Jan 2020 14:33:28 +0000 Subject: [PATCH 02/11] fix bower.json --- components/x-podcast-launchers/bower.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/x-podcast-launchers/bower.json b/components/x-podcast-launchers/bower.json index 7ced4f5f3..9cd5a5bb8 100644 --- a/components/x-podcast-launchers/bower.json +++ b/components/x-podcast-launchers/bower.json @@ -4,7 +4,7 @@ "main": "dist/PodcastLaunchers.es5.js", "private": true, "dependencies": { - "o-grid": "^4.5.3" + "o-grid": "^4.5.3", "o-typography": "^6.0.1", "o-forms": "^8.0.0", "o-buttons": "^6.0.2" From d801c6ce14e18cc828a69b3df7d8401943cb7a99 Mon Sep 17 00:00:00 2001 From: Alice Bartlett Date: Wed, 8 Jan 2020 11:14:59 +0000 Subject: [PATCH 03/11] Use a prop to determine podcast launcher visibility As part of a bug raised via editorial, we need to hide the podcast app links on desktop because they don't do anything. To do this I have used a combination of @media query to show at narrow screens (ie when the website is viewed on a mobile) and an isApp prop to always show it if you're viewing in the app wrapper. --- components/x-podcast-launchers/readme.md | 1 + .../src/PodcastLaunchers.jsx | 53 +++++++++---------- .../src/PodcastLaunchers.scss | 14 +++-- .../x-podcast-launchers/stories/example.js | 3 +- 4 files changed, 40 insertions(+), 31 deletions(-) diff --git a/components/x-podcast-launchers/readme.md b/components/x-podcast-launchers/readme.md index 26924cb41..e8adbf61c 100644 --- a/components/x-podcast-launchers/readme.md +++ b/components/x-podcast-launchers/readme.md @@ -55,5 +55,6 @@ Feature | Type | Required | Notes `acastRSSHost` | String | Yes | e.g. 'https://acast.access.com' `conceptId` | String | Yes | `renderFollowButton` | Function | No | Optional render prop for the follow button +`isApp` | Boolean | No | Defaults to true. Currently only used to hide podcast app launchers on wide screen + desktop where the links do nothing because there is no app to launch. Additional props such as the `conceptName` may be required by x-follow-button. Documentation for these is available over in the component's readme. diff --git a/components/x-podcast-launchers/src/PodcastLaunchers.jsx b/components/x-podcast-launchers/src/PodcastLaunchers.jsx index 21a70c097..ff5e4324c 100644 --- a/components/x-podcast-launchers/src/PodcastLaunchers.jsx +++ b/components/x-podcast-launchers/src/PodcastLaunchers.jsx @@ -48,39 +48,38 @@ class PodcastLaunchers extends Component { render() { const { rssUrl } = this.state; - const { conceptId, conceptName, csrfToken, isFollowed, renderFollowButton } = this.props + const { conceptId, conceptName, csrfToken, isFollowed, renderFollowButton, isApp } = this.props const followButton = typeof renderFollowButton === 'function' ? renderFollowButton : defaultFollowButtonRender; return rssUrl && (

Subscribe via your installed podcast app

-
    - {generateAppLinks(rssUrl).map(({ name, url, trackingId }) => ( -
  • - - {name} - -
    • - ))} - -
  • - - - - -
    • -
+
    + {generateAppLinks(rssUrl).map(({ name, url, trackingId }) => ( +
  • + + {name} + +
    • + ))} +
  • + + + + +
    • +

Can’t see your podcast app?

Get updates for new episodes

diff --git a/components/x-podcast-launchers/src/PodcastLaunchers.scss b/components/x-podcast-launchers/src/PodcastLaunchers.scss index a3f860711..ec5d4e9c7 100644 --- a/components/x-podcast-launchers/src/PodcastLaunchers.scss +++ b/components/x-podcast-launchers/src/PodcastLaunchers.scss @@ -55,10 +55,18 @@ $o-buttons-is-silent: true; margin: 0 0 24px; } + +/* + Hide podcast links at a wide screen width. We only do this when the running application + isn't the App so that on any native device you'll always be able to launch a podcast app +*/ +.hidePodcastLinkAtWide { + @include oGridRespondTo(L) { + display: none; + } +} + .podcastAppLink { - @include oGridRespondTo(L) { - display: none; - } @include oButtonsContent($opts: ( 'type': 'primary', diff --git a/components/x-podcast-launchers/stories/example.js b/components/x-podcast-launchers/stories/example.js index a88465dd6..74c43791d 100644 --- a/components/x-podcast-launchers/stories/example.js +++ b/components/x-podcast-launchers/stories/example.js @@ -8,7 +8,8 @@ exports.data = { isFollowed: false, csrfToken: 'token', acastRSSHost: 'https://access.acast.com', - acastAccessToken: 'abc-123' + acastAccessToken: 'abc-123', + isApp: false, }; // This reference is only required for hot module loading in development From dcf02c250fb0b9b0be8f068878f071646befae1d Mon Sep 17 00:00:00 2001 From: Alice Bartlett Date: Wed, 8 Jan 2020 11:26:25 +0000 Subject: [PATCH 04/11] Fix bower conflict --- components/x-podcast-launchers/bower.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/x-podcast-launchers/bower.json b/components/x-podcast-launchers/bower.json index 9cd5a5bb8..c625e005f 100644 --- a/components/x-podcast-launchers/bower.json +++ b/components/x-podcast-launchers/bower.json @@ -4,7 +4,7 @@ "main": "dist/PodcastLaunchers.es5.js", "private": true, "dependencies": { - "o-grid": "^4.5.3", + "o-grid": "^5.0.2", "o-typography": "^6.0.1", "o-forms": "^8.0.0", "o-buttons": "^6.0.2" From f590a4311e639d0fbf852a638f0e4cd7ef38f2ac Mon Sep 17 00:00:00 2001 From: Alice Bartlett Date: Wed, 8 Jan 2020 15:50:04 +0000 Subject: [PATCH 05/11] Fix variable name --- components/x-podcast-launchers/src/PodcastLaunchers.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/x-podcast-launchers/src/PodcastLaunchers.jsx b/components/x-podcast-launchers/src/PodcastLaunchers.jsx index ff5e4324c..d202f8225 100644 --- a/components/x-podcast-launchers/src/PodcastLaunchers.jsx +++ b/components/x-podcast-launchers/src/PodcastLaunchers.jsx @@ -56,7 +56,7 @@ class PodcastLaunchers extends Component {

Subscribe via your installed podcast app