@quintype/native-components 2.30.2--alt-story-layout-beta → 2.30.2-center-align-title-beta-1

package/package.json

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

package/src/components/Header/index.js

@@ -12,12 +12,35 @@ import { headerStyles } from "./styles";
 
 export const Header = (props) => {
   const { theme } = useContext(AppTheme);
-  const styles = headerStyles(theme, props.noBorder);
+  const { noBorder, centerAlignLogo } = props || {};
+  const styles = headerStyles(theme, noBorder, centerAlignLogo);
   const headerStyle = StyleSheet.flatten([styles.header, props.style]);
   const logoComponentStyle = StyleSheet.flatten([
     styles.logoComponentStyle,
     props.logoComponentStyle,
   ]);
+  if (centerAlignLogo) {
+    return (
+      <View style={styles.header}>
+        <View style={styles.leftContainer}>
+          {props.leftComponent && props.leftComponent}
+        </View>
+          {props.logoComponent && (
+            <TouchableOpacity
+              style={logoComponentStyle}
+              onPress={props.onPress}
+              testID={COMP_GENERAL_CONSTANTS.headerLogoTouch}
+            >
+              {props.logoComponent}
+            </TouchableOpacity>
+          )}
+        <View style={styles.rightContainer}>
+          {props.rightComponent && props.rightComponent}
+        </View>
+      </View>
+    )
+  }
+
   return (
     <View style={headerStyle}>
       <View>

package/src/components/Header/styles.js

@@ -1,19 +1,35 @@
 import { StyleSheet } from 'react-native';
 
-export const headerStyles = (appThemeContext, noBorder) => {
+export const headerStyles = (appThemeContext, noBorder, centerAlignLogo) => {
   const { COLORS, DARK_MODE } = appThemeContext;
-  return StyleSheet.create({
+  const headerContainerStyles = {
     header: {
       height: 48,
       backgroundColor: DARK_MODE ? COLORS.MONO6 : COLORS.BRAND_WHITE,
       flexDirection: 'row',
       alignItems: 'center',
-      justifyContent: 'space-between',
+      justifyContent: centerAlignLogo ? 'center' : 'space-between',
       paddingHorizontal: 10,
       borderBottomColor: noBorder
         ? (DARK_MODE ? COLORS.BRAND_WHITE : COLORS.BRAND_BLACK)
         : (DARK_MODE ? COLORS.MONO6 : COLORS.BRAND5),
       borderBottomWidth: StyleSheet.hairlineWidth,
-    },
-  });
+    }
+  }
+
+  if (centerAlignLogo) {
+    return StyleSheet.create({
+      ...headerContainerStyles,
+      leftContainer: {
+        flex: 1, // Takes up all left space
+        alignItems: 'flex-start', // Aligns leftView to the left
+      },
+      rightContainer: {
+        flex: 1, // Takes up all right space
+        alignItems: 'flex-end', // Aligns rightView to the right
+      }
+    });
+  }
+
+  return StyleSheet.create(headerContainerStyles);
 };

package/src/components/Story/index.js

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

package/src/components/StoryHeader/index.js

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

package/src/components/StoryHeader/styles.js

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

package/src/components/StoryTitle/index.js

@@ -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 }) => {
+export const StoryTitle = ({ title, subTitle, isPremiumStory, isHeadLinePriorityLayout, centerAlignStoryTitle }) => {
   const { theme } = useContext(AppTheme);
-  const styles = storyTitleStyles(theme);
+  const styles = storyTitleStyles({...theme, centerAlignStoryTitle});
   const {
     premiumIcon, COLORS, FONT_SIZE
   } = theme;

package/src/components/StoryTitle/styles.js

@@ -1,7 +1,7 @@
 import { StyleSheet } from 'react-native';
 
 export const storyTitleStyles = ({
-  COLORS, FONT_SIZE, FONT_FAMILY, lineHeightMultiplier,
+  COLORS, FONT_SIZE, FONT_FAMILY, lineHeightMultiplier,centerAlignStoryTitle
 }) => StyleSheet.create({
   container: {
     padding: 10,
@@ -12,6 +12,7 @@ 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/Text/index.js

@@ -8,16 +8,34 @@ import { AppTheme } from '../../utils/context';
 
 export const Text = (props) => {
   const { theme } = useContext(AppTheme);
-  const { FONT_FAMILY, COLORS, CAN_COPY_TEXT } = theme;
+  const {
+    FONT_FAMILY, COLORS, CAN_COPY_TEXT, lineHeightMultiplier,
+  } = theme;
+
+  // Flatten the style first
+  const flattenedStyle = StyleSheet.flatten([props.style]) || {};
+
+  // Use fontSize from style or fallback, and lineHeight from style or calculate
+  const { fontSize } = flattenedStyle;
+  let lineHeight;
+  if (flattenedStyle.lineHeight != null) {
+    lineHeight = flattenedStyle.lineHeight;
+  } else if (fontSize != null) {
+    lineHeight = fontSize * (lineHeightMultiplier ?? 1.5);
+  }
 
   const RNStyle = {
     fontFamily: props.primary ? FONT_FAMILY.primary : FONT_FAMILY.secondary,
     writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr',
+    ...(fontSize != null ? { fontSize } : {}),
+    ...(lineHeight != null ? { lineHeight } : {}),
   };
-  const flattenedStyle = StyleSheet.flatten([RNStyle, props.style]);
 
-  const { ellipsizeMode, numberOfLines, allowFontScaling, testID } = props;
+  const mergedStyle = StyleSheet.flatten([RNStyle, props.style]);
 
+  const {
+    ellipsizeMode, numberOfLines, allowFontScaling, testID,
+  } = props;
   const textData = I18nManager.isRTL ? `\u200F${props.children}` : props.children;
 
   return (
@@ -29,7 +47,7 @@ export const Text = (props) => {
       ellipsizeMode={ellipsizeMode}
       numberOfLines={numberOfLines}
       testID={testID}
-      style={flattenedStyle}
+      style={mergedStyle}
       fontFamily={RNStyle.fontFamily}
       allowFontScaling={allowFontScaling}
     >