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

package/src/components/SecondaryStoryCard/index.js

@@ -1,36 +1,46 @@
-import { get, throttle } from 'lodash';
+import { throttle } from 'lodash';
+import get from 'lodash/get';
 import PropTypes from 'prop-types';
-import React, { useContext, memo } from 'react';
+import React, { useContext } from 'react';
 import {
+  Image,
   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, StoryCardDetailsRow } from '../index';
-import { storyStyles } from './styles';
+import { ResponsiveImage, Text } from '../index';
+import { secStoryCardStyles } from './styles';
 import {
   COMP_GENERAL_CONSTANTS,
+  COMP_CONTENT_CONSTANTS,
 } from '../../constants/component-constants';
-import PremiumIcons from '../../Icons/PremiumIcons/index';
 
-const SecondaryStoryCardBase = (props) => {
-  const { story = {} } = props;
+export const SecondaryStoryCard = (props) => {
   const { theme } = useContext(AppTheme);
+  const translate = get(theme, ['translate'], (word) => word);
+
   const {
+    locale,
     COLORS,
-    premiumIcon,
-    FONT_SIZE,
-    storyCardOptions = {},
+    reverseTimeAdverbPosition,
+    enableReadTimeOnStoryCards,
+    DATE_TIME_FORMAT,
   } = theme;
+  const styles = secStoryCardStyles(theme);
+  const { story = {} } = props;
+
+  const DATE_FORMAT = DATE_TIME_FORMAT.dateFormat;
 
-  const styles = storyStyles(theme);
   const containerStyle = StyleSheet.flatten([
     styles.container,
     { paddingHorizontal: props.horizontalPadding },
@@ -39,8 +49,17 @@ const SecondaryStoryCardBase = (props) => {
     styles.headline,
     props.headlineStyle,
   ]);
+  const authorTextStyle = StyleSheet.flatten([
+    styles.authorText,
+    props.dateTextStyle,
+  ]);
+  const iconStyles = StyleSheet.flatten([styles.iconStyles, props.iconStyle]);
 
-  const isPremiumStory = story['access'] === 'subscription';
+  const name = get(story.authors, [0, 'name']);
+  const authorName = name ? `${translate('By')} ${name} | ` : '';
+  const readTime = enableReadTimeOnStoryCards && story['read-time']
+    ? `${story['read-time']} ${translate('min read')}`
+    : '';
 
   const throttledOnpress = throttle(props.onPress, 1000);
 
@@ -73,65 +92,71 @@ const SecondaryStoryCardBase = (props) => {
   };
 
   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}
+      <ResponsiveImage
         metaData={getImageMetadata(story)}
         slug={getImageSlug(story) || ''}
         cdn={props.cdn || ''}
         imageWidth={props.imageWidth}
       >
+        <Text style={styles.xminContainer}>
+          {readTime && (
+            <View style={styles.xmin}>
+              <Text style={styles.xminText}>{readTime}</Text>
+            </View>
+          )}
+        </Text>
         <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'}}>
+      </ResponsiveImage>
+      <View style={styles.headlineAndAuthorBlockContainer}>
         <Text
           primary
-          numberOfLines={storyCardOptions.numberOfLinesForTitle}
+          numberOfLines={3}
           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 style={styles.authorAndIconContainer}>
+          <Text
+            style={authorTextStyle}
+            numberOfLines={2}
+            testID={COMP_CONTENT_CONSTANTS.authorName}
+          >
+            {authorName
+              + getTimeForStoryCards(
+                story['published-at'],
+                DATE_FORMAT,
+                locale,
+                translate,
+                reverseTimeAdverbPosition,
+              )}
+          </Text>
+          <View style={iconStyles}>{props.iconComponent}</View>
         </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 }]}/>
-    </>
   );
 };
 
