@selfcommunity/react-ui 0.1.2-alpha.6 → 0.1.2-alpha.9

package/lib/cjs/components/TrendingFeed/TrendingFeed.js

@@ -69,7 +69,7 @@ const Root = (0, _styles.styled)(_Widget.default, {
 }));
 
 /**
- * > API documentation for the Community-UI Trending Feed component. Learn about the available props and the CSS API.
+ * > API documentation for the Community-JS Trending Feed component. Learn about the available props and the CSS API.
 
  #### Import
 

package/lib/cjs/components/TrendingPeople/Skeleton.js

@@ -34,7 +34,7 @@ const Root = (0, _styles.styled)(_Widget.default)(({
   }
 }));
 /**
- * > API documentation for the Community-UI Trending People Skeleton component. Learn about the available props and the CSS API.
+ * > API documentation for the Community-JS Trending People Skeleton component. Learn about the available props and the CSS API.
 
  #### Import
 

package/lib/cjs/components/TrendingPeople/TrendingPeople.js

@@ -67,7 +67,7 @@ const Root = (0, _styles.styled)(_Widget.default, {
 }));
 
 /**
- * > API documentation for the Community-UI Trending People component. Learn about the available props and the CSS API.
+ * > API documentation for the Community-JS Trending People component. Learn about the available props and the CSS API.
 
  #### Import
 

package/lib/cjs/components/User/Skeleton.js

@@ -25,7 +25,7 @@ const Root = (0, _styles.styled)(_BaseItem.default)(({
   theme
 }) => ({}));
 /**
- * > API documentation for the Community-UI User Skeleton component. Learn about the available props and the CSS API.
+ * > API documentation for the Community-JS User Skeleton component. Learn about the available props and the CSS API.
 
  #### Import
 

package/lib/cjs/components/User/User.js

@@ -50,7 +50,7 @@ const Root = (0, _styles.styled)(_BaseItemButton.default, {
 }) => ({}));
 
 /**
- * > API documentation for the Community-UI User component. Learn about the available props and the CSS API.
+ * > API documentation for the Community-JS User component. Learn about the available props and the CSS API.
 
  #### Import
 

package/lib/cjs/components/UserFollowers/Skeleton.js

@@ -25,7 +25,7 @@ const Root = (0, _styles.styled)(_TrendingPeople.TrendingPeopleSkeleton, {
   theme
 }) => ({}));
 /**
- * > API documentation for the Community-UI User Followers Skeleton component. Learn about the available props and the CSS API.
+ * > API documentation for the Community-JS User Followers Skeleton component. Learn about the available props and the CSS API.
 
  #### Import
 

package/lib/cjs/components/UserFollowers/UserFollowers.js

@@ -75,7 +75,7 @@ const Root = (0, _styles.styled)(_Widget.default, {
 }));
 
 /**
- * > API documentation for the Community-UI User Followers component. Learn about the available props and the CSS API.
+ * > API documentation for the Community-JS User Followers component. Learn about the available props and the CSS API.
 
  #### Import
 

package/lib/cjs/components/UserProfileEdit/Section/SettingsSkeleton.js

@@ -23,7 +23,7 @@ const Root = (0, _styles.styled)(_material.Box, {
   overridesResolver: (props, styles) => styles.root
 })(() => ({}));
 /**
- * > API documentation for the Community-UI Settings Skeleton component. Learn about the available props and the CSS API.
+ * > API documentation for the Community-JS Settings Skeleton component. Learn about the available props and the CSS API.
 
  #### Import
 

package/lib/cjs/components/UserProfileEdit/Skeleton.js

@@ -23,7 +23,7 @@ const Root = (0, _styles.styled)(_material.Box, {
   overridesResolver: (props, styles) => styles.root
 })(() => ({}));
 /**
- * > API documentation for the Community-UI User Profile Edit Skeleton component. Learn about the available props and the CSS API.
+ * > API documentation for the Community-JS User Profile Edit Skeleton component. Learn about the available props and the CSS API.
 
  #### Import
 

package/lib/cjs/components/UserProfileEdit/UserProfileEdit.js

@@ -82,7 +82,7 @@ const Root = (0, _styles.styled)(_material.Box, {
 
 /**
  *
- > API documentation for the Community-UI User Profile Edit component. Learn about the available props and the CSS API.
+ > API documentation for the Community-JS User Profile Edit component. Learn about the available props and the CSS API.
 
  #### Import
 

package/lib/cjs/components/UserProfileHeader/Skeleton.js

@@ -40,7 +40,7 @@ const Root = (0, _styles.styled)(_material.Box, {
   }
 }));
 /**
- * > API documentation for the Community-UI User Profile Header Skeleton component. Learn about the available props and the CSS API.
+ * > API documentation for the Community-JS User Profile Header Skeleton component. Learn about the available props and the CSS API.
 
  #### Import
 

package/lib/cjs/components/UserProfileHeader/UserProfileHeader.js

@@ -82,7 +82,7 @@ const Root = (0, _styles.styled)(_material.Box, {
 }));
 
 /**
- * > API documentation for the Community-UI User Profile Header component. Learn about the available props and the CSS API.
+ * > API documentation for the Community-JS User Profile Header component. Learn about the available props and the CSS API.
 
  #### Import
 

package/lib/cjs/components/UserProfileInfo/Skeleton.js

@@ -23,7 +23,7 @@ const Root = (0, _styles.styled)(_material.Box, {
   overridesResolver: (props, styles) => styles.root
 })(() => ({}));
 /**
- * > API documentation for the Community-UI User Profile Info Skeleton component. Learn about the available props and the CSS API.
+ * > API documentation for the Community-JS User Profile Info Skeleton component. Learn about the available props and the CSS API.
 
  #### Import
 

package/lib/cjs/components/UserProfileInfo/UserProfileInfo.js

@@ -85,7 +85,7 @@ const Root = (0, _styles.styled)(_material.Box, {
 
 /**
  *
- > API documentation for the Community-UI User Profile Info component. Learn about the available props and the CSS API.
+ > API documentation for the Community-JS User Profile Info component. Learn about the available props and the CSS API.
 
  #### Import
 

package/lib/cjs/components/UsersFollowed/Skeleton.js

@@ -25,7 +25,7 @@ const Root = (0, _styles.styled)(_TrendingPeople.TrendingPeopleSkeleton, {
   theme
 }) => ({}));
 /**
- * > API documentation for the Community-UI User Followers Skeleton component. Learn about the available props and the CSS API.
+ * > API documentation for the Community-JS User Followers Skeleton component. Learn about the available props and the CSS API.
 
  #### Import
 

package/lib/cjs/components/UsersFollowed/UsersFollowed.js

@@ -75,7 +75,7 @@ const Root = (0, _styles.styled)(_Widget.default, {
 }));
 
 /**
- * > API documentation for the Community-UI Users Followed component. Learn about the available props and the CSS API.
+ * > API documentation for the Community-JS Users Followed component. Learn about the available props and the CSS API.
 
  #### Import
 
@@ -123,7 +123,6 @@ function UsersFollowed(inProps) {
   } = props; // STATE
 
   const [followed, setFollowed] = (0, _react.useState)([]);
-  const [visibleUsers, setVisibleUsers] = (0, _react.useState)(limit);
   const [loading, setLoading] = (0, _react.useState)(true);
   const [hasMore, setHasMore] = (0, _react.useState)(false);
   const [total, setTotal] = (0, _react.useState)(0);
@@ -139,10 +138,7 @@ function UsersFollowed(inProps) {
     if (scUserContext.user['id'] === userId) {
       setFollowed(followed.filter(u => u.id !== user.id));
       setTotal(prev => prev - 1);
-
-      if (visibleUsers < limit && total > 1) {
-        loadUsers(1);
-      }
+      setHasMore(total - 1 > limit);
     } else {
       const newUsers = [...followed];
       const index = newUsers.findIndex(u => u.id === user.id);
@@ -173,7 +169,7 @@ function UsersFollowed(inProps) {
       }).then(res => {
         const data = res.data;
         setFollowed([...followed, ...data.results]);
-        setHasMore(data.count > visibleUsers);
+        setHasMore(data.count > limit);
         setNext(data['next']);
         setLoading(false);
         setTotal(data.count);
@@ -184,17 +180,6 @@ function UsersFollowed(inProps) {
       });
     }
   }
-  /**
-   * Loads more users when followed list changes
-   */
-
-
-  function loadUsers(n) {
-    const newIndex = visibleUsers + n;
-    const newHasMore = newIndex < followed.length - 1;
-    setVisibleUsers(newIndex);
-    setHasMore(newHasMore);
-  }
   /**
    * On mount, fetches the list of users followed
    */
