@quintype/native-components 2.20.32-beta.1 → 2.20.32-beta.2

package/src/components/SecondaryStoryCard/index.js

@@ -1,9 +1,7 @@
-import { throttle } from 'lodash';
-import get from 'lodash/get';
+import { get, isNull, throttle } from 'lodash';
 import PropTypes from 'prop-types';
-import React, { useContext } from 'react';
+import React, { useContext, memo, useState, useEffect } from 'react';
 import {
-  Image,
   StyleSheet,
   TouchableOpacity,
   View,
@@ -19,28 +17,29 @@ import {
 } from '../../utils';
 import { getStoryHeadline } from '../../utils/story';
 import { ResponsiveImage, Text } from '../index';
-import { secStoryCardStyles } from './styles';
+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 SecondaryStoryCardNewBase = (props) => {
+  const { story = {} } = props;
   const { theme } = useContext(AppTheme);
-  const translate = get(theme, ['translate'], (word) => word);
-
   const {
     locale,
+    DARK_MODE,
     COLORS,
     reverseTimeAdverbPosition,
     enableReadTimeOnStoryCards,
     DATE_TIME_FORMAT,
+    premiumIcon,
+    FONT_SIZE
   } = theme;
-  const styles = secStoryCardStyles(theme);
-  const { story = {} } = props;
-
-  const DATE_FORMAT = DATE_TIME_FORMAT.dateFormat;
 
+  const translate = get(theme, ['translate'], (word) => word);
+  const styles = storyStyles(theme, DARK_MODE);
   const containerStyle = StyleSheet.flatten([
     styles.container,
     { paddingHorizontal: props.horizontalPadding },
@@ -49,17 +48,16 @@ export const SecondaryStoryCard = (props) => {
     styles.headline,
     props.headlineStyle,
   ]);
-  const authorTextStyle = StyleSheet.flatten([
-    styles.authorText,
-    props.dateTextStyle,
+  const timestampStyle = StyleSheet.flatten([
+    styles.timestamp,
+    props.timestampStyle,
   ]);
-  const iconStyles = StyleSheet.flatten([styles.iconStyles, props.iconStyle]);
 
-  const name = get(story.authors, [0, 'name']);
-  const authorName = name ? `${translate('By')} ${name} | ` : '';
+  const DATE_FORMAT = DATE_TIME_FORMAT.dateFormat;
   const readTime = enableReadTimeOnStoryCards && story['read-time']
-    ? `${story['read-time']} ${translate('min read')}`
+    ? `${story['read-time']} ${translate('min read')} · `
     : '';
+  const isPremiumStory = story['access'] === 'subscription';
 
   const throttledOnpress = throttle(props.onPress, 1000);
 
@@ -104,59 +102,56 @@ export const SecondaryStoryCard = (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.headlineAndAuthorBlockContainer}>
+      <View style={styles.headlineAndTimestampBlockContainer}>
+        <View style={{display:'flex', flexDirection:'row'}}>
         <Text
           primary
-          numberOfLines={3}
+          numberOfLines={2}
           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 style={styles.authorAndIconContainer}>
-          <Text
-            style={authorTextStyle}
-            numberOfLines={2}
-            testID={COMP_CONTENT_CONSTANTS.authorName}
-          >
-            {authorName
-              + getTimeForStoryCards(
-                story['published-at'],
-                DATE_FORMAT,
-                locale,
-                translate,
-                reverseTimeAdverbPosition,
-              )}
-          </Text>
-          <View style={iconStyles}>{props.iconComponent}</View>
         </View>
+        <Text
+          style={timestampStyle}
+          numberOfLines={2}
+          // TODO: Add corrected testID here
+          testID={COMP_CONTENT_CONSTANTS.publishedDate}
+        >
+          {readTime
+            + getTimeForStoryCards(
+              story['published-at'],
+              DATE_FORMAT,
+              locale,
+              translate,
+              reverseTimeAdverbPosition,
+            )}
+        </Text>
       </View>
+      <View style={styles.icon}>{props.iconComponent}</View>
     </TouchableOpacity>
   );
 };
 
-SecondaryStoryCard.propTypes = TouchableOpacityProps && {
+SecondaryStoryCardNewBase.propTypes = TouchableOpacityProps && {
   cdn: PropTypes.string.isRequired,
-  imageStyle: Image.style,
   imageWidth: PropTypes.number,
   headlineStyle: TextStyle,
-  dateTextStyle: TextStyle,
+  timestampStyle: TextStyle,
   story: PropTypes.any.isRequired,
   iconComponent: PropTypes.element,
   horizontalPadding: PropTypes.number,
 };
 
-SecondaryStoryCard.defaultProps = {
+SecondaryStoryCardNewBase.defaultProps = {
   cdn: '',
   horizontalPadding: 12,
 };
+
+export const SecondaryStoryCard = memo(SecondaryStoryCardNewBase);

package/src/components/SecondaryStoryCard/styles.js

@@ -1,52 +1,33 @@
 import { StyleSheet } from 'react-native';
 
-export const secStoryCardStyles = ({ COLORS, FONT_SIZE, DARK_MODE }) => StyleSheet.create({
+export const storyStyles = ({ COLORS, FONT_SIZE }) => StyleSheet.create({
   container: {
     flexDirection: 'row',
     backgroundColor: COLORS.BRAND_WHITE,
-    paddingVertical: 15,
+    padding: 8,
+    alignItems: 'center',
   },
-  headlineAndAuthorBlockContainer: {
+  headlineAndTimestampBlockContainer: {
     flexShrink: 1,
     flex: 1,
     justifyContent: 'space-between',
-    paddingHorizontal: 10,
-  },
-  authorAndIconContainer: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
+    paddingLeft: 12,
   },
-  authorText: {
+  timestamp: {
     color: COLORS.BRAND_BLACK,
-    fontSize: FONT_SIZE.h6,
-    lineHeight: FONT_SIZE.h6 * 1.3,
-    opacity: 0.5,
-    fontWeight: '500',
-    paddingTop: 8,
+    fontSize: FONT_SIZE.h5,
+    lineHeight: FONT_SIZE.h5 * 1.5,
+    opacity: 0.6,
+    marginTop: 4,
   },
   headline: {
     color: COLORS.BRAND_BLACK,
-    opacity: 0.9,
     flexWrap: 'wrap',
     fontSize: FONT_SIZE.h3,
-    lineHeight: FONT_SIZE.h3 * 1.5,
-  },
-  iconStyles: {
-    justifyContent: 'flex-end',
+    lineHeight: FONT_SIZE.h3 * 1.6,
   },
-  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,
+  icon: {
+    marginLeft: 8,
   },
   storyTypeContainer: {
     position: 'absolute',
@@ -76,4 +57,8 @@ export const secStoryCardStyles = ({ COLORS, FONT_SIZE, DARK_MODE }) => StyleShe
     borderRadius: 50,
     backgroundColor: COLORS.BRAND_3,
   },
+  premiumIcon: {
+    marginTop: FONT_SIZE.h3 * 0.45,
+    marginRight: 3,
+  },
 });

package/src/components/Story/index.js

@@ -6,7 +6,6 @@ import { Text } from '../index';
 import { StoryHeader } from '../StoryHeader';
 import { StoryContent } from '../StoryContent';
 import { TagsRow } from '../TagsRow/TagsRow';
-import { FBCommentsRow } from '../FBCommentsRow';
 import { STORY_TYPES } from '../../utils/story-types';
 import { getTimeInFormat, AppTheme } from '../../utils';
 import { ShareIcon } from '../../Icons/ShareIcon';
@@ -134,13 +133,11 @@ export const Story = ({
   onAuthorPress,
   onTagsPress,
   onSectionPress,
-  onFbCommentPress,
   screenList,
   navigation,
   share,
   accessComponent,
   checkStoryAccess,
-  enableFbComments,
   storyHasAccess = 'loading',
   currentLayout,
   getAd,
@@ -166,20 +163,6 @@ export const Story = ({
     : 'hh:mm, d MMM yyyy';
   const storyType = story['story-template'];
 
-  const shouldShowComments = () => {
-    if (!enableFbComments) return null;
-    if (
-      isStoryFree(story) === 0
-      || (storyHasAccess !== 'loading' && storyHasAccess === 'granted')
-    ) {
-      return (
-        <View>
-          <FBCommentsRow onPress={onFbCommentPress} />
-        </View>
-      );
-    }
-    return null;
-  };
 
   useEffect(() => {
     checkStoryAccess(story);
@@ -221,8 +204,6 @@ export const Story = ({
 
       {accessComponent(story, storyHasAccess)}
 
-      {shouldShowComments()}
-
       <View>
         <TagsRow tags={story.tags} onPress={onTagsPress} />
       </View>
@@ -245,7 +226,6 @@ Story.propTypes = {
   onFbCommentPress: PropTypes.func,
   screenList: PropTypes.any,
   accessComponent: PropTypes.any,
-  enableFbComments: PropTypes.bool,
   currentLayout: PropTypes.any,
   navigation: PropTypes.any,
 };

package/src/components/StoryHeader/index.js

@@ -18,7 +18,6 @@ import { storyHeaderStyles } from './styles';
 import { COMP_CONTENT_CONSTANTS } from '../../constants/component-constants/content-constants/constants';
 
 import { DailyMotionPlayer } from '../DailyMotionPlayer';
-import { RatingLayout } from '../Rating';
 const getHeroImage = (cdn, story) => {
   const imageSlug = story['hero-image-s3-key'];
   if (!imageSlug) return null;
@@ -74,8 +73,7 @@ export const StoryHeader = (props) => {
   const caption = story['hero-image-caption'];
   const attribution = story['hero-image-attribution'];
   const isPremiumStory = story['access'] === 'subscription';
-  const reviewTitle = story['metadata'] && story['metadata']['review-title'];
-  const reviewData = story['metadata'] && story['metadata']['review-rating'];
+
 
   const showAttribution = () => {
     if (!caption && !attribution) {
@@ -130,7 +128,6 @@ export const StoryHeader = (props) => {
         cdn={props.cdn}
         readtime={story['read-time']}
       />
-      {reviewTitle && <RatingLayout reviewTitle={reviewTitle} ratingValue={reviewData?.value} ratingLabel={reviewData?.label}/>}
     </View>
   );
 };

package/src/components/YouTubePlayer/index.js

@@ -66,8 +66,6 @@ const webviewStyles = (windowWidth) => {
   return {
     webViewContainer: {
       height: (windowWidth * 9) / 16,
-      opacity: 0.99,
-      overflow: 'hidden'
     },
     container: {
       flex: 1,

package/src/components/index.js

@@ -3,21 +3,16 @@ export { AuthorRow } from './AuthorRow';
 export { BackNavigator } from './BackNavigator';
 export { Button } from './Button';
 export { CollectionCard } from './CollectionCard';
-export { CollectionCardNew } from './CollectionCardNew';
 export { CollectionTitle } from './CollectionTitle';
-export { CollectionTitleNew } from './CollectionTitleNew';
 export { CustomLoader } from './CustomLoader';
-export { FBCommentsRow } from './FBCommentsRow';
 export { Header } from './Header';
 export { JSEmbedElement } from './JSEmbedElement';
 export { PDFReader } from './PDFReader';
 export { PrimaryStoryCard } from './PrimaryStoryCard';
-export { PrimaryStoryCardNew } from './PrimaryStoryCardNew';
 export { RadioButton } from './RadioButton';
 export { ResponsiveImage } from './ResponsiveImage';
 export { Search } from './Search';
 export { SecondaryStoryCard } from './SecondaryStoryCard';
-export { SecondaryStoryCardNew } from './SecondaryStoryCardNew';
 export { ShareButton } from './ShareButton';
 export { Story } from './Story';
 export { StoryContent } from './StoryContent';

package/src/components/CollectionCardNew/index.js

@@ -1,84 +0,0 @@
-import get from 'lodash/get';
-import isEmpty from 'lodash/isEmpty';
-import PropTypes from 'prop-types';
-import React, { memo } from 'react';
-import { getScreenPercentageWidth } from '../../utils/index';
-import {
-  CollectionTitleNew,
-  PrimaryStoryCardNew,
-  SecondaryStoryCardNew,
-  ShareButton,
-} from '../index';
-
-const CollectionCardNewBase = ({
-  cdn,
-  collectionName,
-  stories,
-  onCollectionPress,
-  onStoryPress,
-  collectionTestID,
-  offset,
-  horizontalPadding,
-  initialOffset, /* Number of items to load on first load */
-  hideCollectionTitle,
-}) => {
-  const sliceLimit = offset || initialOffset || 5;
-  const primaryStory = !isEmpty(stories) && get(stories, [0, 'story'], stories[0]);
-
-  return (
-    <>
-      {!hideCollectionTitle && (
-      <CollectionTitleNew
-        title={collectionName}
-        onPress={onCollectionPress}
-        horizontalPadding={horizontalPadding}
-      />
-      )}
-      <PrimaryStoryCardNew
-        collectionTestID={collectionTestID}
-        onPress={() => {
-          !isEmpty(stories) && onStoryPress(primaryStory);
-        }}
-        cdn={cdn}
-        story={!isEmpty(stories) ? primaryStory : {}}
-        iconComponent={<ShareButton story={primaryStory} />}
-        imageWidth={getScreenPercentageWidth(100) - 2 * horizontalPadding}
-        horizontalPadding={horizontalPadding}
-      />
-      {stories.slice(1, sliceLimit).map((currentStory) => {
-        const secondaryStory = get(currentStory, ['story'], currentStory);
-        return (
-          <SecondaryStoryCardNew
-            collectionTestID={collectionTestID}
-            onPress={() => onStoryPress(secondaryStory)}
-            key={secondaryStory?.id}
-            cdn={cdn}
-            story={secondaryStory}
-            iconComponent={<ShareButton story={secondaryStory} />}
-            imageWidth={getScreenPercentageWidth(25)}
-            horizontalPadding={horizontalPadding}
-          />
-        );
-      })}
-    </>
-  );
-};
-
-CollectionCardNewBase.propTypes = {
-  offset: PropTypes.number,
-  initialOffset: PropTypes.number,
-  cdn: PropTypes.string.isRequired,
-  collectionName: PropTypes.string,
-  stories: PropTypes.array.isRequired,
-  onCollectionPress: PropTypes.func,
-  onStoryPress: PropTypes.func,
-  collectionTestID: PropTypes.string,
-  horizontalPadding: PropTypes.number,
-  hideCollectionTitle: PropTypes.bool,
-};
-
-CollectionCardNewBase.defaultProps = {
-  horizontalPadding: 12,
-};
-
-export const CollectionCardNew = memo(CollectionCardNewBase);

package/src/components/CollectionTitleNew/index.js

@@ -1,44 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { useContext, memo } from 'react';
-import {
-  TextStyle,
-  TouchableOpacity,
-  TouchableOpacityProps,
-  StyleSheet,
-} from 'react-native';
-import { Text } from '../index';
-import { collectionTitleStyles } from './styles';
-import { AppTheme } from '../../utils';
-
-const CollectionTitleNewBase = (props) => {
-  const { theme } = useContext(AppTheme);
-  const styles = collectionTitleStyles(theme);
-  const containerStyle = StyleSheet.flatten([
-    styles.container,
-    { paddingHorizontal: props.horizontalPadding },
-  ]);
-  const titleStyle = StyleSheet.flatten([styles.title, props.titleStyle]);
-
-  if (!props.title) {
-    return null;
-  }
-
-  return (
-    <TouchableOpacity style={containerStyle} onPress={props.onPress}>
-      <Text style={titleStyle}>{props.title}</Text>
-    </TouchableOpacity>
-  );
-};
-
-CollectionTitleNewBase.propTypes = TouchableOpacityProps
-  && {
-    title: PropTypes.string,
-    titleStyle: TextStyle,
-    horizontalPadding: PropTypes.number,
-  };
-
-CollectionTitleNewBase.defaultProps = {
-  horizontalPadding: 12,
-};
-
-export const CollectionTitleNew = memo(CollectionTitleNewBase);

package/src/components/CollectionTitleNew/styles.js

@@ -1,19 +0,0 @@
-import { StyleSheet } from 'react-native';
-
-export const collectionTitleStyles = (appThemeContext) => {
-  const { COLORS, FONT_SIZE } = appThemeContext;
-
-  return StyleSheet.create({
-    container: {
-      justifyContent: 'center',
-      backgroundColor: COLORS.BRAND_WHITE,
-      paddingHorizontal: 12,
-      paddingVertical: 8,
-      marginTop: 8,
-    },
-    title: {
-      fontSize: FONT_SIZE.h3,
-      color: COLORS.BRAND_5,
-    },
-  });
-};

package/src/components/PrimaryStoryCardNew/index.js

@@ -1,155 +0,0 @@
-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,
-  getTimeForStoryCards,
-} from '../../utils';
-import { getStoryHeadline } from '../../utils/story';
-import { ResponsiveImage, Text } 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,
-    locale,
-    DARK_MODE,
-    reverseTimeAdverbPosition,
-    enableReadTimeOnStoryCards,
-    DATE_TIME_FORMAT,
-    premiumIcon
-  } = theme || {};
-
-  const translate = get(theme, ['translate'], (word) => word);
-
-  const styles = storyStyles(COLORS, FONT_SIZE, DARK_MODE);
-  const containerStyle = StyleSheet.flatten([
-    styles.container,
-    { paddingHorizontal: props.horizontalPadding },
-  ]);
-  const headlineStyle = StyleSheet.flatten([
-    styles.headline,
-    props.headlineStyle,
-  ]);
-  const timestampStyle = StyleSheet.flatten([
-    styles.timestamp,
-    props.timestampStyle,
-  ]);
-
-  const DATE_FORMAT = DATE_TIME_FORMAT.dateFormat;
-  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={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}>
-        <View style={{display:'flex', flexDirection:'row'}}>
-
-
-          <Text
-            primary
-            numberOfLines={3}
-            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>
-          <Text
-            style={timestampStyle}
-            numberOfLines={2}
-            testID={COMP_CONTENT_CONSTANTS.publishedDate}
-          >
-            {readTime
-              + getTimeForStoryCards(
-                story['published-at'],
-                DATE_FORMAT,
-                locale,
-                translate,
-                reverseTimeAdverbPosition,
-              )}
-          </Text>
-        </View>
-        <View style={styles.icon}>{props.iconComponent}</View>
-      </View>
-    </TouchableOpacity>
-  );
-};
-
-PrimaryStoryCardNewBase.propTypes = {
-  cdn: PropTypes.string,
-  imageWidth: PropTypes.number,
-  headlineStyle: PropTypes.func,
-  timestampStyle: 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);