From f01996aad73951663c855f2d52352fc0028ab1b1 Mon Sep 17 00:00:00 2001 From: Aaron Moore Date: Tue, 12 Nov 2024 12:34:22 +0000 Subject: [PATCH 1/2] Subheadline padding adjustment --- .../__snapshots__/index.test.jsx.snap | 10 ++++++---- .../src/__snapshots__/index.test.jsx.snap | 20 +++++++++++-------- .../psammead/psammead-headings/src/index.jsx | 10 ++++++++-- .../__snapshots__/index.test.tsx.snap | 5 +++-- 4 files changed, 29 insertions(+), 16 deletions(-) diff --git a/src/app/legacy/containers/Headings/__snapshots__/index.test.jsx.snap b/src/app/legacy/containers/Headings/__snapshots__/index.test.jsx.snap index 748b8eaa6e8..3971f29dfd1 100644 --- a/src/app/legacy/containers/Headings/__snapshots__/index.test.jsx.snap +++ b/src/app/legacy/containers/Headings/__snapshots__/index.test.jsx.snap @@ -568,7 +568,8 @@ exports[`Headings with plain text subheadline should render h2 containing correc font-weight: 700; font-style: normal; color: #141414; - margin: 1.5rem 0; + padding: 0.5rem 0; + margin: calc(1.5rem - 0.5rem) 0; } @media (min-width: 20rem) and (max-width: 37.4375rem) { @@ -587,7 +588,7 @@ exports[`Headings with plain text subheadline should render h2 containing correc @media (min-width: 37.5rem) { .emotion-2 { - margin-top: 2rem; + margin-top: calc(2rem - 0.5rem); } } @@ -1547,7 +1548,8 @@ exports[`Headings with subheadline data should render correctly 1`] = ` font-weight: 700; font-style: normal; color: #141414; - margin: 1.5rem 0; + padding: 0.5rem 0; + margin: calc(1.5rem - 0.5rem) 0; } @media (min-width: 20rem) and (max-width: 37.4375rem) { @@ -1566,7 +1568,7 @@ exports[`Headings with subheadline data should render correctly 1`] = ` @media (min-width: 37.5rem) { .emotion-2 { - margin-top: 2rem; + margin-top: calc(2rem - 0.5rem); } } diff --git a/src/app/legacy/psammead/psammead-headings/src/__snapshots__/index.test.jsx.snap b/src/app/legacy/psammead/psammead-headings/src/__snapshots__/index.test.jsx.snap index 20a152437a1..b9aae91a57a 100644 --- a/src/app/legacy/psammead/psammead-headings/src/__snapshots__/index.test.jsx.snap +++ b/src/app/legacy/psammead/psammead-headings/src/__snapshots__/index.test.jsx.snap @@ -134,7 +134,8 @@ exports[`SubHeading component should render correctly 1`] = ` font-weight: 700; font-style: normal; color: #141414; - margin: 1.5rem 0; + padding: 0.5rem 0; + margin: calc(1.5rem - 0.5rem) 0; } @media (min-width: 20rem) and (max-width: 37.4375rem) { @@ -153,7 +154,7 @@ exports[`SubHeading component should render correctly 1`] = ` @media (min-width: 37.5rem) { .emotion-0 { - margin-top: 2rem; + margin-top: calc(2rem - 0.5rem); } } @@ -181,7 +182,8 @@ exports[`SubHeading component should render correctly on page types that support font-weight: 700; font-style: normal; color: #F6F6F6; - margin: 1.5rem 0; + padding: 0.5rem 0; + margin: calc(1.5rem - 0.5rem) 0; } @media (min-width: 20rem) and (max-width: 37.4375rem) { @@ -200,7 +202,7 @@ exports[`SubHeading component should render correctly on page types that support @media (min-width: 37.5rem) { .emotion-0 { - margin-top: 2rem; + margin-top: calc(2rem - 0.5rem); } } @@ -228,7 +230,8 @@ exports[`SubHeading component should render correctly with an ID 1`] = ` font-weight: 700; font-style: normal; color: #141414; - margin: 1.5rem 0; + padding: 0.5rem 0; + margin: calc(1.5rem - 0.5rem) 0; } @media (min-width: 20rem) and (max-width: 37.4375rem) { @@ -247,7 +250,7 @@ exports[`SubHeading component should render correctly with an ID 1`] = ` @media (min-width: 37.5rem) { .emotion-0 { - margin-top: 2rem; + margin-top: calc(2rem - 0.5rem); } } @@ -276,7 +279,8 @@ exports[`SubHeading component should render correctly with arabic script typogra font-weight: 700; font-style: normal; color: #141414; - margin: 1.5rem 0; + padding: 0.5rem 0; + margin: calc(1.5rem - 0.5rem) 0; } @media (min-width: 20rem) and (max-width: 37.4375rem) { @@ -295,7 +299,7 @@ exports[`SubHeading component should render correctly with arabic script typogra @media (min-width: 37.5rem) { .emotion-0 { - margin-top: 2rem; + margin-top: calc(2rem - 0.5rem); } } diff --git a/src/app/legacy/psammead/psammead-headings/src/index.jsx b/src/app/legacy/psammead/psammead-headings/src/index.jsx index 65c3c680816..1eb2f6bd371 100644 --- a/src/app/legacy/psammead/psammead-headings/src/index.jsx +++ b/src/app/legacy/psammead/psammead-headings/src/index.jsx @@ -28,14 +28,20 @@ export const Headline = styled.h1` } `; +const SUBHEADING_PADDING = '0.5rem'; + export const SubHeading = styled.h2` ${({ script }) => script && getTrafalgar(script)}; ${({ service }) => getSansBold(service)} color: ${({ theme }) => theme.isDarkUi ? theme.palette.GREY_2 : theme.palette.GREY_10}; - margin: ${GEL_SPACING_TRPL} 0; + + padding: ${SUBHEADING_PADDING} 0; + margin: calc(${GEL_SPACING_TRPL} - ${SUBHEADING_PADDING}) 0; + ${MEDIA_QUERY_TYPOGRAPHY.LAPTOP_AND_LARGER} { - margin-top: ${GEL_SPACING_QUAD}; + padding-top ${SUBHEADING_PADDING}; + margin-top: calc(${GEL_SPACING_QUAD} - ${SUBHEADING_PADDING}); } :focus-visible { diff --git a/src/app/pages/MediaArticlePage/__snapshots__/index.test.tsx.snap b/src/app/pages/MediaArticlePage/__snapshots__/index.test.tsx.snap index af9365a08a5..f442ed72fa5 100644 --- a/src/app/pages/MediaArticlePage/__snapshots__/index.test.tsx.snap +++ b/src/app/pages/MediaArticlePage/__snapshots__/index.test.tsx.snap @@ -635,7 +635,8 @@ exports[`MediaArticlePage should render a news article correctly 1`] = ` font-weight: 700; font-style: normal; color: #141414; - margin: 1.5rem 0; + padding: 0.5rem 0; + margin: calc(1.5rem - 0.5rem) 0; } @media (min-width: 20rem) and (max-width: 37.4375rem) { @@ -654,7 +655,7 @@ exports[`MediaArticlePage should render a news article correctly 1`] = ` @media (min-width: 37.5rem) { .emotion-31 { - margin-top: 2rem; + margin-top: calc(2rem - 0.5rem); } } From 74a020dcbc79e7b5b8fa863e28f6c6059fa3fa44 Mon Sep 17 00:00:00 2001 From: Aaron Moore Date: Tue, 12 Nov 2024 13:09:34 +0000 Subject: [PATCH 2/2] Add `scroll-margin-top` to add space above subheading on scroll --- .../containers/Headings/__snapshots__/index.test.jsx.snap | 2 ++ .../psammead-headings/src/__snapshots__/index.test.jsx.snap | 4 ++++ src/app/legacy/psammead/psammead-headings/src/index.jsx | 2 ++ .../pages/MediaArticlePage/__snapshots__/index.test.tsx.snap | 1 + 4 files changed, 9 insertions(+) diff --git a/src/app/legacy/containers/Headings/__snapshots__/index.test.jsx.snap b/src/app/legacy/containers/Headings/__snapshots__/index.test.jsx.snap index 3971f29dfd1..2f92289db0e 100644 --- a/src/app/legacy/containers/Headings/__snapshots__/index.test.jsx.snap +++ b/src/app/legacy/containers/Headings/__snapshots__/index.test.jsx.snap @@ -570,6 +570,7 @@ exports[`Headings with plain text subheadline should render h2 containing correc color: #141414; padding: 0.5rem 0; margin: calc(1.5rem - 0.5rem) 0; + scroll-margin-top: 1rem; } @media (min-width: 20rem) and (max-width: 37.4375rem) { @@ -1550,6 +1551,7 @@ exports[`Headings with subheadline data should render correctly 1`] = ` color: #141414; padding: 0.5rem 0; margin: calc(1.5rem - 0.5rem) 0; + scroll-margin-top: 1rem; } @media (min-width: 20rem) and (max-width: 37.4375rem) { diff --git a/src/app/legacy/psammead/psammead-headings/src/__snapshots__/index.test.jsx.snap b/src/app/legacy/psammead/psammead-headings/src/__snapshots__/index.test.jsx.snap index b9aae91a57a..277632b3c10 100644 --- a/src/app/legacy/psammead/psammead-headings/src/__snapshots__/index.test.jsx.snap +++ b/src/app/legacy/psammead/psammead-headings/src/__snapshots__/index.test.jsx.snap @@ -136,6 +136,7 @@ exports[`SubHeading component should render correctly 1`] = ` color: #141414; padding: 0.5rem 0; margin: calc(1.5rem - 0.5rem) 0; + scroll-margin-top: 1rem; } @media (min-width: 20rem) and (max-width: 37.4375rem) { @@ -184,6 +185,7 @@ exports[`SubHeading component should render correctly on page types that support color: #F6F6F6; padding: 0.5rem 0; margin: calc(1.5rem - 0.5rem) 0; + scroll-margin-top: 1rem; } @media (min-width: 20rem) and (max-width: 37.4375rem) { @@ -232,6 +234,7 @@ exports[`SubHeading component should render correctly with an ID 1`] = ` color: #141414; padding: 0.5rem 0; margin: calc(1.5rem - 0.5rem) 0; + scroll-margin-top: 1rem; } @media (min-width: 20rem) and (max-width: 37.4375rem) { @@ -281,6 +284,7 @@ exports[`SubHeading component should render correctly with arabic script typogra color: #141414; padding: 0.5rem 0; margin: calc(1.5rem - 0.5rem) 0; + scroll-margin-top: 1rem; } @media (min-width: 20rem) and (max-width: 37.4375rem) { diff --git a/src/app/legacy/psammead/psammead-headings/src/index.jsx b/src/app/legacy/psammead/psammead-headings/src/index.jsx index 1eb2f6bd371..5f5b576fd87 100644 --- a/src/app/legacy/psammead/psammead-headings/src/index.jsx +++ b/src/app/legacy/psammead/psammead-headings/src/index.jsx @@ -1,5 +1,6 @@ import styled from '@emotion/styled'; import { + GEL_SPACING_DBL, GEL_SPACING_TRPL, GEL_SPACING_QUAD, GEL_SPACING_QUIN, @@ -38,6 +39,7 @@ export const SubHeading = styled.h2` padding: ${SUBHEADING_PADDING} 0; margin: calc(${GEL_SPACING_TRPL} - ${SUBHEADING_PADDING}) 0; + scroll-margin-top: ${GEL_SPACING_DBL}; ${MEDIA_QUERY_TYPOGRAPHY.LAPTOP_AND_LARGER} { padding-top ${SUBHEADING_PADDING}; diff --git a/src/app/pages/MediaArticlePage/__snapshots__/index.test.tsx.snap b/src/app/pages/MediaArticlePage/__snapshots__/index.test.tsx.snap index f442ed72fa5..39d9e962a82 100644 --- a/src/app/pages/MediaArticlePage/__snapshots__/index.test.tsx.snap +++ b/src/app/pages/MediaArticlePage/__snapshots__/index.test.tsx.snap @@ -637,6 +637,7 @@ exports[`MediaArticlePage should render a news article correctly 1`] = ` color: #141414; padding: 0.5rem 0; margin: calc(1.5rem - 0.5rem) 0; + scroll-margin-top: 1rem; } @media (min-width: 20rem) and (max-width: 37.4375rem) {