@@ -221,7 +206,7 @@ function UsersFollowed(inProps) {
   })}`), !total ? /*#__PURE__*/_react.default.createElement(_material.Typography, {
     className: classes.noResults,
     variant: "body2"
-  }, `${intl.formatMessage(messages.noUsers)}`) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_List.default, null, followed.slice(0, visibleUsers).map(user => /*#__PURE__*/_react.default.createElement(_material.ListItem, {
+  }, `${intl.formatMessage(messages.noUsers)}`) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_List.default, null, followed.slice(0, limit).map(user => /*#__PURE__*/_react.default.createElement(_material.ListItem, {
     key: user.id
   }, /*#__PURE__*/_react.default.createElement(_User.default, _extends({
     elevation: 0,

package/lib/cjs/components/Widget/index.js

@@ -35,7 +35,7 @@ const Root = (0, _styles.styled)(_material.Card, {
   theme
 }) => ({}));
 /**
- * > API documentation for the Community-UI Widget component. Learn about the available props and the CSS API.
+ * > API documentation for the Community-JS Widget component. Learn about the available props and the CSS API.
 
  #### Import
 

package/lib/cjs/shared/BaseItem/BaseItem.js

@@ -90,7 +90,7 @@ const Root = (0, _styles.styled)(_Widget.default, {
 }));
 
 /**
- * > API documentation for the Community-UI BaseItem component. Learn about the available props and the CSS API.
+ * > API documentation for the Community-JS BaseItem component. Learn about the available props and the CSS API.
 
  #### Import
 

package/lib/cjs/shared/BaseItemButton/BaseItemButton.js

@@ -94,7 +94,7 @@ const Root = (0, _styles.styled)(_Widget.default, {
 }));
 
 /**
- * > API documentation for the Community-UI BaseItemButton component. Learn about the available props and the CSS API.
+ * > API documentation for the Community-JS BaseItemButton component. Learn about the available props and the CSS API.
 
  #### Import
 

package/lib/cjs/shared/DateTimeAgo/index.js

@@ -79,7 +79,8 @@ function DateTimeAgo(props) {
         day: 'numeric',
         hour: 'numeric',
         minute: 'numeric'
-      })}`
+      })}`,
+      enterTouchDelay: 0
     }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
       variant: 'body2',
       component: 'span'

package/lib/cjs/shared/NotificationItem/NotificationItem.js

@@ -158,7 +158,7 @@ const Root = (0, _styles.styled)(_Widget.default, {
 }));
 
 /**
- * > API documentation for the Community-UI BaseItem component. Learn about the available props and the CSS API.
+ * > API documentation for the Community-JS BaseItem component. Learn about the available props and the CSS API.
 
  #### Import
 

package/lib/esm/components/AccountRecover/AccountRecover.js

@@ -52,7 +52,7 @@ const Root = (0, _styles.styled)('form', {
 }));
 
 /**
- * > API documentation for the Community-UI AccountRecover component. Learn about the available props and the CSS API.
+ * > API documentation for the Community-JS AccountRecover component. Learn about the available props and the CSS API.
 
  #### Import
 

package/lib/esm/components/AccountSignIn/AccountSignIn.js

@@ -56,7 +56,7 @@ const Root = (0, _styles.styled)('form', {
 }));
 
 /**
- * > API documentation for the Community-UI AccountSignIn component. Learn about the available props and the CSS API.
+ * > API documentation for the Community-JS AccountSignIn component. Learn about the available props and the CSS API.
  * > This component support [OAuth2 authentication](https://developers.selfcommunity.com/docs/api/authentication/oauth#password) protocol with grant_type password
 
  #### Import

package/lib/esm/components/AccountSignUp/AccountSignUp.js

@@ -58,7 +58,7 @@ const Root = (0, _styles.styled)('form', {
 }));
 
 /**
- * > API documentation for the Community-UI AccountSignUp component. Learn about the available props and the CSS API.
+ * > API documentation for the Community-JS AccountSignUp component. Learn about the available props and the CSS API.
 
  #### Import
 

package/lib/esm/components/BroadcastMessages/BroadcastMessages.js

@@ -69,7 +69,7 @@ const Root = (0, _styles.styled)(_material.Box, {
 }));
 
 /**
- > API documentation for the Community-UI Broadcast Messages component. Learn about the available props and the CSS API.
+ > API documentation for the Community-JS Broadcast Messages component. Learn about the available props and the CSS API.
  > This component handles message broadcasts. It initially displays unseen messages. If all messages have been viewed it will show at most one message.
  *
  #### Import

package/lib/esm/components/BroadcastMessages/Message.js

@@ -85,7 +85,7 @@ const Root = (0, _styles.styled)(_Widget.default, {
     height: 30
   }
 }));
-const PREFERENCES = [_reactCore.SCPreferences.LOGO_NAVBAR_LOGO, _reactCore.SCPreferences.TEXT_APPLICATION_NAME];
+const PREFERENCES = [_reactCore.SCPreferences.LOGO_NAVBAR_LOGO_MOBILE, _reactCore.SCPreferences.TEXT_APPLICATION_NAME];
 
 function Message(props) {
   // PROPS
@@ -181,7 +181,7 @@ function Message(props) {
       className: classes.header,
       avatar: /*#__PURE__*/_react.default.createElement(_material.Avatar, {
         alt: preferences[_reactCore.SCPreferences.TEXT_APPLICATION_NAME],
-        src: preferences[_reactCore.SCPreferences.LOGO_NAVBAR_LOGO]
+        src: preferences[_reactCore.SCPreferences.LOGO_NAVBAR_LOGO_MOBILE_MOBILE]
       }),
       action: template === _types.SCBroadcastMessageTemplateType.DETAIL && /*#__PURE__*/_react.default.createElement(_material.IconButton, {
         "aria-label": "close",

package/lib/esm/components/BroadcastMessages/Skeleton.js

@@ -34,7 +34,7 @@ const MessageRoot = (0, _styles.styled)(_Widget.default, {
   marginBottom: theme.spacing(2)
 }));
 /**
- * > API documentation for the Community-UI Broadcast Message Skeleton component. Learn about the available props and the CSS API.
+ * > API documentation for the Community-JS Broadcast Message Skeleton component. Learn about the available props and the CSS API.
 
  #### Import
 
@@ -112,7 +112,7 @@ const Root = (0, _styles.styled)(_material.Box, {
   theme
 }) => ({}));
 /**
- * > API documentation for the Community-UI Broadcast Messages Skeleton component. Learn about the available props and the CSS API.
+ * > API documentation for the Community-JS Broadcast Messages Skeleton component. Learn about the available props and the CSS API.
 
  #### Import
 

package/lib/esm/components/CategoriesFollowed/CategoriesFollowed.js

@@ -70,7 +70,7 @@ const Root = (0, _styles.styled)(_Widget.default, {
   marginBottom: theme.spacing(2)
 }));
 /**
- > API documentation for the Community-UI Categories Followed component. Learn about the available props and the CSS API.
+ > API documentation for the Community-JS Categories Followed component. Learn about the available props and the CSS API.
  *
  #### Import
  ```jsx
