@quintype/native-components 2.22.7 → 2.28.1

package/src/components/SecondaryStoryCardNew/index.js

@@ -1,140 +0,0 @@
-import { get, isNull, throttle } from 'lodash';
-import PropTypes from 'prop-types';
-import React, { useContext, memo } from 'react';
-import {
-  StyleSheet,
-  TouchableOpacity,
-  View,
-  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 { storyStyles } from './styles';
-import {
-  COMP_GENERAL_CONSTANTS,
-  COMP_CONTENT_CONSTANTS,
-} from '../../constants/component-constants';
-import PremiumIcons from '../../Icons/PremiumIcons/index';
-
-const SecondaryStoryCardNewBase = (props) => {
-  const { story = {} } = props;
-  const { theme } = useContext(AppTheme);
-  const {
-    COLORS,
-    premiumIcon,
-    FONT_SIZE,
-    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={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}
-      >
-        <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>
-        <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 }]}/>
-    </>
-  );
-};
-
-SecondaryStoryCardNewBase.propTypes = TouchableOpacityProps && {
-  cdn: PropTypes.string.isRequired,
-  imageWidth: PropTypes.number,
-  headlineStyle: TextStyle,
-  story: PropTypes.any.isRequired,
-  iconComponent: PropTypes.element,
-  horizontalPadding: PropTypes.number,
-};
-
-SecondaryStoryCardNewBase.defaultProps = {
-  cdn: '',
-  horizontalPadding: 12,
-};
-
-export const SecondaryStoryCardNew = memo(SecondaryStoryCardNewBase);

package/src/components/SecondaryStoryCardNew/styles.js

@@ -1,82 +0,0 @@
-import { StyleSheet } from 'react-native';
-
-export const storyStyles = ({ COLORS, FONT_SIZE, FONT_FAMILY, lineHeightMultiplier, storyCardOptions = {} }) => StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    backgroundColor: COLORS.BRAND_WHITE,
-    paddingVertical: 10,
-    alignItems: 'flex-start',
-    gap: 10,
-  },
-  imageAndDetails: {
-    flexDirection: 'row',
-    flexShrink: 1,
-    alignItems: 'flex-start',
-    gap: 10,
-  },
-  image: {
-    marginBottom: 4,
-    marginTop: storyCardOptions.enableSectionName ? FONT_SIZE.h4 * lineHeightMultiplier + 8 : 4,
-  },
-  icon: {
-    marginBottom: 4,
-    marginTop: storyCardOptions.enableSectionName ? FONT_SIZE.h4 * lineHeightMultiplier + 8 : 4,
-  },
-  headlineAndTimestampBlockContainer: {
-    flexShrink: 1,
-    flexGrow: 1,
-    gap: 4,
-    justifyContent: 'space-between',
-  },
-  sectionName: {
-    color: COLORS.BRAND_1,
-    fontSize: FONT_SIZE.h4,
-    lineHeight: FONT_SIZE.h4 * lineHeightMultiplier,
-  },
-  headline: {
-    color: COLORS.BRAND_BLACK,
-    flexWrap: 'wrap',
-    fontSize: FONT_SIZE.h3,
-    fontFamily: FONT_FAMILY.primaryBold,
-    lineHeight: FONT_SIZE.h3 * lineHeightMultiplier,
-    marginBottom: 4,
-  },
-  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,
-  },
-  separatorLine: {
-    height: 0.8,
-    opacity: 0.1,
-    backgroundColor: COLORS.BRAND_BLACK,
-  },
-});