diff --git a/__tests__/__snapshots__/snapshots.test.js.snap b/__tests__/__snapshots__/snapshots.test.js.snap index e944b16cc..f5d3efc88 100644 --- a/__tests__/__snapshots__/snapshots.test.js.snap +++ b/__tests__/__snapshots__/snapshots.test.js.snap @@ -594,7 +594,9 @@ exports[`@financial-times/x-podcast-launchers renders a default Example x-podcas
Get updates for new episodes
diff --git a/components/x-podcast-launchers/src/PodcastLaunchers.scss b/components/x-podcast-launchers/src/PodcastLaunchers.scss index adce29483..ec5d4e9c7 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'; $o-forms-is-silent: true; @import 'o-forms/main'; @@ -53,11 +55,24 @@ $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 oButtonsContent($opts: ( 'type': 'primary', 'size': 'big', )); + width: 100%; margin-top: 8px; } diff --git a/components/x-podcast-launchers/src/__tests__/__snapshots__/PodcastLaunchers.test.jsx.snap b/components/x-podcast-launchers/src/__tests__/__snapshots__/PodcastLaunchers.test.jsx.snap index bf594e369..ce9568fa9 100644 --- a/components/x-podcast-launchers/src/__tests__/__snapshots__/PodcastLaunchers.test.jsx.snap +++ b/components/x-podcast-launchers/src/__tests__/__snapshots__/PodcastLaunchers.test.jsx.snap @@ -10,7 +10,9 @@ exports[`PodcastLaunchers should render the app links based on concept Id 1`] = Subscribe via your installed podcast app