@quintype/native-components 2.21.1-beta.0 → 2.21.1-kp-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quintype/native-components",
-  "version": "2.21.1-beta.0",
+  "version": "2.21.1-kp-beta.1",
   "description": "",
   "main": "src/index.js",
   "scripts": {

package/src/components/AuthorRow/styles.js

@@ -29,8 +29,7 @@ export const authorRowStyleSheet = (appThemeContext) => {
       fontSize: FONT_SIZE.h5,
       color: COLORS.BRAND_BLACK,
       opacity: 0.9,
-      lineHeight: FONT_SIZE.h5 * 1.3,
-
+      textAlignVertical: 'center',
     },
     bioStyle: {
       fontSize: FONT_SIZE.h5,

package/src/components/PDFReader/styles.js

@@ -15,7 +15,7 @@ export const pdfStyles = (COLORS, FONT_SIZE, DARK_MODE) => StyleSheet.create({
   },
   pdfText: {
     fontSize: FONT_SIZE.h2,
-    lineHeight: FONT_SIZE.h2 * 1.3,
+    lineHeight: FONT_SIZE.h2 * 1.5,
     marginLeft: 5,
     color: DARK_MODE ? COLORS.BRAND_BLACK : COLORS.BRAND_1,
     fontStyle: 'italic',
@@ -42,6 +42,6 @@ export const pdfStyles = (COLORS, FONT_SIZE, DARK_MODE) => StyleSheet.create({
     width: '20%',
     justifyContent: 'center',
     alignItems: 'center',
-    margin : 10
+    margin: 10,
   },
 });

package/src/components/ResponsiveImage/index.js

@@ -16,11 +16,7 @@ const ResponsiveImageBase = (props) => {
   const [placeholder, setPlaceholder] = useState(true);
   const { theme } = useContext(AppTheme);
   const {
-    COLORS,
-    CustomFallBackIcon,
-    CustomFallBackBackground,
-    resizeImagesToFit,
-    roundedImageCorners,
+    COLORS, CustomFallBackIcon, CustomFallBackBackground, resizeImagesToFit,
   } = theme;
 
   const flattenedImageStyle = StyleSheet.flatten([
@@ -33,19 +29,13 @@ 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",
-    borderRadius: roundedImageCorners ? 12 : 0,
+    backgroundColor: (CustomFallBackIcon && CustomFallBackBackground) ?? COLORS.MONO6,
+    justifyContent: 'center',
+    alignItems: 'center',
   };
 
   const fallBackIcon = CustomFallBackIcon ? (

package/src/components/StoryImage/styles.js

@@ -18,13 +18,13 @@ export const storyImageStyles = ({ COLORS, FONT_SIZE }, metadata = {}) => {
     },
     cardTitleText: {
       fontSize: FONT_SIZE.h5,
-      lineHeight: FONT_SIZE.h5 * 1.3,
+      lineHeight: FONT_SIZE.h5 * 1.5,
       color: COLORS.BRAND_BLACK,
       marginBottom: 5,
     },
     attributionText: {
       fontSize: FONT_SIZE.h5,
-      lineHeight: FONT_SIZE.h5 * 1.3,
+      lineHeight: FONT_SIZE.h5 * 1.5,
       color: COLORS.BRAND_BLACK,
       marginBottom: 5,
     },

package/src/components/StoryTitle/styles.js

@@ -12,14 +12,14 @@ export const storyTitleStyles = ({ COLORS, FONT_SIZE }) => StyleSheet.create({
   },
   subTitleStyle: {
     fontSize: FONT_SIZE.h3,
-    lineHeight: FONT_SIZE.h3 * 1.3,
+    lineHeight: FONT_SIZE.h3 * 1.5,
     color: COLORS.BRAND_6,
     marginTop: 15,
     paddingVertical: 5,
   },
-  premiumIcon : {
-    paddingLeft:10,
-    marginRight:-5,
-    borderWidth:1
-  }
+  premiumIcon: {
+    paddingLeft: 10,
+    marginRight: -5,
+    borderWidth: 1,
+  },
 });

package/src/components/TextBigFact/styles.js

@@ -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.3,
+    lineHeight: FONT_SIZE.h1 * 1.5,
     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.3,
+    lineHeight: FONT_SIZE.h5 * 1.5,
     textAlign: isRTLEnabled() ? 'left' : 'auto',
   },
 });

package/src/components/TextBlockQuote/styles.js

@@ -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.3,
+    lineHeight: FONT_SIZE.h1 * 1.5,
     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.3,
+    lineHeight: FONT_SIZE.h5 * 1.5,
     textAlign: isRTLEnabled() ? 'left' : 'auto',
   },
   topBorderContainer: {

package/src/components/TextBlurb/styles.js

@@ -9,7 +9,7 @@ export const textBlurbStyles = (FONT_SIZE) => StyleSheet.create({
   },
   blurbText: {
     fontSize: FONT_SIZE.h3,
-    lineHeight: FONT_SIZE.h3 * 1.3,
+    lineHeight: FONT_SIZE.h3 * 1.5,
     textAlign: isRTLEnabled() ? 'left' : 'auto',
   },
 });

package/src/components/TextQandA/styles.js

@@ -7,13 +7,13 @@ export const textQandAStyles = (COLORS, FONT_SIZE) => StyleSheet.create({
   questionText: {
     fontSize: FONT_SIZE.h2,
     fontWeight: '600',
-    lineHeight: FONT_SIZE.h2 * 1.3,
+    lineHeight: FONT_SIZE.h2 * 1.5,
     color: COLORS.BRAND_BLACK,
     opacity: 0.8,
   },
   answerText: {
     fontSize: FONT_SIZE.h2,
-    lineHeight: FONT_SIZE.h2 * 1.3,
+    lineHeight: FONT_SIZE.h2 * 1.5,
     color: COLORS.BRAND_BLACK,
     opacity: 0.8,
   },

package/src/components/TextQuote/styles.js

@@ -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.3,
+    lineHeight: FONT_SIZE.h2 * 1.5,
   },
   quoteText: {
     fontSize: FONT_SIZE.h1,
-    lineHeight: FONT_SIZE.h1 * 1.3,
+    lineHeight: FONT_SIZE.h1 * 1.5,
     color: COLORS.BRAND_BLACK,
     opacity: 0.9,
     textAlign: isRTLEnabled() ? 'left' : 'auto',
   },
   attributionText: {
     fontSize: FONT_SIZE.h3,
-    lineHeight: FONT_SIZE.h3 * 1.3,
+    lineHeight: FONT_SIZE.h3 * 1.5,
     color: COLORS.BRAND_BLACK,
     alignItems: 'flex-end',
     textAlign: isRTLEnabled() ? 'left' : 'auto',

package/src/components/TextSummary/styles.js

@@ -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.3,
+    lineHeight: FONT_SIZE.h2 * 1.5,
     textAlign: isRTLEnabled() ? 'left' : 'auto',
   },
   summaryText: {