@quintype/native-components 2.20.23 → 2.20.25

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.25](https://github.com/quintype/native-components/compare/v2.20.24...v2.20.25) (2024-03-14)
+
+
+### Bug Fixes
+
+* **text-clip:** Bump lineheight for HTML story-content ([91f6279](https://github.com/quintype/native-components/commit/91f6279ca2815bf48bddcf0eb03020351bde8666))
+
+### [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)
 
 

package/package.json

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

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/constants/renderHTML.js

@@ -21,13 +21,13 @@ export const customHTMLStyles = () => {
       marginTop: 7,
       marginBottom: 7,
       fontSize: FONT_SIZE.p1,
-      lineHeight: FONT_SIZE.p1 * 1.5,
+      lineHeight: FONT_SIZE.p1 * 1.7,
       color: COLORS.BRAND_BLACK,
       opacity: 0.85,
     },
     li: {
       fontSize: FONT_SIZE.h3,
-      lineHeight: FONT_SIZE.h3 * 1.3,
+      lineHeight: FONT_SIZE.h3 * 1.5,
       marginTop: 8,
       color: COLORS.BRAND_BLACK,
       opacity: 0.85,
@@ -50,25 +50,26 @@ export const customHTMLStyles = () => {
       marginTop: 7,
       marginBottom: 7,
       fontSize: FONT_SIZE.p1,
-      lineHeight: FONT_SIZE.p1 * 1.5,
+      lineHeight: FONT_SIZE.p1 * 1.7,
       color: COLORS.HYPERLINK_COLOR || COLORS.BRAND_BLACK,
     },
     h: {
       fontFamily: FONT_FAMILY.secondaryBold,
       fontWeight: 'normal',
-      marginTop: 16,
+      marginTop: 12,
       marginRight: 4,
+      lineHeight: FONT_SIZE.h1 * 2,
       color: COLORS.BRAND_BLACK,
       opacity: 0.85,
     },
     sup: {
       marginBottom: 16,
-      lineHeight: FONT_SIZE.p1 * 0.3,
+      lineHeight: FONT_SIZE.p1 * 0.5,
       fontSize: FONT_SIZE.p1 * 0.5,
     },
     sub: {
       marginBottom: 16,
-      lineHeight: FONT_SIZE.p1 * 0.3,
+      lineHeight: FONT_SIZE.p1 * 0.5,
       fontSize: FONT_SIZE.p1 * 0.5,
     },
   };

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})`;
+}
+