Merge pull request #304 from guardian/oliver/immersive-mainmedia-inte…

…ractive fix: Only apply `height: 100%` to interactive main media when `Immersive`
guardian · Nov 25, 2021 · b1f4144 · b1f4144
2 parents 364436b + c117215
commit b1f4144
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 11 deletions.
diff --git a/package.json b/package.json
@@ -37,7 +37,7 @@
         "@guardian/commercial-core": "^0.26.0",
         "@guardian/consent-management-platform": "^8",
         "@guardian/eslint-plugin-source-react-components": "^4.0.0-rc.1",
-        "@guardian/libs": "^3.1.0",
+        "@guardian/libs": "^3.5.1",
         "@guardian/source-foundations": "^4.0.0-rc.0",
         "@guardian/source-react-components": "^4.0.0-rc.1",
         "@storybook/addon-docs": "^6.1.11",
@@ -68,7 +68,8 @@
         "react-dom": "^17.0.1",
         "ts-jest": "^24.3.0",
         "ts-loader": "^8.0.18",
-        "typescript": "^4.1.3"
+        "typescript": "^4.1.3",
+        "web-vitals": "^2.1.2"
     },
     "eslintConfig": {
         "root": true,
@@ -104,12 +105,12 @@
     "peerDependencies": {
         "@emotion/react": "^11.1.5",
         "@guardian/consent-management-platform": "^8",
-        "@guardian/libs": "^3.1.0",
         "@guardian/source-foundations": "^4.0.0-rc.0",
         "@guardian/source-react-components": "^4.0.0-rc.1",
         "react": "^17.0.1",
         "react-dom": "^17.0.1",
-        "typescript": "^4.1.3"
+        "typescript": "^4.1.3",
+        "web-vitals": "^2.1.2"
     },
     "jest": {
         "testEnvironment": "jest-environment-jsdom-sixteen",

diff --git a/src/InteractiveAtom.stories.tsx b/src/InteractiveAtom.stories.tsx
@@ -6,6 +6,7 @@ import {
     MainMedia,
 } from './fixtures/InteractiveAtomBlockElement';
 import { InteractiveAtom } from './InteractiveAtom';
+import { ArticleDesign, ArticleDisplay, ArticlePillar } from '@guardian/libs';
 
 export default {
     title: 'InteractiveAtom',
@@ -26,6 +27,11 @@ export const DefaultStory = (): JSX.Element => {
                 elementHtml={html}
                 elementJs={js}
                 elementCss={atomCss}
+                format={{
+                    display: ArticleDisplay.Standard,
+                    design: ArticleDesign.Standard,
+                    theme: ArticlePillar.News,
+                }}
             />
         </div>
     );
@@ -35,7 +41,7 @@ DefaultStory.parameters = {
     chromatic: { disable: true },
 };
 
-export const MainMediaStory = (): JSX.Element => {
+export const ImmersiveMainMediaStory = (): JSX.Element => {
     const { id, html, js, css: atomCss } = MainMedia;
     return (
         <div
@@ -50,11 +56,16 @@ export const MainMediaStory = (): JSX.Element => {
                 elementJs={js}
                 elementCss={atomCss}
                 isMainMedia={true}
+                format={{
+                    display: ArticleDisplay.Immersive,
+                    design: ArticleDesign.Standard,
+                    theme: ArticlePillar.News,
+                }}
             />
         </div>
     );
 };
-MainMedia.parameters = {
+ImmersiveMainMediaStory.parameters = {
     // This interactive uses animation which is causing false negatives for Chromatic
     chromatic: { disable: true },
 };
diff --git a/src/InteractiveAtom.tsx b/src/InteractiveAtom.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { css } from '@emotion/react';
 
 import { unifyPageContent } from './lib/unifyPageContent';
+import { ArticleDisplay, ArticleFormat } from '@guardian/libs';
 
 const containerStyles = css`
     margin: 0;
@@ -21,6 +22,7 @@ type InteractiveAtomType = {
     elementJs?: string;
     elementCss?: string;
     isMainMedia?: boolean;
+    format: ArticleFormat;
 };
 
 export const InteractiveAtom = ({
@@ -29,14 +31,20 @@ export const InteractiveAtom = ({
     elementJs,
     elementCss,
     isMainMedia,
+    format,
 }: InteractiveAtomType): JSX.Element => (
     <div
         css={[containerStyles, isMainMedia && fullHeightStyles]}
         data-atom-id={id}
         data-atom-type="interactive"
     >
         <iframe
-            css={[fullWidthStyles, isMainMedia && fullHeightStyles]}
+            css={[
+                fullWidthStyles,
+                isMainMedia &&
+                    format.display === ArticleDisplay.Immersive &&
+                    fullHeightStyles,
+            ]}
             srcDoc={unifyPageContent({ elementJs, elementCss, elementHtml })}
             frameBorder="0"
         />

diff --git a/yarn.lock b/yarn.lock
@@ -1489,10 +1489,10 @@
   resolved "https://registry.yarnpkg.com/@guardian/libs/-/libs-3.3.0.tgz#fa98c7b8216ab35b8cf3087cd9ba336958fac99a"
   integrity sha512-XB9o8qtDOg+KlPh1sjEr4u+Ai3RFTRr2riZ/HJpdlh8Cu4ZpYjCSGUZXSGkxp1CwFWT9sduANnsWSqZ97iBloQ==
 
-"@guardian/libs@^3.1.0":
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/@guardian/libs/-/libs-3.1.0.tgz#44b0291741a0fce588167f4ec8c17fa9a7d41261"
-  integrity sha512-GJk34o9lUmP6FcBKd0FSV2RwvAKKJzcAV5mVdhgq/JmBNj8Ns5eiJlq8LG2ewIJJSzRaWT4h8Fg6n9KI8K0xDQ==
+"@guardian/libs@^3.5.1":
+  version "3.5.1"
+  resolved "https://registry.yarnpkg.com/@guardian/libs/-/libs-3.5.1.tgz#069fb9140f77d88cc68d476da9c626c18b9ed883"
+  integrity sha512-obu0aPfkbe6kdo18e0dEq/esVjAhwZpQusU/yRjDQFBQMcG4CvPtD0HZb6sI1Grm2NWdBueHHQcJ0YX48SDCsg==
 
 "@guardian/source-foundations@^4.0.0-rc.0":
   version "4.0.0-rc.1"
@@ -13916,6 +13916,11 @@ web-namespaces@^1.0.0:
   resolved "https://registry.yarnpkg.com/web-namespaces/-/web-namespaces-1.1.4.tgz#bc98a3de60dadd7faefc403d1076d529f5e030ec"
   integrity sha512-wYxSGajtmoP4WxfejAPIr4l0fVh+jeMXZb08wNc0tMg6xsfZXj3cECqIK0G7ZAqUq0PP8WlMDtaOGVBTAWztNw==
 
+web-vitals@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/web-vitals/-/web-vitals-2.1.2.tgz#3a6c8faebf9097a6ccd17f5f45c9485d8d62dab1"
+  integrity sha512-nZnEH8dj+vJFqCRYdvYv0a59iLXsb8jJkt+xvXfwgnkyPdsSLtKNlYmtTDiHmTNGXeSXtpjTTUcNvFtrAk6VMQ==
+
 webidl-conversions@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-5.0.0.tgz#ae59c8a00b121543a2acc65c0434f57b0fc11aff"