@quintype/native-components 2.20.0-fix-rtl-issues.1 → 2.20.1-temp-fast-image-constraint.1

package/src/components/PrimaryStoryCardNew/index.js

@@ -1,25 +1,27 @@
-import { throttle } from 'lodash';
-import PropTypes from 'prop-types';
-import React, { useContext, memo } from 'react';
-import {
-  StyleSheet, TouchableOpacity, View,
-} from 'react-native';
+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';
+} 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";
 
 const PrimaryStoryCardNewBase = (props) => {
   const { story = {} } = props;
   const { theme } = useContext(AppTheme);
-  const { COLORS, FONT_SIZE, locale } = theme || {};
+  const { COLORS, FONT_SIZE, locale, DARK_MODE } = 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 },
@@ -33,14 +35,43 @@ const PrimaryStoryCardNewBase = (props) => {
     props.timestampStyle,
   ]);
 
-  const DATE_FORMAT = 'd MMM, yyyy';
-  const readTime = story['read-time'] ? `${story['read-time']} min read` : '';
+  const DATE_FORMAT = "d MMM, yyyy";
+  const readTime = 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.BRAND_BLACK} />
+    </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 +81,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 +91,23 @@ 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}
+            // TODO: Add corrected testID here
+          >
+            {readTime +
+              getTimeForStoryCards(
+                story["published-at"],
+                DATE_FORMAT,
+                locale,
+                translate
+              )}
+          </Text>
         </View>
         <View style={styles.icon}>{props.iconComponent}</View>
       </View>
@@ -89,7 +127,7 @@ PrimaryStoryCardNewBase.propTypes = {
 };
 
 PrimaryStoryCardNewBase.defaultProps = {
-  cdn: '',
+  cdn: "",
   horizontalPadding: 12,
 };
 

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,11 +10,12 @@ 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';
@@ -25,7 +26,7 @@ export const SecondaryStoryCard = (props) => {
   const { theme } = useContext(AppTheme);
   const translate = get(theme, ['translate'], (word) => word);
 
-  const { locale } = theme;
+  const { locale, COLORS } = theme;
   const styles = secStoryCardStyles(theme);
   const { story = {} } = props;
 
@@ -53,6 +54,35 @@ export const SecondaryStoryCard = (props) => {
   const readTime = 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 +103,7 @@ export const SecondaryStoryCard = (props) => {
             </View>
           )}
         </Text>
+        <View style={styles.storyTypeContainer}>{showStoryType()}</View>
       </ResponsiveImage>
       <View style={styles.headlineAndAuthorBlockContainer}>
         <Text
@@ -85,20 +116,19 @@ 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}
+            // TODO: Add corrected testID here
+          >
+            {authorName +
+              getTimeForStoryCards(
+                story["published-at"],
+                DATE_FORMAT,
+                locale,
+                translate
+              )}
+          </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,
+  },
 });

package/src/components/SecondaryStoryCardNew/index.js

