From 1ec9b97b826b95017e58b798f5497ed5c22f7e53 Mon Sep 17 00:00:00 2001
From: Oliver Lloyd <oliverlloyd@users.noreply.github.com>
Date: Wed, 24 Nov 2021 16:25:38 +0000
Subject: [PATCH 1/4] fix: Only apply `fullHeightStyles` for main media when
 Immersive

---
 src/InteractiveAtom.stories.tsx | 15 +++++++++++++--
 src/InteractiveAtom.tsx         | 10 +++++++++-
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/InteractiveAtom.stories.tsx b/src/InteractiveAtom.stories.tsx
index ff284304..8c9a8009 100644
--- 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
index 1e5f47e6..c4f73ddf 100644
--- 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,6 +31,7 @@ export const InteractiveAtom = ({
     elementJs,
     elementCss,
     isMainMedia,
+    format,
 }: InteractiveAtomType): JSX.Element => (
     <div
         css={[containerStyles, isMainMedia && fullHeightStyles]}
@@ -36,7 +39,12 @@ export const InteractiveAtom = ({
         data-atom-type="interactive"
     >
         <iframe
-            css={[fullWidthStyles, isMainMedia && fullHeightStyles]}
+            css={[
+                fullWidthStyles,
+                isMainMedia &&
+                    format.display === ArticleDisplay.Immersive &&
+                    fullHeightStyles,
+            ]}
             srcDoc={unifyPageContent({ elementJs, elementCss, elementHtml })}
             frameBorder="0"
         />

From f48bf93816b9f6d67398aafa24b021febc6fde50 Mon Sep 17 00:00:00 2001
From: Oliver Lloyd <oliverlloyd@users.noreply.github.com>
Date: Wed, 24 Nov 2021 16:51:49 +0000
Subject: [PATCH 2/4] chore: Bump @guardian/libs to 3.5.1 so we have all the
 design types DCR expects

---
 package.json | 3 +--
 yarn.lock    | 8 ++++----
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 394cb3bb..11969613 100644
--- 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",
@@ -104,7 +104,6 @@
     "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",
diff --git a/yarn.lock b/yarn.lock
index e371fe4c..2664306c 100644
--- 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"

From c3c12d79340da5eebb4343acc32d79a4386b801e Mon Sep 17 00:00:00 2001
From: Oliver Lloyd <oliverlloyd@users.noreply.github.com>
Date: Wed, 24 Nov 2021 17:16:59 +0000
Subject: [PATCH 3/4] fix: The latest version of @guardian/libs needs this peer
 dep it seems

---
 package.json | 3 ++-
 yarn.lock    | 5 +++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 11969613..856b8b44 100644
--- a/package.json
+++ b/package.json
@@ -108,7 +108,8 @@
         "@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/yarn.lock b/yarn.lock
index 2664306c..c9e24df0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -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"

From c117215897f93967db8533a71c6c84547ad76184 Mon Sep 17 00:00:00 2001
From: Oliver Lloyd <oliverlloyd@users.noreply.github.com>
Date: Wed, 24 Nov 2021 17:29:52 +0000
Subject: [PATCH 4/4] fix: Also include `web-vitals` as a dev dep

---
 package.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 856b8b44..ddce9897 100644
--- a/package.json
+++ b/package.json
@@ -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,