-SecondaryStoryCardBase.propTypes = TouchableOpacityProps && {
+SecondaryStoryCard.propTypes = TouchableOpacityProps && {
   cdn: PropTypes.string.isRequired,
+  imageStyle: Image.style,
   imageWidth: PropTypes.number,
   headlineStyle: TextStyle,
+  dateTextStyle: TextStyle,
   story: PropTypes.any.isRequired,
   iconComponent: PropTypes.element,
   horizontalPadding: PropTypes.number,
 };
 
-SecondaryStoryCardBase.defaultProps = {
+SecondaryStoryCard.defaultProps = {
   cdn: '',
   horizontalPadding: 12,
 };
-
-export const SecondaryStoryCard = memo(SecondaryStoryCardBase);

package/src/components/SecondaryStoryCard/styles.js

@@ -1,46 +1,52 @@
 import { StyleSheet } from 'react-native';
 
-export const storyStyles = ({ COLORS, FONT_SIZE, FONT_FAMILY, lineHeightMultiplier, storyCardOptions = {} }) => StyleSheet.create({
+export const secStoryCardStyles = ({ COLORS, FONT_SIZE, DARK_MODE }) => StyleSheet.create({
   container: {
     flexDirection: 'row',
-    justifyContent: 'space-between',
     backgroundColor: COLORS.BRAND_WHITE,
-    paddingVertical: 10,
-    alignItems: 'flex-start',
-    gap: 10,
+    paddingVertical: 15,
   },
-  imageAndDetails: {
-    flexDirection: 'row',
+  headlineAndAuthorBlockContainer: {
     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,
+    flex: 1,
+    justifyContent: 'space-between',
+    paddingHorizontal: 10,
   },
-  headlineAndTimestampBlockContainer: {
-    flexShrink: 1,
-    flexGrow: 1,
-    gap: 4,
+  authorAndIconContainer: {
+    flexDirection: 'row',
     justifyContent: 'space-between',
   },
-  sectionName: {
-    color: COLORS.BRAND_1,
-    fontSize: FONT_SIZE.h4,
-    lineHeight: FONT_SIZE.h4 * lineHeightMultiplier,
+  authorText: {
+    color: COLORS.BRAND_BLACK,
+    fontSize: FONT_SIZE.h6,
+    lineHeight: FONT_SIZE.h6 * 1.3,
+    opacity: 0.5,
+    fontWeight: '500',
+    paddingTop: 8,
   },
   headline: {
     color: COLORS.BRAND_BLACK,
+    opacity: 0.9,
     flexWrap: 'wrap',
     fontSize: FONT_SIZE.h3,
-    fontFamily: FONT_FAMILY.primaryBold,
-    lineHeight: FONT_SIZE.h3 * lineHeightMultiplier,
-    marginBottom: 4,
+    lineHeight: FONT_SIZE.h3 * 1.5,
+  },
+  iconStyles: {
+    justifyContent: 'flex-end',
+  },
+  xminContainer: {
+    position: 'absolute',
+    bottom: 8,
+    right: 8,
+  },
+  xmin: {
+    backgroundColor: DARK_MODE ? COLORS.MONO6 : COLORS.BRAND_WHITE,
+    paddingLeft: 8,
+    paddingRight: 8,
+  },
+  xminText: {
+    color: COLORS.BRAND_BLACK,
+    fontSize: FONT_SIZE.h5,
   },
   storyTypeContainer: {
     position: 'absolute',
@@ -70,13 +76,4 @@ export const storyStyles = ({ COLORS, FONT_SIZE, FONT_FAMILY, lineHeightMultipli
     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,
-  },
 });

package/src/components/SecondaryStoryCardNew/index.js

@@ -0,0 +1,140 @@
+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

@@ -0,0 +1,82 @@
+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,
+  },
+});

package/src/components/Story/index.js

@@ -1,19 +1,20 @@
-import { hexToRgb } from '@quintype/native-components/src/utils/colorUtils';
 import PropTypes from 'prop-types';
-import React, { useContext, useEffect } from 'react';
-import { I18nManager, View } from 'react-native';
-import LinearGradient from "react-native-linear-gradient";
-import { ClockIcon } from '../../Icons/ClockIcon';
-import { AppTheme, getTimeInFormat } from '../../utils';
-import { isMiddleIndexOfArray } from '../../utils/arrayUtils';
-import { getFirstVideoElement, isStoryFree } from '../../utils/story';
-import { STORY_TYPES } from '../../utils/story-types';
-import { FBCommentsRow } from '../FBCommentsRow';
-import { StoryContent } from '../StoryContent';
+import React, { useEffect, useContext } from 'react';
+import { View, I18nManager, TouchableOpacity } from 'react-native';
+import { Text } from '../index';
 import { StoryHeader } from '../StoryHeader';
+import { StoryContent } from '../StoryContent';
 import { TagsRow } from '../TagsRow/TagsRow';
-import { ShareButton, Text } from '../index';
+import { FBCommentsRow } from '../FBCommentsRow';
+import { STORY_TYPES } from '../../utils/story-types';
+import { getTimeInFormat, AppTheme } from '../../utils';
+import { ShareButton } from '../index';
+import { ClockIcon } from '../../Icons/ClockIcon';
 import { storyStyles } from './styles';
+import { isStoryFree, getFirstVideoElement } from '../../utils/story';
+import { isMiddleIndexOfArray } from '../../utils/arrayUtils';
+import LinearGradient from "react-native-linear-gradient";
+import { hexToRgb } from '@quintype/native-components/src/utils/colorUtils';
 
 const getLiveBlogTimeStamp = (card, DATE_FORMAT, story, styles, locale) => {
   const slug = `?cardId=${card.id}`;

package/src/components/StoryHeader/index.js

@@ -1,25 +1,25 @@
 import get from 'lodash/get';
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
-import { TouchableOpacity, View } from 'react-native';
-import { COMP_CONTENT_CONSTANTS } from '../../constants/component-constants/content-constants/constants';
+import { TouchableOpacity, View, I18nManager,StyleSheet } from 'react-native';
 import {
-  AppTheme,
   getImageMetadata,
   getScreenPercentageWidth,
-  getTimeInFormat
+  getTimeInFormat,
+  AppTheme,
+  stripHTML,
 } from '../../utils';
 import { STORY_TYPES } from '../../utils/story-types';
-import { YouTubePlayer } from '../YouTubePlayer';
 import {
-  AuthorRow, ResponsiveImage,
-  StoryTitle, Text
+  AuthorRow, ResponsiveImage, StoryText, StoryTitle, Text,
 } from '../index';
+import { YouTubePlayer } from '../YouTubePlayer';
 import { storyHeaderStyles } from './styles';
+import { COMP_CONTENT_CONSTANTS } from '../../constants/component-constants/content-constants/constants';
 
 import { DailyMotionPlayer } from '../DailyMotionPlayer';
 import { RatingLayout } from '../Rating';
-import CustomHtmlParser from './../Html/index';
+import  CustomHtmlParser  from './../Html/index';
 
 const getHeroImage = (cdn, story) => {
   const imageSlug = story['hero-image-s3-key'];

package/src/components/StoryText/index.js

@@ -1,14 +1,11 @@
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
 import {
-  I18nManager,
-  StyleSheet,
-  Text,
-  View
+  View, StyleSheet, Linking, Text, I18nManager,
 } from 'react-native';
 import HTML from 'react-native-render-html';
-import { customHTMLStyles } from '../../constants/renderHTML';
 import { AppTheme } from '../../utils/context';
+import { customHTMLStyles } from '../../constants/renderHTML';
 
 import { storyTextStyles } from './styles';
 

package/src/components/Text/index.js

@@ -1,9 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
 import {
-  I18nManager,
-  Text as RNText,
-  StyleSheet
+  Text as RNText, TextProps, StyleSheet, I18nManager,
 } from 'react-native';
 
 import { AppTheme } from '../../utils/context';

package/src/components/TextA/index.js

@@ -1,9 +1,9 @@
-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 { View, StyleSheet, Linking,I18nManager } from 'react-native';
+import { StoryText, 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 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 { StyleSheet, View } from 'react-native';
+import { View, Linking, StyleSheet } from 'react-native';
 import HTML from 'react-native-render-html';
-import { customHTMLStyles } from '../../constants/renderHTML';
-import { alterQuoteData } from '../../utils';
-import { AppTheme } from '../../utils/context';
 import { Text } from '../index';
 import { bigTextStyles } from './styles';
+import { AppTheme } from '../../utils/context';
+import { customHTMLStyles } from '../../constants/renderHTML';
+import { alterQuoteData } from '../../utils';
 
 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 { StyleSheet, View } from 'react-native';
-import HTML from 'react-native-render-html';
+import { View, Linking, StyleSheet } from 'react-native';
 import Icon from 'react-native-vector-icons/FontAwesome';
-import { customHTMLStyles } from '../../constants/renderHTML';
-import { alterQuoteData } from '../../utils';
-import { AppTheme } from '../../utils/context';
+import HTML from 'react-native-render-html';
 import { Text } from '../index';
+import { customHTMLStyles } from '../../constants/renderHTML';
 import { blockQuoteTextStyles } from './styles';
+import { AppTheme } from '../../utils/context';
+import { alterQuoteData } from '../../utils';
 
 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 { StyleSheet, View } from 'react-native';
+import { View, Linking, StyleSheet } from 'react-native';
 import HTML from 'react-native-render-html';
-import { customHTMLStyles } from '../../constants/renderHTML';
-import { AppTheme } from '../../utils/context';
 import { textBlurbStyles } from './styles';
+import { AppTheme } from '../../utils/context';
+import { customHTMLStyles } from '../../constants/renderHTML';
 
 export const TextBlurb = ({ text }) => {
   const { theme, useDeeplinkHandler } = useContext(AppTheme);

package/src/components/TextQandA/index.js

@@ -1,10 +1,11 @@
 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 { TextA } from '../TextA/index';
 import { TextQ } from '../TextQ/index';
-import { textQandAStyles } from './styles';
+import { TextA } from '../TextA/index';
 
 export const TextQandA = ({ question, answer }) => {
   const { theme } = useContext(AppTheme);