@quintype/native-components 2.21.5 → 2.22.0-beta.1

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.21.5",
+  "version": "2.22.0-beta.1",
   "description": "",
   "main": "src/index.js",
   "scripts": {

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

@@ -16,7 +16,11 @@ const ResponsiveImageBase = (props) => {
   const [placeholder, setPlaceholder] = useState(true);
   const { theme } = useContext(AppTheme);
   const {
-    COLORS, CustomFallBackIcon, CustomFallBackBackground, resizeImagesToFit,
+    COLORS,
+    CustomFallBackIcon,
+    CustomFallBackBackground,
+    resizeImagesToFit,
+    roundedImageCorners,
   } = theme;
 
   const flattenedImageStyle = StyleSheet.flatten([
@@ -29,13 +33,20 @@ const ResponsiveImageBase = (props) => {
     props?.elementType === 'gallery' && {
       backgroundColor: COLORS.BRAND_BLACK,
     },
+    roundedImageCorners && {
+      borderRadius: 12,
+      overflow: "hidden",
+    },
   ]);
 
   const placeholderStyle = {
     ...StyleSheet.absoluteFillObject,
-    backgroundColor: (CustomFallBackIcon && CustomFallBackBackground) ?? COLORS.MONO6,
-    justifyContent: 'center',
-    alignItems: 'center',
+    ...props.styles,
+    backgroundColor:
+      (CustomFallBackIcon && CustomFallBackBackground) ?? COLORS.MONO6,
+    justifyContent: "center",
+    alignItems: "center",
+    borderRadius: roundedImageCorners ? 12 : 0,
   };
 
   const fallBackIcon = CustomFallBackIcon ? (

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/index.js

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