@quintype/native-components 2.20.0-fix-rtl-issues.1 → 2.20.0

package/src/components/SecondaryStoryCardNew/index.js

@@ -1,4 +1,4 @@
-import { throttle } from 'lodash';
+import { get, throttle } from 'lodash';
 import PropTypes from 'prop-types';
 import React, { useContext, memo } from 'react';
 import {
@@ -8,6 +8,7 @@ import {
   TextStyle,
   TouchableOpacityProps,
 } from 'react-native';
+import Icon from 'react-native-vector-icons/FontAwesome';
 import {
   AppTheme,
   getImageMetadata,
@@ -17,13 +18,25 @@ import {
 import { getStoryHeadline } from '../../utils/story';
 import { ResponsiveImage, Text } from '../index';
 import { storyStyles } from './styles';
+import {
+  COMP_GENERAL_CONSTANTS,
+  COMP_CONTENT_CONSTANTS,
+} from '../../constants/component-constants';
 
 const SecondaryStoryCardNewBase = (props) => {
   const { story = {} } = props;
   const { theme } = useContext(AppTheme);
-  const { locale } = theme;
+  const {
+    locale,
+    DARK_MODE,
+    COLORS,
+    reverseTimeAdverbPosition,
+    enableReadTimeOnStoryCards,
+  } = theme;
+
+  const translate = get(theme, ['translate'], (word) => word);
 
-  const styles = storyStyles(theme);
+  const styles = storyStyles(theme, DARK_MODE);
   const containerStyle = StyleSheet.flatten([
     styles.container,
     { paddingHorizontal: props.horizontalPadding },
@@ -38,12 +51,43 @@ const SecondaryStoryCardNewBase = (props) => {
   ]);
 
   const DATE_FORMAT = 'd MMM, yyyy';
-  const readTime = story['read-time'] ? `${story['read-time']} min read` : '';
+  const readTime = enableReadTimeOnStoryCards && story['read-time']
+    ? `${story['read-time']} ${translate('min read')} · `
+    : '';
 
   const throttledOnpress = throttle(props.onPress, 1000);
+
+  const showIcon = (name) => (
+    <View style={styles.storyType}>
+      <Icon name={name} size={14} color={COLORS.MONO7} />
+    </View>
+  );
+
+  const showLiveBlogIcon = () => (
+    <View style={styles.storyType}>
+      <View style={styles.liveBlogIcon} />
+      <Text style={styles.liveBlogText}>LIVE</Text>
+    </View>
+  );
+
+  const showStoryType = () => {
+    switch (story['story-template']) {
+      case 'text':
+        return null;
+      case 'photo':
+        return showIcon('photo');
+      case 'video':
+        return showIcon('play');
+      case 'live-blog':
+        return showLiveBlogIcon();
+      default:
+        null;
+    }
+  };
+
   return (
     <TouchableOpacity
-      testID={props.collectionTestID}
+      testID={COMP_GENERAL_CONSTANTS.secondaryStoryCard}
       onPress={throttledOnpress}
       activeOpacity={0.8}
       style={containerStyle}
@@ -53,25 +97,34 @@ const SecondaryStoryCardNewBase = (props) => {
         slug={getImageSlug(story) || ''}
         cdn={props.cdn || ''}
         imageWidth={props.imageWidth}
-      />
+      >
+        <View style={styles.storyTypeContainer}>{showStoryType()}</View>
+      </ResponsiveImage>
       <View style={styles.headlineAndTimestampBlockContainer}>
         <Text
           primary
           numberOfLines={2}
           ellipsizeMode="tail"
           style={headlineStyle}
-          testID="secondaryStoryCardHeadline"
+          testID={COMP_GENERAL_CONSTANTS.secondaryStoryHeadline}
         >
           {getStoryHeadline(story)?.trim()}
         </Text>
-        <View style={styles.timestampContainer}>
-          {readTime ? (
-            <Text style={timestampStyle}>{`${readTime} · `}</Text>
-          ) : null}
-          <Text style={timestampStyle} testID="secondaryStoryCardDate">
-            {getTimeForStoryCards(story['published-at'], DATE_FORMAT, locale)}
-          </Text>
-        </View>
+        <Text
+          style={timestampStyle}
+          numberOfLines={2}
+          // TODO: Add corrected testID here
+          testID={COMP_CONTENT_CONSTANTS.publishedDate}
+        >
+          {readTime
+            + getTimeForStoryCards(
+              story['published-at'],
+              DATE_FORMAT,
+              locale,
+              translate,
+              reverseTimeAdverbPosition,
+            )}
+        </Text>
       </View>
       <View style={styles.icon}>{props.iconComponent}</View>
     </TouchableOpacity>
@@ -84,7 +137,6 @@ SecondaryStoryCardNewBase.propTypes = TouchableOpacityProps && {
   headlineStyle: TextStyle,
   timestampStyle: TextStyle,
   story: PropTypes.any.isRequired,
-  collectionTestID: PropTypes.string,
   iconComponent: PropTypes.element,
   horizontalPadding: PropTypes.number,
 };

package/src/components/SecondaryStoryCardNew/styles.js

@@ -18,10 +18,6 @@ export const storyStyles = ({ COLORS, FONT_SIZE }) => StyleSheet.create({
     fontSize: FONT_SIZE.h5,
     lineHeight: FONT_SIZE.h5 * 1.2,
     opacity: 0.6,
-  },
-  timestampContainer: {
-    alignItems: 'center',
-    flexDirection: 'row',
     marginTop: 4,
   },
   headline: {
@@ -33,4 +29,32 @@ export const storyStyles = ({ COLORS, FONT_SIZE }) => StyleSheet.create({
   icon: {
     marginLeft: 8,
   },
+  storyTypeContainer: {
+    position: 'absolute',
+    backgroundColor: COLORS.MONO1,
+    bottom: 0,
+    left: 0,
+  },
+  storyType: {
+    padding: 5,
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    flexDirection: 'row',
+  },
+  storyTypeText: {
+    color: COLORS.MONO7,
+    fontSize: FONT_SIZE.h5,
+  },
+  liveBlogText: {
+    color: COLORS.MONO7,
+    fontSize: FONT_SIZE.h5,
+    marginLeft: 4,
+    fontWeight: 'bold',
+  },
+  liveBlogIcon: {
+    height: 12,
+    width: 12,
+    borderRadius: 50,
+    backgroundColor: COLORS.BRAND_3,
+  },
 });

package/src/components/ShareButton/index.js

@@ -6,10 +6,12 @@ import Share from 'react-native-share';
 import { AppTheme } from '../../utils';
 import { shareButtonStyles } from './styles';
 import { getStoryHeadline } from '../../utils/story';
+import { COMP_GENERAL_CONSTANTS } from '../../constants/component-constants';
 
 const ShareButtonBase = (props) => {
   const { theme } = useContext(AppTheme);
   const styles = shareButtonStyles(theme);
+  const { enableShareOnStoryCards } = theme;
   const { story, type = 'story', slug } = props;
 
   const getShareURL = () => {
@@ -42,11 +44,14 @@ const ShareButtonBase = (props) => {
     return null;
   }
 
-  return (
-    <TouchableOpacity onPress={share}>
+  return enableShareOnStoryCards ? (
+    <TouchableOpacity
+      onPress={share}
+      testID={COMP_GENERAL_CONSTANTS.shareButtonTouch}
+    >
       <Icon style={styles.iconStyle} name="share-social-outline" size={20} />
     </TouchableOpacity>
-  );
+  ) : null;
 };
 
 ShareButtonBase.propTypes = {

package/src/components/SlideshowStoryCard/styles.js

@@ -1,5 +1,5 @@
 import { StyleSheet, Dimensions } from 'react-native';
-
+import { COMP_GENERAL_CONSTANTS }  from '../../constants/component-constants/general-constants/constants'
 const { width } = Dimensions.get('window');
 
 export const slideshowStoryCardStyles = ({ COLORS }) => {
@@ -21,7 +21,8 @@ export const slideshowStoryCardStyles = ({ COLORS }) => {
       flexDirection: 'column',
     },
     attributionText: {
-      color: COLORS.BRAND_BLACK
+      color: COLORS.BRAND_BLACK,
+      textAlign : COMP_GENERAL_CONSTANTS.textAlignment
     }
   })
 }

package/src/components/Story/index.js

@@ -47,7 +47,7 @@ const getLiveBlogTimeStamp = (card, DATE_FORMAT, share, styles, locale) => {
 
 /* Mutate the data during access check to limit the content shown */
 const mutateDataBeforeAccess = (item, storyHasAccess) => {
-  if (isStoryFree(item)) {
+  if (isStoryFree(item) === 0 || storyHasAccess === 'granted') {
     return item;
   }
   if (storyHasAccess !== 'loading' && storyHasAccess === 'granted') {
@@ -55,7 +55,7 @@ const mutateDataBeforeAccess = (item, storyHasAccess) => {
   }
   /* The following steps are necessary to keep argument mutation at bay */
   const firstCardObject = get(item, ['cards', 0], {});
-  const firstCardElement = get(firstCardObject, ['story-elements', 0], {});
+  const firstCardElement = get(firstCardObject, !STORY_TYPES.VIDEO_STORY && ['story-elements', 0], {});
 
   return {
     ...item,
@@ -119,8 +119,11 @@ const getStoryCards = (
     )}
     {/* Skip first card if it's a listicle */}
 
-    {source.length > 1 && isMiddleIndexOfArray(index, source) && getAd(true)}
-    {/* ^ Requesting Ad if there are multiple cards. Sending param true for mid-content ad */}
+    {source.length > (storyType === STORY_TYPES.VIDEO_STORY ? 2 : 1)
+      && isMiddleIndexOfArray(index, source)
+      && getAd(true)}
+    {/* ^ Requesting mid-content-ad if there are > 1 card
+      (> 2 cards in case of video story since the 1st card gets rendered in header). */}
 
     {(card['story-elements'] || []).map((storyElement, index, source) => {
       /* Skip the first video element for video story */
@@ -129,10 +132,12 @@ const getStoryCards = (
       return (
         <>
           {cards.length === 1
-              && source.length > 1
-              && isMiddleIndexOfArray(index, source)
-              && getAd(true)}
-          {/* ^ Requesting Ad if there's just one card but multiple elements. Sending param true for mid-content ad */}
+            && source.length > (storyType === STORY_TYPES.VIDEO_STORY ? 2 : 1)
+            && isMiddleIndexOfArray(index, source)
+            && getAd(true)}
+          {/* ^ In the case of a story having just 1 card,
+            requesting mid-content-Ad if there are > 1 story-elements in that card
+            (> 2 story-elements in case of video story since the 1st story-element gets rendered in header). */}
 
           <StoryContent
             testID={contentTestID}
@@ -194,9 +199,8 @@ export const Story = ({
 
   const shouldShowComments = () => {
     if (!enableFbComments) return null;
-
     if (
-      isStoryFree(story)
+      isStoryFree(story) === 0
       || (storyHasAccess !== 'loading' && storyHasAccess === 'granted')
     ) {
       return (

package/src/components/StoryHeader/index.js

@@ -19,7 +19,7 @@ import { YouTubePlayer } from '../YouTubePlayer';
 import { storyHeaderStyles } from './styles';
 import { COMP_CONTENT_CONSTANTS } from '../../constants/component-constants/content-constants/constants';
 
-/* import {DailyMotionPlayer} from "../DailyMotionPlayer"; */
+import { DailyMotionPlayer } from '../DailyMotionPlayer';
 
 const DATE_FORMAT = 'd  MMMM yyyy h:mm a';
 
@@ -44,9 +44,9 @@ const getHeroComponent = (props) => {
     case STORY_TYPES.VIDEO_STORY: {
       if (!firstVideoElement) return null;
       switch (firstVideoElement.type) {
-        /* case "jsembed":{
-            return <DailyMotionPlayer element={firstVideoElement} />;
-          } */
+        case 'jsembed': {
+          return <DailyMotionPlayer element={firstVideoElement} />;
+        }
         case 'youtube-video': {
           return (
             <YouTubePlayer
@@ -69,8 +69,10 @@ export const StoryHeader = (props) => {
   const { story } = props;
   const sectionData = get(story, ['sections', 0], {});
   const { theme } = useContext(AppTheme);
-  const { COLORS, CAN_COPY_TEXT, locale } = theme;
-  const styles = storyHeaderStyles(COLORS);
+  const {
+    COLORS, CAN_COPY_TEXT, locale, FONT_FAMILY,
+  } = theme;
+  const styles = storyHeaderStyles(COLORS, FONT_FAMILY);
   const imgCaption = story['hero-image-caption'];
   const attri = story['hero-image-attribution'];
   const imgAttribution = imgCaption && attri ? ` | ${attri}` : attri;
@@ -91,7 +93,7 @@ export const StoryHeader = (props) => {
           }}
         />
         <HTML
-          html={imgAttribution}
+          html={attri}
           textSelectable={CAN_COPY_TEXT}
           key={Math.random()}
           baseFontStyle={styles.attributionStyle}

package/src/components/StoryHeader/styles.js

@@ -1,6 +1,6 @@
 import { StyleSheet } from 'react-native';
 
-export const storyHeaderStyles = (COLORS) => StyleSheet.create({
+export const storyHeaderStyles = (COLORS, FONT_FAMILY) => StyleSheet.create({
   tagStyle: {
     padding: 10,
     backgroundColor: COLORS.BRAND_7,
@@ -29,15 +29,17 @@ export const storyHeaderStyles = (COLORS) => StyleSheet.create({
     padding: 10,
     paddingBottom: 0,
     color: COLORS.BRAND_BLACK,
+    fontFamily: FONT_FAMILY.secondary,
     opacity: 0.8,
   },
   attributionStyle: {
     color: COLORS.BRAND_BLACK,
+    fontFamily: FONT_FAMILY.secondary,
     opacity: 0.8,
   },
   captionContainerStyle: {
     paddingHorizontal: 5,
-    flexDirection: 'row',
+    flexDirection: 'column',
     flexWrap: 'wrap',
     marginTop: 10,
   },

package/src/components/StoryImage/index.js

@@ -28,7 +28,7 @@ export const StoryImage = ({
     if (!card['image-attribution']) return null;
     return (
       <Text style={styles.attributionText}>
-        {` | ${card['image-attribution']}`}
+        {` | ${stripHTML(card['image-attribution'])}`}
       </Text>
     );
   };

package/src/components/StoryImage/styles.js

@@ -1,8 +1,8 @@
 import { StyleSheet } from 'react-native';
 import { getImageHeight } from '../../utils';
 
-export const storyImageStyles = ({ COLORS, FONT_SIZE }, metadata) => {
-  const { width, height } = metadata;
+export const storyImageStyles = ({ COLORS, FONT_SIZE }, metadata = {}) => {
+  const { width, height } = metadata || {};
   const imageHeight = getImageHeight(width, height);
 
   return StyleSheet.create({

package/src/components/StoryText/index.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
 import {
-  View, StyleSheet, Linking, Text,
+  View, StyleSheet, Linking, Text, I18nManager,
 } from 'react-native';
 import HTML from 'react-native-render-html';
 import { AppTheme } from '../../utils/context';
@@ -21,8 +21,10 @@ export const StoryText = (props) => {
     {
       fontFamily: FONT_FAMILY.secondary,
       fontWeight: props.question ? '600' : 'normal',
+      writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr',
     },
   ]);
+
   const customTagsStyles = customHTMLStyles();
 
   return (

package/src/components/StoryText/styles.js

@@ -1,4 +1,5 @@
 import { StyleSheet } from 'react-native';
+import { COMP_GENERAL_CONSTANTS } from '../../constants/component-constants/general-constants/constants';
 
 export const storyTextStyles = (COLORS, FONT_SIZE) => StyleSheet.create({
   container: {
@@ -8,5 +9,6 @@ export const storyTextStyles = (COLORS, FONT_SIZE) => StyleSheet.create({
     fontSize: FONT_SIZE.h2,
     lineHeight: FONT_SIZE.h2 * 1.5,
     color: COLORS.BRAND_8,
+    textAlign: COMP_GENERAL_CONSTANTS.textAlignment,
   },
 });

package/src/components/Table/index.js

@@ -27,7 +27,7 @@ export const Table = ({ card }) => {
         <View style={styles.tableRow}>
           {headerFields.map((headerField) => (
             <View style={styles.tableHeaderTitle}>
-              <Text>{data[headerField]}</Text>
+              <Text style={styles.tableContect}>{data[headerField]}</Text>
             </View>
           ))}
         </View>

package/src/components/Table/styles.js

@@ -1,5 +1,4 @@
 import { StyleSheet } from 'react-native';
-
 export const tableStyles = ({ COLORS }) => StyleSheet.create({
   container: {
     flexDirection: 'row',
@@ -15,6 +14,7 @@ export const tableStyles = ({ COLORS }) => StyleSheet.create({
     justifyContent: 'center',
     borderWidth: 0.5,
     borderColor: COLORS.BRAND_4,
+    color: COLORS.BRAND_4,
   },
   tableBody: {
     flexDirection: 'column',
@@ -22,4 +22,7 @@ export const tableStyles = ({ COLORS }) => StyleSheet.create({
   tableRow: {
     flexDirection: 'row',
   },
-});
+  tableContect: {
+    color: COLORS.BRAND_BLACK,
+  },
+});

package/src/components/TextBigFact/index.js

@@ -40,8 +40,7 @@ export const TextBigFact = ({ text, attribution, id }) => {
       />
       {!!attribution && (
         <Text style={styles.authorText}>
-          -
-          {attribution}
+          {`- ${attribution}`}
         </Text>
       )}
     </View>

package/src/components/TextBigFact/styles.js

@@ -1,4 +1,5 @@
 import { StyleSheet } from 'react-native';
+import { COMP_GENERAL_CONSTANTS } from '../../constants/component-constants/general-constants/constants';
 
 export const bigTextStyles = (COLORS, FONT_SIZE, DARK_MODE) => StyleSheet.create({
   container: {
@@ -11,10 +12,12 @@ export const bigTextStyles = (COLORS, FONT_SIZE, DARK_MODE) => StyleSheet.create
     color: DARK_MODE ? COLORS.BRAND_BLACK : COLORS.BRAND_WHITE,
     lineHeight: FONT_SIZE.h1 * 1.3,
     marginVertical: 10,
+    textAlign: COMP_GENERAL_CONSTANTS.textAlignment,
   },
   authorText: {
     fontSize: FONT_SIZE.h5,
     color: DARK_MODE ? COLORS.BRAND_BLACK : COLORS.BRAND_WHITE,
     lineHeight: FONT_SIZE.h5 * 1.3,
+    textAlign: COMP_GENERAL_CONSTANTS.textAlignment,
   },
 });

package/src/components/TextBlockQuote/index.js

@@ -26,8 +26,10 @@ export const TextBlockQuote = ({ text, attribution }) => {
 
   return (
     <View testID="text-block-quote" style={styles.container}>
-      <Icon name="quote-left" size={46} color={DARK_MODE ? COLORS.BRAND_BLACK : COLORS.BRAND_WHITE} />
-      <HTML
+      <View style={styles.topBorderContainer}>
+        <Icon name="quote-left" size={46} color={DARK_MODE ? COLORS.BRAND_BLACK : COLORS.BRAND_WHITE} />
+      </View>
+     <HTML
         alterData={alterQuoteData}
         html={text}
         textSelectable={CAN_COPY_TEXT}
@@ -44,8 +46,7 @@ export const TextBlockQuote = ({ text, attribution }) => {
       />
       {!!attribution && (
       <Text style={styles.authorText}>
-        -
-        {attribution}
+       {`- ${attribution}`}
       </Text>
       )}
     </View>

package/src/components/TextBlockQuote/styles.js

@@ -1,4 +1,5 @@
 import { StyleSheet } from 'react-native';
+import { COMP_GENERAL_CONSTANTS } from '../../constants/component-constants/general-constants/constants';
 
 export const blockQuoteTextStyles = (FONT_SIZE, COLORS, DARK_MODE) => StyleSheet.create({
   container: {
@@ -11,10 +12,17 @@ export const blockQuoteTextStyles = (FONT_SIZE, COLORS, DARK_MODE) => StyleSheet
     color: DARK_MODE ? COLORS.BRAND_BLACK : COLORS.BRAND_WHITE,
     lineHeight: FONT_SIZE.h1 * 1.3,
     marginVertical: 10,
+    textAlign: COMP_GENERAL_CONSTANTS.textAlignment,
   },
   authorText: {
     fontSize: FONT_SIZE.h5,
     color: DARK_MODE ? COLORS.BRAND_BLACK : COLORS.BRAND_WHITE,
     lineHeight: FONT_SIZE.h5 * 1.3,
+    textAlign: COMP_GENERAL_CONSTANTS.textAlignment,
+  },
+  topBorderContainer: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    marginBottom: 8,
   },
 });

package/src/components/TextBlurb/styles.js

@@ -1,4 +1,5 @@
 import { StyleSheet } from 'react-native';
+import { COMP_GENERAL_CONSTANTS }  from '../../constants/component-constants/general-constants/constants'
 
 export const textBlurbStyles = (FONT_SIZE) => StyleSheet.create({
   container: {
@@ -9,5 +10,6 @@ export const textBlurbStyles = (FONT_SIZE) => StyleSheet.create({
   blurbText: {
     fontSize: FONT_SIZE.h3,
     lineHeight: FONT_SIZE.h3 * 1.3,
+    textAlign : COMP_GENERAL_CONSTANTS.textAlignment
   },
 });

package/src/components/TextQandA/styles.js

@@ -8,13 +8,13 @@ export const textQandAStyles = (COLORS, FONT_SIZE) => StyleSheet.create({
     fontSize: FONT_SIZE.h2,
     fontWeight: '600',
     lineHeight: FONT_SIZE.h2 * 1.3,
-    color: COLORS.BRAND_8,
-    opacity: 0.8
+    color: COLORS.BRAND_BLACK,
+    opacity: 0.8,
   },
   answerText: {
     fontSize: FONT_SIZE.h2,
     lineHeight: FONT_SIZE.h2 * 1.3,
     color: COLORS.BRAND_BLACK,
-    opacity: 0.8
+    opacity: 0.8,
   },
 });

package/src/components/TextQuote/styles.js

@@ -1,4 +1,5 @@
 import { StyleSheet } from 'react-native';
+import { COMP_GENERAL_CONSTANTS } from '../../constants/component-constants/general-constants/constants';
 
 export const textQuoteStyles = (COLORS, FONT_SIZE) => StyleSheet.create({
   container: {
@@ -19,14 +20,15 @@ export const textQuoteStyles = (COLORS, FONT_SIZE) => StyleSheet.create({
     fontSize: FONT_SIZE.h1,
     lineHeight: FONT_SIZE.h1 * 1.3,
     color: COLORS.BRAND_BLACK,
-    opacity: 0.9
+    opacity: 0.9,
+    textAlign: COMP_GENERAL_CONSTANTS.textAlignment,
   },
   attributionText: {
     fontSize: FONT_SIZE.h3,
     lineHeight: FONT_SIZE.h3 * 1.3,
     color: COLORS.BRAND_BLACK,
     alignItems: 'flex-end',
-    textAlign: 'right',
+    textAlign: COMP_GENERAL_CONSTANTS.textAlignment,
   },
   quoteTopBorder: {
     backgroundColor: COLORS.BRAND_1,
@@ -43,5 +45,6 @@ export const textQuoteStyles = (COLORS, FONT_SIZE) => StyleSheet.create({
     marginVertical: 10,
     alignSelf: 'flex-end',
     flexDirection: 'row',
+    width: '100%',
   },
 });

package/src/components/TextSummary/styles.js

@@ -1,4 +1,5 @@
 import { StyleSheet } from 'react-native';
+import { COMP_GENERAL_CONSTANTS }  from '../../constants/component-constants/general-constants/constants'
 
 export const textSummaryStyles = (FONT_SIZE, COLORS) => StyleSheet.create({
   container: {
@@ -14,6 +15,7 @@ export const textSummaryStyles = (FONT_SIZE, COLORS) => StyleSheet.create({
     color: COLORS.BRAND_6,
     fontSize: FONT_SIZE.h2,
     lineHeight: FONT_SIZE.h2 * 1.3,
+    textAlign: COMP_GENERAL_CONSTANTS.textAlignment
   },
   summaryText: {
     color: COLORS.BRAND_1,

package/src/components/YouTubePlayer/index.js

@@ -36,6 +36,7 @@ const webviewStyles = (windowWidth) => {
     },
     container: {
       flex: 1,
+      marginVertical: 10,
     },
   };
 };

package/src/constants/component-constants/content-constants/constants.js

@@ -1,7 +1,9 @@
 export const COMP_CONTENT_CONSTANTS = {
-  storyTitle: 'COMP_STORY_TITLE',
-  storySubTitle: 'COMP_STORY_SUBTITLE',
-  sectionName: 'COMP_STORY_SECTION_NAME',
-  publishedDate: 'COMP_STORY_PUBLISHED_DATE',
-  relatedStoriesLabel: 'COMP_STORY_RELATEDSTORIES_LABEL',
+  storyTitle: "COMP_STORY_TITLE",
+  storySubTitle: "COMP_STORY_SUBTITLE",
+  sectionName: "COMP_STORY_SECTION_NAME",
+  publishedDate: "COMP_STORY_PUBLISHED_DATE",
+  relatedStoriesLabel: "COMP_STORY_RELATEDSTORIES_LABEL",
+  authorName: "COMP_STORY_AUTHOR_NAME",
+  authorImage: "COMP_STORY_AUTHOR_IMAGE",
 };