@quintype/native-components 2.30.0 → 2.30.1--alt-story-layout-beta

package/package.json

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

package/src/components/Story/index.js

@@ -151,7 +151,8 @@ export const Story = ({
   setShowTTSPlayer,
   gaTrigerredTTS,
   commentData,
-  commentLoader
+  commentLoader,
+  storyLayout
 }) => {
   const { theme } = useContext(AppTheme);
   const { COLORS, FONT_SIZE, locale, DARK_MODE,translate, enableComments } = theme;
@@ -374,6 +375,7 @@ export const Story = ({
         story={story}
         onAuthorPress={onAuthorPress}
         onSectionPress={onSectionPress}
+        storyLayout={storyLayout}
       />
   { 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 } = props;
+  const { story, firstVideoElement, storyLayout } = props;
   const sectionData = get(story, ['sections', 0], {});
   const { theme } = useContext(AppTheme);
 
@@ -80,14 +80,16 @@ export const StoryHeader = (props) => {
   const isPremiumStory = story['access'] === 'subscription';
   const reviewTitle = story['metadata'] && story['metadata']['review-title'];
   const reviewData = story['metadata'] && story['metadata']['review-rating'];
+  const isHeadLinePriorityLayout = storyLayout === 'headline-priority';
 
-  const showAttribution = () => {
+  const showAttribution = (storyLayout) => {
+    const captionStyle = isHeadLinePriorityLayout ? styles.headlinePriority.captionStyle : styles.captionStyle;
     if (!caption && !attribution) {
       return null;
     }
     return (
       <View style={styles.captionContainerStyle}>
-        {caption && !firstVideoElement && <CustomHtmlParser text={caption} textStyle={styles.captionStyle} containerStyle={{marginTop:-6, marginBottom:-15}}/>}
+        {caption && !firstVideoElement && <CustomHtmlParser text={caption} textStyle={captionStyle} containerStyle={{marginTop:-6, marginBottom:-15}}/>}
         {attribution && !firstVideoElement && <CustomHtmlParser text={attribution} textStyle={styles.attributionStyle} containerStyle={{marginTop:-6, marginBottom:-10}}/>}
       </View>
     );
@@ -102,23 +104,59 @@ export const StoryHeader = (props) => {
     slug && props.onSectionPress(slug);
   };
 
+  const getSectionName = (storyLayout = 'default') => {
+    const style = isHeadLinePriorityLayout ? styles.headlinePriority.sectionText : styles.sectionText
+    return <TouchableOpacity onPress={navigateToSection}>
+      <Text
+        style={style}
+        testID={COMP_CONTENT_CONSTANTS.sectionName}
+      >
+        {sectionData['display-name'] || ''}
+      </Text>
+    </TouchableOpacity>
+  }
+
+  const getAuthorRow = () => {
+    return <AuthorRow
+      authors={story.authors}
+      onPress={props.onAuthorPress}
+      cdn={props.cdn}
+      readtime={story['read-time']}
+    />
+  }
+
+  const getDateTime = () => {
+    return <Text
+      style={styles.dateText}
+      testID={COMP_CONTENT_CONSTANTS.publishedDate}
+    >
+      {getTimeInFormat(story['published-at'], DATE_FORMAT, locale)}
+    </Text>
+  }
+
+  if (isHeadLinePriorityLayout) {
+    return (
+      <View testID={props.testID}>
+        {getSectionName(storyLayout)}
+        <StoryTitle title={story.headline} subTitle={story.subheadline} isPremiumStory={isPremiumStory} />
+        {getHeroComponent(props)}
+        {showAttribution(storyLayout)}
+        <View style={styles.dateBlock}>
+          {getDateTime()}
+        </View>
+        {getAuthorRow()}
+        {reviewTitle && <RatingLayout reviewTitle={reviewTitle} ratingValue={reviewData?.value} ratingLabel={reviewData?.label} />}
+      </View>
+    );
+  }
+
   return (
     <View testID={props.testID}>
       {getHeroComponent(props)}
-
       {showAttribution()}
-
       <View style={styles.dateBlock}>
-        <TouchableOpacity onPress={navigateToSection}>
-          <Text
-            style={styles.sectionText}
-            testID={COMP_CONTENT_CONSTANTS.sectionName}
-          >
-            {sectionData['display-name'] || ''}
-          </Text>
-        </TouchableOpacity>
+        {getSectionName()}
         <View style={styles.divider} />
-
         {/* TODO: check why published at is undefined for some stories */}
         <Text
           style={styles.dateText}
@@ -128,12 +166,7 @@ export const StoryHeader = (props) => {
         </Text>
       </View>
         <StoryTitle title={story.headline} subTitle={story.subheadline} isPremiumStory={isPremiumStory}/>
-      <AuthorRow
-        authors={story.authors}
-        onPress={props.onAuthorPress}
-        cdn={props.cdn}
-        readtime={story['read-time']}
-      />
+        {getAuthorRow()}
       {reviewTitle && <RatingLayout reviewTitle={reviewTitle} ratingValue={reviewData?.value} ratingLabel={reviewData?.label}/>}
     </View>
   );

package/src/components/StoryHeader/styles.js

@@ -49,4 +49,16 @@ export const storyHeaderStyles = (COLORS, FONT_FAMILY) => StyleSheet.create({
     width: 1.3,
     backgroundColor: COLORS.BRAND_6,
   },
+  headlinePriority: {
+    sectionText: {
+      color: COLORS.BRAND_1,
+      marginLeft: 10,
+      marginTop: 10,
+    },
+    captionStyle: {
+      color: COLORS.BRAND_BLACK,
+      fontFamily: FONT_FAMILY.secondary,
+      fontWeight: "bold",
+    },
+  }
 });

package/src/components/StoryTitle/index.js

@@ -7,12 +7,13 @@ 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 }) => {
+export const StoryTitle = ({ title, subTitle, isPremiumStory, isHeadLinePriorityLayout }) => {
   const { theme } = useContext(AppTheme);
   const styles = storyTitleStyles(theme);
   const {
     premiumIcon, COLORS, FONT_SIZE
   } = theme;
+  const subTitleStyle = isHeadLinePriorityLayout? styles.headLinePriority.subTitleStyle : styles.subTitleStyle;
   return (
     <View style={styles.container}>
       <Text
@@ -27,7 +28,7 @@ export const StoryTitle = ({ title, subTitle, isPremiumStory }) => {
 
       {subTitle && (
         <Text
-          style={styles.subTitleStyle}
+          style={subTitleStyle}
           testID={COMP_CONTENT_CONSTANTS.storySubTitle}
         >
           {subTitle || ''}

package/src/components/StoryTitle/styles.js

@@ -25,4 +25,13 @@ export const storyTitleStyles = ({
     marginRight: -5,
     borderWidth: 1,
   },
+  headLinePriority: {
+    subTitleStyle: {
+    fontSize: FONT_SIZE.h3,
+    lineHeight: FONT_SIZE.h3 * lineHeightMultiplier,
+    color: COLORS.BRAND_6,
+    marginTop: 10,
+    marginBottom: 12
+    }
+  }
 });