Story Promo - Fallback spacing for Leading promo

packages/components/psammead-story-promo/CHANGELOG.md

@@ -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 |

packages/components/psammead-story-promo/README.md

@@ -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` |
 

packages/components/psammead-story-promo/package.json

@@ -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,

packages/components/psammead-story-promo/src/ImageStyles.jsx

@@ -35,6 +35,7 @@ const ImageGridColumns = css`
 `;
 
 const ImageGridColumnsLeadingStory = css`
+  padding: 0;
   grid-template-columns: repeat(6, 1fr);
   grid-column-end: span 6;
 
@@ -72,10 +73,13 @@ 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}) {
+    ${paddingDir}: ${GEL_SPACING};
     width: ${halfWidthColumnsMaxScaleable};
   }
 

packages/components/psammead-story-promo/src/TextStyles.jsx

@@ -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;
 
@@ -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;
@@ -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}) {

packages/components/psammead-story-promo/src/__snapshots__/index.test.jsx.snap

@@ -75,6 +75,7 @@ exports[`StoryPromo - Leading Story should render correctly 1`] = `
 
 @media (min-width:37.5rem) {
   .c5 {
+    padding-left: 0.5rem;
     width: 50%;
   }
 }
@@ -88,13 +89,15 @@ exports[`StoryPromo - Leading Story should render correctly 1`] = `
 @supports (grid-template-columns:fit-content(200px)) {
   .c5 {
     width: initial;
+    padding: 0;
     grid-template-columns: repeat(6,1fr);
     grid-column-end: span 6;
   }
 }
 
 @media (min-width:37.5rem) {
   .c1 {
+    padding-right: 0.5rem;
     width: 50%;
   }
 }
@@ -110,6 +113,7 @@ exports[`StoryPromo - Leading Story should render correctly 1`] = `
     display: block;
     width: initial;
     padding: initial;
+    padding: 0;
     width: 100%;
     grid-template-columns: repeat(6,1fr);
     grid-column-end: span 6;
@@ -177,6 +181,7 @@ exports[`StoryPromo - Leading Story should render correctly 1`] = `
 >
   <div
     class="c1"
+    dir="ltr"
   >
     <h3
       class="c2"
@@ -199,6 +204,7 @@ exports[`StoryPromo - Leading Story should render correctly 1`] = `
   </div>
   <div
     class="c5"
+    dir="ltr"
   >
     <div
       class="c6"
@@ -347,6 +353,7 @@ exports[`StoryPromo - Leading Story should render with Media Indicator correctly
 
 @media (min-width:37.5rem) {
   .c5 {
+    padding-left: 0.5rem;
     width: 50%;
   }
 }
@@ -360,13 +367,15 @@ exports[`StoryPromo - Leading Story should render with Media Indicator correctly
 @supports (grid-template-columns:fit-content(200px)) {
   .c5 {
     width: initial;
+    padding: 0;
     grid-template-columns: repeat(6,1fr);
     grid-column-end: span 6;
   }
 }
 
 @media (min-width:37.5rem) {
   .c1 {
+    padding-right: 0.5rem;
     width: 50%;
   }
 }
@@ -382,6 +391,7 @@ exports[`StoryPromo - Leading Story should render with Media Indicator correctly
     display: block;
     width: initial;
     padding: initial;
+    padding: 0;
     width: 100%;
     grid-template-columns: repeat(6,1fr);
     grid-column-end: span 6;
@@ -449,6 +459,7 @@ exports[`StoryPromo - Leading Story should render with Media Indicator correctly
 >
   <div
     class="c1"
+    dir="ltr"
   >
     <h3
       class="c2"
@@ -471,6 +482,7 @@ exports[`StoryPromo - Leading Story should render with Media Indicator correctly
   </div>
   <div
     class="c5"
+    dir="ltr"
   >
     <div
       class="c6"
@@ -678,6 +690,7 @@ exports[`StoryPromo - Top Story should render correctly 1`] = `
 >
   <div
     class="c1"
+    dir="ltr"
   >
     <div
       class="c2"
@@ -690,6 +703,7 @@ exports[`StoryPromo - Top Story should render correctly 1`] = `
   </div>
   <div
     class="c3"
+    dir="ltr"
   >
     <h3
       class="c4"
@@ -936,6 +950,7 @@ exports[`StoryPromo - Top Story should render with Media Indicator correctly 1`]
 >
   <div
     class="c1"
+    dir="ltr"
   >
     <div
       class="c2"
@@ -979,6 +994,7 @@ exports[`StoryPromo - Top Story should render with Media Indicator correctly 1`]
   </div>
   <div
     class="c8"
+    dir="ltr"
   >
     <h3
       class="c9"
@@ -1286,6 +1302,7 @@ exports[`StoryPromo - Top Story should render with multiple Index Alsos correctl
 >
   <div
     class="c1"
+    dir="ltr"
   >
     <div
       class="c2"
@@ -1298,6 +1315,7 @@ exports[`StoryPromo - Top Story should render with multiple Index Alsos correctl
   </div>
   <div
     class="c3"
+    dir="ltr"
   >
     <h3
       class="c4"
@@ -1676,6 +1694,7 @@ exports[`StoryPromo - Top Story should render with one Index Also correctly 1`]
 >
   <div
     class="c1"
+    dir="ltr"
   >
     <div
       class="c2"
@@ -1688,6 +1707,7 @@ exports[`StoryPromo - Top Story should render with one Index Also correctly 1`]
   </div>
   <div
     class="c3"
+    dir="ltr"
   >
     <h3
       class="c4"
@@ -1954,6 +1974,7 @@ exports[`StoryPromo should render Live promo correctly 1`] = `
 >
   <div
     class="c1"
+    dir="ltr"
   >
     <div
       class="c2"
@@ -1966,6 +1987,7 @@ exports[`StoryPromo should render Live promo correctly 1`] = `
   </div>
   <div
     class="c3"
+    dir="ltr"
   >
     <h3
       class="c4"
@@ -2193,6 +2215,7 @@ exports[`StoryPromo should render a RTL Live promo correctly 1`] = `
 >
   <div
     class="c1"
+    dir="ltr"
   >
     <div
       class="c2"
@@ -2205,6 +2228,7 @@ exports[`StoryPromo should render a RTL Live promo correctly 1`] = `
   </div>
   <div
     class="c3"
+    dir="ltr"
   >
     <h3
       class="c4"
@@ -2411,6 +2435,7 @@ exports[`StoryPromo should render correctly 1`] = `
 >
   <div
     class="c1"
+    dir="ltr"
   >
     <div
       class="c2"
@@ -2423,6 +2448,7 @@ exports[`StoryPromo should render correctly 1`] = `
   </div>
   <div
     class="c3"
+    dir="ltr"
   >
     <h3
       class="c4"
@@ -2681,6 +2707,7 @@ exports[`StoryPromo with Media Indicator should render a RTL promo with media in
 >
   <div
     class="c1"
+    dir="ltr"
   >
     <div
       class="c2"
@@ -2724,6 +2751,7 @@ exports[`StoryPromo with Media Indicator should render a RTL promo with media in
   </div>
   <div
     class="c8"
+    dir="ltr"
   >
     <h3
       class="c9"
@@ -2982,6 +3010,7 @@ exports[`StoryPromo with Media Indicator should render correctly 1`] = `
 >
   <div
     class="c1"
+    dir="ltr"
   >
     <div
       class="c2"
@@ -3025,6 +3054,7 @@ exports[`StoryPromo with Media Indicator should render correctly 1`] = `
   </div>
   <div
     class="c8"
+    dir="ltr"
   >
     <h3
       class="c9"

packages/components/psammead-story-promo/src/index.jsx

@@ -59,7 +59,7 @@ const wrapperStyles = {
 };
 
 const StoryPromoWrapper = styled.div`
-  position: relative;
+  position: relative; /* This is needed to contain the faux-block-link to the Story Promo */
   @supports (${grid}) {
     display: grid;
     grid-template-columns: repeat(6, 1fr);
@@ -250,13 +250,14 @@ const StoryPromo = ({
   image,
   info,
   promoType,
+  dir,
   displayImage,
   mediaIndicator,
   mediaIndicatorIsInline,
   ...props
 }) => {
   const renderImage = displayImage && (
-    <ImageGridItem promoType={promoType}>
+    <ImageGridItem dir={dir} promoType={promoType}>
       <ImageContentsWrapper>
         {image}
         {mediaIndicator && (
@@ -272,7 +273,7 @@ const StoryPromo = ({
   );
 
   const renderText = (
-    <TextGridItem promoType={promoType} displayImage={displayImage}>
+    <TextGridItem promoType={promoType} dir={dir} displayImage={displayImage}>
       {!displayImage && mediaIndicator}
       {info}
     </TextGridItem>
@@ -296,6 +297,7 @@ const StoryPromo = ({
 };
 
 StoryPromo.propTypes = {
+  dir: oneOf(['ltr', 'rtl']),
   image: node.isRequired,
   info: node.isRequired,
   promoType: PROMO_TYPES,
@@ -305,6 +307,7 @@ StoryPromo.propTypes = {
 };
 
 StoryPromo.defaultProps = {
+  dir: 'ltr',
   promoType: 'regular',
   displayImage: true,
   mediaIndicator: null,