@quintype/native-components 2.20.0-fix-rtl-issues.0 → 2.20.1-temp-fast-image-constraint.0

package/CHANGELOG.md

@@ -2,6 +2,52 @@
 
 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.19.11](https://github.com/quintype/native-components/compare/v2.19.9...v2.19.11) (2022-01-24)
+
+
+### Bug Fixes
+
+* **story-cards:** Adds missing translations, fixes text overflow issue by adding multiline ([#179](https://github.com/quintype/native-components/issues/179)) ([93ab137](https://github.com/quintype/native-components/commit/93ab1372fad312b653e5d6d6992d625d217c9455))
+
+### [2.19.10](https://github.com/quintype/native-components/compare/v2.19.9...v2.19.10) (2022-01-24)
+
+
+### Bug Fixes
+
+* **story-cards:** Adds missing translations, fixes text overflow issue by adding multiline ([#179](https://github.com/quintype/native-components/issues/179)) ([93ab137](https://github.com/quintype/native-components/commit/93ab1372fad312b653e5d6d6992d625d217c9455))
+
+### [2.19.9](https://github.com/quintype/native-components/compare/v2.19.8...v2.19.9) (2022-01-13)
+
+### [2.19.8](https://github.com/quintype/native-components/compare/v2.19.7...v2.19.8) (2022-01-10)
+
+### [2.19.7](https://github.com/quintype/native-components/compare/v2.19.0...v2.19.7) (2022-01-07)
+
+
+### Bug Fixes
+
+* **AlsoRead:** Changed dark-mode color for the text :hammer: ([#170](https://github.com/quintype/native-components/issues/170)) ([67f1e61](https://github.com/quintype/native-components/commit/67f1e61fd4b76ea6fa65f565006214981d0bb8a8))
+* **AlsoRead:** Fixed card height :hammer: ([#174](https://github.com/quintype/native-components/issues/174)) ([6ce7a60](https://github.com/quintype/native-components/commit/6ce7a6078ec699f0f3df74d8136fc64070921caa))
+* **Navigator:** Fixed Section title text overflow :hammer: ([#176](https://github.com/quintype/native-components/issues/176)) ([249672b](https://github.com/quintype/native-components/commit/249672b44f6559190e930fc78a11d83a8e94c009))
+* **old-UI:** Fixes all padding/image-aspect-ratio inconsistencies 🔨  ([#169](https://github.com/quintype/native-components/issues/169)) ([f3b8850](https://github.com/quintype/native-components/commit/f3b88507c02985ff83aadd266e0dbd04438fd441))
+
+### [2.19.6](https://github.com/quintype/native-components/compare/v2.19.5...v2.19.6) (2021-12-30)
+
+### [2.19.5](https://github.com/quintype/native-components/compare/v2.19.3...v2.19.5) (2021-12-29)
+
+
+### Bug Fixes
+
+* **Navigator:** Fixed Section title text overflow :hammer: ([#176](https://github.com/quintype/native-components/issues/176)) ([249672b](https://github.com/quintype/native-components/commit/249672b44f6559190e930fc78a11d83a8e94c009))
+
+### [2.19.3](https://github.com/quintype/native-components/compare/v2.18.4...v2.19.3) (2021-10-28)
+
+
+### Bug Fixes
+
+* **AlsoRead:** Changed dark-mode color for the text :hammer: ([#170](https://github.com/quintype/native-components/issues/170)) ([67f1e61](https://github.com/quintype/native-components/commit/67f1e61fd4b76ea6fa65f565006214981d0bb8a8))
+* **AlsoRead:** Fixed card height :hammer: ([#174](https://github.com/quintype/native-components/issues/174)) ([6ce7a60](https://github.com/quintype/native-components/commit/6ce7a6078ec699f0f3df74d8136fc64070921caa))
+* **old-UI:** Fixes all padding/image-aspect-ratio inconsistencies 🔨  ([#169](https://github.com/quintype/native-components/issues/169)) ([f3b8850](https://github.com/quintype/native-components/commit/f3b88507c02985ff83aadd266e0dbd04438fd441))
+
 ### [2.19.2](https://github.com/quintype/native-components/compare/v2.19.1...v2.19.2) (2021-10-19)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quintype/native-components",
-  "version": "2.20.0-fix-rtl-issues.0",
+  "version": "2.20.1-temp-fast-image-constraint.0",
   "description": "",
   "main": "src/index.js",
   "scripts": {
@@ -17,7 +17,7 @@
     "prop-types": "15.7.2",
     "quintype-js": "1.2.1",
     "react-htmltext": "^0.40.2",
-    "react-native-fast-image": "8.3.2",
+    "react-native-fast-image": "8.2.0",
     "react-native-image-pan-zoom": "^2.1.12",
     "react-native-lightbox": "0.8.1",
     "react-native-pdf": "^5.1.4",

package/src/Icons/ClockIcon/index.js

@@ -1,11 +1,15 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import Svg, { Path } from 'react-native-svg';
+import { AppTheme } from "../../utils/context";
 
-export const ClockIcon = (props) => (
-  <Svg width={24} height={24} {...props}>
+export const ClockIcon = (props) => {
+  const { theme } = useContext(AppTheme);
+  const { COLORS } = theme;
+  const color = COLORS.BRAND_BLACK;
+  return <Svg width={24} height={24} {...props}>
     <Path
-      fill="#333"
+      fill={color}
       d="M12 4.25c1.396 0 2.687.349 3.875 1.047a7.831 7.831 0 012.828 2.828A7.513 7.513 0 0119.75 12a7.513 7.513 0 01-1.047 3.875 7.831 7.831 0 01-2.828 2.828A7.513 7.513 0 0112 19.75a7.513 7.513 0 01-3.875-1.047 7.831 7.831 0 01-2.828-2.828A7.513 7.513 0 014.25 12c0-1.396.349-2.687 1.047-3.875a7.831 7.831 0 012.828-2.828A7.513 7.513 0 0112 4.25zM18.75 12a6.58 6.58 0 00-.906-3.39 6.72 6.72 0 00-2.469-2.454 6.641 6.641 0 00-3.39-.906 6.558 6.558 0 00-3.376.906 6.72 6.72 0 00-2.453 2.469 6.641 6.641 0 00-.906 3.39c0 1.22.302 2.344.906 3.376a6.72 6.72 0 002.469 2.453 6.641 6.641 0 003.39.906 6.558 6.558 0 003.376-.906 6.72 6.72 0 002.453-2.469A6.613 6.613 0 0018.75 12zm-4.656 2.75l-2.532-1.844a.307.307 0 01-.156-.281v-5c0-.104.037-.193.11-.266a.362.362 0 01.265-.109h.438c.104 0 .192.036.265.11.073.072.11.16.11.265v4.563l2.218 1.625a.33.33 0 01.141.234.349.349 0 01-.038.202l-.29.439a.342.342 0 01-.25.14.389.389 0 01-.281-.078z"
     />
   </Svg>
-);
+}

package/src/components/ActionText/ActionText.js

@@ -1,18 +1,17 @@
-import { throttle } from 'lodash';
-import PropTypes from 'prop-types';
-import React from 'react';
-import { TouchableOpacity } from 'react-native';
+import { throttle } from "lodash";
+import PropTypes from "prop-types";
+import React from "react";
+import { TouchableOpacity } from "react-native";
+import { COMP_GENERAL_CONSTANTS } from "../../constants/component-constants/general-constants/constants";
 
-export const ActionText = ({
-  onPress, endPoint, children, actionTextID, disablePress,
-}) => {
+export const ActionText = ({ onPress, endPoint, children, disablePress }) => {
   const handleTagPress = () => onPress(endPoint);
   const throttledOnpress = throttle(handleTagPress, 1000);
 
   return (
     <TouchableOpacity
       onPress={throttledOnpress}
-      testID={actionTextID}
+      testID={COMP_GENERAL_CONSTANTS.actionTextTouch}
       disabled={disablePress}
     >
       {children}
@@ -25,5 +24,4 @@ ActionText.propTypes = {
   endPoint: PropTypes.object,
   disablePress: PropTypes.bool,
   children: PropTypes.any,
-  actionTextID: PropTypes.string,
 };

package/src/components/ActionText/ActionText.test.js

@@ -4,22 +4,19 @@ import 'react-native';
 import { mockContext } from '../../utils';
 import { Text } from '../Text';
 import { ActionText } from './ActionText';
+import { COMP_GENERAL_CONSTANTS } from '../../constants/component-constants';
 
 describe('Test Action Text :', () => {
   test('should render properly :', () => {
     const throttle = jest.fn();
     const { getByTestId } = render(
       mockContext(
-        <ActionText
-          onPress={throttle}
-          endPoint={{ slug: '/sample-data' }}
-          actionTextID="actionText"
-        >
+        <ActionText onPress={throttle} endPoint={{ slug: '/sample-data' }}>
           <Text testID="sampleText">Sample Data</Text>
         </ActionText>,
       ),
     );
-    const element = getByTestId('actionText');
+    const element = getByTestId(COMP_GENERAL_CONSTANTS.actionTextTouch);
     expect(element.props.children).toBeDefined();
   });
 
@@ -27,17 +24,13 @@ describe('Test Action Text :', () => {
     const throttle = await jest.fn();
     const { getByTestId } = render(
       mockContext(
-        <ActionText
-          onPress={throttle}
-          endPoint={{ slug: '/sample-data' }}
-          actionTextID="actionText"
-        >
+        <ActionText onPress={throttle} endPoint={{ slug: '/sample-data' }}>
           <Text testID="sampleText">Sample Data</Text>
         </ActionText>,
       ),
     );
 
-    const element = getByTestId('actionText');
+    const element = getByTestId(COMP_GENERAL_CONSTANTS.actionTextTouch);
     fireEvent(element, 'press');
     expect(throttle).toHaveBeenCalled();
   });

package/src/components/AlsoRead/index.js

@@ -58,7 +58,7 @@ export const AlsoRead = (props) => {
           {getImageComponent()}
           <View style={styles.alsoReadContentWrapper}>
             <Text style={styles.alsoReadText}>{translate("Also Read")}</Text>
-            <Text primary numberOfLines={3} style={styles.alsoReadText}>
+            <Text primary numberOfLines={2} style={styles.alsoReadTitle}>
               {text}
             </Text>
           </View>

package/src/components/AlsoRead/styles.js

@@ -13,10 +13,12 @@ export const alsoReadStyles = (COLORS, FONT_SIZE, DARK_MODE) => StyleSheet.creat
   },
   alsoReadText: {
     fontSize: FONT_SIZE.h2,
+    fontWeight: 'bold',
     color: DARK_MODE ? COLORS.BRAND_BLACK : COLORS.BRAND_1,
   },
   alsoReadTitle: {
     fontSize: FONT_SIZE.h2,
+    color: DARK_MODE ? COLORS.BRAND_BLACK : COLORS.BRAND_1,
   },
   fallBackImageWrapper: {
     backgroundColor: COLORS.BRAND_WHITE,

package/src/components/AuthorRow/AuthorRow.test.js

@@ -3,6 +3,7 @@ import React from 'react';
 import 'react-native';
 import { mockContext } from '../../utils';
 import { AuthorRow } from './index';
+import { COMP_CONTENT_CONSTANTS } from '../../constants/component-constants';
 
 const data = [
   {
@@ -26,15 +27,9 @@ const data = [
 describe('Test Author Row :', () => {
   test('should render Author name properly', () => {
     const { getByTestId } = render(
-      mockContext(
-        <AuthorRow
-          authors={data}
-          authorNameTestID="authorName"
-          cdn="gumlet.assettype.com"
-        />,
-      ),
+      mockContext(<AuthorRow authors={data} cdn="gumlet.assettype.com" />),
     );
-    const element = getByTestId('authorName');
+    const element = getByTestId(COMP_CONTENT_CONSTANTS.authorName);
     expect(element.props.children).toBe('Raghavendra Vaidya');
   });
 
@@ -49,7 +44,7 @@ describe('Test Author Row :', () => {
         />,
       ),
     );
-    const element = getByTestId('authorImage');
+    const element = getByTestId(COMP_CONTENT_CONSTANTS.authorImage);
     expect(element.props.children).toBeDefined();
   });
 });

package/src/components/AuthorRow/index.js

@@ -1,26 +1,24 @@
-import PropTypes from 'prop-types';
-import React, { useContext } from 'react';
-import { View } from 'react-native';
-import Icon from 'react-native-vector-icons/FontAwesome';
-import { ResponsiveImage, Text } from '../index';
-import { ActionText } from '../ActionText/ActionText';
+import PropTypes from "prop-types";
+import React, { useContext } from "react";
+import { View } from "react-native";
+import Icon from "react-native-vector-icons/FontAwesome";
+import { ResponsiveImage, Text } from "../index";
+import { ActionText } from "../ActionText/ActionText";
 
-import { authorRowStyleSheet } from './styles';
-import { AppTheme } from '../../utils';
+import { authorRowStyleSheet } from "./styles";
+import { AppTheme } from "../../utils";
+import { COMP_CONTENT_CONSTANTS } from "../../constants/component-constants/content-constants/constants";
 
 export const AuthorRow = ({
   authors,
   onPress,
   cdn,
-  authorImageTestID,
-  actionTextID,
   authorFallBackTestID,
-  authorNameTestID,
   readtime,
   disablePress,
 }) => {
   const { theme } = useContext(AppTheme);
-  const { COLORS ,translate} = theme;
+  const { COLORS, translate } = theme;
   const styles = authorRowStyleSheet(theme);
 
   return (
@@ -31,11 +29,14 @@ export const AuthorRow = ({
         }
         return (
           <View style={styles.container} key={author.id}>
-            <View style={styles.imageBlock} testID={authorImageTestID}>
-              {author?.['avatar-s3-key'] ? (
+            <View
+              style={styles.imageBlock}
+              testID={COMP_CONTENT_CONSTANTS.authorImage}
+            >
+              {author?.["avatar-s3-key"] ? (
                 <ResponsiveImage
                   source={{
-                    uri: `${cdn}/${author?.['avatar-s3-key']}`,
+                    uri: `${cdn}/${author?.["avatar-s3-key"]}`,
                   }}
                   style={styles.avatarImage}
                   imageWidth={50}
@@ -55,11 +56,13 @@ export const AuthorRow = ({
             <ActionText
               onPress={onPress}
               endPoint={author}
-              testID={actionTextID}
               disablePress={disablePress}
             >
               <View style={styles.descriptionBlock}>
-                <Text style={styles.authorStyle} testID={authorNameTestID}>
+                <Text
+                  style={styles.authorStyle}
+                  testID={COMP_CONTENT_CONSTANTS.authorName}
+                >
                   {author.name}
                 </Text>
               </View>
@@ -69,7 +72,9 @@ export const AuthorRow = ({
       })}
       {readtime ? (
         <View style={styles.readtimeComponent}>
-          <Text style={styles.readtime}>{`|  ${readtime} ${translate("min read")}`}</Text>
+          <Text style={styles.readtime}>{`|  ${readtime} ${translate(
+            "min read"
+          )}`}</Text>
         </View>
       ) : null}
     </View>
@@ -82,8 +87,5 @@ AuthorRow.propTypes = {
   cdn: PropTypes.string.isRequired,
   disablePress: PropTypes.bool,
   authorFallBackTestID: PropTypes.string,
-  authorImageTestID: PropTypes.string,
-  authorNameTestID: PropTypes.string,
-  actionTextID: PropTypes.string,
   readtime: PropTypes.number,
 };

package/src/components/BackNavigator/styles.js

@@ -6,6 +6,7 @@ export const backNavigatorStyles = (appThemeContext) => {
     container: {
       flexDirection: 'row',
       justifyContent: 'flex-start',
+      marginRight: 20,
       alignItems: 'center',
       backgroundColor: DARK_MODE ? COLORS.MONO6 : COLORS.BRAND_WHITE,
     },
@@ -29,6 +30,7 @@ export const backNavigatorStyles = (appThemeContext) => {
     text: {
       marginLeft: 10,
       opacity: 0.9,
+      flexShrink: 1,
     },
   });
 };

package/src/components/Button/index.js

@@ -1,14 +1,15 @@
-import PropTypes from 'prop-types';
-import React, { useContext } from 'react';
+import PropTypes from "prop-types";
+import React, { useContext } from "react";
 import {
-  StyleSheet, TouchableOpacity,
+  StyleSheet,
+  TouchableOpacity,
   View,
-
   ViewPropTypes,
-} from 'react-native';
-import { AppTheme } from '../../utils';
-import { Text } from '../Text';
-import { styles } from './styles';
+} from "react-native";
+import { AppTheme } from "../../utils";
+import { Text } from "../Text";
+import { styles } from "./styles";
+import { COMP_GENERAL_CONSTANTS } from "../../constants/component-constants/general-constants/constants";
 
 export const Button = (props) => {
   const { icon, text, onPress } = props;
@@ -21,7 +22,10 @@ export const Button = (props) => {
 
   return (
     <View>
-      <TouchableOpacity onPress={onPress}>
+      <TouchableOpacity
+        onPress={onPress}
+        testID={COMP_GENERAL_CONSTANTS.buttonTouch}
+      >
         <View style={btnStyle}>
           <Text style={textStyle}>{text}</Text>
           {icon}

package/src/components/CustomSwitch/index.js

@@ -1,23 +1,29 @@
-import React, { useContext, useState } from 'react';
-import { Switch, View } from 'react-native';
-import PropTypes from 'prop-types';
-import Icon from 'react-native-vector-icons/FontAwesome';
-import { Text } from '../Text';
-import { AppTheme } from '../../utils';
-import { customSwitchStyles } from './styles';
+import React, { useContext, useState } from "react";
+import { Switch, View } from "react-native";
+import PropTypes from "prop-types";
+import Icon from "react-native-vector-icons/FontAwesome";
+import { Text } from "../Text";
+import { AppTheme } from "../../utils";
+import { customSwitchStyles } from "./styles";
+import { COMP_GENERAL_CONSTANTS } from "../../constants/component-constants/general-constants/constants";
 
 export const CustomSwitch = ({
-  label = '', callback, isEnabled = true, iconSize = 20, iconName, isSwitchDisabled = false,
+  label = "",
+  callback,
+  isEnabled = true,
+  iconSize = 20,
+  iconName,
+  isSwitchDisabled = false,
 }) => {
   const { theme } = useContext(AppTheme);
   const { COLORS } = theme;
   const styles = customSwitchStyles();
   const handleToggle = () => {
-    typeof callback === 'function' && callback(!isEnabled);
+    typeof callback === "function" && callback(!isEnabled);
   };
 
   return (
-    <View style={styles.container}>
+    <View style={styles.container} testID={COMP_GENERAL_CONSTANTS.customSwitch}>
       <View style={styles.textContainer}>
         {!iconName ? null : (
           <View style={styles.iconStyle}>

package/src/components/Header/index.js

@@ -1,14 +1,15 @@
-import PropTypes from 'prop-types';
-import React, { useContext } from 'react';
+import PropTypes from "prop-types";
+import React, { useContext } from "react";
 import {
   StyleSheet,
   TouchableOpacity,
   View,
   ViewPropTypes,
-} from 'react-native';
+} from "react-native";
 
-import { headerStyles } from './styles';
-import { AppTheme } from '../../utils';
+import { headerStyles } from "./styles";
+import { AppTheme } from "../../utils";
+import { COMP_GENERAL_CONSTANTS } from "../../constants/component-constants";
 
 export const Header = (props) => {
   const { theme } = useContext(AppTheme);
@@ -19,11 +20,15 @@ export const Header = (props) => {
     props.logoComponentStyle,
   ]);
   return (
-    <View testID={props.testID} style={headerStyle}>
+    <View style={headerStyle}>
       <View>
         {props.leftComponent && props.leftComponent}
         {props.logoComponent && (
-          <TouchableOpacity style={logoComponentStyle} onPress={props.onPress}>
+          <TouchableOpacity
+            style={logoComponentStyle}
+            onPress={props.onPress}
+            testID={COMP_GENERAL_CONSTANTS.headerLogoTouch}
+          >
             {props.logoComponent}
           </TouchableOpacity>
         )}
@@ -34,7 +39,7 @@ export const Header = (props) => {
 };
 
 Header.defaultProps = {
-  onPress: () => { },
+  onPress: () => {},
 };
 
 Header.propTypes = {
@@ -43,7 +48,6 @@ Header.propTypes = {
   logoComponent: PropTypes.element,
   style: ViewPropTypes.style,
   logoComponentStyle: PropTypes.object,
-  testID: PropTypes.string,
   onPress: PropTypes.func,
   noBorder: PropTypes.bool,
 };

package/src/components/PrimaryStoryCard/index.js

@@ -3,14 +3,14 @@ import get from 'lodash/get';
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
 import {
-  I18nManager, StyleSheet, TouchableOpacity, View,
+  StyleSheet, TouchableOpacity, View,
 } from 'react-native';
-
+import Icon from 'react-native-vector-icons/FontAwesome';
 import {
   AppTheme,
   getImageMetadata,
   getImageSlug,
-  getTimeInFormat,
+  getTimeForStoryCards,
 } from '../../utils';
 import { getStoryHeadline } from '../../utils/story';
 import { ResponsiveImage, Text } from '../index';
@@ -25,7 +25,7 @@ export const PrimaryStoryCard = (props) => {
 
   const { COLORS, FONT_SIZE, locale } = theme || {};
 
-  const DATE_FORMAT = I18nManager.isRTL ? "d MMM, yyyy" : "yyyy , MMM d";
+  const DATE_FORMAT = 'd MMM, yyyy';
 
   const styles = storyStyles(COLORS, FONT_SIZE);
   const containerStyle = StyleSheet.flatten([
@@ -43,10 +43,37 @@ export const PrimaryStoryCard = (props) => {
 
   const name = get(story.authors, [0, 'name']);
   const authorName = name ? `${translate('By')} ${name} | ` : '';
-  const readTime = story['read-time'] ? `${story['read-time']} ${translate("min read")}` : '';
+  const readTime = 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={22} 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={COMP_GENERAL_CONSTANTS.primaryStoryCard}
@@ -61,29 +88,27 @@ export const PrimaryStoryCard = (props) => {
         imageWidth={props.imageWidth}
       >
         <Text style={styles.xminContainer}>
-          {' '}
           {readTime && (
             <View style={styles.xmin}>
               <Text style={styles.xminText}>{readTime}</Text>
             </View>
           )}
         </Text>
+        <View style={styles.storyTypeContainer}>{showStoryType()}</View>
       </ResponsiveImage>
-
-      <View style={styles.authorBlockContainer}>
-        <Text
-          style={autorStyle}
-          testID={COMP_GENERAL_CONSTANTS.primaryStoryAuthor}
-        >
-          {authorName}
-        </Text>
-        <Text
-          style={autorStyle}
-          testID={COMP_GENERAL_CONSTANTS.primaryStoryPubishedAt}
-        >
-          {getTimeInFormat(story['published-at'], DATE_FORMAT, locale)}
-        </Text>
-      </View>
+      <Text
+        style={autorStyle}
+        numberOfLines={2}
+        // TODO: Add corrected testID here
+      >
+        {authorName +
+          getTimeForStoryCards(
+            story["published-at"],
+            DATE_FORMAT,
+            locale,
+            translate
+          )}
+      </Text>
       <Text
         primary
         numberOfLines={3}

package/src/components/PrimaryStoryCard/styles.js

@@ -3,15 +3,11 @@ export const storyStyles = (COLORS = {}, FONT_SIZE = {}, DARK_MODE = {}) => ({
     backgroundColor: COLORS.BRAND_WHITE,
     marginTop: 12,
   },
-  authorBlockContainer: {
-    alignItems: 'center',
-    flexDirection: 'row',
-    paddingVertical: 8,
-  },
   autorText: {
     color: COLORS?.BRAND_6,
     fontSize: FONT_SIZE.h5,
     lineHeight: FONT_SIZE.h5 * 1.3,
+    paddingVertical: 8,
   },
   divider: {
     backgroundColor: COLORS.BRAND_6,
@@ -39,4 +35,32 @@ export const storyStyles = (COLORS = {}, FONT_SIZE = {}, DARK_MODE = {}) => ({
     color: COLORS.BRAND_BLACK,
     fontSize: FONT_SIZE.h5,
   },
+  storyTypeContainer: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+  },
+  storyType: {
+    backgroundColor: COLORS.MONO1,
+    padding: 8,
+    justifyContent: 'space-between',
+    alignItems: 'space-between',
+    flexDirection: 'row',
+  },
+  storyTypeText: {
+    color: COLORS.MONO7,
+    fontSize: FONT_SIZE.h5,
+  },
+  liveBlogText: {
+    color: COLORS.MONO7,
+    fontSize: FONT_SIZE.h4,
+    marginLeft: 10,
+    fontWeight: 'bold',
+  },
+  liveBlogIcon: {
+    height: 15,
+    width: 15,
+    borderRadius: 50,
+    backgroundColor: COLORS.BRAND_3,
+  },
 });