@quintype/native-components 2.20.0-fix-rtl-issues.1 → 2.20.1-temp-fast-image-constraint.1

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,13 +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_BLACK,
-    opacity: 0.8
+    opacity: 0.8,
   },
 });

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

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

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

@@ -1,16 +1,24 @@
 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",
+  primaryStoryReadTime: "COMP_GENERAL_PRIMARY_STORY_READTIME",
+  secondaryStoryReadTime: "COMP_GENERAL_SECONDARY_STORY_READTIME",
+  actionTextTouch: "COMP_GENERAL_ACTION_TEXT_TOUCH",
+  buttonTouch: "COMP_GENERAL_BUTTON_TOUCH",
+  headerLogoTouch: "COMP_GENERAL_HEADER_LOGO_TOUCH",
+  radioButtonTouch: "COMP_GENERAL_RADIO",
+  shareButtonTouch: "COMP_GENERAL_SHARE",
 };

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

package/src/utils/timeUtils.js

@@ -15,14 +15,14 @@ export function getTimeInFormat(date, format, localTime) {
   return '';
 }
 
-export const getTimeForStoryCards = (date, format, localTime) => {
+export const getTimeForStoryCards = (date, format, localTime, translate) => {
   if (date) {
     const currentDate = new Date();
     const dateToFormat = new Date(date);
     const locale = dateFNSlocale[localTime];
     const distanceInMinutes = differenceInMinutes(currentDate, dateToFormat);
     if (distanceInMinutes <= 1440) {
-      return `published ${formatDistanceToNow(dateToFormat, { locale })} ago`;
+      return `${translate("published")} ${formatDistanceToNow(dateToFormat, { locale })} ${translate("ago")}`;
     }
     return dateFormat(dateToFormat, format, { locale });
   }