@quintype/native-components 2.19.3 → 2.19.8

package/CHANGELOG.md

@@ -2,6 +2,27 @@
 
 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.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)
+
+
+### Bug Fixes
+
+* **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))
+
 ### [2.19.3](https://github.com/quintype/native-components/compare/v2.18.4...v2.19.3) (2021-10-28)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quintype/native-components",
-  "version": "2.19.3",
+  "version": "2.19.8",
   "description": "",
   "main": "src/index.js",
   "scripts": {
@@ -28,14 +28,14 @@
     "rn-fetch-blob": "^0.10.16"
   },
   "peerDependencies": {
+    "@react-navigation/native": ">=5.7.3",
+    "lodash": ">=4.17.20",
     "react": ">=16.13.1",
     "react-native": ">=0.63.2",
     "react-native-fast-image": ">=8.3.2",
-    "react-native-webview": ">=10.6.0",
     "react-native-pdf": ">=6.2.0",
-    "rn-fetch-blob": ">=0.12.0",
-    "@react-navigation/native": ">=5.7.3",
-    "lodash": ">=4.17.20"
+    "react-native-webview": ">=10.6.0",
+    "rn-fetch-blob": ">=0.12.0"
   },
   "devDependencies": {
     "@babel/core": "^7.11.1",

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

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
 import get from 'lodash/get';
-import { View, TouchableOpacity, StyleSheet } from 'react-native';
+import { View, TouchableOpacity } from 'react-native';
 import { ResponsiveImage, Text } from '../index';
 import { alsoReadStyles } from './styles';
 import { FallbackIcon } from '../../Icons/FallBackIcon';
@@ -25,7 +25,7 @@ export const AlsoRead = (props) => {
   const linkedImage = get(linkedStories, [linkedStoryId, 'hero-image-s3-key']);
 
   const { theme } = useContext(AppTheme);
-  const { COLORS, FONT_SIZE, DARK_MODE, CustomFallBackIcon } = theme;
+  const { COLORS, FONT_SIZE, DARK_MODE, CustomFallBackIcon ,translate} = theme;
   const styles = alsoReadStyles(COLORS, FONT_SIZE, DARK_MODE);
 
   const fallBackIcon = CustomFallBackIcon ? <CustomFallBackIcon /> : <FallbackIcon />;
@@ -57,7 +57,7 @@ export const AlsoRead = (props) => {
         <View style={styles.container}>
           {getImageComponent()}
           <View style={styles.alsoReadContentWrapper}>
-            <Text style={styles.alsoReadText}>Also Read</Text>
+            <Text style={styles.alsoReadText}>{translate("Also Read")}</Text>
             <Text primary numberOfLines={2} style={styles.alsoReadTitle}>
               {text}
             </Text>

package/src/components/AuthorRow/index.js

@@ -20,7 +20,7 @@ export const AuthorRow = ({
   disablePress,
 }) => {
   const { theme } = useContext(AppTheme);
-  const { COLORS } = theme;
+  const { COLORS ,translate} = theme;
   const styles = authorRowStyleSheet(theme);
 
   return (
@@ -69,7 +69,7 @@ export const AuthorRow = ({
       })}
       {readtime ? (
         <View style={styles.readtimeComponent}>
-          <Text style={styles.readtime}>{`|  ${readtime} min read`}</Text>
+          <Text style={styles.readtime}>{`|  ${readtime} ${translate("min read")}`}</Text>
         </View>
       ) : null}
     </View>

package/src/components/BackNavigator/styles.js

@@ -6,6 +6,7 @@ export const backNavigatorStyles = (appThemeContext) => {
     container: {
       flexDirection: 'row',
       justifyContent: 'flex-start',
+      marginRight: 20,
       alignItems: 'center',
       backgroundColor: DARK_MODE ? COLORS.MONO6 : COLORS.BRAND_WHITE,
     },
@@ -29,6 +30,7 @@ export const backNavigatorStyles = (appThemeContext) => {
     text: {
       marginLeft: 10,
       opacity: 0.9,
+      flexShrink: 1,
     },
   });
 };

package/src/components/CustomSwitch/index.js

@@ -1,19 +1,25 @@
-import React, { useContext, useState } from 'react';
-import { Switch, View } from 'react-native';
-import PropTypes from 'prop-types';
-import Icon from 'react-native-vector-icons/FontAwesome';
-import { Text } from '../Text';
-import { AppTheme } from '../../utils';
-import { customSwitchStyles } from './styles';
+import React, { useContext, useState } from "react";
+import { Switch, View } from "react-native";
+import PropTypes from "prop-types";
+import Icon from "react-native-vector-icons/FontAwesome";
+import { Text } from "../Text";
+import { AppTheme } from "../../utils";
+import { customSwitchStyles } from "./styles";
+import { COMP_GENERAL_CONSTANTS } from "../../constants/component-constants/general-constants/constants";
 
 export const CustomSwitch = ({
-  label = '', callback, isEnabled = true, iconSize = 20, iconName, isSwitchDisabled = false,
+  label = "",
+  callback,
+  isEnabled = true,
+  iconSize = 20,
+  iconName,
+  isSwitchDisabled = false,
 }) => {
   const { theme } = useContext(AppTheme);
   const { COLORS } = theme;
   const styles = customSwitchStyles();
   const handleToggle = () => {
-    typeof callback === 'function' && callback(!isEnabled);
+    typeof callback === "function" && callback(!isEnabled);
   };
 
   return (
@@ -34,6 +40,7 @@ export const CustomSwitch = ({
         onValueChange={handleToggle}
         value={isEnabled}
         disabled={isSwitchDisabled}
+        testID={COMP_GENERAL_CONSTANTS.customSwitch}
       />
     </View>
   );

package/src/components/PrimaryStoryCard/index.js

@@ -3,7 +3,7 @@ import get from 'lodash/get';
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
 import {
-  I18nManager, StyleSheet, TouchableOpacity, View,
+  StyleSheet, TouchableOpacity, View,
 } from 'react-native';
 import Icon from 'react-native-vector-icons/FontAwesome';
 import {
@@ -25,7 +25,7 @@ export const PrimaryStoryCard = (props) => {
 
   const { COLORS, FONT_SIZE, locale } = theme || {};
 
-  const DATE_FORMAT = I18nManager.isRTL ? 'yyyy , MMM d' : 'd MMM, yyyy';
+  const DATE_FORMAT = 'd MMM, yyyy';
 
   const styles = storyStyles(COLORS, FONT_SIZE);
   const containerStyle = StyleSheet.flatten([
@@ -43,7 +43,7 @@ export const PrimaryStoryCard = (props) => {
 
   const name = get(story.authors, [0, 'name']);
   const authorName = name ? `${translate('By')} ${name} | ` : '';
-  const readTime = story['read-time'] ? `${story['read-time']} min read` : '';
+  const readTime = story['read-time'] ? `${story['read-time']} ${translate('min read')}` : '';
 
   const throttledOnpress = throttle(props.onPress, 1000);
 

package/src/components/PrimaryStoryCardNew/index.js

@@ -1,26 +1,25 @@
-import { throttle } from 'lodash';
-import PropTypes from 'prop-types';
-import React, { useContext, memo } from 'react';
-import {
-  I18nManager, 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,
   getImageSlug,
   getTimeForStoryCards,
-} from '../../utils';
-import { getStoryHeadline } from '../../utils/story';
-import { ResponsiveImage, Text } from '../index';
-import { storyStyles } from './styles';
+} 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";
 
 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);
 
   const styles = storyStyles(COLORS, FONT_SIZE, DARK_MODE);
   const containerStyle = StyleSheet.flatten([
@@ -36,8 +35,10 @@ const PrimaryStoryCardNewBase = (props) => {
     props.timestampStyle,
   ]);
 
-  const DATE_FORMAT = I18nManager.isRTL ? 'yyyy , MMM d' : 'd MMM, yyyy';
-  const readTime = story['read-time'] ? `${story['read-time']} min read` : '';
+  const DATE_FORMAT = "d MMM, yyyy";
+  const readTime = story["read-time"]
+    ? `${story["read-time"]} ${translate("min read")}`
+    : "";
 
   const throttledOnpress = throttle(props.onPress, 1000);
 
@@ -54,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;
@@ -70,7 +71,7 @@ const PrimaryStoryCardNewBase = (props) => {
 
   return (
     <TouchableOpacity
-      testID="primaryStoryCardView"
+      testID={COMP_GENERAL_CONSTANTS.primaryStoryCard}
       onPress={throttledOnpress}
       activeOpacity={0.8}
       style={containerStyle}
@@ -90,16 +91,22 @@ 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">
-              {getTimeForStoryCards(story['published-at'], DATE_FORMAT, locale)}
+            <Text
+              style={timestampStyle}
+              testID={COMP_GENERAL_CONSTANTS.primaryStoryPubishedAt}
+            >
+              {getTimeForStoryCards(story["published-at"], DATE_FORMAT, locale)}
             </Text>
           </View>
         </View>
@@ -121,7 +128,7 @@ PrimaryStoryCardNewBase.propTypes = {
 };
 
 PrimaryStoryCardNewBase.defaultProps = {
-  cdn: '',
+  cdn: "",
   horizontalPadding: 12,
 };
 

package/src/components/RelatedStoriesCard/index.js

@@ -1,7 +1,7 @@
 import get from 'lodash/get';
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
-import { Text, View } from 'react-native';
+import { Text, View ,I18nManager} from 'react-native';
 import { getScreenPercentageWidth, AppTheme } from '../../utils/index';
 import { SecondaryStoryCard, SecondaryStoryCardNew, ShareButton } from '../index';
 
@@ -13,13 +13,16 @@ export const RelatedStoriesCard = ({
   cdn,
   stories,
   onStoryPress,
-  switchToNewDesign,
+  collectionTestID,
   RelatedCardID,
+  title,
+  switchToNewDesign,
 }) => {
   const sliceLimit = 5;
 
   const { theme } = useContext(AppTheme);
   const styles = relatedStoriesStyles(theme);
+  const titleText = I18nManager.isRTL ?  `\u200F${title}` : title;
 
   return (
     <>
@@ -27,9 +30,7 @@ export const RelatedStoriesCard = ({
         style={styles.titleStyle}
         testID={COMP_CONTENT_CONSTANTS.relatedStoriesLabel}
       >
-        {' '}
-        Related Stories
-        {' '}
+        {titleText}
       </Text>
       <View style={styles.relatedStoriesContainer} testID={RelatedCardID}>
         {stories.slice(0, sliceLimit).map((currentStory) => {
@@ -62,6 +63,8 @@ RelatedStoriesCard.propTypes = {
   cdn: PropTypes.string.isRequired,
   stories: PropTypes.array.isRequired,
   onStoryPress: PropTypes.func,
-  switchToNewDesign: PropTypes.bool,
+  collectionTestID: PropTypes.string,
   RelatedCardID: PropTypes.string,
+  title:PropTypes.string,
+  switchToNewDesign: PropTypes.bool,
 };

package/src/components/RelatedStoriesCard/styles.js

@@ -1,4 +1,4 @@
-import { StyleSheet } from 'react-native';
+import { StyleSheet,I18nManager } from 'react-native';
 
 export const relatedStoriesStyles = (appThemeContext) => {
   const { COLORS, FONT_SIZE } = appThemeContext;
@@ -7,7 +7,8 @@ export const relatedStoriesStyles = (appThemeContext) => {
       fontSize: FONT_SIZE.title,
       fontWeight: 'bold',
       color: COLORS.BRAND_BLACK,
-      paddingHorizontal: 4,
+      writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr',
+      paddingHorizontal:5,
       marginVertical: 8,
     },
     relatedStoriesContainer: {

package/src/components/SecondaryStoryCard/index.js

@@ -3,7 +3,6 @@ import get from 'lodash/get';
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
 import {
-  I18nManager,
   Image,
   StyleSheet,
   TouchableOpacity,
@@ -31,7 +30,7 @@ export const SecondaryStoryCard = (props) => {
   const styles = secStoryCardStyles(theme);
   const { story = {} } = props;
 
-  const DATE_FORMAT = I18nManager.isRTL ? 'yyyy ,MMM d' : 'd MMM, yyyy';
+  const DATE_FORMAT = 'd MMM, yyyy';
 
   const containerStyle = StyleSheet.flatten([
     styles.container,
@@ -52,7 +51,7 @@ export const SecondaryStoryCard = (props) => {
   ]);
   const name = get(story.authors, [0, 'name']);
   const authorName = name ? `${translate('By')} ${name} | ` : '';
-  const readTime = story['read-time'] ? `${story['read-time']} min read` : '';
+  const readTime = story['read-time'] ? `${story['read-time']} ${translate('min read')}` : '';
 
   const throttledOnpress = throttle(props.onPress, 1000);
 

package/src/components/SecondaryStoryCardNew/index.js

@@ -1,6 +1,6 @@
-import { throttle } from 'lodash';
-import PropTypes from 'prop-types';
-import React, { useContext, memo } from 'react';
+import { get, throttle } from "lodash";
+import PropTypes from "prop-types";
+import React, { useContext, memo } from "react";
 import {
   I18nManager,
   StyleSheet,
@@ -8,23 +8,26 @@ 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 { storyStyles } from './styles';
+} 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";
 
 const SecondaryStoryCardNewBase = (props) => {
   const { story = {} } = props;
   const { theme } = useContext(AppTheme);
   const { locale, DARK_MODE, COLORS } = theme;
 
+  const translate = get(theme, ["translate"], (word) => word);
+
   const styles = storyStyles(theme, DARK_MODE);
   const containerStyle = StyleSheet.flatten([
     styles.container,
@@ -39,8 +42,10 @@ const SecondaryStoryCardNewBase = (props) => {
     props.timestampStyle,
   ]);
 
-  const DATE_FORMAT = I18nManager.isRTL ? 'yyyy ,MMM d' : 'd MMM, yyyy';
-  const readTime = story['read-time'] ? `${story['read-time']} min read` : '';
+  const DATE_FORMAT = "d MMM, yyyy";
+  const readTime = story["read-time"]
+    ? `${story["read-time"]} ${translate("min read")}`
+    : "";
 
   const throttledOnpress = throttle(props.onPress, 1000);
 
@@ -58,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;
@@ -74,15 +79,15 @@ const SecondaryStoryCardNewBase = (props) => {
 
   return (
     <TouchableOpacity
-      testID={props.collectionTestID}
+      testID={COMP_GENERAL_CONSTANTS.secondaryStoryCard}
       onPress={throttledOnpress}
       activeOpacity={0.8}
       style={containerStyle}
     >
       <ResponsiveImage
         metaData={getImageMetadata(story)}
-        slug={getImageSlug(story) || ''}
-        cdn={props.cdn || ''}
+        slug={getImageSlug(story) || ""}
+        cdn={props.cdn || ""}
         imageWidth={props.imageWidth}
       >
         <View style={styles.storyTypeContainer}>{showStoryType()}</View>
@@ -93,16 +98,22 @@ 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">
-            {getTimeForStoryCards(story['published-at'], DATE_FORMAT, locale)}
+          <Text
+            style={timestampStyle}
+            testID={COMP_GENERAL_CONSTANTS.secondaryStoryPubishedAt}
+          >
+            {getTimeForStoryCards(story["published-at"], DATE_FORMAT, locale)}
           </Text>
         </View>
       </View>
@@ -123,7 +134,7 @@ SecondaryStoryCardNewBase.propTypes = TouchableOpacityProps && {
 };
 
 SecondaryStoryCardNewBase.defaultProps = {
-  cdn: '',
+  cdn: "",
   horizontalPadding: 12,
 };
 

package/src/components/StoryHeader/index.js

@@ -2,7 +2,7 @@ import get from 'lodash/get';
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
 import {
-  TouchableOpacity, View, Linking, I18nManager,
+  TouchableOpacity, View, Linking,
 } from 'react-native';
 import HTML from 'react-native-render-html';
 import {
@@ -21,9 +21,7 @@ import { COMP_CONTENT_CONSTANTS } from '../../constants/component-constants/cont
 
 import { DailyMotionPlayer } from '../DailyMotionPlayer';
 
-const DATE_FORMAT = I18nManager.isRTL
-  ? 'a h:mm ,yyyy d MMMM'
-  : 'MMMM d yyyy, h:mm a';
+const DATE_FORMAT = 'd  MMMM yyyy h:mm a';
 
 const getHeroImage = (cdn, story) => {
   const imageSlug = story['hero-image-s3-key'];
@@ -71,7 +69,7 @@ export const StoryHeader = (props) => {
   const { story } = props;
   const sectionData = get(story, ['sections', 0], {});
   const { theme } = useContext(AppTheme);
-  const { COLORS, CAN_COPY_TEXT } = theme;
+  const { COLORS, CAN_COPY_TEXT, locale } = theme;
   const styles = storyHeaderStyles(COLORS);
   const imgCaption = story['hero-image-caption'];
   const attri = story['hero-image-attribution'];
@@ -93,7 +91,7 @@ export const StoryHeader = (props) => {
           }}
         />
         <HTML
-          html={imgAttribution}
+          html={attri}
           textSelectable={CAN_COPY_TEXT}
           key={Math.random()}
           baseFontStyle={styles.attributionStyle}
@@ -136,7 +134,7 @@ export const StoryHeader = (props) => {
           style={styles.dateText}
           testID={COMP_CONTENT_CONSTANTS.publishedDate}
         >
-          {getTimeInFormat(story['published-at'], DATE_FORMAT)}
+          {getTimeInFormat(story['published-at'], DATE_FORMAT, locale)}
         </Text>
       </View>
       <StoryTitle title={story.headline} subTitle={story.subheadline} />

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

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
 import {
-  View, StyleSheet, Linking, Text,
+  View, StyleSheet, Linking, Text, I18nManager,
 } from 'react-native';
 import HTML from 'react-native-render-html';
 import { AppTheme } from '../../utils/context';
@@ -21,8 +21,10 @@ export const StoryText = (props) => {
     {
       fontFamily: FONT_FAMILY.secondary,
       fontWeight: props.question ? '600' : 'normal',
+      writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr',
     },
   ]);
+
   const customTagsStyles = customHTMLStyles();
 
   return (

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',
@@ -15,6 +14,7 @@ export const tableStyles = ({ COLORS }) => StyleSheet.create({
     justifyContent: 'center',
     borderWidth: 0.5,
     borderColor: COLORS.BRAND_4,
+    color: COLORS.BRAND_4,
   },
   tableBody: {
     flexDirection: 'column',
@@ -22,4 +22,7 @@ export const tableStyles = ({ COLORS }) => StyleSheet.create({
   tableRow: {
     flexDirection: 'row',
   },
-});
+  tableContect: {
+    color: COLORS.BRAND_BLACK,
+  },
+});

package/src/components/TextQandA/styles.js

@@ -8,14 +8,13 @@ export const textQandAStyles = (COLORS, FONT_SIZE) => StyleSheet.create({
     fontSize: FONT_SIZE.h2,
     fontWeight: '600',
     lineHeight: FONT_SIZE.h2 * 1.3,
-    color: COLORS.BRAND_8,
-    opacity: 0.8
+    color: COLORS.BRAND_BLACK,
+    opacity: 0.8,
   },
   answerText: {
     fontSize: FONT_SIZE.h2,
     lineHeight: FONT_SIZE.h2 * 1.3,
-    color: COLORS.BRAND_8,
     color: COLORS.BRAND_BLACK,
-    opacity: 0.8
+    opacity: 0.8,
   },
 });

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

@@ -13,4 +13,7 @@ export const COMP_GENERAL_CONSTANTS = {
   collectionTitleText: 'COMP_GENERAL_COLLECTION_TITLE_TEXT',
   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',
 };

package/src/constants/renderHTML.js

@@ -59,5 +59,15 @@ export const customHTMLStyles = () => {
       color: COLORS.BRAND_BLACK,
       opacity: 0.85,
     },
+    sup: {
+      marginBottom: 16,
+      lineHeight: FONT_SIZE.p1 * 0.3,
+      fontSize: FONT_SIZE.p1 * 0.5,
+    },
+    sub: {
+      marginBottom: 16,
+      lineHeight: FONT_SIZE.p1 * 0.3,
+      fontSize: FONT_SIZE.p1 * 0.5,
+    },
   };
 };