@zohoim/chat-components 0.0.13 → 0.0.15

package/es/im/IMMessageContent/IMMessageContent.js

@@ -1,40 +1,55 @@
-/* eslint-disable react/jsx-no-bind */
-/* eslint-disable max-len */
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-/** ** Libraries *** */
-import React from 'react';
+/* eslint-disable react/jsx-indent */
 
+/** ** Libraries *** */
+import React, { useMemo, Fragment } from 'react';
 /** ** Hooks *** */
-import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
 
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
 /** ** Constants *** */
+
 import imMessageContentDefaultProps from './props/defaultProps';
 import imMessageContentPropTypes from './props/propTypes';
-
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
 /** ** Methods *** */
-import getIsShowBubble from '@zohoim/chat-components-utils/es/imUtils/getIsShowBubble';
-import cssJSLogic from './css/cssJSLogic';
 
+import getIsShowBubble from '@zohoim/chat-components-utils/es/imUtils/getIsShowBubble';
+import getMessageBubbleDetails from '@zohoim/chat-components-utils/es/imUtils/getMessageBubbleDetails';
 /** ** Styles *** */
-import style from './css/IMMessageContent.module.css';
 
+import style from './css/IMMessageContent.module.css';
 /** ** Components *** */
+
 import IMReplyBubble from '../IMReplyBubble/IMReplyBubble';
-import IMLocationBubble from '../IMLocationBubble/IMLocationBubble';
 import IMTextBubble from '../IMTextBubble/IMTextBubble';
