@quintype/native-components 2.19.11 → 2.19.15-chore-webview-version-pin.0

package/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [2.19.14](https://github.com/quintype/native-components/compare/v2.19.7...v2.19.14) (2022-04-04)
+
+
+### Bug Fixes
+
+* **story-cards:** Adds missing translations, fixes text overflow issue by adding multiline ([#179](https://github.com/quintype/native-components/issues/179)) ([93ab137](https://github.com/quintype/native-components/commit/93ab1372fad312b653e5d6d6992d625d217c9455))
+
+### [2.19.12](https://github.com/quintype/native-components/compare/v2.19.11...v2.19.12) (2022-02-08)
+
 ### [2.19.11](https://github.com/quintype/native-components/compare/v2.19.9...v2.19.11) (2022-01-24)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quintype/native-components",
-  "version": "2.19.11",
+  "version": "2.19.15-chore-webview-version-pin.0",
   "description": "",
   "main": "src/index.js",
   "scripts": {
@@ -24,7 +24,6 @@
     "react-native-share": "^3.7.0",
     "react-native-render-html": "^4.2.3",
     "react-native-vector-icons": "^7.0.0",
-    "react-native-webview": "^10.6.0",
     "rn-fetch-blob": "^0.10.16"
   },
   "peerDependencies": {
@@ -34,7 +33,7 @@
     "react-native": ">=0.63.2",
     "react-native-fast-image": ">=8.3.2",
     "react-native-pdf": ">=6.2.0",
-    "react-native-webview": ">=10.6.0",
+    "react-native-webview": ">=11.0.0",
     "rn-fetch-blob": ">=0.12.0"
   },
   "devDependencies": {
@@ -55,10 +54,10 @@
     "jest": "^26.4.0",
     "metro-react-native-babel-preset": "^0.62.0",
     "react": "^16.13.1",
-    "react-native": ">=0.63.2",
+    "react-native": "^0.68.0",
     "react-native-device-info": "^5.6.5",
     "react-native-gesture-handler": "^1.9.0",
-    "react-native-svg": "^12.1.0",
+    "react-native-svg": "^12.3.0",
     "react-navigation-hooks": "^1.1.0",
     "react-test-renderer": "16.13.1"
   },

package/src/components/JSEmbedElement/index.js

@@ -81,7 +81,9 @@ export const JSEmbedElement = (props) => {
     <View testID="embed-js">
       <WebView
         ref={webViewRef}
-        style={{ width, height, flex: 0 }}
+        style={{
+          width, height, flex: 0, opacity: 0.99,
+        }}
         automaticallyAdjustContentInsets={false}
         scrollEnabled={false}
         onMessage={handleOnMessage}

package/src/components/PrimaryStoryCard/index.js

@@ -1,31 +1,32 @@
-import { throttle } from 'lodash';
-import get from 'lodash/get';
-import PropTypes from 'prop-types';
-import React, { useContext } from 'react';
-import {
-  StyleSheet, TouchableOpacity, View,
-} from 'react-native';
-import Icon from 'react-native-vector-icons/FontAwesome';
+import { throttle } from "lodash";
+import get from "lodash/get";
+import PropTypes from "prop-types";
+import React, { useContext } from "react";
+import { StyleSheet, TouchableOpacity, View } from "react-native";
+import Icon from "react-native-vector-icons/FontAwesome";
 import {
   AppTheme,
   getImageMetadata,
   getImageSlug,
   getTimeForStoryCards,
-} from '../../utils';
-import { getStoryHeadline } from '../../utils/story';
-import { ResponsiveImage, Text } from '../index';
-import { storyStyles } from './styles';
-import { COMP_GENERAL_CONSTANTS } from '../../constants/component-constants/general-constants/constants';
+} from "../../utils";
+import { getStoryHeadline } from "../../utils/story";
+import { ResponsiveImage, Text } from "../index";
+import { storyStyles } from "./styles";
+import {
+  COMP_GENERAL_CONSTANTS,
+  COMP_CONTENT_CONSTANTS,
+} from "../../constants/component-constants";
 
 export const PrimaryStoryCard = (props) => {
   const { story = {} } = props;
   const { theme } = useContext(AppTheme);
 
-  const translate = get(theme, ['translate'], (word) => word);
+  const translate = get(theme, ["translate"], (word) => word);
 
   const { COLORS, FONT_SIZE, locale } = theme || {};
 
-  const DATE_FORMAT = 'd MMM, yyyy';
+  const DATE_FORMAT = "d MMM, yyyy";
 
   const styles = storyStyles(COLORS, FONT_SIZE);
   const containerStyle = StyleSheet.flatten([
@@ -41,9 +42,11 @@ export const PrimaryStoryCard = (props) => {
     props.authorTextStyle,
   ]);
 
-  const name = get(story.authors, [0, 'name']);
-  const authorName = name ? `${translate('By')} ${name} | ` : '';
-  const readTime = story['read-time'] ? `${story['read-time']} ${translate('min read')}` : '';
+  const name = get(story.authors, [0, "name"]);
+  const authorName = name ? `${translate("By")} ${name} | ` : "";
+  const readTime = story["read-time"]
+    ? `${story["read-time"]} ${translate("min read")}`
+    : "";
 
   const throttledOnpress = throttle(props.onPress, 1000);
 
@@ -60,14 +63,14 @@ export const PrimaryStoryCard = (props) => {
     </View>
   );
   const showStoryType = () => {
-    switch (story['story-template']) {
-      case 'text':
+    switch (story["story-template"]) {
+      case "text":
         return null;
-      case 'photo':
-        return showIcon('photo');
-      case 'video':
-        return showIcon('play');
-      case 'live-blog':
+      case "photo":
+        return showIcon("photo");
+      case "video":
+        return showIcon("play");
+      case "live-blog":
         return showLiveBlogIcon();
       default:
         null;
@@ -100,6 +103,7 @@ export const PrimaryStoryCard = (props) => {
         style={autorStyle}
         numberOfLines={2}
         // TODO: Add corrected testID here
+        testID={COMP_CONTENT_CONSTANTS.authorName}
       >
         {authorName +
           getTimeForStoryCards(
@@ -133,6 +137,6 @@ PrimaryStoryCard.propTypes = {
 };
 
 PrimaryStoryCard.defaultProps = {
-  cdn: '',
+  cdn: "",
   horizontalPadding: 12,
 };

package/src/components/PrimaryStoryCardNew/index.js

@@ -12,7 +12,10 @@ import {
 import { getStoryHeadline } from "../../utils/story";
 import { ResponsiveImage, Text } from "../index";
 import { storyStyles } from "./styles";
-import { COMP_GENERAL_CONSTANTS } from "../../constants/component-constants/general-constants/constants";
+import {
+  COMP_GENERAL_CONSTANTS,
+  COMP_CONTENT_CONSTANTS,
+} from "../../constants/component-constants";
 
 const PrimaryStoryCardNewBase = (props) => {
   const { story = {} } = props;
@@ -98,7 +101,7 @@ const PrimaryStoryCardNewBase = (props) => {
           <Text
             style={timestampStyle}
             numberOfLines={2}
-            // TODO: Add corrected testID here
+            testID={COMP_CONTENT_CONSTANTS.publishedDate}
           >
             {readTime +
               getTimeForStoryCards(

package/src/components/SecondaryStoryCard/index.js

@@ -1,7 +1,7 @@
-import { throttle } from 'lodash';
-import get from 'lodash/get';
-import PropTypes from 'prop-types';
-import React, { useContext } from 'react';
+import { throttle } from "lodash";
+import get from "lodash/get";
+import PropTypes from "prop-types";
+import React, { useContext } from "react";
 import {
   Image,
   StyleSheet,
@@ -9,28 +9,31 @@ import {
   View,
   TextStyle,
   TouchableOpacityProps,
-} from 'react-native';
-import Icon from 'react-native-vector-icons/FontAwesome';
+} from "react-native";
+import Icon from "react-native-vector-icons/FontAwesome";
 import {
   AppTheme,
   getImageMetadata,
   getImageSlug,
   getTimeForStoryCards,
-} from '../../utils';
-import { getStoryHeadline } from '../../utils/story';
-import { ResponsiveImage, Text } from '../index';
-import { secStoryCardStyles } from './styles';
-import { COMP_GENERAL_CONSTANTS } from '../../constants/component-constants/general-constants/constants';
+} from "../../utils";
+import { getStoryHeadline } from "../../utils/story";
+import { ResponsiveImage, Text } from "../index";
+import { secStoryCardStyles } from "./styles";
+import {
+  COMP_GENERAL_CONSTANTS,
+  COMP_CONTENT_CONSTANTS,
+} from "../../constants/component-constants";
 
 export const SecondaryStoryCard = (props) => {
   const { theme } = useContext(AppTheme);
-  const translate = get(theme, ['translate'], (word) => word);
+  const translate = get(theme, ["translate"], (word) => word);
 
   const { locale, COLORS } = theme;
   const styles = secStoryCardStyles(theme);
   const { story = {} } = props;
 
-  const DATE_FORMAT = 'd MMM, yyyy';
+  const DATE_FORMAT = "d MMM, yyyy";
 
   const containerStyle = StyleSheet.flatten([
     styles.container,
@@ -49,9 +52,11 @@ export const SecondaryStoryCard = (props) => {
     styles.authorTextContainer,
     props.authorTextContainer,
   ]);
-  const name = get(story.authors, [0, 'name']);
-  const authorName = name ? `${translate('By')} ${name} | ` : '';
-  const readTime = story['read-time'] ? `${story['read-time']} ${translate('min read')}` : '';
+  const name = get(story.authors, [0, "name"]);
+  const authorName = name ? `${translate("By")} ${name} | ` : "";
+  const readTime = story["read-time"]
+    ? `${story["read-time"]} ${translate("min read")}`
+    : "";
 
   const throttledOnpress = throttle(props.onPress, 1000);
 
@@ -69,14 +74,14 @@ export const SecondaryStoryCard = (props) => {
   );
 
   const showStoryType = () => {
-    switch (story['story-template']) {
-      case 'text':
+    switch (story["story-template"]) {
+      case "text":
         return null;
-      case 'photo':
-        return showIcon('photo');
-      case 'video':
-        return showIcon('play');
-      case 'live-blog':
+      case "photo":
+        return showIcon("photo");
+      case "video":
+        return showIcon("play");
+      case "live-blog":
         return showLiveBlogIcon();
       default:
         null;
@@ -92,8 +97,8 @@ export const SecondaryStoryCard = (props) => {
     >
       <ResponsiveImage
         metaData={getImageMetadata(story)}
-        slug={getImageSlug(story) || ''}
-        cdn={props.cdn || ''}
+        slug={getImageSlug(story) || ""}
+        cdn={props.cdn || ""}
         imageWidth={props.imageWidth}
       >
         <Text style={styles.xminContainer}>
@@ -119,7 +124,7 @@ export const SecondaryStoryCard = (props) => {
           <Text
             style={authorTextStyle}
             numberOfLines={2}
-            // TODO: Add corrected testID here
+            testID={COMP_CONTENT_CONSTANTS.authorName}
           >
             {authorName +
               getTimeForStoryCards(
@@ -148,6 +153,6 @@ SecondaryStoryCard.propTypes = TouchableOpacityProps && {
 };
 
 SecondaryStoryCard.defaultProps = {
-  cdn: '',
+  cdn: "",
   horizontalPadding: 12,
 };

package/src/components/SecondaryStoryCardNew/index.js

@@ -19,7 +19,10 @@ import {
 import { getStoryHeadline } from "../../utils/story";
 import { ResponsiveImage, Text } from "../index";
 import { storyStyles } from "./styles";
-import { COMP_GENERAL_CONSTANTS } from "../../constants/component-constants/general-constants/constants";
+import {
+  COMP_GENERAL_CONSTANTS,
+  COMP_CONTENT_CONSTANTS,
+} from "../../constants/component-constants";
 
 const SecondaryStoryCardNewBase = (props) => {
   const { story = {} } = props;
@@ -106,6 +109,7 @@ const SecondaryStoryCardNewBase = (props) => {
           style={timestampStyle}
           numberOfLines={2}
           // TODO: Add corrected testID here
+          testID={COMP_CONTENT_CONSTANTS.publishedDate}
         >
           {readTime +
             getTimeForStoryCards(
@@ -127,7 +131,6 @@ SecondaryStoryCardNewBase.propTypes = TouchableOpacityProps && {
   headlineStyle: TextStyle,
   timestampStyle: TextStyle,
   story: PropTypes.any.isRequired,
-  collectionTestID: PropTypes.string,
   iconComponent: PropTypes.element,
   horizontalPadding: PropTypes.number,
 };