@quintype/native-components 2.19.27 → 2.19.29-ui-toggles.0

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 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.28](https://github.com/quintype/native-components/compare/v2.19.27...v2.19.28) (2022-12-28)
+
 ### [2.19.27](https://github.com/quintype/native-components/compare/v2.19.26...v2.19.27) (2022-12-16)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quintype/native-components",
-  "version": "2.19.27",
+  "version": "2.19.29-ui-toggles.0",
   "description": "",
   "main": "src/index.js",
   "scripts": {

package/src/components/CollectionCard/index.js

@@ -17,17 +17,21 @@ export const CollectionCard = ({
   onStoryPress,
   offset,
   horizontalPadding,
-  initialOffset /* Number of items to load on first load */,
+  initialOffset, /* Number of items to load on first load */
+  hideCollectionTitle,
 }) => {
   const sliceLimit = offset || initialOffset || 5;
   const primaryStory = !isEmpty(stories) && get(stories, [0, 'story'], stories[0]);
   return (
     <>
+      {!hideCollectionTitle
+      && (
       <CollectionTitle
         title={collectionName}
         onPress={onCollectionPress}
         horizontalPadding={horizontalPadding}
       />
+      )}
       <PrimaryStoryCard
         onPress={() => {
           !isEmpty(stories) && onStoryPress(primaryStory);
@@ -62,6 +66,7 @@ CollectionCard.propTypes = {
   onStoryPress: PropTypes.func,
   offset: PropTypes.number,
   horizontalPadding: PropTypes.number,
+  hideCollectionTitle: PropTypes.bool,
 };
 
 CollectionCard.defaultProps = {

package/src/components/CollectionCardNew/index.js

@@ -19,18 +19,21 @@ const CollectionCardNewBase = ({
   collectionTestID,
   offset,
   horizontalPadding,
-  initialOffset /* Number of items to load on first load */,
+  initialOffset, /* Number of items to load on first load */
+  hideCollectionTitle,
 }) => {
   const sliceLimit = offset || initialOffset || 5;
   const primaryStory = !isEmpty(stories) && get(stories, [0, 'story'], stories[0]);
 
   return (
     <>
+      {!hideCollectionTitle && (
       <CollectionTitleNew
         title={collectionName}
         onPress={onCollectionPress}
         horizontalPadding={horizontalPadding}
       />
+      )}
       <PrimaryStoryCardNew
         collectionTestID={collectionTestID}
         onPress={() => {
@@ -71,6 +74,7 @@ CollectionCardNewBase.propTypes = {
   onStoryPress: PropTypes.func,
   collectionTestID: PropTypes.string,
   horizontalPadding: PropTypes.number,
+  hideCollectionTitle: PropTypes.bool,
 };
 
 CollectionCardNewBase.defaultProps = {

package/src/components/PrimaryStoryCard/index.js

@@ -1,32 +1,38 @@
-import { throttle } from "lodash";
-import get from "lodash/get";
-import PropTypes from "prop-types";
-import React, { useContext } from "react";
-import { StyleSheet, TouchableOpacity, View } from "react-native";
-import Icon from "react-native-vector-icons/FontAwesome";
+import { throttle } from 'lodash';
+import get from 'lodash/get';
+import PropTypes from 'prop-types';
+import React, { useContext } from 'react';
+import { StyleSheet, TouchableOpacity, View } 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 } from "../index";
-import { storyStyles } from "./styles";
+} from '../../utils';
+import { getStoryHeadline } from '../../utils/story';
+import { ResponsiveImage, Text } from '../index';
+import { storyStyles } from './styles';
 import {
   COMP_GENERAL_CONSTANTS,
   COMP_CONTENT_CONSTANTS,
-} from "../../constants/component-constants";
+} from '../../constants/component-constants';
 
 export const PrimaryStoryCard = (props) => {
   const { story = {} } = props;
   const { theme } = useContext(AppTheme);
 
-  const translate = get(theme, ["translate"], (word) => word);
+  const translate = get(theme, ['translate'], (word) => word);
 
-  const { COLORS, FONT_SIZE, locale, reverseTimeAdverbPosition } = theme || {};
+  const {
+    COLORS,
+    FONT_SIZE,
+    locale,
+    reverseTimeAdverbPosition,
+    enableReadTimeOnStoryCards,
+  } = theme || {};
 
-  const DATE_FORMAT = "d MMM, yyyy";
+  const DATE_FORMAT = 'd MMM, yyyy';
 
   const styles = storyStyles(COLORS, FONT_SIZE);
   const containerStyle = StyleSheet.flatten([
@@ -42,11 +48,11 @@ export const PrimaryStoryCard = (props) => {
     props.authorTextStyle,
   ]);
 
-  const name = get(story.authors, [0, "name"]);
-  const authorName = name ? `${translate("By")} ${name} | ` : "";
-  const readTime = story["read-time"]
-    ? `${story["read-time"]} ${translate("min read")}`
-    : "";
+  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);
 
@@ -63,14 +69,14 @@ export const PrimaryStoryCard = (props) => {
     </View>
   );
   const showStoryType = () => {
-    switch (story["story-template"]) {
-      case "text":
+    switch (story['story-template']) {
+      case 'text':
         return null;
-      case "photo":
-        return showIcon("photo");
-      case "video":
-        return showIcon("play");
-      case "live-blog":
+      case 'photo':
+        return showIcon('photo');
+      case 'video':
+        return showIcon('play');
+      case 'live-blog':
         return showLiveBlogIcon();
       default:
         null;
@@ -105,13 +111,13 @@ export const PrimaryStoryCard = (props) => {
         // TODO: Add corrected testID here
         testID={COMP_CONTENT_CONSTANTS.authorName}
       >
-        {authorName +
-          getTimeForStoryCards(
-            story["published-at"],
+        {authorName
+          + getTimeForStoryCards(
+            story['published-at'],
             DATE_FORMAT,
             locale,
             translate,
-            reverseTimeAdverbPosition
+            reverseTimeAdverbPosition,
           )}
       </Text>
       <Text
@@ -138,6 +144,6 @@ PrimaryStoryCard.propTypes = {
 };
 
 PrimaryStoryCard.defaultProps = {
-  cdn: "",
+  cdn: '',
   horizontalPadding: 12,
 };

package/src/components/PrimaryStoryCardNew/index.js

@@ -21,7 +21,12 @@ const PrimaryStoryCardNewBase = (props) => {
   const { story = {} } = props;
   const { theme } = useContext(AppTheme);
   const {
-    COLORS, FONT_SIZE, locale, DARK_MODE, reverseTimeAdverbPosition,
+    COLORS,
+    FONT_SIZE,
+    locale,
+    DARK_MODE,
+    reverseTimeAdverbPosition,
+    enableReadTimeOnStoryCards,
   } = theme || {};
 
   const translate = get(theme, ['translate'], (word) => word);
@@ -41,7 +46,7 @@ const PrimaryStoryCardNewBase = (props) => {
   ]);
 
   const DATE_FORMAT = 'd MMM, yyyy';
-  const readTime = story['read-time']
+  const readTime = enableReadTimeOnStoryCards && story['read-time']
     ? `${story['read-time']} ${translate('min read')} · `
     : '';
 

package/src/components/SecondaryStoryCard/index.js

@@ -1,7 +1,7 @@
-import { throttle } from "lodash";
-import get from "lodash/get";
-import PropTypes from "prop-types";
-import React, { useContext } from "react";
+import { throttle } from 'lodash';
+import get from 'lodash/get';
+import PropTypes from 'prop-types';
+import React, { useContext } from 'react';
 import {
   Image,
   StyleSheet,
@@ -9,31 +9,36 @@ import {
   View,
   TextStyle,
   TouchableOpacityProps,
-} from "react-native";
-import Icon from "react-native-vector-icons/FontAwesome";
+} 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 } from "../index";
-import { secStoryCardStyles } from "./styles";
+} from '../../utils';
+import { getStoryHeadline } from '../../utils/story';
+import { ResponsiveImage, Text } from '../index';
+import { secStoryCardStyles } from './styles';
 import {
   COMP_GENERAL_CONSTANTS,
   COMP_CONTENT_CONSTANTS,
-} from "../../constants/component-constants";
+} from '../../constants/component-constants';
 
 export const SecondaryStoryCard = (props) => {
   const { theme } = useContext(AppTheme);
-  const translate = get(theme, ["translate"], (word) => word);
+  const translate = get(theme, ['translate'], (word) => word);
 
-  const { locale, COLORS, reverseTimeAdverbPosition } = theme;
+  const {
+    locale,
+    COLORS,
+    reverseTimeAdverbPosition,
+    enableReadTimeOnStoryCards,
+  } = theme;
   const styles = secStoryCardStyles(theme);
   const { story = {} } = props;
 
-  const DATE_FORMAT = "d MMM, yyyy";
+  const DATE_FORMAT = 'd MMM, yyyy';
 
   const containerStyle = StyleSheet.flatten([
     styles.container,
@@ -48,15 +53,12 @@ export const SecondaryStoryCard = (props) => {
     props.dateTextStyle,
   ]);
   const iconStyles = StyleSheet.flatten([styles.iconStyles, props.iconStyle]);
-  const authorTextContainerStyle = StyleSheet.flatten([
-    styles.authorTextContainer,
-    props.authorTextContainer,
-  ]);
-  const name = get(story.authors, [0, "name"]);
-  const authorName = name ? `${translate("By")} ${name} | ` : "";
-  const readTime = story["read-time"]
-    ? `${story["read-time"]} ${translate("min read")}`
-    : "";
+
+  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);
 
@@ -74,14 +76,14 @@ export const SecondaryStoryCard = (props) => {
   );
 
   const showStoryType = () => {
-    switch (story["story-template"]) {
-      case "text":
+    switch (story['story-template']) {
+      case 'text':
         return null;
-      case "photo":
-        return showIcon("photo");
-      case "video":
-        return showIcon("play");
-      case "live-blog":
+      case 'photo':
+        return showIcon('photo');
+      case 'video':
+        return showIcon('play');
+      case 'live-blog':
         return showLiveBlogIcon();
       default:
         null;
@@ -97,8 +99,8 @@ export const SecondaryStoryCard = (props) => {
     >
       <ResponsiveImage
         metaData={getImageMetadata(story)}
-        slug={getImageSlug(story) || ""}
-        cdn={props.cdn || ""}
+        slug={getImageSlug(story) || ''}
+        cdn={props.cdn || ''}
         imageWidth={props.imageWidth}
       >
         <Text style={styles.xminContainer}>
@@ -126,13 +128,13 @@ export const SecondaryStoryCard = (props) => {
             numberOfLines={2}
             testID={COMP_CONTENT_CONSTANTS.authorName}
           >
-            {authorName +
-              getTimeForStoryCards(
-                story["published-at"],
+            {authorName
+              + getTimeForStoryCards(
+                story['published-at'],
                 DATE_FORMAT,
                 locale,
                 translate,
-                reverseTimeAdverbPosition
+                reverseTimeAdverbPosition,
               )}
           </Text>
           <View style={iconStyles}>{props.iconComponent}</View>
@@ -154,6 +156,6 @@ SecondaryStoryCard.propTypes = TouchableOpacityProps && {
 };
 
 SecondaryStoryCard.defaultProps = {
-  cdn: "",
+  cdn: '',
   horizontalPadding: 12,
 };

package/src/components/SecondaryStoryCardNew/index.js

@@ -1,35 +1,40 @@
-import { get, throttle } from "lodash";
-import PropTypes from "prop-types";
-import React, { useContext, memo } from "react";
+import { get, throttle } from 'lodash';
+import PropTypes from 'prop-types';
+import React, { useContext, memo } from 'react';
 import {
-  I18nManager,
   StyleSheet,
   TouchableOpacity,
   View,
   TextStyle,
   TouchableOpacityProps,
-} from "react-native";
-import Icon from "react-native-vector-icons/FontAwesome";
+} 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 } from "../index";
-import { storyStyles } from "./styles";
+} from '../../utils';
+import { getStoryHeadline } from '../../utils/story';
+import { ResponsiveImage, Text } from '../index';
+import { storyStyles } from './styles';
 import {
   COMP_GENERAL_CONSTANTS,
   COMP_CONTENT_CONSTANTS,
-} from "../../constants/component-constants";
+} from '../../constants/component-constants';
 
 const SecondaryStoryCardNewBase = (props) => {
   const { story = {} } = props;
   const { theme } = useContext(AppTheme);
-  const { locale, DARK_MODE, COLORS, reverseTimeAdverbPosition } = theme;
+  const {
+    locale,
+    DARK_MODE,
+    COLORS,
+    reverseTimeAdverbPosition,
+    enableReadTimeOnStoryCards,
+  } = theme;
 
-  const translate = get(theme, ["translate"], (word) => word);
+  const translate = get(theme, ['translate'], (word) => word);
 
   const styles = storyStyles(theme, DARK_MODE);
   const containerStyle = StyleSheet.flatten([
@@ -45,10 +50,10 @@ const SecondaryStoryCardNewBase = (props) => {
     props.timestampStyle,
   ]);
 
-  const DATE_FORMAT = "d MMM, yyyy";
-  const readTime = story["read-time"]
-    ? `${story["read-time"]} ${translate("min read")} · `
-    : "";
+  const DATE_FORMAT = 'd MMM, yyyy';
+  const readTime = enableReadTimeOnStoryCards && story['read-time']
+    ? `${story['read-time']} ${translate('min read')} · `
+    : '';
 
   const throttledOnpress = throttle(props.onPress, 1000);
 
@@ -66,14 +71,14 @@ const SecondaryStoryCardNewBase = (props) => {
   );
 
   const showStoryType = () => {
-    switch (story["story-template"]) {
-      case "text":
+    switch (story['story-template']) {
+      case 'text':
         return null;
-      case "photo":
-        return showIcon("photo");
-      case "video":
-        return showIcon("play");
-      case "live-blog":
+      case 'photo':
+        return showIcon('photo');
+      case 'video':
+        return showIcon('play');
+      case 'live-blog':
         return showLiveBlogIcon();
       default:
         null;
@@ -89,8 +94,8 @@ const SecondaryStoryCardNewBase = (props) => {
     >
       <ResponsiveImage
         metaData={getImageMetadata(story)}
-        slug={getImageSlug(story) || ""}
-        cdn={props.cdn || ""}
+        slug={getImageSlug(story) || ''}
+        cdn={props.cdn || ''}
         imageWidth={props.imageWidth}
       >
         <View style={styles.storyTypeContainer}>{showStoryType()}</View>
@@ -111,13 +116,13 @@ const SecondaryStoryCardNewBase = (props) => {
           // TODO: Add corrected testID here
           testID={COMP_CONTENT_CONSTANTS.publishedDate}
         >
-          {readTime +
-            getTimeForStoryCards(
-              story["published-at"],
+          {readTime
+            + getTimeForStoryCards(
+              story['published-at'],
               DATE_FORMAT,
               locale,
               translate,
-              reverseTimeAdverbPosition
+              reverseTimeAdverbPosition,
             )}
         </Text>
       </View>
@@ -137,7 +142,7 @@ SecondaryStoryCardNewBase.propTypes = TouchableOpacityProps && {
 };
 
 SecondaryStoryCardNewBase.defaultProps = {
-  cdn: "",
+  cdn: '',
   horizontalPadding: 12,
 };
 

package/src/components/ShareButton/index.js

@@ -1,28 +1,29 @@
-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 Share from "react-native-share";
-import { AppTheme } from "../../utils";
-import { shareButtonStyles } from "./styles";
-import { getStoryHeadline } from "../../utils/story";
-import { COMP_GENERAL_CONSTANTS } from "../../constants/component-constants";
+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 Share from 'react-native-share';
+import { AppTheme } from '../../utils';
+import { shareButtonStyles } from './styles';
+import { getStoryHeadline } from '../../utils/story';
+import { COMP_GENERAL_CONSTANTS } from '../../constants/component-constants';
 
 const ShareButtonBase = (props) => {
   const { theme } = useContext(AppTheme);
   const styles = shareButtonStyles(theme);
-  const { story, type = "story", slug } = props;
+  const { enableShareOnStoryCards } = theme;
+  const { story, type = 'story', slug } = props;
 
   const getShareURL = () => {
     const { url } = story || {};
     switch (type) {
-      case "story":
+      case 'story':
         return url;
-      case "card":
+      case 'card':
         return `${url}${slug}`;
-      case "image":
+      case 'image':
         return `${url}${slug}`;
-      case "attachment":
+      case 'attachment':
         return slug;
       default:
         return url || slug;
@@ -43,14 +44,14 @@ const ShareButtonBase = (props) => {
     return null;
   }
 
-  return (
+  return enableShareOnStoryCards ? (
     <TouchableOpacity
       onPress={share}
       testID={COMP_GENERAL_CONSTANTS.shareButtonTouch}
     >
       <Icon style={styles.iconStyle} name="share-social-outline" size={20} />
     </TouchableOpacity>
-  );
+  ) : null;
 };
 
 ShareButtonBase.propTypes = {

package/src/components/TextBigFact/styles.js

@@ -1,5 +1,5 @@
 import { StyleSheet } from 'react-native';
-import { COMP_GENERAL_CONSTANTS }  from '../../constants/component-constants/general-constants/constants'
+import { COMP_GENERAL_CONSTANTS } from '../../constants/component-constants/general-constants/constants';
 
 export const bigTextStyles = (COLORS, FONT_SIZE, DARK_MODE) => StyleSheet.create({
   container: {
@@ -12,11 +12,12 @@ export const bigTextStyles = (COLORS, FONT_SIZE, DARK_MODE) => StyleSheet.create
     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
+    textAlign: COMP_GENERAL_CONSTANTS.textAlignment,
   },
 });

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

@@ -23,5 +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',
+  textAlignment: I18nManager.isRTL ? "left" : "auto",
 };