@quintype/native-components 2.22.3 → 2.22.5-beta.0

package/src/components/CollectionTitleNew/index.js

@@ -1,44 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { useContext, memo } from 'react';
-import {
-  TextStyle,
-  TouchableOpacity,
-  TouchableOpacityProps,
-  StyleSheet,
-} from 'react-native';
-import { Text } from '../index';
-import { collectionTitleStyles } from './styles';
-import { AppTheme } from '../../utils';
-
-const CollectionTitleNewBase = (props) => {
-  const { theme } = useContext(AppTheme);
-  const styles = collectionTitleStyles(theme);
-  const containerStyle = StyleSheet.flatten([
-    styles.container,
-    { paddingHorizontal: props.horizontalPadding },
-  ]);
-  const titleStyle = StyleSheet.flatten([styles.title, props.titleStyle]);
-
-  if (!props.title) {
-    return null;
-  }
-
-  return (
-    <TouchableOpacity style={containerStyle} onPress={props.onPress}>
-      <Text style={titleStyle}>{props.title}</Text>
-    </TouchableOpacity>
-  );
-};
-
-CollectionTitleNewBase.propTypes = TouchableOpacityProps
-  && {
-    title: PropTypes.string,
-    titleStyle: TextStyle,
-    horizontalPadding: PropTypes.number,
-  };
-
-CollectionTitleNewBase.defaultProps = {
-  horizontalPadding: 12,
-};
-
-export const CollectionTitleNew = memo(CollectionTitleNewBase);

package/src/components/CollectionTitleNew/styles.js

@@ -1,20 +0,0 @@
-import { StyleSheet } from 'react-native';
-
-export const collectionTitleStyles = (appThemeContext) => {
-  const { COLORS, FONT_SIZE, FONT_FAMILY } = appThemeContext;
-
-  return StyleSheet.create({
-    container: {
-      justifyContent: 'center',
-      backgroundColor: COLORS.BRAND_WHITE,
-      paddingHorizontal: 12,
-      paddingVertical: 8,
-      marginTop: 8,
-    },
-    title: {
-      fontSize: FONT_SIZE.h3,
-      fontFamily: FONT_FAMILY.secondaryBold,
-      color: COLORS.BRAND_5,
-    },
-  });
-};

package/src/components/PrimaryStoryCard/PrimaryStoryCard.test.js

@@ -1,43 +0,0 @@
-import { cleanup, render, fireEvent } from '@testing-library/react-native';
-import React from 'react';
-import 'react-native';
-import { mockContext } from '../../utils';
-import { PrimaryStoryCard } from './index';
-import { data } from '../../constants/test-data/story.json';
-import { COMP_GENERAL_CONSTANTS } from '../../constants/component-constants/general-constants/constants';
-
-const storyData = data.story;
-const onPress = jest.fn();
-
-describe('Test Primary Story Card :', () => {
-  afterEach(cleanup);
-  test('renders author name properly', () => {
-    const { getByTestId } = render(
-      mockContext(<PrimaryStoryCard story={storyData} />),
-    );
-    const element = getByTestId(COMP_GENERAL_CONSTANTS.primaryStoryAuthor);
-    expect(element.props.children).toBe('By Raghavendra Vaidya | ');
-  });
-  test('renders story headline properly', () => {
-    const { getByTestId } = render(
-      mockContext(<PrimaryStoryCard story={storyData} />),
-    );
-    const element = getByTestId(COMP_GENERAL_CONSTANTS.primaryStoryHeadline);
-    expect(element.props.children).toBe('Jack and jill');
-  });
-  test('renders story publish date properly', () => {
-    const { getByTestId } = render(
-      mockContext(<PrimaryStoryCard story={storyData} />),
-    );
-    const element = getByTestId(COMP_GENERAL_CONSTANTS.primaryStoryPubishedAt);
-    expect(element.props.children).toBe('1 Feb, 2021');
-  });
-  test('OnPress handler called properly', () => {
-    const { getByTestId } = render(
-      mockContext(<PrimaryStoryCard story={storyData} onPress={onPress} />),
-    );
-    const element = getByTestId(COMP_GENERAL_CONSTANTS.primaryStoryCard);
-    fireEvent(element, 'press');
-    expect(onPress).toHaveBeenCalled();
-  });
-});

package/src/components/PrimaryStoryCardNew/index.js