@@ -111,7 +111,6 @@ function CategoriesFollowed(inProps) {
   } = props; // STATE
 
   const [categories, setCategories] = (0, _react.useState)([]);
-  const [visibleCategories, setVisibleCategories] = (0, _react.useState)(limit);
   const [loading, setLoading] = (0, _react.useState)(true);
   const [hasMore, setHasMore] = (0, _react.useState)(false);
   const [total, setTotal] = (0, _react.useState)(0);
@@ -129,17 +128,12 @@ function CategoriesFollowed(inProps) {
     if (scUserContext.user['id'] === userId) {
       setCategories(categories.filter(c => c.id !== category.id));
       setTotal(prev => prev - 1);
-
-      if (visibleCategories < limit && total > 1) {
-        loadCategories(1);
-      }
+      setHasMore(total - 1 > limit);
     } else {
       const newCategories = [...categories];
       const index = newCategories.findIndex(u => u.id === category.id);
 
       if (index !== -1) {
-        console.log(category.followed);
-
         if (category.followed) {
           newCategories[index].followers_counter = category.followers_counter - 1;
           newCategories[index].followed = !category.followed;
@@ -167,7 +161,7 @@ function CategoriesFollowed(inProps) {
         setCategories([...categories, ...data]);
         setTotal(data.length);
         setNext(data['next']);
-        setHasMore(data.length > visibleCategories);
+        setHasMore(data.length > limit);
         setLoading(false);
       }).catch(error => {
         setLoading(false);
@@ -176,17 +170,6 @@ function CategoriesFollowed(inProps) {
       });
     }
   }
-  /**
-   * Loads more categories when followed list changes
-   */
-
-
-  function loadCategories(n) {
-    const newIndex = visibleCategories + n;
-    const newHasMore = newIndex < categories.length - 1;
-    setVisibleCategories(newIndex);
-    setHasMore(newHasMore);
-  }
   /**
    * On mount, fetches the list of categories followed
    */
@@ -209,7 +192,7 @@ function CategoriesFollowed(inProps) {
   })}`), !total ? /*#__PURE__*/_react.default.createElement(_material.Typography, {
     className: classes.noResults,
     variant: "body2"
-  }, `${intl.formatMessage(messages.noCategories)}`) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_List.default, null, categories.slice(0, visibleCategories).map(category => /*#__PURE__*/_react.default.createElement(_material.ListItem, {
+  }, `${intl.formatMessage(messages.noCategories)}`) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_List.default, null, categories.slice(0, limit).map(category => /*#__PURE__*/_react.default.createElement(_material.ListItem, {
     key: category.id
   }, /*#__PURE__*/_react.default.createElement(_Category.default, _extends({
     elevation: 0,

package/lib/esm/components/CategoriesFollowed/Skeleton.js

@@ -25,7 +25,7 @@ const Root = (0, _styles.styled)(_Skeleton.default, {
   theme
 }) => ({}));
 /**
- * > API documentation for the Community-UI Categories Followed Skeleton component. Learn about the available props and the CSS API.
+ * > API documentation for the Community-JS Categories Followed Skeleton component. Learn about the available props and the CSS API.
 
  #### Import
 

package/lib/esm/components/CategoriesPopular/CategoriesPopular.js

@@ -62,7 +62,7 @@ const Root = (0, _styles.styled)(_Widget.default, {
   marginBottom: theme.spacing(2)
 }));
 /**
- > API documentation for the Community-UI Categories Popular component. Learn about the available props and the CSS API.
+ > API documentation for the Community-JS Categories Popular component. Learn about the available props and the CSS API.
  *
  #### Import
  ```jsx

