@quintype/native-components 2.28.0 → 2.28.2

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
+            return <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/ResponsiveImage/index.js

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React, {
   memo, useCallback, useContext, useState,
 } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet, View, ImageBackground } from 'react-native';
 import FastImage from 'react-native-fast-image';
 import Icon from 'react-native-vector-icons/FontAwesome';
 import { FallbackIcon } from '../../Icons/FallBackIcon';
@@ -23,6 +23,14 @@ const ResponsiveImageBase = (props) => {
     roundedImageCorners,
   } = theme;
 
+  const flattenedBackgroudStyle = StyleSheet.flatten([
+    {marginTop: props.styles?.marginTop ?? 0},
+    roundedImageCorners && {
+      borderRadius: 12,
+      overflow: "hidden",
+    },
+  ])
+
   const flattenedImageStyle = StyleSheet.flatten([
     styles.defaultImage,
     props.styles,
@@ -30,15 +38,11 @@ const ResponsiveImageBase = (props) => {
       width: props.imageWidth,
       height: (props.imageWidth * 9) / 16,
     },
-    props?.elementType === 'gallery' && {
-      backgroundColor: COLORS.BRAND_BLACK,
-    },
-    roundedImageCorners && {
-      borderRadius: 12,
-      overflow: "hidden",
-    },
+    props.styles?.marginTop && { marginTop: 0 } ,
+
   ]);
 
+
   const placeholderStyle = {
     ...StyleSheet.absoluteFillObject,
     ...props.styles,
@@ -47,6 +51,7 @@ const ResponsiveImageBase = (props) => {
     justifyContent: "center",
     alignItems: "center",
     borderRadius: roundedImageCorners ? 12 : 0,
+    marginTop: 0
   };
 
   const fallBackIcon = CustomFallBackIcon ? (
@@ -55,13 +60,8 @@ const ResponsiveImageBase = (props) => {
     <FallbackIcon />
   );
 
-  let imageUrl = '';
 
-  if (props?.elementType === 'gallery') {
-    imageUrl = getCustomResolutionImageURL(props, [1, 1]);
-  } else {
-    imageUrl = getImageURL(props);
-  }
+  let imageUrl  = getImageURL(props)
 
   const userFallback = () => <Icon name="user" size={20} />;
 
@@ -77,6 +77,11 @@ const ResponsiveImageBase = (props) => {
 
   const onLoadHandler = useCallback(handleImageLoad, []);
 
+  const lowestQualitySourceURI = {
+    uri: decodeURIComponent(getImageURL(props,2)),
+    priority: FastImage.priority.high,
+  }
+
   const sourceURI = {
     uri: decodeURIComponent(imageUrl),
     priority: FastImage.priority.high,
@@ -85,15 +90,27 @@ const ResponsiveImageBase = (props) => {
 
   const preferredResizeMode = resizeImagesToFit ? FastImage.resizeMode.contain : FastImage.resizeMode.cover;
 
-  return (
-    <View>
+    const ImageLayout = () => {
+    return (
       <FastImage
         style={flattenedImageStyle}
         source={sourceURI}
-        onLoad={onLoadHandler}
-        resizeMode={props?.elementType === 'gallery' && !(props.hero) ? FastImage.resizeMode.contain : preferredResizeMode}
+        resizeMode={FastImage.resizeMode.contain}
         {...props}
       />
+    )
+  }
+
+  return (
+    <View style={flattenedBackgroudStyle}>
+      <ImageBackground
+      source={lowestQualitySourceURI}
+      resizeMode='cover'
+      blurRadius={50}
+      onLoad={()=>setPlaceholder(false)}
+      >
+        <ImageLayout />
+      </ImageBackground>
       {placeholder && (
         <View style={placeholderStyle} testID={props.containerTestID}>
           {showFallBackIcon()}

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/ShareButton/index.js

@@ -19,7 +19,7 @@ const ShareButtonBase = (props) => {
     const { url } = story || {};
     switch (type) {
       case 'story':
-        return url;
+        return url || slug;
       case 'card':
         return `${url}${slug}`;
       case 'image':

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/StoryGallery/index.js

@@ -138,7 +138,7 @@ export const StoryGallery = ({ cdn, card }) => {
 
             const style = galleryStyles.fullWidth;
             return (
-              <TouchableOpacity>
+              <TouchableOpacity style={galleryStyles.subContainer}>
                 <LightBoxImage
                   onClickHandler={onPressHandler}
                   hero={!!data.metaData['focus-point']}

package/src/components/StoryGallery/styles.js

@@ -129,5 +129,8 @@ export const styles = ({ FONT_SIZE }) => {
       position: 'absolute',
       color: COLORS.BRAND_WHITE,
     },
+    subContainer: {
+      margin:0.3
+    }
   });
 };