@quintype/native-components 2.19.6 → 2.19.11

package/CHANGELOG.md

@@ -2,6 +2,34 @@
 
 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.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)
+
+### [2.19.7](https://github.com/quintype/native-components/compare/v2.19.0...v2.19.7) (2022-01-07)
+
+
+### Bug Fixes
+
+* **AlsoRead:** Changed dark-mode color for the text :hammer: ([#170](https://github.com/quintype/native-components/issues/170)) ([67f1e61](https://github.com/quintype/native-components/commit/67f1e61fd4b76ea6fa65f565006214981d0bb8a8))
+* **AlsoRead:** Fixed card height :hammer: ([#174](https://github.com/quintype/native-components/issues/174)) ([6ce7a60](https://github.com/quintype/native-components/commit/6ce7a6078ec699f0f3df74d8136fc64070921caa))
+* **Navigator:** Fixed Section title text overflow :hammer: ([#176](https://github.com/quintype/native-components/issues/176)) ([249672b](https://github.com/quintype/native-components/commit/249672b44f6559190e930fc78a11d83a8e94c009))
+* **old-UI:** Fixes all padding/image-aspect-ratio inconsistencies 🔨  ([#169](https://github.com/quintype/native-components/issues/169)) ([f3b8850](https://github.com/quintype/native-components/commit/f3b88507c02985ff83aadd266e0dbd04438fd441))
+
 ### [2.19.6](https://github.com/quintype/native-components/compare/v2.19.5...v2.19.6) (2021-12-30)
 
 ### [2.19.5](https://github.com/quintype/native-components/compare/v2.19.3...v2.19.5) (2021-12-29)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quintype/native-components",
-  "version": "2.19.6",
+  "version": "2.19.11",
   "description": "",
   "main": "src/index.js",
   "scripts": {

package/src/components/ActionText/ActionText.js

@@ -1,18 +1,17 @@
-import { throttle } from 'lodash';
-import PropTypes from 'prop-types';
-import React from 'react';
-import { TouchableOpacity } from 'react-native';
+import { throttle } from "lodash";
+import PropTypes from "prop-types";
+import React from "react";
+import { TouchableOpacity } from "react-native";
+import { COMP_GENERAL_CONSTANTS } from "../../constants/component-constants/general-constants/constants";
 
-export const ActionText = ({
-  onPress, endPoint, children, actionTextID, disablePress,
-}) => {
+export const ActionText = ({ onPress, endPoint, children, disablePress }) => {
   const handleTagPress = () => onPress(endPoint);
   const throttledOnpress = throttle(handleTagPress, 1000);
 
   return (
     <TouchableOpacity
       onPress={throttledOnpress}
-      testID={actionTextID}
+      testID={COMP_GENERAL_CONSTANTS.actionTextTouch}
       disabled={disablePress}
     >
       {children}
@@ -25,5 +24,4 @@ ActionText.propTypes = {
   endPoint: PropTypes.object,
   disablePress: PropTypes.bool,
   children: PropTypes.any,
-  actionTextID: PropTypes.string,
 };

package/src/components/ActionText/ActionText.test.js

@@ -4,22 +4,19 @@ import 'react-native';
 import { mockContext } from '../../utils';
 import { Text } from '../Text';
 import { ActionText } from './ActionText';
+import { COMP_GENERAL_CONSTANTS } from '../../constants/component-constants';
 
 describe('Test Action Text :', () => {
   test('should render properly :', () => {
     const throttle = jest.fn();
     const { getByTestId } = render(
       mockContext(
-        <ActionText
-          onPress={throttle}
-          endPoint={{ slug: '/sample-data' }}
-          actionTextID="actionText"
-        >
+        <ActionText onPress={throttle} endPoint={{ slug: '/sample-data' }}>
           <Text testID="sampleText">Sample Data</Text>
         </ActionText>,
       ),
     );
-    const element = getByTestId('actionText');
+    const element = getByTestId(COMP_GENERAL_CONSTANTS.actionTextTouch);
     expect(element.props.children).toBeDefined();
   });
 
@@ -27,17 +24,13 @@ describe('Test Action Text :', () => {
     const throttle = await jest.fn();
     const { getByTestId } = render(
       mockContext(
-        <ActionText
-          onPress={throttle}
-          endPoint={{ slug: '/sample-data' }}
-          actionTextID="actionText"
-        >
+        <ActionText onPress={throttle} endPoint={{ slug: '/sample-data' }}>
           <Text testID="sampleText">Sample Data</Text>
         </ActionText>,
       ),
     );
 
-    const element = getByTestId('actionText');
+    const element = getByTestId(COMP_GENERAL_CONSTANTS.actionTextTouch);
     fireEvent(element, 'press');
     expect(throttle).toHaveBeenCalled();
   });

package/src/components/AuthorRow/AuthorRow.test.js

@@ -3,6 +3,7 @@ import React from 'react';
 import 'react-native';
 import { mockContext } from '../../utils';
 import { AuthorRow } from './index';
+import { COMP_CONTENT_CONSTANTS } from '../../constants/component-constants';
 
 const data = [
   {
@@ -26,15 +27,9 @@ const data = [
 describe('Test Author Row :', () => {
   test('should render Author name properly', () => {
     const { getByTestId } = render(
-      mockContext(
-        <AuthorRow
-          authors={data}
-          authorNameTestID="authorName"
-          cdn="gumlet.assettype.com"
-        />,
-      ),
+      mockContext(<AuthorRow authors={data} cdn="gumlet.assettype.com" />),
     );
-    const element = getByTestId('authorName');
+    const element = getByTestId(COMP_CONTENT_CONSTANTS.authorName);
     expect(element.props.children).toBe('Raghavendra Vaidya');
   });
 
@@ -49,7 +44,7 @@ describe('Test Author Row :', () => {
         />,
       ),
     );
-    const element = getByTestId('authorImage');
+    const element = getByTestId(COMP_CONTENT_CONSTANTS.authorImage);
     expect(element.props.children).toBeDefined();
   });
 });

package/src/components/AuthorRow/index.js

@@ -1,26 +1,24 @@
-import PropTypes from 'prop-types';
-import React, { useContext } from 'react';
-import { View } from 'react-native';
-import Icon from 'react-native-vector-icons/FontAwesome';
-import { ResponsiveImage, Text } from '../index';
-import { ActionText } from '../ActionText/ActionText';
+import PropTypes from "prop-types";
+import React, { useContext } from "react";
+import { View } from "react-native";
+import Icon from "react-native-vector-icons/FontAwesome";
+import { ResponsiveImage, Text } from "../index";
+import { ActionText } from "../ActionText/ActionText";
 
-import { authorRowStyleSheet } from './styles';
-import { AppTheme } from '../../utils';
+import { authorRowStyleSheet } from "./styles";
+import { AppTheme } from "../../utils";
+import { COMP_CONTENT_CONSTANTS } from "../../constants/component-constants/content-constants/constants";
 
 export const AuthorRow = ({
   authors,
   onPress,
   cdn,
-  authorImageTestID,
-  actionTextID,
   authorFallBackTestID,
-  authorNameTestID,
   readtime,
   disablePress,
 }) => {
   const { theme } = useContext(AppTheme);
-  const { COLORS ,translate} = theme;
+  const { COLORS, translate } = theme;
   const styles = authorRowStyleSheet(theme);
 
   return (
@@ -31,11 +29,14 @@ export const AuthorRow = ({
         }
         return (
           <View style={styles.container} key={author.id}>
-            <View style={styles.imageBlock} testID={authorImageTestID}>
-              {author?.['avatar-s3-key'] ? (
+            <View
+              style={styles.imageBlock}
+              testID={COMP_CONTENT_CONSTANTS.authorImage}
+            >
+              {author?.["avatar-s3-key"] ? (
                 <ResponsiveImage
                   source={{
-                    uri: `${cdn}/${author?.['avatar-s3-key']}`,
+                    uri: `${cdn}/${author?.["avatar-s3-key"]}`,
                   }}
                   style={styles.avatarImage}
                   imageWidth={50}
@@ -55,11 +56,13 @@ export const AuthorRow = ({
             <ActionText
               onPress={onPress}
               endPoint={author}
-              testID={actionTextID}
               disablePress={disablePress}
             >
               <View style={styles.descriptionBlock}>
-                <Text style={styles.authorStyle} testID={authorNameTestID}>
+                <Text
+                  style={styles.authorStyle}
+                  testID={COMP_CONTENT_CONSTANTS.authorName}
+                >
                   {author.name}
                 </Text>
               </View>
@@ -69,7 +72,9 @@ export const AuthorRow = ({
       })}
       {readtime ? (
         <View style={styles.readtimeComponent}>
-          <Text style={styles.readtime}>{`|  ${readtime} ${translate("min read")}`}</Text>
+          <Text style={styles.readtime}>{`|  ${readtime} ${translate(
+            "min read"
+          )}`}</Text>
         </View>
       ) : null}
     </View>
@@ -82,8 +87,5 @@ AuthorRow.propTypes = {
   cdn: PropTypes.string.isRequired,
   disablePress: PropTypes.bool,
   authorFallBackTestID: PropTypes.string,
-  authorImageTestID: PropTypes.string,
-  authorNameTestID: PropTypes.string,
-  actionTextID: PropTypes.string,
   readtime: PropTypes.number,
 };

package/src/components/Button/index.js

@@ -1,14 +1,15 @@
-import PropTypes from 'prop-types';
-import React, { useContext } from 'react';
+import PropTypes from "prop-types";
+import React, { useContext } from "react";
 import {
-  StyleSheet, TouchableOpacity,
+  StyleSheet,
+  TouchableOpacity,
   View,
-
   ViewPropTypes,
-} from 'react-native';
-import { AppTheme } from '../../utils';
-import { Text } from '../Text';
-import { styles } from './styles';
+} from "react-native";
+import { AppTheme } from "../../utils";
+import { Text } from "../Text";
+import { styles } from "./styles";
+import { COMP_GENERAL_CONSTANTS } from "../../constants/component-constants/general-constants/constants";
 
 export const Button = (props) => {
   const { icon, text, onPress } = props;
@@ -21,7 +22,10 @@ export const Button = (props) => {
 
   return (
     <View>
-      <TouchableOpacity onPress={onPress}>
+      <TouchableOpacity
+        onPress={onPress}
+        testID={COMP_GENERAL_CONSTANTS.buttonTouch}
+      >
         <View style={btnStyle}>
           <Text style={textStyle}>{text}</Text>
           {icon}

package/src/components/CustomSwitch/index.js

@@ -23,7 +23,7 @@ export const CustomSwitch = ({
   };
 
   return (
-    <View style={styles.container}>
+    <View style={styles.container} testID={COMP_GENERAL_CONSTANTS.customSwitch}>
       <View style={styles.textContainer}>
         {!iconName ? null : (
           <View style={styles.iconStyle}>
@@ -40,7 +40,6 @@ export const CustomSwitch = ({
         onValueChange={handleToggle}
         value={isEnabled}
         disabled={isSwitchDisabled}
-        testID={COMP_GENERAL_CONSTANTS.customSwitch}
       />
     </View>
   );

package/src/components/Header/index.js

@@ -1,14 +1,15 @@
-import PropTypes from 'prop-types';
-import React, { useContext } from 'react';
+import PropTypes from "prop-types";
+import React, { useContext } from "react";
 import {
   StyleSheet,
   TouchableOpacity,
   View,
   ViewPropTypes,
-} from 'react-native';
+} from "react-native";
 
-import { headerStyles } from './styles';
-import { AppTheme } from '../../utils';
+import { headerStyles } from "./styles";
+import { AppTheme } from "../../utils";
+import { COMP_GENERAL_CONSTANTS } from "../../constants/component-constants";
 
 export const Header = (props) => {
   const { theme } = useContext(AppTheme);
@@ -19,11 +20,15 @@ export const Header = (props) => {
     props.logoComponentStyle,
   ]);
   return (
-    <View testID={props.testID} style={headerStyle}>
+    <View style={headerStyle}>
       <View>
         {props.leftComponent && props.leftComponent}
         {props.logoComponent && (
-          <TouchableOpacity style={logoComponentStyle} onPress={props.onPress}>
+          <TouchableOpacity
+            style={logoComponentStyle}
+            onPress={props.onPress}
+            testID={COMP_GENERAL_CONSTANTS.headerLogoTouch}
+          >
             {props.logoComponent}
           </TouchableOpacity>
         )}
@@ -34,7 +39,7 @@ export const Header = (props) => {
 };
 
 Header.defaultProps = {
-  onPress: () => { },
+  onPress: () => {},
 };
 
 Header.propTypes = {
@@ -43,7 +48,6 @@ Header.propTypes = {
   logoComponent: PropTypes.element,
   style: ViewPropTypes.style,
   logoComponentStyle: PropTypes.object,
-  testID: PropTypes.string,
   onPress: PropTypes.func,
   noBorder: PropTypes.bool,
 };

package/src/components/PrimaryStoryCard/index.js

@@ -10,7 +10,7 @@ import {
   AppTheme,
   getImageMetadata,
   getImageSlug,
-  getTimeInFormat,
+  getTimeForStoryCards,
 } from '../../utils';
 import { getStoryHeadline } from '../../utils/story';
 import { ResponsiveImage, Text } from '../index';
@@ -96,21 +96,19 @@ 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
+      >
+        {authorName +
+          getTimeForStoryCards(
+            story["published-at"],
+            DATE_FORMAT,
+            locale,
+            translate
+          )}
+      </Text>
       <Text
         primary
         numberOfLines={3}

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

@@ -1,8 +1,8 @@
-import { get, throttle } from 'lodash';
-import PropTypes from 'prop-types';
-import React, { useContext, memo } from 'react';
-import { StyleSheet, TouchableOpacity, View } from 'react-native';
-import Icon from 'react-native-vector-icons/FontAwesome';
+import { get, throttle } from "lodash";
+import PropTypes from "prop-types";
+import React, { useContext, memo } from "react";
+import { StyleSheet, TouchableOpacity, View } from "react-native";
+import Icon from "react-native-vector-icons/FontAwesome";
 import {
   AppTheme,
   getImageMetadata,
@@ -12,15 +12,12 @@ 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";
 
 const PrimaryStoryCardNewBase = (props) => {
   const { story = {} } = props;
   const { theme } = useContext(AppTheme);
-  const {
-    COLORS, FONT_SIZE, locale, DARK_MODE,
-  } = theme || {};
+  const { COLORS, FONT_SIZE, locale, DARK_MODE } = theme || {};
 
   const translate = get(theme, ["translate"], (word) => word);
 
@@ -40,7 +37,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);
@@ -58,14 +55,14 @@ const PrimaryStoryCardNewBase = (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;
@@ -74,7 +71,7 @@ const PrimaryStoryCardNewBase = (props) => {
 
   return (
     <TouchableOpacity
-      testID="primaryStoryCardView"
+      testID={COMP_GENERAL_CONSTANTS.primaryStoryCard}
       onPress={throttledOnpress}
       activeOpacity={0.8}
       style={containerStyle}
@@ -94,18 +91,23 @@ const PrimaryStoryCardNewBase = (props) => {
             numberOfLines={3}
             ellipsizeMode="tail"
             style={headlineStyle}
-            testID="primaryStoryCardHeadline"
+            testID={COMP_GENERAL_CONSTANTS.primaryStoryHeadline}
           >
             {getStoryHeadline(story)}
           </Text>
-          <View style={styles.timestampContainer}>
-            {readTime ? (
-              <Text style={timestampStyle}>{`${readTime} · `}</Text>
-            ) : null}
-            <Text style={timestampStyle} testID="primaryStoryCardDate">
-              {getTimeForStoryCards(story["published-at"], DATE_FORMAT, locale)}
-            </Text>
-          </View>
+          <Text
+            style={timestampStyle}
+            numberOfLines={2}
+            // TODO: Add corrected testID here
+          >
+            {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/RadioButton/index.js

@@ -1,22 +1,37 @@
-import React, { useContext } from 'react';
+import React, { useContext } from "react";
 import {
-  StyleSheet, View, TouchableOpacity, ViewPropTypes,
-} from 'react-native';
-import PropTypes from 'prop-types';
-import { radioButtonStyles } from './styles';
-import { AppTheme } from '../../utils';
+  StyleSheet,
+  View,
+  TouchableOpacity,
+  ViewPropTypes,
+} from "react-native";
+import PropTypes from "prop-types";
+import { radioButtonStyles } from "./styles";
+import { AppTheme } from "../../utils";
+
+import { COMP_GENERAL_CONSTANTS } from "../../constants/component-constants";
 
 export const RadioButton = ({
-  onPress, isChecked, circleStyle, checkedCircleStyle,
+  onPress,
+  isChecked,
+  circleStyle,
+  checkedCircleStyle,
 }) => {
   const { theme } = useContext(AppTheme);
   const styles = radioButtonStyles(theme);
   const circleBorderStyle = StyleSheet.flatten([styles.circle, circleStyle]);
-  const checkedStyle = StyleSheet.flatten([styles.checkedCircle, checkedCircleStyle]);
+  const checkedStyle = StyleSheet.flatten([
+    styles.checkedCircle,
+    checkedCircleStyle,
+  ]);
 
   return (
     <View>
-      <TouchableOpacity style={circleBorderStyle} onPress={onPress}>
+      <TouchableOpacity
+        style={circleBorderStyle}
+        onPress={onPress}
+        testID={COMP_GENERAL_CONSTANTS.radioButtonTouch}
+      >
         {isChecked && <View style={checkedStyle} />}
       </TouchableOpacity>
     </View>

package/src/components/SecondaryStoryCard/index.js

@@ -15,7 +15,7 @@ import {
   AppTheme,
   getImageMetadata,
   getImageSlug,
-  getTimeInFormat,
+  getTimeForStoryCards,
 } from '../../utils';
 import { getStoryHeadline } from '../../utils/story';
 import { ResponsiveImage, Text } from '../index';
@@ -116,20 +116,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}
+            // TODO: Add corrected testID here
+          >
+            {authorName +
+              getTimeForStoryCards(
+                story["published-at"],
+                DATE_FORMAT,
+                locale,
+                translate
+              )}
+          </Text>
           <View style={iconStyles}>{props.iconComponent}</View>
         </View>
       </View>

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

@@ -8,8 +8,8 @@ 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,
@@ -19,6 +19,7 @@ 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";
 
 const SecondaryStoryCardNewBase = (props) => {
   const { story = {} } = props;
@@ -43,7 +44,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);
@@ -62,14 +63,14 @@ const SecondaryStoryCardNewBase = (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;
@@ -78,7 +79,7 @@ const SecondaryStoryCardNewBase = (props) => {
 
   return (
     <TouchableOpacity
-      testID={props.collectionTestID}
+      testID={COMP_GENERAL_CONSTANTS.secondaryStoryCard}
       onPress={throttledOnpress}
       activeOpacity={0.8}
       style={containerStyle}
@@ -97,18 +98,23 @@ const SecondaryStoryCardNewBase = (props) => {
           numberOfLines={2}
           ellipsizeMode="tail"
           style={headlineStyle}
-          testID="secondaryStoryCardHeadline"
+          testID={COMP_GENERAL_CONSTANTS.secondaryStoryHeadline}
         >
           {getStoryHeadline(story)?.trim()}
         </Text>
-        <View style={styles.timestampContainer}>
-          {readTime ? (
-            <Text style={timestampStyle}>{`${readTime} · `}</Text>
-          ) : null}
-          <Text style={timestampStyle} testID="secondaryStoryCardDate">
-            {getTimeForStoryCards(story["published-at"], DATE_FORMAT, locale)}
-          </Text>
-        </View>
+        <Text
+          style={timestampStyle}
+          numberOfLines={2}
+          // TODO: Add corrected testID here
+        >
+          {readTime +
+            getTimeForStoryCards(
+              story["published-at"],
+              DATE_FORMAT,
+              locale,
+              translate
+            )}
+        </Text>
       </View>
       <View style={styles.icon}>{props.iconComponent}</View>
     </TouchableOpacity>

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/components/ShareButton/index.js

@@ -1,27 +1,28 @@
-import React, { useContext, memo } from 'react';
-import { TouchableOpacity } from 'react-native';
-import PropTypes from 'prop-types';
-import Icon from 'react-native-vector-icons/Ionicons';
-import Share from 'react-native-share';
-import { AppTheme } from '../../utils';
-import { shareButtonStyles } from './styles';
-import { getStoryHeadline } from '../../utils/story';
+import React, { useContext, memo } from "react";
+import { TouchableOpacity } from "react-native";
+import PropTypes from "prop-types";
+import Icon from "react-native-vector-icons/Ionicons";
+import Share from "react-native-share";
+import { AppTheme } from "../../utils";
+import { shareButtonStyles } from "./styles";
+import { getStoryHeadline } from "../../utils/story";
+import { COMP_GENERAL_CONSTANTS } from "../../constants/component-constants";
 
 const ShareButtonBase = (props) => {
   const { theme } = useContext(AppTheme);
   const styles = shareButtonStyles(theme);
-  const { story, type = 'story', slug } = props;
+  const { story, type = "story", slug } = props;
 
   const getShareURL = () => {
     const { url } = story || {};
     switch (type) {
-      case 'story':
+      case "story":
         return url;
-      case 'card':
+      case "card":
         return `${url}${slug}`;
-      case 'image':
+      case "image":
         return `${url}${slug}`;
-      case 'attachment':
+      case "attachment":
         return slug;
       default:
         return url || slug;
@@ -43,7 +44,10 @@ const ShareButtonBase = (props) => {
   }
 
   return (
-    <TouchableOpacity onPress={share}>
+    <TouchableOpacity
+      onPress={share}
+      testID={COMP_GENERAL_CONSTANTS.shareButtonTouch}
+    >
       <Icon style={styles.iconStyle} name="share-social-outline" size={20} />
     </TouchableOpacity>
   );

package/src/components/StoryHeader/index.js

@@ -91,7 +91,7 @@ export const StoryHeader = (props) => {
           }}
         />
         <HTML
-          html={imgAttribution}
+          html={attri}
           textSelectable={CAN_COPY_TEXT}
           key={Math.random()}
           baseFontStyle={styles.attributionStyle}

package/src/components/StoryHeader/styles.js

@@ -37,7 +37,7 @@ export const storyHeaderStyles = (COLORS) => StyleSheet.create({
   },
   captionContainerStyle: {
     paddingHorizontal: 5,
-    flexDirection: 'row',
+    flexDirection: 'column',
     flexWrap: 'wrap',
     marginTop: 10,
   },

package/src/components/StoryImage/index.js

@@ -28,7 +28,7 @@ export const StoryImage = ({
     if (!card['image-attribution']) return null;
     return (
       <Text style={styles.attributionText}>
-        {` | ${card['image-attribution']}`}
+        {` | ${stripHTML(card['image-attribution'])}`}
       </Text>
     );
   };

package/src/constants/component-constants/content-constants/constants.js

@@ -1,7 +1,9 @@
 export const COMP_CONTENT_CONSTANTS = {
-  storyTitle: 'COMP_STORY_TITLE',
-  storySubTitle: 'COMP_STORY_SUBTITLE',
-  sectionName: 'COMP_STORY_SECTION_NAME',
-  publishedDate: 'COMP_STORY_PUBLISHED_DATE',
-  relatedStoriesLabel: 'COMP_STORY_RELATEDSTORIES_LABEL',
+  storyTitle: "COMP_STORY_TITLE",
+  storySubTitle: "COMP_STORY_SUBTITLE",
+  sectionName: "COMP_STORY_SECTION_NAME",
+  publishedDate: "COMP_STORY_PUBLISHED_DATE",
+  relatedStoriesLabel: "COMP_STORY_RELATEDSTORIES_LABEL",
+  authorName: "COMP_STORY_AUTHOR_NAME",
+  authorImage: "COMP_STORY_AUTHOR_IMAGE",
 };

package/src/constants/component-constants/general-constants/constants.js

@@ -14,4 +14,11 @@ export const COMP_GENERAL_CONSTANTS = {
   backNavigatorText: "COMP_GENERAL_BACK_NAVIGATOR_TEXT",
   backNavigatorTouch: "COMP_GENERAL_BACK_NAVIGATOR_TOUCH",
   customSwitch: "COMP_GENERAL_CUSTOM_SWITCH",
+  primaryStoryReadTime: "COMP_GENERAL_PRIMARY_STORY_READTIME",
+  secondaryStoryReadTime: "COMP_GENERAL_SECONDARY_STORY_READTIME",
+  actionTextTouch: "COMP_GENERAL_ACTION_TEXT_TOUCH",
+  buttonTouch: "COMP_GENERAL_BUTTON_TOUCH",
+  headerLogoTouch: "COMP_GENERAL_HEADER_LOGO_TOUCH",
+  radioButtonTouch: "COMP_GENERAL_RADIO",
+  shareButtonTouch: "COMP_GENERAL_SHARE",
 };

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 });
   }