@quintype/native-components 2.21.3 → 2.21.5

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.21.3",
+  "version": "2.21.5",
   "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/PrimaryStoryCardNew/index.js

@@ -35,7 +35,7 @@ const PrimaryStoryCardNewBase = (props) => {
 
   const translate = get(theme, ['translate'], (word) => word);
 
-  const styles = storyStyles(COLORS, FONT_SIZE, DARK_MODE, lineHeightMultiplier);
+  const styles = storyStyles(COLORS, FONT_SIZE, lineHeightMultiplier);
   const containerStyle = StyleSheet.flatten([
     styles.container,
     { paddingHorizontal: props.horizontalPadding },

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,5 @@ export { IconText } from './IconText';
 export { CustomSwitch } from './CustomSwitch';
 export { RelatedStoriesCard } from './RelatedStoriesCard';
 export { References } from './References';
+export {TextA} from './TextA'
+export {TextQ} from './TextQ'