@quintype/native-components 2.19.20 → 2.19.26

package/CHANGELOG.md

@@ -2,6 +2,23 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [2.19.26](https://github.com/quintype/native-components/compare/v2.19.25...v2.19.26) (2022-12-16)
+
+### [2.19.25](https://github.com/quintype/native-components/compare/v2.19.24...v2.19.25) (2022-12-07)
+
+### [2.19.24](https://github.com/quintype/native-components/compare/v2.19.23...v2.19.24) (2022-12-06)
+
+### [2.19.23](https://github.com/quintype/native-components/compare/v2.19.22...v2.19.23) (2022-12-06)
+
+### [2.19.22](https://github.com/quintype/native-components/compare/v2.19.21...v2.19.22) (2022-12-06)
+
+### [2.19.21](https://github.com/quintype/native-components/compare/v2.19.20...v2.19.21) (2022-11-18)
+
+
+### Bug Fixes
+
+* **fonts:** Fixes fonts for CollectionTitle and Caption/Attribution HTML 🔨  ([#188](https://github.com/quintype/native-components/issues/188)) ([94c61ff](https://github.com/quintype/native-components/commit/94c61ff385df2225f6a3d1b14c1f5d2ce3a1ed89))
+
 ### [2.19.20](https://github.com/quintype/native-components/compare/v2.19.19...v2.19.20) (2022-11-07)
 
 

package/package.json

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

package/src/components/CollectionTitleNew/styles.js

@@ -13,7 +13,6 @@ export const collectionTitleStyles = (appThemeContext) => {
     },
     title: {
       fontSize: FONT_SIZE.h3,
-      fontWeight: 'bold',
       color: COLORS.BRAND_5,
     },
   });

package/src/components/PDFReader/styles.js

@@ -43,5 +43,6 @@ export const pdfStyles = (COLORS, FONT_SIZE, DARK_MODE) => StyleSheet.create({
     width: '20%',
     justifyContent: 'center',
     alignItems: 'center',
+    margin : 10
   },
 });

package/src/components/PrimaryStoryCard/index.js

@@ -24,7 +24,7 @@ export const PrimaryStoryCard = (props) => {
 
   const translate = get(theme, ["translate"], (word) => word);
 
-  const { COLORS, FONT_SIZE, locale } = theme || {};
+  const { COLORS, FONT_SIZE, locale, reverseTimeAdverbPosition } = theme || {};
 
   const DATE_FORMAT = "d MMM, yyyy";
 
@@ -110,7 +110,8 @@ export const PrimaryStoryCard = (props) => {
             story["published-at"],
             DATE_FORMAT,
             locale,
-            translate
+            translate,
+            reverseTimeAdverbPosition
           )}
       </Text>
       <Text

package/src/components/PrimaryStoryCardNew/index.js

@@ -21,7 +21,7 @@ const PrimaryStoryCardNewBase = (props) => {
   const { story = {} } = props;
   const { theme } = useContext(AppTheme);
   const {
-    COLORS, FONT_SIZE, locale, DARK_MODE,
+    COLORS, FONT_SIZE, locale, DARK_MODE, reverseTimeAdverbPosition,
   } = theme || {};
 
   const translate = get(theme, ['translate'], (word) => word);
@@ -111,6 +111,7 @@ const PrimaryStoryCardNewBase = (props) => {
                 DATE_FORMAT,
                 locale,
                 translate,
+                reverseTimeAdverbPosition,
               )}
           </Text>
         </View>

package/src/components/SecondaryStoryCard/index.js

@@ -29,7 +29,7 @@ export const SecondaryStoryCard = (props) => {
   const { theme } = useContext(AppTheme);
   const translate = get(theme, ["translate"], (word) => word);
 
-  const { locale, COLORS } = theme;
+  const { locale, COLORS, reverseTimeAdverbPosition } = theme;
   const styles = secStoryCardStyles(theme);
   const { story = {} } = props;
 
@@ -131,7 +131,8 @@ export const SecondaryStoryCard = (props) => {
                 story["published-at"],
                 DATE_FORMAT,
                 locale,
-                translate
+                translate,
+                reverseTimeAdverbPosition
               )}
           </Text>
           <View style={iconStyles}>{props.iconComponent}</View>

