npm - @quintype/native-components - Versions diffs - 2.30.2-center-align-title-beta.2 → 2.30.3 - Mend

@quintype/native-components 2.30.2-center-align-title-beta.2 → 2.30.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/package.json +1 -1
package/src/components/Header/index.js +2 -3
package/src/components/Header/styles.js +2 -2
package/src/components/JSEmbedElement/index.js +39 -23
package/src/components/Story/index.js +1 -3
package/src/components/StoryHeader/index.js +5 -6
package/src/components/StoryHeader/styles.js +0 -3
package/src/components/StoryText/index.js +7 -6
package/src/components/StoryTitle/index.js +2 -2
package/src/components/StoryTitle/styles.js +1 -2
package/src/components/TextSummary/index.js +21 -0
package/src/components/TitleElement/styles.js +2 -1
package/src/constants/renderHTML.js +26 -11

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@quintype/native-components",
-  "version": "2.30.2-center-align-title-beta.2",
+  "version": "2.30.3",
   "description": "",
   "main": "src/index.js",
   "scripts": {

package/src/components/Header/index.js CHANGED Viewed

@@ -12,8 +12,8 @@ import { headerStyles } from "./styles";
 export const Header = (props) => {
   const { theme } = useContext(AppTheme);
-  const { noBorder, centerAlignLogo, customHeight } = props || {};
-  const styles = headerStyles(theme, noBorder, centerAlignLogo, customHeight);
+  const { noBorder, centerAlignLogo } = props || {};
+  const styles = headerStyles(theme, noBorder, centerAlignLogo);
   const headerStyle = StyleSheet.flatten([styles.header, props.style]);
   const logoComponentStyle = StyleSheet.flatten([
     styles.logoComponentStyle,
@@ -71,5 +71,4 @@ Header.propTypes = {
   logoComponentStyle: PropTypes.object,
   onPress: PropTypes.func,
   noBorder: PropTypes.bool,
-  customHeight: PropTypes.number,
 };

package/src/components/Header/styles.js CHANGED Viewed

@@ -1,10 +1,10 @@
 import { StyleSheet } from 'react-native';
-export const headerStyles = (appThemeContext, noBorder, centerAlignLogo, customHeight) => {
+export const headerStyles = (appThemeContext, noBorder, centerAlignLogo) => {
   const { COLORS, DARK_MODE } = appThemeContext;
   const headerContainerStyles = {
     header: {
-      height: customHeight ?? 48,
+      height: 48,
       backgroundColor: DARK_MODE ? COLORS.MONO6 : COLORS.BRAND_WHITE,
       flexDirection: 'row',
       alignItems: 'center',

package/src/components/JSEmbedElement/index.js CHANGED Viewed

@@ -23,7 +23,7 @@ const removeWidthnHeight = (htmlContent) => {
   if (temp[0] === '<iframe') {
     for (let i = 0; i < temp.length; i++) {
       if (
-        (temp[i].includes('width') || temp[i].includes('height'))
+        (temp[i].includes('width=') || temp[i].includes('height='))
         && !temp[i].includes('/')
       ) {
         continue;
@@ -40,6 +40,7 @@ const getHTMLContent = (embedJs) => {
   const width = useWindowDimensions().width;
   const decodedContent = getDecodedContent(embedJs);
   let htmlContent = replaceDefaultProtocol(decodedContent);
+  htmlContent = removeWidthnHeight(htmlContent);
   const webViewScript = `
     <script type="application/javascript">
@@ -62,8 +63,22 @@ const getHTMLContent = (embedJs) => {
                 <head>
                     <meta name="viewport" content="width=device-width, initial-scale=1">
                     <style>
-                      iframe{
-                        width:${width - 20}px;
+                      * {
+                        margin: 0;
+                        padding: 0;
+                        box-sizing: border-box;
+                      }
+                      body {
+                        width: 100%;
+                        overflow-x: hidden;
+                      }
+                      iframe {
+                        width: 100% !important;
+                        max-width: ${width - 20}px;
+                        height: ${Math.round((width - 20) * 9 / 16)}px;
+                        min-height: 200px;
+                        display: block;
+                        margin: 0 auto;
                       }
                     </style>
                 </head>
@@ -93,29 +108,29 @@ export const JSEmbedElement = (props) => {
     setHeight(parseInt(event.nativeEvent.data));
   };
-// Function to manually extract the base URL from an iframe src
-const extractBaseUrlFromIframe = (iframeHtml) => {
-  const regex = /src="([^"]+)"/;  // Regex to extract src URL from iframe
-  const match = iframeHtml.match(regex);
+  // Function to manually extract the base URL from an iframe src
+  const extractBaseUrlFromIframe = (iframeHtml) => {
+    const regex = /src="([^"]+)"/;  // Regex to extract src URL from iframe
+    const match = iframeHtml.match(regex);
-  if (match && match[1]) {
-    const srcUrl = match[1]; // The full src URL from iframe
+    if (match && match[1]) {
+      const srcUrl = match[1]; // The full src URL from iframe
-    // Manually extract the base URL (protocol + host + pathname)
-    const urlPattern = /^(https?:\/\/[^/]+(?:\/[^?]*)?)/;
-    const baseUrlMatch = srcUrl.match(urlPattern);
+      // Manually extract the base URL (protocol + host + pathname)
+      const urlPattern = /^(https?:\/\/[^/]+(?:\/[^?]*)?)/;
+      const baseUrlMatch = srcUrl.match(urlPattern);
-    if (baseUrlMatch) {
-      return baseUrlMatch[1]; // Return the base URL
+      if (baseUrlMatch) {
+        return baseUrlMatch[1]; // Return the base URL
+      } else {
+        console.error('Invalid URL format.');
+        return null;
+      }
     } else {
-      console.error('Invalid URL format.');
+      console.error('Iframe src not found.');
       return null;
     }
-  } else {
-    console.error('Iframe src not found.');
-    return null;
-  }
-};
+  };
   const constructSource = () => {
     return {
@@ -125,12 +140,13 @@ const extractBaseUrlFromIframe = (iframeHtml) => {
   };
   if (height > 0) {
+    const calculatedHeight = Math.max(Number(height), Math.round((width - 20) * 9 / 16) + 20);
     return <View testID="embed-js">
       <WebView
         ref={webViewRef}
         style={{
           width,
-          height: Math.min(Number(height), screenHeight-250),
+          height: Math.min(calculatedHeight, screenHeight - 100),
           flex: 0,
           opacity: 0.99,
         }}
@@ -160,7 +176,7 @@ const extractBaseUrlFromIframe = (iframeHtml) => {
         ref={webViewRef}
         style={{
           width,
-          height: Number(height),
+          height: Math.max(Number(height), Math.round((width - 20) * 9 / 16) + 20),
           flex: 0,
           opacity: 0.99,
         }}
@@ -204,4 +220,4 @@ JSEmbedElement.propTypes = {
     height: PropTypes.number,
     orientation: PropTypes.string,
   }),
-};
+};

package/src/components/Story/index.js CHANGED Viewed

@@ -152,8 +152,7 @@ export const Story = ({
   gaTrigerredTTS,
   commentData,
   commentLoader,
-  storyLayout,
-  centerAlignStoryTitle
+  storyLayout
 }) => {
   const { theme } = useContext(AppTheme);
   const { COLORS, FONT_SIZE, locale, DARK_MODE,translate, enableComments } = theme;
@@ -377,7 +376,6 @@ export const Story = ({
         onAuthorPress={onAuthorPress}
         onSectionPress={onSectionPress}
         storyLayout={storyLayout}
-        centerAlignStoryTitle = {centerAlignStoryTitle}
       />
   { storyHasAccess === 'granted' && audioS3Key && (!showPlayer ?
   (<TouchableOpacity onPress={async()=>{

package/src/components/StoryHeader/index.js CHANGED Viewed

@@ -65,7 +65,7 @@ const getHeroComponent = (props) => {
 };
 export const StoryHeader = (props) => {
-  const { story, firstVideoElement, storyLayout, centerAlignStoryTitle } = props;
+  const { story, firstVideoElement, storyLayout } = props;
   const sectionData = get(story, ['sections', 0], {});
   const { theme } = useContext(AppTheme);
@@ -105,11 +105,10 @@ export const StoryHeader = (props) => {
   };
   const getSectionName = (storyLayout = 'default') => {
-    const style = isHeadLinePriorityLayout ? styles.headlinePriority.sectionText : styles.sectionText;
-    const centerAlignStyle = centerAlignStoryTitle? styles?.centerAlign: ''
+    const style = isHeadLinePriorityLayout ? styles.headlinePriority.sectionText : styles.sectionText
     return <TouchableOpacity onPress={navigateToSection}>
       <Text
-        style={[style, centerAlignStyle]}
+        style={style}
         testID={COMP_CONTENT_CONSTANTS.sectionName}
       >
         {sectionData['display-name'] || ''}
@@ -139,7 +138,7 @@ export const StoryHeader = (props) => {
     return (
       <View testID={props.testID}>
         {getSectionName(storyLayout)}
-        <StoryTitle title={story.headline} subTitle={story.subheadline} isPremiumStory={isPremiumStory} isHeadLinePriorityLayout={isHeadLinePriorityLayout} centerAlignStoryTitle={centerAlignStoryTitle}/>
+        <StoryTitle title={story.headline} subTitle={story.subheadline} isPremiumStory={isPremiumStory} isHeadLinePriorityLayout={isHeadLinePriorityLayout}/>
         {getHeroComponent(props)}
         {showAttribution(storyLayout)}
         <View style={styles.dateBlock}>
@@ -166,7 +165,7 @@ export const StoryHeader = (props) => {
           {getTimeInFormat(story['published-at'], DATE_FORMAT, locale)}
         </Text>
       </View>
-        <StoryTitle title={story.headline} subTitle={story.subheadline} isPremiumStory={isPremiumStory} centerAlignStoryTitle={centerAlignStoryTitle}/>
+        <StoryTitle title={story.headline} subTitle={story.subheadline} isPremiumStory={isPremiumStory}/>
         {getAuthorRow()}
       {reviewTitle && <RatingLayout reviewTitle={reviewTitle} ratingValue={reviewData?.value} ratingLabel={reviewData?.label}/>}
     </View>

package/src/components/StoryHeader/styles.js CHANGED Viewed

@@ -60,8 +60,5 @@ export const storyHeaderStyles = (COLORS, FONT_FAMILY) => StyleSheet.create({
       fontFamily: FONT_FAMILY.secondary,
       fontWeight: "bold",
     },
-  },
-  centerAlign: {
-    textAlign: 'center'
   }
 });

package/src/components/StoryText/index.js CHANGED Viewed

@@ -13,7 +13,7 @@ import { AppTheme } from '../../utils/context';
 import { storyTextStyles } from './styles';
 export const StoryText = (props) => {
-  const {navigation} = props;
+  const { navigation } = props;
   const { theme, useDeeplinkHandler } = useContext(AppTheme);
   const {
     COLORS,
@@ -46,14 +46,13 @@ export const StoryText = (props) => {
           useDeeplinkHandler(href, navigation)
         }}
         listsPrefixesRenderers={{
-          ul: () => <View style={customTagsStyles.ul} />,
+          ul: () => <View style={customTagsStyles['ul-bullet']} />,
           ol: (htmlAttribs, children, convertedCSSStyles, passProps) => {
             const { index } = passProps;
-            const bulletNumber = htmlAttribs.start ? htmlAttribs.start : index + 1;
+            const bulletNumber = htmlAttribs.start ? parseInt(htmlAttribs.start) + index : index + 1;
             return (
-              <Text style={customTagsStyles.ol}>
-                {bulletNumber}
-                )
+              <Text style={customTagsStyles['ol-number']}>
+                {bulletNumber})
               </Text>
             );
           },
@@ -63,6 +62,8 @@ export const StoryText = (props) => {
           ins: customTagsStyles.ins,
           p: customTagsStyles.p,
           li: customTagsStyles.li,
+          ul: customTagsStyles.ul,
+          ol: customTagsStyles.ol,
           a: customTagsStyles.a,
           h2: customTagsStyles.h,
           h3: customTagsStyles.h,

package/src/components/StoryTitle/index.js CHANGED Viewed

@@ -7,9 +7,9 @@ import { AppTheme } from '../../utils';
 import { COMP_CONTENT_CONSTANTS } from '../../constants/component-constants/content-constants/constants';
 import PremiumIcons from '../../Icons/PremiumIcons/index';
-export const StoryTitle = ({ title, subTitle, isPremiumStory, isHeadLinePriorityLayout, centerAlignStoryTitle }) => {
+export const StoryTitle = ({ title, subTitle, isPremiumStory, isHeadLinePriorityLayout }) => {
   const { theme } = useContext(AppTheme);
-  const styles = storyTitleStyles({...theme, centerAlignStoryTitle});
+  const styles = storyTitleStyles(theme);
   const {
     premiumIcon, COLORS, FONT_SIZE
   } = theme;

package/src/components/StoryTitle/styles.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { StyleSheet } from 'react-native';
 export const storyTitleStyles = ({
-  COLORS, FONT_SIZE, FONT_FAMILY, lineHeightMultiplier,centerAlignStoryTitle
+  COLORS, FONT_SIZE, FONT_FAMILY, lineHeightMultiplier,
 }) => StyleSheet.create({
   container: {
     padding: 10,
@@ -12,7 +12,6 @@ export const storyTitleStyles = ({
     fontFamily: FONT_FAMILY.primaryBold,
     lineHeight: FONT_SIZE.title * lineHeightMultiplier,
     color: COLORS.BRAND_BLACK,
-    textAlign: centerAlignStoryTitle ? 'center' : 'auto',
   },
   subTitleStyle: {
     fontSize: FONT_SIZE.h3,

package/src/components/TextSummary/index.js CHANGED Viewed

@@ -36,10 +36,31 @@ export const TextSummary = (props) => {
         onLinkPress={(evt, href) => {
           useDeeplinkHandler(href);
         }}
+        listsPrefixesRenderers={{
+          ul: () => <View style={customTagsStyles['ul-bullet']} />,
+          ol: (htmlAttribs, children, convertedCSSStyles, passProps) => {
+            const { index } = passProps;
+            const bulletNumber = htmlAttribs.start ? parseInt(htmlAttribs.start) + index : index + 1;
+            return (
+              <Text style={customTagsStyles['ol-number']}>
+                {bulletNumber})
+              </Text>
+            );
+          },
+        }}
         tagsStyles={{
           del: customTagsStyles.del,
           ins: customTagsStyles.ins,
           p: customTagsStyles.p,
+          li: customTagsStyles.li,
+          ul: customTagsStyles.ul,
+          ol: customTagsStyles.ol,
+          a: customTagsStyles.a,
+          h2: customTagsStyles.h,
+          h3: customTagsStyles.h,
+          h4: customTagsStyles.h,
+          h5: customTagsStyles.h,
+          h6: customTagsStyles.h,
         }}
       />

package/src/components/TitleElement/styles.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { StyleSheet } from 'react-native';
 export const titleElementStyles = (appThemeContext) => {
-  const { COLORS } = appThemeContext;
+  const { COLORS, FONT_FAMILY } = appThemeContext;
   return StyleSheet.create({
     titleText: {
       fontSize: 20,
@@ -10,6 +10,7 @@ export const titleElementStyles = (appThemeContext) => {
       paddingRight: 10,
       paddingTop: 8,
       color: COLORS.BRAND_BLACK,
+      fontFamily: FONT_FAMILY.primaryBold,
     },
   });
 };

package/src/constants/renderHTML.js CHANGED Viewed

@@ -26,25 +26,40 @@ export const customHTMLStyles = () => {
       opacity: 0.85,
     },
     li: {
-      fontSize: FONT_SIZE.h3,
-      lineHeight: FONT_SIZE.h3 * 1.5,
-      marginTop: 8,
+      fontSize: FONT_SIZE.p1,
+      lineHeight: FONT_SIZE.p1 * 1.7,
+      marginBottom: -10,
       color: COLORS.BRAND_BLACK,
-      opacity: 0.85,
+      opacity: 0.95,
     },
     ul: {
-      height: 3,
-      borderRadius: 20,
-      marginTop: 24,
-      marginRight: 8,
-      padding: 3,
+      marginTop: 2,
+      marginBottom: 2,
+      marginLeft: 10
+    },
+    'ul-bullet': {
+      width: 8,
+      height: 8,
+      borderRadius: 4,
       backgroundColor: COLORS.BRAND_BLACK,
+      marginTop: 20,
+      marginRight: 8,
+      alignSelf: 'flex-start',
     },
     ol: {
-      marginTop: 16,
-      marginRight: 4,
+      marginTop: 7,
+      marginBottom: 7,
+      marginLeft: 10
+    },
+    'ol-number': {
+      fontSize: FONT_SIZE.p1,
+      lineHeight: FONT_SIZE.p1 * 1.7,
       color: COLORS.BRAND_BLACK,
       opacity: 0.85,
+      marginTop: 7,
+      marginRight: 8,
+      alignSelf: 'flex-start',
+      fontWeight: 'bold',
     },
     a: {
       marginTop: 7,