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

package/src/components/PrimaryStoryCard/index.js

@@ -1,32 +1,41 @@
-import { get, throttle } from 'lodash';
+import { throttle } from 'lodash';
+import get from 'lodash/get';
 import PropTypes from 'prop-types';
-import React, { memo, useContext } from 'react';
+import React, { 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, StoryCardDetailsRow, Text } from '../index';
+import { ResponsiveImage, Text } from '../index';
 import { storyStyles } from './styles';
+import {
+  COMP_GENERAL_CONSTANTS,
+  COMP_CONTENT_CONSTANTS,
+} from '../../constants/component-constants';
 
-const PrimaryStoryCardBase = (props) => {
+export const PrimaryStoryCard = (props) => {
   const { story = {} } = props;
   const { theme } = useContext(AppTheme);
+
+  const translate = get(theme, ['translate'], (word) => word);
+
   const {
     COLORS,
     FONT_SIZE,
-    premiumIcon,
-    storyCardOptions = {},
+    locale,
+    reverseTimeAdverbPosition,
+    enableReadTimeOnStoryCards,
+    DATE_TIME_FORMAT,
   } = theme || {};
 
-  const styles = storyStyles(theme);
+  const DATE_FORMAT = DATE_TIME_FORMAT.dateFormat;
+
+  const styles = storyStyles(COLORS, FONT_SIZE);
   const containerStyle = StyleSheet.flatten([
     styles.container,
     { paddingHorizontal: props.horizontalPadding },
@@ -35,8 +44,16 @@ const PrimaryStoryCardBase = (props) => {
     styles.headline,
     props.headlineStyle,
   ]);
+  const autorStyle = StyleSheet.flatten([
+    styles.autorText,
+    props.authorTextStyle,
+  ]);
 
-  const isPremiumStory = story['access'] === 'subscription';
+  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 throttledOnpress = throttle(props.onPress, 1000);
 
@@ -68,7 +85,6 @@ const PrimaryStoryCardBase = (props) => {
   };
 
   return (
-    <>
     <TouchableOpacity
       testID={COMP_GENERAL_CONSTANTS.primaryStoryCard}
       onPress={throttledOnpress}
@@ -81,51 +97,54 @@ const PrimaryStoryCardBase = (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>
-      <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>
+      <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>
     </TouchableOpacity>
-    <View style={[styles.separatorLine, {marginHorizontal: props.horizontalPadding}]}/>
-    </>
   );
 };
 
-PrimaryStoryCardBase.propTypes = {
+PrimaryStoryCard.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,
 };
 
-PrimaryStoryCardBase.defaultProps = {
+PrimaryStoryCard.defaultProps = {
   cdn: '',
   horizontalPadding: 12,
 };
-
-export const PrimaryStoryCard = memo(PrimaryStoryCardBase);

package/src/components/PrimaryStoryCard/styles.js

@@ -1,34 +1,39 @@
-export const storyStyles = ({COLORS, FONT_SIZE, FONT_FAMILY, lineHeightMultiplier, storyCardOptions = {}}) => ({
+export const storyStyles = (COLORS = {}, FONT_SIZE = {}, DARK_MODE = {}) => ({
   container: {
     backgroundColor: COLORS.BRAND_WHITE,
-    paddingVertical: 10,
-    gap: 10,
+    marginTop: 12,
   },
-  contentContainer: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'flex-start',
-    gap: 10,
-  },
-  headlineAndTimestampContainer: {
-    flexShrink: 1,
-    gap: 4,
-  },
-  icon: {
-    marginBottom: 4,
-    marginTop: storyCardOptions.enableSectionName ? FONT_SIZE.h4 * lineHeightMultiplier + 8 : 4,
+  autorText: {
+    color: COLORS?.BRAND_6,
+    fontSize: FONT_SIZE.h5,
+    lineHeight: FONT_SIZE.h5 * 1.3,
+    paddingVertical: 8,
   },
-  sectionName: {
-    color: COLORS.BRAND_1,
-    fontSize: FONT_SIZE.h4,
-    lineHeight: FONT_SIZE.h4 * lineHeightMultiplier,
+  divider: {
+    backgroundColor: COLORS.BRAND_6,
+    height: 12,
+    marginHorizontal: 5,
+    width: 1,
   },
   headline: {
-    fontFamily: FONT_FAMILY.primaryBold,
     fontSize: FONT_SIZE.title,
-    lineHeight: FONT_SIZE.title * lineHeightMultiplier,
+    lineHeight: FONT_SIZE.title * 1.5,
+    color: COLORS.BRAND_BLACK,
+    opacity: 0.9,
+  },
+  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,
-    marginBottom: 4,
+    fontSize: FONT_SIZE.h5,
   },
   storyTypeContainer: {
     position: 'absolute',
@@ -58,13 +63,4 @@ export const storyStyles = ({COLORS, FONT_SIZE, FONT_FAMILY, lineHeightMultiplie
     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,
-  },
 });

package/src/components/PrimaryStoryCardNew/index.js

@@ -0,0 +1,134 @@
+import { get, throttle } from 'lodash';
+import PropTypes from 'prop-types';
+import React, { useContext, memo } from 'react';
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import Icon from 'react-native-vector-icons/FontAwesome';
+import {
+  AppTheme,
+  getImageMetadata,
+  getImageSlug,
+} from '../../utils';
+import { getStoryHeadline } from '../../utils/story';
+import { ResponsiveImage, Text, StoryCardDetailsRow } from '../index';
+import { storyStyles } from './styles';
+import {
+  COMP_GENERAL_CONSTANTS,
+  COMP_CONTENT_CONSTANTS,
+} from '../../constants/component-constants';
+import PremiumIcons from '../../Icons/PremiumIcons/index';
+
+const PrimaryStoryCardNewBase = (props) => {
+  const { story = {} } = props;
+  const { theme } = useContext(AppTheme);
+  const {
+    COLORS,
+    FONT_SIZE,
+    FONT_FAMILY,
+    premiumIcon,
+    lineHeightMultiplier,
+    storyCardOptions = {},
+  } = theme || {};
+
+  const styles = storyStyles(theme);
+  const containerStyle = StyleSheet.flatten([
+    styles.container,
+    { paddingHorizontal: props.horizontalPadding },
+  ]);
+  const headlineStyle = StyleSheet.flatten([
+    styles.headline,
+    props.headlineStyle,
+  ]);
+
+  const isPremiumStory = story['access'] === 'subscription';
+
+  const throttledOnpress = throttle(props.onPress, 1000);
+
+  const showIcon = (name) => (
+    <View style={styles.storyType}>
+      <Icon name={name} size={22} 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.primaryStoryCard}
+      onPress={throttledOnpress}
+      activeOpacity={0.8}
+      style={containerStyle}
+    >
+      <ResponsiveImage
+        metaData={getImageMetadata(story)}
+        slug={getImageSlug(story)}
+        cdn={props.cdn}
+        imageWidth={props.imageWidth}
+      >
+        <View style={styles.storyTypeContainer}>{showStoryType()}</View>
+      </ResponsiveImage>
+      <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}]}/>
+    </>
+  );
+};
+
+PrimaryStoryCardNewBase.propTypes = {
+  cdn: PropTypes.string,
+  imageWidth: PropTypes.number,
+  headlineStyle: PropTypes.func,
+  story: PropTypes.object.isRequired,
+  onPress: PropTypes.func,
+  horizontalPadding: PropTypes.number,
+  iconComponent: PropTypes.element,
+};
+
+PrimaryStoryCardNewBase.defaultProps = {
+  cdn: '',
+  horizontalPadding: 12,
+};
+
+export const PrimaryStoryCardNew = memo(PrimaryStoryCardNewBase);

package/src/components/PrimaryStoryCardNew/styles.js

@@ -0,0 +1,70 @@
+export const storyStyles = ({COLORS, FONT_SIZE, FONT_FAMILY, lineHeightMultiplier, storyCardOptions = {}}) => ({
+  container: {
+    backgroundColor: COLORS.BRAND_WHITE,
+    paddingVertical: 10,
+    gap: 10,
+  },
+  contentContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
+    gap: 10,
+  },
+  headlineAndTimestampContainer: {
+    flexShrink: 1,
+    gap: 4,
+  },
+  icon: {
+    marginBottom: 4,
+    marginTop: storyCardOptions.enableSectionName ? FONT_SIZE.h4 * lineHeightMultiplier + 8 : 4,
+  },
+  sectionName: {
+    color: COLORS.BRAND_1,
+    fontSize: FONT_SIZE.h4,
+    lineHeight: FONT_SIZE.h4 * lineHeightMultiplier,
+  },
+  headline: {
+    fontFamily: FONT_FAMILY.primaryBold,
+    fontSize: FONT_SIZE.title,
+    lineHeight: FONT_SIZE.title * lineHeightMultiplier,
+    color: COLORS.BRAND_BLACK,
+    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',
+  },
+  liveBlogIcon: {
+    height: 15,
+    width: 15,
+    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,
+  },
+});

package/src/components/RadioButton/index.js

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

package/src/components/SecondaryStoryCard/SecondaryStoryCard.test.js

@@ -0,0 +1,51 @@
+import { cleanup, render, fireEvent } from '@testing-library/react-native';
+import React from 'react';
+import 'react-native';
+import { mockContext } from '../../utils';
+import { SecondaryStoryCard } from './index';
+import { data } from '../../constants/test-data/story.json';
+import { COMP_GENERAL_CONSTANTS } from '../../constants/component-constants/general-constants/constants';
+
+const storyData = data.story;
+const onPress = jest.fn();
+
+describe('Test Secondary Story Card :', () => {
+  afterEach(cleanup);
+  test('renders author name properly', () => {
+    const { getByTestId } = render(
+      mockContext(<SecondaryStoryCard story={storyData} />),
+    );
+    const element = getByTestId(COMP_GENERAL_CONSTANTS.secondaryStoryAuthor);
+    expect(element.props.children).toBe('By Raghavendra Vaidya | ');
+  });
+  test('renders story headline properly', () => {
+    const { getByTestId } = render(
+      mockContext(<SecondaryStoryCard story={storyData} />),
+    );
+    const element = getByTestId(COMP_GENERAL_CONSTANTS.secondaryStoryHeadline);
+    expect(element.props.children).toBe('Jack and jill');
+  });
+  test('renders story date properly', () => {
+    const { getByTestId } = render(
+      mockContext(<SecondaryStoryCard story={storyData} />),
+    );
+    const element = getByTestId(
+      COMP_GENERAL_CONSTANTS.secondaryStoryPubishedAt,
+    );
+    expect(element.props.children).toBe('1 Feb, 2021');
+  });
+  test('OnPress handler called properly', () => {
+    const { getByTestId } = render(
+      mockContext(
+        <SecondaryStoryCard
+          story={storyData}
+          onPress={onPress}
+          collectionTestID="secondaryStoryCardView"
+        />,
+      ),
+    );
+    const element = getByTestId(COMP_GENERAL_CONSTANTS.secondaryStoryCard);
+    fireEvent(element, 'press');
+    expect(onPress).toHaveBeenCalled();
+  });
+});