package/src/components/SecondaryStoryCardNew/index.js

@@ -27,7 +27,7 @@ import {
 const SecondaryStoryCardNewBase = (props) => {
   const { story = {} } = props;
   const { theme } = useContext(AppTheme);
-  const { locale, DARK_MODE, COLORS } = theme;
+  const { locale, DARK_MODE, COLORS, reverseTimeAdverbPosition } = theme;
 
   const translate = get(theme, ["translate"], (word) => word);
 
@@ -116,7 +116,8 @@ const SecondaryStoryCardNewBase = (props) => {
               story["published-at"],
               DATE_FORMAT,
               locale,
-              translate
+              translate,
+              reverseTimeAdverbPosition
             )}
         </Text>
       </View>

package/src/components/SlideshowStoryCard/styles.js

@@ -1,5 +1,5 @@
 import { StyleSheet, Dimensions } from 'react-native';
-
+import { COMP_GENERAL_CONSTANTS }  from '../../constants/component-constants/general-constants/constants'
 const { width } = Dimensions.get('window');
 
 export const slideshowStoryCardStyles = ({ COLORS }) => {
@@ -21,7 +21,8 @@ export const slideshowStoryCardStyles = ({ COLORS }) => {
       flexDirection: 'column',
     },
     attributionText: {
-      color: COLORS.BRAND_BLACK
+      color: COLORS.BRAND_BLACK,
+      textAlign : COMP_GENERAL_CONSTANTS.textAlignment
     }
   })
 }

package/src/components/StoryHeader/index.js

