@selfcommunity/react-ui 0.7.0-alpha.349 → 0.7.0-alpha.350

package/lib/cjs/components/Notification/IncubatorApproved/IncubatorApproved.js

@@ -12,40 +12,29 @@ const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const types_1 = require("../../../types");
 const system_1 = require("@mui/system");
 const NotificationItem_1 = tslib_1.__importDefault(require("../../../shared/NotificationItem"));
+const constants_1 = require("../constants");
 const messages = (0, react_intl_1.defineMessages)({
     incubatorApproved: {
         id: 'ui.notification.incubatorApproved.approved',
         defaultMessage: 'ui.notification.incubatorApproved.approved'
     }
 });
-const PREFIX = 'SCIncubatorApprovedNotification';
 const classes = {
-    root: `${PREFIX}-root`,
-    categoryIcon: `${PREFIX}-category-icon`,
-    categoryApprovedText: `${PREFIX}-category-approved-text`,
-    activeAt: `${PREFIX}-active-at`,
-    viewIncubatorButton: `${PREFIX}-view-incubator-button`
+    root: `${constants_1.PREFIX}-incubator-approved-root`,
+    categoryIcon: `${constants_1.PREFIX}-category-icon`,
+    categoryApprovedText: `${constants_1.PREFIX}-category-approved-text`,
+    activeAt: `${constants_1.PREFIX}-active-at`,
+    viewIncubatorButton: `${constants_1.PREFIX}-view-incubator-button`
 };
 const Root = (0, styles_1.styled)(NotificationItem_1.default, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    [`& .${classes.categoryIcon}`]: {
-        borderRadius: 3
-    },
-    [`& .${classes.viewIncubatorButton}`]: {
-        padding: theme.spacing(),
-        paddingBottom: 0,
-        textTransform: 'initial',
-        marginLeft: -8
-    }
-}));
+    name: constants_1.PREFIX,
+    slot: 'IncubatorApprovedRoot'
+})(() => ({}));
 function IncubatorApprovedNotification(inProps) {
     // PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
-        name: PREFIX
+        name: constants_1.PREFIX
     });
     const { notificationObject = null, id = `n_${props.notificationObject['feed_serialization_id']}`, template = types_1.SCNotificationObjectTemplateType.DETAIL, className } = props, rest = tslib_1.__rest(props, ["notificationObject", "id", "template", "className"]);
     // ROUTING