-import IMImageBubble from '../IMImageBubble/IMImageBubble';
-import IMVideoBubble from '../IMVideoBubble/IMVideoBubble';
-import IMAudioBubble from '../IMAudioBubble/IMAudioBubble';
-import IMAttachmentBubble from '../IMAttachmentBubble/IMAttachmentBubble';
-import IMArticleBubble from '../IMArticleBubble/IMArticleBubble';
+import LocationBubble from '../../LocationBubble/LocationBubble';
+import ImageBubble from '../../ImageBubble/ImageBubble';
+import VideoBubble from '../../VideoBubble/VideoBubble';
+import AudioBubble from '../../AudioBubble/AudioBubble';
+import AttachmentBubble from '../../AttachmentBubble/AttachmentBubble';
 export default function IMMessageContent(props) {
   const {
-    customStyle,
     messageDetails,
+    sessionDetails,
+    onLoadFullMessage,
+    onClickReply,
     seeMoreText,
     replyText,
-    articleShareText
+    deleteMessageText,
+    customStyle,
+    customProps,
+    renderCustomMessage
   } = props;
+  const {
+    imReplyBubbleProps = dummyObject,
+    imTextBubbleProps = dummyObject,
+    locationBubbleProps = dummyObject,
+    imageBubbleProps = dummyObject,
+    videoBubbleProps = dummyObject,
+    audioBubbleProps = dummyObject,
+    attachmentBubbleProps = dummyObject
+  } = customProps;
   const {
     isShowLayoutBubble,
     isShowReplyBubble,
@@ -43,62 +58,58 @@ export default function IMMessageContent(props) {
     isShowAudioBubble,
     isShowAttachmentBubble,
     isShowLocationBubble,
-    isShowArticleBubble,
-    isShowTextBubble
-  } = getIsShowBubble({
+    isShowTextBubble,
+    isShowCustomBubble,
+    isShowDeleteBubble
+  } = useMemo(() => getIsShowBubble({
     messageDetails
-  });
+  }), [messageDetails]);
+  /* External CSS Customization */
 
-  /* External customization */
   const newStyle = useMergeStyle(style, customStyle);
-  /* CSS classnames added based on logic */
-  const {
-    imMessageContentClass
-  } = cssJSLogic(props, newStyle);
   const {
-    attachment: attachmentDetails,
-    location: locationDetails,
-    kbArticle: articleDetails,
-    replyToMessage
-  } = messageDetails || {};
-  return /*#__PURE__*/React.createElement("div", {
-    className: imMessageContentClass
-  }, isShowLayoutBubble ? null : null, isShowReplyBubble ? /*#__PURE__*/React.createElement("div", {
-    className: style.messageContentRow
-  }, /*#__PURE__*/React.createElement(IMReplyBubble, {
+    replyToMessageDetails: replyToMessage,
+    attachmentDetails,
+    locationUrl
+  } = useMemo(() => getMessageBubbleDetails({
+    messageDetails
+  }), [messageDetails]);
+  return /*#__PURE__*/React.createElement(Fragment, null, isShowLayoutBubble ? null : null, isShowDeleteBubble ? /*#__PURE__*/React.createElement("div", null, deleteMessageText) : null, isShowReplyBubble ? /*#__PURE__*/React.createElement("div", {
+    className: newStyle.messageContentRow
+  }, /*#__PURE__*/React.createElement(IMReplyBubble, _extends({
     messageDetails: replyToMessage,
+    onClick: onClickReply,
     replyText: replyText
-  })) : null, isShowImageBubble ? /*#__PURE__*/React.createElement("div", {
-    className: style.messageContentRow
-  }, /*#__PURE__*/React.createElement(IMImageBubble, {
-    attachmentDetails: attachmentDetails
-  })) : null, isShowVideoBubble ? /*#__PURE__*/React.createElement("div", {
-    className: style.messageContentRow
-  }, /*#__PURE__*/React.createElement(IMVideoBubble, {
-    attachmentDetails: attachmentDetails
-  })) : null, isShowAudioBubble ? /*#__PURE__*/React.createElement("div", {
-    className: style.messageContentRow
-  }, /*#__PURE__*/React.createElement(IMAudioBubble, {
-    attachmentDetails: attachmentDetails
-  })) : null, isShowAttachmentBubble ? /*#__PURE__*/React.createElement("div", {
-    className: style.messageContentRow
-  }, /*#__PURE__*/React.createElement(IMAttachmentBubble, {
+  }, imReplyBubbleProps))) : null, isShowCustomBubble ? renderCustomMessage({
+    messageDetails
+  }) : null, isShowImageBubble ? /*#__PURE__*/React.createElement("div", {
+    className: newStyle.messageContentRow
+  }, /*#__PURE__*/React.createElement(ImageBubble, _extends({
+    imageDetails: attachmentDetails
+  }, imageBubbleProps))) : null, isShowVideoBubble ? /*#__PURE__*/React.createElement("div", {
+    className: newStyle.messageContentRow
+  }, /*#__PURE__*/React.createElement(VideoBubble, _extends({
+    videoDetails: attachmentDetails
+  }, videoBubbleProps))) : null, isShowAudioBubble ? /*#__PURE__*/React.createElement("div", {
+    className: newStyle.messageContentRow
+  }, /*#__PURE__*/React.createElement(AudioBubble, _extends({
+    audioDetails: attachmentDetails
+  }, audioBubbleProps))) : null, isShowAttachmentBubble ? /*#__PURE__*/React.createElement("div", {
+    className: newStyle.messageContentRow
+  }, /*#__PURE__*/React.createElement(AttachmentBubble, _extends({
     attachmentDetails: attachmentDetails
-  })) : null, isShowLocationBubble ? /*#__PURE__*/React.createElement("div", {
-    className: style.messageContentRow
-  }, /*#__PURE__*/React.createElement(IMLocationBubble, {
-    locationDetails: locationDetails
-  })) : null, isShowArticleBubble ? /*#__PURE__*/React.createElement("div", {
-    className: style.messageContentRow
-  }, /*#__PURE__*/React.createElement(IMArticleBubble, {
-    articleDetails: articleDetails,
-    articleShareI18N: articleShareText
-  })) : null, isShowTextBubble ? /*#__PURE__*/React.createElement("div", {
-    className: style.messageContentRow
-  }, /*#__PURE__*/React.createElement(IMTextBubble, {
+  }, attachmentBubbleProps))) : null, isShowLocationBubble ? /*#__PURE__*/React.createElement("div", {
+    className: newStyle.messageContentRow
+  }, /*#__PURE__*/React.createElement(LocationBubble, _extends({
+    locationUrl: locationUrl
+  }, locationBubbleProps))) : null, isShowTextBubble ? /*#__PURE__*/React.createElement("div", {
+    className: newStyle.messageContentRow
+  }, /*#__PURE__*/React.createElement(IMTextBubble, _extends({
     messageDetails: messageDetails,
-    moreText: seeMoreText
-  })) : null);
+    moreText: seeMoreText,
+    onLoadFullMessage: onLoadFullMessage,
+    sessionDetails: sessionDetails
+  }, imTextBubbleProps))) : null);
 }
 IMMessageContent.propTypes = imMessageContentPropTypes;
 IMMessageContent.defaultProps = imMessageContentDefaultProps;

