-
-
-
- VIDEO
+
+
+
+
+ Video Icon
+
+
+
+
+ VIDEO
+
-
+
`;
diff --git a/packages/video-label/__tests__/web/video-label-with-style.web.test.js b/packages/video-label/__tests__/web/video-label-with-style.web.test.js
deleted file mode 100644
index 8fc5895cb05..00000000000
--- a/packages/video-label/__tests__/web/video-label-with-style.web.test.js
+++ /dev/null
@@ -1,80 +0,0 @@
-import React from "react";
-import { AppRegistry } from "react-native-web";
-import { mount } from "enzyme";
-import {
- addSerializers,
- compose,
- enzymeTreeSerializer,
- flattenStyleTransform,
- hoistStyleTransform,
- meltNative,
- minimalWebTransform,
- propsNoChildren,
- replaceTransform,
- rnwTransform,
- stylePrinter
-} from "@times-components/jest-serializer";
-import { iterator } from "@times-components/test-utils";
-import VideoLabel from "../../src/video-label";
-
-const styles = [
- "alignItems",
- "color",
- "flexDirection",
- "fontFamily",
- "fontSize",
- "fontWeight",
- "letterSpacing",
- "lineHeight",
- "marginBottom",
- "marginLeft",
- "padding",
- "paddingBottom",
- "position",
- "top"
-];
-
-addSerializers(
- expect,
- enzymeTreeSerializer(),
- compose(
- stylePrinter,
- flattenStyleTransform,
- hoistStyleTransform,
- minimalWebTransform,
- replaceTransform({
- IconVideo: propsNoChildren,
- ...meltNative
- }),
- rnwTransform(AppRegistry, styles)
- )
-);
-
-const tests = [
- {
- name: "video label with a title",
- test: () => {
- const wrapper = mount(
);
-
- expect(wrapper).toMatchSnapshot();
- }
- },
- {
- name: "video label without a title shows VIDEO",
- test: () => {
- const wrapper = mount(
);
-
- expect(wrapper).toMatchSnapshot();
- }
- },
- {
- name: "video label with the black default colour",
- test: () => {
- const wrapper = mount(
);
-
- expect(wrapper).toMatchSnapshot();
- }
- }
-];
-
-iterator(tests);
diff --git a/packages/video-label/__tests__/web/video-label.web.test.js b/packages/video-label/__tests__/web/video-label.web.test.js
index 2bcb3b272e7..2be6daa0a4c 100644
--- a/packages/video-label/__tests__/web/video-label.web.test.js
+++ b/packages/video-label/__tests__/web/video-label.web.test.js
@@ -1,69 +1,23 @@
import React from "react";
-import { AppRegistry } from "react-native-web";
-import { mount } from "enzyme";
-import {
- addSerializers,
- compose,
- enzymeTreeSerializer,
- meltNative,
- minimaliseTransform,
- minimalWebTransform,
- print,
- propsNoChildren,
- replaceTransform,
- rnwTransform
-} from "@times-components/jest-serializer";
-import { iterator } from "@times-components/test-utils";
+import { render } from "@testing-library/react";
+import "@testing-library/jest-dom";
import VideoLabel from "../../src/video-label";
-addSerializers(
- expect,
- enzymeTreeSerializer(),
- compose(
- print,
- minimalWebTransform,
- minimaliseTransform((value, key) => key === "style" || key === "className"),
- replaceTransform({
- IconVideo: propsNoChildren,
- ...meltNative
- }),
- rnwTransform(AppRegistry)
- )
-);
+describe("Video Label", () => {
+ it("shows the default text of VIDEO when no title is passed to the component", () => {
+ const { baseElement, getByText } = render(
);
+ expect(baseElement).toMatchSnapshot();
+ expect(getByText("VIDEO")).toBeVisible();
+ });
-const tests = [
- {
- name: "video label with a title",
- test: () => {
- const wrapper = mount(
);
+ it("renders the title that is passed to the component", () => {
+ const { baseElement, getByText } = render(
);
+ expect(baseElement).toMatchSnapshot();
+ expect(getByText("SWIMMING")).toBeVisible();
+ });
- expect(wrapper).toMatchSnapshot();
- }
- },
- {
- name: "video label without a title shows VIDEO",
- test: () => {
- const wrapper = mount(
);
-
- expect(wrapper).toMatchSnapshot();
- }
- },
- {
- name: "video label with null title shows VIDEO",
- test: () => {
- const wrapper = mount(
);
-
- expect(wrapper).toMatchSnapshot();
- }
- },
- {
- name: "video label with the black default colour",
- test: () => {
- const wrapper = mount(
);
-
- expect(wrapper).toMatchSnapshot();
- }
- }
-];
-
-iterator(tests);
+ it("renders the component in the color passed to it", () => {
+ const { baseElement } = render(
);
+ expect(baseElement).toMatchSnapshot();
+ });
+});
diff --git a/packages/video-label/package.json b/packages/video-label/package.json
index 4c084acad86..08dd3ca7893 100644
--- a/packages/video-label/package.json
+++ b/packages/video-label/package.json
@@ -21,10 +21,7 @@
"url": "git+https://github.com/newsuk/times-components.git"
},
"keywords": [
- "react-native-web",
"react",
- "native",
- "web",
"video-label",
"component"
],
@@ -34,30 +31,30 @@
},
"homepage": "https://github.com/newsuk/times-components#readme",
"dependencies": {
+ "@times-components/utils": "6.7.0",
"@times-components/icons": "2.16.12",
"@times-components/styleguide": "3.38.31",
"lodash.pick": "4.4.0",
- "prop-types": "15.7.2"
+ "prop-types": "15.7.2",
+ "styled-components": "4.3.2"
},
"devDependencies": {
"@babel/core": "7.4.4",
+ "@testing-library/jest-dom": "^5.12.0",
+ "@testing-library/react": "^12.1.2",
"@times-components/eslint-config-thetimes": "0.8.18",
"@times-components/jest-configurator": "2.8.0",
- "@times-components/jest-serializer": "3.2.29",
"@times-components/storybook": "4.2.1",
- "@times-components/test-utils": "2.3.10",
"babel-jest": "24.8.0",
"babel-loader": "8.0.5",
"babel-plugin-add-react-displayname": "0.0.5",
"babel-plugin-styled-components": "1.10.6",
"depcheck": "0.6.9",
- "enzyme": "3.9.0",
"eslint": "5.9.0",
"jest": "24.8.0",
"prettier": "1.14.3",
"react": "16.9.0",
"react-art": "16.6.3",
- "react-native-web": "0.11.4",
"webpack": "4.30.0",
"webpack-cli": "3.3.1"
},
@@ -67,9 +64,7 @@
},
"peerDependencies": {
"react": ">=16.9",
- "react-dom": ">=16.9",
- "react-native": ">=0.59",
- "react-native-web": "0.11.4"
+ "react-dom": ">=16.9"
},
"publishConfig": {
"access": "public"
diff --git a/packages/video-label/src/style/index.js b/packages/video-label/src/style/index.js
index cf3e72ab7ce..2f7c3e95ece 100644
--- a/packages/video-label/src/style/index.js
+++ b/packages/video-label/src/style/index.js
@@ -1,21 +1,30 @@
-import { StyleSheet } from "react-native";
-import sharedStyles from "./shared";
+import styleguideFactory, { spacing } from "@times-components/styleguide";
-const styles = StyleSheet.create({
- ...sharedStyles,
+const { fontFactory } = styleguideFactory();
+
+const styles = {
container: {
- ...sharedStyles.container,
+ alignItems: "flex-start",
+ flexDirection: "row",
+ marginTop: -1,
marginBottom: 1
},
iconContainer: {
- ...sharedStyles.iconContainer,
alignSelf: "center",
paddingBottom: 2
},
title: {
- ...sharedStyles.title,
- lineHeight: 12
+ ...fontFactory({
+ font: "supporting",
+ fontSize: "cardMetaMobile"
+ }),
+ flex: -1,
+ fontWeight: "400",
+ letterSpacing: 1.2,
+ lineHeight: 12,
+ marginLeft: spacing(1),
+ paddingTop: 1
}
-});
+};
export default styles;
diff --git a/packages/video-label/src/style/shared.js b/packages/video-label/src/style/shared.js
deleted file mode 100644
index 33257022bcd..00000000000
--- a/packages/video-label/src/style/shared.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import styleguideFactory, { spacing } from "@times-components/styleguide";
-
-const { fontFactory } = styleguideFactory();
-
-const styles = {
- container: {
- alignItems: "flex-start",
- flexDirection: "row",
- marginTop: -1
- },
- iconContainer: {
- paddingBottom: spacing(1)
- },
- title: {
- ...fontFactory({
- font: "supporting",
- fontSize: "cardMetaMobile"
- }),
- flex: -1,
- fontWeight: "400",
- letterSpacing: 1.2,
- lineHeight: 11,
- marginLeft: spacing(1),
- paddingTop: 1
- }
-};
-
-export default styles;
diff --git a/packages/video-label/src/video-label.js b/packages/video-label/src/video-label.js
index 13978c183c1..429f65aa404 100644
--- a/packages/video-label/src/video-label.js
+++ b/packages/video-label/src/video-label.js
@@ -1,19 +1,40 @@
import React from "react";
-import { View, Text } from "react-native";
+import { checkStylesForUnits, TcText, TcView } from "@times-components/utils";
import { IconVideo } from "@times-components/icons";
import PropTypes from "prop-types";
+import styled from "styled-components";
import styles from "./style";
-const VideoLabel = ({ color, title }) => (
-
-
-
-
- {title ? title.toUpperCase() : "VIDEO"}
-
-
-);
+const VideoLabelText = styled(TcText)`
+ ${checkStylesForUnits(styles.title)};
+`;
+
+const Container = styled(TcView)`
+ ${checkStylesForUnits(styles.container)};
+`;
+
+const IconContainer = styled(TcView)`
+ ${checkStylesForUnits(styles.iconContainer)};
+`;
+
+const VideoLabel = ({ color, title }) => {
+ const textStyles = {
+ ...styles.title
+ };
+
+ Object.assign(textStyles, { color });
+
+ return (
+
+
+
+
+ {title ? title.toUpperCase() : "VIDEO"}
+
+
+ );
+};
VideoLabel.propTypes = {
color: PropTypes.string,