@quintype/native-components 2.19.3 → 2.19.5

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 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)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quintype/native-components",
-  "version": "2.19.3",
+  "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,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,19 +1,19 @@
-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;
@@ -22,6 +22,8 @@ const PrimaryStoryCardNewBase = (props) => {
     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([
     styles.container,
@@ -36,8 +38,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);
 
@@ -99,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>
@@ -121,7 +125,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,
@@ -15,16 +15,18 @@ import {
   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, 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 +41,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);
 
@@ -81,8 +85,8 @@ 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>
@@ -102,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>
@@ -123,7 +127,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'];
@@ -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,
+    },
   };
 };