From 39b44579b524884b96853710cf72a54ce90de330 Mon Sep 17 00:00:00 2001
From: James Miller <james@james-miller.co.uk>
Date: Tue, 4 Sep 2018 16:46:04 +0100
Subject: [PATCH] chore: Code Review changes

---
 .../article-with-style.android.test.js.snap   | 24 ++---------------
 .../article-with-style.ios.test.js.snap       | 24 ++---------------
 .../src/article-body/article-body-row.js      | 26 ++-----------------
 .../article/src/styles/article-body/shared.js | 19 ++++++++++++++
 packages/interactive-wrapper/README.md        |  2 +-
 .../src/interactive-wrapper.js                |  7 ++---
 6 files changed, 30 insertions(+), 72 deletions(-)

diff --git a/packages/article/__tests__/android/__snapshots__/article-with-style.android.test.js.snap b/packages/article/__tests__/android/__snapshots__/article-with-style.android.test.js.snap
index 03494ffb1ec..e892f54a870 100644
--- a/packages/article/__tests__/android/__snapshots__/article-with-style.android.test.js.snap
+++ b/packages/article/__tests__/android/__snapshots__/article-with-style.android.test.js.snap
@@ -283,15 +283,7 @@ exports[`2. a full article with an image as the lead asset 1`] = `
       </View>
     </View>
     <View>
-      <View
-        style={
-          Object {
-            "flexDirection": "column",
-            "paddingBottom": 25,
-            "width": "100%",
-          }
-        }
-      >
+      <View>
         <Video />
         <View>
           <View
@@ -635,19 +627,7 @@ exports[`5. an article with ads 1`] = `
       </View>
     </View>
     <View>
-      <Ad
-        style={
-          Object {
-            "borderBottomColor": "#DBDBDB",
-            "borderBottomWidth": 1,
-            "borderTopColor": "#DBDBDB",
-            "borderTopWidth": 1,
-            "marginBottom": 20,
-            "paddingBottom": 10,
-            "paddingTop": 10,
-          }
-        }
-      />
+      <Ad />
     </View>
     <View />
     <View>
diff --git a/packages/article/__tests__/ios/__snapshots__/article-with-style.ios.test.js.snap b/packages/article/__tests__/ios/__snapshots__/article-with-style.ios.test.js.snap
index ce53d4f71f5..ded0122470e 100644
--- a/packages/article/__tests__/ios/__snapshots__/article-with-style.ios.test.js.snap
+++ b/packages/article/__tests__/ios/__snapshots__/article-with-style.ios.test.js.snap
@@ -273,15 +273,7 @@ exports[`2. a full article with an image as the lead asset 1`] = `
       </View>
     </View>
     <View>
-      <View
-        style={
-          Object {
-            "flexDirection": "column",
-            "paddingBottom": 25,
-            "width": "100%",
-          }
-        }
-      >
+      <View>
         <Video />
         <View>
           <View
@@ -623,19 +615,7 @@ exports[`5. an article with ads 1`] = `
       </View>
     </View>
     <View>
-      <Ad
-        style={
-          Object {
-            "borderBottomColor": "#DBDBDB",
-            "borderBottomWidth": 1,
-            "borderTopColor": "#DBDBDB",
-            "borderTopWidth": 1,
-            "marginBottom": 20,
-            "paddingBottom": 10,
-            "paddingTop": 10,
-          }
-        }
-      />
+      <Ad />
     </View>
     <View />
     <View>
diff --git a/packages/article/src/article-body/article-body-row.js b/packages/article/src/article-body/article-body-row.js
index 532f9a2d2ec..25827dfa854 100644
--- a/packages/article/src/article-body/article-body-row.js
+++ b/packages/article/src/article-body/article-body-row.js
@@ -1,5 +1,5 @@
 import React from "react";
-import { Dimensions, StyleSheet, View } from "react-native";
+import { Dimensions, View } from "react-native";
 import PropTypes from "prop-types";
 import ArticleImage from "@times-components/article-image";
 import Ad from "@times-components/ad";
@@ -8,33 +8,11 @@ import KeyFacts from "@times-components/key-facts";
 import { renderTree } from "@times-components/markup-forest";
 import coreRenderers from "@times-components/markup";
 import PullQuote from "@times-components/pull-quote";
