@quintype/native-components 2.20.0-fix-rtl-issues.1 → 2.20.0

package/src/components/PrimaryStoryCard/index.js

@@ -2,20 +2,21 @@ import { throttle } from 'lodash';
 import get from 'lodash/get';
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
-import {
-  StyleSheet, TouchableOpacity, View,
-} from 'react-native';
-
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import Icon from 'react-native-vector-icons/FontAwesome';
 import {
   AppTheme,
   getImageMetadata,
   getImageSlug,
-  getTimeInFormat,
+  getTimeForStoryCards,
 } from '../../utils';
 import { getStoryHeadline } from '../../utils/story';
 import { ResponsiveImage, Text } from '../index';
 import { storyStyles } from './styles';
-import { COMP_GENERAL_CONSTANTS } from '../../constants/component-constants/general-constants/constants';
+import {
+  COMP_GENERAL_CONSTANTS,
+  COMP_CONTENT_CONSTANTS,
+} from '../../constants/component-constants';
 
 export const PrimaryStoryCard = (props) => {
   const { story = {} } = props;
@@ -23,7 +24,13 @@ export const PrimaryStoryCard = (props) => {
 
   const translate = get(theme, ['translate'], (word) => word);
 
-  const { COLORS, FONT_SIZE, locale } = theme || {};
+  const {
+    COLORS,
+    FONT_SIZE,
+    locale,
+    reverseTimeAdverbPosition,
+    enableReadTimeOnStoryCards,
+  } = theme || {};
 
   const DATE_FORMAT = 'd MMM, yyyy';
 
@@ -43,10 +50,39 @@ export const PrimaryStoryCard = (props) => {
 
   const name = get(story.authors, [0, 'name']);
   const authorName = name ? `${translate('By')} ${name} | ` : '';
-  const readTime = story['read-time'] ? `${story['read-time']} ${translate('min read')}` : '';
+  const readTime = enableReadTimeOnStoryCards && story['read-time']
+    ? `${story['read-time']} ${translate('min read')}`
+    : '';
 
   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}
@@ -61,29 +97,29 @@ export const PrimaryStoryCard = (props) => {
         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.authorBlockContainer}>
-        <Text
-          style={autorStyle}
-          testID={COMP_GENERAL_CONSTANTS.primaryStoryAuthor}
-        >
-          {authorName}
-        </Text>
-        <Text
-          style={autorStyle}
-          testID={COMP_GENERAL_CONSTANTS.primaryStoryPubishedAt}
-        >
-          {getTimeInFormat(story['published-at'], DATE_FORMAT, locale)}
-        </Text>
-      </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}

package/src/components/PrimaryStoryCard/styles.js

@@ -3,15 +3,11 @@ export const storyStyles = (COLORS = {}, FONT_SIZE = {}, DARK_MODE = {}) => ({
     backgroundColor: COLORS.BRAND_WHITE,
     marginTop: 12,
   },
-  authorBlockContainer: {
-    alignItems: 'center',
-    flexDirection: 'row',
-    paddingVertical: 8,
-  },
   autorText: {
     color: COLORS?.BRAND_6,
     fontSize: FONT_SIZE.h5,
     lineHeight: FONT_SIZE.h5 * 1.3,
+    paddingVertical: 8,
   },
   divider: {
     backgroundColor: COLORS.BRAND_6,
@@ -39,4 +35,32 @@ export const storyStyles = (COLORS = {}, FONT_SIZE = {}, DARK_MODE = {}) => ({
     color: COLORS.BRAND_BLACK,
     fontSize: FONT_SIZE.h5,
   },
+  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,
+  },
 });

package/src/components/PrimaryStoryCardNew/index.js

@@ -1,9 +1,8 @@
-import { throttle } from 'lodash';
+import { get, throttle } from 'lodash';
 import PropTypes from 'prop-types';
 import React, { useContext, memo } from 'react';
-import {
-  StyleSheet, TouchableOpacity, View,
-} from 'react-native';
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import Icon from 'react-native-vector-icons/FontAwesome';
 import {
   AppTheme,
   getImageMetadata,
@@ -13,13 +12,26 @@ import {
 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';
 
 const PrimaryStoryCardNewBase = (props) => {
   const { story = {} } = props;
   const { theme } = useContext(AppTheme);
-  const { COLORS, FONT_SIZE, locale } = theme || {};
+  const {
+    COLORS,
+    FONT_SIZE,
+    locale,
+    DARK_MODE,
+    reverseTimeAdverbPosition,
+    enableReadTimeOnStoryCards,
+  } = theme || {};
+
+  const translate = get(theme, ['translate'], (word) => word);
 
-  const styles = storyStyles(COLORS, FONT_SIZE);
+  const styles = storyStyles(COLORS, FONT_SIZE, DARK_MODE);
   const containerStyle = StyleSheet.flatten([
     styles.container,
     { paddingHorizontal: props.horizontalPadding },
@@ -34,13 +46,42 @@ const PrimaryStoryCardNewBase = (props) => {
   ]);
 
   const DATE_FORMAT = 'd MMM, yyyy';
-  const readTime = story['read-time'] ? `${story['read-time']} min read` : '';
+  const readTime = enableReadTimeOnStoryCards && story['read-time']
+    ? `${story['read-time']} ${translate('min read')} · `
+    : '';
 
   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="primaryStoryCardView"
+      testID={COMP_GENERAL_CONSTANTS.primaryStoryCard}
       onPress={throttledOnpress}
       activeOpacity={0.8}
       style={containerStyle}
@@ -50,7 +91,9 @@ const PrimaryStoryCardNewBase = (props) => {
         slug={getImageSlug(story)}
         cdn={props.cdn}
         imageWidth={props.imageWidth}
-      />
+      >
+        <View style={styles.storyTypeContainer}>{showStoryType()}</View>
+      </ResponsiveImage>
       <View style={styles.contentContainer}>
         <View style={styles.headlineAndTimestampContainer}>
           <Text
@@ -58,18 +101,24 @@ const PrimaryStoryCardNewBase = (props) => {
             numberOfLines={3}
             ellipsizeMode="tail"
             style={headlineStyle}
-            testID="primaryStoryCardHeadline"
+            testID={COMP_GENERAL_CONSTANTS.primaryStoryHeadline}
           >
             {getStoryHeadline(story)}
           </Text>
-          <View style={styles.timestampContainer}>
-            {readTime ? (
-              <Text style={timestampStyle}>{`${readTime} · `}</Text>
-            ) : null}
-            <Text style={timestampStyle} testID="primaryStoryCardDate">
-              {getTimeForStoryCards(story['published-at'], DATE_FORMAT, locale)}
-            </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>

package/src/components/PrimaryStoryCardNew/styles.js

@@ -12,16 +12,12 @@ export const storyStyles = (COLORS = {}, FONT_SIZE = {}) => ({
     flexShrink: 1,
     flex: 1,
   },
-  timestampContainer: {
-    alignItems: 'center',
-    flexDirection: 'row',
-    marginTop: 4,
-  },
   timestamp: {
     color: COLORS?.BRAND_BLACK,
     fontSize: FONT_SIZE.h5,
     lineHeight: FONT_SIZE.h5 * 1.2,
     opacity: 0.6,
+    marginTop: 4,
   },
   headline: {
     fontSize: FONT_SIZE.title,
@@ -33,4 +29,32 @@ export const storyStyles = (COLORS = {}, FONT_SIZE = {}) => ({
   icon: {
     marginLeft: 8,
   },
+  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,
+  },
 });

package/src/components/RadioButton/index.js

@@ -1,22 +1,37 @@
-import React, { useContext } from 'react';
+import React, { useContext } from "react";
 import {
-  StyleSheet, View, TouchableOpacity, ViewPropTypes,
-} from 'react-native';
-import PropTypes from 'prop-types';
-import { radioButtonStyles } from './styles';
-import { AppTheme } from '../../utils';
+  StyleSheet,
+  View,
+  TouchableOpacity,
+  ViewPropTypes,
+} from "react-native";
+import PropTypes from "prop-types";
+import { radioButtonStyles } from "./styles";
+import { AppTheme } from "../../utils";
+
+import { COMP_GENERAL_CONSTANTS } from "../../constants/component-constants";
 
 export const RadioButton = ({
-  onPress, isChecked, circleStyle, checkedCircleStyle,
+  onPress,
+  isChecked,
+  circleStyle,
+  checkedCircleStyle,
 }) => {
   const { theme } = useContext(AppTheme);
   const styles = radioButtonStyles(theme);
   const circleBorderStyle = StyleSheet.flatten([styles.circle, circleStyle]);
-  const checkedStyle = StyleSheet.flatten([styles.checkedCircle, checkedCircleStyle]);
+  const checkedStyle = StyleSheet.flatten([
+    styles.checkedCircle,
+    checkedCircleStyle,
+  ]);
 
   return (
     <View>
-      <TouchableOpacity style={circleBorderStyle} onPress={onPress}>
+      <TouchableOpacity
+        style={circleBorderStyle}
+        onPress={onPress}
+        testID={COMP_GENERAL_CONSTANTS.radioButtonTouch}
+      >
         {isChecked && <View style={checkedStyle} />}
       </TouchableOpacity>
     </View>

package/src/components/SecondaryStoryCard/index.js

@@ -10,22 +10,31 @@ import {
   TextStyle,
   TouchableOpacityProps,
 } from 'react-native';
+import Icon from 'react-native-vector-icons/FontAwesome';
 import {
   AppTheme,
   getImageMetadata,
   getImageSlug,
-  getTimeInFormat,
+  getTimeForStoryCards,
 } from '../../utils';
 import { getStoryHeadline } from '../../utils/story';
 import { ResponsiveImage, Text } from '../index';
 import { secStoryCardStyles } from './styles';
-import { COMP_GENERAL_CONSTANTS } from '../../constants/component-constants/general-constants/constants';
+import {
+  COMP_GENERAL_CONSTANTS,
+  COMP_CONTENT_CONSTANTS,
+} from '../../constants/component-constants';
 
 export const SecondaryStoryCard = (props) => {
   const { theme } = useContext(AppTheme);
   const translate = get(theme, ['translate'], (word) => word);
 
-  const { locale } = theme;
+  const {
+    locale,
+    COLORS,
+    reverseTimeAdverbPosition,
+    enableReadTimeOnStoryCards,
+  } = theme;
   const styles = secStoryCardStyles(theme);
   const { story = {} } = props;
 
@@ -44,15 +53,43 @@ export const SecondaryStoryCard = (props) => {
     props.dateTextStyle,
   ]);
   const iconStyles = StyleSheet.flatten([styles.iconStyles, props.iconStyle]);
-  const authorTextContainerStyle = StyleSheet.flatten([
-    styles.authorTextContainer,
-    props.authorTextContainer,
-  ]);
+
   const name = get(story.authors, [0, 'name']);
   const authorName = name ? `${translate('By')} ${name} | ` : '';
-  const readTime = story['read-time'] ? `${story['read-time']} ${translate('min read')}` : '';
+  const readTime = enableReadTimeOnStoryCards && story['read-time']
+    ? `${story['read-time']} ${translate('min read')}`
+    : '';
 
   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}
@@ -73,6 +110,7 @@ export const SecondaryStoryCard = (props) => {
             </View>
           )}
         </Text>
+        <View style={styles.storyTypeContainer}>{showStoryType()}</View>
       </ResponsiveImage>
       <View style={styles.headlineAndAuthorBlockContainer}>
         <Text
@@ -85,20 +123,20 @@ export const SecondaryStoryCard = (props) => {
           {getStoryHeadline(story)?.trim()}
         </Text>
         <View style={styles.authorAndIconContainer}>
-          <View style={authorTextContainerStyle}>
-            <Text
-              style={authorTextStyle}
-              testID={COMP_GENERAL_CONSTANTS.secondaryStoryAuthor}
-            >
-              {authorName}
-            </Text>
-            <Text
-              style={authorTextStyle}
-              testID={COMP_GENERAL_CONSTANTS.secondaryStoryPubishedAt}
-            >
-              {getTimeInFormat(story['published-at'], DATE_FORMAT, locale)}
-            </Text>
-          </View>
+          <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>
       </View>

package/src/components/SecondaryStoryCard/styles.js

@@ -22,10 +22,7 @@ export const secStoryCardStyles = ({ COLORS, FONT_SIZE, DARK_MODE }) => StyleShe
     lineHeight: FONT_SIZE.h6 * 1.3,
     opacity: 0.5,
     fontWeight: '500',
-  },
-  authorTextContainer: {
-    alignItems: 'center',
-    flexDirection: 'row',
+    paddingTop: 8,
   },
   headline: {
     color: COLORS.BRAND_BLACK,
@@ -51,4 +48,32 @@ export const secStoryCardStyles = ({ COLORS, FONT_SIZE, DARK_MODE }) => StyleShe
     color: COLORS.BRAND_BLACK,
     fontSize: FONT_SIZE.h5,
   },
+  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',
+  },
+  liveBlogIcon: {
+    height: 12,
+    width: 12,
+    borderRadius: 50,
+    backgroundColor: COLORS.BRAND_3,
+  },
 });