@quintype/native-components 2.22.4 → 2.22.5-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quintype/native-components",
-  "version": "2.22.4",
+  "version": "2.22.5-beta.0",
   "description": "",
   "main": "src/index.js",
   "scripts": {

package/src/components/AlsoRead/index.js

@@ -1,10 +1,10 @@
-import React, { useContext } from 'react';
 import get from 'lodash/get';
-import { View, TouchableOpacity } from 'react-native';
-import { ResponsiveImage, Text } from '../index';
-import { alsoReadStyles } from './styles';
+import React, { useContext } from 'react';
+import { TouchableOpacity, View } from 'react-native';
 import { FallbackIcon } from '../../Icons/FallBackIcon';
 import { AppTheme } from '../../utils';
+import { ResponsiveImage, Text } from '../index';
+import { alsoReadStyles } from './styles';
 
 export const AlsoRead = (props) => {
   const {

package/src/components/AuthorRow/index.js

@@ -2,12 +2,12 @@ import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
 import { View } from 'react-native';
 import Icon from 'react-native-vector-icons/FontAwesome';
-import { ResponsiveImage, Text } from '../index';
 import { ActionText } from '../ActionText/ActionText';
+import { ResponsiveImage, Text } from '../index';
 
-import { authorRowStyleSheet } from './styles';
-import { AppTheme } from '../../utils';
 import { COMP_CONTENT_CONSTANTS } from '../../constants/component-constants/content-constants/constants';
+import { AppTheme } from '../../utils';
+import { authorRowStyleSheet } from './styles';
 
 export const AuthorRow = ({
   authors,

package/src/components/BackNavigator/index.js

@@ -1,18 +1,18 @@
+import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
 import {
-  View,
+  I18nManager,
   StyleSheet,
-  ViewPropTypes,
   TouchableOpacity,
-  I18nManager,
+  View,
+  ViewPropTypes,
 } from 'react-native';
 import Icon from 'react-native-vector-icons/AntDesign';
-import PropTypes from 'prop-types';
-import { AppTheme } from '../../utils/context';
 import { COMP_GENERAL_CONSTANTS } from '../../constants/component-constants/general-constants/constants';
+import { AppTheme } from '../../utils/context';
 
-import { backNavigatorStyles } from './styles';
 import { Text } from '../Text';
+import { backNavigatorStyles } from './styles';
 
 export const BackNavigator = (props) => {
   const { theme } = useContext(AppTheme);

package/src/components/Button/index.js

@@ -6,10 +6,10 @@ import {
   View,
   ViewPropTypes,
 } from "react-native";
+import { COMP_GENERAL_CONSTANTS } from "../../constants/component-constants/general-constants/constants";
 import { AppTheme } from "../../utils";
 import { Text } from "../Text";
 import { styles } from "./styles";
-import { COMP_GENERAL_CONSTANTS } from "../../constants/component-constants/general-constants/constants";
 
 export const Button = (props) => {
   const { icon, text, onPress } = props;

package/src/components/CollectionCard/index.js

@@ -1,20 +1,22 @@
 import get from 'lodash/get';
 import isEmpty from 'lodash/isEmpty';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { memo } from 'react';
 import { getScreenPercentageWidth } from '../../utils/index';
 import {
   CollectionTitle,
   PrimaryStoryCard,
   SecondaryStoryCard,
+  ShareButton,
 } from '../index';
 
-export const CollectionCard = ({
+const CollectionCardBase = ({
   cdn,
   collectionName,
   stories,
   onCollectionPress,
   onStoryPress,
+  collectionTestID,
   offset,
   horizontalPadding,
   initialOffset, /* Number of items to load on first load */
@@ -22,10 +24,10 @@ export const CollectionCard = ({
 }) => {
   const sliceLimit = offset || initialOffset || 5;
   const primaryStory = !isEmpty(stories) && get(stories, [0, 'story'], stories[0]);
+
   return (
     <>
-      {!hideCollectionTitle
-      && (
+      {!hideCollectionTitle && (
       <CollectionTitle
         title={collectionName}
         onPress={onCollectionPress}
@@ -33,11 +35,13 @@ export const CollectionCard = ({
       />
       )}
       <PrimaryStoryCard
+        collectionTestID={collectionTestID}
         onPress={() => {
           !isEmpty(stories) && onStoryPress(primaryStory);
         }}
         cdn={cdn}
         story={!isEmpty(stories) ? primaryStory : {}}
+        iconComponent={<ShareButton story={primaryStory} inListingStoryCard />}
         imageWidth={getScreenPercentageWidth(100) - 2 * horizontalPadding}
         horizontalPadding={horizontalPadding}
       />
@@ -45,11 +49,13 @@ export const CollectionCard = ({
         const secondaryStory = get(currentStory, ['story'], currentStory);
         return (
           <SecondaryStoryCard
+            collectionTestID={collectionTestID}
             onPress={() => onStoryPress(secondaryStory)}
-            key={`${secondaryStory?.id}`}
+            key={secondaryStory?.id}
             cdn={cdn}
             story={secondaryStory}
-            imageWidth={getScreenPercentageWidth(40)}
+            iconComponent={<ShareButton story={secondaryStory} inListingStoryCard />}
+            imageWidth={getScreenPercentageWidth(28)}
             horizontalPadding={horizontalPadding}
           />
         );
@@ -57,18 +63,22 @@ export const CollectionCard = ({
     </>
   );
 };
-CollectionCard.propTypes = {
+
+CollectionCardBase.propTypes = {
+  offset: PropTypes.number,
   initialOffset: PropTypes.number,
   cdn: PropTypes.string.isRequired,
-  collectionName: PropTypes.string.isRequired,
+  collectionName: PropTypes.string,
   stories: PropTypes.array.isRequired,
   onCollectionPress: PropTypes.func,
   onStoryPress: PropTypes.func,
-  offset: PropTypes.number,
+  collectionTestID: PropTypes.string,
   horizontalPadding: PropTypes.number,
   hideCollectionTitle: PropTypes.bool,
 };
 
-CollectionCard.defaultProps = {
+CollectionCardBase.defaultProps = {
   horizontalPadding: 12,
 };
+
+export const CollectionCard = memo(CollectionCardBase);

package/src/components/CollectionTitle/index.js

@@ -1,61 +1,42 @@
 import PropTypes from 'prop-types';
-import React, { useContext } from 'react';
+import React, { memo, useContext } from 'react';
 import {
-  TextStyle,
-  TouchableOpacity,
-  TouchableOpacityProps,
-  View,
-  ViewStyle,
   StyleSheet,
+  TouchableOpacity
 } from 'react-native';
-
-import { Text } from '../index';
-
-import { collectionStyles } from './styles';
 import { AppTheme } from '../../utils';
-import { COMP_GENERAL_CONSTANTS } from '../../constants/component-constants/general-constants/constants';
+import { Text } from '../index';
+import { collectionTitleStyles } from './styles';
 
-export const CollectionTitle = (props) => {
+const CollectionTitleBase = (props) => {
   const { theme } = useContext(AppTheme);
-  const styles = collectionStyles(theme);
+  const styles = collectionTitleStyles(theme);
   const containerStyle = StyleSheet.flatten([
-    styles.titleContainer,
+    styles.container,
     { paddingHorizontal: props.horizontalPadding },
   ]);
-  const titleStyle = StyleSheet.flatten([styles.titleStyle, props.titleStyle]);
-  const indicatorStyle = StyleSheet.flatten([
-    styles.indicatorStyle,
-    props.indicatorStyle,
-  ]);
+  const titleStyle = StyleSheet.flatten([styles.title, props.titleStyle]);
 
   if (!props.title) {
     return null;
   }
 
   return (
-    <TouchableOpacity
-      style={containerStyle}
-      onPress={props.onPress}
-      testID={COMP_GENERAL_CONSTANTS.collectionTitleTouch}
-    >
-      <Text
-        style={titleStyle}
-        testID={COMP_GENERAL_CONSTANTS.collectionTitleText}
-      >
-        {props.title}
-      </Text>
-      <View style={indicatorStyle} />
+    <TouchableOpacity style={containerStyle} onPress={props.onPress}>
+      <Text style={titleStyle}>{props.title}</Text>
     </TouchableOpacity>
   );
 };
 
-CollectionTitle.propTypes = TouchableOpacityProps && {
-  title: PropTypes.string,
-  titleStyle: TextStyle,
-  indicatorStyle: ViewStyle,
-  horizontalPadding: PropTypes.number,
-};
+CollectionTitleBase.propTypes = TouchableOpacityProps
+  && {
+    title: PropTypes.string,
+    titleStyle: TextStyle,
+    horizontalPadding: PropTypes.number,
+  };
 
-CollectionTitle.defaultProps = {
+CollectionTitleBase.defaultProps = {
   horizontalPadding: 12,
 };
+
+export const CollectionTitle = memo(CollectionTitleBase);

package/src/components/CollectionTitle/styles.js

@@ -1,22 +1,20 @@
 import { StyleSheet } from 'react-native';
 
-export const collectionStyles = (appThemeContext) => {
-  const { COLORS, FONT_SIZE } = appThemeContext;
+export const collectionTitleStyles = (appThemeContext) => {
+  const { COLORS, FONT_SIZE, FONT_FAMILY } = appThemeContext;
+
   return StyleSheet.create({
-    titleContainer: {
-      backgroundColor: COLORS.BRAND_WHITE,
-      paddingVertical: 12,
+    container: {
       justifyContent: 'center',
+      backgroundColor: COLORS.BRAND_WHITE,
+      paddingHorizontal: 12,
+      paddingVertical: 8,
+      marginTop: 8,
     },
-    titleStyle: {
-      fontSize: FONT_SIZE.h1,
+    title: {
+      fontSize: FONT_SIZE.h3,
+      fontFamily: FONT_FAMILY.secondaryBold,
       color: COLORS.BRAND_5,
     },
-    indicatorStyle: {
-      marginTop: 8,
-      width: 30,
-      height: 3,
-      backgroundColor: COLORS.BRAND_1,
-    },
   });
 };

package/src/components/CustomSwitch/index.js

@@ -1,11 +1,11 @@
-import React, { useContext, useState } from "react";
-import { Switch, View } from "react-native";
 import PropTypes from "prop-types";
+import React, { useContext } from "react";
+import { Switch, View } from "react-native";
 import Icon from "react-native-vector-icons/FontAwesome";
-import { Text } from "../Text";
+import { COMP_GENERAL_CONSTANTS } from "../../constants/component-constants/general-constants/constants";
 import { AppTheme } from "../../utils";
+import { Text } from "../Text";
 import { customSwitchStyles } from "./styles";
-import { COMP_GENERAL_CONSTANTS } from "../../constants/component-constants/general-constants/constants";
 
 export const CustomSwitch = ({
   label = "",

package/src/components/DailyMotionPlayer/index.js

@@ -1,6 +1,6 @@
-import React, { useRef } from 'react';
-import PropTypes from 'prop-types';
 import get from 'lodash/get';
+import PropTypes from 'prop-types';
+import React, { useRef } from 'react';
 import { WebView } from 'react-native-webview';
 import { dailyMotionStyles } from './styles';
 

package/src/components/Header/index.js

@@ -7,9 +7,9 @@ import {
   ViewPropTypes,
 } from "react-native";
 
-import { headerStyles } from "./styles";
-import { AppTheme } from "../../utils";
 import { COMP_GENERAL_CONSTANTS } from "../../constants/component-constants";
+import { AppTheme } from "../../utils";
+import { headerStyles } from "./styles";
 
 export const Header = (props) => {
   const { theme } = useContext(AppTheme);

package/src/components/Html/index.js

@@ -1,8 +1,8 @@
-import { TouchableOpacity, View, I18nManager, StyleSheet, Linking } from "react-native";
-import HTML from "react-native-render-html";
-import React from "react";
-import isHTML from "is-html";
 import { Text } from "@quintype/native-components/src/components/Text";
+import isHTML from "is-html";
+import React from "react";
+import { I18nManager, Linking, StyleSheet } from "react-native";
+import HTML from "react-native-render-html";
 
 const CustomHtmlParser = ({ text, textStyle={}, containerStyle={} }) => {
   const textStyles = StyleSheet.flatten([

package/src/components/IconText/index.js

@@ -1,15 +1,15 @@
+import PropTypes from "prop-types";
 import React from "react";
 import {
-  View,
-  TouchableOpacity,
   StyleSheet,
+  TouchableOpacity,
+  View,
   ViewPropTypes,
 } from "react-native";
 import Icon from "react-native-vector-icons/FontAwesome";
-import PropTypes from "prop-types";
+import { COMP_GENERAL_CONSTANTS } from "../../constants/component-constants/general-constants/constants";
 import { Text } from "../Text";
 import { iconTextStyles } from "./iconText_styles";
-import { COMP_GENERAL_CONSTANTS } from "../../constants/component-constants/general-constants/constants";
 
 const IconText = ({
   onPress,

package/src/components/JSEmbedElement/index.js

@@ -1,9 +1,9 @@
-import { WebView } from 'react-native-webview';
-import React, { useState, useRef, useEffect } from 'react';
 import { decode as atob } from 'base-64';
+import get from 'lodash/get';
 import PropTypes from 'prop-types';
+import React, { useEffect, useRef, useState } from 'react';
 import { Dimensions, View } from 'react-native';
-import get from 'lodash/get';
+import { WebView } from 'react-native-webview';
 import { STORY_ELEMENT_SUBTYPES } from '../../constants/cardConstants';
 
 const escapeRegExp = (string) => string.replace(/[.*+\-?^${}()|[\]\\]/g, '\\$&');

package/src/components/LightBoxImage/index.js

@@ -1,9 +1,9 @@
 import PropTypes from 'prop-types';
 import React, { useState } from 'react';
 import { TouchableOpacity } from 'react-native';
-import { ResponsiveImage } from '../ResponsiveImage';
-import { LightBox } from '../LightBox';
 import { getImageHeight } from '../../utils';
+import { LightBox } from '../LightBox';
+import { ResponsiveImage } from '../ResponsiveImage';
 
 export const LightBoxImage = ({
   data, hero, currentLayout, additionalStyles, elementType, onClickHandler = () => {}, index,

package/src/components/PDFReader/index.js

@@ -1,20 +1,20 @@
 import PropTypes from 'prop-types';
-import React, { useState, useContext } from 'react';
+import React, { useContext, useState } from 'react';
 import {
-  View,
   Modal,
-  TouchableOpacity,
+  Platform,
   SafeAreaView,
   StyleSheet,
+  TouchableOpacity,
+  View
 } from 'react-native';
+import Pdf from 'react-native-pdf';
 import IonIcon from 'react-native-vector-icons/Ionicons';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-import Pdf from 'react-native-pdf';
 
-import { Text } from '../index';
-import { pdfStyles } from './styles';
-import { ShareButton } from '../index';
 import { AppTheme } from '../../utils';
+import { ShareButton, Text } from '../index';
+import { pdfStyles } from './styles';
 
 export const PDFReader = ({ card, story }) => {
   const [modalVisible, setModalVisible] = useState(false);
@@ -55,6 +55,7 @@ export const PDFReader = ({ card, story }) => {
             console.warn(error);
           }}
           style={styles.pdfStyle}
+          trustAllCerts={Platform.OS === 'ios'}
         />
       </Modal>
       <View style={styles.pdfContainer}>

package/src/components/PrimaryStoryCard/index.js

@@ -1,41 +1,32 @@
-import { throttle } from 'lodash';
-import get from 'lodash/get';
+import { get, throttle } from 'lodash';
 import PropTypes from 'prop-types';
-import React, { useContext } from 'react';
+import React, { memo, useContext } from 'react';
 import { StyleSheet, TouchableOpacity, View } from 'react-native';
 import Icon from 'react-native-vector-icons/FontAwesome';
+import PremiumIcons from '../../Icons/PremiumIcons/index';
+import {
+  COMP_GENERAL_CONSTANTS,
+} from '../../constants/component-constants';
 import {
   AppTheme,
   getImageMetadata,
   getImageSlug,
-  getTimeForStoryCards,
 } from '../../utils';
 import { getStoryHeadline } from '../../utils/story';
-import { ResponsiveImage, Text } from '../index';
+import { ResponsiveImage, StoryCardDetailsRow, Text } from '../index';
 import { storyStyles } from './styles';
-import {
-  COMP_GENERAL_CONSTANTS,
-  COMP_CONTENT_CONSTANTS,
-} from '../../constants/component-constants';
 
-export const PrimaryStoryCard = (props) => {
+const PrimaryStoryCardBase = (props) => {
   const { story = {} } = props;
   const { theme } = useContext(AppTheme);
-
-  const translate = get(theme, ['translate'], (word) => word);
-
   const {
     COLORS,
     FONT_SIZE,
-    locale,
-    reverseTimeAdverbPosition,
-    enableReadTimeOnStoryCards,
-    DATE_TIME_FORMAT,
+    premiumIcon,
+    storyCardOptions = {},
   } = theme || {};
 
-  const DATE_FORMAT = DATE_TIME_FORMAT.dateFormat;
-
-  const styles = storyStyles(COLORS, FONT_SIZE);
+  const styles = storyStyles(theme);
   const containerStyle = StyleSheet.flatten([
     styles.container,
     { paddingHorizontal: props.horizontalPadding },
@@ -44,16 +35,8 @@ export const PrimaryStoryCard = (props) => {
     styles.headline,
     props.headlineStyle,
   ]);
-  const autorStyle = StyleSheet.flatten([
-    styles.autorText,
-    props.authorTextStyle,
-  ]);
 
-  const name = get(story.authors, [0, 'name']);
-  const authorName = name ? `${translate('By')} ${name} | ` : '';
-  const readTime = enableReadTimeOnStoryCards && story['read-time']
-    ? `${story['read-time']} ${translate('min read')}`
-    : '';
+  const isPremiumStory = story['access'] === 'subscription';
 
   const throttledOnpress = throttle(props.onPress, 1000);
 
@@ -85,6 +68,7 @@ export const PrimaryStoryCard = (props) => {
   };
 
   return (
+    <>
     <TouchableOpacity
       testID={COMP_GENERAL_CONSTANTS.primaryStoryCard}
       onPress={throttledOnpress}
@@ -97,54 +81,51 @@ export const PrimaryStoryCard = (props) => {
         cdn={props.cdn}
         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>
-      <Text
-        style={autorStyle}
-        numberOfLines={2}
-        // TODO: Add corrected testID here
-        testID={COMP_CONTENT_CONSTANTS.authorName}
-      >
-        {authorName
-          + getTimeForStoryCards(
-            story['published-at'],
-            DATE_FORMAT,
-            locale,
-            translate,
-            reverseTimeAdverbPosition,
-          )}
-      </Text>
-      <Text
-        primary
-        numberOfLines={3}
-        ellipsizeMode="tail"
-        style={headlineStyle}
-        testID={COMP_GENERAL_CONSTANTS.primaryStoryHeadline}
-      >
-        {getStoryHeadline(story)}
-      </Text>
+      <View style={styles.contentContainer}>
+        <View style={styles.headlineAndTimestampContainer}>
+        {storyCardOptions.enableSectionName && <Text numberOfLines={1} ellipsizeMode="tail" style={styles.sectionName}>{get(story, ['sections', 0, 'display-name'], '')}</Text>}
+        <View style={{display:'flex', flexDirection:'row'}}>
+          <Text
+            primary
+            numberOfLines={storyCardOptions.numberOfLinesForTitle}
+            ellipsizeMode="tail"
+            style={headlineStyle}
+            testID={COMP_GENERAL_CONSTANTS.primaryStoryHeadline}
+          >
+            {isPremiumStory && premiumIcon !=='none' && <PremiumIcons style={styles.premiumIcon} name={premiumIcon} color={COLORS.primary} size={FONT_SIZE.h2} /> }
+            {isPremiumStory && premiumIcon !=='none' && ' '}
+            {getStoryHeadline(story)}
+          </Text>
+          </View>
+          <StoryCardDetailsRow
+            authorName={get(story.authors, [0, 'name'])}
+            publishedAt={story["published-at"]}
+            readTime={story['read-time']}
+          />
+        </View>
+        <View style={styles.icon}>{props.iconComponent}</View>
+      </View>
     </TouchableOpacity>
+    <View style={[styles.separatorLine, {marginHorizontal: props.horizontalPadding}]}/>
+    </>
   );
 };
 
-PrimaryStoryCard.propTypes = {
+PrimaryStoryCardBase.propTypes = {
   cdn: PropTypes.string,
   imageWidth: PropTypes.number,
   headlineStyle: PropTypes.func,
-  authorTextStyle: PropTypes.func,
   story: PropTypes.object.isRequired,
   onPress: PropTypes.func,
   horizontalPadding: PropTypes.number,
+  iconComponent: PropTypes.element,
 };
 
-PrimaryStoryCard.defaultProps = {
+PrimaryStoryCardBase.defaultProps = {
   cdn: '',
   horizontalPadding: 12,
 };
+
+export const PrimaryStoryCard = memo(PrimaryStoryCardBase);

package/src/components/PrimaryStoryCard/styles.js

@@ -1,39 +1,34 @@
-export const storyStyles = (COLORS = {}, FONT_SIZE = {}, DARK_MODE = {}) => ({
+export const storyStyles = ({COLORS, FONT_SIZE, FONT_FAMILY, lineHeightMultiplier, storyCardOptions = {}}) => ({
   container: {
     backgroundColor: COLORS.BRAND_WHITE,
-    marginTop: 12,
+    paddingVertical: 10,
+    gap: 10,
   },
-  autorText: {
-    color: COLORS?.BRAND_6,
-    fontSize: FONT_SIZE.h5,
-    lineHeight: FONT_SIZE.h5 * 1.3,
-    paddingVertical: 8,
-  },
-  divider: {
-    backgroundColor: COLORS.BRAND_6,
-    height: 12,
-    marginHorizontal: 5,
-    width: 1,
+  contentContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
+    gap: 10,
   },
-  headline: {
-    fontSize: FONT_SIZE.title,
-    lineHeight: FONT_SIZE.title * 1.5,
-    color: COLORS.BRAND_BLACK,
-    opacity: 0.9,
+  headlineAndTimestampContainer: {
+    flexShrink: 1,
+    gap: 4,
   },
-  xminContainer: {
-    position: 'absolute',
-    bottom: 8,
-    right: 8,
+  icon: {
+    marginBottom: 4,
+    marginTop: storyCardOptions.enableSectionName ? FONT_SIZE.h4 * lineHeightMultiplier + 8 : 4,
   },
-  xmin: {
-    backgroundColor: DARK_MODE ? COLORS.MONO6 : COLORS.BRAND_WHITE,
-    paddingLeft: 8,
-    paddingRight: 8,
+  sectionName: {
+    color: COLORS.BRAND_1,
+    fontSize: FONT_SIZE.h4,
+    lineHeight: FONT_SIZE.h4 * lineHeightMultiplier,
   },
-  xminText: {
+  headline: {
+    fontFamily: FONT_FAMILY.primaryBold,
+    fontSize: FONT_SIZE.title,
+    lineHeight: FONT_SIZE.title * lineHeightMultiplier,
     color: COLORS.BRAND_BLACK,
-    fontSize: FONT_SIZE.h5,
+    marginBottom: 4,
   },
   storyTypeContainer: {
     position: 'absolute',
@@ -63,4 +58,13 @@ export const storyStyles = (COLORS = {}, FONT_SIZE = {}, DARK_MODE = {}) => ({
     borderRadius: 50,
     backgroundColor: COLORS.BRAND_3,
   },
+  premiumIcon: {
+    marginTop: FONT_SIZE.h3 * 0.92,
+    marginRight: 5,
+  },
+  separatorLine: {
+    height: 0.8,
+    opacity: 0.1,
+    backgroundColor: COLORS.BRAND_BLACK,
+  },
 });