@@ -1,29 +1,34 @@
-import { throttle } from 'lodash';
-import PropTypes from 'prop-types';
-import React, { useContext, memo } from 'react';
+import { get, throttle } from "lodash";
+import PropTypes from "prop-types";
+import React, { useContext, memo } from "react";
 import {
+  I18nManager,
   StyleSheet,
   TouchableOpacity,
   View,
   TextStyle,
   TouchableOpacityProps,
-} from 'react-native';
+} 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';
+} 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";
 
 const SecondaryStoryCardNewBase = (props) => {
   const { story = {} } = props;
   const { theme } = useContext(AppTheme);
-  const { locale } = theme;
+  const { locale, DARK_MODE, COLORS } = theme;
 
-  const styles = storyStyles(theme);
+  const translate = get(theme, ["translate"], (word) => word);
+
+  const styles = storyStyles(theme, DARK_MODE);
   const containerStyle = StyleSheet.flatten([
     styles.container,
     { paddingHorizontal: props.horizontalPadding },
@@ -37,41 +42,79 @@ const SecondaryStoryCardNewBase = (props) => {
     props.timestampStyle,
   ]);
 
-  const DATE_FORMAT = 'd MMM, yyyy';
-  const readTime = story['read-time'] ? `${story['read-time']} min read` : '';
+  const DATE_FORMAT = "d MMM, yyyy";
+  const readTime = 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={props.collectionTestID}
+      testID={COMP_GENERAL_CONSTANTS.secondaryStoryCard}
       onPress={throttledOnpress}
       activeOpacity={0.8}
       style={containerStyle}
     >
       <ResponsiveImage
         metaData={getImageMetadata(story)}
-        slug={getImageSlug(story) || ''}
-        cdn={props.cdn || ''}
+        slug={getImageSlug(story) || ""}
+        cdn={props.cdn || ""}
         imageWidth={props.imageWidth}
-      />
+      >
+        <View style={styles.storyTypeContainer}>{showStoryType()}</View>
+      </ResponsiveImage>
       <View style={styles.headlineAndTimestampBlockContainer}>
         <Text
           primary
           numberOfLines={2}
           ellipsizeMode="tail"
           style={headlineStyle}
-          testID="secondaryStoryCardHeadline"
+          testID={COMP_GENERAL_CONSTANTS.secondaryStoryHeadline}
         >
           {getStoryHeadline(story)?.trim()}
         </Text>
-        <View style={styles.timestampContainer}>
-          {readTime ? (
-            <Text style={timestampStyle}>{`${readTime} · `}</Text>
-          ) : null}
-          <Text style={timestampStyle} testID="secondaryStoryCardDate">
-            {getTimeForStoryCards(story['published-at'], DATE_FORMAT, locale)}
-          </Text>
-        </View>
+        <Text
+          style={timestampStyle}
+          numberOfLines={2}
+          // TODO: Add corrected testID here
+        >
+          {readTime +
+            getTimeForStoryCards(
+              story["published-at"],
+              DATE_FORMAT,
+              locale,
+              translate
+            )}
+        </Text>
       </View>
       <View style={styles.icon}>{props.iconComponent}</View>
     </TouchableOpacity>
@@ -90,7 +133,7 @@ SecondaryStoryCardNewBase.propTypes = TouchableOpacityProps && {
 };
 
 SecondaryStoryCardNewBase.defaultProps = {
-  cdn: '',
+  cdn: "",
   horizontalPadding: 12,
 };
 

package/src/components/SecondaryStoryCardNew/styles.js

@@ -18,10 +18,6 @@ export const storyStyles = ({ COLORS, FONT_SIZE }) => StyleSheet.create({
     fontSize: FONT_SIZE.h5,
     lineHeight: FONT_SIZE.h5 * 1.2,
     opacity: 0.6,
-  },
-  timestampContainer: {
-    alignItems: 'center',
-    flexDirection: 'row',
     marginTop: 4,
   },
   headline: {
@@ -33,4 +29,32 @@ export const storyStyles = ({ COLORS, FONT_SIZE }) => StyleSheet.create({
   icon: {
     marginLeft: 8,
   },
+  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,
+  },
 });

package/src/components/ShareButton/index.js

@@ -1,27 +1,28 @@
-import React, { useContext, memo } from 'react';
-import { TouchableOpacity } from 'react-native';
-import PropTypes from 'prop-types';
-import Icon from 'react-native-vector-icons/Ionicons';
-import Share from 'react-native-share';
-import { AppTheme } from '../../utils';
-import { shareButtonStyles } from './styles';
-import { getStoryHeadline } from '../../utils/story';
+import React, { useContext, memo } from "react";
+import { TouchableOpacity } from "react-native";
+import PropTypes from "prop-types";
+import Icon from "react-native-vector-icons/Ionicons";
+import Share from "react-native-share";
+import { AppTheme } from "../../utils";
+import { shareButtonStyles } from "./styles";
+import { getStoryHeadline } from "../../utils/story";
+import { COMP_GENERAL_CONSTANTS } from "../../constants/component-constants";
 
 const ShareButtonBase = (props) => {
   const { theme } = useContext(AppTheme);
   const styles = shareButtonStyles(theme);
-  const { story, type = 'story', slug } = props;
+  const { story, type = "story", slug } = props;
 
   const getShareURL = () => {
     const { url } = story || {};
     switch (type) {
-      case 'story':
+      case "story":
         return url;
-      case 'card':
+      case "card":
         return `${url}${slug}`;
-      case 'image':
+      case "image":
         return `${url}${slug}`;
-      case 'attachment':
+      case "attachment":
         return slug;
       default:
         return url || slug;
@@ -43,7 +44,10 @@ const ShareButtonBase = (props) => {
   }
 
   return (
-    <TouchableOpacity onPress={share}>
+    <TouchableOpacity
+      onPress={share}
+      testID={COMP_GENERAL_CONSTANTS.shareButtonTouch}
+    >
       <Icon style={styles.iconStyle} name="share-social-outline" size={20} />
     </TouchableOpacity>
   );

package/src/components/StoryHeader/index.js

@@ -19,7 +19,7 @@ import { YouTubePlayer } from '../YouTubePlayer';
 import { storyHeaderStyles } from './styles';
 import { COMP_CONTENT_CONSTANTS } from '../../constants/component-constants/content-constants/constants';
 
-/* import {DailyMotionPlayer} from "../DailyMotionPlayer"; */
+import { DailyMotionPlayer } from '../DailyMotionPlayer';
 
 const DATE_FORMAT = 'd  MMMM yyyy h:mm a';
 
@@ -44,9 +44,9 @@ const getHeroComponent = (props) => {
     case STORY_TYPES.VIDEO_STORY: {
       if (!firstVideoElement) return null;
       switch (firstVideoElement.type) {
-        /* case "jsembed":{
-            return <DailyMotionPlayer element={firstVideoElement} />;
-          } */
+        case 'jsembed': {
+          return <DailyMotionPlayer element={firstVideoElement} />;
+        }
         case 'youtube-video': {
           return (
             <YouTubePlayer
@@ -91,7 +91,7 @@ export const StoryHeader = (props) => {
           }}
         />
         <HTML
-          html={imgAttribution}
+          html={attri}
           textSelectable={CAN_COPY_TEXT}
           key={Math.random()}
           baseFontStyle={styles.attributionStyle}

package/src/components/StoryHeader/styles.js

@@ -37,7 +37,7 @@ export const storyHeaderStyles = (COLORS) => StyleSheet.create({
   },
   captionContainerStyle: {
     paddingHorizontal: 5,
-    flexDirection: 'row',
+    flexDirection: 'column',
     flexWrap: 'wrap',
     marginTop: 10,
   },

package/src/components/StoryImage/index.js

@@ -28,7 +28,7 @@ export const StoryImage = ({
     if (!card['image-attribution']) return null;
     return (
       <Text style={styles.attributionText}>
-        {` | ${card['image-attribution']}`}
+        {` | ${stripHTML(card['image-attribution'])}`}
       </Text>
     );
   };