Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Subheadline padding adjustment #12163

Merged
merged 2 commits into from
Nov 12, 2024
Merged

Subheadline padding adjustment #12163

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f01996a
Subheadline padding adjustment
amoore108 Nov 12, 2024
74a020d
Add `scroll-margin-top` to add space above subheading on scroll
amoore108 Nov 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 6 additions & 4 deletions src/app/legacy/containers/Headings/__snapshots__/index.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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);
}
}

Expand Down Expand Up @@ -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) {
Expand All @@ -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);
}
}

Expand Down
20 changes: 12 additions & 8 deletions src/app/legacy/psammead/psammead-headings/src/__snapshots__/index.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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);
}
}

Expand Down Expand Up @@ -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) {
Expand All @@ -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);
}
}

Expand Down Expand Up @@ -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) {
Expand All @@ -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);
}
}

Expand Down Expand Up @@ -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) {
Expand All @@ -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);
}
}

Expand Down
10 changes: 8 additions & 2 deletions src/app/legacy/psammead/psammead-headings/src/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
5 changes: 3 additions & 2 deletions src/app/pages/MediaArticlePage/__snapshots__/index.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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);
}
}

Expand Down
Loading