@quintype/native-components 2.19.0 → 2.19.5

package/CHANGELOG.md

@@ -2,6 +2,36 @@
 
 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.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)
+
+
+### Bug Fixes
+
+* **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.0](https://github.com/quintype/native-components/compare/v2.17.3...v2.19.0) (2021-10-06)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quintype/native-components",
-  "version": "2.19.0",
+  "version": "2.19.5",
   "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/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/CollectionCard/index.js

@@ -16,20 +16,26 @@ export const CollectionCard = ({
   onCollectionPress,
   onStoryPress,
   offset,
+  horizontalPadding,
   initialOffset /* Number of items to load on first load */,
 }) => {
   const sliceLimit = offset || initialOffset || 5;
   const primaryStory = !isEmpty(stories) && get(stories, [0, 'story'], stories[0]);
   return (
     <>
-      <CollectionTitle title={collectionName} onPress={onCollectionPress} />
+      <CollectionTitle
+        title={collectionName}
+        onPress={onCollectionPress}
+        horizontalPadding={horizontalPadding}
+      />
       <PrimaryStoryCard
         onPress={() => {
           !isEmpty(stories) && onStoryPress(primaryStory);
         }}
         cdn={cdn}
         story={!isEmpty(stories) ? primaryStory : {}}
-        imageWidth={getScreenPercentageWidth(100)}
+        imageWidth={getScreenPercentageWidth(100) - 2 * horizontalPadding}
+        horizontalPadding={horizontalPadding}
       />
       {stories.slice(1, sliceLimit).map((currentStory) => {
         const secondaryStory = get(currentStory, ['story'], currentStory);
@@ -40,6 +46,7 @@ export const CollectionCard = ({
             cdn={cdn}
             story={secondaryStory}
             imageWidth={getScreenPercentageWidth(40)}
+            horizontalPadding={horizontalPadding}
           />
         );
       })}
@@ -54,4 +61,9 @@ CollectionCard.propTypes = {
   onCollectionPress: PropTypes.func,
   onStoryPress: PropTypes.func,
   offset: PropTypes.number,
+  horizontalPadding: PropTypes.number,
+};
+
+CollectionCard.defaultProps = {
+  horizontalPadding: 12,
 };

package/src/components/CollectionTitle/index.js

@@ -18,6 +18,10 @@ import { COMP_GENERAL_CONSTANTS } from '../../constants/component-constants/gene
 export const CollectionTitle = (props) => {
   const { theme } = useContext(AppTheme);
   const styles = collectionStyles(theme);
+  const containerStyle = StyleSheet.flatten([
+    styles.titleContainer,
+    { paddingHorizontal: props.horizontalPadding },
+  ]);
   const titleStyle = StyleSheet.flatten([styles.titleStyle, props.titleStyle]);
   const indicatorStyle = StyleSheet.flatten([
     styles.indicatorStyle,
@@ -30,7 +34,7 @@ export const CollectionTitle = (props) => {
 
   return (
     <TouchableOpacity
-      style={styles.titleContainer}
+      style={containerStyle}
       onPress={props.onPress}
       testID={COMP_GENERAL_CONSTANTS.collectionTitleTouch}
     >
@@ -49,4 +53,9 @@ CollectionTitle.propTypes = TouchableOpacityProps && {
   title: PropTypes.string,
   titleStyle: TextStyle,
   indicatorStyle: ViewStyle,
+  horizontalPadding: PropTypes.number,
+};
+
+CollectionTitle.defaultProps = {
+  horizontalPadding: 12,
 };

package/src/components/CollectionTitle/styles.js

@@ -4,18 +4,16 @@ export const collectionStyles = (appThemeContext) => {
   const { COLORS, FONT_SIZE } = appThemeContext;
   return StyleSheet.create({
     titleContainer: {
-      paddingBottom: 9,
+      backgroundColor: COLORS.BRAND_WHITE,
+      paddingVertical: 12,
       justifyContent: 'center',
-      marginBottom: 10,
     },
     titleStyle: {
       fontSize: FONT_SIZE.h1,
       color: COLORS.BRAND_5,
     },
     indicatorStyle: {
-      position: 'absolute',
-      left: 0,
-      bottom: 0,
+      marginTop: 8,
       width: 30,
       height: 3,
       backgroundColor: COLORS.BRAND_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,10 +25,13 @@ 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([
+    styles.container,
+    { paddingHorizontal: props.horizontalPadding },
+  ]);
   const headlineStyle = StyleSheet.flatten([
     styles.headline,
     props.headlineStyle,
@@ -40,31 +43,58 @@ 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}
       onPress={throttledOnpress}
       activeOpacity={0.8}
+      style={containerStyle}
     >
       <ResponsiveImage
         metaData={getImageMetadata(story)}
         slug={getImageSlug(story)}
         cdn={props.cdn}
         imageWidth={props.imageWidth}
-        hero
       >
         <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}>
@@ -101,8 +131,10 @@ PrimaryStoryCard.propTypes = {
   authorTextStyle: PropTypes.func,
   story: PropTypes.object.isRequired,
   onPress: PropTypes.func,
+  horizontalPadding: PropTypes.number,
 };
 
 PrimaryStoryCard.defaultProps = {
   cdn: '',
+  horizontalPadding: 12,
 };

package/src/components/PrimaryStoryCard/styles.js

@@ -1,4 +1,8 @@
 export const storyStyles = (COLORS = {}, FONT_SIZE = {}, DARK_MODE = {}) => ({
+  container: {
+    backgroundColor: COLORS.BRAND_WHITE,
+    marginTop: 12,
+  },
   authorBlockContainer: {
     alignItems: 'center',
     flexDirection: 'row',
@@ -35,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,12 +26,16 @@ 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,
+    { paddingHorizontal: props.horizontalPadding },
+  ]);
   const headlineStyle = StyleSheet.flatten([
     styles.headline,
     props.headlineStyle,
@@ -47,15 +51,44 @@ 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}
       onPress={throttledOnpress}
       activeOpacity={0.8}
-      style={styles.blockContainer}
+      style={containerStyle}
     >
       <ResponsiveImage
         metaData={getImageMetadata(story)}
@@ -64,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
@@ -112,4 +145,10 @@ SecondaryStoryCard.propTypes = TouchableOpacityProps && {
   dateTextStyle: TextStyle,
   story: PropTypes.any.isRequired,
   iconComponent: PropTypes.element,
+  horizontalPadding: PropTypes.number,
+};
+
+SecondaryStoryCard.defaultProps = {
+  cdn: '',
+  horizontalPadding: 12,
 };

package/src/components/SecondaryStoryCard/styles.js

@@ -1,6 +1,11 @@
 import { StyleSheet } from 'react-native';
 
 export const secStoryCardStyles = ({ COLORS, FONT_SIZE, DARK_MODE }) => StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    backgroundColor: COLORS.BRAND_WHITE,
+    paddingVertical: 15,
+  },
   headlineAndAuthorBlockContainer: {
     flexShrink: 1,
     flex: 1,
@@ -22,10 +27,6 @@ export const secStoryCardStyles = ({ COLORS, FONT_SIZE, DARK_MODE }) => StyleShe
     alignItems: 'center',
     flexDirection: 'row',
   },
-  blockContainer: {
-    flexDirection: 'row',
-    paddingVertical: 15,
-  },
   headline: {
     color: COLORS.BRAND_BLACK,
     opacity: 0.9,
@@ -50,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/styles.js

@@ -15,6 +15,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 +23,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,
+    },
   };
 };