- Image & Paragraph - groups 0-3 Image is fullscreen (no margin) but
- paragraph has GEL margins. For groups 4+, image & paragraph are
- side-by-side & there are no margins.
-
+
+
+
+
+
+ Image & Paragraph - groups 0-3 Image is fullscreen (no margin) but
+ paragraph has GEL margins. For groups 4+, image & paragraph are
+ side-by-side & there are no margins.
+
+
-
- ))
- .add('Example with gutters only', () => (
+ ),
+ )
+ .add('Example with gutters only', ({ dir }) => (
(
+ ({ dir }) => (
(
+ ({ dir }) => (
(
+ ({ dir }) => (
(
+ ({ dir }) => (
(
+ ({ dir }) => (
{['2', '3', '4', '5', '6', '7', '8', '9', '10'].map(num => (
| Version | Description |
| ------- | ----------- |
+| 4.0.2 | [PR#3107](https://github.com/bbc/psammead/pull/3107) Update snapshots using new version of story-promo at top level. |
| 4.0.1 | [PR#3070](https://github.com/bbc/psammead/pull/3070) Padding fix - update padding-top to not be applied on first li at 1008px+. |
| 4.0.0 | [PR#3058](https://github.com/bbc/psammead/pull/3058) Update `StoryPromoLi` padding top above 1008px |
| 3.0.1 | [PR#3030](https://github.com/bbc/psammead/pull/3030) Talos - Bump Dependencies - @bbc/psammead-styles |
diff --git a/packages/components/psammead-story-promo-list/package-lock.json b/packages/components/psammead-story-promo-list/package-lock.json
index f4d7ce6842..c473e37d6f 100644
--- a/packages/components/psammead-story-promo-list/package-lock.json
+++ b/packages/components/psammead-story-promo-list/package-lock.json
@@ -1,6 +1,6 @@
{
"name": "@bbc/psammead-story-promo-list",
- "version": "4.0.1",
+ "version": "4.0.2",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
diff --git a/packages/components/psammead-story-promo-list/package.json b/packages/components/psammead-story-promo-list/package.json
index c92113174c..0b9d578f5c 100644
--- a/packages/components/psammead-story-promo-list/package.json
+++ b/packages/components/psammead-story-promo-list/package.json
@@ -1,6 +1,6 @@
{
"name": "@bbc/psammead-story-promo-list",
- "version": "4.0.1",
+ "version": "4.0.2",
"main": "dist/index.js",
"module": "esm/index.js",
"sideEffects": false,
diff --git a/packages/components/psammead-story-promo-list/src/__snapshots__/index.test.jsx.snap b/packages/components/psammead-story-promo-list/src/__snapshots__/index.test.jsx.snap
index 8e6dc7caac..3e897b9faf 100644
--- a/packages/components/psammead-story-promo-list/src/__snapshots__/index.test.jsx.snap
+++ b/packages/components/psammead-story-promo-list/src/__snapshots__/index.test.jsx.snap
@@ -1,10 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`StoryPromo list should render correctly 1`] = `
-.c2 {
- position: relative;
-}
-
.c3 {
display: inline-block;
vertical-align: top;
@@ -12,10 +8,6 @@ exports[`StoryPromo list should render correctly 1`] = `
width: 33.33%;
}
-.c4 {
- position: relative;
-}
-
.c5 {
display: inline-block;
vertical-align: top;
@@ -23,15 +15,23 @@ exports[`StoryPromo list should render correctly 1`] = `
padding: 0 0.5rem;
}
+.c2 {
+ position: relative;
+}
+
+.c4 {
+ position: relative;
+}
+
.c6 {
- font-size: 0.9375rem;
- line-height: 1.25rem;
- font-family: ReithSerif,Helvetica,Arial,sans-serif;
- font-weight: 500;
- font-style: normal;
color: #222222;
margin: 0;
padding-bottom: 0.5rem;
+ font-family: ReithSerif,Helvetica,Arial,sans-serif;
+ font-weight: 500;
+ font-style: normal;
+ font-size: 0.9375rem;
+ line-height: 1.25rem;
}
.c7 {
@@ -64,14 +64,6 @@ exports[`StoryPromo list should render correctly 1`] = `
padding: 0;
}
-@supports (grid-template-columns:fit-content(200px)) {
- .c2 {
- display: grid;
- grid-template-columns: repeat(6,1fr);
- grid-column-gap: 0.5rem;
- }
-}
-
@media (min-width:63rem) {
.c3 {
display: block;
@@ -81,7 +73,6 @@ exports[`StoryPromo list should render correctly 1`] = `
@supports (grid-template-columns:fit-content(200px)) {
.c3 {
- display: block;
width: initial;
grid-column: 1 / span 2;
}
@@ -110,14 +101,15 @@ exports[`StoryPromo list should render correctly 1`] = `
}
}
-@media (min-width:20rem) and (max-width:37.4375rem) {
- .c6 {
- font-size: 1rem;
- line-height: 1.25rem;
+@supports (grid-template-columns:fit-content(200px)) {
+ .c2 {
+ display: grid;
+ grid-template-columns: repeat(6,1fr);
+ grid-column-gap: 0.5rem;
}
}
-@media (min-width:37.5rem) {
+@media (min-width:20rem) and (max-width:37.4375rem) {
.c6 {
font-size: 1rem;
line-height: 1.25rem;
@@ -126,8 +118,8 @@ exports[`StoryPromo list should render correctly 1`] = `
@media (min-width:37.5rem) {
.c6 {
- font-size: 1.25rem;
- line-height: 1.5rem;
+ font-size: 1rem;
+ line-height: 1.25rem;
}
}
diff --git a/packages/components/psammead-story-promo/CHANGELOG.md b/packages/components/psammead-story-promo/CHANGELOG.md
index f73e740838..3633f6513c 100644
--- a/packages/components/psammead-story-promo/CHANGELOG.md
+++ b/packages/components/psammead-story-promo/CHANGELOG.md
@@ -3,6 +3,7 @@
| Version | Description |
| ------- | ----------- |
+| 4.0.0-alpha.9 | [PR#3107](https://github.com/bbc/psammead/pull/3107) Pass in dir prop to MediaIndicator in IndexAlsosContainer. |
| 4.0.0-alpha.8 | [PR#3073](https://github.com/bbc/psammead/pull/3073) Use new major version of MediaIndicator. StoryPromo has updated styling around the MediaIndicator. Index Alsos test helper now using prop `isInline` for the MediaIndicator. |
| 4.0.0-alpha.7 | [PR#3027](https://github.com/bbc/psammead/pull/3027) Use mobile and tablet stylings |
| 4.0.0-alpha.6 | [PR#3030](https://github.com/bbc/psammead/pull/3030) Talos - Bump Dependencies - @bbc/psammead-styles |
diff --git a/packages/components/psammead-story-promo/README.md b/packages/components/psammead-story-promo/README.md
index aab1379a26..19fa254379 100644
--- a/packages/components/psammead-story-promo/README.md
+++ b/packages/components/psammead-story-promo/README.md
@@ -185,7 +185,7 @@ const IndexAlsosComponent = ({ alsoItems, script, service }) => (
const Info = ({ isLive, alsoItems }) => (
-
+
{isLive ? (
(
)}
-
+
The summary of the promo
diff --git a/packages/components/psammead-story-promo/package-lock.json b/packages/components/psammead-story-promo/package-lock.json
index 39e4f44508..a16cf38e0c 100644
--- a/packages/components/psammead-story-promo/package-lock.json
+++ b/packages/components/psammead-story-promo/package-lock.json
@@ -1,6 +1,6 @@
{
"name": "@bbc/psammead-story-promo",
- "version": "4.0.0-alpha.8",
+ "version": "4.0.0-alpha.9",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
diff --git a/packages/components/psammead-story-promo/package.json b/packages/components/psammead-story-promo/package.json
index b360c4878c..1146e06057 100644
--- a/packages/components/psammead-story-promo/package.json
+++ b/packages/components/psammead-story-promo/package.json
@@ -1,6 +1,6 @@
{
"name": "@bbc/psammead-story-promo",
- "version": "4.0.0-alpha.8",
+ "version": "4.0.0-alpha.9",
"main": "dist/index.js",
"module": "esm/index.js",
"sideEffects": false,
diff --git a/packages/components/psammead-story-promo/src/IndexAlsos/__snapshots__/index.test.jsx.snap b/packages/components/psammead-story-promo/src/IndexAlsos/__snapshots__/index.test.jsx.snap
index 302c826b96..4792d77c07 100644
--- a/packages/components/psammead-story-promo/src/IndexAlsos/__snapshots__/index.test.jsx.snap
+++ b/packages/components/psammead-story-promo/src/IndexAlsos/__snapshots__/index.test.jsx.snap
@@ -146,6 +146,7 @@ exports[`Index Alsos should render multiple correctly 1`] = `
+`;
+
exports[`StoryPromo with Media Indicator should render correctly 1`] = `
.c6 {
vertical-align: middle;
@@ -2693,6 +2998,7 @@ exports[`StoryPromo with Media Indicator should render correctly 1`] = `
+