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

Create psammead grid wrappers #6618

Closed
wants to merge 20 commits into from
Closed

Create psammead grid wrappers #6618

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
a874cd6
Update snapshots
sadick254 May 22, 2020
6c11413
Make grids
sadick254 May 22, 2020
89b276d
Fix medium container
sadick254 May 22, 2020
1649b82
Fix MediaAssetPage
sadick254 May 22, 2020
62de975
Update GridItem
sadick254 May 22, 2020
1be69f9
Update GridItemLarge
sadick254 May 22, 2020
4b7d3e6
Fix GridItemMedium
sadick254 May 22, 2020
a9bb8af
Refactor
sadick254 May 22, 2020
8803974
🔆 Apply grid fallbacks
sadick254 May 22, 2020
9e253c8
🤖 Resolve conflicts
sadick254 May 22, 2020
69f67c3
Merge branch 'latest' into create-psammead-grid-wrappers
May 26, 2020
572176c
Rename MediumGridWrapper to GridWrapperMedium
sadick254 May 26, 2020
76683a0
Merge branch 'create-psammead-grid-wrappers' of github.com:bbc/simorg…
sadick254 May 26, 2020
6af6c48
Remove GridItemMedium
sadick254 May 26, 2020
a18e3f5
Merge branch 'latest' into create-psammead-grid-wrappers
May 26, 2020
782a5c7
Merge branch 'create-psammead-grid-wrappers' of github.com:bbc/simorg…
sadick254 May 26, 2020
8fee084
Hold off handling vertical spacing in grid
sadick254 May 26, 2020
12c290c
Merge branch 'latest' of github.com:bbc/simorgh into create-psammead-…
sadick254 May 26, 2020
482f3e7
Merge branch 'latest' into create-psammead-grid-wrappers
May 27, 2020
38d6c85
Merge branch 'latest' into create-psammead-grid-wrappers
May 27, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
7 changes: 2 additions & 5 deletions src/app/containers/ArticleTimestamp/index.jsx
View file
Open in desktop
@@ -1,10 +1,7 @@
import React, { useContext } from 'react';
import { number, bool, string } from 'prop-types';
import Timestamp from '@bbc/psammead-timestamp-container';
import {
PopOutGridItemMedium,
GridItemConstrainedMedium,
} from '#lib/styledGrid';
import { PopOutGridItemMedium, GridItem } from '#lib/styledGrid';
import { ServiceContext } from '#contexts/ServiceContext';
import { formatDateNumeric } from './timeFormats';
import {
Expand Down Expand Up @@ -63,7 +60,7 @@ const ArticleTimestamp = ({
prefix: articleTimestampPrefix,
};

const Wrapper = popOut ? PopOutGridItemMedium : GridItemConstrainedMedium;
const Wrapper = popOut ? PopOutGridItemMedium : GridItem;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was trying to understand why this had changed from GridItemConstrainedMedium to GridItem and I came across GridItemMedium.

What is the difference between GridItem and GridItemMedium? They appear to be using a very similar configuration.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The difference was that GridItem applied margins and GridItemMedium had no margins. I have removed GridItemMedium and added enableMargins prop on GridItem


const displayLastUpdatedTimestamp = shouldDisplayLastUpdatedTimestamp({
minutesTolerance,
Expand Down
8 changes: 4 additions & 4 deletions src/app/containers/CpsFeaturesAnalysis/__snapshots__/index.test.jsx.snap
View file
Open in desktop
Expand Up @@ -4,11 +4,11 @@ exports[`CpsRelatedContent should render Story Feature components when given app
<DocumentFragment>
<section
aria-labelledby="features-analysis-heading"
class="GridWrapper-sc-12lwanc-0 hgpaqH"
class="GridWrapper-sc-12lwanc-1 iLHPXV"
role="region"
>
<div
class="GridItemConstrainedLarge-sc-12lwanc-4 LegacyGridItemConstrainedLarge-opyob2-1 curbRF"
class="GridItemConstrainedLarge-sc-12lwanc-5 LegacyGridItemConstrainedLarge-opyob2-1 curbRF"
>
<div
class="SectionLabelWrapper-sc-1x4gwjz-1 iLMrCu StyledSectionLabel-opyob2-2 jpnPtT"
Expand Down Expand Up @@ -158,11 +158,11 @@ exports[`CpsRelatedContent should render Story Promo components without <ul> whe
<DocumentFragment>
<section
aria-labelledby="features-analysis-heading"
class="GridWrapper-sc-12lwanc-0 hgpaqH"
class="GridWrapper-sc-12lwanc-1 iLHPXV"
role="region"
>
<div
class="GridItemConstrainedLarge-sc-12lwanc-4 LegacyGridItemConstrainedLarge-opyob2-1 curbRF"
class="GridItemConstrainedLarge-sc-12lwanc-5 LegacyGridItemConstrainedLarge-opyob2-1 curbRF"
>
<div
class="SectionLabelWrapper-sc-1x4gwjz-1 iLMrCu StyledSectionLabel-opyob2-2 jpnPtT"
Expand Down
8 changes: 4 additions & 4 deletions src/app/containers/CpsRelatedContent/__snapshots__/index.test.jsx.snap
View file
Open in desktop
Expand Up @@ -4,11 +4,11 @@ exports[`CpsRelatedContent should render Story Promo components when given appro
<DocumentFragment>
<section
aria-labelledby="related-content-heading"
class="GridWrapper-sc-12lwanc-0 hgpaqH"
class="GridWrapper-sc-12lwanc-1 iLHPXV"
role="region"
>
<div
class="GridItemConstrainedLarge-sc-12lwanc-4 LegacyGridItemConstrainedLarge-opyob2-1 curbRF"
class="GridItemConstrainedLarge-sc-12lwanc-5 LegacyGridItemConstrainedLarge-opyob2-1 curbRF"
>
<div
class="SectionLabelWrapper-sc-1x4gwjz-1 iLMrCu StyledSectionLabel-opyob2-2 jpnPtT"
Expand Down Expand Up @@ -227,11 +227,11 @@ exports[`CpsRelatedContent should render Story Promo components without <ul> whe
<DocumentFragment>
<section
aria-labelledby="related-content-heading"
class="GridWrapper-sc-12lwanc-0 hgpaqH"
class="GridWrapper-sc-12lwanc-1 iLHPXV"
role="region"
>
<div
class="GridItemConstrainedLarge-sc-12lwanc-4 LegacyGridItemConstrainedLarge-opyob2-1 curbRF"
class="GridItemConstrainedLarge-sc-12lwanc-5 LegacyGridItemConstrainedLarge-opyob2-1 curbRF"
>
<div
class="SectionLabelWrapper-sc-1x4gwjz-1 iLMrCu StyledSectionLabel-opyob2-2 jpnPtT"
Expand Down
105 changes: 84 additions & 21 deletions src/app/containers/CpsText/__snapshots__/index.test.jsx.snap
View file
Open in desktop
Expand Up @@ -12,11 +12,11 @@ exports[`CpsTextContainer with data should render correctly 1`] = `
margin: 0;
}

.c0 {
.c2 {
grid-column: 1 / span 6;
}

.c3 {
.c4 {
font-size: 0.9375rem;
line-height: 1.25rem;
font-family: ReithSans,Helvetica,Arial,sans-serif;
Expand All @@ -26,19 +26,19 @@ exports[`CpsTextContainer with data should render correctly 1`] = `
list-style-type: none;
}

.c3 > li::before {
.c4 > li::before {
content: ' ';
display: inline-block;
width: 2rem;
background: url('data:image/svg+xml,%3Csvg%20height%3D%2710%27%20width%3D%2710%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cstyle%3E%40media%20screen%20and%20%28-ms-high-contrast%3A%20active%29%7Bsvg%7Bfill%3A%20%23fff%7D%7D%3C%2Fstyle%3E%3Ccircle%20cx%3D%275%27%20cy%3D%275%27%20r%3D%273%27%3E%3C%2Fcircle%3E%3C%2Fsvg%3E') no-repeat center;
margin-left: -2rem;
}

.c4 {
.c5 {
margin-bottom: 1rem;
}

.c2 {
.c3 {
margin-bottom: 1.5rem;
}

Expand All @@ -56,54 +56,112 @@ exports[`CpsTextContainer with data should render correctly 1`] = `
}
}

@media (max-width:25rem) {
@media (max-width:14.9375rem) {
.c0 {
padding: 0 0.5rem;
width: calc(100%);
display: inline-block;
vertical-align: top;
}
}

@media (min-width:25rem) and (max-width:62.9375rem) {
@media (min-width:15rem) and (max-width:24.9375rem) {
.c0 {
padding: 0 0.5rem;
width: calc(100%);
display: inline-block;
vertical-align: top;
}
}

@media (min-width:25rem) and (max-width:37.4375rem) {
.c0 {
padding: 0 1rem;
width: calc(100%);
display: inline-block;
vertical-align: top;
}
}

@media (min-width:37.5rem) {
@media (min-width:37.5rem) and (max-width:62.9375rem) {
.c0 {
padding: 0 1rem;
width: calc(83.33333333333333%);
display: inline-block;
vertical-align: top;
}
}

@media (min-width:63rem) and (max-width:79.9375rem) {
.c0 {
width: calc(83.33333333333333%);
display: inline-block;
vertical-align: top;
}
}

@media (min-width:80rem) {
.c0 {
width: calc(83.33333333333333%);
display: inline-block;
vertical-align: top;
}
}

@supports (display:grid) {
.c0 {
display: block;
}
}

@media (max-width:25rem) {
.c2 {
padding: 0 0.5rem;
}
}

@media (min-width:25rem) and (max-width:62.9375rem) {
.c2 {
padding: 0 1rem;
}
}

@media (min-width:37.5rem) {
.c2 {
grid-column: 1 / span 5;
max-width: 83.33%;
}
}

@media (min-width:63rem) and (max-width:79.9375rem) {
.c0 {
.c2 {
grid-column: 3 / span 5;
max-width: 37.75rem;
}
}

@media (min-width:80rem) {
.c0 {
.c2 {
grid-column: 6 / span 10;
max-width: 38.5rem;
}
}

@supports (display:grid) {
.c0 {
.c2 {
max-width: initial;
}
}

@media (min-width:20rem) and (max-width:37.4375rem) {
.c3 {
.c4 {
font-size: 1rem;
line-height: 1.375rem;
}
}

@media (min-width:37.5rem) {
.c3 {
.c4 {
font-size: 1rem;
line-height: 1.375rem;
}
Expand All @@ -112,6 +170,7 @@ exports[`CpsTextContainer with data should render correctly 1`] = `
<div>
<div
class="c0"
dir="ltr"
>
<p
class="c1"
Expand All @@ -121,6 +180,7 @@ exports[`CpsTextContainer with data should render correctly 1`] = `
</div>
<div
class="c0"
dir="ltr"
>
<p
class="c1"
Expand All @@ -130,6 +190,7 @@ exports[`CpsTextContainer with data should render correctly 1`] = `
</div>
<div
class="c0"
dir="ltr"
>
<p
class="c1"
Expand All @@ -139,6 +200,7 @@ exports[`CpsTextContainer with data should render correctly 1`] = `
</div>
<div
class="c0"
dir="ltr"
>
<p
class="c1"
Expand All @@ -148,6 +210,7 @@ exports[`CpsTextContainer with data should render correctly 1`] = `
</div>
<div
class="c0"
dir="ltr"
>
<p
class="c1"
Expand All @@ -156,18 +219,18 @@ exports[`CpsTextContainer with data should render correctly 1`] = `
</p>
</div>
<div
class="c0"
class="c2"
>
<div
class="c2"
class="c3"
>
<ul
class="c3"
class="c4"
dir="ltr"
role="list"
>
<li
class="c4"
class="c5"
role="listitem"
>
This is a list item
Expand All @@ -176,18 +239,18 @@ exports[`CpsTextContainer with data should render correctly 1`] = `
</div>
</div>
<div
class="c0"
class="c2"
>
<div
class="c2"
class="c3"
>
<ul
class="c3"
class="c4"
dir="ltr"
role="list"
>
<li
class="c4"
class="c5"
role="listitem"
>
This is a list item
Expand Down
8 changes: 4 additions & 4 deletions src/app/containers/CpsTopStories/__snapshots__/index.test.jsx.snap
View file
Open in desktop
Expand Up @@ -4,11 +4,11 @@ exports[`CpsRelatedContent should render Top Stories components when given appro
<DocumentFragment>
<section
aria-labelledby="top-stories-heading"
class="GridWrapper-sc-12lwanc-0 hgpaqH"
class="GridWrapper-sc-12lwanc-1 iLHPXV"
role="region"
>
<div
class="GridItemConstrainedLarge-sc-12lwanc-4 LegacyGridItemConstrainedLarge-opyob2-1 curbRF"
class="GridItemConstrainedLarge-sc-12lwanc-5 LegacyGridItemConstrainedLarge-opyob2-1 curbRF"
>
<div
class="SectionLabelWrapper-sc-1x4gwjz-1 iLMrCu StyledSectionLabel-opyob2-2 jpnPtT"
Expand Down Expand Up @@ -120,11 +120,11 @@ exports[`CpsRelatedContent should render Top Stories components when without <ul
<DocumentFragment>
<section
aria-labelledby="top-stories-heading"
class="GridWrapper-sc-12lwanc-0 hgpaqH"
class="GridWrapper-sc-12lwanc-1 iLHPXV"
role="region"
>
<div
class="GridItemConstrainedLarge-sc-12lwanc-4 LegacyGridItemConstrainedLarge-opyob2-1 curbRF"
class="GridItemConstrainedLarge-sc-12lwanc-5 LegacyGridItemConstrainedLarge-opyob2-1 curbRF"
>
<div
class="SectionLabelWrapper-sc-1x4gwjz-1 iLMrCu StyledSectionLabel-opyob2-2 jpnPtT"
Expand Down