@quintype/native-components 2.19.1 → 2.19.6

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 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.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)
+
+
+### 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))
+* **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.2](https://github.com/quintype/native-components/compare/v2.19.1...v2.19.2) (2021-10-19)
+
+
+### 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))
+
 ### [2.19.1](https://github.com/quintype/native-components/compare/v2.19.0...v2.19.1) (2021-10-07)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quintype/native-components",
-  "version": "2.19.1",
+  "version": "2.19.6",
   "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,8 +25,8 @@ export const AlsoRead = (props) => {
   const linkedImage = get(linkedStories, [linkedStoryId, 'hero-image-s3-key']);
 
   const { theme } = useContext(AppTheme);
-  const { COLORS, FONT_SIZE, CustomFallBackIcon } = theme;
-  const styles = alsoReadStyles(COLORS, FONT_SIZE);
+  const { COLORS, FONT_SIZE, DARK_MODE, CustomFallBackIcon ,translate} = theme;
+  const styles = alsoReadStyles(COLORS, FONT_SIZE, DARK_MODE);
 
   const fallBackIcon = CustomFallBackIcon ? <CustomFallBackIcon /> : <FallbackIcon />;
 
@@ -57,8 +57,8 @@ export const AlsoRead = (props) => {
         <View style={styles.container}>
           {getImageComponent()}
           <View style={styles.alsoReadContentWrapper}>
-            <Text style={styles.alsoReadText}>Also Read</Text>
-            <Text primary numberOfLines={3} style={styles.alsoReadText}>
+            <Text style={styles.alsoReadText}>{translate("Also Read")}</Text>
+            <Text primary numberOfLines={2} style={styles.alsoReadTitle}>
               {text}
             </Text>
           </View>

package/src/components/AlsoRead/styles.js

@@ -1,6 +1,6 @@
 import { StyleSheet } from 'react-native';
 
-export const alsoReadStyles = (COLORS, FONT_SIZE) => StyleSheet.create({
+export const alsoReadStyles = (COLORS, FONT_SIZE, DARK_MODE) => StyleSheet.create({
   wrapper: {
     padding: 10,
   },
@@ -13,10 +13,12 @@ export const alsoReadStyles = (COLORS, FONT_SIZE) => StyleSheet.create({
   },
   alsoReadText: {
     fontSize: FONT_SIZE.h2,
-    color: COLORS.BRAND_1,
+    fontWeight: 'bold',
+    color: DARK_MODE ? COLORS.BRAND_BLACK : COLORS.BRAND_1,
   },
   alsoReadTitle: {
     fontSize: FONT_SIZE.h2,
+    color: DARK_MODE ? COLORS.BRAND_BLACK : COLORS.BRAND_1,
   },
   fallBackImageWrapper: {
     backgroundColor: COLORS.BRAND_WHITE,

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,9 +3,9 @@ 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 {
   AppTheme,
   getImageMetadata,
@@ -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,10 +43,37 @@ 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);
 
+  const showIcon = (name) => (
+    <View style={styles.storyType}>
+      <Icon name={name} size={22} color={COLORS.MONO7} />
+    </View>
+  );
+
+  const showLiveBlogIcon = () => (
+    <View style={styles.storyType}>
+      <View style={styles.liveBlogIcon} />
+      <Text style={styles.liveBlogText}>LIVE</Text>
+    </View>
+  );
+  const showStoryType = () => {
+    switch (story['story-template']) {
+      case 'text':
+        return null;
+      case 'photo':
+        return showIcon('photo');
+      case 'video':
+        return showIcon('play');
+      case 'live-blog':
+        return showLiveBlogIcon();
+      default:
+        null;
+    }
+  };
+
   return (
     <TouchableOpacity
       testID={COMP_GENERAL_CONSTANTS.primaryStoryCard}
@@ -61,13 +88,13 @@ export const PrimaryStoryCard = (props) => {
         imageWidth={props.imageWidth}
       >
         <Text style={styles.xminContainer}>
-          {' '}
           {readTime && (
             <View style={styles.xmin}>
               <Text style={styles.xminText}>{readTime}</Text>
             </View>
           )}
         </Text>
+        <View style={styles.storyTypeContainer}>{showStoryType()}</View>
       </ResponsiveImage>
 
       <View style={styles.authorBlockContainer}>

package/src/components/PrimaryStoryCard/styles.js

@@ -39,4 +39,32 @@ export const storyStyles = (COLORS = {}, FONT_SIZE = {}, DARK_MODE = {}) => ({
     color: COLORS.BRAND_BLACK,
     fontSize: FONT_SIZE.h5,
   },
+  storyTypeContainer: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+  },
+  storyType: {
+    backgroundColor: COLORS.MONO1,
+    padding: 8,
+    justifyContent: 'space-between',
+    alignItems: 'space-between',
+    flexDirection: 'row',
+  },
+  storyTypeText: {
+    color: COLORS.MONO7,
+    fontSize: FONT_SIZE.h5,
+  },
+  liveBlogText: {
+    color: COLORS.MONO7,
+    fontSize: FONT_SIZE.h4,
+    marginLeft: 10,
+    fontWeight: 'bold',
+  },
+  liveBlogIcon: {
+    height: 15,
+    width: 15,
+    borderRadius: 50,
+    backgroundColor: COLORS.BRAND_3,
+  },
 });

package/src/components/PrimaryStoryCardNew/index.js

@@ -1,25 +1,30 @@
-import { throttle } from 'lodash';
+import { get, throttle } from 'lodash';
 import PropTypes from 'prop-types';
 import React, { useContext, memo } from 'react';
-import {
-  I18nManager, StyleSheet, TouchableOpacity, View,
-} from 'react-native';
+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";
+
+
 
 const PrimaryStoryCardNewBase = (props) => {
   const { story = {} } = props;
   const { theme } = useContext(AppTheme);
-  const { COLORS, FONT_SIZE, locale } = theme || {};
+  const {
+    COLORS, FONT_SIZE, locale, DARK_MODE,
+  } = theme || {};
+
+  const translate = get(theme, ["translate"], (word) => word);
 
-  const styles = storyStyles(COLORS, FONT_SIZE);
+  const styles = storyStyles(COLORS, FONT_SIZE, DARK_MODE);
   const containerStyle = StyleSheet.flatten([
     styles.container,
     { paddingHorizontal: props.horizontalPadding },
@@ -33,11 +38,40 @@ 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);
 
+  const showIcon = (name) => (
+    <View style={styles.storyType}>
+      <Icon name={name} size={22} color={COLORS.BRAND_BLACK} />
+    </View>
+  );
+
+  const showLiveBlogIcon = () => (
+    <View style={styles.storyType}>
+      <View style={styles.liveBlogIcon} />
+      <Text style={styles.liveBlogText}>LIVE</Text>
+    </View>
+  );
+  const showStoryType = () => {
+    switch (story['story-template']) {
+      case 'text':
+        return null;
+      case 'photo':
+        return showIcon('photo');
+      case 'video':
+        return showIcon('play');
+      case 'live-blog':
+        return showLiveBlogIcon();
+      default:
+        null;
+    }
+  };
+
   return (
     <TouchableOpacity
       testID="primaryStoryCardView"
@@ -50,7 +84,9 @@ const PrimaryStoryCardNewBase = (props) => {
         slug={getImageSlug(story)}
         cdn={props.cdn}
         imageWidth={props.imageWidth}
-      />
+      >
+        <View style={styles.storyTypeContainer}>{showStoryType()}</View>
+      </ResponsiveImage>
       <View style={styles.contentContainer}>
         <View style={styles.headlineAndTimestampContainer}>
           <Text
@@ -67,7 +103,7 @@ const PrimaryStoryCardNewBase = (props) => {
               <Text style={timestampStyle}>{`${readTime} · `}</Text>
             ) : null}
             <Text style={timestampStyle} testID="primaryStoryCardDate">
-              {getTimeForStoryCards(story['published-at'], DATE_FORMAT, locale)}
+              {getTimeForStoryCards(story["published-at"], DATE_FORMAT, locale)}
             </Text>
           </View>
         </View>
@@ -89,7 +125,7 @@ PrimaryStoryCardNewBase.propTypes = {
 };
 
 PrimaryStoryCardNewBase.defaultProps = {
-  cdn: '',
+  cdn: "",
   horizontalPadding: 12,
 };
 

package/src/components/PrimaryStoryCardNew/styles.js

@@ -33,4 +33,32 @@ export const storyStyles = (COLORS = {}, FONT_SIZE = {}) => ({
   icon: {
     marginLeft: 8,
   },
+  storyTypeContainer: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+  },
+  storyType: {
+    backgroundColor: COLORS.MONO1,
+    padding: 8,
+    justifyContent: 'space-between',
+    alignItems: 'space-between',
+    flexDirection: 'row',
+  },
+  storyTypeText: {
+    color: COLORS.MONO7,
+    fontSize: FONT_SIZE.h5,
+  },
+  liveBlogText: {
+    color: COLORS.MONO7,
+    fontSize: FONT_SIZE.h4,
+    marginLeft: 10,
+    fontWeight: 'bold',
+  },
+  liveBlogIcon: {
+    height: 15,
+    width: 15,
+    borderRadius: 50,
+    backgroundColor: COLORS.BRAND_3,
+  },
 });

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,
@@ -11,6 +10,7 @@ import {
   TextStyle,
   TouchableOpacityProps,
 } from 'react-native';
+import Icon from 'react-native-vector-icons/FontAwesome';
 import {
   AppTheme,
   getImageMetadata,
@@ -26,11 +26,11 @@ export const SecondaryStoryCard = (props) => {
   const { theme } = useContext(AppTheme);
   const translate = get(theme, ['translate'], (word) => word);
 
-  const { locale } = theme;
+  const { locale, COLORS } = theme;
   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,
@@ -51,9 +51,38 @@ 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);
+
+  const showIcon = (name) => (
+    <View style={styles.storyType}>
+      <Icon name={name} size={14} color={COLORS.MONO7} />
+    </View>
+  );
+
+  const showLiveBlogIcon = () => (
+    <View style={styles.storyType}>
+      <View style={styles.liveBlogIcon} />
+      <Text style={styles.liveBlogText}>LIVE</Text>
+    </View>
+  );
+
+  const showStoryType = () => {
+    switch (story['story-template']) {
+      case 'text':
+        return null;
+      case 'photo':
+        return showIcon('photo');
+      case 'video':
+        return showIcon('play');
+      case 'live-blog':
+        return showLiveBlogIcon();
+      default:
+        null;
+    }
+  };
+
   return (
     <TouchableOpacity
       testID={COMP_GENERAL_CONSTANTS.secondaryStoryCard}
@@ -68,13 +97,13 @@ export const SecondaryStoryCard = (props) => {
         imageWidth={props.imageWidth}
       >
         <Text style={styles.xminContainer}>
-          {' '}
           {readTime && (
             <View style={styles.xmin}>
               <Text style={styles.xminText}>{readTime}</Text>
             </View>
           )}
         </Text>
+        <View style={styles.storyTypeContainer}>{showStoryType()}</View>
       </ResponsiveImage>
       <View style={styles.headlineAndAuthorBlockContainer}>
         <Text

package/src/components/SecondaryStoryCard/styles.js

@@ -51,4 +51,32 @@ export const secStoryCardStyles = ({ COLORS, FONT_SIZE, DARK_MODE }) => StyleShe
     color: COLORS.BRAND_BLACK,
     fontSize: FONT_SIZE.h5,
   },
+  storyTypeContainer: {
+    position: 'absolute',
+    backgroundColor: COLORS.MONO1,
+    bottom: 0,
+    left: 0,
+  },
+  storyType: {
+    padding: 5,
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    flexDirection: 'row',
+  },
+  storyTypeText: {
+    color: COLORS.MONO7,
+    fontSize: FONT_SIZE.h5,
+  },
+  liveBlogText: {
+    color: COLORS.MONO7,
+    fontSize: FONT_SIZE.h5,
+    marginLeft: 4,
+    fontWeight: 'bold',
+  },
+  liveBlogIcon: {
+    height: 12,
+    width: 12,
+    borderRadius: 50,
+    backgroundColor: COLORS.BRAND_3,
+  },
 });

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,
@@ -9,22 +9,25 @@ import {
   TextStyle,
   TouchableOpacityProps,
 } 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";
 
 const SecondaryStoryCardNewBase = (props) => {
   const { story = {} } = props;
   const { theme } = useContext(AppTheme);
-  const { locale } = theme;
+  const { locale, DARK_MODE, COLORS } = theme;
 
-  const styles = storyStyles(theme);
+  const translate = get(theme, ["translate"], (word) => word);
+
+  const styles = storyStyles(theme, DARK_MODE);
   const containerStyle = StyleSheet.flatten([
     styles.container,
     { paddingHorizontal: props.horizontalPadding },
@@ -38,10 +41,41 @@ 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);
+
+  const showIcon = (name) => (
+    <View style={styles.storyType}>
+      <Icon name={name} size={14} color={COLORS.MONO7} />
+    </View>
+  );
+
+  const showLiveBlogIcon = () => (
+    <View style={styles.storyType}>
+      <View style={styles.liveBlogIcon} />
+      <Text style={styles.liveBlogText}>LIVE</Text>
+    </View>
+  );
+
+  const showStoryType = () => {
+    switch (story['story-template']) {
+      case 'text':
+        return null;
+      case 'photo':
+        return showIcon('photo');
+      case 'video':
+        return showIcon('play');
+      case 'live-blog':
+        return showLiveBlogIcon();
+      default:
+        null;
+    }
+  };
+
   return (
     <TouchableOpacity
       testID={props.collectionTestID}
@@ -51,10 +85,12 @@ const SecondaryStoryCardNewBase = (props) => {
     >
       <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>
+      </ResponsiveImage>
       <View style={styles.headlineAndTimestampBlockContainer}>
         <Text
           primary
@@ -70,7 +106,7 @@ const SecondaryStoryCardNewBase = (props) => {
             <Text style={timestampStyle}>{`${readTime} · `}</Text>
           ) : null}
           <Text style={timestampStyle} testID="secondaryStoryCardDate">
-            {getTimeForStoryCards(story['published-at'], DATE_FORMAT, locale)}
+            {getTimeForStoryCards(story["published-at"], DATE_FORMAT, locale)}
           </Text>
         </View>
       </View>
@@ -91,7 +127,7 @@ SecondaryStoryCardNewBase.propTypes = TouchableOpacityProps && {
 };
 
 SecondaryStoryCardNewBase.defaultProps = {
-  cdn: '',
+  cdn: "",
   horizontalPadding: 12,
 };
 

package/src/components/SecondaryStoryCardNew/styles.js

@@ -33,4 +33,32 @@ export const storyStyles = ({ COLORS, FONT_SIZE }) => StyleSheet.create({
   icon: {
     marginLeft: 8,
   },
+  storyTypeContainer: {
+    position: 'absolute',
+    backgroundColor: COLORS.MONO1,
+    bottom: 0,
+    left: 0,
+  },
+  storyType: {
+    padding: 5,
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    flexDirection: 'row',
+  },
+  storyTypeText: {
+    color: COLORS.MONO7,
+    fontSize: FONT_SIZE.h5,
+  },
+  liveBlogText: {
+    color: COLORS.MONO7,
+    fontSize: FONT_SIZE.h5,
+    marginLeft: 4,
+    fontWeight: 'bold',
+  },
+  liveBlogIcon: {
+    height: 12,
+    width: 12,
+    borderRadius: 50,
+    backgroundColor: COLORS.BRAND_3,
+  },
 });

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 {
@@ -19,11 +19,9 @@ import { YouTubePlayer } from '../YouTubePlayer';
 import { storyHeaderStyles } from './styles';
 import { COMP_CONTENT_CONSTANTS } from '../../constants/component-constants/content-constants/constants';
 
-/* import {DailyMotionPlayer} from "../DailyMotionPlayer"; */
+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'];
@@ -46,9 +44,9 @@ const getHeroComponent = (props) => {
     case STORY_TYPES.VIDEO_STORY: {
       if (!firstVideoElement) return null;
       switch (firstVideoElement.type) {
-        /* case "jsembed":{
-            return <DailyMotionPlayer element={firstVideoElement} />;
-          } */
+        case 'jsembed': {
+          return <DailyMotionPlayer element={firstVideoElement} />;
+        }
         case 'youtube-video': {
           return (
             <YouTubePlayer
@@ -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'];
@@ -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/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

@@ -1,16 +1,17 @@
 export const COMP_GENERAL_CONSTANTS = {
-  secondaryStoryCard: 'COMP_GENERAL_SECONDARY_STORY',
-  primaryStoryCard: 'COMP_GENERAL_PRIMARY_STORY',
-  secondaryStoryAuthor: 'COMP_GENERAL_SECONDARY_STORY_AUTHOR',
-  secondaryStoryPubishedAt: 'COMP_GENERAL_SECONDARY_STORY_PUBLISHEDATE',
-  primaryStoryAuthor: 'COMP_GENERAL_PRIMARY_STORY_AUTHOR',
-  primaryStoryPubishedAt: 'COMP_GENERAL_PRIMARY_STORY_PUBLISHEDATE',
-  secondaryStoryHeadline: 'COMP_GENERAL_SECONDARY_STORY_HEADLINE',
-  primaryStoryHeadline: 'COMP_GENERAL_PRIMARY_STORY_HEADLINE',
-  iconTextTouch: 'COMP_GENERAL_ICON_TEXT_TOUCH',
-  iconTextLabel: 'COMP_GENERAL_ICON_TEXT_LABEL',
-  collectionTitleTouch: 'COMP_GENERAL_COLLECTION_TITLE',
-  collectionTitleText: 'COMP_GENERAL_COLLECTION_TITLE_TEXT',
-  backNavigatorText: 'COMP_GENERAL_BACK_NAVIGATOR_TEXT',
-  backNavigatorTouch: 'COMP_GENERAL_BACK_NAVIGATOR_TOUCH',
+  secondaryStoryCard: "COMP_GENERAL_SECONDARY_STORY",
+  primaryStoryCard: "COMP_GENERAL_PRIMARY_STORY",
+  secondaryStoryAuthor: "COMP_GENERAL_SECONDARY_STORY_AUTHOR",
+  secondaryStoryPubishedAt: "COMP_GENERAL_SECONDARY_STORY_PUBLISHEDATE",
+  primaryStoryAuthor: "COMP_GENERAL_PRIMARY_STORY_AUTHOR",
+  primaryStoryPubishedAt: "COMP_GENERAL_PRIMARY_STORY_PUBLISHEDATE",
+  secondaryStoryHeadline: "COMP_GENERAL_SECONDARY_STORY_HEADLINE",
+  primaryStoryHeadline: "COMP_GENERAL_PRIMARY_STORY_HEADLINE",
+  iconTextTouch: "COMP_GENERAL_ICON_TEXT_TOUCH",
+  iconTextLabel: "COMP_GENERAL_ICON_TEXT_LABEL",
+  collectionTitleTouch: "COMP_GENERAL_COLLECTION_TITLE",
+  collectionTitleText: "COMP_GENERAL_COLLECTION_TITLE_TEXT",
+  backNavigatorText: "COMP_GENERAL_BACK_NAVIGATOR_TEXT",
+  backNavigatorTouch: "COMP_GENERAL_BACK_NAVIGATOR_TOUCH",
+  customSwitch: "COMP_GENERAL_CUSTOM_SWITCH",
 };

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