feat: video label (#704)

* chore: fix version number * feat: adds video-icon svg * feat: adds knobs to icons * chore: make linter happy * chore: uses styleguide colors in Icons * chore: update tests * chore: make linter happy * chore: removes addon-a11y * chore: adjusts styleguide colour names in icons * chore: removes : in icon test descriptions * feat: implements video-label * chore: makes icons-witdh optional * chore: fixes test names in icons * chore: align version numbers * chore: update snapshots * chore: video-label uses styleguide font now * chore: updates test names in video label * chore: align version numbers * chore: cleanup video-label * chore: refine video label style * chore: replace decimals with ratios in icons
newsuk · Mar 7, 2018 · d13c2a5 · d13c2a5
1 parent f9bf210
commit d13c2a5
Show file tree

Hide file tree

Showing 28 changed files with 632 additions and 7 deletions.
diff --git 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", () => (
   <View style={styles.wrapper}>
     <View style={styles.icon}>
-      <IconDiamond width={50} height={50} fillColour="#4D4D4D" />
+      <IconDiamond
+        width={50}
+        height={50}
+        fillColour={color("Diamond color", IconDiamond.defaultProps.fillColour)}
+      />
       <Text style={styles.label}>Diamond</Text>
     </View>
     <View style={styles.icon}>
-      <IconTwitter width={50} height={50} />
+      <IconTwitter
+        width={50}
+        height={50}
+        fillColour={color("Icon color", IconTwitter.defaultProps.fillColour)}
+      />
       <Text style={styles.label}>Twitter</Text>
     </View>
     <View style={styles.icon}>
-      <IconVideo width={50} height={50} />
+      <IconVideo
+        width={50}
+        height={50}
+        fillColour={color("Video color", IconVideo.defaultProps.fillColour)}
+      />
       <Text style={styles.label}>Video</Text>
     </View>
   </View>

diff --git 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 }) => (
-  <Svg width={width} height={height} viewBox="0 0 20 20">
+  <Svg width={width || height} height={height} viewBox="0 0 20 20">
     <G fill={fillColour}>
       <Path d="M 0,10 10,20 20,10 10,0 Z" />
     </G>

diff --git 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
@@ -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 }) => (
-  <Svg width={width} height={height} viewBox="-354.2 -279.4 750 600">
+  <Svg
+    width={width || height * ratio}
+    height={height}
+    viewBox="-354.2 -279.4 750 600"
+  >
     <Path
       d="M391.3-210.7c-28.9,10.9-57.8,21.7-86.7,25.3c32.5-18.1,54.2-50.6,68.7-83.1c-28.9,18.1-61.5,28.9-97.6,36.1
         	c-28.9-28.9-68.7-47-112-47c-83.1,0-151.8,68.7-151.8,151.8c0,10.8,0,25.3,3.6,36.1c-126.5-7.3-238.6-68.7-314.5-159

diff --git a/packages/icons/icons/video.js b/packages/icons/icons/video.js
@@ -6,8 +6,9 @@ import iconPropTypes from "./proptypes";
 const viewBox =
   "0.15463916957378387 0.049614034593105316 23.59917640686035 13.728596687316895";
 
+const ratio = 43 / 25;
 const IconVideo = ({ width, height, fillColour }) => (
-  <Svg width={width} height={height} viewBox={viewBox}>
+  <Svg width={width || height * ratio} height={height} viewBox={viewBox}>
     <Rect
       fill={fillColour}
       x="0.154639175"

diff --git a/packages/video-label/.babelrc b/packages/video-label/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets": ["env", "react", "stage-2"]
+}
diff --git a/packages/video-label/.eslintignore b/packages/video-label/.eslintignore
@@ -0,0 +1,3 @@
+**/node_modules/*
+**/coverage/*
+dist
diff --git a/packages/video-label/.eslintrc.json b/packages/video-label/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": ["@times-components/thetimes"]
+}
diff --git a/packages/video-label/.npmignore b/packages/video-label/.npmignore
@@ -0,0 +1,8 @@
+*.stories.js
+__tests__
+*.fructose.js
+*.test.js
+fixtures
+coverage
+android/**/test
+android/**/androidTest
diff --git a/packages/video-label/.npmrc b/packages/video-label/.npmrc
@@ -0,0 +1 @@
+save-exact=true
diff --git a/packages/video-label/.prettierignore b/packages/video-label/.prettierignore
@@ -0,0 +1,12 @@
+**/node_modules/*
+dist
+__snapshots__
+android/*
+ios/*
+CHANGELOG.md
+.*
+!*.json
+**/package.json
+**/coverage/*
+LICENSE
+yarn.lock
diff --git a/packages/video-label/LICENSE b/packages/video-label/LICENSE
@@ -0,0 +1,29 @@
+BSD 3-Clause License
+
+Copyright (c) 2017, News UK & Ireland Ltd
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+* Redistributions of source code must retain the above copyright notice, this
+  list of conditions and the following disclaimer.
+
+* Redistributions in binary form must reproduce the above copyright notice,
+  this list of conditions and the following disclaimer in the documentation
+  and/or other materials provided with the distribution.
+
+* Neither the name of the copyright holder nor the names of its
+  contributors may be used to endorse or promote products derived from
+  this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
diff --git a/packages/video-label/__tests__/.eslintrc.json b/packages/video-label/__tests__/.eslintrc.json
@@ -0,0 +1,5 @@
+{
+  "env": {
+    "jest": true
+  }
+}
diff --git a/packages/video-label/__tests__/android/__snapshots__/video-label.android.test.js.snap b/packages/video-label/__tests__/android/__snapshots__/video-label.android.test.js.snap
@@ -0,0 +1,116 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Video Label test on android renders VideoLabel 1`] = `
+<View
+  style={
+    Object {
+      "alignItems": "center",
+      "flexDirection": "row",
+    }
+  }
+>
+  <svg
+    height={12}
+    style={Object {}}
+    viewBox="0.15463916957378387 0.049614034593105316 23.59917640686035 13.728596687316895"
+    width={20.64}
+  >
+    <rect
+      fill="#1D1D1B"
+      height="13.5721404"
+      style={Object {}}
+      width="15.4550103"
+      x="0.154639175"
+      y="0.139754386"
+    />
+    <polygon
+      fill="#1D1D1B"
+      points="16.3405361 4.14989474 16.3405361 9.66442105 22.0216082 12.8146667 22.0216082 0.999894737"
+      style={Object {}}
+    />
+    <polygon
+      fill="#1D1D1B"
+      points="23.7538144 0.0496140351 22.7616495 0.643508772 22.7616495 13.1902105 23.7538144 13.7782105"
+      style={Object {}}
+    />
+  </svg>
+  <Text
+    accessible={true}
+    allowFontScaling={true}
+    ellipsizeMode="tail"
+    style={
+      Array [
+        Object {
+          "fontFamily": "GillSansMTStd-Medium",
+          "fontSize": 12,
+          "fontWeight": "400",
+          "letterSpacing": 1.2,
+          "lineHeight": 12,
+          "margin": 0,
+          "padding": 0,
+          "position": "relative",
+          "top": 2,
+        },
+        Object {
+          "color": "#008347",
+          "marginLeft": 5,
+        },
+      ]
+    }
+  >
+    V I D E O
+  </Text>
+  <Text
+    accessible={true}
+    allowFontScaling={true}
+    ellipsizeMode="tail"
+    style={
+      Array [
+        Object {
+          "fontFamily": "GillSansMTStd-Medium",
+          "fontSize": 12,
+          "fontWeight": "400",
+          "letterSpacing": 1.2,
+          "lineHeight": 12,
+          "margin": 0,
+          "padding": 0,
+          "position": "relative",
+          "top": 2,
+        },
+        Object {
+          "color": "#008347",
+          "marginLeft": 5,
+        },
+      ]
+    }
+  >
+    |
+  </Text>
+  <Text
+    accessible={true}
+    allowFontScaling={true}
+    ellipsizeMode="tail"
+    style={
+      Array [
+        Object {
+          "fontFamily": "GillSansMTStd-Medium",
+          "fontSize": 12,
+          "fontWeight": "400",
+          "letterSpacing": 1.2,
+          "lineHeight": 12,
+          "margin": 0,
+          "padding": 0,
+          "position": "relative",
+          "top": 2,
+        },
+        Object {
+          "color": "#008347",
+          "paddingLeft": 5,
+        },
+      ]
+    }
+  >
+    S W I M M I N G
+  </Text>
+</View>
+`;
diff --git a/packages/video-label/__tests__/android/jest.config.js 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
@@ -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
@@ -0,0 +1,115 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Video Label test on ios renders VideoLabel 1`] = `
+<View
+  style={
+    Object {
+      "alignItems": "center",
+      "flexDirection": "row",
+    }
+  }
+>
+  <svg
+    height={12}
+    style={Object {}}
+    viewBox="0.15463916957378387 0.049614034593105316 23.59917640686035 13.728596687316895"
+    width={20.64}
+  >
+    <rect
+      fill="#1D1D1B"
+      height="13.5721404"
+      style={Object {}}
+      width="15.4550103"
+      x="0.154639175"
+      y="0.139754386"
+    />
+    <polygon
+      fill="#1D1D1B"
+      points="16.3405361 4.14989474 16.3405361 9.66442105 22.0216082 12.8146667 22.0216082 0.999894737"
+      style={Object {}}
+    />
+    <polygon
+      fill="#1D1D1B"
+      points="23.7538144 0.0496140351 22.7616495 0.643508772 22.7616495 13.1902105 23.7538144 13.7782105"
+      style={Object {}}
+    />
+  </svg>
+  <Text
+    accessible={true}
+    allowFontScaling={true}
+    ellipsizeMode="tail"
+    style={
+      Array [
+        Object {
+          "fontFamily": "GillSansMTStd-Medium",
+          "fontSize": 12,
+          "fontWeight": "400",
+          "letterSpacing": 1.2,
+          "lineHeight": 12,
+          "margin": 0,
+          "padding": 0,
+          "position": "relative",
+          "top": 2,
+        },
+        Object {
+          "color": "#008347",
+          "marginLeft": 5,
+        },
+      ]
+    }
+  >
+    VIDEO
+  </Text>
+  <Text
+    accessible={true}
+    allowFontScaling={true}
+    ellipsizeMode="tail"
+    style={
+      Array [
+        Object {
+          "fontFamily": "GillSansMTStd-Medium",
+          "fontSize": 12,
+          "fontWeight": "400",
+          "letterSpacing": 1.2,
+          "lineHeight": 12,
+          "margin": 0,
+          "padding": 0,
+          "position": "relative",
+          "top": 2,
+        },
+        Object {
+          "marginLeft": 5,
+        },
+      ]
+    }
+  >
+    |
+  </Text>
+  <Text
+    accessible={true}
+    allowFontScaling={true}
+    ellipsizeMode="tail"
+    style={
+      Array [
+        Object {
+          "fontFamily": "GillSansMTStd-Medium",
+          "fontSize": 12,
+          "fontWeight": "400",
+          "letterSpacing": 1.2,
+          "lineHeight": 12,
+          "margin": 0,
+          "padding": 0,
+          "position": "relative",
+          "top": 2,
+        },
+        Object {
+          "color": "#008347",
+          "paddingLeft": 5,
+        },
+      ]
+    }
+  >
+    SWIMMING
+  </Text>
+</View>
+`;
diff --git a/packages/video-label/__tests__/ios/jest.config.js 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);