@quintype/native-components 2.19.9 → 2.19.14

package/CHANGELOG.md

@@ -2,6 +2,29 @@
 
 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)
+
+
+### 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.10](https://github.com/quintype/native-components/compare/v2.19.9...v2.19.10) (2022-01-24)
+
+
+### 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.9](https://github.com/quintype/native-components/compare/v2.19.8...v2.19.9) (2022-01-13)
 
 ### [2.19.8](https://github.com/quintype/native-components/compare/v2.19.7...v2.19.8) (2022-01-10)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quintype/native-components",
-  "version": "2.19.9",
+  "version": "2.19.14",
   "description": "",
   "main": "src/index.js",
   "scripts": {
@@ -24,7 +24,7 @@
     "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",
+    "react-native-webview": "^11.0.0",
     "rn-fetch-blob": "^0.10.16"
   },
   "peerDependencies": {
@@ -34,7 +34,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 +55,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,
-  getTimeInFormat,
-} 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';
+  getTimeForStoryCards,
+} 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;
@@ -96,21 +99,20 @@ export const PrimaryStoryCard = (props) => {
         </Text>
         <View style={styles.storyTypeContainer}>{showStoryType()}</View>
       </ResponsiveImage>
-
-      <View style={styles.authorBlockContainer}>
-        <Text
-          style={autorStyle}
-          testID={COMP_GENERAL_CONSTANTS.primaryStoryAuthor}
-        >
-          {authorName}
-        </Text>
-        <Text
-          style={autorStyle}
-          testID={COMP_GENERAL_CONSTANTS.primaryStoryPubishedAt}
-        >
-          {getTimeInFormat(story['published-at'], DATE_FORMAT, locale)}
-        </Text>
-      </View>
+      <Text
+        style={autorStyle}
+        numberOfLines={2}
+        // TODO: Add corrected testID here
+        testID={COMP_CONTENT_CONSTANTS.authorName}
+      >
+        {authorName +
+          getTimeForStoryCards(
+            story["published-at"],
+            DATE_FORMAT,
+            locale,
+            translate
+          )}
+      </Text>
       <Text
         primary
         numberOfLines={3}
@@ -135,6 +137,6 @@ PrimaryStoryCard.propTypes = {
 };
 
 PrimaryStoryCard.defaultProps = {
-  cdn: '',
+  cdn: "",
   horizontalPadding: 12,
 };

package/src/components/PrimaryStoryCard/styles.js

@@ -3,15 +3,11 @@ export const storyStyles = (COLORS = {}, FONT_SIZE = {}, DARK_MODE = {}) => ({
     backgroundColor: COLORS.BRAND_WHITE,
     marginTop: 12,
   },
-  authorBlockContainer: {
-    alignItems: 'center',
-    flexDirection: 'row',
-    paddingVertical: 8,
-  },
   autorText: {
     color: COLORS?.BRAND_6,
     fontSize: FONT_SIZE.h5,
     lineHeight: FONT_SIZE.h5 * 1.3,
+    paddingVertical: 8,
   },
   divider: {
     backgroundColor: COLORS.BRAND_6,

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;
@@ -37,7 +40,7 @@ const PrimaryStoryCardNewBase = (props) => {
 
   const DATE_FORMAT = "d MMM, yyyy";
   const readTime = story["read-time"]
-    ? `${story["read-time"]} ${translate("min read")}`
+    ? `${story["read-time"]} ${translate("min read")} · `
     : "";
 
   const throttledOnpress = throttle(props.onPress, 1000);
@@ -95,20 +98,19 @@ const PrimaryStoryCardNewBase = (props) => {
           >
             {getStoryHeadline(story)}
           </Text>
-          <View style={styles.timestampContainer}>
-            {readTime ? (
-              <Text
-                style={timestampStyle}
-                testID={COMP_GENERAL_CONSTANTS.primaryStoryReadTime}
-              >{`${readTime} · `}</Text>
-            ) : null}
-            <Text
-              style={timestampStyle}
-              testID={COMP_GENERAL_CONSTANTS.primaryStoryPubishedAt}
-            >
-              {getTimeForStoryCards(story["published-at"], DATE_FORMAT, locale)}
-            </Text>
-          </View>
+          <Text
+            style={timestampStyle}
+            numberOfLines={2}
+            testID={COMP_CONTENT_CONSTANTS.publishedDate}
+          >
+            {readTime +
+              getTimeForStoryCards(
+                story["published-at"],
+                DATE_FORMAT,
+                locale,
+                translate
+              )}
+          </Text>
         </View>
         <View style={styles.icon}>{props.iconComponent}</View>
       </View>

package/src/components/PrimaryStoryCardNew/styles.js

@@ -12,16 +12,12 @@ export const storyStyles = (COLORS = {}, FONT_SIZE = {}) => ({
     flexShrink: 1,
     flex: 1,
   },
-  timestampContainer: {
-    alignItems: 'center',
-    flexDirection: 'row',
-    marginTop: 4,
-  },
   timestamp: {
     color: COLORS?.BRAND_BLACK,
     fontSize: FONT_SIZE.h5,
     lineHeight: FONT_SIZE.h5 * 1.2,
     opacity: 0.6,
+    marginTop: 4,
   },
   headline: {
     fontSize: FONT_SIZE.title,

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,
-  getTimeInFormat,
-} 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';
+  getTimeForStoryCards,
+} 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}>
@@ -116,20 +121,19 @@ export const SecondaryStoryCard = (props) => {
           {getStoryHeadline(story)?.trim()}
         </Text>
         <View style={styles.authorAndIconContainer}>
-          <View style={authorTextContainerStyle}>
-            <Text
-              style={authorTextStyle}
-              testID={COMP_GENERAL_CONSTANTS.secondaryStoryAuthor}
-            >
-              {authorName}
-            </Text>
-            <Text
-              style={authorTextStyle}
-              testID={COMP_GENERAL_CONSTANTS.secondaryStoryPubishedAt}
-            >
-              {getTimeInFormat(story['published-at'], DATE_FORMAT, locale)}
-            </Text>
-          </View>
+          <Text
+            style={authorTextStyle}
+            numberOfLines={2}
+            testID={COMP_CONTENT_CONSTANTS.authorName}
+          >
+            {authorName +
+              getTimeForStoryCards(
+                story["published-at"],
+                DATE_FORMAT,
+                locale,
+                translate
+              )}
+          </Text>
           <View style={iconStyles}>{props.iconComponent}</View>
         </View>
       </View>
@@ -149,6 +153,6 @@ SecondaryStoryCard.propTypes = TouchableOpacityProps && {
 };
 
 SecondaryStoryCard.defaultProps = {
-  cdn: '',
+  cdn: "",
   horizontalPadding: 12,
 };

package/src/components/SecondaryStoryCard/styles.js

@@ -22,10 +22,7 @@ export const secStoryCardStyles = ({ COLORS, FONT_SIZE, DARK_MODE }) => StyleShe
     lineHeight: FONT_SIZE.h6 * 1.3,
     opacity: 0.5,
     fontWeight: '500',
-  },
-  authorTextContainer: {
-    alignItems: 'center',
-    flexDirection: 'row',
+    paddingTop: 8,
   },
   headline: {
     color: COLORS.BRAND_BLACK,

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;
@@ -44,7 +47,7 @@ const SecondaryStoryCardNewBase = (props) => {
 
   const DATE_FORMAT = "d MMM, yyyy";
   const readTime = story["read-time"]
-    ? `${story["read-time"]} ${translate("min read")}`
+    ? `${story["read-time"]} ${translate("min read")} · `
     : "";
 
   const throttledOnpress = throttle(props.onPress, 1000);
@@ -102,20 +105,20 @@ const SecondaryStoryCardNewBase = (props) => {
         >
           {getStoryHeadline(story)?.trim()}
         </Text>
-        <View style={styles.timestampContainer}>
-          {readTime ? (
-            <Text
-              style={timestampStyle}
-              testID={COMP_GENERAL_CONSTANTS.secondaryStoryReadTime}
-            >{`${readTime} · `}</Text>
-          ) : null}
-          <Text
-            style={timestampStyle}
-            testID={COMP_GENERAL_CONSTANTS.secondaryStoryPubishedAt}
-          >
-            {getTimeForStoryCards(story["published-at"], DATE_FORMAT, locale)}
-          </Text>
-        </View>
+        <Text
+          style={timestampStyle}
+          numberOfLines={2}
+          // TODO: Add corrected testID here
+          testID={COMP_CONTENT_CONSTANTS.publishedDate}
+        >
+          {readTime +
+            getTimeForStoryCards(
+              story["published-at"],
+              DATE_FORMAT,
+              locale,
+              translate
+            )}
+        </Text>
       </View>
       <View style={styles.icon}>{props.iconComponent}</View>
     </TouchableOpacity>
@@ -128,7 +131,6 @@ SecondaryStoryCardNewBase.propTypes = TouchableOpacityProps && {
   headlineStyle: TextStyle,
   timestampStyle: TextStyle,
   story: PropTypes.any.isRequired,
-  collectionTestID: PropTypes.string,
   iconComponent: PropTypes.element,
   horizontalPadding: PropTypes.number,
 };

package/src/components/SecondaryStoryCardNew/styles.js

@@ -18,10 +18,6 @@ export const storyStyles = ({ COLORS, FONT_SIZE }) => StyleSheet.create({
     fontSize: FONT_SIZE.h5,
     lineHeight: FONT_SIZE.h5 * 1.2,
     opacity: 0.6,
-  },
-  timestampContainer: {
-    alignItems: 'center',
-    flexDirection: 'row',
     marginTop: 4,
   },
   headline: {

package/src/utils/timeUtils.js

@@ -15,14 +15,14 @@ export function getTimeInFormat(date, format, localTime) {
   return '';
 }
 
-export const getTimeForStoryCards = (date, format, localTime) => {
+export const getTimeForStoryCards = (date, format, localTime, translate) => {
   if (date) {
     const currentDate = new Date();
     const dateToFormat = new Date(date);
     const locale = dateFNSlocale[localTime];
     const distanceInMinutes = differenceInMinutes(currentDate, dateToFormat);
     if (distanceInMinutes <= 1440) {
-      return `published ${formatDistanceToNow(dateToFormat, { locale })} ago`;
+      return `${translate("published")} ${formatDistanceToNow(dateToFormat, { locale })} ${translate("ago")}`;
     }
     return dateFormat(dateToFormat, format, { locale });
   }