@quintype/native-components 2.22.0-beta.0 → 2.22.0-beta.2

package/.watchmanconfig

@@ -0,0 +1,6 @@
+{
+  "ignore_dirs": [
+    ".git",
+    "node_modules"
+  ]
+}

package/bin-dev-scripts/standard-version-release.sh

@@ -1,15 +1,15 @@
-#!/bin/bash -e
+# #!/bin/bash -e
 
-npm install
-git diff --quiet
+# npm install
+# git diff --quiet
 
-BRANCH=$(git symbolic-ref --short HEAD)
+# BRANCH=$(git symbolic-ref --short HEAD)
 
-if [ "$BRANCH" == 'master' ]
-then
-  npx standard-version
-else
-  npx standard-version --prerelease "$(git symbolic-ref --short HEAD | sed s:/:-:g )" --skip.changelog=true
-fi
+# if [ "$BRANCH" == 'master' ]
+# then
+#   npx standard-version
+# else
+#   npx standard-version --prerelease "$(git symbolic-ref --short HEAD | sed s:/:-:g )" --skip.changelog=true
+# fi
 
-git push --follow-tags origin "$BRANCH"
+# git push --follow-tags origin "$BRANCH"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quintype/native-components",
-  "version": "2.22.0-beta.0",
+  "version": "2.22.0-beta.2",
   "description": "",
   "main": "src/index.js",
   "scripts": {

package/src/components/AlsoRead/index.js

@@ -25,7 +25,7 @@ export const AlsoRead = (props) => {
   const linkedImage = get(linkedStories, [linkedStoryId, 'hero-image-s3-key']);
 
   const { theme } = useContext(AppTheme);
-  const { CustomFallBackIcon, translate } = theme;
+  const { CustomFallBackIcon, translate, showAlsoRead } = theme;
   const styles = alsoReadStyles(theme);
 
   const fallBackIcon = CustomFallBackIcon ? <CustomFallBackIcon /> : <FallbackIcon />;
@@ -36,7 +36,7 @@ export const AlsoRead = (props) => {
       <ResponsiveImage
         metaData={linkedStoryMetadata}
         cdn={cdn}
-        imageWidth={120}
+        imageWidth={150}
         slug={linkedImage}
       />
     );
@@ -44,13 +44,13 @@ export const AlsoRead = (props) => {
 
   return (
     <View style={styles.wrapper}>
+      {showAlsoRead && <Text style={styles.alsoReadText}>{translate("Also Read")}</Text>}
       <TouchableOpacity
         onPress={() => handleAlsoReadTap(slug, navigation, screenList)}
       >
         <View style={styles.container}>
           {getImageComponent()}
           <View style={styles.alsoReadContentWrapper}>
-            <Text style={styles.alsoReadText}>{translate("Also Read")}</Text>
             <Text primary numberOfLines={2} style={styles.alsoReadTitle}>
               {text}
             </Text>

package/src/components/AlsoRead/styles.js

@@ -5,9 +5,15 @@ export const alsoReadStyles = (appThemeContext) => {
   return StyleSheet.create({
     wrapper: {
       padding: 10,
+      margin:15
     },
     container: {
       flexDirection: "row",
+      padding:10,
+      borderWidth:0.5,
+      borderRadius:2,
+      marginTop:8,
+      borderColor:COLORS.MONO5
     },
     alsoReadContentWrapper: {
       paddingLeft: 12,
@@ -15,12 +21,13 @@ export const alsoReadStyles = (appThemeContext) => {
     },
     alsoReadText: {
       fontSize: FONT_SIZE.h2,
-      fontFamily: FONT_FAMILY.secondaryBold,
-      color: DARK_MODE ? COLORS.BRAND_BLACK : COLORS.BRAND_1,
+      fontFamily: FONT_FAMILY.primaryBold,
+      color: COLORS.BRAND_BLACK,
     },
     alsoReadTitle: {
       fontSize: FONT_SIZE.h2,
-      color: DARK_MODE ? COLORS.BRAND_BLACK : COLORS.BRAND_1,
+      color: COLORS.BRAND_1,
+      fontFamily: FONT_FAMILY.primary,
     },
     fallBackImageWrapper: {
       backgroundColor: COLORS.BRAND_WHITE,

package/src/components/CollectionCardNew/index.js

@@ -55,7 +55,7 @@ const CollectionCardNewBase = ({
             cdn={cdn}
             story={secondaryStory}
             iconComponent={<ShareButton story={secondaryStory} />}
-            imageWidth={getScreenPercentageWidth(25)}
+            imageWidth={getScreenPercentageWidth(29)}
             horizontalPadding={horizontalPadding}
           />
         );

package/src/components/CollectionTitleNew/styles.js

@@ -1,7 +1,7 @@
 import { StyleSheet } from 'react-native';
 
 export const collectionTitleStyles = (appThemeContext) => {
-  const { COLORS, FONT_SIZE } = appThemeContext;
+  const { COLORS, FONT_SIZE, FONT_FAMILY } = appThemeContext;
 
   return StyleSheet.create({
     container: {
@@ -13,6 +13,7 @@ export const collectionTitleStyles = (appThemeContext) => {
     },
     title: {
       fontSize: FONT_SIZE.h3,
+      fontFamily: FONT_FAMILY.secondaryBold,
       color: COLORS.BRAND_5,
     },
   });

package/src/components/PrimaryStoryCardNew/index.js

@@ -7,10 +7,9 @@ import {
   AppTheme,
   getImageMetadata,
   getImageSlug,
-  getTimeForStoryCards,
 } from '../../utils';
 import { getStoryHeadline } from '../../utils/story';
-import { ResponsiveImage, Text } from '../index';
+import { ResponsiveImage, Text, StoryCardDetailsRow } from '../index';
 import { storyStyles } from './styles';
 import {
   COMP_GENERAL_CONSTANTS,
@@ -24,18 +23,13 @@ const PrimaryStoryCardNewBase = (props) => {
   const {
     COLORS,
     FONT_SIZE,
-    locale,
-    DARK_MODE,
-    reverseTimeAdverbPosition,
-    enableReadTimeOnStoryCards,
-    DATE_TIME_FORMAT,
+    FONT_FAMILY,
     premiumIcon,
     lineHeightMultiplier,
+    storyCardOptions,
   } = theme || {};
 
-  const translate = get(theme, ['translate'], (word) => word);
-
-  const styles = storyStyles(COLORS, FONT_SIZE, lineHeightMultiplier);
+  const styles = storyStyles(theme);
   const containerStyle = StyleSheet.flatten([
     styles.container,
     { paddingHorizontal: props.horizontalPadding },
@@ -44,15 +38,7 @@ const PrimaryStoryCardNewBase = (props) => {
     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);
@@ -85,6 +71,7 @@ const PrimaryStoryCardNewBase = (props) => {
   };
 
   return (
+    <>
     <TouchableOpacity
       testID={COMP_GENERAL_CONSTANTS.primaryStoryCard}
       onPress={throttledOnpress}
@@ -101,12 +88,11 @@ const PrimaryStoryCardNewBase = (props) => {
       </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={3}
+            numberOfLines={storyCardOptions.numberOfLinesForTitle}
             ellipsizeMode="tail"
             style={headlineStyle}
             testID={COMP_GENERAL_CONSTANTS.primaryStoryHeadline}
@@ -116,24 +102,17 @@ const PrimaryStoryCardNewBase = (props) => {
             {getStoryHeadline(story)}
           </Text>
           </View>
-          <Text
-            style={timestampStyle}
-            numberOfLines={2}
-            testID={COMP_CONTENT_CONSTANTS.publishedDate}
-          >
-            {readTime
-              + getTimeForStoryCards(
-                story['published-at'],
-                DATE_FORMAT,
-                locale,
-                translate,
-                reverseTimeAdverbPosition,
-              )}
-          </Text>
+          <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}]}/>
+    </>
   );
 };
 
@@ -141,7 +120,6 @@ PrimaryStoryCardNewBase.propTypes = {
   cdn: PropTypes.string,
   imageWidth: PropTypes.number,
   headlineStyle: PropTypes.func,
-  timestampStyle: PropTypes.func,
   story: PropTypes.object.isRequired,
   onPress: PropTypes.func,
   horizontalPadding: PropTypes.number,

package/src/components/PrimaryStoryCardNew/styles.js

@@ -1,32 +1,34 @@
-export const storyStyles = (COLORS = {}, FONT_SIZE = {}, lineHeightMultiplier) => ({
+export const storyStyles = ({COLORS, FONT_SIZE, FONT_FAMILY, lineHeightMultiplier, storyCardOptions}) => ({
   container: {
     backgroundColor: COLORS.BRAND_WHITE,
-    padding: 8,
+    paddingVertical: 10,
+    gap: 10,
   },
   contentContainer: {
     flexDirection: 'row',
     justifyContent: 'space-between',
-    alignItems: 'center',
+    alignItems: 'flex-start',
+    gap: 10,
   },
   headlineAndTimestampContainer: {
     flexShrink: 1,
-    flex: 1,
+    gap: 4,
   },
-  timestamp: {
-    color: COLORS?.BRAND_BLACK,
-    fontSize: FONT_SIZE.h5,
-    lineHeight: FONT_SIZE.h5 * lineHeightMultiplier,
-    opacity: 0.6,
-    marginTop: 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,
-    marginTop: 4,
-  },
-  icon: {
-    marginLeft: 8,
+    marginBottom: 4,
   },
   storyTypeContainer: {
     position: 'absolute',
@@ -60,4 +62,9 @@ export const storyStyles = (COLORS = {}, FONT_SIZE = {}, lineHeightMultiplier) =
     marginTop: FONT_SIZE.h3 * 0.92,
     marginRight: 5,
   },
+  separatorLine: {
+    height: 0.8,
+    opacity: 0.1,
+    backgroundColor: COLORS.BRAND_BLACK,
+  },
 });

package/src/components/ResponsiveImage/index.js

@@ -41,6 +41,7 @@ const ResponsiveImageBase = (props) => {
 
   const placeholderStyle = {
     ...StyleSheet.absoluteFillObject,
+    ...props.styles,
     backgroundColor:
       (CustomFallBackIcon && CustomFallBackBackground) ?? COLORS.MONO6,
     justifyContent: "center",

package/src/components/SecondaryStoryCardNew/index.js

@@ -1,6 +1,6 @@
 import { get, isNull, throttle } from 'lodash';
 import PropTypes from 'prop-types';
-import React, { useContext, memo, useState, useEffect } from 'react';
+import React, { useContext, memo } from 'react';
 import {
   StyleSheet,
   TouchableOpacity,
@@ -13,10 +13,9 @@ import {
   AppTheme,
   getImageMetadata,
   getImageSlug,
-  getTimeForStoryCards,
 } from '../../utils';
 import { getStoryHeadline } from '../../utils/story';
-import { ResponsiveImage, Text } from '../index';
+import { ResponsiveImage, Text, StoryCardDetailsRow } from '../index';
 import { storyStyles } from './styles';
 import {
   COMP_GENERAL_CONSTANTS,
@@ -28,18 +27,13 @@ const SecondaryStoryCardNewBase = (props) => {
   const { story = {} } = props;
   const { theme } = useContext(AppTheme);
   const {
-    locale,
-    DARK_MODE,
     COLORS,
-    reverseTimeAdverbPosition,
-    enableReadTimeOnStoryCards,
-    DATE_TIME_FORMAT,
     premiumIcon,
-    FONT_SIZE
+    FONT_SIZE,
+    storyCardOptions,
   } = theme;
 
-  const translate = get(theme, ['translate'], (word) => word);
-  const styles = storyStyles(theme, DARK_MODE);
+  const styles = storyStyles(theme);
   const containerStyle = StyleSheet.flatten([
     styles.container,
     { paddingHorizontal: props.horizontalPadding },
@@ -48,15 +42,7 @@ const SecondaryStoryCardNewBase = (props) => {
     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);
@@ -90,25 +76,30 @@ const SecondaryStoryCardNewBase = (props) => {
   };
 
   return (
+    <>
     <TouchableOpacity
       testID={COMP_GENERAL_CONSTANTS.secondaryStoryCard}
       onPress={throttledOnpress}
       activeOpacity={0.8}
       style={containerStyle}
     >
-      <ResponsiveImage
+      <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>
+      </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={2}
+          numberOfLines={storyCardOptions.numberOfLinesForTitle}
           ellipsizeMode="tail"
           style={headlineStyle}
           testID={COMP_GENERAL_CONSTANTS.secondaryStoryHeadline}
@@ -118,24 +109,17 @@ const SecondaryStoryCardNewBase = (props) => {
           {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>
+        <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 }]}/>
+    </>
   );
 };
 
@@ -143,7 +127,6 @@ SecondaryStoryCardNewBase.propTypes = TouchableOpacityProps && {
   cdn: PropTypes.string.isRequired,
   imageWidth: PropTypes.number,
   headlineStyle: TextStyle,
-  timestampStyle: TextStyle,
   story: PropTypes.any.isRequired,
   iconComponent: PropTypes.element,
   horizontalPadding: PropTypes.number,

package/src/components/SecondaryStoryCardNew/styles.js

@@ -1,33 +1,46 @@
 import { StyleSheet } from 'react-native';
 
-export const storyStyles = ({ COLORS, FONT_SIZE, lineHeightMultiplier }) => StyleSheet.create({
+export const storyStyles = ({ COLORS, FONT_SIZE, FONT_FAMILY, lineHeightMultiplier, storyCardOptions }) => StyleSheet.create({
   container: {
     flexDirection: 'row',
+    justifyContent: 'space-between',
     backgroundColor: COLORS.BRAND_WHITE,
-    padding: 8,
-    alignItems: 'center',
+    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,
-    flex: 1,
+    flexGrow: 1,
+    gap: 4,
     justifyContent: 'space-between',
-    paddingLeft: 12,
   },
-  timestamp: {
-    color: COLORS.BRAND_BLACK,
-    fontSize: FONT_SIZE.h5,
-    lineHeight: FONT_SIZE.h5 * lineHeightMultiplier,
-    opacity: 0.6,
-    marginTop: 4,
+  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,
-  },
-  icon: {
-    marginLeft: 8,
+    marginBottom: 4,
   },
   storyTypeContainer: {
     position: 'absolute',
@@ -61,4 +74,9 @@ export const storyStyles = ({ COLORS, FONT_SIZE, lineHeightMultiplier }) => Styl
     marginTop: FONT_SIZE.h3 * 0.45,
     marginRight: 3,
   },
+  separatorLine: {
+    height: 0.8,
+    opacity: 0.1,
+    backgroundColor: COLORS.BRAND_BLACK,
+  },
 });

package/src/components/ShareButton/index.js

@@ -2,6 +2,7 @@ import React, { useContext, memo } from 'react';
 import { TouchableOpacity } from 'react-native';
 import PropTypes from 'prop-types';
 import Icon from 'react-native-vector-icons/Ionicons';
+import IconAlt from 'react-native-vector-icons/MaterialCommunityIcons';
 import Share from 'react-native-share';
 import { AppTheme } from '../../utils';
 import { shareButtonStyles } from './styles';
@@ -11,7 +12,7 @@ import { COMP_GENERAL_CONSTANTS } from '../../constants/component-constants';
 const ShareButtonBase = (props) => {
   const { theme } = useContext(AppTheme);
   const styles = shareButtonStyles(theme);
-  const { enableShareOnStoryCards } = theme;
+  const { storyCardOptions } = theme;
   const { story, type = 'story', slug } = props;
 
   const getShareURL = () => {
@@ -48,12 +49,24 @@ const ShareButtonBase = (props) => {
     return null;
   }
 
-  return enableShareOnStoryCards ? (
+  const renderIcon = () => {
+    switch (storyCardOptions.shareButtonIcon) {
+      case 'right-arrow':
+        return <IconAlt style={styles.iconStyle} name="share-outline" size={20} />;
+      case 'up-arrow':
+        return <Icon style={styles.iconStyle} name="share-outline" size={20} />;
+      case 'classic':
+      default:
+        return <Icon style={styles.iconStyle} name="share-social-outline" size={20} />;
+    }
+  };
+
+  return storyCardOptions.enableShareButton ? (
     <TouchableOpacity
       onPress={share}
       testID={COMP_GENERAL_CONSTANTS.shareButtonTouch}
     >
-      <Icon style={styles.iconStyle} name="share-social-outline" size={20} />
+      {renderIcon()}
     </TouchableOpacity>
   ) : null;
 };

package/src/components/ShareButton/styles.js

@@ -5,7 +5,7 @@ export const shareButtonStyles = ({ COLORS }) => StyleSheet.create({
     textAlign: 'center',
     textAlignVertical: 'center',
     color: COLORS.BRAND_BLACK,
-    width: 32,
-    height: 32,
+    width: 24,
+    height: 24,
   },
 });

package/src/components/StoryCardDetailsRow/index.js

@@ -0,0 +1,52 @@
+import { get } from 'lodash';
+import PropTypes from "prop-types";
+import React, { useContext, memo } from "react";
+import { View } from "react-native";
+import { Text } from "../index";
+import { storyCardDetailsRowStyles } from "./styles";
+import { AppTheme, getTimeForStoryCards } from "../../utils";
+
+const StoryCardDetailsRowBase = ({ authorName, publishedAt, readTime }) => {
+  const { theme } = useContext(AppTheme);
+  const styles = storyCardDetailsRowStyles(theme);
+  const {
+    locale,
+    reverseTimeAdverbPosition,
+    DATE_TIME_FORMAT,
+    storyCardOptions,
+  } = theme;
+  const translate = get(theme, ["translate"], (word) => word);
+
+  const authorNameText = authorName;
+  const publishedAtText = getTimeForStoryCards(
+    publishedAt,
+    DATE_TIME_FORMAT.dateFormat,
+    locale,
+    translate,
+    reverseTimeAdverbPosition
+  );
+  const readTimeText = readTime ? readTime + " " + translate("min read") : "";
+  const details = [
+    storyCardOptions.enableAuthorName && authorNameText,
+    storyCardOptions.enablePublishedAt && publishedAtText,
+    storyCardOptions.enableReadTime && readTimeText,
+  ].filter((detail) => detail && detail.trim());
+
+  return (
+    <View style={styles.container}>
+      {details.map((detail, index) => (
+        <Text key={index} style={styles.detailText}>
+          {detail}
+          {index < details.length - 1 && ' · '}
+        </Text>
+      ))}
+    </View>
+  );
+};
+
+StoryCardDetailsRowBase.propTypes = {
+  authorName: PropTypes.string,
+  readTime: PropTypes.string,
+};
+
+export const StoryCardDetailsRow = memo(StoryCardDetailsRowBase);

package/src/components/StoryCardDetailsRow/styles.js

@@ -0,0 +1,14 @@
+import { StyleSheet } from 'react-native';
+
+export const storyCardDetailsRowStyles = ({ COLORS, FONT_SIZE, lineHeightMultiplier }) => StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  detailText: {
+    color: COLORS.BRAND_BLACK,
+    fontSize: FONT_SIZE.h5,
+    lineHeight: FONT_SIZE.h5 * lineHeightMultiplier,
+    opacity: 0.6,
+  },
+});

package/src/components/StoryContent/index.js

@@ -23,6 +23,7 @@ export const StoryContent = ({
   const textProps = {
     text: storyElement.text,
     attribution: storyElement?.metadata?.attribution,
+    navigation
   };
 
   switch (storyElement.type) {
@@ -39,15 +40,18 @@ export const StoryContent = ({
           return React.createElement(AllComponents.TextBlockQuote, textProps);
         case STORY_ELEMENT_SUBTYPES.BIGFACT:
           return React.createElement(AllComponents.TextBigFact, textProps);
-        case STORY_ELEMENT_SUBTYPES.QUESTION:
-          return React.createElement(AllComponents.StoryText, {
-            ...textProps,
-            question: true,
-          });
         case STORY_ELEMENT_SUBTYPES.Q_A:
           return React.createElement(AllComponents.TextQandA, {
-            question: stripHTML(storyElement.metadata.question),
-            answer: stripHTML(storyElement.metadata.answer),
+            question: storyElement.metadata.question,
+            answer: storyElement.metadata.answer,
+          });
+        case STORY_ELEMENT_SUBTYPES.QUESTION:
+          return React.createElement(AllComponents.TextQ, {
+            question: storyElement.text,
+          });
+        case STORY_ELEMENT_SUBTYPES.ANSWER:
+          return React.createElement(AllComponents.TextA, {
+            answer: storyElement.text,
           });
 
         case STORY_ELEMENT_SUBTYPES.ALSO_READ: {

package/src/components/StoryText/index.js

@@ -10,7 +10,8 @@ import { customHTMLStyles } from '../../constants/renderHTML';
 import { storyTextStyles } from './styles';
 
 export const StoryText = (props) => {
-  const { theme } = useContext(AppTheme);
+  const {navigation} = props;
+  const { theme, useDeeplinkHandler } = useContext(AppTheme);
   const {
     COLORS,
     FONT_FAMILY,
@@ -39,7 +40,7 @@ export const StoryText = (props) => {
         key={Math.random()}
         baseFontStyle={style}
         onLinkPress={(evt, href) => {
-          Linking.openURL(href);
+          useDeeplinkHandler(href, navigation)
         }}
         listsPrefixesRenderers={{
           ul: () => <View style={customTagsStyles.ul} />,

package/src/components/TextA/index.js

@@ -0,0 +1,55 @@
+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 { 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';
+
+export const TextA = ({ answer }) => {
+  const { theme } = useContext(AppTheme);
+  const { COLORS, FONT_SIZE, lineHeightMultiplier, FONT_FAMILY} = theme;
+  const styles = textAnswerStyles(COLORS, FONT_SIZE, lineHeightMultiplier);
+  const customTagsStyles = customHTMLStyles();
+  const style = StyleSheet.flatten([
+    styles.answerText,
+    {
+      fontFamily: FONT_FAMILY.secondary,
+      writingDirection: I18nManager.isRTL ? "rtl" : "ltr",
+    },
+  ]);
+  return (
+    <View testID="text-answer" style={styles.container}>
+      <View style={styles.iconContainer}>
+        <Text style={styles.iconText}>A</Text>
+      </View>
+      <HTML
+        html={answer}
+        key={Math.random()}
+        baseFontStyle={style}
+        onLinkPress={(evt, href) => {
+          Linking.openURL(href);
+        }}
+        tagsStyles={{
+          del: customTagsStyles.del,
+          ins: customTagsStyles.ins,
+          p: customTagsStyles.p,
+          li: customTagsStyles.li,
+          a: customTagsStyles.a,
+          h2: customTagsStyles.h,
+          h3: customTagsStyles.h,
+          h4: customTagsStyles.h,
+          h5: customTagsStyles.h,
+          h6: customTagsStyles.h,
+        }}
+        containerStyle={styles.htmlContainer}
+      />
+    </View>
+  );
+};
+
+TextA.propTypes = {
+  question: PropTypes.string.isRequired,
+  answer: PropTypes.string.isRequired,
+};

package/src/components/TextA/styles.js

@@ -0,0 +1,46 @@
+import { StyleSheet } from 'react-native';
+import { isRTLEnabled } from '@quintype/native-components/src/utils';
+export const textAnswerStyles = (COLORS, FONT_SIZE, lineHeightMultiplier) => StyleSheet.create({
+  container: {
+    margin: 10,
+    display:'flex',
+    flexDirection:'row',
+    alignItems:'center',
+    marginBottom:20,
+    marginTop:5
+  },
+  questionText: {
+    fontSize: FONT_SIZE.h2,
+    fontWeight: '600',
+    lineHeight: FONT_SIZE.h2 * lineHeightMultiplier,
+    color: COLORS.BRAND_BLACK,
+    opacity: 0.8,
+    textAlign: isRTLEnabled() ? 'left' : 'auto',
+  },
+  answerText: {
+    fontSize: FONT_SIZE.h2,
+    lineHeight: FONT_SIZE.h2 * lineHeightMultiplier,
+    color: COLORS.BRAND_BLACK,
+    opacity: 0.8,
+  },
+  iconContainer:{
+    borderRadius:5,
+    height:10+FONT_SIZE.h1,
+    width:10+FONT_SIZE.h1,
+    backgroundColor:COLORS.BRAND_1,
+    display:'flex',
+    justifyContent:'center',
+    alignItems:'center',
+    marginRight:5,
+    alignSelf:'flex-start'
+  },
+  iconText:{
+    fontSize:FONT_SIZE.h1,
+    color:COLORS.DYNAMIC_PRIMARY_TEXT_COLOR
+  },
+  htmlContainer:{
+    alignSelf:'flex-start',
+    marginTop:-5,
+    width:'90%'
+  }
+});

package/src/components/TextBigFact/index.js

@@ -9,7 +9,7 @@ import { customHTMLStyles } from '../../constants/renderHTML';
 import { alterQuoteData } from '../../utils';
 
 export const TextBigFact = ({ text, attribution, id }) => {
-  const { theme } = useContext(AppTheme);
+  const { theme, useDeeplinkHandler } = useContext(AppTheme);
   const {
     FONT_FAMILY,
     COLORS,
@@ -40,7 +40,7 @@ export const TextBigFact = ({ text, attribution, id }) => {
         key={Math.random()}
         baseFontStyle={style}
         onLinkPress={(evt, href) => {
-          Linking.openURL(href);
+          useDeeplinkHandler(href, props?.navigation);
         }}
         tagsStyles={{
           del: customTagsStyles.del,

package/src/components/TextBlockQuote/index.js

@@ -10,7 +10,7 @@ import { AppTheme } from '../../utils/context';
 import { alterQuoteData } from '../../utils';
 
 export const TextBlockQuote = ({ text, attribution }) => {
-  const { theme } = useContext(AppTheme);
+  const { theme, useDeeplinkHandler } = useContext(AppTheme);
   const {
     FONT_FAMILY, FONT_SIZE, COLORS, CAN_COPY_TEXT, DARK_MODE, lineHeightMultiplier
   } = theme;
@@ -36,7 +36,7 @@ export const TextBlockQuote = ({ text, attribution }) => {
         key={Math.random()}
         baseFontStyle={style}
         onLinkPress={(evt, href) => {
-          Linking.openURL(href);
+          useDeeplinkHandler(href, props?.navigation);
         }}
         tagsStyles={{
           del: customTagsStyles.del,

package/src/components/TextBlurb/index.js

@@ -7,7 +7,7 @@ import { AppTheme } from '../../utils/context';
 import { customHTMLStyles } from '../../constants/renderHTML';
 
 export const TextBlurb = ({ text }) => {
-  const { theme } = useContext(AppTheme);
+  const { theme, useDeeplinkHandler } = useContext(AppTheme);
   const {
     FONT_FAMILY, COLORS, FONT_SIZE, CAN_COPY_TEXT, lineHeightMultiplier,
   } = theme;
@@ -35,7 +35,7 @@ export const TextBlurb = ({ text }) => {
         key={Math.random()}
         baseFontStyle={style}
         onLinkPress={(evt, href) => {
-          Linking.openURL(href);
+          useDeeplinkHandler(href, props?.navigation);
         }}
         tagsStyles={{
           del: customTagsStyles.del,

package/src/components/TextQ/index.js

@@ -0,0 +1,54 @@
+import PropTypes from 'prop-types';
+import React, { useContext } from 'react';
+import { View, StyleSheet, Linking, I18nManager } from 'react-native';
+import { Text } from '@quintype/native-components/src/components';
+import { textQuestionStyles } from '@quintype/native-components/src/components/TextQ/styles';
+import { AppTheme } from '@quintype/native-components/src/utils/context';
+import HTML from 'react-native-render-html';
+import { customHTMLStyles } from '../../constants/renderHTML';
+export const TextQ = ({ question }) => {
+  const { theme } = useContext(AppTheme);
+  const { COLORS, FONT_SIZE, lineHeightMultiplier, FONT_FAMILY } = theme;
+  const styles = textQuestionStyles(COLORS, FONT_SIZE, lineHeightMultiplier);
+  const customTagsStyles = customHTMLStyles();
+  const style = StyleSheet.flatten([
+    styles.questionText,
+    {
+      fontFamily: FONT_FAMILY.primaryBold,
+      writingDirection: I18nManager.isRTL ? "rtl" : "ltr",
+    },
+  ]);
+  return (
+    <View testID="text-question" style={styles.container}>
+      <View style={styles.iconContainer}>
+        <Text style={styles.iconText}>Q</Text>
+      </View>
+      <HTML
+        html={question}
+        key={Math.random()}
+        baseFontStyle={style}
+        onLinkPress={(evt, href) => {
+          Linking.openURL(href);
+        }}
+        tagsStyles={{
+          del: customTagsStyles.del,
+          ins: customTagsStyles.ins,
+          p: customTagsStyles.p,
+          li: customTagsStyles.li,
+          a: customTagsStyles.a,
+          h2: customTagsStyles.h,
+          h3: customTagsStyles.h,
+          h4: customTagsStyles.h,
+          h5: customTagsStyles.h,
+          h6: customTagsStyles.h,
+        }}
+        containerStyle={styles.htmlContainer}
+      />
+    </View>
+  );
+};
+
+TextQ.propTypes = {
+  question: PropTypes.string.isRequired,
+  answer: PropTypes.string.isRequired,
+};

package/src/components/TextQ/styles.js

@@ -0,0 +1,46 @@
+import { isRTLEnabled } from '@quintype/native-components/src/utils';
+import { StyleSheet } from 'react-native';
+
+export const textQuestionStyles = (COLORS, FONT_SIZE, lineHeightMultiplier) => StyleSheet.create({
+  container: {
+    margin: 10,
+    display:'flex',
+    flexDirection:'row',
+    alignItems:'center',
+    marginBottom:0,
+    marginTop:0
+  },
+  questionText: {
+    fontSize: FONT_SIZE.h2,
+    lineHeight: FONT_SIZE.h2 * lineHeightMultiplier,
+    color: COLORS.BRAND_BLACK,
+    opacity: 0.8,
+    textAlign: isRTLEnabled() ? 'left' : 'auto',
+  },
+  answerText: {
+    fontSize: FONT_SIZE.h2,
+    lineHeight: FONT_SIZE.h2 * lineHeightMultiplier,
+    color: COLORS.BRAND_BLACK,
+    opacity: 0.8,
+  },
+  iconContainer:{
+    borderRadius:5,
+    height:10+FONT_SIZE.h1,
+    width:10+FONT_SIZE.h1,
+    backgroundColor:COLORS.BRAND_1,
+    display:'flex',
+    justifyContent:'center',
+    alignItems:'center',
+    marginRight:5,
+    alignSelf:'flex-start'
+  },
+  iconText:{
+    fontSize:FONT_SIZE.h1,
+    color:COLORS.DYNAMIC_PRIMARY_TEXT_COLOR
+  },
+  htmlContainer:{
+    alignSelf:'flex-start',
+    marginTop:-10,
+    width:'90%'
+  }
+});

package/src/components/TextQandA/index.js

@@ -4,6 +4,8 @@ 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';
 
 export const TextQandA = ({ question, answer }) => {
   const { theme } = useContext(AppTheme);
@@ -11,8 +13,8 @@ export const TextQandA = ({ question, answer }) => {
   const styles = textQandAStyles(COLORS, FONT_SIZE, lineHeightMultiplier);
   return (
     <View testID="text-q-and-a" style={styles.container}>
-      <Text style={styles.questionText}>{question}</Text>
-      <Text style={styles.answerText}>{answer}</Text>
+      {question && <TextQ question={question}/>}
+      {answer && <TextA answer={answer}/>}
     </View>
   );
 };

package/src/components/TextQandA/styles.js

@@ -2,19 +2,6 @@ import { StyleSheet } from 'react-native';
 
 export const textQandAStyles = (COLORS, FONT_SIZE, lineHeightMultiplier) => StyleSheet.create({
   container: {
-    margin: 10,
-  },
-  questionText: {
-    fontSize: FONT_SIZE.h2,
-    fontWeight: '600',
-    lineHeight: FONT_SIZE.h2 * lineHeightMultiplier,
-    color: COLORS.BRAND_BLACK,
-    opacity: 0.8,
-  },
-  answerText: {
-    fontSize: FONT_SIZE.h2,
-    lineHeight: FONT_SIZE.h2 * lineHeightMultiplier,
-    color: COLORS.BRAND_BLACK,
-    opacity: 0.8,
-  },
+    margin: 0
+  }
 });

package/src/components/index.js

@@ -44,3 +44,6 @@ export { IconText } from './IconText';
 export { CustomSwitch } from './CustomSwitch';
 export { RelatedStoriesCard } from './RelatedStoriesCard';
 export { References } from './References';
+export { StoryCardDetailsRow } from './StoryCardDetailsRow';
+export { TextA } from './TextA'
+export { TextQ } from './TextQ'