@@ -69,8 +69,10 @@ export const StoryHeader = (props) => {
   const { story } = props;
   const sectionData = get(story, ['sections', 0], {});
   const { theme } = useContext(AppTheme);
-  const { COLORS, CAN_COPY_TEXT, locale } = theme;
-  const styles = storyHeaderStyles(COLORS);
+  const {
+    COLORS, CAN_COPY_TEXT, locale, FONT_FAMILY,
+  } = theme;
+  const styles = storyHeaderStyles(COLORS, FONT_FAMILY);
   const imgCaption = story['hero-image-caption'];
   const attri = story['hero-image-attribution'];
   const imgAttribution = imgCaption && attri ? ` | ${attri}` : attri;

package/src/components/StoryHeader/styles.js

@@ -1,6 +1,6 @@
 import { StyleSheet } from 'react-native';
 
-export const storyHeaderStyles = (COLORS) => StyleSheet.create({
+export const storyHeaderStyles = (COLORS, FONT_FAMILY) => StyleSheet.create({
   tagStyle: {
     padding: 10,
     backgroundColor: COLORS.BRAND_7,
@@ -29,10 +29,12 @@ export const storyHeaderStyles = (COLORS) => StyleSheet.create({
     padding: 10,
     paddingBottom: 0,
     color: COLORS.BRAND_BLACK,
+    fontFamily: FONT_FAMILY.secondary,
     opacity: 0.8,
   },
   attributionStyle: {
     color: COLORS.BRAND_BLACK,
+    fontFamily: FONT_FAMILY.secondary,
     opacity: 0.8,
   },
   captionContainerStyle: {

package/src/components/StoryText/styles.js

@@ -1,4 +1,5 @@
 import { StyleSheet } from 'react-native';
+import { COMP_GENERAL_CONSTANTS } from '../../constants/component-constants/general-constants/constants';
 
 export const storyTextStyles = (COLORS, FONT_SIZE) => StyleSheet.create({
   container: {
@@ -8,5 +9,6 @@ export const storyTextStyles = (COLORS, FONT_SIZE) => StyleSheet.create({
     fontSize: FONT_SIZE.h2,
     lineHeight: FONT_SIZE.h2 * 1.5,
     color: COLORS.BRAND_8,
+    textAlign: COMP_GENERAL_CONSTANTS.textAlignment,
   },
 });

package/src/components/TextBigFact/index.js

@@ -40,8 +40,7 @@ export const TextBigFact = ({ text, attribution, id }) => {
       />
       {!!attribution && (
         <Text style={styles.authorText}>
-          -
-          {attribution}
+          {`- ${attribution}`}
         </Text>
       )}
     </View>

package/src/components/TextBigFact/styles.js

@@ -1,4 +1,5 @@
 import { StyleSheet } from 'react-native';
+import { COMP_GENERAL_CONSTANTS }  from '../../constants/component-constants/general-constants/constants'
 
 export const bigTextStyles = (COLORS, FONT_SIZE, DARK_MODE) => StyleSheet.create({
   container: {
@@ -16,5 +17,6 @@ export const bigTextStyles = (COLORS, FONT_SIZE, DARK_MODE) => StyleSheet.create
     fontSize: FONT_SIZE.h5,
     color: DARK_MODE ? COLORS.BRAND_BLACK : COLORS.BRAND_WHITE,
     lineHeight: FONT_SIZE.h5 * 1.3,
+    textAlign : COMP_GENERAL_CONSTANTS.textAlignment
   },
 });

package/src/components/TextBlockQuote/index.js

@@ -26,8 +26,10 @@ export const TextBlockQuote = ({ text, attribution }) => {
 
   return (
     <View testID="text-block-quote" style={styles.container}>
-      <Icon name="quote-left" size={46} color={DARK_MODE ? COLORS.BRAND_BLACK : COLORS.BRAND_WHITE} />
-      <HTML
+      <View style={styles.topBorderContainer}>
+        <Icon name="quote-left" size={46} color={DARK_MODE ? COLORS.BRAND_BLACK : COLORS.BRAND_WHITE} />
+      </View>
+     <HTML
         alterData={alterQuoteData}
         html={text}
         textSelectable={CAN_COPY_TEXT}
@@ -44,8 +46,7 @@ export const TextBlockQuote = ({ text, attribution }) => {
       />
       {!!attribution && (
       <Text style={styles.authorText}>
-        -
-        {attribution}
+       {`- ${attribution}`}
       </Text>
       )}
     </View>

package/src/components/TextBlockQuote/styles.js

@@ -1,4 +1,5 @@
 import { StyleSheet } from 'react-native';
+import { COMP_GENERAL_CONSTANTS } from '../../constants/component-constants/general-constants/constants';
 
 export const blockQuoteTextStyles = (FONT_SIZE, COLORS, DARK_MODE) => StyleSheet.create({
   container: {
@@ -11,10 +12,17 @@ export const blockQuoteTextStyles = (FONT_SIZE, COLORS, DARK_MODE) => StyleSheet
     color: DARK_MODE ? COLORS.BRAND_BLACK : COLORS.BRAND_WHITE,
     lineHeight: FONT_SIZE.h1 * 1.3,
     marginVertical: 10,
+    textAlign: COMP_GENERAL_CONSTANTS.textAlignment,
   },
   authorText: {
     fontSize: FONT_SIZE.h5,
     color: DARK_MODE ? COLORS.BRAND_BLACK : COLORS.BRAND_WHITE,
     lineHeight: FONT_SIZE.h5 * 1.3,
+    textAlign: COMP_GENERAL_CONSTANTS.textAlignment,
+  },
+  topBorderContainer: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    marginBottom: 8,
   },
 });

package/src/components/TextBlurb/styles.js

@@ -1,4 +1,5 @@
 import { StyleSheet } from 'react-native';
+import { COMP_GENERAL_CONSTANTS }  from '../../constants/component-constants/general-constants/constants'
 
 export const textBlurbStyles = (FONT_SIZE) => StyleSheet.create({
   container: {
@@ -9,5 +10,6 @@ export const textBlurbStyles = (FONT_SIZE) => StyleSheet.create({
   blurbText: {
     fontSize: FONT_SIZE.h3,
     lineHeight: FONT_SIZE.h3 * 1.3,
+    textAlign : COMP_GENERAL_CONSTANTS.textAlignment
   },
 });

package/src/components/TextQuote/styles.js

@@ -1,4 +1,5 @@
 import { StyleSheet } from 'react-native';
+import { COMP_GENERAL_CONSTANTS } from '../../constants/component-constants/general-constants/constants';
 
 export const textQuoteStyles = (COLORS, FONT_SIZE) => StyleSheet.create({
   container: {
@@ -19,14 +20,15 @@ export const textQuoteStyles = (COLORS, FONT_SIZE) => StyleSheet.create({
     fontSize: FONT_SIZE.h1,
     lineHeight: FONT_SIZE.h1 * 1.3,
     color: COLORS.BRAND_BLACK,
-    opacity: 0.9
+    opacity: 0.9,
+    textAlign: COMP_GENERAL_CONSTANTS.textAlignment,
   },
   attributionText: {
     fontSize: FONT_SIZE.h3,
     lineHeight: FONT_SIZE.h3 * 1.3,
     color: COLORS.BRAND_BLACK,
     alignItems: 'flex-end',
-    textAlign: 'right',
+    textAlign: COMP_GENERAL_CONSTANTS.textAlignment,
   },
   quoteTopBorder: {
     backgroundColor: COLORS.BRAND_1,
@@ -43,5 +45,6 @@ export const textQuoteStyles = (COLORS, FONT_SIZE) => StyleSheet.create({
     marginVertical: 10,
     alignSelf: 'flex-end',
     flexDirection: 'row',
+    width: '100%',
   },
 });

package/src/components/TextSummary/styles.js

@@ -1,4 +1,5 @@
 import { StyleSheet } from 'react-native';
+import { COMP_GENERAL_CONSTANTS }  from '../../constants/component-constants/general-constants/constants'
 
 export const textSummaryStyles = (FONT_SIZE, COLORS) => StyleSheet.create({
   container: {
@@ -14,6 +15,7 @@ export const textSummaryStyles = (FONT_SIZE, COLORS) => StyleSheet.create({
     color: COLORS.BRAND_6,
     fontSize: FONT_SIZE.h2,
     lineHeight: FONT_SIZE.h2 * 1.3,
+    textAlign: COMP_GENERAL_CONSTANTS.textAlignment
   },
   summaryText: {
     color: COLORS.BRAND_1,

package/src/constants/component-constants/general-constants/constants.js

@@ -1,3 +1,5 @@
+import { I18nManager } from 'react-native';
+
 export const COMP_GENERAL_CONSTANTS = {
   secondaryStoryCard: "COMP_GENERAL_SECONDARY_STORY",
   primaryStoryCard: "COMP_GENERAL_PRIMARY_STORY",
@@ -21,4 +23,5 @@ export const COMP_GENERAL_CONSTANTS = {
   headerLogoTouch: "COMP_GENERAL_HEADER_LOGO_TOUCH",
   radioButtonTouch: "COMP_GENERAL_RADIO",
   shareButtonTouch: "COMP_GENERAL_SHARE",
+  textAlignment: I18nManager.isRTL ? 'left' : 'right',
 };

package/src/utils/timeUtils.js

@@ -1,9 +1,9 @@
-import { formatDistanceToNow, differenceInMinutes, format as dateFormat } from 'date-fns';
+import { formatDistanceToNowStrict, differenceInMinutes, format as dateFormat } from 'date-fns';
 import * as dateFNSlocale from 'date-fns/locale';
 
 export function getTimeAgo(date) {
   if (date) {
-    return formatDistanceToNow(new Date(date));
+    return formatDistanceToNowStrict(new Date(date));
   }
   return '';
 }
@@ -15,16 +15,25 @@ export function getTimeInFormat(date, format, localTime) {
   return '';
 }
 
-export const getTimeForStoryCards = (date, format, localTime, translate) => {
+export const getTimeForStoryCards = (
+  date,
+  format,
+  localTime,
+  translate,
+  reverseTimeAdverbPosition = false
+) => {
   if (date) {
     const currentDate = new Date();
     const dateToFormat = new Date(date);
     const locale = dateFNSlocale[localTime];
     const distanceInMinutes = differenceInMinutes(currentDate, dateToFormat);
     if (distanceInMinutes <= 1440) {
-      return `${translate("published")} ${formatDistanceToNow(dateToFormat, { locale })} ${translate("ago")}`;
+      const timeDistance = formatDistanceToNowStrict(dateToFormat, { locale });
+      return reverseTimeAdverbPosition
+        ? translate("ago") + timeDistance
+        : timeDistance + translate("ago");
     }
     return dateFormat(dateToFormat, format, { locale });
   }
-  return '';
+  return "";
 };