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

package/src/components/PrimaryStoryCardNew/styles.js

@@ -1,63 +0,0 @@
-export const storyStyles = (COLORS = {}, FONT_SIZE = {}) => ({
-  container: {
-    backgroundColor: COLORS.BRAND_WHITE,
-    padding: 8,
-  },
-  contentContainer: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-  },
-  headlineAndTimestampContainer: {
-    flexShrink: 1,
-    flex: 1,
-  },
-  timestamp: {
-    color: COLORS?.BRAND_BLACK,
-    fontSize: FONT_SIZE.h5,
-    lineHeight: FONT_SIZE.h5 * 1.5,
-    opacity: 0.6,
-    marginTop: 4,
-  },
-  headline: {
-    fontSize: FONT_SIZE.title,
-    lineHeight: FONT_SIZE.title * 1.6,
-    color: COLORS.BRAND_BLACK,
-    marginTop: 4,
-  },
-  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,
-  },
-  premiumIcon: {
-    marginTop: FONT_SIZE.h3 * 0.92,
-    marginRight: 5,
-  },
-});

package/src/components/Rating/index.js

@@ -1,50 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { useContext } from 'react';
-import { View } from 'react-native';
-import { StarRatingDisplay } from 'react-native-star-rating-widget';
-import { Text } from '../Text';
-import { ratingStyles } from './styles';
-import { AppTheme } from '../../utils';
-
-export const RatingLayout = ({ reviewTitle, ratingValue, ratingLabel }) => {
-  const { theme } = useContext(AppTheme);
-  const {
-    COLORS, FONT_FAMILY, FONT_SIZE,
-  } = theme;
-  const styles = ratingStyles(COLORS, FONT_SIZE, FONT_FAMILY);
-
-  return (
-    <View style={styles.container}>
-      {reviewTitle && (
-      <Text
-        style={styles.reviewTitle}
-        primary
-      >
-        {reviewTitle}
-      </Text>
-      )}
-      {ratingValue && (
-      <View style={styles.child}>
-        <Text
-          style={styles.ratingLabel}
-        >
-          {`${ratingLabel}/5`}
-        </Text>
-        <StarRatingDisplay
-          rating={ratingValue}
-          starSize={FONT_SIZE.title}
-          color={COLORS.REVIEW_STAR_COLOR ?? '#F5A623'}
-          style={styles.starContiner}
-          starStyle={styles.starStyle}
-        />
-      </View>
-      )}
-    </View>
-  );
-};
-
-RatingLayout.propTypes = {
-  reviewTitle: PropTypes.string.isRequired,
-  ratingValue: PropTypes.number.isRequired,
-  ratingLabel: PropTypes.string.isRequired,
-};

package/src/components/Rating/styles.js

@@ -1,21 +0,0 @@
-import { StyleSheet } from 'react-native';
-
-export const ratingStyles = (COLORS, FONT_SIZE, FONT_FAMILY) => StyleSheet.create({
-  container: { marginLeft: 10, marginTop: 10 },
-  reviewTitle: {
-    fontSize: FONT_SIZE.h2,
-    lineHeight: 24,
-    fontFamily: FONT_FAMILY.primary,
-    color: COLORS.BRAND_BLACK,
-    marginBottom: 7,
-  },
-  child: { display: 'flex', flexDirection: 'row', alignItems: 'center' },
-  ratingLabel: {
-    fontSize: FONT_SIZE.h2,
-    lineHeight: 24,
-    fontFamily: FONT_FAMILY.secondary,
-    color: COLORS.BRAND_BLACK,
-  },
-  starContainer: { marginLeft: 10 },
-  starStyle: { marginHorizontal: 0 },
-});

package/src/components/SecondaryStoryCardNew/index.js

@@ -1,157 +0,0 @@
-import { get, isNull, throttle } from 'lodash';
-import PropTypes from 'prop-types';
-import React, { useContext, memo, useState, useEffect } from 'react';
-import {
-  StyleSheet,
-  TouchableOpacity,
-  View,
-  TextStyle,
-  TouchableOpacityProps,
-} 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 SecondaryStoryCardNewBase = (props) => {
-  const { story = {} } = props;
-  const { theme } = useContext(AppTheme);
-  const {
-    locale,
-    DARK_MODE,
-    COLORS,
-    reverseTimeAdverbPosition,
-    enableReadTimeOnStoryCards,
-    DATE_TIME_FORMAT,
-    premiumIcon,
-    FONT_SIZE
-  } = theme;
-
-  const translate = get(theme, ['translate'], (word) => word);
-  const styles = storyStyles(theme, 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={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}
-    >
-      <ResponsiveImage
-        metaData={getImageMetadata(story)}
-        slug={getImageSlug(story) || ''}
-        cdn={props.cdn || ''}
-        imageWidth={props.imageWidth}
-      >
-        <View style={styles.storyTypeContainer}>{showStoryType()}</View>
-      </ResponsiveImage>
-      <View style={styles.headlineAndTimestampBlockContainer}>
-        <View style={{display:'flex', flexDirection:'row'}}>
-        <Text
-          primary
-          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>
-        <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>
-  );
-};
-
-SecondaryStoryCardNewBase.propTypes = TouchableOpacityProps && {
-  cdn: PropTypes.string.isRequired,
-  imageWidth: PropTypes.number,
-  headlineStyle: TextStyle,
-  timestampStyle: 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,64 +0,0 @@
-import { StyleSheet } from 'react-native';
-
-export const storyStyles = ({ COLORS, FONT_SIZE }) => StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    backgroundColor: COLORS.BRAND_WHITE,
-    padding: 8,
-    alignItems: 'center',
-  },
-  headlineAndTimestampBlockContainer: {
-    flexShrink: 1,
-    flex: 1,
-    justifyContent: 'space-between',
-    paddingLeft: 12,
-  },
-  timestamp: {
-    color: COLORS.BRAND_BLACK,
-    fontSize: FONT_SIZE.h5,
-    lineHeight: FONT_SIZE.h5 * 1.5,
-    opacity: 0.6,
-    marginTop: 4,
-  },
-  headline: {
-    color: COLORS.BRAND_BLACK,
-    flexWrap: 'wrap',
-    fontSize: FONT_SIZE.h3,
-    lineHeight: FONT_SIZE.h3 * 1.6,
-  },
-  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,
-  },
-  premiumIcon: {
-    marginTop: FONT_SIZE.h3 * 0.45,
-    marginRight: 3,
-  },
-});