@quintype/native-components 2.21.2 → 2.21.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quintype/native-components",
-  "version": "2.21.2",
+  "version": "2.21.4",
   "description": "",
   "main": "src/index.js",
   "scripts": {

package/src/components/PDFReader/index.js

@@ -20,7 +20,7 @@ export const PDFReader = ({ card, share }) => {
   const [modalVisible, setModalVisible] = useState(false);
 
   const { theme } = useContext(AppTheme);
-  const { COLORS, FONT_SIZE, DARK_MODE } = theme;
+  const { COLORS, FONT_SIZE, DARK_MODE, lineHeightMultiplier } = theme;
 
   const showModal = () => {
     setModalVisible(true);
@@ -30,7 +30,7 @@ export const PDFReader = ({ card, share }) => {
     setModalVisible(false);
   };
 
-  const styles = pdfStyles(COLORS, FONT_SIZE, DARK_MODE);
+  const styles = pdfStyles(COLORS, FONT_SIZE, DARK_MODE, lineHeightMultiplier);
 
   const headerStyles = StyleSheet.flatten([
     styles.header,

package/src/components/PDFReader/styles.js

@@ -1,6 +1,6 @@
 import { StyleSheet } from 'react-native';
 
-export const pdfStyles = (COLORS, FONT_SIZE, DARK_MODE) => StyleSheet.create({
+export const pdfStyles = (COLORS, FONT_SIZE, DARK_MODE, lineHeightMultiplier) => StyleSheet.create({
   container: {
     flex: 1,
   },
@@ -15,7 +15,7 @@ export const pdfStyles = (COLORS, FONT_SIZE, DARK_MODE) => StyleSheet.create({
   },
   pdfText: {
     fontSize: FONT_SIZE.h2,
-    lineHeight: FONT_SIZE.h2 * 1.5,
+    lineHeight: FONT_SIZE.h2 * lineHeightMultiplier,
     marginLeft: 5,
     color: DARK_MODE ? COLORS.BRAND_BLACK : COLORS.BRAND_1,
     fontStyle: 'italic',

package/src/components/PrimaryStoryCardNew/index.js

@@ -29,12 +29,13 @@ const PrimaryStoryCardNewBase = (props) => {
     reverseTimeAdverbPosition,
     enableReadTimeOnStoryCards,
     DATE_TIME_FORMAT,
-    premiumIcon
+    premiumIcon,
+    lineHeightMultiplier,
   } = theme || {};
 
   const translate = get(theme, ['translate'], (word) => word);
 
-  const styles = storyStyles(COLORS, FONT_SIZE, DARK_MODE);
+  const styles = storyStyles(COLORS, FONT_SIZE, lineHeightMultiplier);
   const containerStyle = StyleSheet.flatten([
     styles.container,
     { paddingHorizontal: props.horizontalPadding },

package/src/components/PrimaryStoryCardNew/styles.js

@@ -1,4 +1,4 @@
-export const storyStyles = (COLORS = {}, FONT_SIZE = {}) => ({
+export const storyStyles = (COLORS = {}, FONT_SIZE = {}, lineHeightMultiplier) => ({
   container: {
     backgroundColor: COLORS.BRAND_WHITE,
     padding: 8,
@@ -15,13 +15,13 @@ export const storyStyles = (COLORS = {}, FONT_SIZE = {}) => ({
   timestamp: {
     color: COLORS?.BRAND_BLACK,
     fontSize: FONT_SIZE.h5,
-    lineHeight: FONT_SIZE.h5 * 1.5,
+    lineHeight: FONT_SIZE.h5 * lineHeightMultiplier,
     opacity: 0.6,
     marginTop: 4,
   },
   headline: {
     fontSize: FONT_SIZE.title,
-    lineHeight: FONT_SIZE.title * 1.6,
+    lineHeight: FONT_SIZE.title * lineHeightMultiplier,
     color: COLORS.BRAND_BLACK,
     marginTop: 4,
   },

package/src/components/SecondaryStoryCardNew/styles.js

@@ -1,6 +1,6 @@
 import { StyleSheet } from 'react-native';
 
-export const storyStyles = ({ COLORS, FONT_SIZE }) => StyleSheet.create({
+export const storyStyles = ({ COLORS, FONT_SIZE, lineHeightMultiplier }) => StyleSheet.create({
   container: {
     flexDirection: 'row',
     backgroundColor: COLORS.BRAND_WHITE,
@@ -16,7 +16,7 @@ export const storyStyles = ({ COLORS, FONT_SIZE }) => StyleSheet.create({
   timestamp: {
     color: COLORS.BRAND_BLACK,
     fontSize: FONT_SIZE.h5,
-    lineHeight: FONT_SIZE.h5 * 1.5,
+    lineHeight: FONT_SIZE.h5 * lineHeightMultiplier,
     opacity: 0.6,
     marginTop: 4,
   },
@@ -24,7 +24,7 @@ export const storyStyles = ({ COLORS, FONT_SIZE }) => StyleSheet.create({
     color: COLORS.BRAND_BLACK,
     flexWrap: 'wrap',
     fontSize: FONT_SIZE.h3,
-    lineHeight: FONT_SIZE.h3 * 1.6,
+    lineHeight: FONT_SIZE.h3 * lineHeightMultiplier,
   },
   icon: {
     marginLeft: 8,

package/src/components/StoryImage/styles.js

@@ -1,7 +1,7 @@
 import { StyleSheet } from 'react-native';
 import { getImageHeight } from '../../utils';
 
-export const storyImageStyles = ({ COLORS, FONT_SIZE }, metadata = {}) => {
+export const storyImageStyles = ({ COLORS, FONT_SIZE, lineHeightMultiplier }, metadata = {}) => {
   const { width, height } = metadata || {};
   const imageHeight = getImageHeight(width, height);
 
@@ -18,13 +18,13 @@ export const storyImageStyles = ({ COLORS, FONT_SIZE }, metadata = {}) => {
     },
     cardTitleText: {
       fontSize: FONT_SIZE.h5,
-      lineHeight: FONT_SIZE.h5 * 1.5,
+      lineHeight: FONT_SIZE.h5 * lineHeightMultiplier,
       color: COLORS.BRAND_BLACK,
       marginBottom: 5,
     },
     attributionText: {
       fontSize: FONT_SIZE.h5,
-      lineHeight: FONT_SIZE.h5 * 1.5,
+      lineHeight: FONT_SIZE.h5 * lineHeightMultiplier,
       color: COLORS.BRAND_BLACK,
       marginBottom: 5,
     },

package/src/components/StoryText/index.js

@@ -12,16 +12,20 @@ import { storyTextStyles } from './styles';
 export const StoryText = (props) => {
   const { theme } = useContext(AppTheme);
   const {
-    COLORS, FONT_FAMILY, FONT_SIZE, CAN_COPY_TEXT,
+    COLORS,
+    FONT_FAMILY,
+    FONT_SIZE,
+    CAN_COPY_TEXT,
+    lineHeightMultiplier,
   } = theme;
-  const styles = storyTextStyles(COLORS, FONT_SIZE);
+  const styles = storyTextStyles(COLORS, FONT_SIZE, lineHeightMultiplier);
 
   const style = StyleSheet.flatten([
     styles.text,
     {
       fontFamily: FONT_FAMILY.secondary,
-      fontWeight: props.question ? '600' : 'normal',
-      writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr',
+      fontWeight: props.question ? "600" : "normal",
+      writingDirection: I18nManager.isRTL ? "rtl" : "ltr",
     },
   ]);
 

package/src/components/StoryText/styles.js

@@ -1,13 +1,13 @@
 import { StyleSheet } from 'react-native';
 import { isRTLEnabled } from '../../utils';
 
-export const storyTextStyles = (COLORS, FONT_SIZE) => StyleSheet.create({
+export const storyTextStyles = (COLORS, FONT_SIZE, lineHeightMultiplier) => StyleSheet.create({
   container: {
     padding: 10,
   },
   text: {
     fontSize: FONT_SIZE.h2,
-    lineHeight: FONT_SIZE.h2 * 1.5,
+    lineHeight: FONT_SIZE.h2 * lineHeightMultiplier,
     color: COLORS.BRAND_BLACK,
     textAlign: isRTLEnabled() ? 'left' : 'auto',
   },

package/src/components/StoryTitle/styles.js

@@ -1,18 +1,18 @@
 import { StyleSheet } from 'react-native';
 
-export const storyTitleStyles = ({ COLORS, FONT_SIZE }) => StyleSheet.create({
+export const storyTitleStyles = ({ COLORS, FONT_SIZE, lineHeightMultiplier }) => StyleSheet.create({
   container: {
     padding: 10,
     paddingBottom: 0,
   },
   titleStyle: {
     fontSize: FONT_SIZE.title,
-    lineHeight: FONT_SIZE.title * 1.5,
+    lineHeight: FONT_SIZE.title * lineHeightMultiplier,
     color: COLORS.BRAND_BLACK,
   },
   subTitleStyle: {
     fontSize: FONT_SIZE.h3,
-    lineHeight: FONT_SIZE.h3 * 1.5,
+    lineHeight: FONT_SIZE.h3 * lineHeightMultiplier,
     color: COLORS.BRAND_6,
     marginTop: 15,
     paddingVertical: 5,

package/src/components/TextBigFact/index.js

@@ -11,9 +11,19 @@ import { alterQuoteData } from '../../utils';
 export const TextBigFact = ({ text, attribution, id }) => {
   const { theme } = useContext(AppTheme);
   const {
-    FONT_FAMILY, COLORS, FONT_SIZE, CAN_COPY_TEXT, DARK_MODE
+    FONT_FAMILY,
+    COLORS,
+    FONT_SIZE,
+    CAN_COPY_TEXT,
+    DARK_MODE,
+    lineHeightMultiplier,
   } = theme;
-  const styles = bigTextStyles(COLORS, FONT_SIZE, DARK_MODE);
+  const styles = bigTextStyles(
+    COLORS,
+    FONT_SIZE,
+    DARK_MODE,
+    lineHeightMultiplier
+  );
   const style = StyleSheet.flatten([
     styles.bigFactText,
     {

package/src/components/TextBigFact/styles.js

@@ -1,7 +1,7 @@
 import { StyleSheet } from 'react-native';
 import { isRTLEnabled } from '../../utils';
 
-export const bigTextStyles = (COLORS, FONT_SIZE, DARK_MODE) => StyleSheet.create({
+export const bigTextStyles = (COLORS, FONT_SIZE, DARK_MODE, lineHeightMultiplier) => StyleSheet.create({
   container: {
     margin: 10,
     padding: 12,
@@ -10,14 +10,14 @@ export const bigTextStyles = (COLORS, FONT_SIZE, DARK_MODE) => StyleSheet.create
   bigFactText: {
     fontSize: FONT_SIZE.h1,
     color: DARK_MODE ? COLORS.BRAND_BLACK : COLORS.BRAND_WHITE,
-    lineHeight: FONT_SIZE.h1 * 1.5,
+    lineHeight: FONT_SIZE.h1 * lineHeightMultiplier,
     marginVertical: 10,
     textAlign: isRTLEnabled() ? 'left' : 'auto',
   },
   authorText: {
     fontSize: FONT_SIZE.h5,
     color: DARK_MODE ? COLORS.BRAND_BLACK : COLORS.BRAND_WHITE,
-    lineHeight: FONT_SIZE.h5 * 1.5,
+    lineHeight: FONT_SIZE.h5 * lineHeightMultiplier,
     textAlign: isRTLEnabled() ? 'left' : 'auto',
   },
 });

package/src/components/TextBlockQuote/index.js

@@ -12,9 +12,9 @@ import { alterQuoteData } from '../../utils';
 export const TextBlockQuote = ({ text, attribution }) => {
   const { theme } = useContext(AppTheme);
   const {
-    FONT_FAMILY, FONT_SIZE, COLORS, CAN_COPY_TEXT, DARK_MODE,
+    FONT_FAMILY, FONT_SIZE, COLORS, CAN_COPY_TEXT, DARK_MODE, lineHeightMultiplier
   } = theme;
-  const styles = blockQuoteTextStyles(FONT_SIZE, COLORS, DARK_MODE);
+  const styles = blockQuoteTextStyles(FONT_SIZE, COLORS, DARK_MODE, lineHeightMultiplier);
   const style = StyleSheet.flatten([
     styles.blockQuoteText,
     {

package/src/components/TextBlockQuote/styles.js

@@ -1,7 +1,7 @@
 import { StyleSheet } from 'react-native';
 import { isRTLEnabled } from '../../utils';
 
-export const blockQuoteTextStyles = (FONT_SIZE, COLORS, DARK_MODE) => StyleSheet.create({
+export const blockQuoteTextStyles = (FONT_SIZE, COLORS, DARK_MODE, lineHeightMultiplier) => StyleSheet.create({
   container: {
     margin: 10,
     padding: 12,
@@ -10,14 +10,14 @@ export const blockQuoteTextStyles = (FONT_SIZE, COLORS, DARK_MODE) => StyleSheet
   blockQuoteText: {
     fontSize: FONT_SIZE.h1,
     color: DARK_MODE ? COLORS.BRAND_BLACK : COLORS.BRAND_WHITE,
-    lineHeight: FONT_SIZE.h1 * 1.5,
+    lineHeight: FONT_SIZE.h1 * lineHeightMultiplier,
     marginVertical: 10,
     textAlign: isRTLEnabled() ? 'left' : 'auto',
   },
   authorText: {
     fontSize: FONT_SIZE.h5,
     color: DARK_MODE ? COLORS.BRAND_BLACK : COLORS.BRAND_WHITE,
-    lineHeight: FONT_SIZE.h5 * 1.5,
+    lineHeight: FONT_SIZE.h5 * lineHeightMultiplier,
     textAlign: isRTLEnabled() ? 'left' : 'auto',
   },
   topBorderContainer: {

package/src/components/TextBlurb/index.js

@@ -9,9 +9,9 @@ import { customHTMLStyles } from '../../constants/renderHTML';
 export const TextBlurb = ({ text }) => {
   const { theme } = useContext(AppTheme);
   const {
-    FONT_FAMILY, COLORS, FONT_SIZE, CAN_COPY_TEXT,
+    FONT_FAMILY, COLORS, FONT_SIZE, CAN_COPY_TEXT, lineHeightMultiplier,
   } = theme;
-  const styles = textBlurbStyles(FONT_SIZE);
+  const styles = textBlurbStyles(FONT_SIZE, lineHeightMultiplier);
   const style = StyleSheet.flatten([
     styles.blurbText,
     {

package/src/components/TextBlurb/styles.js

@@ -1,7 +1,7 @@
 import { StyleSheet } from 'react-native';
 import { isRTLEnabled } from '../../utils';
 
-export const textBlurbStyles = (FONT_SIZE) => StyleSheet.create({
+export const textBlurbStyles = (FONT_SIZE, lineHeightMultiplier) => StyleSheet.create({
   container: {
     margin: 10,
     borderLeftWidth: 3,
@@ -9,7 +9,7 @@ export const textBlurbStyles = (FONT_SIZE) => StyleSheet.create({
   },
   blurbText: {
     fontSize: FONT_SIZE.h3,
-    lineHeight: FONT_SIZE.h3 * 1.5,
+    lineHeight: FONT_SIZE.h3 * lineHeightMultiplier,
     textAlign: isRTLEnabled() ? 'left' : 'auto',
   },
 });

package/src/components/TextQandA/index.js

@@ -7,8 +7,8 @@ import { AppTheme } from '../../utils/context';
 
 export const TextQandA = ({ question, answer }) => {
   const { theme } = useContext(AppTheme);
-  const { COLORS, FONT_SIZE } = theme;
-  const styles = textQandAStyles(COLORS, FONT_SIZE);
+  const { COLORS, FONT_SIZE, lineHeightMultiplier } = theme;
+  const styles = textQandAStyles(COLORS, FONT_SIZE, lineHeightMultiplier);
   return (
     <View testID="text-q-and-a" style={styles.container}>
       <Text style={styles.questionText}>{question}</Text>

package/src/components/TextQandA/styles.js

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

package/src/components/TextQuote/index.js

@@ -13,9 +13,9 @@ import { alterQuoteData } from '../../utils';
 export const TextQuote = ({ text, attribution }) => {
   const { theme } = useContext(AppTheme);
   const {
-    FONT_FAMILY, COLORS, FONT_SIZE, CAN_COPY_TEXT,
+    FONT_FAMILY, COLORS, FONT_SIZE, CAN_COPY_TEXT, lineHeightMultiplier,
   } = theme;
-  const styles = textQuoteStyles(COLORS, FONT_SIZE);
+  const styles = textQuoteStyles(COLORS, FONT_SIZE, lineHeightMultiplier);
 
   const customTagsStyles = customHTMLStyles();
 

package/src/components/TextQuote/styles.js

@@ -1,7 +1,7 @@
 import { StyleSheet } from 'react-native';
 import { isRTLEnabled } from '../../utils';
 
-export const textQuoteStyles = (COLORS, FONT_SIZE) => StyleSheet.create({
+export const textQuoteStyles = (COLORS, FONT_SIZE, lineHeightMultiplier) => StyleSheet.create({
   container: {
     padding: 10,
   },
@@ -14,18 +14,18 @@ export const textQuoteStyles = (COLORS, FONT_SIZE) => StyleSheet.create({
   quoteContent: {
     color: COLORS.BRAND_BLACK,
     fontSize: FONT_SIZE.h2,
-    lineHeight: FONT_SIZE.h2 * 1.5,
+    lineHeight: FONT_SIZE.h2 * lineHeightMultiplier,
   },
   quoteText: {
     fontSize: FONT_SIZE.h1,
-    lineHeight: FONT_SIZE.h1 * 1.5,
+    lineHeight: FONT_SIZE.h1 * lineHeightMultiplier,
     color: COLORS.BRAND_BLACK,
     opacity: 0.9,
     textAlign: isRTLEnabled() ? 'left' : 'auto',
   },
   attributionText: {
     fontSize: FONT_SIZE.h3,
-    lineHeight: FONT_SIZE.h3 * 1.5,
+    lineHeight: FONT_SIZE.h3 * lineHeightMultiplier,
     color: COLORS.BRAND_BLACK,
     alignItems: 'flex-end',
     textAlign: isRTLEnabled() ? 'left' : 'auto',

package/src/components/TextSummary/index.js

@@ -11,9 +11,9 @@ import { AppTheme } from '../../utils/context';
 export const TextSummary = (props) => {
   const { theme } = useContext(AppTheme);
   const {
-    FONT_FAMILY, FONT_SIZE, COLORS, CAN_COPY_TEXT,
+    FONT_FAMILY, FONT_SIZE, COLORS, CAN_COPY_TEXT, lineHeightMultiplier,
   } = theme;
-  const styles = textSummaryStyles(FONT_SIZE, COLORS);
+  const styles = textSummaryStyles(FONT_SIZE, COLORS, lineHeightMultiplier);
   const style = StyleSheet.flatten([
     styles.summaryContent,
     {

package/src/components/TextSummary/styles.js

@@ -1,7 +1,7 @@
 import { StyleSheet } from 'react-native';
 import { isRTLEnabled } from '../../utils';
 
-export const textSummaryStyles = (FONT_SIZE, COLORS) => StyleSheet.create({
+export const textSummaryStyles = (FONT_SIZE, COLORS, lineHeightMultiplier) => StyleSheet.create({
   container: {
     padding: 10,
   },
@@ -14,7 +14,7 @@ export const textSummaryStyles = (FONT_SIZE, COLORS) => StyleSheet.create({
   summaryContent: {
     color: COLORS.BRAND_6,
     fontSize: FONT_SIZE.h2,
-    lineHeight: FONT_SIZE.h2 * 1.5,
+    lineHeight: FONT_SIZE.h2 * lineHeightMultiplier,
     textAlign: isRTLEnabled() ? 'left' : 'auto',
   },
   summaryText: {