@quintype/native-components 2.18.3 → 2.19.2

package/CHANGELOG.md

@@ -2,6 +2,35 @@
 
 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.2](https://github.com/quintype/native-components/compare/v2.19.1...v2.19.2) (2021-10-19)
+
+
+### Bug Fixes
+
+* **AlsoRead:** Changed dark-mode color for the text :hammer: ([#170](https://github.com/quintype/native-components/issues/170)) ([67f1e61](https://github.com/quintype/native-components/commit/67f1e61fd4b76ea6fa65f565006214981d0bb8a8))
+
+### [2.19.1](https://github.com/quintype/native-components/compare/v2.19.0...v2.19.1) (2021-10-07)
+
+
+### Bug Fixes
+
+* **old-UI:** Fixes all padding/image-aspect-ratio inconsistencies 🔨  ([#169](https://github.com/quintype/native-components/issues/169)) ([f3b8850](https://github.com/quintype/native-components/commit/f3b88507c02985ff83aadd266e0dbd04438fd441))
+
+## [2.19.0](https://github.com/quintype/native-components/compare/v2.17.3...v2.19.0) (2021-10-06)
+
+
+### Features
+
+* **new-designs:** new components for listing-screens redesign and other improvements ([#164](https://github.com/quintype/native-components/issues/164)) ([67b6619](https://github.com/quintype/native-components/commit/67b6619c5062fe3b0d3ab8682912d2c8642a6549))
+
+
+### Bug Fixes
+
+* **app:** for multiple reg-april-week4 bugs 🔨  ([#162](https://github.com/quintype/native-components/issues/162)) ([4ac86fe](https://github.com/quintype/native-components/commit/4ac86fe9109440e7e1708fff153bb2c54afb003e))
+* **headline:** Increasing lineHeight to fix clipping in Indian fonts :hammer: ([0bacd63](https://github.com/quintype/native-components/commit/0bacd63d7e61849b318b2d083524c6c8f09f3b09))
+
+### [2.18.4](https://github.com/quintype/native-components/compare/v2.18.3...v2.18.4) (2021-10-05)
+
 ### [2.18.3](https://github.com/quintype/native-components/compare/v2.18.2...v2.18.3) (2021-10-04)
 
 

package/package.json

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

package/src/components/AlsoRead/index.js

@@ -25,8 +25,8 @@ export const AlsoRead = (props) => {
   const linkedImage = get(linkedStories, [linkedStoryId, 'hero-image-s3-key']);
 
   const { theme } = useContext(AppTheme);
-  const { COLORS, FONT_SIZE, CustomFallBackIcon } = theme;
-  const styles = alsoReadStyles(COLORS, FONT_SIZE);
+  const { COLORS, FONT_SIZE, DARK_MODE, CustomFallBackIcon } = theme;
+  const styles = alsoReadStyles(COLORS, FONT_SIZE, DARK_MODE);
 
   const fallBackIcon = CustomFallBackIcon ? <CustomFallBackIcon /> : <FallbackIcon />;
 

package/src/components/AlsoRead/styles.js

@@ -1,6 +1,6 @@
 import { StyleSheet } from 'react-native';
 
-export const alsoReadStyles = (COLORS, FONT_SIZE) => StyleSheet.create({
+export const alsoReadStyles = (COLORS, FONT_SIZE, DARK_MODE) => StyleSheet.create({
   wrapper: {
     padding: 10,
   },
@@ -13,7 +13,7 @@ export const alsoReadStyles = (COLORS, FONT_SIZE) => StyleSheet.create({
   },
   alsoReadText: {
     fontSize: FONT_SIZE.h2,
-    color: COLORS.BRAND_1,
+    color: DARK_MODE ? COLORS.BRAND_BLACK : COLORS.BRAND_1,
   },
   alsoReadTitle: {
     fontSize: FONT_SIZE.h2,

package/src/components/CollectionCard/index.js

@@ -16,20 +16,26 @@ export const CollectionCard = ({
   onCollectionPress,
   onStoryPress,
   offset,
+  horizontalPadding,
   initialOffset /* Number of items to load on first load */,
 }) => {
   const sliceLimit = offset || initialOffset || 5;
   const primaryStory = !isEmpty(stories) && get(stories, [0, 'story'], stories[0]);
   return (
     <>
-      <CollectionTitle title={collectionName} onPress={onCollectionPress} />
+      <CollectionTitle
+        title={collectionName}
+        onPress={onCollectionPress}
+        horizontalPadding={horizontalPadding}
+      />
       <PrimaryStoryCard
         onPress={() => {
           !isEmpty(stories) && onStoryPress(primaryStory);
         }}
         cdn={cdn}
         story={!isEmpty(stories) ? primaryStory : {}}
-        imageWidth={getScreenPercentageWidth(100)}
+        imageWidth={getScreenPercentageWidth(100) - 2 * horizontalPadding}
+        horizontalPadding={horizontalPadding}
       />
       {stories.slice(1, sliceLimit).map((currentStory) => {
         const secondaryStory = get(currentStory, ['story'], currentStory);
@@ -40,6 +46,7 @@ export const CollectionCard = ({
             cdn={cdn}
             story={secondaryStory}
             imageWidth={getScreenPercentageWidth(40)}
+            horizontalPadding={horizontalPadding}
           />
         );
       })}
@@ -54,4 +61,9 @@ CollectionCard.propTypes = {
   onCollectionPress: PropTypes.func,
   onStoryPress: PropTypes.func,
   offset: PropTypes.number,
+  horizontalPadding: PropTypes.number,
+};
+
+CollectionCard.defaultProps = {
+  horizontalPadding: 12,
 };

package/src/components/CollectionTitle/index.js

@@ -18,6 +18,10 @@ import { COMP_GENERAL_CONSTANTS } from '../../constants/component-constants/gene
 export const CollectionTitle = (props) => {
   const { theme } = useContext(AppTheme);
   const styles = collectionStyles(theme);
+  const containerStyle = StyleSheet.flatten([
+    styles.titleContainer,
+    { paddingHorizontal: props.horizontalPadding },
+  ]);
   const titleStyle = StyleSheet.flatten([styles.titleStyle, props.titleStyle]);
   const indicatorStyle = StyleSheet.flatten([
     styles.indicatorStyle,
@@ -30,7 +34,7 @@ export const CollectionTitle = (props) => {
 
   return (
     <TouchableOpacity
-      style={styles.titleContainer}
+      style={containerStyle}
       onPress={props.onPress}
       testID={COMP_GENERAL_CONSTANTS.collectionTitleTouch}
     >
@@ -49,4 +53,9 @@ CollectionTitle.propTypes = TouchableOpacityProps && {
   title: PropTypes.string,
   titleStyle: TextStyle,
   indicatorStyle: ViewStyle,
+  horizontalPadding: PropTypes.number,
+};
+
+CollectionTitle.defaultProps = {
+  horizontalPadding: 12,
 };

package/src/components/CollectionTitle/styles.js

@@ -4,18 +4,16 @@ export const collectionStyles = (appThemeContext) => {
   const { COLORS, FONT_SIZE } = appThemeContext;
   return StyleSheet.create({
     titleContainer: {
-      paddingBottom: 9,
+      backgroundColor: COLORS.BRAND_WHITE,
+      paddingVertical: 12,
       justifyContent: 'center',
-      marginBottom: 10,
     },
     titleStyle: {
       fontSize: FONT_SIZE.h1,
       color: COLORS.BRAND_5,
     },
     indicatorStyle: {
-      position: 'absolute',
-      left: 0,
-      bottom: 0,
+      marginTop: 8,
       width: 30,
       height: 3,
       backgroundColor: COLORS.BRAND_1,

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 } = theme;
+  const { COLORS, FONT_SIZE, DARK_MODE } = theme;
 
   const showModal = () => {
     setModalVisible(true);
@@ -30,7 +30,7 @@ export const PDFReader = ({ card, share }) => {
     setModalVisible(false);
   };
 
-  const styles = pdfStyles(COLORS, FONT_SIZE);
+  const styles = pdfStyles(COLORS, FONT_SIZE, DARK_MODE);
 
   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) => StyleSheet.create({
+export const pdfStyles = (COLORS, FONT_SIZE, DARK_MODE) => StyleSheet.create({
   container: {
     flex: 1,
   },
@@ -18,7 +18,8 @@ export const pdfStyles = (COLORS, FONT_SIZE) => StyleSheet.create({
     fontSize: FONT_SIZE.h2,
     lineHeight: FONT_SIZE.h2 * 1.3,
     marginLeft: 5,
-    color: COLORS.BRAND_1,
+    color: DARK_MODE ? COLORS.BRAND_BLACK : COLORS.BRAND_1,
+    fontStyle: 'italic',
   },
   pdfButton: {
     flexDirection: 'row',
@@ -26,7 +27,7 @@ export const pdfStyles = (COLORS, FONT_SIZE) => StyleSheet.create({
     alignItems: 'center',
   },
   fileIcon: {
-    color: COLORS.BRAND_1,
+    color: DARK_MODE ? COLORS.BRAND_BLACK : COLORS.BRAND_1,
   },
   pdfStyle: {
     flex: 1,

package/src/components/PrimaryStoryCard/index.js

@@ -28,7 +28,10 @@ export const PrimaryStoryCard = (props) => {
   const DATE_FORMAT = I18nManager.isRTL ? 'yyyy , MMM d' : 'd MMM, yyyy';
 
   const styles = storyStyles(COLORS, FONT_SIZE);
-
+  const containerStyle = StyleSheet.flatten([
+    styles.container,
+    { paddingHorizontal: props.horizontalPadding },
+  ]);
   const headlineStyle = StyleSheet.flatten([
     styles.headline,
     props.headlineStyle,
@@ -49,13 +52,13 @@ export const PrimaryStoryCard = (props) => {
       testID={COMP_GENERAL_CONSTANTS.primaryStoryCard}
       onPress={throttledOnpress}
       activeOpacity={0.8}
+      style={containerStyle}
     >
       <ResponsiveImage
         metaData={getImageMetadata(story)}
         slug={getImageSlug(story)}
         cdn={props.cdn}
         imageWidth={props.imageWidth}
-        hero
       >
         <Text style={styles.xminContainer}>
           {' '}
@@ -101,8 +104,10 @@ PrimaryStoryCard.propTypes = {
   authorTextStyle: PropTypes.func,
   story: PropTypes.object.isRequired,
   onPress: PropTypes.func,
+  horizontalPadding: PropTypes.number,
 };
 
 PrimaryStoryCard.defaultProps = {
   cdn: '',
+  horizontalPadding: 12,
 };

package/src/components/PrimaryStoryCard/styles.js

@@ -1,4 +1,8 @@
 export const storyStyles = (COLORS = {}, FONT_SIZE = {}, DARK_MODE = {}) => ({
+  container: {
+    backgroundColor: COLORS.BRAND_WHITE,
+    marginTop: 12,
+  },
   authorBlockContainer: {
     alignItems: 'center',
     flexDirection: 'row',

package/src/components/ResponsiveImage/index.js

@@ -1,20 +1,22 @@
-import PropTypes from "prop-types";
-import React, { memo, useCallback, useContext, useState } from "react";
-import { Dimensions, StyleSheet, View } from "react-native";
-import FastImage from "react-native-fast-image";
-import Icon from "react-native-vector-icons/FontAwesome";
-import { FallbackIcon } from "../../Icons/FallBackIcon";
-import { AppTheme } from "../../utils";
-import { getImageURL } from "../../utils/imageUtils";
-
+import PropTypes from 'prop-types';
+import React, {
+  memo, useCallback, useContext, useState,
+} from 'react';
+import { StyleSheet, View } from 'react-native';
+import FastImage from 'react-native-fast-image';
+import Icon from 'react-native-vector-icons/FontAwesome';
+import { isTablet } from 'react-native-device-info';
+import { FallbackIcon } from '../../Icons/FallBackIcon';
+import { AppTheme } from '../../utils';
+import { getImageURL } from '../../utils/imageUtils';
 
 const ResponsiveImageBase = (props) => {
   const [placeholder, setPlaceholder] = useState(true);
   const { theme } = useContext(AppTheme);
   const { COLORS, CustomFallBackIcon, CustomFallBackBackground } = theme;
 
-  const windowWidth = Dimensions.get("window").width;
-  
+  const HERO_IMAGE_HEIGHT = isTablet() ? 300 : 232;
+
   const flattenedImageStyle = StyleSheet.flatten([
     styles.defaultImage,
     props.styles,
@@ -23,17 +25,17 @@ const ResponsiveImageBase = (props) => {
       height: (props.imageWidth * 9) / 16,
     },
     props.hero && {
-      width: "100%",
+      width: '100%',
       height: HERO_IMAGE_HEIGHT,
-      alignSelf: "stretch",
+      alignSelf: 'stretch',
     },
   ]);
 
   const placeholderStyle = {
     ...StyleSheet.absoluteFillObject,
     backgroundColor: CustomFallBackBackground || COLORS.MONO6,
-    justifyContent: "center",
-    alignItems: "center",
+    justifyContent: 'center',
+    alignItems: 'center',
   };
 
   const fallBackIcon = CustomFallBackIcon ? (
@@ -47,7 +49,7 @@ const ResponsiveImageBase = (props) => {
 
   const showFallBackIcon = () => {
     switch (props.type) {
-      case "author":
+      case 'author':
         return userFallback();
       default:
         return fallBackIcon;

package/src/components/SecondaryStoryCard/index.js

@@ -32,6 +32,10 @@ export const SecondaryStoryCard = (props) => {
 
   const DATE_FORMAT = I18nManager.isRTL ? 'yyyy ,MMM d' : 'd MMM, yyyy';
 
+  const containerStyle = StyleSheet.flatten([
+    styles.container,
+    { paddingHorizontal: props.horizontalPadding },
+  ]);
   const headlineStyle = StyleSheet.flatten([
     styles.headline,
     props.headlineStyle,
@@ -55,7 +59,7 @@ export const SecondaryStoryCard = (props) => {
       testID={COMP_GENERAL_CONSTANTS.secondaryStoryCard}
       onPress={throttledOnpress}
       activeOpacity={0.8}
-      style={styles.blockContainer}
+      style={containerStyle}
     >
       <ResponsiveImage
         metaData={getImageMetadata(story)}
@@ -112,4 +116,10 @@ SecondaryStoryCard.propTypes = TouchableOpacityProps && {
   dateTextStyle: TextStyle,
   story: PropTypes.any.isRequired,
   iconComponent: PropTypes.element,
+  horizontalPadding: PropTypes.number,
+};
+
+SecondaryStoryCard.defaultProps = {
+  cdn: '',
+  horizontalPadding: 12,
 };

package/src/components/SecondaryStoryCard/styles.js

@@ -1,6 +1,11 @@
 import { StyleSheet } from 'react-native';
 
 export const secStoryCardStyles = ({ COLORS, FONT_SIZE, DARK_MODE }) => StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    backgroundColor: COLORS.BRAND_WHITE,
+    paddingVertical: 15,
+  },
   headlineAndAuthorBlockContainer: {
     flexShrink: 1,
     flex: 1,
@@ -22,10 +27,6 @@ export const secStoryCardStyles = ({ COLORS, FONT_SIZE, DARK_MODE }) => StyleShe
     alignItems: 'center',
     flexDirection: 'row',
   },
-  blockContainer: {
-    flexDirection: 'row',
-    paddingVertical: 15,
-  },
   headline: {
     color: COLORS.BRAND_BLACK,
     opacity: 0.9,