@quintype/native-components 2.28.0 → 2.28.2

package/src/components/SecondaryStoryCardNew/index.js

@@ -1,113 +0,0 @@
-import { get, throttle } from 'lodash';
-import PropTypes from 'prop-types';
-import React, { useContext, memo } from 'react';
-import {
-  StyleSheet,
-  TouchableOpacity,
-  View,
-  TextStyle,
-  TouchableOpacityProps,
-} from 'react-native';
-import {
-  AppTheme,
-  getImageMetadata,
-  getImageSlug,
-} from '../../utils';
-import { getStoryHeadline } from '../../utils/story';
-import { ResponsiveImage, Text, StoryCardDetailsRow, StoryTemplateIcon } 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);
-
-  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}>
-              <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>
-        <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,59 +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',
-    bottom: 0,
-    left: 0,
-  },
-  premiumIcon: {
-    marginTop: FONT_SIZE.h3 * 0.45,
-    marginRight: 3,
-  },
-  separatorLine: {
-    height: 0.8,
-    opacity: 0.1,
-    backgroundColor: COLORS.BRAND_BLACK,
-  },
-});