-import { colours, spacing } from "@times-components/styleguide";
 import Video from "@times-components/video";
 import BodyParagraph from "./article-body-paragraph";
 import ArticleLink from "./article-link";
 import InsetCaption from "./inset-caption";
-
-const styles = StyleSheet.create({
-  ad: {
-    borderTopColor: colours.functional.keyline,
-    borderBottomColor: colours.functional.keyline,
-    borderTopWidth: 1,
-    borderBottomWidth: 1,
-    paddingTop: spacing(2),
-    paddingBottom: spacing(2),
-    marginBottom: spacing(4)
-  },
-  interactiveContainer: {
-    paddingRight: spacing(2),
-    paddingLeft: spacing(2),
-    marginBottom: spacing(4)
-  },
-  primaryContainer: {
-    width: "100%",
-    flexDirection: "column",
-    paddingBottom: spacing(5)
-  }
-});
+import styles from "../styles/article-body";
 
 const ArticleRow = ({
   content: { data, index },
diff --git a/packages/article/src/styles/article-body/shared.js b/packages/article/src/styles/article-body/shared.js
index c297b62bd2b..b6a06cca348 100644
--- a/packages/article/src/styles/article-body/shared.js
+++ b/packages/article/src/styles/article-body/shared.js
@@ -26,6 +26,25 @@ const sharedStyles = scale => {
       }),
       marginBottom: spacing(5),
       marginTop: 0
+    },
+    ad: {
+      borderTopColor: colours.functional.keyline,
+      borderBottomColor: colours.functional.keyline,
+      borderTopWidth: 1,
+      borderBottomWidth: 1,
+      paddingTop: spacing(2),
+      paddingBottom: spacing(2),
+      marginBottom: spacing(4)
+    },
+    interactiveContainer: {
+      paddingRight: spacing(2),
+      paddingLeft: spacing(2),
+      marginBottom: spacing(4)
+    },
+    primaryContainer: {
+      width: "100%",
+      flexDirection: "column",
+      paddingBottom: spacing(5)
     }
   };
 };
diff --git a/packages/interactive-wrapper/README.md b/packages/interactive-wrapper/README.md
index b0da7e4dd80..87d9955e002 100644
--- a/packages/interactive-wrapper/README.md
+++ b/packages/interactive-wrapper/README.md
@@ -45,4 +45,4 @@ yarn test:all
 
 Visit the official
 [storybook](http://components.thetimes.co.uk/?knob-Size%20of%20ad%20placeholder%3A=default&knob-Interactive=chapterHeading&knob-Interactive%20Wrapper=chapterHeading&selectedKind=Primitives%2FInteractive%20Wrapper&selectedStory=Interactive%20Wrapper&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybooks%2Fstorybook-addon-knobs)
-to see our available image templates.
+to see our available interactives.
diff --git a/packages/interactive-wrapper/src/interactive-wrapper.js b/packages/interactive-wrapper/src/interactive-wrapper.js
index 38a743a7c02..3fc2b8e216e 100644
--- a/packages/interactive-wrapper/src/interactive-wrapper.js
+++ b/packages/interactive-wrapper/src/interactive-wrapper.js
@@ -2,6 +2,9 @@ import React, { Component } from "react";
 import { Linking, Platform, View, WebView } from "react-native";
 import PropTypes from "prop-types";
 
+const editorialLambdaUrl =
+  "https://cwfiyvo20d.execute-api.eu-west-1.amazonaws.com/dev/component";
+
 class InteractiveWrapper extends Component {
   static postMessageBugWorkaround() {
     return Platform.select({
@@ -75,9 +78,7 @@ class InteractiveWrapper extends Component {
             this.webview = webview;
           }}
           source={{
-            uri: `https://cwfiyvo20d.execute-api.eu-west-1.amazonaws.com/dev/component/${
-              this.props.id
-            }`
+            uri: `${editorialLambdaUrl}/${this.props.id}`
           }}
           style={{ height: this.state.height }}
           {...InteractiveWrapper.postMessageBugWorkaround()}