@quintype/native-components 2.19.5 → 2.19.9

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 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.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.5",
+  "version": "2.19.9",
   "description": "",
   "main": "src/index.js",
   "scripts": {

package/src/Icons/ClockIcon/index.js

@@ -1,11 +1,15 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import Svg, { Path } from 'react-native-svg';
+import { AppTheme } from "../../utils/context";
 
-export const ClockIcon = (props) => (
-  <Svg width={24} height={24} {...props}>
+export const ClockIcon = (props) => {
+  const { theme } = useContext(AppTheme);
+  const { COLORS } = theme;
+  const color = COLORS.BRAND_BLACK;
+  return <Svg width={24} height={24} {...props}>
     <Path
-      fill="#333"
+      fill={color}
       d="M12 4.25c1.396 0 2.687.349 3.875 1.047a7.831 7.831 0 012.828 2.828A7.513 7.513 0 0119.75 12a7.513 7.513 0 01-1.047 3.875 7.831 7.831 0 01-2.828 2.828A7.513 7.513 0 0112 19.75a7.513 7.513 0 01-3.875-1.047 7.831 7.831 0 01-2.828-2.828A7.513 7.513 0 014.25 12c0-1.396.349-2.687 1.047-3.875a7.831 7.831 0 012.828-2.828A7.513 7.513 0 0112 4.25zM18.75 12a6.58 6.58 0 00-.906-3.39 6.72 6.72 0 00-2.469-2.454 6.641 6.641 0 00-3.39-.906 6.558 6.558 0 00-3.376.906 6.72 6.72 0 00-2.453 2.469 6.641 6.641 0 00-.906 3.39c0 1.22.302 2.344.906 3.376a6.72 6.72 0 002.469 2.453 6.641 6.641 0 003.39.906 6.558 6.558 0 003.376-.906 6.72 6.72 0 002.453-2.469A6.613 6.613 0 0018.75 12zm-4.656 2.75l-2.532-1.844a.307.307 0 01-.156-.281v-5c0-.104.037-.193.11-.266a.362.362 0 01.265-.109h.438c.104 0 .192.036.265.11.073.072.11.16.11.265v4.563l2.218 1.625a.33.33 0 01.141.234.349.349 0 01-.038.202l-.29.439a.342.342 0 01-.25.14.389.389 0 01-.281-.078z"
     />
   </Svg>
-);
+}

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/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);
 
@@ -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,15 +91,21 @@ 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>
+              <Text
+                style={timestampStyle}
+                testID={COMP_GENERAL_CONSTANTS.primaryStoryReadTime}
+              >{`${readTime} · `}</Text>
             ) : null}
-            <Text style={timestampStyle} testID="primaryStoryCardDate">
+            <Text
+              style={timestampStyle}
+              testID={COMP_GENERAL_CONSTANTS.primaryStoryPubishedAt}
+            >
               {getTimeForStoryCards(story["published-at"], DATE_FORMAT, locale)}
             </Text>
           </View>

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/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;
@@ -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,15 +98,21 @@ 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>
+            <Text
+              style={timestampStyle}
+              testID={COMP_GENERAL_CONSTANTS.secondaryStoryReadTime}
+            >{`${readTime} · `}</Text>
           ) : null}
-          <Text style={timestampStyle} testID="secondaryStoryCardDate">
+          <Text
+            style={timestampStyle}
+            testID={COMP_GENERAL_CONSTANTS.secondaryStoryPubishedAt}
+          >
             {getTimeForStoryCards(story["published-at"], DATE_FORMAT, locale)}
           </Text>
         </View>

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

@@ -27,7 +27,7 @@ export const Table = ({ card }) => {
         <View style={styles.tableRow}>
           {headerFields.map((headerField) => (
             <View style={styles.tableHeaderTitle}>
-              <Text>{data[headerField]}</Text>
+              <Text style={styles.tableContect}>{data[headerField]}</Text>
             </View>
           ))}
         </View>

package/src/components/Table/styles.js

@@ -1,5 +1,4 @@
 import { StyleSheet } from 'react-native';
-
 export const tableStyles = ({ COLORS }) => StyleSheet.create({
   container: {
     flexDirection: 'row',
@@ -26,4 +25,4 @@ export const tableStyles = ({ COLORS }) => StyleSheet.create({
   tableContect: {
     color: COLORS.BRAND_BLACK,
   },
-});
+});

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",
 };