@quintype/native-components 2.19.8 → 2.19.9

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 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.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)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quintype/native-components",
-  "version": "2.19.8",
+  "version": "2.19.9",
   "description": "",
   "main": "src/index.js",
   "scripts": {

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/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/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

@@ -23,7 +23,7 @@ export const CustomSwitch = ({
   };
 
   return (
-    <View style={styles.container}>
+    <View style={styles.container} testID={COMP_GENERAL_CONSTANTS.customSwitch}>
       <View style={styles.textContainer}>
         {!iconName ? null : (
           <View style={styles.iconStyle}>
@@ -40,7 +40,6 @@ export const CustomSwitch = ({
         onValueChange={handleToggle}
         value={isEnabled}
         disabled={isSwitchDisabled}
-        testID={COMP_GENERAL_CONSTANTS.customSwitch}
       />
     </View>
   );

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/RadioButton/index.js

@@ -1,22 +1,37 @@
-import React, { useContext } from 'react';
+import React, { useContext } from "react";
 import {
-  StyleSheet, View, TouchableOpacity, ViewPropTypes,
-} from 'react-native';
-import PropTypes from 'prop-types';
-import { radioButtonStyles } from './styles';
-import { AppTheme } from '../../utils';
+  StyleSheet,
+  View,
+  TouchableOpacity,
+  ViewPropTypes,
+} from "react-native";
+import PropTypes from "prop-types";
+import { radioButtonStyles } from "./styles";
+import { AppTheme } from "../../utils";
+
+import { COMP_GENERAL_CONSTANTS } from "../../constants/component-constants";
 
 export const RadioButton = ({
-  onPress, isChecked, circleStyle, checkedCircleStyle,
+  onPress,
+  isChecked,
+  circleStyle,
+  checkedCircleStyle,
 }) => {
   const { theme } = useContext(AppTheme);
   const styles = radioButtonStyles(theme);
   const circleBorderStyle = StyleSheet.flatten([styles.circle, circleStyle]);
-  const checkedStyle = StyleSheet.flatten([styles.checkedCircle, checkedCircleStyle]);
+  const checkedStyle = StyleSheet.flatten([
+    styles.checkedCircle,
+    checkedCircleStyle,
+  ]);
 
   return (
     <View>
-      <TouchableOpacity style={circleBorderStyle} onPress={onPress}>
+      <TouchableOpacity
+        style={circleBorderStyle}
+        onPress={onPress}
+        testID={COMP_GENERAL_CONSTANTS.radioButtonTouch}
+      >
         {isChecked && <View style={checkedStyle} />}
       </TouchableOpacity>
     </View>

package/src/components/ShareButton/index.js

@@ -1,27 +1,28 @@
-import React, { useContext, memo } from 'react';
-import { TouchableOpacity } from 'react-native';
-import PropTypes from 'prop-types';
-import Icon from 'react-native-vector-icons/Ionicons';
-import Share from 'react-native-share';
-import { AppTheme } from '../../utils';
-import { shareButtonStyles } from './styles';
-import { getStoryHeadline } from '../../utils/story';
+import React, { useContext, memo } from "react";
+import { TouchableOpacity } from "react-native";
+import PropTypes from "prop-types";
+import Icon from "react-native-vector-icons/Ionicons";
+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 { story, type = 'story', slug } = props;
+  const { story, type = "story", slug } = props;
 
   const getShareURL = () => {
     const { url } = story || {};
     switch (type) {
-      case 'story':
+      case "story":
         return url;
-      case 'card':
+      case "card":
         return `${url}${slug}`;
-      case 'image':
+      case "image":
         return `${url}${slug}`;
-      case 'attachment':
+      case "attachment":
         return slug;
       default:
         return url || slug;
@@ -43,7 +44,10 @@ const ShareButtonBase = (props) => {
   }
 
   return (
-    <TouchableOpacity onPress={share}>
+    <TouchableOpacity
+      onPress={share}
+      testID={COMP_GENERAL_CONSTANTS.shareButtonTouch}
+    >
       <Icon style={styles.iconStyle} name="share-social-outline" size={20} />
     </TouchableOpacity>
   );

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",
 };

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

@@ -1,19 +1,24 @@
 export const COMP_GENERAL_CONSTANTS = {
-  secondaryStoryCard: 'COMP_GENERAL_SECONDARY_STORY',
-  primaryStoryCard: 'COMP_GENERAL_PRIMARY_STORY',
-  secondaryStoryAuthor: 'COMP_GENERAL_SECONDARY_STORY_AUTHOR',
-  secondaryStoryPubishedAt: 'COMP_GENERAL_SECONDARY_STORY_PUBLISHEDATE',
-  primaryStoryAuthor: 'COMP_GENERAL_PRIMARY_STORY_AUTHOR',
-  primaryStoryPubishedAt: 'COMP_GENERAL_PRIMARY_STORY_PUBLISHEDATE',
-  secondaryStoryHeadline: 'COMP_GENERAL_SECONDARY_STORY_HEADLINE',
-  primaryStoryHeadline: 'COMP_GENERAL_PRIMARY_STORY_HEADLINE',
-  iconTextTouch: 'COMP_GENERAL_ICON_TEXT_TOUCH',
-  iconTextLabel: 'COMP_GENERAL_ICON_TEXT_LABEL',
-  collectionTitleTouch: 'COMP_GENERAL_COLLECTION_TITLE',
-  collectionTitleText: 'COMP_GENERAL_COLLECTION_TITLE_TEXT',
-  backNavigatorText: 'COMP_GENERAL_BACK_NAVIGATOR_TEXT',
-  backNavigatorTouch: 'COMP_GENERAL_BACK_NAVIGATOR_TOUCH',
-  customSwitch: 'COMP_GENERAL_CUSTOM_SWITCH',
-  primaryStoryReadTime: 'COMP_GENERAL_PRIMARY_STORY_READTIME',
-  secondaryStoryReadTime: 'COMP_GENERAL_SECONDARY_STORY_READTIME',
+  secondaryStoryCard: "COMP_GENERAL_SECONDARY_STORY",
+  primaryStoryCard: "COMP_GENERAL_PRIMARY_STORY",
+  secondaryStoryAuthor: "COMP_GENERAL_SECONDARY_STORY_AUTHOR",
+  secondaryStoryPubishedAt: "COMP_GENERAL_SECONDARY_STORY_PUBLISHEDATE",
+  primaryStoryAuthor: "COMP_GENERAL_PRIMARY_STORY_AUTHOR",
+  primaryStoryPubishedAt: "COMP_GENERAL_PRIMARY_STORY_PUBLISHEDATE",
+  secondaryStoryHeadline: "COMP_GENERAL_SECONDARY_STORY_HEADLINE",
+  primaryStoryHeadline: "COMP_GENERAL_PRIMARY_STORY_HEADLINE",
+  iconTextTouch: "COMP_GENERAL_ICON_TEXT_TOUCH",
+  iconTextLabel: "COMP_GENERAL_ICON_TEXT_LABEL",
+  collectionTitleTouch: "COMP_GENERAL_COLLECTION_TITLE",
+  collectionTitleText: "COMP_GENERAL_COLLECTION_TITLE_TEXT",
+  backNavigatorText: "COMP_GENERAL_BACK_NAVIGATOR_TEXT",
+  backNavigatorTouch: "COMP_GENERAL_BACK_NAVIGATOR_TOUCH",
+  customSwitch: "COMP_GENERAL_CUSTOM_SWITCH",
+  primaryStoryReadTime: "COMP_GENERAL_PRIMARY_STORY_READTIME",
+  secondaryStoryReadTime: "COMP_GENERAL_SECONDARY_STORY_READTIME",
+  actionTextTouch: "COMP_GENERAL_ACTION_TEXT_TOUCH",
+  buttonTouch: "COMP_GENERAL_BUTTON_TOUCH",
+  headerLogoTouch: "COMP_GENERAL_HEADER_LOGO_TOUCH",
+  radioButtonTouch: "COMP_GENERAL_RADIO",
+  shareButtonTouch: "COMP_GENERAL_SHARE",
 };