@quintype/native-components 2.22.6 → 2.28.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quintype/native-components",
-  "version": "2.22.6",
+  "version": "2.28.0",
   "description": "",
   "main": "src/index.js",
   "scripts": {

package/src/components/PrimaryStoryCardNew/index.js

@@ -2,14 +2,13 @@ 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 { ResponsiveImage, Text, StoryCardDetailsRow, StoryTemplateIcon } from '../index';
 import { storyStyles } from './styles';
 import {
   COMP_GENERAL_CONSTANTS,
@@ -23,9 +22,7 @@ const PrimaryStoryCardNewBase = (props) => {
   const {
     COLORS,
     FONT_SIZE,
-    FONT_FAMILY,
     premiumIcon,
-    lineHeightMultiplier,
     storyCardOptions = {},
   } = theme || {};
 
@@ -43,33 +40,6 @@ const PrimaryStoryCardNewBase = (props) => {
 
   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
@@ -84,7 +54,9 @@ const PrimaryStoryCardNewBase = (props) => {
         cdn={props.cdn}
         imageWidth={props.imageWidth}
       >
-        <View style={styles.storyTypeContainer}>{showStoryType()}</View>
+        <View style={styles.storyTypeContainer}>
+          <StoryTemplateIcon storyTemplate={story['story-template']} cardType="primary" theme={theme} />
+        </View>
       </ResponsiveImage>
       <View style={styles.contentContainer}>
         <View style={styles.headlineAndTimestampContainer}>

package/src/components/PrimaryStoryCardNew/styles.js

@@ -35,29 +35,6 @@ export const storyStyles = ({COLORS, FONT_SIZE, FONT_FAMILY, lineHeightMultiplie
     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,

package/src/components/Search/styles.js

@@ -23,7 +23,8 @@ export const searchStyles = (appThemeContext) => {
       flex: 1,
       justifyContent: 'center',
       margin: 12,
-      padding: 12,
+      padding: 5,
+      paddingHorizontal:12
     },
   });
 };

package/src/components/SecondaryStoryCardNew/index.js

@@ -1,4 +1,4 @@
-import { get, isNull, throttle } from 'lodash';
+import { get, throttle } from 'lodash';
 import PropTypes from 'prop-types';
 import React, { useContext, memo } from 'react';
 import {
@@ -8,14 +8,13 @@ import {
   TextStyle,
   TouchableOpacityProps,
 } 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 { ResponsiveImage, Text, StoryCardDetailsRow, StoryTemplateIcon } from '../index';
 import { storyStyles } from './styles';
 import {
   COMP_GENERAL_CONSTANTS,
@@ -47,78 +46,52 @@ const SecondaryStoryCardNewBase = (props) => {
 
   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}
-    >
-      <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}
+      <TouchableOpacity
+        testID={COMP_GENERAL_CONSTANTS.secondaryStoryCard}
+        onPress={throttledOnpress}
+        activeOpacity={0.8}
+        style={containerStyle}
       >
-        <View style={styles.storyTypeContainer}>{showStoryType()}</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 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}
+          >
+            <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>
-        <StoryCardDetailsRow
-            authorName={get(story.authors, [0, 'name'])}
-            publishedAt={story["published-at"]}
-            readTime={story['read-time']}
-          />
-      </View>
-      </View>
-      <View style={styles.icon}>{props.iconComponent}</View>
-    </TouchableOpacity>
-    <View style={[styles.separatorLine, { marginHorizontal: props.horizontalPadding }]}/>
+        <View style={styles.icon}>{props.iconComponent}</View>
+      </TouchableOpacity>
+      <View style={[styles.separatorLine, { marginHorizontal: props.horizontalPadding }]} />
     </>
   );
 };

package/src/components/SecondaryStoryCardNew/styles.js

@@ -44,32 +44,9 @@ export const storyStyles = ({ COLORS, FONT_SIZE, FONT_FAMILY, lineHeightMultipli
   },
   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,
-  },
   premiumIcon: {
     marginTop: FONT_SIZE.h3 * 0.45,
     marginRight: 3,

package/src/components/StoryTemplateIcon/index.js

@@ -0,0 +1,58 @@
+import React from "react";
+import { View } from "react-native";
+import FAIcon from "react-native-vector-icons/FontAwesome";
+import MaterialIcon from "react-native-vector-icons/MaterialIcons";
+import { Text } from "../index";
+import { storyTemplateIconStyles } from "./styles";
+
+export const StoryTemplateIcon = ({
+  storyTemplate,
+  cardType = "secondary",
+  theme,
+}) => {
+  const { COLORS, FONT_SIZE } = theme;
+
+  const styles = storyTemplateIconStyles(COLORS, FONT_SIZE, cardType);
+
+  const iconSize = () => {
+    switch (cardType) {
+      case "primary":
+        return 20;
+      case "secondary":
+      default:
+        return 14;
+    }
+  };
+
+  const showIcon = (name, iconFamily = "FontAwesome") => (
+    <View style={styles.storyType}>
+      {iconFamily === "MaterialIcons" ? (
+        <MaterialIcon name={name} size={iconSize()} color={COLORS.MONO7} />
+      ) : (
+        <FAIcon name={name} size={iconSize()} color={COLORS.MONO7} />
+      )}
+    </View>
+  );
+
+  const showLiveBlogIcon = () => (
+    <View style={styles.storyType}>
+      <View style={styles.liveBlogIcon} />
+      <Text style={styles.liveBlogText}>LIVE</Text>
+    </View>
+  );
+
+  switch (storyTemplate) {
+    case "text":
+      return null;
+    case "photo":
+      return showIcon("photo");
+    case "video":
+      return showIcon("play");
+    case "live-blog":
+      return showLiveBlogIcon();
+    case "visual-story":
+      return showIcon("web-stories", "MaterialIcons");
+    default:
+      return null;
+  }
+};

package/src/components/StoryTemplateIcon/styles.js

@@ -0,0 +1,23 @@
+import { StyleSheet } from 'react-native';
+
+export const storyTemplateIconStyles = (COLORS, FONT_SIZE, cardType) => StyleSheet.create({
+  storyType: {
+    backgroundColor: COLORS.MONO1,
+    padding: cardType === "primary" ? 8 : 4,
+    justifyContent: 'space-between',
+    alignItems: 'space-between',
+    flexDirection: 'row',
+  },
+  liveBlogText: {
+    color: COLORS.MONO7,
+    fontSize: FONT_SIZE.h5,
+    marginLeft: cardType === "primary" ? 8 : 4,
+    fontWeight: 'bold',
+  },
+  liveBlogIcon: {
+    height: 12,
+    width: 12,
+    borderRadius: 50,
+    backgroundColor: COLORS.BRAND_3,
+  },
+});

package/src/components/index.js

@@ -44,6 +44,7 @@ export { IconText } from './IconText';
 export { CustomSwitch } from './CustomSwitch';
 export { RelatedStoriesCard } from './RelatedStoriesCard';
 export { References } from './References';
+export { StoryTemplateIcon } from './StoryTemplateIcon'
 export { StoryCardDetailsRow } from './StoryCardDetailsRow';
 export { TextA } from './TextA'
 export { TextQ } from './TextQ'

package/src/utils/story-types.js

@@ -1,4 +1,5 @@
 export const STORY_TYPES = {
   LIVE_BLOG: 'live-blog',
   VIDEO_STORY: 'video',
+  VISUAL_STORY: 'visual-story',
 };