@@ -1,134 +0,0 @@
-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 { storyStyles } from './styles';
-import {
-  COMP_GENERAL_CONSTANTS,
-  COMP_CONTENT_CONSTANTS,
-} from '../../constants/component-constants';
-import PremiumIcons from '../../Icons/PremiumIcons/index';
-
-const PrimaryStoryCardNewBase = (props) => {
-  const { story = {} } = props;
-  const { theme } = useContext(AppTheme);
-  const {
-    COLORS,
-    FONT_SIZE,
-    FONT_FAMILY,
-    premiumIcon,
-    lineHeightMultiplier,
-    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={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
-      testID={COMP_GENERAL_CONSTANTS.primaryStoryCard}
-      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.contentContainer}>
-        <View style={styles.headlineAndTimestampContainer}>
-        {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.primaryStoryHeadline}
-          >
-            {isPremiumStory && premiumIcon !=='none' && <PremiumIcons style={styles.premiumIcon} name={premiumIcon} color={COLORS.primary} size={FONT_SIZE.h2} /> }
-            {isPremiumStory && premiumIcon !=='none' && ' '}
-            {getStoryHeadline(story)}
-          </Text>
-          </View>
-          <StoryCardDetailsRow
-            authorName={get(story.authors, [0, 'name'])}
-            publishedAt={story["published-at"]}
-            readTime={story['read-time']}
-          />
-        </View>
-        <View style={styles.icon}>{props.iconComponent}</View>
-      </View>
-    </TouchableOpacity>
-    <View style={[styles.separatorLine, {marginHorizontal: props.horizontalPadding}]}/>
-    </>
-  );
-};
-
-PrimaryStoryCardNewBase.propTypes = {
-  cdn: PropTypes.string,
-  imageWidth: PropTypes.number,
-  headlineStyle: PropTypes.func,
-  story: PropTypes.object.isRequired,
-  onPress: PropTypes.func,
-  horizontalPadding: PropTypes.number,
-  iconComponent: PropTypes.element,
-};
-
-PrimaryStoryCardNewBase.defaultProps = {
-  cdn: '',
-  horizontalPadding: 12,
-};
-
-export const PrimaryStoryCardNew = memo(PrimaryStoryCardNewBase);

package/src/components/PrimaryStoryCardNew/styles.js

@@ -1,70 +0,0 @@
-export const storyStyles = ({COLORS, FONT_SIZE, FONT_FAMILY, lineHeightMultiplier, storyCardOptions = {}}) => ({
-  container: {
-    backgroundColor: COLORS.BRAND_WHITE,
-    paddingVertical: 10,
-    gap: 10,
-  },
-  contentContainer: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'flex-start',
-    gap: 10,
-  },
-  headlineAndTimestampContainer: {
-    flexShrink: 1,
-    gap: 4,
-  },
-  icon: {
-    marginBottom: 4,
-    marginTop: storyCardOptions.enableSectionName ? FONT_SIZE.h4 * lineHeightMultiplier + 8 : 4,
-  },
-  sectionName: {
-    color: COLORS.BRAND_1,
-    fontSize: FONT_SIZE.h4,
-    lineHeight: FONT_SIZE.h4 * lineHeightMultiplier,
-  },
-  headline: {
-    fontFamily: FONT_FAMILY.primaryBold,
-    fontSize: FONT_SIZE.title,
-    lineHeight: FONT_SIZE.title * lineHeightMultiplier,
-    color: COLORS.BRAND_BLACK,
-    marginBottom: 4,
-  },
-  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,
-  },
-  separatorLine: {
-    height: 0.8,
-    opacity: 0.1,
-    backgroundColor: COLORS.BRAND_BLACK,
-  },
-});

package/src/components/SecondaryStoryCard/SecondaryStoryCard.test.js

@@ -1,51 +0,0 @@
-import { cleanup, render, fireEvent } from '@testing-library/react-native';
-import React from 'react';
-import 'react-native';
-import { mockContext } from '../../utils';
-import { SecondaryStoryCard } from './index';
-import { data } from '../../constants/test-data/story.json';
-import { COMP_GENERAL_CONSTANTS } from '../../constants/component-constants/general-constants/constants';
-
-const storyData = data.story;
-const onPress = jest.fn();
-
-describe('Test Secondary Story Card :', () => {
-  afterEach(cleanup);
-  test('renders author name properly', () => {
-    const { getByTestId } = render(
-      mockContext(<SecondaryStoryCard story={storyData} />),
-    );
-    const element = getByTestId(COMP_GENERAL_CONSTANTS.secondaryStoryAuthor);
-    expect(element.props.children).toBe('By Raghavendra Vaidya | ');
-  });
-  test('renders story headline properly', () => {
-    const { getByTestId } = render(
-      mockContext(<SecondaryStoryCard story={storyData} />),
-    );
-    const element = getByTestId(COMP_GENERAL_CONSTANTS.secondaryStoryHeadline);
-    expect(element.props.children).toBe('Jack and jill');
-  });
-  test('renders story date properly', () => {
-    const { getByTestId } = render(
-      mockContext(<SecondaryStoryCard story={storyData} />),
-    );
-    const element = getByTestId(
-      COMP_GENERAL_CONSTANTS.secondaryStoryPubishedAt,
-    );
-    expect(element.props.children).toBe('1 Feb, 2021');
-  });
-  test('OnPress handler called properly', () => {
-    const { getByTestId } = render(
-      mockContext(
-        <SecondaryStoryCard
-          story={storyData}
-          onPress={onPress}
-          collectionTestID="secondaryStoryCardView"
-        />,
-      ),
-    );
-    const element = getByTestId(COMP_GENERAL_CONSTANTS.secondaryStoryCard);
-    fireEvent(element, 'press');
-    expect(onPress).toHaveBeenCalled();
-  });
-});

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,
-  },
-});