@quintype/native-components 2.22.7 → 2.28.1

package/src/components/PrimaryStoryCard/styles.js

@@ -1,66 +1,47 @@
-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',
     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',
+  premiumIcon: {
+    marginTop: FONT_SIZE.h3 * 0.92,
+    marginRight: 5,
   },
-  liveBlogIcon: {
-    height: 15,
-    width: 15,
-    borderRadius: 50,
-    backgroundColor: COLORS.BRAND_3,
+  separatorLine: {
+    height: 0.8,
+    opacity: 0.1,
+    backgroundColor: COLORS.BRAND_BLACK,
   },
 });

package/src/components/RadioButton/index.js

@@ -1,13 +1,13 @@
+import PropTypes from "prop-types";
 import React, { useContext } from "react";
 import {
   StyleSheet,
-  View,
   TouchableOpacity,
+  View,
   ViewPropTypes,
 } from "react-native";
-import PropTypes from "prop-types";
-import { radioButtonStyles } from "./styles";
 import { AppTheme } from "../../utils";
+import { radioButtonStyles } from "./styles";
 
 import { COMP_GENERAL_CONSTANTS } from "../../constants/component-constants";
 

package/src/components/Rating/index.js

@@ -2,9 +2,9 @@ import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
 import { View } from 'react-native';
 import { StarRatingDisplay } from 'react-native-star-rating-widget';
+import { AppTheme } from '../../utils';
 import { Text } from '../Text';
 import { ratingStyles } from './styles';
-import { AppTheme } from '../../utils';
 
 export const RatingLayout = ({ reviewTitle, ratingValue, ratingLabel }) => {
   const { theme } = useContext(AppTheme);

package/src/components/RelatedStoriesCard/index.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
 import { Text, View ,I18nManager} from 'react-native';
 import { getScreenPercentageWidth, AppTheme } from '../../utils/index';
-import { SecondaryStoryCard, SecondaryStoryCardNew, ShareButton } from '../index';
+import { SecondaryStoryCard, ShareButton } from '../index';
 
 import { relatedStoriesStyles } from './styles';
 
@@ -13,10 +13,8 @@ export const RelatedStoriesCard = ({
   cdn,
   stories,
   onStoryPress,
-  collectionTestID,
   RelatedCardID,
   title,
-  switchToNewDesign,
 }) => {
   const sliceLimit = 5;
 
@@ -41,19 +39,12 @@ export const RelatedStoriesCard = ({
             onPress: () => onStoryPress(secondaryStory),
             key: secondaryStory?.id,
           };
-          return switchToNewDesign ? (
-            <SecondaryStoryCardNew
+            <SecondaryStoryCard
               {...storyCardProps}
               iconComponent={<ShareButton story={secondaryStory} inListingStoryCard />}
               imageWidth={getScreenPercentageWidth(28)}
               horizontalPadding={4}
             />
-          ) : (
-            <SecondaryStoryCard
-              {...storyCardProps}
-              imageWidth={getScreenPercentageWidth(40)}
-            />
-          );
         })}
       </View>
     </>
@@ -66,5 +57,4 @@ RelatedStoriesCard.propTypes = {
   collectionTestID: PropTypes.string,
   RelatedCardID: PropTypes.string,
   title:PropTypes.string,
-  switchToNewDesign: PropTypes.bool,
 };

package/src/components/SecondaryStoryCard/index.js

