@quintype/native-components 2.22.7 → 2.28.1

package/src/components/TextA/index.js

@@ -1,9 +1,9 @@
-import PropTypes from 'prop-types';
-import React, { useContext } from 'react';
-import { View, StyleSheet, Linking,I18nManager } from 'react-native';
-import { StoryText, Text } from '@quintype/native-components/src/components';
+import { Text } from '@quintype/native-components/src/components';
 import { textAnswerStyles } from '@quintype/native-components/src/components/TextA/styles';
 import { AppTheme } from '@quintype/native-components/src/utils/context';
+import PropTypes from 'prop-types';
+import React, { useContext } from 'react';
+import { I18nManager, Linking, StyleSheet, View } from 'react-native';
 import HTML from 'react-native-render-html';
 import { customHTMLStyles } from '../../constants/renderHTML';
 

package/src/components/TextBigFact/index.js

@@ -1,12 +1,12 @@
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
-import { View, Linking, StyleSheet } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import HTML from 'react-native-render-html';
-import { Text } from '../index';
-import { bigTextStyles } from './styles';
-import { AppTheme } from '../../utils/context';
 import { customHTMLStyles } from '../../constants/renderHTML';
 import { alterQuoteData } from '../../utils';
+import { AppTheme } from '../../utils/context';
+import { Text } from '../index';
+import { bigTextStyles } from './styles';
 
 export const TextBigFact = ({ text, attribution, id }) => {
   const { theme, useDeeplinkHandler } = useContext(AppTheme);

package/src/components/TextBlockQuote/index.js

@@ -1,13 +1,13 @@
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
-import { View, Linking, StyleSheet } from 'react-native';
-import Icon from 'react-native-vector-icons/FontAwesome';
+import { StyleSheet, View } from 'react-native';
 import HTML from 'react-native-render-html';
-import { Text } from '../index';
+import Icon from 'react-native-vector-icons/FontAwesome';
 import { customHTMLStyles } from '../../constants/renderHTML';
-import { blockQuoteTextStyles } from './styles';
-import { AppTheme } from '../../utils/context';
 import { alterQuoteData } from '../../utils';
+import { AppTheme } from '../../utils/context';
+import { Text } from '../index';
+import { blockQuoteTextStyles } from './styles';
 
 export const TextBlockQuote = ({ text, attribution }) => {
   const { theme, useDeeplinkHandler } = useContext(AppTheme);

package/src/components/TextBlurb/index.js

@@ -1,10 +1,10 @@
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
-import { View, Linking, StyleSheet } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import HTML from 'react-native-render-html';
-import { textBlurbStyles } from './styles';
-import { AppTheme } from '../../utils/context';
 import { customHTMLStyles } from '../../constants/renderHTML';
+import { AppTheme } from '../../utils/context';
+import { textBlurbStyles } from './styles';
 
 export const TextBlurb = ({ text }) => {
   const { theme, useDeeplinkHandler } = useContext(AppTheme);

package/src/components/TextQandA/index.js

@@ -1,11 +1,10 @@
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
 import { View } from 'react-native';
-import { Text } from '../index';
-import { textQandAStyles } from './styles';
 import { AppTheme } from '../../utils/context';
-import { TextQ } from '../TextQ/index';
 import { TextA } from '../TextA/index';
+import { TextQ } from '../TextQ/index';
+import { textQandAStyles } from './styles';
 
 export const TextQandA = ({ question, answer }) => {
   const { theme } = useContext(AppTheme);

package/src/components/index.js

@@ -3,21 +3,17 @@ export { AuthorRow } from './AuthorRow';
 export { BackNavigator } from './BackNavigator';
 export { Button } from './Button';
 export { CollectionCard } from './CollectionCard';
-export { CollectionCardNew } from './CollectionCardNew';
 export { CollectionTitle } from './CollectionTitle';
-export { CollectionTitleNew } from './CollectionTitleNew';
 export { CustomLoader } from './CustomLoader';
 export { FBCommentsRow } from './FBCommentsRow';
 export { Header } from './Header';
 export { JSEmbedElement } from './JSEmbedElement';
 export { PDFReader } from './PDFReader';
 export { PrimaryStoryCard } from './PrimaryStoryCard';
-export { PrimaryStoryCardNew } from './PrimaryStoryCardNew';
 export { RadioButton } from './RadioButton';
 export { ResponsiveImage } from './ResponsiveImage';
 export { Search } from './Search';
 export { SecondaryStoryCard } from './SecondaryStoryCard';
-export { SecondaryStoryCardNew } from './SecondaryStoryCardNew';
 export { ShareButton } from './ShareButton';
 export { Story } from './Story';
 export { StoryContent } from './StoryContent';
@@ -47,3 +43,4 @@ export { References } from './References';
 export { StoryCardDetailsRow } from './StoryCardDetailsRow';
 export { TextA } from './TextA'
 export { TextQ } from './TextQ'
+export { StoryTemplateIcon } from './StoryTemplateIcon'

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

package/src/components/CollectionCardNew/index.js

@@ -1,84 +0,0 @@
-import get from 'lodash/get';
-import isEmpty from 'lodash/isEmpty';
-import PropTypes from 'prop-types';
-import React, { memo } from 'react';
-import { getScreenPercentageWidth } from '../../utils/index';
-import {
-  CollectionTitleNew,
-  PrimaryStoryCardNew,
-  SecondaryStoryCardNew,
-  ShareButton,
-} from '../index';
-
-const CollectionCardNewBase = ({
-  cdn,
-  collectionName,
-  stories,
-  onCollectionPress,
-  onStoryPress,
-  collectionTestID,
-  offset,
-  horizontalPadding,
-  initialOffset, /* Number of items to load on first load */
-  hideCollectionTitle,
-}) => {
-  const sliceLimit = offset || initialOffset || 5;
-  const primaryStory = !isEmpty(stories) && get(stories, [0, 'story'], stories[0]);
-
-  return (
-    <>
-      {!hideCollectionTitle && (
-      <CollectionTitleNew
-        title={collectionName}
-        onPress={onCollectionPress}
-        horizontalPadding={horizontalPadding}
-      />
-      )}
-      <PrimaryStoryCardNew
-        collectionTestID={collectionTestID}
-        onPress={() => {
-          !isEmpty(stories) && onStoryPress(primaryStory);
-        }}
-        cdn={cdn}
-        story={!isEmpty(stories) ? primaryStory : {}}
-        iconComponent={<ShareButton story={primaryStory} inListingStoryCard />}
-        imageWidth={getScreenPercentageWidth(100) - 2 * horizontalPadding}
-        horizontalPadding={horizontalPadding}
-      />
-      {stories.slice(1, sliceLimit).map((currentStory) => {
-        const secondaryStory = get(currentStory, ['story'], currentStory);
-        return (
-          <SecondaryStoryCardNew
-            collectionTestID={collectionTestID}
-            onPress={() => onStoryPress(secondaryStory)}
-            key={secondaryStory?.id}
-            cdn={cdn}
-            story={secondaryStory}
-            iconComponent={<ShareButton story={secondaryStory} inListingStoryCard />}
-            imageWidth={getScreenPercentageWidth(28)}
-            horizontalPadding={horizontalPadding}
-          />
-        );
-      })}
-    </>
-  );
-};
-
-CollectionCardNewBase.propTypes = {
-  offset: PropTypes.number,
-  initialOffset: PropTypes.number,
-  cdn: PropTypes.string.isRequired,
-  collectionName: PropTypes.string,
-  stories: PropTypes.array.isRequired,
-  onCollectionPress: PropTypes.func,
-  onStoryPress: PropTypes.func,
-  collectionTestID: PropTypes.string,
-  horizontalPadding: PropTypes.number,
-  hideCollectionTitle: PropTypes.bool,
-};
-
-CollectionCardNewBase.defaultProps = {
-  horizontalPadding: 12,
-};
-
-export const CollectionCardNew = memo(CollectionCardNewBase);

package/src/components/CollectionTitle/CollectionTitle.test.js

@@ -1,12 +0,0 @@
-import 'react-native';
-import React from 'react';
-import renderer from 'react-test-renderer';
-
-import { CollectionTitle } from './index';
-import { mockContext } from '../../utils';
-
-test('renders correctly', () => {
-  const component = mockContext(<CollectionTitle />);
-  const tree = renderer.create(component).toJSON();
-  expect(tree).toMatchSnapshot();
-});

package/src/components/CollectionTitle/__snapshots__/CollectionTitle.test.js.snap

@@ -1,3 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders correctly 1`] = `null`;

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