Skip to content
This repository has been archived by the owner on Aug 13, 2023. It is now read-only.

Story Promo - Fallback spacing for Leading promo #3150

Merged
merged 17 commits into from
Feb 20, 2020
Merged

Story Promo - Fallback spacing for Leading promo #3150

Show file tree
Hide file tree
Changes from 12 commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
27843c5
Fix width for leading promo for browsers that do not support CSS Grid
sareh Feb 17, 2020
448ccac
Update snapshots
sareh Feb 17, 2020
f97b761
Update the media query
sareh Feb 18, 2020
56dc613
Merge branch 'latest' into update-story-promo
DenisHdz Feb 19, 2020
b92aa0f
Remove duplicate 'width'
sareh Feb 19, 2020
8ca2f9d
Fix spacing in visually hidden text - needed for when there's no css
sareh Feb 19, 2020
ffac07f
Add dir prop to StoryPromo and default it to 'ltr', add padding onto …
sareh Feb 19, 2020
c746b65
Merge branch 'latest' into update-story-promo
sareh Feb 19, 2020
6f7f8b0
Merge branch 'latest' into update-story-promo
DenisHdz Feb 20, 2020
5a1f647
Update width to not include calc since spacing is being added via pad…
sareh Feb 20, 2020
644ea75
Merge branch 'update-story-promo' of github.com:bbc/psammead into upd…
sareh Feb 20, 2020
d81b968
Update changelog version
sareh Feb 20, 2020
60b7459
Leave Top Story Promo unchanged
sareh Feb 20, 2020
6028cbe
Remove position relative from top-level StoryPromoWrapper - this allo…
sareh Feb 20, 2020
9661584
Merge branch 'update-story-promo' of github.com:bbc/psammead into upd…
sareh Feb 20, 2020
265f784
Revert change to position relative
sareh Feb 20, 2020
c72fab9
Ensure we pass dir to Grid for story, so layout is accurate for RTL s…
sareh Feb 20, 2020
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
1 change: 1 addition & 0 deletions packages/components/psammead-story-promo/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
<!-- prettier-ignore -->
| Version | Description |
| ------- | ----------- |
| 4.0.0-alpha.13 | [PR#3150](https://github.com/bbc/psammead/pull/3150) Fix fallback width for Leading promo |
| 4.0.0-alpha.12 | [PR#3135](https://github.com/bbc/psammead/pull/3135) Talos - Bump Dependencies - @bbc/gel-foundations |
| 4.0.0-alpha.11 | [PR#3136](https://github.com/bbc/psammead/pull/3136) Fix visually hidden text so it isn't split across multiple strings. |
| 4.0.0-alpha.10 | [PR#3129](https://github.com/bbc/psammead/pull/3129) Talos - Bump Dependencies - @bbc/gel-foundations |
Expand Down
1 change: 1 addition & 0 deletions packages/components/psammead-story-promo/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ The `StoryPromo` component is designed to be used on 'index' pages, which are pa
| image | node | no | Null | `<img>` |
| info | node | yes | N/A | `<h2>Title</h2>` |
| mediaIndicator | node | no | null | `<MediaIndicator duration="2:15" datetime="PT2M15S" offscreenText="Video 2 minutes 15 seconds" />` |
| dir | string | no | `ltr` | `rtl` |
| displayImage | boolean | no | true | false |
| promoType | string | no | `regular` | `top` |

Expand Down
2 changes: 1 addition & 1 deletion packages/components/psammead-story-promo/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion packages/components/psammead-story-promo/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@bbc/psammead-story-promo",
"version": "4.0.0-alpha.12",
"version": "4.0.0-alpha.13",
"main": "dist/index.js",
"module": "esm/index.js",
"sideEffects": false,
Expand Down
12 changes: 6 additions & 6 deletions packages/components/psammead-story-promo/src/ImageStyles.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,6 @@ const fullWidthColumnsMaxScaleable = `100%`;

const halfWidthColumnsMaxScaleable = `50%`;

const gridFallbackImageWidth = css`
width: calc(${halfWidthColumnsMaxScaleable} - ${GEL_SPACING});
`;

const ImageGridColumnsTopStory = css`
grid-column: 1 / span 6;

Expand All @@ -35,6 +31,7 @@ const ImageGridColumns = css`
`;

const ImageGridColumnsLeadingStory = css`
padding: 0;
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;

Expand All @@ -54,12 +51,12 @@ const ImageGridFallbackTopStory = css`
width: ${fullWidthColumnsMaxScaleable};

@media (min-width: ${GEL_GROUP_3_SCREEN_WIDTH_MIN}) {
${gridFallbackImageWidth};
width: ${halfWidthColumnsMaxScaleable};
margin-bottom: 0;
}

@media (min-width: ${GEL_GROUP_4_SCREEN_WIDTH_MIN}) {
${gridFallbackImageWidth};
width: ${halfWidthColumnsMaxScaleable};
}
`;

Expand All @@ -72,11 +69,14 @@ const ImageGridFallback = css`
}
`;

const paddingDir = ({ dir }) => `padding-${dir === 'rtl' ? 'right' : 'left'}`;

const ImageGridFallbackLeadingStory = css`
width: ${fullWidthColumnsMaxScaleable};

@media (min-width: ${GEL_GROUP_3_SCREEN_WIDTH_MIN}) {
width: ${halfWidthColumnsMaxScaleable};
${paddingDir}: ${GEL_SPACING};
}

@media (min-width: ${GEL_GROUP_4_SCREEN_WIDTH_MIN}) {
Expand Down
4 changes: 4 additions & 0 deletions packages/components/psammead-story-promo/src/TextStyles.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@ const fullWidthColumnsMaxScaleable = `100%`;

const halfWidthColumnsMaxScaleable = `50%`;

const paddingDir = ({ dir }) => `padding-${dir === 'rtl' ? 'left' : 'right'}`;

const TextGridColumnsTopStory = css`
grid-column: 1 / span 6;

Expand All @@ -42,6 +44,7 @@ ${({ displayImage }) => !displayImage && `grid-column: 1 / span 6;`}
`;

const TextGridColumnsLeadingStory = css`
padding: 0;
width: 100%;
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
Expand Down Expand Up @@ -90,6 +93,7 @@ const TextGridFallback = css`
const TextGridFallBackLeadingStory = css`
width: ${fullWidthColumnsMaxScaleable};
@media (min-width: ${GEL_GROUP_3_SCREEN_WIDTH_MIN}) {
${paddingDir}: ${GEL_SPACING};
width: ${halfWidthColumnsMaxScaleable};
}
@media (min-width: ${GEL_GROUP_4_SCREEN_WIDTH_MIN}) {
Expand Down
Loading