package/es/im/IMMessageContent/css/IMMessageContent.module.css

@@ -1,3 +1,3 @@
 .messageContentRow + .messageContentRow{
-    margin-top: 5px;
+  margin-top: var(--zd_size5) ;
 }

package/es/im/IMMessageContent/props/defaultProps.js

@@ -1,8 +1,7 @@
 /** ** Constants *** */
-import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
 const imMessageContentDefaultProps = {
   customStyle: dummyObject,
-  moreText: 'See More',
-  messageDetails: dummyObject
+  customProps: dummyObject
 };
 export default imMessageContentDefaultProps;

package/es/im/IMMessageContent/props/propTypes.js

@@ -1,37 +1,43 @@
 /** ** Libraries *** */
 import PropTypes from 'prop-types';
 const imMessageContentPropTypes = {
-  customStyle: PropTypes.object,
   messageDetails: PropTypes.shape({
+    displayMessage: PropTypes.string.isRequired,
+    attachment: PropTypes.string,
+    contentType: PropTypes.string,
+    createdTime: PropTypes.string,
     direction: PropTypes.string,
-    actor: PropTypes.shape({
-      type: PropTypes.string,
-      photoURL: PropTypes.string,
-      name: PropTypes.string,
-      contactName: PropTypes.string,
-      externalId: PropTypes.string
-    }),
-    status: PropTypes.string,
+    fullMessage: PropTypes.string,
+    id: PropTypes.string,
+    layout: PropTypes.string,
+    location: PropTypes.string,
     meta: PropTypes.shape({
-      SYSTEM_MESSAGE_TYPE: PropTypes.string,
-      DESK_KB_ARTICLE_TRANSLATION_ID: PropTypes.string,
+      DESK_TICKET_ID: PropTypes.string,
       DESK_TICKET_NUMBER: PropTypes.string,
-      DESK_TICKET_ID: PropTypes.string
+      SYSTEM_MESSAGE_TYPE: PropTypes.string
     }),
-    attachment: PropTypes.string,
-    location: PropTypes.string,
-    layout: PropTypes.string,
-    contentType: PropTypes.string,
     replyToMessage: PropTypes.object,
-    kbArticle: PropTypes.string,
-    type: PropTypes.string,
-    displayMessage: PropTypes.string,
-    fullMessage: PropTypes.string,
-    createdTime: PropTypes.string,
+    status: PropTypes.string,
+    type: PropTypes.string
+  }).isRequired,
+  sessionDetails: PropTypes.shape({
     id: PropTypes.string
   }),
-  moreText: PropTypes.string,
+  onLoadFullMessage: PropTypes.func,
+  onClickReply: PropTypes.func,
+  seeMoreText: PropTypes.string,
+  deleteMessageText: PropTypes.string,
   replyText: PropTypes.string,
-  articleShareText: PropTypes.string
+  renderCustomMessage: PropTypes.func,
+  customStyle: PropTypes.object,
+  customProps: PropTypes.shape({
+    attachmentBubbleProps: PropTypes.object,
+    audioBubbleProps: PropTypes.object,
+    imReplyBubbleProps: PropTypes.object,
+    imTextBubbleProps: PropTypes.object,
+    imageBubbleProps: PropTypes.object,
+    locationBubbleProps: PropTypes.object,
+    videoBubbleProps: PropTypes.object
+  })
 };
 export default imMessageContentPropTypes;