@@ -57,7 +46,7 @@ function IncubatorApprovedNotification(inProps) {
     /**
      * Renders root object
      */
-    return (react_1.default.createElement(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className, `${PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, image: react_1.default.createElement(material_1.Avatar, { alt: notificationObject.incubator.approved_category.name, src: notificationObject.incubator.approved_category.image_medium, variant: "square", classes: { root: classes.categoryIcon } }), primary: react_1.default.createElement(react_1.default.Fragment, null, isSnippetTemplate ? (react_1.default.createElement(react_core_1.Link, { to: scRoutingContext.url(react_core_1.SCRoutes.CATEGORY_ROUTE_NAME, notificationObject.incubator.approved_category) },
+    return (react_1.default.createElement(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className, `${constants_1.PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, image: react_1.default.createElement(material_1.Avatar, { alt: notificationObject.incubator.approved_category.name, src: notificationObject.incubator.approved_category.image_medium, variant: "square", classes: { root: classes.categoryIcon } }), primary: react_1.default.createElement(react_1.default.Fragment, null, isSnippetTemplate ? (react_1.default.createElement(react_core_1.Link, { to: scRoutingContext.url(react_core_1.SCRoutes.CATEGORY_ROUTE_NAME, notificationObject.incubator.approved_category) },
             react_1.default.createElement(material_1.Typography, { component: "div", className: classes.categoryApprovedText, color: "inherit" }, intl.formatMessage(messages.incubatorApproved, {
                 name: notificationObject.incubator.name,
                 b: (...chunks) => react_1.default.createElement("strong", null, chunks)

package/lib/cjs/components/Notification/KindlyNoticeFlag/KindlyNoticeFlag.js

@@ -14,47 +14,26 @@ const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const types_1 = require("../../../types");
 const system_1 = require("@mui/system");
 const NotificationItem_1 = tslib_1.__importDefault(require("../../../shared/NotificationItem"));
-const colors_1 = require("@mui/material/colors");
+const constants_1 = require("../constants");
 const messages = (0, react_intl_1.defineMessages)({
     kindlyNoticeFlag: {
         id: 'ui.notification.kindlyNoticeFlag.kindlyNoticeFlag',
         defaultMessage: 'ui.notification.kindlyNoticeFlag.kindlyNoticeFlag'
     }
 });
-const PREFIX = 'SCKindlyNoticeFlagNotification';
 const classes = {
-    root: `${PREFIX}-root`,
-    flagIcon: `${PREFIX}-flag-icon`,
-    flagText: `${PREFIX}-flag-text`,
-    activeAt: `${PREFIX}-active-at`,
-    contributionWrap: `${PREFIX}-contribution-wrap`,
-    contributionYouWroteLabel: `${PREFIX}-contribution-you-wrote-label`,
-    contributionText: `${PREFIX}-contribution-text`
+    root: `${constants_1.PREFIX}-kindly-notice-flag-root`,
+    flagIcon: `${constants_1.PREFIX}-flag-icon`,
+    flagText: `${constants_1.PREFIX}-flag-text`,
+    activeAt: `${constants_1.PREFIX}-active-at`,
+    contributionWrap: `${constants_1.PREFIX}-contribution-wrap`,
+    contributionYouWroteLabel: `${constants_1.PREFIX}-contribution-you-wrote-label`,
+    contributionText: `${constants_1.PREFIX}-contribution-text`
 };
 const Root = (0, styles_1.styled)(NotificationItem_1.default, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    [`& .${classes.flagIcon}`]: {
-        backgroundColor: colors_1.red[500],
-        color: '#FFF'
-    },
-    [`& .${classes.flagText}`]: {
-        color: theme.palette.text.primary
-    },
-    [`& .${classes.contributionWrap}`]: {
-        padding: `${theme.spacing(2)} ${theme.spacing(2)}`,
-        textOverflow: 'ellipsis',
-        display: 'inline',
-        overflow: 'hidden'
-    },
-    [`& .${classes.contributionText}`]: {
-        '&:hover': {
-            textDecoration: 'underline'
-        }
-    }
-}));
+    name: constants_1.PREFIX,
+    slot: 'KindlyNoticeFlagRoot'
+})(() => ({}));
 /**
  * This component render the content of the notification of type kindly notice flag
  * @param inProps
@@ -64,7 +43,7 @@ function KindlyNoticeFlagNotification(inProps) {
     // PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
-        name: PREFIX
+        name: constants_1.PREFIX
     });
     const { notificationObject, id = `n_${props.notificationObject['sid']}`, className, template = types_1.SCNotificationObjectTemplateType.DETAIL } = props, rest = tslib_1.__rest(props, ["notificationObject", "id", "className", "template"]);
     // ROUTING
@@ -77,7 +56,7 @@ function KindlyNoticeFlagNotification(inProps) {
     /**
      * Renders root object
      */
-    return (react_1.default.createElement(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className, `${PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, image: react_1.default.createElement(material_1.Avatar, { variant: "circular", classes: { root: classes.flagIcon } },
+    return (react_1.default.createElement(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className, `${constants_1.PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, image: react_1.default.createElement(material_1.Avatar, { variant: "circular", classes: { root: classes.flagIcon } },
             react_1.default.createElement(Icon_1.default, null, "outlined_flag")), primary: react_1.default.createElement(react_1.default.Fragment, null, isSnippetTemplate ? (react_1.default.createElement(react_core_1.Link, { to: scRoutingContext.url(react_core_1.SCRoutes[`${contributionType.toUpperCase()}_ROUTE_NAME`], (0, contribution_1.getRouteData)(notificationObject[contributionType])) },
             react_1.default.createElement(material_1.Typography, { component: "div", color: "inherit", className: classes.flagText },
                 react_1.default.createElement(react_intl_1.FormattedMessage, { id: `ui.notification.kindlyNoticeFlag.kindlyNoticeFlagSnippet`, defaultMessage: `ui.notification.kindlyNoticeFlag.kindlyNoticeFlagSnippet` })))) : (react_1.default.createElement(material_1.Typography, { component: "div", color: "inherit", className: classes.flagText }, intl.formatMessage(messages[(0, utils_1.camelCase)(notificationObject.type)], { b: (...chunks) => react_1.default.createElement("strong", null, chunks) })))), secondary: (template === types_1.SCNotificationObjectTemplateType.DETAIL || template === types_1.SCNotificationObjectTemplateType.SNIPPET) && (react_1.default.createElement(DateTimeAgo_1.default, { date: notificationObject.active_at, className: classes.activeAt })), footer: !isSnippetTemplate && (react_1.default.createElement(material_1.Box, { className: classes.contributionWrap },

package/lib/cjs/components/Notification/KindlyNoticeFor/KindlyNoticeFor.js

@@ -14,7 +14,7 @@ const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const types_1 = require("../../../types");
 const system_1 = require("@mui/system");
 const NotificationItem_1 = tslib_1.__importDefault(require("../../../shared/NotificationItem"));
-const colors_1 = require("@mui/material/colors");
+const constants_1 = require("../constants");
 const messages = (0, react_intl_1.defineMessages)({
     youWrote: {
         id: 'ui.notification.kindlyNoticeFor.youWrote',
@@ -41,41 +41,19 @@ const messages = (0, react_intl_1.defineMessages)({
         defaultMessage: 'ui.notification.kindlyNoticeFor.kindlyNoticeOfftopic'
     }
 });
-const PREFIX = 'SCKindlyNoticeForNotification';
 const classes = {
-    root: `${PREFIX}-root`,
-    flagIcon: `${PREFIX}-flag-icon`,
-    flagText: `${PREFIX}-flag-text`,
-    activeAt: `${PREFIX}-active-at`,
-    contributionWrap: `${PREFIX}-contribution-wrap`,
-    contributionYouWroteLabel: `${PREFIX}-contribution-you-wrote-label`,
-    contributionText: `${PREFIX}-contribution-text`
+    root: `${constants_1.PREFIX}-kindly-notice-for-root`,
+    flagIcon: `${constants_1.PREFIX}-flag-icon`,
+    flagText: `${constants_1.PREFIX}-flag-text`,
+    activeAt: `${constants_1.PREFIX}-active-at`,
+    contributionWrap: `${constants_1.PREFIX}-contribution-wrap`,
+    contributionYouWroteLabel: `${constants_1.PREFIX}-contribution-you-wrote-label`,
+    contributionText: `${constants_1.PREFIX}-contribution-text`
 };
 const Root = (0, styles_1.styled)(NotificationItem_1.default, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    width: '100%',
-    [`& .${classes.flagIcon}`]: {
-        backgroundColor: colors_1.red[500],
-        color: '#FFF'
-    },
-    [`& .${classes.flagText}`]: {
-        color: theme.palette.text.primary
-    },
-    [`& .${classes.contributionWrap}`]: {
-        padding: `${theme.spacing(2)} ${theme.spacing(2)}`,
-        textOverflow: 'ellipsis',
-        display: 'inline',
-        overflow: 'hidden'
-    },
-    [`& .${classes.contributionText}`]: {
-        '&:hover': {
-            textDecoration: 'underline'
-        }
-    }
-}));
+    name: constants_1.PREFIX,
+    slot: 'KindlyNoticeForRoot'
+})(() => ({}));
 /**
  * This component render the content of the notification of type kindly notice for
  * @param inProps
@@ -85,7 +63,7 @@ function KindlyNoticeForNotification(inProps) {
     // PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
-        name: PREFIX
+        name: constants_1.PREFIX
     });
     const { notificationObject, id = `n_${props.notificationObject['sid']}`, className, template = types_1.SCNotificationObjectTemplateType.DETAIL } = props, rest = tslib_1.__rest(props, ["notificationObject", "id", "className", "template"]);
     // ROUTING
@@ -98,7 +76,7 @@ function KindlyNoticeForNotification(inProps) {
     /**
      * Renders root object
      */
-    return (react_1.default.createElement(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className, `${PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, image: react_1.default.createElement(material_1.Avatar, { variant: "circular", classes: { root: classes.flagIcon } },
+    return (react_1.default.createElement(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className, `${constants_1.PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, image: react_1.default.createElement(material_1.Avatar, { variant: "circular", classes: { root: classes.flagIcon } },
             react_1.default.createElement(Icon_1.default, null, "outlined_flag")), primary: react_1.default.createElement(react_1.default.Fragment, null, isSnippetTemplate ? (react_1.default.createElement(react_core_1.Link, { to: scRoutingContext.url(react_core_1.SCRoutes[`${contributionType.toUpperCase()}_ROUTE_NAME`], (0, contribution_1.getRouteData)(notificationObject[contributionType])) },
             react_1.default.createElement(material_1.Typography, { component: "div", color: "inherit", className: classes.flagText },
                 react_1.default.createElement(react_intl_1.FormattedMessage, { id: `ui.notification.kindlyNoticeFor.${(0, utils_1.camelCase)(notificationObject.type)}Snippet`, defaultMessage: `ui.notification.kindlyNoticeFor.${(0, utils_1.camelCase)(notificationObject.type)}Snippet` })))) : (react_1.default.createElement(material_1.Typography, { component: "div", color: "inherit", className: classes.flagText }, intl.formatMessage(messages[(0, utils_1.camelCase)(notificationObject.type)], { b: (...chunks) => react_1.default.createElement("strong", null, chunks) })))), secondary: (template === types_1.SCNotificationObjectTemplateType.DETAIL || template === types_1.SCNotificationObjectTemplateType.SNIPPET) && (react_1.default.createElement(DateTimeAgo_1.default, { date: notificationObject.active_at, className: classes.activeAt })), footer: isSnippetTemplate ? null : (react_1.default.createElement(react_1.default.Fragment, null,

package/lib/cjs/components/Notification/Mention/Mention.js

@@ -14,44 +14,25 @@ const system_1 = require("@mui/system");
 const NotificationItem_1 = tslib_1.__importDefault(require("../../../shared/NotificationItem"));
 const UserDeletedSnackBar_1 = tslib_1.__importDefault(require("../../../shared/UserDeletedSnackBar"));
 const UserAvatar_1 = tslib_1.__importDefault(require("../../../shared/UserAvatar"));
+const constants_1 = require("../constants");
 const messages = (0, react_intl_1.defineMessages)({
     quotedYouOn: {
         id: 'ui.notification.mention.quotedYou',
         defaultMessage: 'ui.notification.mention.quotedYou'
     }
 });
-const PREFIX = 'SCNotificationMention';
 const classes = {
-    root: `${PREFIX}-root`,
-    avatar: `${PREFIX}-avatar`,
-    username: `${PREFIX}-username`,
-    mentionText: `${PREFIX}-mention-text`,
-    activeAt: `${PREFIX}-active-at`,
-    contributionText: `${PREFIX}-contribution-text`
+    root: `${constants_1.PREFIX}-mention-root`,
+    avatar: `${constants_1.PREFIX}-avatar`,
+    username: `${constants_1.PREFIX}-username`,
+    mentionText: `${constants_1.PREFIX}-mention-text`,
+    activeAt: `${constants_1.PREFIX}-active-at`,
+    contributionText: `${constants_1.PREFIX}-contribution-text`
 };
 const Root = (0, styles_1.styled)(NotificationItem_1.default, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    [`& .${classes.username}`]: {
-        fontWeight: 700,
-        '&:hover': {
-            textDecoration: 'underline'
-        }
-    },
-    [`& .${classes.mentionText}`]: {
-        color: theme.palette.text.primary
-    },
-    [`& .${classes.contributionText}`]: {
-        '&:hover': {
-            textDecoration: 'underline'
-        },
-        textOverflow: 'ellipsis',
-        display: 'inline',
-        overflow: 'hidden'
-    }
-}));
+    name: constants_1.PREFIX,
+    slot: 'MentionRoot'
+})(() => ({}));
 /**
  * This component render the content of the notification of type mention
  * @param inProps
@@ -61,7 +42,7 @@ function MentionNotification(inProps) {
     // PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
-        name: PREFIX
+        name: constants_1.PREFIX
     });
     const { notificationObject, id = `n_${props.notificationObject['sid']}`, className, template = types_1.SCNotificationObjectTemplateType.DETAIL } = props, rest = tslib_1.__rest(props, ["notificationObject", "id", "className", "template"]);
     // CONTEXT
@@ -77,7 +58,7 @@ function MentionNotification(inProps) {
      * Renders root object
      */
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className, `${PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, image: react_1.default.createElement(react_core_1.Link, Object.assign({}, (!notificationObject[objectType].author.deleted && {
+        react_1.default.createElement(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className, `${constants_1.PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, image: react_1.default.createElement(react_core_1.Link, Object.assign({}, (!notificationObject[objectType].author.deleted && {
                 to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject[objectType].author)
             }), { onClick: notificationObject[objectType].author.deleted ? () => setOpenAlert(true) : null }),
                 react_1.default.createElement(UserAvatar_1.default, { hide: !notificationObject[objectType].author.community_badge, smaller: true },

package/lib/cjs/components/Notification/Notification.js

@@ -34,31 +34,30 @@ const utils_1 = require("@selfcommunity/utils");
 const types_1 = require("@selfcommunity/types");
 const UserDeletedSnackBar_1 = tslib_1.__importDefault(require("../../shared/UserDeletedSnackBar"));
 const UserAvatar_1 = tslib_1.__importDefault(require("../../shared/UserAvatar"));
+const constants_1 = require("./constants");
 const messages = (0, react_intl_1.defineMessages)({
     receivePrivateMessage: {
         id: 'ui.notification.receivePrivateMessage',
         defaultMessage: 'ui.notification.receivePrivateMessage'
     }
 });
-const PREFIX = 'SCNotification';
 const classes = {
-    root: `${PREFIX}-root`,
-    header: `${PREFIX}-header`,
-    avatar: `${PREFIX}-avatar`,
-    title: `${PREFIX}-title`,
-    image: `${PREFIX}-image`,
-    username: `${PREFIX}-username`,
-    content: `${PREFIX}-content`,
-    unCollapsed: `${PREFIX}-uncollapsed`,
-    collapsed: `${PREFIX}-collapsed`,
-    stopButton: `${PREFIX}-stop-button`,
-    showOtherAggregated: `${PREFIX}-show-other-aggregated`
+    root: `${constants_1.PREFIX}-root`,
+    header: `${constants_1.PREFIX}-header`,
+    avatar: `${constants_1.PREFIX}-avatar`,
+    title: `${constants_1.PREFIX}-title`,
+    image: `${constants_1.PREFIX}-image`,
+    username: `${constants_1.PREFIX}-username`,
+    content: `${constants_1.PREFIX}-content`,
+    unCollapsed: `${constants_1.PREFIX}-uncollapsed`,
+    collapsed: `${constants_1.PREFIX}-collapsed`,
+    stopButton: `${constants_1.PREFIX}-stop-button`,
+    showOtherAggregated: `${constants_1.PREFIX}-show-other-aggregated`
 };
 const Root = (0, styles_1.styled)(Widget_1.default, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    name: constants_1.PREFIX,
+    slot: 'Root'
+})(() => ({}));
 /**
  *
  > API documentation for the Community-JS UserNotification component. Learn about the available props and the CSS API.
@@ -96,7 +95,7 @@ function UserNotification(inProps) {
     // PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
-        name: PREFIX
+        name: constants_1.PREFIX
     });
     const { id = `notification_${props.notificationObject.sid}`, className, notificationObject, handleCustomNotification, showMaxAggregated = 2, collapsedOtherAggregated = true, onStateChange, onHeightChange } = props, rest = tslib_1.__rest(props, ["id", "className", "notificationObject", "handleCustomNotification", "showMaxAggregated", "collapsedOtherAggregated", "onStateChange", "onHeightChange"]);
     // ROUTING

package/lib/cjs/components/Notification/PrivateMessage/PrivateMessage.js

@@ -14,72 +14,28 @@ const NotificationItem_1 = tslib_1.__importDefault(require("../../../shared/Noti
 const lab_1 = require("@mui/lab");
 const UserDeletedSnackBar_1 = tslib_1.__importDefault(require("../../../shared/UserDeletedSnackBar"));
 const UserAvatar_1 = tslib_1.__importDefault(require("../../../shared/UserAvatar"));
+const constants_1 = require("../constants");
 const messages = (0, react_intl_1.defineMessages)({
     receivePrivateMessage: {
         id: 'ui.notification.receivePrivateMessage',
         defaultMessage: 'ui.notification.receivePrivateMessage'
     }
 });
-const PREFIX = 'SCNotificationPrivateMessage';
 const classes = {
-    root: `${PREFIX}-root`,
-    avatar: `${PREFIX}-avatar`,
-    actions: `${PREFIX}-actions`,
-    replyButton: `${PREFIX}-reply-button`,
-    activeAt: `${PREFIX}-active-at`,
-    messageLabel: `${PREFIX}-message-label`,
-    username: `${PREFIX}-username`,
-    messageWrap: `${PREFIX}-message-wrap`,
-    message: `${PREFIX}-message`
+    root: `${constants_1.PREFIX}-private-message-root`,
+    avatar: `${constants_1.PREFIX}-avatar`,
+    actions: `${constants_1.PREFIX}-actions`,
+    replyButton: `${constants_1.PREFIX}-reply-button`,
+    activeAt: `${constants_1.PREFIX}-active-at`,
+    messageLabel: `${constants_1.PREFIX}-message-label`,
+    username: `${constants_1.PREFIX}-username`,
+    messageWrap: `${constants_1.PREFIX}-message-wrap`,
+    message: `${constants_1.PREFIX}-message`
 };
 const Root = (0, styles_1.styled)(NotificationItem_1.default, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    [`& .${classes.username}`]: {
-        display: 'inline',
-        fontWeight: 700,
-        '&:hover': {
-            textDecoration: 'underline'
-        }
-    },
-    [`& .${classes.messageLabel}`]: {
-        color: theme.palette.text.primary
-    },
-    [`& .${classes.messageWrap}`]: {
-        textOverflow: 'ellipsis',
-        overflow: 'hidden',
-        WebkitLineClamp: '2',
-        lineClamp: 2,
-        WebkitBoxOrient: 'vertical',
-        '& p': {
-            margin: 0
-        }
-    },
-    [`& .${classes.message}`]: {
-        height: 20,
-        overflowY: 'hidden',
-        textOverflow: 'ellipsis',
-        display: 'inline',
-        overflow: 'hidden',
-        '&:hover': {
-            textDecoration: 'underline'
-        },
-        '& > p': {
-            overflowY: 'hidden',
-            textOverflow: 'ellipsis',
-            display: '-webkit-box',
-            WebkitLineClamp: '2',
-            lineClamp: 2,
-            WebkitBoxOrient: 'vertical'
-        }
-    },
-    [`& .${classes.actions}`]: {
-        fontSize: '13px',
-        maxWidth: '40%'
-    }
-}));
+    name: constants_1.PREFIX,
+    slot: 'PrivateMessageRoot'
+})(() => ({}));
 /**
  * This component render the content of the notification of type private message
  * @param inProps
@@ -89,7 +45,7 @@ function PrivateMessageNotification(inProps) {
     // PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
-        name: PREFIX
+        name: constants_1.PREFIX
     });
     const { notificationObject, id = `n_${props.notificationObject['sid']}`, className, template = types_1.SCNotificationObjectTemplateType.DETAIL } = props, rest = tslib_1.__rest(props, ["notificationObject", "id", "className", "template"]);
     // CONTEXT
@@ -127,7 +83,7 @@ function PrivateMessageNotification(inProps) {
     });
     // RENDER
     if (isSnippetTemplate || isToastTemplate) {
-        return (react_1.default.createElement(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className, `${PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, image: react_1.default.createElement(react_core_1.Link, Object.assign({}, (!notificationObject.message.sender.deleted && {
+        return (react_1.default.createElement(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className, `${constants_1.PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, image: react_1.default.createElement(react_core_1.Link, Object.assign({}, (!notificationObject.message.sender.deleted && {
                 to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.message.sender)
             }), { onClick: notificationObject.message.sender.deleted ? () => setOpenAlert(true) : null }),
                 react_1.default.createElement(UserAvatar_1.default, { hide: !notificationObject.message.sender.community_badge, smaller: true },
@@ -157,7 +113,7 @@ function PrivateMessageNotification(inProps) {
                     react_1.default.createElement(react_core_1.Link, { to: scRoutingContext.url(react_core_1.SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, notificationObject.message.sender) }, scUserContext.user && follower ? (react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.userToastNotifications.replyMessage", defaultMessage: 'ui.userToastNotifications.replyMessage' })) : (react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.userToastNotifications.viewMessage", defaultMessage: 'ui.userToastNotifications.viewMessage' })))))) }, rest)));
     }
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className, `${PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, actions: react_1.default.createElement(material_1.Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 },
+        react_1.default.createElement(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className, `${constants_1.PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, actions: react_1.default.createElement(material_1.Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 },
                 react_1.default.createElement(DateTimeAgo_1.default, { date: notificationObject.active_at, className: classes.activeAt }),
                 react_1.default.createElement(lab_1.LoadingButton, { color: 'primary', variant: "outlined", size: "small", classes: { root: classes.replyButton }, component: react_core_1.Link, loading: notificationObject.message.sender.deleted
                         ? null

package/lib/cjs/components/Notification/Skeleton.d.ts

@@ -9,13 +9,13 @@
 
  #### Component Name
 
- The name `SCNotificationSkeleton` can be used when providing style overrides in the theme.
+ The name `SCNotification-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCNotificationSkeleton-root|Styles applied to the root element.|
+ |root|.SCNotification-skeleton-root|Styles applied to the root element.|
  *
  */
 export default function NotificationSkeleton(props: any): JSX.Element;

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

@@ -7,13 +7,14 @@ const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
 const Skeleton_1 = tslib_1.__importDefault(require("@mui/material/Skeleton"));
 const Widget_1 = tslib_1.__importDefault(require("../Widget"));
-const PREFIX = 'SCNotificationSkeleton';
+const constants_1 = require("./constants");
 const classes = {
-    root: `${PREFIX}-root`
+    root: `${constants_1.PREFIX}-skeleton-root`
 };
-const Root = (0, styles_1.styled)(Widget_1.default)(({ theme }) => ({
-    marginBottom: theme.spacing(2)
-}));
+const Root = (0, styles_1.styled)(Widget_1.default, {
+    name: constants_1.PREFIX,
+    slot: 'SkeletonRoot'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS Notification Skeleton component. Learn about the available props and the CSS API.
 
@@ -25,13 +26,13 @@ const Root = (0, styles_1.styled)(Widget_1.default)(({ theme }) => ({
 
  #### Component Name
 
- The name `SCNotificationSkeleton` can be used when providing style overrides in the theme.
+ The name `SCNotification-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCNotificationSkeleton-root|Styles applied to the root element.|
+ |root|.SCNotification-skeleton-root|Styles applied to the root element.|
  *
  */
 function NotificationSkeleton(props) {

package/lib/cjs/components/Notification/UndeletedFor/UndeletedFor.js

@@ -5,7 +5,6 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
 const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
-const colors_1 = require("@mui/material/colors");
 const react_core_1 = require("@selfcommunity/react-core");
 const react_intl_1 = require("react-intl");
 const contribution_1 = require("../../../utils/contribution");
@@ -14,41 +13,20 @@ const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const types_1 = require("../../../types");
 const system_1 = require("@mui/system");
 const NotificationItem_1 = tslib_1.__importDefault(require("../../../shared/NotificationItem"));
-const PREFIX = 'SCUndeletedForNotification';
+const constants_1 = require("../constants");
 const classes = {
-    root: `${PREFIX}-root`,
-    undeletedIcon: `${PREFIX}-undeleted-icon`,
-    undeletedText: `${PREFIX}-undeleted-text`,
-    activeAt: `${PREFIX}-active-at`,
-    contributionWrap: `${PREFIX}-contribution-wrap`,
-    contributionYouWroteLabel: `${PREFIX}-contribution-you-wrote-label`,
-    contributionText: `${PREFIX}-contribution-text`
+    root: `${constants_1.PREFIX}-undeleted-for-root`,
+    undeletedIcon: `${constants_1.PREFIX}-undeleted-icon`,
+    undeletedText: `${constants_1.PREFIX}-undeleted-text`,
+    activeAt: `${constants_1.PREFIX}-active-at`,
+    contributionWrap: `${constants_1.PREFIX}-contribution-wrap`,
+    contributionYouWroteLabel: `${constants_1.PREFIX}-contribution-you-wrote-label`,
+    contributionText: `${constants_1.PREFIX}-contribution-text`
 };
 const Root = (0, styles_1.styled)(NotificationItem_1.default, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    [`& .${classes.undeletedIcon}`]: {
-        backgroundColor: colors_1.red[500],
-        color: '#FFF'
-    },
-    [`& .${classes.undeletedText}`]: {
-        color: theme.palette.text.primary
-    },
-    [`& .${classes.contributionWrap}`]: {
-        marginBottom: theme.spacing(1),
-        padding: theme.spacing(2),
-        textOverflow: 'ellipsis',
-        display: 'inline',
-        overflow: 'hidden'
-    },
-    [`& .${classes.contributionText}`]: {
-        '&:hover': {
-            textDecoration: 'underline'
-        }
-    }
-}));
+    name: constants_1.PREFIX,
+    slot: 'UndeletedForRoot'
+})(() => ({}));
 /**
  * This component render the content of the notification of type undeleted for
  * @param inProps
@@ -58,7 +36,7 @@ function UndeletedForNotification(inProps) {
     // PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
-        name: PREFIX
+        name: constants_1.PREFIX
     });
     const { notificationObject, id = `n_${props.notificationObject['sid']}`, className, template = types_1.SCNotificationObjectTemplateType.DETAIL } = props, rest = tslib_1.__rest(props, ["notificationObject", "id", "className", "template"]);
     // CONTEXT
@@ -69,7 +47,7 @@ function UndeletedForNotification(inProps) {
     /**
      * Renders root object
      */
-    return (react_1.default.createElement(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className, `${PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, image: react_1.default.createElement(material_1.Avatar, { variant: "circular", classes: { root: classes.undeletedIcon } },
+    return (react_1.default.createElement(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className, `${constants_1.PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, image: react_1.default.createElement(material_1.Avatar, { variant: "circular", classes: { root: classes.undeletedIcon } },
             react_1.default.createElement(Icon_1.default, null, "outlined_flag")), primary: react_1.default.createElement(react_1.default.Fragment, null, isSnippetTemplate ? (react_1.default.createElement(react_core_1.Link, { to: scRoutingContext.url(react_core_1.SCRoutes[`${contributionType.toUpperCase()}_ROUTE_NAME`], (0, contribution_1.getRouteData)(notificationObject[contributionType])) },
             react_1.default.createElement(material_1.Typography, { component: "div", color: "inherit", className: classes.undeletedText },
                 react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.notification.undeletedFor.restoredContentSnippet", defaultMessage: "ui.notification.undeletedFor.restoredContentSnippet" })))) : (react_1.default.createElement(material_1.Typography, { component: "div", color: "inherit", className: classes.undeletedText },