@@ -1,46 +1,38 @@
-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, { useContext, memo } from 'react';
 import {
-  Image,
   StyleSheet,
   TouchableOpacity,
   View,
   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 { secStoryCardStyles } from './styles';
+import { ResponsiveImage, Text, StoryCardDetailsRow, StoryTemplateIcon } from '../index';
+import { storyStyles } from './styles';
 import {
   COMP_GENERAL_CONSTANTS,
   COMP_CONTENT_CONSTANTS,
 } from '../../constants/component-constants';
+import PremiumIcons from '../../Icons/PremiumIcons/index';
 
-export const SecondaryStoryCard = (props) => {
+const SecondaryStoryCardBase = (props) => {
+  const { story = {} } = props;
   const { theme } = useContext(AppTheme);
-  const translate = get(theme, ['translate'], (word) => word);
-
   const {
-    locale,
     COLORS,
-    reverseTimeAdverbPosition,
-    enableReadTimeOnStoryCards,
-    DATE_TIME_FORMAT,
+    premiumIcon,
+    FONT_SIZE,
+    storyCardOptions = {},
   } = theme;
-  const styles = secStoryCardStyles(theme);
-  const { story = {} } = props;
-
-  const DATE_FORMAT = DATE_TIME_FORMAT.dateFormat;
 
+  const styles = storyStyles(theme);
   const containerStyle = StyleSheet.flatten([
     styles.container,
     { paddingHorizontal: props.horizontalPadding },
@@ -49,114 +41,73 @@ export const SecondaryStoryCard = (props) => {
     styles.headline,
     props.headlineStyle,
   ]);
-  const authorTextStyle = StyleSheet.flatten([
-    styles.authorText,
-    props.dateTextStyle,
-  ]);
-  const iconStyles = StyleSheet.flatten([styles.iconStyles, props.iconStyle]);
 
-  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);
 
-  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={containerStyle}
-    >
-      <ResponsiveImage
-        metaData={getImageMetadata(story)}
-        slug={getImageSlug(story) || ''}
-        cdn={props.cdn || ''}
-        imageWidth={props.imageWidth}
+    <>
+      <TouchableOpacity
+        testID={COMP_GENERAL_CONSTANTS.secondaryStoryCard}
+        onPress={throttledOnpress}
+        activeOpacity={0.8}
+        style={containerStyle}
       >
-        <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
-          primary
-          numberOfLines={3}
-          ellipsizeMode="tail"
-          style={headlineStyle}
-          testID={COMP_GENERAL_CONSTANTS.secondaryStoryHeadline}
-        >
-          {getStoryHeadline(story)?.trim()}
-        </Text>
-        <View style={styles.authorAndIconContainer}>
-          <Text
-            style={authorTextStyle}
-            numberOfLines={2}
-            testID={COMP_CONTENT_CONSTANTS.authorName}
+        <View style={[styles.imageAndDetails, storyCardOptions.alignSmallCardImage === "right" && { flexDirection: 'row-reverse' }]}>
+          {storyCardOptions.enableSmallCardImage && (<ResponsiveImage
+            styles={styles.image}
+            metaData={getImageMetadata(story)}
+            slug={getImageSlug(story) || ''}
+            cdn={props.cdn || ''}
+            imageWidth={props.imageWidth}
           >
-            {authorName
-              + getTimeForStoryCards(
-                story['published-at'],
-                DATE_FORMAT,
-                locale,
-                translate,
-                reverseTimeAdverbPosition,
-              )}
-          </Text>
-          <View style={iconStyles}>{props.iconComponent}</View>
+            <View style={styles.storyTypeContainer}>
+              <StoryTemplateIcon storyTemplate={story['story-template']} theme={theme} />
+            </View>
+          </ResponsiveImage>)
+          }
+          <View style={styles.headlineAndTimestampBlockContainer}>
+            {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.secondaryStoryHeadline}
+              >
+                {isPremiumStory && premiumIcon !== 'none' && <PremiumIcons style={styles.premiumIcon} name={premiumIcon} color={COLORS.primary} size={FONT_SIZE.h4} />}
+                {isPremiumStory && premiumIcon !== 'none' && ' '}
+                {getStoryHeadline(story)?.trim()}
+              </Text>
+            </View>
+            <StoryCardDetailsRow
+              authorName={get(story.authors, [0, 'name'])}
+              publishedAt={story["published-at"]}
+              readTime={story['read-time']}
+            />
+          </View>
         </View>
-      </View>
-    </TouchableOpacity>
+        <View style={styles.icon}>{props.iconComponent}</View>
+      </TouchableOpacity>
+      <View style={[styles.separatorLine, { marginHorizontal: props.horizontalPadding }]} />
+    </>
   );
 };
 
-SecondaryStoryCard.propTypes = TouchableOpacityProps && {
+SecondaryStoryCardBase.propTypes = TouchableOpacityProps && {
   cdn: PropTypes.string.isRequired,
-  imageStyle: Image.style,
   imageWidth: PropTypes.number,
   headlineStyle: TextStyle,
-  dateTextStyle: TextStyle,
   story: PropTypes.any.isRequired,
   iconComponent: PropTypes.element,
   horizontalPadding: PropTypes.number,
 };
 
-SecondaryStoryCard.defaultProps = {
+SecondaryStoryCardBase.defaultProps = {
   cdn: '',
   horizontalPadding: 12,
 };
+
+export const SecondaryStoryCard = memo(SecondaryStoryCardBase);

package/src/components/SecondaryStoryCard/styles.js

@@ -1,79 +1,59 @@
 import { StyleSheet } from 'react-native';
 
-export const secStoryCardStyles = ({ COLORS, FONT_SIZE, DARK_MODE }) => StyleSheet.create({
+export const storyStyles = ({ COLORS, FONT_SIZE, FONT_FAMILY, lineHeightMultiplier, storyCardOptions = {} }) => StyleSheet.create({
   container: {
     flexDirection: 'row',
+    justifyContent: 'space-between',
     backgroundColor: COLORS.BRAND_WHITE,
-    paddingVertical: 15,
+    paddingVertical: 10,
+    alignItems: 'flex-start',
+    gap: 10,
   },
-  headlineAndAuthorBlockContainer: {
+  imageAndDetails: {
+    flexDirection: 'row',
     flexShrink: 1,
-    flex: 1,
-    justifyContent: 'space-between',
-    paddingHorizontal: 10,
+    alignItems: 'flex-start',
+    gap: 10,
   },
-  authorAndIconContainer: {
-    flexDirection: 'row',
+  image: {
+    marginBottom: 4,
+    marginTop: storyCardOptions.enableSectionName ? FONT_SIZE.h4 * lineHeightMultiplier + 8 : 4,
+  },
+  icon: {
+    marginBottom: 4,
+    marginTop: storyCardOptions.enableSectionName ? FONT_SIZE.h4 * lineHeightMultiplier + 8 : 4,
+  },
+  headlineAndTimestampBlockContainer: {
+    flexShrink: 1,
+    flexGrow: 1,
+    gap: 4,
     justifyContent: 'space-between',
   },
-  authorText: {
-    color: COLORS.BRAND_BLACK,
-    fontSize: FONT_SIZE.h6,
-    lineHeight: FONT_SIZE.h6 * 1.3,
-    opacity: 0.5,
-    fontWeight: '500',
-    paddingTop: 8,
+  sectionName: {
+    color: COLORS.BRAND_1,
+    fontSize: FONT_SIZE.h4,
+    lineHeight: FONT_SIZE.h4 * lineHeightMultiplier,
   },
   headline: {
     color: COLORS.BRAND_BLACK,
-    opacity: 0.9,
     flexWrap: 'wrap',
     fontSize: FONT_SIZE.h3,
-    lineHeight: FONT_SIZE.h3 * 1.5,
-  },
-  iconStyles: {
-    justifyContent: 'flex-end',
-  },
-  xminContainer: {
-    position: 'absolute',
-    bottom: 8,
-    right: 8,
-  },
-  xmin: {
-    backgroundColor: DARK_MODE ? COLORS.MONO6 : COLORS.BRAND_WHITE,
-    paddingLeft: 8,
-    paddingRight: 8,
-  },
-  xminText: {
-    color: COLORS.BRAND_BLACK,
-    fontSize: FONT_SIZE.h5,
+    fontFamily: FONT_FAMILY.primaryBold,
+    lineHeight: FONT_SIZE.h3 * lineHeightMultiplier,
+    marginBottom: 4,
   },
   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',
+  premiumIcon: {
+    marginTop: FONT_SIZE.h3 * 0.45,
+    marginRight: 3,
   },
-  liveBlogIcon: {
-    height: 12,
-    width: 12,
-    borderRadius: 50,
-    backgroundColor: COLORS.BRAND_3,
+  separatorLine: {
+    height: 0.8,
+    opacity: 0.1,
+    backgroundColor: COLORS.BRAND_BLACK,
   },
 });

package/src/components/Story/index.js

@@ -1,20 +1,19 @@
+import { hexToRgb } from '@quintype/native-components/src/utils/colorUtils';
 import PropTypes from 'prop-types';
-import React, { useEffect, useContext } from 'react';
-import { View, I18nManager, TouchableOpacity } from 'react-native';
-import { Text } from '../index';
-import { StoryHeader } from '../StoryHeader';
+import React, { useContext, useEffect } from 'react';
+import { I18nManager, View } from 'react-native';
+import LinearGradient from "react-native-linear-gradient";
+import { ClockIcon } from '../../Icons/ClockIcon';
+import { AppTheme, getTimeInFormat } from '../../utils';
+import { isMiddleIndexOfArray } from '../../utils/arrayUtils';
+import { getFirstVideoElement, isStoryFree } from '../../utils/story';
+import { STORY_TYPES } from '../../utils/story-types';
+import { FBCommentsRow } from '../FBCommentsRow';
 import { StoryContent } from '../StoryContent';
+import { StoryHeader } from '../StoryHeader';
 import { TagsRow } from '../TagsRow/TagsRow';
-import { FBCommentsRow } from '../FBCommentsRow';
-import { STORY_TYPES } from '../../utils/story-types';
-import { getTimeInFormat, AppTheme } from '../../utils';
-import { ShareButton } from '../index';
-import { ClockIcon } from '../../Icons/ClockIcon';
+import { ShareButton, Text } from '../index';
 import { storyStyles } from './styles';
-import { isStoryFree, getFirstVideoElement } from '../../utils/story';
-import { isMiddleIndexOfArray } from '../../utils/arrayUtils';
-import LinearGradient from "react-native-linear-gradient";
-import { hexToRgb } from '@quintype/native-components/src/utils/colorUtils';
 
 const getLiveBlogTimeStamp = (card, DATE_FORMAT, story, styles, locale) => {
   const slug = `?cardId=${card.id}`;

package/src/components/StoryHeader/index.js

@@ -1,25 +1,25 @@
 import get from 'lodash/get';
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
-import { TouchableOpacity, View, I18nManager,StyleSheet } from 'react-native';
+import { TouchableOpacity, View } from 'react-native';
+import { COMP_CONTENT_CONSTANTS } from '../../constants/component-constants/content-constants/constants';
 import {
+  AppTheme,
   getImageMetadata,
   getScreenPercentageWidth,
-  getTimeInFormat,
-  AppTheme,
-  stripHTML,
+  getTimeInFormat
 } from '../../utils';
 import { STORY_TYPES } from '../../utils/story-types';
+import { YouTubePlayer } from '../YouTubePlayer';
 import {
-  AuthorRow, ResponsiveImage, StoryText, StoryTitle, Text,
+  AuthorRow, ResponsiveImage,
+  StoryTitle, Text
 } from '../index';
-import { YouTubePlayer } from '../YouTubePlayer';
 import { storyHeaderStyles } from './styles';
-import { COMP_CONTENT_CONSTANTS } from '../../constants/component-constants/content-constants/constants';
 
 import { DailyMotionPlayer } from '../DailyMotionPlayer';
 import { RatingLayout } from '../Rating';
-import  CustomHtmlParser  from './../Html/index';
+import CustomHtmlParser from './../Html/index';
 
 const getHeroImage = (cdn, story) => {
   const imageSlug = story['hero-image-s3-key'];

package/src/components/StoryTemplateIcon/index.js

@@ -0,0 +1,58 @@
+import React from "react";
+import { View } from "react-native";
+import FAIcon from "react-native-vector-icons/FontAwesome";
+import MaterialIcon from "react-native-vector-icons/MaterialIcons";
+import { Text } from "../index";
+import { storyTemplateIconStyles } from "./styles";
+
+export const StoryTemplateIcon = ({
+  storyTemplate,
+  cardType = "secondary",
+  theme,
+}) => {
+  const { COLORS, FONT_SIZE } = theme;
+
+  const styles = storyTemplateIconStyles(COLORS, FONT_SIZE, cardType);
+
+  const iconSize = () => {
+    switch (cardType) {
+      case "primary":
+        return 20;
+      case "secondary":
+      default:
+        return 14;
+    }
+  };
+
+  const showIcon = (name, iconFamily = "FontAwesome") => (
+    <View style={styles.storyType}>
+      {iconFamily === "MaterialIcons" ? (
+        <MaterialIcon name={name} size={iconSize()} color={COLORS.MONO7} />
+      ) : (
+        <FAIcon name={name} size={iconSize()} color={COLORS.MONO7} />
+      )}
+    </View>
+  );
+
+  const showLiveBlogIcon = () => (
+    <View style={styles.storyType}>
+      <View style={styles.liveBlogIcon} />
+      <Text style={styles.liveBlogText}>LIVE</Text>
+    </View>
+  );
+
+  switch (storyTemplate) {
+    case "text":
+      return null;
+    case "photo":
+      return showIcon("photo");
+    case "video":
+      return showIcon("play");
+    case "live-blog":
+      return showLiveBlogIcon();
+    case "visual-story":
+      return showIcon("web-stories", "MaterialIcons");
+    default:
+      return null;
+  }
+};

package/src/components/StoryTemplateIcon/styles.js

@@ -0,0 +1,23 @@
+import { StyleSheet } from 'react-native';
+
+export const storyTemplateIconStyles = (COLORS, FONT_SIZE, cardType) => StyleSheet.create({
+  storyType: {
+    backgroundColor: COLORS.MONO1,
+    padding: cardType === "primary" ? 8 : 4,
+    justifyContent: 'space-between',
+    alignItems: 'space-between',
+    flexDirection: 'row',
+  },
+  liveBlogText: {
+    color: COLORS.MONO7,
+    fontSize: FONT_SIZE.h5,
+    marginLeft: cardType === "primary" ? 8 : 4,
+    fontWeight: 'bold',
+  },
+  liveBlogIcon: {
+    height: 12,
+    width: 12,
+    borderRadius: 50,
+    backgroundColor: COLORS.BRAND_3,
+  },
+});

package/src/components/StoryText/index.js

@@ -1,11 +1,14 @@
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
 import {
-  View, StyleSheet, Linking, Text, I18nManager,
+  I18nManager,
+  StyleSheet,
+  Text,
+  View
 } from 'react-native';
 import HTML from 'react-native-render-html';
-import { AppTheme } from '../../utils/context';
 import { customHTMLStyles } from '../../constants/renderHTML';
+import { AppTheme } from '../../utils/context';
 
 import { storyTextStyles } from './styles';