package/es/im/IMMessageMeta/IMMessageMeta.js

@@ -1,58 +1,63 @@
-/* eslint-disable react/jsx-no-bind */
-/* eslint-disable max-len */
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 /** ** Libraries *** */
 import React from 'react';
-
 /** ** Hooks *** */
-import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
 
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
 /** ** Constants *** */
+
 import imMessageMetaDefaultProps from './props/defaultProps';
 import imMessageMetaPropTypes from './props/propTypes';
-
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
 /** ** Methods *** */
-import cssJSLogic from './css/cssJSLogic';
 
+import cssJSLogic from './css/cssJSLogic';
 /** ** Styles *** */
-import style from './css/IMMessageMeta.module.css';
 
+import style from './css/IMMessageMeta.module.css';
 /** ** Components *** */
+
 import { Container } from '@zohodesk/components/es/Layout';
-import IMDateTime from '../IMDateTime/IMDateTime';
 import IMAutoMessageInfo from '../IMAutoMessageInfo/IMAutoMessageInfo';
 export default function IMMessageMeta(props) {
   const {
+    direction,
     customStyle,
-    autoMessageCustomStyle,
-    timeCustomStyle,
     time,
+    timeTooltip,
     autoMessageType,
     autoMessagesI18N,
-    autoMessagesTitleI18N
+    autoMessagesTitleI18N,
+    customProps
   } = props;
+  const {
+    imAutoMessageInfoProps = dummyObject
+  } = customProps;
+  /* External CSS Customization */
 
-  /* External customization */
   const newStyle = useMergeStyle(style, customStyle);
   /* CSS classnames added based on logic */
+
   const {
     imMessageMetaClass,
     dotClass
-  } = cssJSLogic(props, newStyle);
+  } = cssJSLogic({
+    direction
+  }, newStyle);
   return /*#__PURE__*/React.createElement(Container, {
     alignBox: "row",
     className: imMessageMetaClass
-  }, /*#__PURE__*/React.createElement(IMDateTime, {
-    customStyle: timeCustomStyle,
-    value: time
-  }), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
+    className: newStyle.dateTime,
+    "data-title": timeTooltip
+  }, time), autoMessageType ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: dotClass
-  }, "\u22C5"), /*#__PURE__*/React.createElement(IMAutoMessageInfo, {
-    autoMessageType: autoMessageType,
+  }, "\u22C5"), /*#__PURE__*/React.createElement(IMAutoMessageInfo, _extends({
     autoMessagesI18N: autoMessagesI18N,
     autoMessagesTitleI18N: autoMessagesTitleI18N,
-    customStyle: autoMessageCustomStyle
-  }));
+    autoMessageType: autoMessageType
+  }, imAutoMessageInfoProps))) : null);
 }
 IMMessageMeta.propTypes = imMessageMetaPropTypes;
 IMMessageMeta.defaultProps = imMessageMetaDefaultProps;

package/es/im/IMMessageMeta/css/IMMessageMeta.module.css

@@ -1,11 +1,11 @@
 .varClass {
-  --imMessageMeta-gap: var(--imlib_size_5);
-  --imMessageMeta-separator_gap: var(--imlib_size_5);
-  --imMessageMeta-time_padding: var(--imlib_size_45);
+  --imMessageMeta-gap: var(--zd_size5);
+  --imMessageMeta-separator_gap: var(--zd_size5);
+  --imMessageMeta-time_padding: var(--zd_size45);
 }
 
 .imMessageMeta {
-  max-width: 100%;
+  max-width: 100% ;
   align-items: center;
   margin-top: var(--imMessageMeta-gap);
 }