package/lib/esm/components/CategoriesPopular/Skeleton.js

@@ -25,7 +25,7 @@ const Root = (0, _styles.styled)(_Skeleton.default, {
   theme
 }) => ({}));
 /**
- * > API documentation for the Community-UI Categories Popular Skeleton component. Learn about the available props and the CSS API.
+ * > API documentation for the Community-JS Categories Popular Skeleton component. Learn about the available props and the CSS API.
 
  #### Import
 

package/lib/esm/components/CategoriesSuggestion/CategoriesSuggestion.js

@@ -55,7 +55,7 @@ const Root = (0, _styles.styled)(_Widget.default, {
 }));
 
 /**
- * > API documentation for the Community-UI Categories Suggestion component. Learn about the available props and the CSS API.
+ * > API documentation for the Community-JS Categories Suggestion component. Learn about the available props and the CSS API.
  *
  #### Import
  ```jsx
@@ -110,10 +110,7 @@ function CategoriesSuggestion(inProps) {
   function handleOnFollowCategory(category, follow) {
     setCategories(categories.filter(c => c.id !== category.id));
     setTotal(prev => prev - 1);
-
-    if (visibleCategories < limit && total > 1) {
-      loadCategories(1);
-    }
+    setHasMore(total - 1 > limit);
   }
   /**
    * Fetches categories suggestion list

package/lib/esm/components/CategoriesSuggestion/Skeleton.js

@@ -33,7 +33,7 @@ const Root = (0, _styles.styled)(_Widget.default)(({
   }
 }));
 /**
- * > API documentation for the Community-UI Categories Suggestion Skeleton component. Learn about the available props and the CSS API.
+ * > API documentation for the Community-JS Categories Suggestion Skeleton component. Learn about the available props and the CSS API.
 
  #### Import
 

package/lib/esm/components/Category/Category.js

@@ -53,7 +53,7 @@ const Root = (0, _styles.styled)(_BaseItemButton.default, {
 }) => ({}));
 
 /**
- * > API documentation for the Community-UI Category component. Learn about the available props and the CSS API.
+ * > API documentation for the Community-JS Category component. Learn about the available props and the CSS API.
  *
  * #### Import
  ```jsx

package/lib/esm/components/Category/Skeleton.js

@@ -25,7 +25,7 @@ const Root = (0, _styles.styled)(_BaseItem.default)(({
   theme
 }) => ({}));
 /**
- * > API documentation for the Community-UI Category Skeleton component. Learn about the available props and the CSS API.
+ * > API documentation for the Community-JS Category Skeleton component. Learn about the available props and the CSS API.
 
  #### Import
 

package/lib/esm/components/CategoryHeader/CategoryHeader.js

@@ -104,7 +104,7 @@ const Root = (0, _styles.styled)(_material.Box, {
 }));
 
 /**
- *> API documentation for the Community-UI Category Header component. Learn about the available props and the CSS API.
+ *> API documentation for the Community-JS Category Header component. Learn about the available props and the CSS API.
  *
  #### Import
  ```jsx

package/lib/esm/components/CategoryHeader/Skeleton.js

@@ -40,7 +40,7 @@ const Root = (0, _styles.styled)(_material.Box, {
   }
 }));
 /**
- * > API documentation for the Community-UI Category Header Skeleton component. Learn about the available props and the CSS API.
+ * > API documentation for the Community-JS Category Header Skeleton component. Learn about the available props and the CSS API.
 
  #### Import
 

package/lib/esm/components/ChangeCover/ChangeCover.js

@@ -57,7 +57,7 @@ const Root = (0, _styles.styled)(_material.Box, {
 }));
 
 /**
- *> API documentation for the Community-UI Change Cover component. Learn about the available props and the CSS API.
+ *> API documentation for the Community-JS Change Cover component. Learn about the available props and the CSS API.
  *
  #### Import
  ```jsx

package/lib/esm/components/ChangePicture/ChangePicture.js

@@ -46,7 +46,7 @@ const CPButton = (0, _styles.styled)(_material.Button, {
 }) => ({}));
 
 /**
- * > API documentation for the Community-UI Change Picture component. Learn about the available props and the CSS API.
+ * > API documentation for the Community-JS Change Picture component. Learn about the available props and the CSS API.
 
  #### Import
 

package/lib/esm/components/CommentObject/CommentObject.js

@@ -51,7 +51,7 @@ var _apiServices = require("@selfcommunity/api-services");
 
 var _reactCore = require("@selfcommunity/react-core");
 
-const _excluded = ["id", "className", "commentObjectId", "commentObject", "feedObjectId", "feedObject", "feedObjectType", "commentReply", "onOpenReply", "onDelete", "onVote", "elevation", "CommentObjectSkeletonProps", "ReplyCommentObjectProps"];
+const _excluded = ["id", "className", "commentObjectId", "commentObject", "feedObjectId", "feedObject", "feedObjectType", "commentReply", "onOpenReply", "onDelete", "onVote", "elevation", "CommentObjectSkeletonProps", "ReplyCommentObjectProps", "linkableCommentDateTime"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -117,7 +117,7 @@ const Root = (0, _styles.styled)(_material.Box, {
   [`& .${classes.nestedComments}`]: {
     paddingTop: 0,
     paddingBottom: 0,
-    paddingLeft: 55,
+    paddingLeft: 25,
     '& ul.MuiList-root': {
       paddingTop: 0,
       paddingBottom: 0,
@@ -125,11 +125,15 @@ const Root = (0, _styles.styled)(_material.Box, {
       '& li.MuiListItem-root': {
         paddingTop: 5
       }
+    },
+    [theme.breakpoints.up('sm')]: {
+      paddingLeft: 55
     }
   },
   [`& .${classes.content}`]: {
     position: 'relative',
     display: 'flex',
+    wordBreak: 'break-all',
     '& .MuiCardContent-root': {
       padding: '7px 13px 7px 13px',
       flexGrow: 1
@@ -182,7 +186,7 @@ const Root = (0, _styles.styled)(_material.Box, {
 }));
 
 /**
- *> API documentation for the Community-UI Comment Object component. Learn about the available props and the CSS API.
+ *> API documentation for the Community-JS Comment Object component. Learn about the available props and the CSS API.
 
  #### Import
 
@@ -247,7 +251,8 @@ function CommentObject(inProps) {
       WidgetProps: {
         variant: 'outlined'
       }
-    }
+    },
+    linkableCommentDateTime = true
   } = props,
         rest = _objectWithoutPropertiesLoose(props, _excluded); // CONTEXT
 
@@ -285,11 +290,13 @@ function CommentObject(inProps) {
    */
 
   function renderTimeAgo(comment) {
-    return /*#__PURE__*/_react.default.createElement(_reactCore.Link, {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, linkableCommentDateTime ? /*#__PURE__*/_react.default.createElement(_reactCore.Link, {
       to: scRoutingContext.url(_reactCore.SCRoutes.COMMENT_ROUTE_NAME, (0, _contribution.getRouteData)(comment)),
       className: classes.activityAt
     }, /*#__PURE__*/_react.default.createElement(_DateTimeAgo.default, {
       date: comment.added_at
+    })) : /*#__PURE__*/_react.default.createElement(_DateTimeAgo.default, {
+      date: comment.added_at
     }));
   }
   /**
@@ -741,7 +748,8 @@ function CommentObject(inProps) {
       CommentComponentProps: Object.assign({
         onOpenReply: reply,
         CommentObjectSkeletonProps,
-        elevation: elevation
+        elevation: elevation,
+        linkableCommentDateTime: linkableCommentDateTime
       }, rest),
       CommentsObjectSkeletonProps: {
         count: 1,

package/lib/esm/components/CommentObject/Skeleton.js

@@ -47,7 +47,7 @@ const Root = (0, _styles.styled)(_BaseItem.default)(({
   }
 }));
 /**
- * > API documentation for the Community-UI Comment Object Skeleton component. Learn about the available props and the CSS API.
+ * > API documentation for the Community-JS Comment Object Skeleton component. Learn about the available props and the CSS API.
 
  #### Import