Feat(tdp-1717): remove react native from video (newsuk#2913)

* Create some new styled components and remove some Text and View components

* Remove rest of react native from video package

* Fix linting

* Fix styleguide version discrepancy

* Update styleguide version in context package

* Update styleguid version in utils and responsive packages

Co-authored-by: Callum Christie <callumchristie@hotmail.com>

packages/responsive/package.json

@@ -32,7 +32,7 @@
   },
   "homepage": "https://github.com/newsuk/times-components#readme",
   "dependencies": {
-    "@times-components/styleguide": "3.38.33",
+    "@times-components/styleguide": "3.38.34",
     "@times-components/utils": "6.7.1",
     "prop-types": "15.7.2"
   },

packages/utils/package.json

@@ -51,7 +51,7 @@
   },
   "dependencies": {
     "@times-components/schema": "0.7.1",
-    "@times-components/styleguide": "3.38.33",
+    "@times-components/styleguide": "3.38.34",
     "apollo-cache-inmemory": "1.5.1",
     "apollo-client": "2.5.1",
     "apollo-link": "1.2.4",

packages/video/__tests__/web/__snapshots__/video-error.web.test.js.snap

@@ -1,12 +1,18 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`1. video with error 1`] = `
-<div>
+<styles__VideoErrorContainer>
   <div>
-    Video unable to play
+    <styles__VideoErrorHeading>
+      <span>
+        Video unable to play
+      </span>
+    </styles__VideoErrorHeading>
+    <styles__VideoErrorBody>
+      <span>
+        Please check your network connection and try refreshing the page. If that doesn't work, please try again later
+      </span>
+    </styles__VideoErrorBody>
   </div>
-  <div>
-    Please check your network connection and try refreshing the page. If that doesn't work, please try again later
-  </div>
-</div>
+</styles__VideoErrorContainer>
 `;

packages/video/__tests__/web/video-error.web.test.js

@@ -1,14 +1,12 @@
 import React from "react";
-import { AppRegistry } from "react-native-web";
 import { mount } from "enzyme";
 import {
   addSerializers,
   compose,
   enzymeRenderedSerializer,
   minimaliseTransform,
   minimalWebTransform,
-  print,
-  rnwTransform
+  print
 } from "@times-components/jest-serializer";
 import VideoError from "../../src/video-error";
 
@@ -18,8 +16,7 @@ addSerializers(
   compose(
     print,
     minimalWebTransform,
-    minimaliseTransform((value, key) => key === "style" || key === "className"),
-    rnwTransform(AppRegistry)
+    minimaliseTransform((value, key) => key === "style" || key === "className")
   )
 );
 

packages/video/__tests__/web/video-with-data-attributes.web.test.js

@@ -1,13 +1,11 @@
 import React from "react";
-import { AppRegistry } from "react-native-web";
 import TestRenderer from "react-test-renderer";
 import {
   addSerializers,
   compose,
   minimaliseTransform,
   minimalWebTransform,
   replacePropTransform,
-  rnwTransform,
   stylePrinter
 } from "@times-components/jest-serializer";
 import { hash, iterator } from "@times-components/test-utils";
@@ -30,8 +28,7 @@ addSerializers(
     minimalWebTransform,
     replacePropTransform(
       (value, key) => (key === "uri" || key === "poster" ? hash(value) : value)
-    ),
-    rnwTransform(AppRegistry)
+    )
   )
 );
 

packages/video/__tests__/web/video-with-provider.web.test.js

@@ -1,13 +1,11 @@
 import React from "react";
-import { AppRegistry } from "react-native-web";
 import TestRenderer from "react-test-renderer";
 import {
   addSerializers,
   compose,
   minimaliseTransform,
   minimalWebTransform,
   replacePropTransform,
-  rnwTransform,
   stylePrinter
 } from "@times-components/jest-serializer";
 import { hash, iterator } from "@times-components/test-utils";
@@ -39,8 +37,7 @@ addSerializers(
     minimalWebTransform,
     replacePropTransform(
       (value, key) => (key === "uri" || key === "poster" ? hash(value) : value)
-    ),
-    rnwTransform(AppRegistry)
+    )
   )
 );
 

packages/video/__tests__/web/video.web.test.js

@@ -1,13 +1,11 @@
 import React from "react";
-import { AppRegistry } from "react-native-web";
 import TestRenderer from "react-test-renderer";
 import {
   addSerializers,
   compose,
   minimaliseTransform,
   minimalWebTransform,
   replacePropTransform,
-  rnwTransform,
   stylePrinter
 } from "@times-components/jest-serializer";
 import { hash, iterator } from "@times-components/test-utils";
@@ -32,8 +30,7 @@ addSerializers(
     minimalWebTransform,
     replacePropTransform(
       (value, key) => (key === "src" || key === "poster" ? hash(value) : value)
-    ),
-    rnwTransform(AppRegistry)
+    )
   )
 );
 
@@ -44,7 +41,6 @@ const tests = [
       const testInstance = TestRenderer.create(
         <Video {...defaultVideoProps} is360 />
       );
-
       expect(testInstance.toJSON()).toMatchSnapshot();
     }
   },
@@ -57,7 +53,6 @@ const tests = [
 
       const VideoComponent = testInstance.root.findAllByType(InlineVideoPlayer);
       VideoComponent[0].instance.handlePlay();
-
       expect(testInstance).toMatchSnapshot();
     }
   }