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

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

@@ -5,20 +5,19 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
 const Widget_1 = tslib_1.__importDefault(require("../Widget"));
-const PREFIX = 'SCLoyaltyProgramWidgetSkeleton';
+const constants_1 = require("./constants");
 const classes = {
-    root: `${PREFIX}-root`,
-    title: `${PREFIX}-title`,
-    content: `${PREFIX}-content`,
-    chip: `${PREFIX}-chip`,
-    points: `${PREFIX}-points`,
-    actions: `${PREFIX}-actions`
+    root: `${constants_1.PREFIX}-skeleton-root`,
+    title: `${constants_1.PREFIX}-title`,
+    content: `${constants_1.PREFIX}-content`,
+    chip: `${constants_1.PREFIX}-chip`,
+    points: `${constants_1.PREFIX}-points`,
+    actions: `${constants_1.PREFIX}-actions`
 };
 const Root = (0, styles_1.styled)(Widget_1.default, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    name: constants_1.PREFIX,
+    slot: 'SkeletonRoot'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS Loyalty Program Widget Skeleton component. Learn about the available props and the CSS API.
 
@@ -30,18 +29,18 @@ const Root = (0, styles_1.styled)(Widget_1.default, {
 
  #### Component Name
 
- The name `SCLoyaltyProgramWidgetSkeleton` can be used when providing style overrides in the theme.
+ The name `SCLoyaltyProgramWidget-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCLoyaltyProgramWidgetSkeleton-root|Styles applied to the root element.|
- |title|.SCLoyaltyProgramWidgetSkeleton-title|Styles applied to the title element.|
- |content|.SCLoyaltyProgramWidgetSkeleton-content|Styles applied to the card content section.|
- |chip|.SCLoyaltyProgramWidgetSkeleton-chip|Styles applied to the card chip element.|
- |points|.SCLoyaltyProgramWidgetSkeleton-points|Styles applied to the card actions points element.|
- |actions|.SCLoyaltyProgramWidgetSkeleton-actions|Styles applied to the action section.|
+ |root|.SCLoyaltyProgramWidget-skeleton-root|Styles applied to the root element.|
+ |title|.SCLoyaltyProgramWidget-title|Styles applied to the title element.|
+ |content|.SCLoyaltyProgramWidget-content|Styles applied to the card content section.|
+ |chip|.SCLoyaltyProgramWidget-chip|Styles applied to the card chip element.|
+ |points|.SCLoyaltyProgramWidget-points|Styles applied to the card actions points element.|
+ |actions|.SCLoyaltyProgramWidget-actions|Styles applied to the action section.|
  *
  */
 function LoyaltyProgramWidgetSkeleton() {

package/lib/cjs/components/LoyaltyProgramWidget/constants.d.ts

@@ -0,0 +1 @@
+export declare const PREFIX = "SCLoyaltyProgramWidget";

package/lib/cjs/components/LoyaltyProgramWidget/constants.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PREFIX = void 0;
+exports.PREFIX = 'SCLoyaltyProgramWidget';

package/lib/cjs/components/NavigationToolbar/NavigationToolbar.d.ts

@@ -84,6 +84,7 @@ export interface NavigationToolbarProps extends ToolbarProps {
  |composer|.SCNavigationToolbar-composer|Styles applied to the composer component|
  |profile|.SCNavigationToolbar-profile|Styles applied to the profile button|
  |notification|.SCNavigationToolbar-notification|Styles applied to the notification button|
+ |notificationsMenu|.SCNavigationToolbar-notifications-menu|Styles applied to the notifications menu|
  |messages|.SCNavigationToolbar-messages|Styles applied to the messages button|
  |settings|.SCNavigationToolbar-settings|Styles applied to the settings button|
  |active|.SCNavigationToolbar-active|Styles applied to the active button on navigation|

package/lib/cjs/components/NavigationToolbar/NavigationToolbar.js

@@ -15,26 +15,26 @@ const ComposerIconButton_1 = tslib_1.__importDefault(require("../ComposerIconBut
 const types_1 = require("@selfcommunity/types");
 const react_core_1 = require("@selfcommunity/react-core");
 const NavigationMenuIconButton_1 = tslib_1.__importDefault(require("../NavigationMenuIconButton"));
-const PREFIX = 'SCNavigationToolbar';
+const constants_1 = require("./constants");
 const classes = {
-    root: `${PREFIX}-root`,
-    logo: `${PREFIX}-logo`,
-    register: `${PREFIX}-register`,
-    navigation: `${PREFIX}-navigation`,
-    home: `${PREFIX}-home`,
-    explore: `${PREFIX}-explore`,
-    search: `${PREFIX}-search`,
-    composer: `${PREFIX}-composer`,
-    profile: `${PREFIX}-profile`,
-    notification: `${PREFIX}-notification`,
-    messages: `${PREFIX}-messages`,
-    settings: `${PREFIX}-settings`,
-    active: `${PREFIX}-active`
+    root: `${constants_1.PREFIX}-root`,
+    logo: `${constants_1.PREFIX}-logo`,
+    register: `${constants_1.PREFIX}-register`,
+    navigation: `${constants_1.PREFIX}-navigation`,
+    home: `${constants_1.PREFIX}-home`,
+    explore: `${constants_1.PREFIX}-explore`,
+    search: `${constants_1.PREFIX}-search`,
+    composer: `${constants_1.PREFIX}-composer`,
+    profile: `${constants_1.PREFIX}-profile`,
+    notification: `${constants_1.PREFIX}-notification`,
+    notificationsMenu: `${constants_1.PREFIX}-notifications-menu`,
+    messages: `${constants_1.PREFIX}-messages`,
+    settings: `${constants_1.PREFIX}-settings`,
+    active: `${constants_1.PREFIX}-active`
 };
 const Root = (0, material_1.styled)(material_1.Toolbar, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
+    name: constants_1.PREFIX,
+    slot: 'Root'
 })(() => ({}));
 const PREFERENCES = [
     react_core_1.SCPreferences.CONFIGURATIONS_EXPLORE_STREAM_ENABLED,
@@ -74,6 +74,7 @@ const PREFERENCES = [
  |composer|.SCNavigationToolbar-composer|Styles applied to the composer component|
  |profile|.SCNavigationToolbar-profile|Styles applied to the profile button|
  |notification|.SCNavigationToolbar-notification|Styles applied to the notification button|
+ |notificationsMenu|.SCNavigationToolbar-notifications-menu|Styles applied to the notifications menu|
  |messages|.SCNavigationToolbar-messages|Styles applied to the messages button|
  |settings|.SCNavigationToolbar-settings|Styles applied to the settings button|
  |active|.SCNavigationToolbar-active|Styles applied to the active button on navigation|
@@ -85,7 +86,7 @@ function NavigationToolbar(inProps) {
     // PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
-        name: PREFIX
+        name: constants_1.PREFIX
     });
     const { value = '', className = '', disableSearch = false, disableComposer = false, SearchAutocompleteProps = {}, startActions = null, endActions = null, NavigationSettingsIconButtonComponent = NavigationSettingsIconButton_1.default, children = null, NotificationMenuProps = {}, ComposerIconButtonProps = {}, onOpenNotificationMenu, onCloseNotificationMenu } = props, rest = tslib_1.__rest(props, ["value", "className", "disableSearch", "disableComposer", "SearchAutocompleteProps", "startActions", "endActions", "NavigationSettingsIconButtonComponent", "children", "NotificationMenuProps", "ComposerIconButtonProps", "onOpenNotificationMenu", "onCloseNotificationMenu"]);
     // CONTEXT
@@ -140,7 +141,7 @@ function NavigationToolbar(inProps) {
                     }), "aria-label": "Notification", onClick: handleOpenNotificationMenu },
                     react_1.default.createElement(material_1.Badge, { badgeContent: scUserContext.user.unseen_notification_banners_counter + scUserContext.user.unseen_interactions_counter, color: "secondary" },
                         react_1.default.createElement(Icon_1.default, null, "notifications_active"))),
-                react_1.default.createElement(NotificationMenu_1.default, Object.assign({ id: "notification-menu", anchorEl: anchorNotification, open: Boolean(anchorNotification), onClose: handleCloseNotificationMenu, onClick: handleCloseNotificationMenu, transformOrigin: { horizontal: 'right', vertical: 'top' }, anchorOrigin: { horizontal: 'right', vertical: 'bottom' } }, NotificationMenuProps))),
+                react_1.default.createElement(NotificationMenu_1.default, Object.assign({ className: classes.notificationsMenu, id: "notification-menu", anchorEl: anchorNotification, open: Boolean(anchorNotification), onClose: handleCloseNotificationMenu, onClick: handleCloseNotificationMenu, transformOrigin: { horizontal: 'right', vertical: 'top' }, anchorOrigin: { horizontal: 'right', vertical: 'bottom' } }, NotificationMenuProps))),
             privateMessagingEnabled && (react_1.default.createElement(material_1.IconButton, { className: (0, classnames_1.default)(classes.messages, {
                     [classes.active]: value.startsWith(scRoutingContext.url(react_core_1.SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, {}))
                 }), "aria-label": "Messages", to: scRoutingContext.url(react_core_1.SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, {}), component: react_core_1.Link },

package/lib/cjs/components/NavigationToolbar/NotificationMenu.js

@@ -7,33 +7,22 @@ const react_intl_1 = require("react-intl");
 const react_1 = tslib_1.__importDefault(require("react"));
 const system_1 = require("@mui/system");
 const SnippetNotifications_1 = tslib_1.__importDefault(require("../SnippetNotifications"));
-const PREFIX = 'SCNotificationsMenu';
+const constants_1 = require("./constants");
 const classes = {
-    root: `${PREFIX}-root`,
-    paper: `${PREFIX}-paper`,
-    notifications: `${PREFIX}-notifications`,
-    link: `${PREFIX}-link`
+    root: `${constants_1.PREFIX}-notifications-menu-root`,
+    paper: `${constants_1.PREFIX}-paper`,
+    notifications: `${constants_1.PREFIX}-notifications`,
+    link: `${constants_1.PREFIX}-link`
 };
 const Root = (0, material_1.styled)(material_1.Menu, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    [`& .${classes.paper}`]: {
-        minWidth: 370,
-        padding: theme.spacing(2)
-    },
-    [`& .${classes.link}`]: {
-        display: 'block',
-        textAlign: 'center',
-        margin: theme.spacing(0, 'auto')
-    }
-}));
+    name: constants_1.PREFIX,
+    slot: 'NotificationsMenuRoot'
+})(() => ({}));
 function NotificationMenu(inProps) {
     // PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
-        name: PREFIX
+        name: constants_1.PREFIX
     });
     const { PaperProps = { className: classes.paper }, MenuListProps = { component: material_1.Box }, SnippetNotificationsProps = {} } = props, rest = tslib_1.__rest(props, ["PaperProps", "MenuListProps", "SnippetNotificationsProps"]);
     // HOOKS

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

@@ -9,16 +9,16 @@
 
  #### Component Name
 
- The name `SCNavigationToolbarSkeleton` can be used when providing style overrides in the theme.
+ The name `SCNavigationToolbar-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCNavigationToolbarSkeleton-root|Styles applied to the root element.|
- |logo|.SCNavigationToolbarSkeleton-logo|Styles applied to the logo element.|
- |navigation|.SCNavigationToolbarSkeleton-navigation|Styles applied to the navigation element.|
- |avatar|.SCNavigationToolbarSkeleton-avatar|Styles applied to the avatar element.|
+ |root|.SCNavigationToolbar-skeleton-root|Styles applied to the root element.|
+ |logo|.SCNavigationToolbar-logo|Styles applied to the logo element.|
+ |navigation|.SCNavigationToolbar-navigation|Styles applied to the navigation element.|
+ |avatar|.SCNavigationToolbar-avatar|Styles applied to the avatar element.|
  *
  */
 export default function NavigationToolbarSkeleton(): JSX.Element;

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

@@ -5,18 +5,17 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const material_1 = require("@mui/material");
 const styles_1 = require("@mui/material/styles");
 const Skeleton_1 = tslib_1.__importDefault(require("@mui/material/Skeleton"));
-const PREFIX = 'SCNavigationToolbarSkeleton';
+const constants_1 = require("./constants");
 const classes = {
-    root: `${PREFIX}-root`,
-    logo: `${PREFIX}-logo`,
-    navigation: `${PREFIX}-navigation`,
-    avatar: `${PREFIX}-avatar`
+    root: `${constants_1.PREFIX}-skeleton-root`,
+    logo: `${constants_1.PREFIX}-logo`,
+    navigation: `${constants_1.PREFIX}-navigation`,
+    avatar: `${constants_1.PREFIX}-avatar`
 };
 const Root = (0, styles_1.styled)(material_1.Toolbar, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    name: constants_1.PREFIX,
+    slot: 'SkeletonRoot'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS Navigation Toolbar Skeleton component. Learn about the available props and the CSS API.
 
@@ -28,16 +27,16 @@ const Root = (0, styles_1.styled)(material_1.Toolbar, {
 
  #### Component Name
 
- The name `SCNavigationToolbarSkeleton` can be used when providing style overrides in the theme.
+ The name `SCNavigationToolbar-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCNavigationToolbarSkeleton-root|Styles applied to the root element.|
- |logo|.SCNavigationToolbarSkeleton-logo|Styles applied to the logo element.|
- |navigation|.SCNavigationToolbarSkeleton-navigation|Styles applied to the navigation element.|
- |avatar|.SCNavigationToolbarSkeleton-avatar|Styles applied to the avatar element.|
+ |root|.SCNavigationToolbar-skeleton-root|Styles applied to the root element.|
+ |logo|.SCNavigationToolbar-logo|Styles applied to the logo element.|
+ |navigation|.SCNavigationToolbar-navigation|Styles applied to the navigation element.|
+ |avatar|.SCNavigationToolbar-avatar|Styles applied to the avatar element.|
  *
  */
 function NavigationToolbarSkeleton() {

package/lib/cjs/components/NavigationToolbar/constants.d.ts

@@ -0,0 +1 @@
+export declare const PREFIX = "SCNavigationToolbar";

package/lib/cjs/components/NavigationToolbar/constants.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PREFIX = void 0;
+exports.PREFIX = 'SCNavigationToolbar';

package/lib/cjs/components/Notification/CollapsedFor/CollapsedFor.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)({
     collapsedForAdvertising: {
         id: 'ui.notification.collapsedFor.collapsedForAdvertising',
@@ -37,41 +37,19 @@ const messages = (0, react_intl_1.defineMessages)({
         defaultMessage: 'ui.notification.collapsedFor.collapsedForOfftopic'
     }
 });
-const PREFIX = 'SCCollapsedForNotification';
 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}-collapsed-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: 'CollapsedForRoot'
+})(() => ({}));
 /**
  * This component render the content of the notification of type collapsed for
  * @param inProps
@@ -81,7 +59,7 @@ function CollapsedForNotification(inProps) {
     // PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
-        name: PREFIX
+        name: constants_1.PREFIX
     });
     const { notificationObject, id = `n_${props.notificationObject['sid']}`, template = types_1.SCNotificationObjectTemplateType.DETAIL, className } = props, rest = tslib_1.__rest(props, ["notificationObject", "id", "template", "className"]);
     // ROUTING
@@ -94,7 +72,7 @@ function CollapsedForNotification(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.collapsedFor.${(0, utils_1.camelCase)(notificationObject.type)}Snippet`, defaultMessage: `ui.notification.collapsedFor.${(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/Comment/Comment.js

@@ -17,6 +17,7 @@ const NotificationItem_1 = tslib_1.__importDefault(require("../../../shared/Noti
 const VoteButton_1 = tslib_1.__importDefault(require("../../VoteButton"));
 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)({
     comment: {
         id: 'ui.notification.comment.comment',
@@ -27,21 +28,19 @@ const messages = (0, react_intl_1.defineMessages)({
         defaultMessage: 'ui.notification.comment.nestedComment'
     }
 });
-const PREFIX = 'SCCommentNotification';
 const classes = {
-    root: `${PREFIX}-root`,
-    avatar: `${PREFIX}-avatar`,
-    username: `${PREFIX}-username`,
-    voteButton: `${PREFIX}-vote-button`,
-    contributionText: `${PREFIX}-contribution-text`,
-    activeAt: `${PREFIX}-active-at`,
-    bullet: `${PREFIX}-bullet`
+    root: `${constants_1.PREFIX}-comment-root`,
+    avatar: `${constants_1.PREFIX}-avatar`,
+    username: `${constants_1.PREFIX}-username`,
+    voteButton: `${constants_1.PREFIX}-vote-button`,
+    contributionText: `${constants_1.PREFIX}-contribution-text`,
+    activeAt: `${constants_1.PREFIX}-active-at`,
+    bullet: `${constants_1.PREFIX}-bullet`
 };
 const Root = (0, styles_1.styled)(NotificationItem_1.default, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    name: constants_1.PREFIX,
+    slot: 'CommentRoot'
+})(() => ({}));
 /**
  * This component render the content of the notification of type comment/nested comment
  * @param inProps
@@ -51,7 +50,7 @@ function CommentNotification(inProps) {
     // PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
-        name: PREFIX
+        name: constants_1.PREFIX
     });
     const { notificationObject, onVote, id = `n_${props.notificationObject['sid']}`, template = types_2.SCNotificationObjectTemplateType.DETAIL, className } = props, rest = tslib_1.__rest(props, ["notificationObject", "onVote", "id", "template", "className"]);
     // STATE
@@ -68,7 +67,7 @@ function CommentNotification(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.comment.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.comment.author.deleted && {
                 to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.comment.author)
             }), { onClick: notificationObject.comment.author.deleted ? () => setOpenAlert(true) : null }),
                 react_1.default.createElement(UserAvatar_1.default, { hide: !notificationObject.comment.author.community_badge, smaller: true },

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

@@ -17,6 +17,7 @@ const Bullet_1 = tslib_1.__importDefault(require("../../../shared/Bullet"));
 const VoteButton_1 = tslib_1.__importDefault(require("../../VoteButton"));
 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)({
     postOrStatus: {
         id: 'ui.notification.contribution.newPostOrStatus',
@@ -35,21 +36,19 @@ const messages = (0, react_intl_1.defineMessages)({
         defaultMessage: 'ui.notification.contribution.snippet.discussion'
     }
 });
-const PREFIX = 'SCContributionNotification';
 const classes = {
-    root: `${PREFIX}-root`,
-    avatar: `${PREFIX}-avatar`,
-    username: `${PREFIX}-username`,
-    voteButton: `${PREFIX}-vote-button`,
-    contributionText: `${PREFIX}-contribution-text`,
-    activeAt: `${PREFIX}-active-at`,
-    bullet: `${PREFIX}-bullet`
+    root: `${constants_1.PREFIX}-contribution-root`,
+    avatar: `${constants_1.PREFIX}-avatar`,
+    username: `${constants_1.PREFIX}-username`,
+    voteButton: `${constants_1.PREFIX}-vote-button`,
+    contributionText: `${constants_1.PREFIX}-contribution-text`,
+    activeAt: `${constants_1.PREFIX}-active-at`,
+    bullet: `${constants_1.PREFIX}-bullet`
 };
 const Root = (0, styles_1.styled)(NotificationItem_1.default, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    name: constants_1.PREFIX,
+    slot: 'ContributionRoot'
+})(() => ({}));
 /**
  * This component render the content of the notification of type follow (contribution)
  * @param inProps
@@ -59,7 +58,7 @@ function ContributionNotification(inProps) {
     // PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
-        name: PREFIX
+        name: constants_1.PREFIX
     });
     const { notificationObject, onVote, id = `n_${props.notificationObject['sid']}`, className, template = types_2.SCNotificationObjectTemplateType.DETAIL } = props, rest = tslib_1.__rest(props, ["notificationObject", "onVote", "id", "className", "template"]);
     // ROUTING
@@ -78,7 +77,7 @@ function ContributionNotification(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[contributionType].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[contributionType].author.deleted && {
                 to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject[contributionType].author)
             }), { onClick: notificationObject[contributionType].author.deleted ? () => setOpenAlert(true) : null }),
                 react_1.default.createElement(UserAvatar_1.default, { hide: !notificationObject[contributionType].author.community_badge, smaller: true },

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

@@ -14,48 +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)({
     contributionFollow: {
         id: 'ui.notification.contributionFollow.follow',
         defaultMessage: 'ui.notification.contributionFollow.follow'
     }
 });
-const PREFIX = 'SCContributionFollowNotification';
 const classes = {
-    root: `${PREFIX}-root`,
-    avatar: `${PREFIX}-avatar`,
-    username: `${PREFIX}-username`,
-    followText: `${PREFIX}-follow-text`,
-    activeAt: `${PREFIX}-active-at`,
-    contributionText: `${PREFIX}-contribution-text`
+    root: `${constants_1.PREFIX}-contribution-follow-root`,
+    avatar: `${constants_1.PREFIX}-avatar`,
+    username: `${constants_1.PREFIX}-username`,
+    followText: `${constants_1.PREFIX}-follow-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.followText}`]: {
-        color: theme.palette.text.primary
-    },
-    [`& .${classes.contributionText}`]: {
-        '&:hover': {
-            textDecoration: 'underline'
-        },
-        textOverflow: 'ellipsis',
-        display: 'inline',
-        overflow: 'hidden'
-    },
-    '& .MuiIcon-root': {
-        fontSize: '18px',
-        marginBottom: '0.5px'
-    }
-}));
+    name: constants_1.PREFIX,
+    slot: 'ContributionFollowRoot'
+})(() => ({}));
 /**
  * This component render the content of the notification of type follow (contribution)
  * @param inProps
@@ -65,7 +42,7 @@ function ContributionFollowNotification(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
@@ -80,7 +57,7 @@ function ContributionFollowNotification(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.user.deleted && { to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.user) }), { onClick: notificationObject.user.deleted ? () => setOpenAlert(true) : null }),
+        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.user.deleted && { to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.user) }), { onClick: notificationObject.user.deleted ? () => setOpenAlert(true) : null }),
                 react_1.default.createElement(UserAvatar_1.default, { hide: !notificationObject.user.community_badge, smaller: true },
                     react_1.default.createElement(material_1.Avatar, { alt: notificationObject.user.username, variant: "circular", src: notificationObject.user.avatar, classes: { root: classes.avatar } }))), primary: react_1.default.createElement(material_1.Typography, { component: "span", color: "inherit", className: classes.followText },
                 react_1.default.createElement(react_core_1.Link, Object.assign({}, (!notificationObject.user.deleted && { to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.user) }), { onClick: notificationObject.user.deleted ? () => setOpenAlert(true) : null, className: classes.username }), notificationObject.user.username),

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

@@ -15,7 +15,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)({
     deletedForAdvertising: {
         id: 'ui.notification.deletedFor.deletedForAdvertising',
@@ -38,41 +38,20 @@ const messages = (0, react_intl_1.defineMessages)({
         defaultMessage: 'ui.notification.deletedFor.deletedForOfftopic'
     }
 });
-const PREFIX = 'SCDeletedForNotification';
 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}-deleted-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',
+    name: constants_1.PREFIX,
+    slot: 'DeletedForRoot',
     overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    [`& .${classes.flagIcon}`]: {
-        backgroundColor: colors_1.red[500],
-        color: '#FFF'
-    },
-    [`& .${classes.flagText}`]: {
-        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'
-        }
-    }
-}));
+})(() => ({}));
 /**
  * This component render the content of the notification of type deleted for
  * @param inProps
@@ -82,7 +61,7 @@ function DeletedForNotification(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
@@ -95,7 +74,7 @@ function DeletedForNotification(inProps) {
     /**
      * Renders root object
      */
-    return (react_1.default.createElement(NotificationItem_1.default, 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.deletedFor.${(0, utils_1.camelCase)(notificationObject.type)}Snippet`, defaultMessage: `ui.notification.deletedFor.${(0, utils_1.camelCase)(notificationObject.type)}Snippet` })))) : (react_1.default.createElement(react_1.default.Fragment, null,