@quintype/native-components 2.20.22 → 2.20.24

package/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 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.20.24](https://github.com/quintype/native-components/compare/v2.20.23...v2.20.24) (2024-03-13)
+
+### [2.20.23](https://github.com/quintype/native-components/compare/v2.20.22...v2.20.23) (2024-03-11)
+
+
+### Bug Fixes
+
+* **text:** Fix text-clipping issue for Kannada font ([943c14f](https://github.com/quintype/native-components/commit/943c14f4eb02159cc41114e6cdddd7c9ba9d883a))
+
 ### [2.20.22](https://github.com/quintype/native-components/compare/v2.20.21...v2.20.22) (2024-02-26)
 
 

package/package.json

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

package/src/components/PrimaryStoryCardNew/styles.js

@@ -15,13 +15,13 @@ export const storyStyles = (COLORS = {}, FONT_SIZE = {}) => ({
   timestamp: {
     color: COLORS?.BRAND_BLACK,
     fontSize: FONT_SIZE.h5,
-    lineHeight: FONT_SIZE.h5 * 1.2,
+    lineHeight: FONT_SIZE.h5 * 1.5,
     opacity: 0.6,
     marginTop: 4,
   },
   headline: {
     fontSize: FONT_SIZE.title,
-    lineHeight: FONT_SIZE.title * 1.4,
+    lineHeight: FONT_SIZE.title * 1.6,
     color: COLORS.BRAND_BLACK,
     marginTop: 4,
   },
@@ -56,8 +56,8 @@ export const storyStyles = (COLORS = {}, FONT_SIZE = {}) => ({
     borderRadius: 50,
     backgroundColor: COLORS.BRAND_3,
   },
-  premiumIcon:{
+  premiumIcon: {
     marginTop: FONT_SIZE.h3 * 0.92,
-    marginRight:5
-  }
+    marginRight: 5,
+  },
 });

package/src/components/References/index.js

@@ -6,24 +6,31 @@ import { TouchableOpacity } from 'react-native-gesture-handler';
 import { AppTheme } from '../../utils';
 import { Text } from '../Text';
 import { styles } from './styles';
+import Icon from "react-native-vector-icons/FontAwesome5";
 
 export const References = ({
   card, referenceNameTestId, referenceDescTestID, referenceContainerTestID,
 }) => {
   const reference = get(card, ['story-elements', 0, 'metadata'], {});
   const { theme } = useContext(AppTheme);
-  const { COLORS, FONT_SIZE } = theme;
-  const referenceStyles = styles(COLORS, FONT_SIZE);
+  const { COLORS, FONT_SIZE, FONT_FAMILY } = theme;
+  const referenceStyles = styles(COLORS, FONT_SIZE, FONT_FAMILY);
 
   const onPressHandler = () => Linking.openURL(reference?.url);
 
   return (
     <TouchableOpacity onPress={onPressHandler}>
       <View style={referenceStyles.container} testID={referenceContainerTestID}>
+        <View>
+        <View style={referenceStyles.topSubContainer}>
+          <Icon name={'external-link-alt'} size={FONT_SIZE.h2} style={referenceStyles.iconStyle} testID="referenceStoryIcon" />
+          <Text style={referenceStyles.referenceText}>{'REFERENCE'}</Text>
+        </View>
         <Text style={referenceStyles.name} testID={referenceNameTestId}>
           {reference?.name}
         </Text>
         {reference.description && <Text style={referenceStyles.description} testID={referenceDescTestID}>{reference.description}</Text>}
+        </View>
       </View>
     </TouchableOpacity>
 

package/src/components/References/styles.js

@@ -1,22 +1,45 @@
 import { StyleSheet } from 'react-native';
+import { hexToRgb } from '../../utils/colorUtils';
 
-export const styles = (COLORS, FONT_SIZE) => StyleSheet.create({
+export const styles = (COLORS, FONT_SIZE, FONT_FAMILY) => StyleSheet.create({
   container: {
-    paddingHorizontal: 30,
+    paddingHorizontal: 20,
     marginHorizontal: 30,
     marginVertical: 5,
-    backgroundColor: COLORS.MONO5,
+    backgroundColor: hexToRgb(COLORS.BRAND_1,0.1),
     borderRadius: 5,
     paddingVertical: 15,
     display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
+    minHeight: 200,
+    borderColor: COLORS.BRAND_1,
+    borderWidth:0.2
   },
   name: {
-    fontSize: FONT_SIZE.h3,
+    fontSize: FONT_SIZE.h1,
     fontWeight: 'bold',
+    marginTop:15,
+    textDecorationLine:'underline',
+    lineHeight:24,
+    color:COLORS.BRAND_1,
+    fontFamily:FONT_FAMILY.primaryBold
   },
   description: {
-    fontSize: FONT_SIZE.h4,
+    fontSize: FONT_SIZE.h2,
+    color:COLORS.BRAND_1,
+    marginTop:10,
+    fontFamily: FONT_FAMILY.secondary
   },
+  referenceText: {
+    marginLeft:5,
+    fontWeight:'700',
+    fontSize: FONT_SIZE.h3
+  },
+  topSubContainer:{
+    display: 'flex',
+    flex:1,
+    flexDirection:'row'
+  },
+  iconStyle:{
+    color: COLORS.BRAND_1
+  }
 });

package/src/components/SecondaryStoryCardNew/styles.js

@@ -16,7 +16,7 @@ export const storyStyles = ({ COLORS, FONT_SIZE }) => StyleSheet.create({
   timestamp: {
     color: COLORS.BRAND_BLACK,
     fontSize: FONT_SIZE.h5,
-    lineHeight: FONT_SIZE.h5 * 1.2,
+    lineHeight: FONT_SIZE.h5 * 1.5,
     opacity: 0.6,
     marginTop: 4,
   },
@@ -24,7 +24,7 @@ export const storyStyles = ({ COLORS, FONT_SIZE }) => StyleSheet.create({
     color: COLORS.BRAND_BLACK,
     flexWrap: 'wrap',
     fontSize: FONT_SIZE.h3,
-    lineHeight: FONT_SIZE.h3 * 1.4,
+    lineHeight: FONT_SIZE.h3 * 1.6,
   },
   icon: {
     marginLeft: 8,
@@ -57,8 +57,8 @@ export const storyStyles = ({ COLORS, FONT_SIZE }) => StyleSheet.create({
     borderRadius: 50,
     backgroundColor: COLORS.BRAND_3,
   },
-  premiumIcon:{
+  premiumIcon: {
     marginTop: FONT_SIZE.h3 * 0.45,
-    marginRight:3
-  }
+    marginRight: 3,
+  },
 });

package/src/utils/colorUtils.js

@@ -0,0 +1,8 @@
+export const hexToRgb = (hex, alpha=1) => {
+  let rgbCode = hex.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(m, r, g, b) => '#' + r + r + g + g + b + b)
+  .substring(1).match(/.{2}/g)
+  .map(x => parseInt(x, 16));
+  console.log('risi -  color', `rgb(${rgbCode[0]}, ${rgbCode[1]}, ${rgbCode[2]}, ${alpha})`)
+  return `rgba(${rgbCode[0]}, ${rgbCode[1]}, ${rgbCode[2]}, ${alpha})`;
+}
+