diff --git a/packages/icons/icons.stories.js b/packages/icons/icons.stories.js index 1cafef51e58..966b72eeec2 100644 --- a/packages/icons/icons.stories.js +++ b/packages/icons/icons.stories.js @@ -2,6 +2,7 @@ import React from "react"; import { View, StyleSheet, Text } from "react-native"; import { storiesOf } from "@storybook/react-native"; import { fonts } from "@times-components/styleguide"; +import { color } from "@storybook/addon-knobs"; import { IconDiamond, IconTwitter, IconVideo } from "./icons"; const borderWidth = 1; @@ -37,15 +38,27 @@ const styles = StyleSheet.create({ storiesOf("Primitives/Icons", module).add("Icons", () => ( - + Diamond - + Twitter - + Video diff --git a/packages/icons/icons/diamond.js b/packages/icons/icons/diamond.js index 21590b8aa0e..13d47e31598 100644 --- a/packages/icons/icons/diamond.js +++ b/packages/icons/icons/diamond.js @@ -4,7 +4,7 @@ import Svg, { G, Path } from "svgs"; import iconPropTypes from "./proptypes"; const IconDiamond = ({ width, height, fillColour }) => ( - + diff --git a/packages/icons/icons/proptypes.js b/packages/icons/icons/proptypes.js index a1816accd98..b99ce42cb2c 100644 --- a/packages/icons/icons/proptypes.js +++ b/packages/icons/icons/proptypes.js @@ -3,5 +3,5 @@ import PropTypes from "prop-types"; export default { fillColour: PropTypes.string, height: PropTypes.number.isRequired, - width: PropTypes.number.isRequired + width: PropTypes.number }; diff --git a/packages/icons/icons/twitter.js b/packages/icons/icons/twitter.js index eba647a0c0f..c866faa0b08 100644 --- a/packages/icons/icons/twitter.js +++ b/packages/icons/icons/twitter.js @@ -3,8 +3,13 @@ import { colours } from "@times-components/styleguide"; import Svg, { Path } from "svgs"; import iconPropTypes from "./proptypes"; +const ratio = 75 / 60; const IconTwitter = ({ width, height, fillColour }) => ( - + ( - + + + + + + + + V I D E O + + + | + + + S W I M M I N G + + +`; diff --git a/packages/video-label/__tests__/android/jest.config.js b/packages/video-label/__tests__/android/jest.config.js new file mode 100644 index 00000000000..00698649b31 --- /dev/null +++ b/packages/video-label/__tests__/android/jest.config.js @@ -0,0 +1,3 @@ +const jestConfigurator = require("@times-components/jest-configurator").default; + +module.exports = jestConfigurator("android", __dirname); diff --git a/packages/video-label/__tests__/android/video-label.android.test.js b/packages/video-label/__tests__/android/video-label.android.test.js new file mode 100644 index 00000000000..a1f3dbccd6a --- /dev/null +++ b/packages/video-label/__tests__/android/video-label.android.test.js @@ -0,0 +1,5 @@ +import shared from "../shared"; + +describe("Video Label test on android", () => { + shared(); +}); diff --git a/packages/video-label/__tests__/ios/__snapshots__/video-label.ios.test.js.snap b/packages/video-label/__tests__/ios/__snapshots__/video-label.ios.test.js.snap new file mode 100644 index 00000000000..a6bc0717d17 --- /dev/null +++ b/packages/video-label/__tests__/ios/__snapshots__/video-label.ios.test.js.snap @@ -0,0 +1,115 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Video Label test on ios renders VideoLabel 1`] = ` + + + + + + + + VIDEO + + + | + + + SWIMMING + + +`; diff --git a/packages/video-label/__tests__/ios/jest.config.js b/packages/video-label/__tests__/ios/jest.config.js new file mode 100644 index 00000000000..0bb9299bff0 --- /dev/null +++ b/packages/video-label/__tests__/ios/jest.config.js @@ -0,0 +1,3 @@ +const jestConfigurator = require("@times-components/jest-configurator").default; + +module.exports = jestConfigurator("ios", __dirname); diff --git a/packages/video-label/__tests__/ios/video-label.ios.test.js b/packages/video-label/__tests__/ios/video-label.ios.test.js new file mode 100644 index 00000000000..e9b9542c84a --- /dev/null +++ b/packages/video-label/__tests__/ios/video-label.ios.test.js @@ -0,0 +1,5 @@ +import shared from "../shared"; + +describe("Video Label test on ios", () => { + shared(); +}); diff --git a/packages/video-label/__tests__/shared.js b/packages/video-label/__tests__/shared.js new file mode 100644 index 00000000000..5d596872a77 --- /dev/null +++ b/packages/video-label/__tests__/shared.js @@ -0,0 +1,14 @@ +import "react-native"; +import React from "react"; +import renderer from "react-test-renderer"; +import VideoLabel from "../video-label"; + +export default () => { + it("renders VideoLabel", () => { + const tree = renderer + .create() + .toJSON(); + + expect(tree).toMatchSnapshot(); + }); +}; diff --git a/packages/video-label/__tests__/web/__snapshots__/video-label.web.test.js.snap b/packages/video-label/__tests__/web/__snapshots__/video-label.web.test.js.snap new file mode 100644 index 00000000000..257a09ed078 --- /dev/null +++ b/packages/video-label/__tests__/web/__snapshots__/video-label.web.test.js.snap @@ -0,0 +1,86 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Video Label test on web renders VideoLabel 1`] = ` +
+ + + + + +
+ VIDEO +
+
+ | +
+
+ SWIMMING +
+
+`; diff --git a/packages/video-label/__tests__/web/jest.config.js b/packages/video-label/__tests__/web/jest.config.js new file mode 100644 index 00000000000..9d6bc428280 --- /dev/null +++ b/packages/video-label/__tests__/web/jest.config.js @@ -0,0 +1,3 @@ +const jestConfigurator = require("@times-components/jest-configurator").default; + +module.exports = jestConfigurator("web", __dirname); diff --git a/packages/video-label/__tests__/web/video-label.web.test.js b/packages/video-label/__tests__/web/video-label.web.test.js new file mode 100644 index 00000000000..9adddbe23e2 --- /dev/null +++ b/packages/video-label/__tests__/web/video-label.web.test.js @@ -0,0 +1,5 @@ +import shared from "../shared"; + +describe("Video Label test on web", () => { + shared(); +}); diff --git a/packages/video-label/package.json b/packages/video-label/package.json new file mode 100644 index 00000000000..0892d0de330 --- /dev/null +++ b/packages/video-label/package.json @@ -0,0 +1,69 @@ +{ + "name": "@times-components/video-label", + "version": "0.0.1", + "description": "A label for articles with videos", + "main": "video-label", + "scripts": { + "fmt": "prettier --write '**/*.*'", + "prettier:diff": "prettier --list-different '**/*.*'", + "lint": "eslint . && yarn prettier:diff", + "test:android": "jest --config='./__tests__/android/jest.config.js'", + "test:ios": "jest --config='./__tests__/ios/jest.config.js'", + "test:web": "jest --config='./__tests__/web/jest.config.js'", + "test:all": "yarn test:android --coverage & yarn test:ios --coverage & yarn test:web --coverage", + "dextrose-stories": "dextrose generate-stories $(pwd)", + "dextrose-clean": "dextrose clean-stories $(pwd)" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/newsuk/times-components.git" + }, + "keywords": [ + "react-native-web", + "react", + "native", + "web", + "video-label", + "component" + ], + "license": "BSD-3-Clause", + "bugs": { + "url": "https://github.com/newsuk/times-components/issues" + }, + "homepage": "https://github.com/newsuk/times-components#readme", + "dependencies": { + "@times-components/icons": "0.1.21", + "@times-components/styleguide": "0.3.7", + "lodash.invert": "4.3.0", + "prop-types": "15.6.0" + }, + "devDependencies": { + "@storybook/addon-knobs": "3.3.14", + "@storybook/react-native": "3.3.14", + "@times-components/eslint-config-thetimes": "0.1.3", + "@times-components/jest-configurator": "0.2.1", + "@times-components/storybook": "0.4.2", + "dextrose": "1.5.0", + "enzyme": "3.3.0", + "enzyme-to-json": "3.3.0", + "eslint": "4.9.0", + "jest": "21.2.1", + "prettier": "1.8.2", + "react": "16.2.0", + "react-dom": "16.2.0", + "react-native": "0.53.3", + "react-native-web": "0.3.2", + "react-test-renderer": "16.2.0" + }, + "peerDependencies": { + "babel-preset-env": "1.6.1", + "babel-preset-stage-2": "6.24.1", + "react": ">=16", + "react-dom": ">=16", + "react-native": ">=0.50", + "react-native-web": ">=0.3" + }, + "publishConfig": { + "access": "public" + } +} diff --git a/packages/video-label/style/index.js b/packages/video-label/style/index.js new file mode 100644 index 00000000000..62205d67a1d --- /dev/null +++ b/packages/video-label/style/index.js @@ -0,0 +1,17 @@ +import { fonts } from "@times-components/styleguide"; + +const styles = { + title: { + fontFamily: fonts.supporting, + fontSize: 12, + lineHeight: 12, + fontWeight: "400", + letterSpacing: 1.2, + padding: 0, + margin: 0, + position: "relative", + top: 2 + } +}; + +export default styles; diff --git a/packages/video-label/video-label.android.js b/packages/video-label/video-label.android.js new file mode 100644 index 00000000000..3741bfc73d2 --- /dev/null +++ b/packages/video-label/video-label.android.js @@ -0,0 +1,43 @@ +import React from "react"; +import { View, Text } from "react-native"; +import { IconVideo } from "@times-components/icons"; +import PropTypes from "prop-types"; +import styles from "./style"; + +// apply transformations to add uppercase and letter spacing. +// letterSpacing CSS prop does not work on android: +// https://github.com/facebook/react-native/pull/13199 +const beautifyTitle = title => + title + .toUpperCase() + .split("") + .join("\u200A"); + +const VideoLabel = ({ title, color }) => ( + + + + {beautifyTitle("VIDEO")} + + {title ? ( + | + ) : null} + {title ? ( + + {beautifyTitle(title)} + + ) : null} + +); + +VideoLabel.propTypes = { + title: PropTypes.string, + color: PropTypes.string +}; + +VideoLabel.defaultProps = { + title: "", + color: "black" +}; + +export default VideoLabel; diff --git a/packages/video-label/video-label.js b/packages/video-label/video-label.js new file mode 100644 index 00000000000..abdd1c14804 --- /dev/null +++ b/packages/video-label/video-label.js @@ -0,0 +1,30 @@ +import React from "react"; +import { Text, View } from "react-native"; +import { IconVideo } from "@times-components/icons"; +import PropTypes from "prop-types"; +import styles from "./style"; + +const VideoLabel = ({ title, color }) => ( + + + VIDEO + {title ? | : null} + {title ? ( + + {title.toUpperCase()} + + ) : null} + +); + +VideoLabel.propTypes = { + title: PropTypes.string, + color: PropTypes.string +}; + +VideoLabel.defaultProps = { + title: "", + color: "black" +}; + +export default VideoLabel; diff --git a/packages/video-label/video-label.stories.js b/packages/video-label/video-label.stories.js new file mode 100644 index 00000000000..3466a9d628d --- /dev/null +++ b/packages/video-label/video-label.stories.js @@ -0,0 +1,28 @@ +import "react-native"; +import React from "react"; +import { storiesOf } from "@storybook/react-native"; +import { select } from "@storybook/addon-knobs/react"; +import invert from "lodash.invert"; +import { colours } from "@times-components/styleguide"; +import VideoLabel from "./video-label"; + +storiesOf("Primitives/VideoLabel", module) + .add("VideoLabel without title", () => ( + + )) + .add("VideoLabel with title", () => ( + + ));