From f12e8e0d9acf014de594953532be0c56707aa8d3 Mon Sep 17 00:00:00 2001 From: Phil Lee Date: Tue, 5 Nov 2019 14:12:31 +0000 Subject: [PATCH 01/27] WIP - add offScreenHeadline and Headline either side of aresMedia block --- .../__snapshots__/index.test.jsx.snap | 537 +++--------------- .../cpsAssetPage/addHeadlineBlock/index.js | 88 ++- .../addHeadlineBlock/index.test.js | 81 ++- 3 files changed, 230 insertions(+), 476 deletions(-) diff --git a/src/app/containers/CpsAssetPageMain/__snapshots__/index.test.jsx.snap b/src/app/containers/CpsAssetPageMain/__snapshots__/index.test.jsx.snap index 6411c3fb02a..9cee5a425e5 100644 --- a/src/app/containers/CpsAssetPageMain/__snapshots__/index.test.jsx.snap +++ b/src/app/containers/CpsAssetPageMain/__snapshots__/index.test.jsx.snap @@ -1,6 +1,95 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`CpsAssetPageMain should match snapshot for MAP 1`] = ` +.c0 { + margin: 0 auto; + background: #FDFDFD; + padding-bottom: 2rem; +} + +.c1 { + grid-column: 1 / span 6; +} + +@media (max-width:37.4375rem) { + .c0 { + grid-column-gap: 0.5rem; + } +} + +@media (min-width:37.5rem) { + .c0 { + grid-column-gap: 1rem; + } +} + +@media (max-width:62.9375rem) { + .c0 { + grid-template-columns: repeat(6,1fr); + } +} + +@media (min-width:63rem) and (max-width:80rem) { + .c0 { + grid-template-columns: 1fr repeat(8,minmax(0,6.75rem)) 1fr; + max-width: 45.5rem; + } +} + +@media (min-width:80rem) { + .c0 { + grid-template-columns: 1fr repeat(20,minmax(0,2.95rem)) 1fr; + max-width: 46.4rem; + } +} + +@supports (display:grid) { + .c0 { + display: grid; + max-width: initial; + margin: initial; + } +} + +@media (max-width:25rem) { + .c1 { + padding: 0 0.5rem; + } +} + +@media (min-width:25rem) and (max-width:62.9375rem) { + .c1 { + padding: 0 1rem; + } +} + +@media (min-width:37.5rem) { + .c1 { + grid-column: 1 / span 5; + max-width: 83.33%; + } +} + +@media (min-width:63rem) and (max-width:80rem) { + .c1 { + grid-column: 3 / span 5; + max-width: 37.75rem; + } +} + +@media (min-width:80rem) { + .c1 { + grid-column: 6 / span 10; + max-width: 38.5rem; + } +} + +@supports (display:grid) { + .c1 { + max-width: initial; + } +} + {"@context":"http://schema.org","@type":"Article","url":"https://www.test.bbc.com/pidgin/tori-49450859","publisher":{"@type":"NewsMediaOrganization","name":"BBC News Ìgbò","publishingPrinciples":"https://www.bbc.com/news/help-41670342","logo":{"@type":"ImageObject","width":1024,"height":576,"url":"https://news.files.bbci.co.uk/ws/img/logos/og/igbo.png"}},"image":{"@type":"ImageObject","width":1024,"height":576,"url":"https://news.files.bbci.co.uk/ws/img/logos/og/igbo.png"},"thumbnailUrl":"https://news.files.bbci.co.uk/ws/img/logos/og/igbo.png","mainEntityOfPage":{"@type":"WebPage","@id":"https://www.test.bbc.com/pidgin/tori-49450859","name":"Nigerian man Emeka Nelson don produce generator wey dey use only water"}} - - .c0 { - margin: 0 auto; - background: #FDFDFD; - padding-bottom: 2rem; -} - -.c1 { - grid-column: 1 / span 6; -} - -.c4 { - grid-column: 1 / span 6; -} - -.c3 { - font-size: 1.75rem; - line-height: 2rem; - font-family: Helmet,Freesans,Helvetica,Arial,sans-serif; - font-weight: 700; - font-style: normal; - color: #3F3F42; - margin: 0; - padding: 2rem 0; -} - -.c5 { - font-size: 0.875rem; - line-height: 1.125rem; - color: #6E6E73; - display: block; - font-family: Helmet,Freesans,Helvetica,Arial,sans-serif; - font-weight: 400; - font-style: normal; - padding-bottom: 0.25rem; -} - -.c5:last-child { - padding-bottom: 1rem; -} - -.c9 { - font-size: 0.9375rem; - line-height: 1.25rem; - font-family: Helmet,Freesans,Helvetica,Arial,sans-serif; - font-weight: 400; - font-style: normal; - color: #3F3F42; - padding-bottom: 1.5rem; - margin: 0; -} - -.c8 { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - border: 0; - overflow: hidden; -} - -.c7 { - padding-top: 56.25%; - position: relative; - overflow: hidden; -} - -.c6 { - margin-bottom: 1.5rem; -} - -@media (max-width:37.4375rem) { - .c0 { - grid-column-gap: 0.5rem; - } -} - -@media (min-width:37.5rem) { - .c0 { - grid-column-gap: 1rem; - } -} - -@media (max-width:62.9375rem) { - .c0 { - grid-template-columns: repeat(6,1fr); - } -} - -@media (min-width:63rem) and (max-width:80rem) { - .c0 { - grid-template-columns: 1fr repeat(8,minmax(0,6.75rem)) 1fr; - max-width: 45.5rem; - } -} - -@media (min-width:80rem) { - .c0 { - grid-template-columns: 1fr repeat(20,minmax(0,2.95rem)) 1fr; - max-width: 46.4rem; - } -} - -@supports (display:grid) { - .c0 { - display: grid; - max-width: initial; - margin: initial; - } -} - -@media (max-width:25rem) { - .c1 { - padding: 0 0.5rem; - } -} - -@media (min-width:25rem) and (max-width:62.9375rem) { - .c1 { - padding: 0 1rem; - } -} - -@media (min-width:37.5rem) { - .c1 { - grid-column: 1 / span 5; - max-width: 83.33%; - } -} - -@media (min-width:63rem) and (max-width:80rem) { - .c1 { - grid-column: 3 / span 5; - max-width: 37.75rem; - } -} - -@media (min-width:80rem) { - .c1 { - grid-column: 6 / span 10; - max-width: 38.5rem; - } -} - -@supports (display:grid) { - .c1 { - max-width: initial; - } -} - -@media (max-width:63rem) { - .c2 { - grid-column: 1 / span 6; - } -} - -@media (min-width:63rem) and (max-width:80rem) { - .c2 { - grid-column: 3 / span 6; - } -} - -@media (min-width:80rem) { - .c2 { - grid-column: 6 / span 12; - } -} - -@media (max-width:25rem) { - .c2 { - padding: 0 0.5rem; - } -} - -@media (min-width:25rem) and (max-width:62.9375rem) { - .c2 { - padding: 0 1rem; - } -} - -@media (max-width:25rem) { - .c4 { - padding: 0 0.5rem; - } -} - -@media (min-width:25rem) and (max-width:62.9375rem) { - .c4 { - padding: 0 1rem; - } -} - -@media (min-width:37.5rem) { - .c4 { - grid-column: 1 / span 5; - max-width: 83.33%; - } -} - -@media (min-width:63rem) and (max-width:80rem) { - .c4 { - grid-column: 3 / span 5; - max-width: 37.75rem; - } -} - -@media (min-width:80rem) { - .c4 { - grid-column: 2 / span 4; - max-width: 38.5rem; - } -} - -@supports (display:grid) { - .c4 { - max-width: initial; - } -} - -@media (min-width:20rem) and (max-width:37.4375rem) { - .c3 { - font-size: 2rem; - line-height: 2.25rem; - } -} - -@media (min-width:37.5rem) { - .c3 { - font-size: 2.75rem; - line-height: 3rem; - } -} - -@media (min-width:37.5rem) { - .c3 { - padding: 2.5rem 0; - } -} - -@media (min-width:20rem) and (max-width:37.4375rem) { - .c5 { - font-size: 0.875rem; - line-height: 1.125rem; - } -} - -@media (min-width:37.5rem) { - .c5 { - font-size: 0.8125rem; - line-height: 1rem; - } -} - -@media (min-width:20rem) and (max-width:37.4375rem) { - .c9 { - font-size: 1rem; - line-height: 1.375rem; - } -} - -@media (min-width:37.5rem) { - .c9 { - font-size: 1rem; - line-height: 1.375rem; - } -} - -@media (max-width:63rem) { - .c6 { - grid-column: 1 / span 6; - } -} - -@media (min-width:63rem) and (max-width:80rem) { - .c6 { - grid-column: 3 / span 6; - } -} - -@media (min-width:80rem) { - .c6 { - grid-column: 6 / span 12; - } -} - -@media (max-width:25rem) { - .c6 { - padding: 0 0.5rem; - } -} - -@media (min-width:25rem) and (max-width:62.9375rem) { - .c6 { - padding: 0 1rem; - } -} - -
+
-
-

- Nigerian man Emeka Nelson don produce generator wey dey use only water -

-
-
- - -
-
-
-