Merge pull request #3627 from bbc/no-css-fix

Add spacing between embed error elements
BBC-archive · Jul 22, 2020 · 3785915 · 3785915
2 parents e331554 + 156815c
commit 3785915
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 16 deletions.
diff --git a/packages/components/psammead-embed-error/CHANGELOG.md b/packages/components/psammead-embed-error/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 | Version       | Description                                                                       |
 |---------------|-----------------------------------------------------------------------------------|
+| 1.1.0 | [PR#3627](https://github.com/bbc/psammead/pull/3627) Add spacing between embed error elements |
 | 1.0.1 | [PR#3623](https://github.com/bbc/psammead/pull/3623) Talos - Bump Dependencies - @bbc/gel-foundations |
 | 1.0.0 | [PR#3615](https://github.com/bbc/psammead/pull/3615) Resolve a11y issues and release of version 1.0. |
 | 1.0.0-alpha.21 | [PR#3613](https://github.com/bbc/psammead/pull/3613) Talos - Bump Dependencies - @bbc/psammead-assets |

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

diff --git a/packages/components/psammead-embed-error/src/__snapshots__/index.test.jsx.snap b/packages/components/psammead-embed-error/src/__snapshots__/index.test.jsx.snap
@@ -34,7 +34,6 @@ exports[`EmbedError renders a default embed error 1`] = `
 }
 
 .c1 strong {
-  display: block;
   font-weight: normal;
 }
 
@@ -72,9 +71,11 @@ exports[`EmbedError renders a default embed error 1`] = `
   <div
     class="c1"
   >
-    <strong>
-      Sorry, we can't display this part of the story on this lightweight mobile page.
-    </strong>
+    <div>
+      <strong>
+        Sorry, we can't display this part of the story on this lightweight mobile page.
+      </strong>
+    </div>
   </div>
 </div>
 `;
@@ -116,7 +117,6 @@ exports[`EmbedError renders an embed error that fills the viewport 1`] = `
 }
 
 .c1 strong {
-  display: block;
   font-weight: normal;
 }
 
@@ -154,9 +154,11 @@ exports[`EmbedError renders an embed error that fills the viewport 1`] = `
   <div
     class="c1"
   >
-    <strong>
-      Sorry, we can't display this part of the story on this lightweight mobile page.
-    </strong>
+    <div>
+      <strong>
+        Sorry, we can't display this part of the story on this lightweight mobile page.
+      </strong>
+    </div>
   </div>
 </div>
 `;
@@ -195,7 +197,6 @@ exports[`EmbedError renders an embed error with a link 1`] = `
 }
 
 .c1 strong {
-  display: block;
   font-weight: normal;
 }
 
@@ -233,9 +234,11 @@ exports[`EmbedError renders an embed error with a link 1`] = `
   <div
     class="c1"
   >
-    <strong>
-      Sorry, we can't display this part of the story on this lightweight mobile page.
-    </strong>
+    <div>
+      <strong>
+        Sorry, we can't display this part of the story on this lightweight mobile page.
+      </strong>
+    </div>
     <a
       href="#"
     >

diff --git a/packages/components/psammead-embed-error/src/index.jsx b/packages/components/psammead-embed-error/src/index.jsx
@@ -44,7 +44,6 @@ const StyledErrorMessage = styled.div`
   margin: 0 ${GEL_SPACING_TRPL};
 
   strong {
-    display: block;
     font-weight: normal;
   }
 
@@ -69,7 +68,9 @@ const StyledErrorMessage = styled.div`
 const EmbedError = ({ service, message, fillViewport, link }) => (
   <StyledEmbedError service={service} fillViewport={fillViewport}>
     <StyledErrorMessage service={service}>
-      <strong>{message}</strong>
+      <div>
+        <strong>{message}</strong>
+      </div>
       {link && link.text && link.href && <a href={link.href}>{link.text}</a>}
     </StyledErrorMessage>
   </StyledEmbedError>