Merge pull request #4539 from bbc/social-embed-rendered-css

Use CSS to resize psammead-social-embed on render
BBC-archive · Aug 23, 2021 · c2583b8 · c2583b8
2 parents f4f7a0d + e37cb44
commit c2583b8
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 2 deletions.
diff --git a/package.json b/package.json
@@ -95,7 +95,7 @@
     "@bbc/psammead-rich-text-transforms": "2.0.6",
     "@bbc/psammead-script-link": "3.0.20",
     "@bbc/psammead-section-label": "7.1.0",
-    "@bbc/psammead-social-embed": "3.2.1",
+    "@bbc/psammead-social-embed": "3.3.0",
     "@bbc/psammead-story-promo": "8.0.21",
     "@bbc/psammead-story-promo-list": "6.0.19",
     "@bbc/psammead-storybook-helpers": "9.0.14",

diff --git a/packages/components/psammead-social-embed/CHANGELOG.md b/packages/components/psammead-social-embed/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 | Version       | Description                                                                                                 |
 | ------------- | ----------------------------------------------------------------------------------------------------------- |
+| 3.3.0 | [PR#4539](https://github.com/bbc/psammead/pull/4539) Use twitter-tweet-rendered class |
 | 3.2.1 | [PR#4536](https://github.com/bbc/psammead/pull/4536) Remove use of fixtures for provider name |
 | 3.2.0 | [PR#4535](https://github.com/bbc/psammead/pull/4535) Add onRender prop |
 | 3.1.16 | [PR#4497](https://github.com/bbc/psammead/pull/4497) Bump psammead-styles |

diff --git a/packages/components/psammead-social-embed/package.json b/packages/components/psammead-social-embed/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead-social-embed",
-  "version": "3.2.1",
+  "version": "3.3.0",
   "main": "dist/index.js",
   "module": "esm/index.js",
   "sideEffects": false,

diff --git a/packages/components/psammead-social-embed/src/Canonical/index.jsx b/packages/components/psammead-social-embed/src/Canonical/index.jsx
@@ -5,6 +5,7 @@ import styled from '@emotion/styled';
 import useScript from './useScript';
 
 const LANDSCAPE_RATIO = '56.25%';
+const PRE_RENDER_MARGIN = '10rem';
 
 /**
  * Apply provider-specific styles.
@@ -44,6 +45,9 @@ export const providers = {
     styles: `
       .twitter-tweet {
         margin-top: 0 !important;
+        margin-bottom: ${PRE_RENDER_MARGIN} !important;
+      }
+      .twitter-tweet-rendered {
         margin-bottom: 0 !important;
       }
     `,

diff --git a/packages/components/psammead-social-embed/src/__snapshots__/index.test.jsx.snap b/packages/components/psammead-social-embed/src/__snapshots__/index.test.jsx.snap
@@ -783,6 +783,10 @@ exports[`CanonicalSocialEmbed Twitter should render correctly for Twitter 1`] =
 
 .emotion-4 .twitter-tweet {
   margin-top: 0!important;
+  margin-bottom: 10rem!important;
+}
+
+.emotion-4 .twitter-tweet-rendered {
   margin-bottom: 0!important;
 }