@@ -30,3 +30,12 @@
 [dir=rtl] .rightTime {
   padding-left: var(--imMessageMeta-time_padding);
 }
+
+.dateTime {
+  font-size: var(--zd_font_size11) ;
+  /* max-width: 100px; */
+  /* display: flex; */
+  max-width: var(--zd_size100) ;
+  composes: dotted from "../../css/common.module.css";
+  color: var(--imlib_chat_components_imMessageMeta_timeColor);
+}

package/es/im/IMMessageMeta/css/cssJSLogic.js

@@ -1,14 +1,22 @@
 /** ** Methods *** */
 import { compileClassNames } from '@zohodesk/utils';
-import { direction as directionConstants } from '@zohoim/chat-components-utils/es/constants/messageConstants';
+import getMessageDirectionType from '@zohoim/chat-components-utils/es/getMessageDirectionType';
 export default function cssJSLogic(props, style) {
   const {
     direction
   } = props;
+  const {
+    isIncoming,
+    isOutgoing
+  } = getMessageDirectionType({
+    messageDetails: {
+      direction
+    }
+  });
   const imMessageMetaClass = compileClassNames({
     [style.imMessageMeta]: true,
-    [style.leftTime]: direction === directionConstants.IN,
-    [style.rightTime]: direction === directionConstants.OUT
+    [style.leftTime]: isIncoming,
+    [style.rightTime]: isOutgoing
   });
   const dotClass = compileClassNames({
     [style.dot]: true

package/es/im/IMMessageMeta/props/defaultProps.js

@@ -1,5 +1,5 @@
 /** ** Constants *** */
-import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
 import { direction as directionConstants } from '@zohoim/chat-components-utils/es/constants/messageConstants';
 const imMessageMetaDefaultProps = {
   customStyle: dummyObject,

package/es/im/IMMessageMeta/props/propTypes.js

@@ -1,6 +1,9 @@
 /** ** Libraries *** */
 import PropTypes from 'prop-types';
-import { autoMessageTypes, direction } from '@zohoim/chat-components-utils/es/constants/messageConstants';
+/** ** Constants *** */
+
+import { direction } from '@zohoim/chat-components-utils/es/constants/messageConstants';
+import autoMessageTypes from '@zohoim/chat-components-utils/es/imUtils/constants/autoMessageTypes';
 const {
   WELCOMEMSG,
   WORKFLOW_MESSAGE,
@@ -8,23 +11,25 @@ const {
   UN_SUPPORTED_FILE
 } = autoMessageTypes;
 const imMessageMetaPropTypes = {
-  customStyle: PropTypes.object,
-  autoMessageCustomStyle: PropTypes.object,
-  timeCustomStyle: PropTypes.object,
-  direction: PropTypes.oneOf([direction.IN, direction.OUT]),
-  time: PropTypes.string,
-  autoMessageType: PropTypes.oneOf([WELCOMEMSG, WORKFLOW_MESSAGE, WORKFLOW_NOTIFICATION, UN_SUPPORTED_FILE]),
+  direction: PropTypes.oneOf(Object.values(direction)).isRequired,
+  time: PropTypes.string.isRequired,
+  autoMessageType: PropTypes.oneOf(Object.values(autoMessageTypes)),
   autoMessagesI18N: PropTypes.shape({
+    [UN_SUPPORTED_FILE]: PropTypes.string,
     [WELCOMEMSG]: PropTypes.string,
     [WORKFLOW_MESSAGE]: PropTypes.string,
-    [WORKFLOW_NOTIFICATION]: PropTypes.string,
-    [UN_SUPPORTED_FILE]: PropTypes.string
+    [WORKFLOW_NOTIFICATION]: PropTypes.string
   }),
   autoMessagesTitleI18N: PropTypes.shape({
+    [UN_SUPPORTED_FILE]: PropTypes.string,
     [WELCOMEMSG]: PropTypes.string,
     [WORKFLOW_MESSAGE]: PropTypes.string,
-    [WORKFLOW_NOTIFICATION]: PropTypes.string,
-    [UN_SUPPORTED_FILE]: PropTypes.string
-  })
+    [WORKFLOW_NOTIFICATION]: PropTypes.string
+  }),
+  customProps: PropTypes.shape({
+    imAutoMessageInfoProps: PropTypes.object
+  }),
+  customStyle: PropTypes.object,
+  timeTooltip: PropTypes.string
 };
 export default imMessageMetaPropTypes;

package/es/im/IMPermaLink/IMPermaLink.js

@@ -0,0 +1,48 @@
+/* eslint-disable @zohodesk/zsecurity/no-protocol-check */
+
+/** ** Libraries *** */
+import React from 'react';
+/** ** Hooks *** */
+
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+import useIMPermaLink from '@zohoim/chat-components-hooks/es/im/IMPermaLink/useIMPermaLink';
+/** ** Constants *** */
+
+import imPermaLinkDefaultProps from './props/defaultProps';
+import imPermaLinkPropTypes from './props/propTypes';
+/** ** Methods *** */
+
+import cssJSLogic from './css/cssJSLogic';
+/** ** Styles *** */
+
+import style from './css/IMPermaLink.module.css';
+export default function IMPermaLink(props) {
+  const {
+    customStyle,
+    isDisabled
+  } = props;
+  const {
+    href,
+    onClick,
+    text
+  } = useIMPermaLink(props);
+  /* External CSS Customization */
+
+  const newStyle = useMergeStyle(style, customStyle);
+  /* CSS classnames added based on logic */
+
+  const {
+    imPermaLinkClass
+  } = cssJSLogic({
+    isDisabled
+  }, newStyle);
+  return text ? /*#__PURE__*/React.createElement("a", {
+    className: imPermaLinkClass,
+    href: href,
+    onClick: onClick,
+    rel: "noopener noreferrer"
+  }, text) : null;
+}
+IMPermaLink.propTypes = imPermaLinkPropTypes;
+IMPermaLink.defaultProps = imPermaLinkDefaultProps;
+IMPermaLink.displayName = 'IMPermaLink';

package/es/im/IMPermaLink/css/IMPermaLink.module.css

@@ -0,0 +1,14 @@
+.text {
+  color: var(--imlib_chat_components_imPermaLink_color);
+  display: block;
+  composes: dotted from '../../css/common.module.css';
+  cursor: pointer;
+}
+
+.disabled {
+  pointer-events: none;
+}
+
+a.text:hover {
+  text-decoration: underline;
+}

package/es/im/{IMTicketLink → IMPermaLink}/css/cssJSLogic.js

@@ -4,11 +4,11 @@ export default function cssJSLogic(props, style) {
   const {
     isDisabled
   } = props;
-  const imTicketLinkClass = compileClassNames({
-    [style.ticketNumber]: true,
+  const imPermaLinkClass = compileClassNames({
+    [style.text]: true,
     [style.disabled]: isDisabled === true
   });
   return {
-    imTicketLinkClass
+    imPermaLinkClass
   };
 }

package/es/im/IMPermaLink/index.js

@@ -0,0 +1 @@
+export { default as IMPermaLink } from './IMPermaLink';

package/es/im/{IMAttachmentIcon → IMPermaLink}/props/defaultProps.js

@@ -1,6 +1,6 @@
 /** ** Constants *** */
-import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
-const imAttachmentIconDefaultProps = {
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
+const imPermaLinkDefaultProps = {
   customStyle: dummyObject
 };
-export default imAttachmentIconDefaultProps;
+export default imPermaLinkDefaultProps;

package/es/im/IMPermaLink/props/propTypes.js

@@ -0,0 +1,11 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+const imPermaLinkPropTypes = {
+  text: PropTypes.string.isRequired,
+  customStyle: PropTypes.object,
+  isDisabled: PropTypes.bool,
+  onClick: PropTypes.func,
+  id: PropTypes.string,
+  href: PropTypes.string
+};
+export default imPermaLinkPropTypes;