[UEPR-401] Display a label beside the username

src/components/carousel/carousel.jsx

@@ -80,6 +80,7 @@
                 return (
                     <Thumbnail
                         creator={item.author.username}
+                        creatorMembershipLabel={item.author.profile.membership_label}
                         href={href}
                         key={`${type}.${item.id}`}
                         loves={item.stats.loves}
@@ -99,7 +100,7 @@
 Carousel.propTypes = {
     className: PropTypes.string,
     fromStarterProjectsPage: PropTypes.bool,
     items: PropTypes.arrayOf(PropTypes.any),
     settings: PropTypes.shape({
         centerMode: PropTypes.bool,
         dots: PropTypes.bool,
@@ -108,7 +109,7 @@
         slidesToShow: PropTypes.number,
         slidesToScroll: PropTypes.number,
         variableWidth: PropTypes.bool,
         responsive: PropTypes.array
     }),
     showLoves: PropTypes.bool,
     showRemixes: PropTypes.bool,

src/components/carousel/legacy-carousel.jsx

@@ -82,6 +82,7 @@
                 return (
                     <Thumbnail
                         creator={item.creator}
+                        creatorMembershipLabel={item.creator_label}
                         href={href}
                         key={[type, item.id].join('.')}
                         loves={item.love_count}
@@ -100,7 +101,7 @@
 
 Carousel.propTypes = {
     className: PropTypes.string,
     items: PropTypes.arrayOf(PropTypes.any),
     settings: PropTypes.shape({
         centerMode: PropTypes.bool,
         dots: PropTypes.bool,
@@ -109,7 +110,7 @@
         slidesToShow: PropTypes.number,
         slidesToScroll: PropTypes.number,
         variableWidth: PropTypes.bool,
         responsive: PropTypes.array
     }),
     showLoves: PropTypes.bool,
     showRemixes: PropTypes.bool,

src/components/membership-label/membership-label.jsx

@@ -0,0 +1,39 @@
+const React = require('react');
+const PropTypes = require('prop-types');
+const {FormattedMessage} = require('react-intl');
+const classNames = require('classnames');
+
+require('./membership-label.scss');
+
+// Expand with other labels if we starting supporting multiple types
+const LABEL_BY_TYPE = {
+    1: 'membership.labels.member'
+};
+
+const MembershipLabel = ({
+    labelType,
+    outerClassName,
+    innerClassName
+}) => {
+    const label = LABEL_BY_TYPE[labelType];
+
+    if (!label) {
+        return null;
+    }
+
+    return (
+        <span className={classNames('membership-label-container', outerClassName)}>
+            <span className={classNames('membership-label-text', innerClassName)}>
+                <FormattedMessage id={label} />
+            </span>
+        </span>
+    );
+};
+
+MembershipLabel.propTypes = {
+    labelType: PropTypes.number,
+    outerClassName: PropTypes.string,
+    innerClassName: PropTypes.string
+};
+
+module.exports = MembershipLabel;

src/components/membership-label/membership-label.scss

@@ -0,0 +1,21 @@
+@use "../../colors";
+
+.membership-label-container {
+    display: inline-flex;
+    padding: 0.125rem 0.3125rem;
+    justify-content: center;
+    align-items: center;
+    border-radius: 1.125rem;
+    background: colors.$ui-purple-dark;
+    margin-left: 0.25rem;
+    vertical-align: middle;
+    // Align the label with the text rather that the text-line
+    transform: translateY(-0.05rem);
+}
+
+.membership-label-text {
+    color: colors.$ui-white;
+    font-size: 0.5rem;
+    font-weight: 500;
+    line-height: normal;
+}

src/components/thumbnail/thumbnail.jsx

@@ -5,12 +5,14 @@ const React = require('react');
 require('./thumbnail.scss');
 
 const ThumbnailRemoveButton = require('./thumbnail-remove-button.jsx');
+const MembershipLabel = require('../../components/membership-label/membership-label.jsx');
 
 const Thumbnail = ({
     alt = '',
     avatar = '',
     className,
     creator,
+    creatorMembershipLabel,
     favorites,
     href = '#',
     linkTitle = true,
@@ -110,12 +112,14 @@ const Thumbnail = ({
     info.push(titleElement);
 
     if (creator) {
+        const shouldShowMembershipLabel = !showAvatar && !!creatorMembershipLabel;
         info.push(
             <div
                 className="thumbnail-creator"
                 key="creator"
             >
                 <a href={`/users/${creator}/`}>{creator}</a>
+                {shouldShowMembershipLabel && <MembershipLabel labelType={creatorMembershipLabel} />}
             </div>
         );
     }
@@ -162,6 +166,7 @@ Thumbnail.propTypes = {
     avatar: PropTypes.string,
     className: PropTypes.string,
     creator: PropTypes.string,
+    creatorMembershipLabel: PropTypes.number,
     favorites: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     href: PropTypes.string,
     linkTitle: PropTypes.bool,

src/l10n.json

@@ -549,5 +549,7 @@
     "feedback.answer.debugging.notHelpful": "Not helpful at all",
     "feedback.answer.debugging.littleHelpful": "A little helpful",
     "feedback.answer.debugging.helpful": "Helpful",
-    "feedback.answer.debugging.veryHelpful": "Very helpful"
+    "feedback.answer.debugging.veryHelpful": "Very helpful",
+
+    "membership.labels.member": "Member"
 }

src/views/messages/message-rows/become-host.jsx

@@ -4,6 +4,7 @@ const PropTypes = require('prop-types');
 const React = require('react');
 
 const SocialMessage = require('../../../components/social-message/social-message.jsx');
+const MembershipLabel = require('../../../components/membership-label/membership-label.jsx');
 
 const BecomeHostMessage = props => (
     <SocialMessage
@@ -21,12 +22,15 @@ const BecomeHostMessage = props => (
                 usernameOrScratchTeam: (
                     props.adminActor ?
                         <FormattedMessage id="messages.becomeHostScratchTeam" /> :
-                        <a
-                            className="social-messages-profile-link"
-                            href={`/users/${props.actorUsername}/`}
-                        >
-                            {props.actorUsername}
-                        </a>
+                        <span>
+                            <a
+                                className="social-messages-profile-link"
+                                href={`/users/${props.actorUsername}/`}
+                            >
+                                {props.actorUsername}
+                            </a>
+                            {!!props.actorLabel && <MembershipLabel labelType={props.actorLabel} />}
+                        </span>
                 ),
                 studio: (
                     <a href={`/studios/${props.studioId}/`}>
@@ -40,6 +44,7 @@ const BecomeHostMessage = props => (
 
 BecomeHostMessage.propTypes = {
     actorUsername: PropTypes.string.isRequired,
+    actorLabel: PropTypes.number,
     adminActor: PropTypes.bool,
     className: PropTypes.string,
     datetimePromoted: PropTypes.string.isRequired,

src/views/messages/message-rows/become-manager.jsx

@@ -4,6 +4,7 @@ const PropTypes = require('prop-types');
 const React = require('react');
 
 const SocialMessage = require('../../../components/social-message/social-message.jsx');
+const MembershipLabel = require('../../../components/membership-label/membership-label.jsx');
 
 const BecomeManagerMessage = props => (
     <SocialMessage
@@ -19,12 +20,15 @@ const BecomeManagerMessage = props => (
             id="messages.becomeManagerText"
             values={{
                 username: (
-                    <a
-                        className="social-messages-profile-link"
-                        href={`/users/${props.actorUsername}/`}
-                    >
-                        {props.actorUsername}
-                    </a>
+                    <span>
+                        <a
+                            className="social-messages-profile-link"
+                            href={`/users/${props.actorUsername}/`}
+                        >
+                            {props.actorUsername}
+                        </a>
+                        {!!props.actorLabel && <MembershipLabel labelType={props.actorLabel} />}
+                    </span>
                 ),
                 studio: (
                     <a href={`/studios/${props.studioId}/`}>
@@ -38,6 +42,7 @@ const BecomeManagerMessage = props => (
 
 BecomeManagerMessage.propTypes = {
     actorUsername: PropTypes.string.isRequired,
+    actorLabel: PropTypes.number,
     className: PropTypes.string,
     datetimePromoted: PropTypes.string.isRequired,
     studioId: PropTypes.number.isRequired,

src/views/messages/message-rows/curator-invite.jsx

@@ -6,6 +6,7 @@ const React = require('react');
 
 const intlShape = require('../../../lib/intl-shape');
 const SocialMessage = require('../../../components/social-message/social-message.jsx');
+const MembershipLabel = require('../../../components/membership-label/membership-label.jsx');
 
 const CuratorInviteMessage = props => (
     <SocialMessage
@@ -21,12 +22,15 @@ const CuratorInviteMessage = props => (
             id="messages.curatorInviteText"
             values={{
                 actorLink: (
-                    <a
-                        className="social-messages-profile-link"
-                        href={`/users/${props.actorUsername}/`}
-                    >
-                        {props.actorUsername}
-                    </a>
+                    <span>
+                        <a
+                            className="social-messages-profile-link"
+                            href={`/users/${props.actorUsername}/`}
+                        >
+                            {props.actorUsername}
+                        </a>
+                        {!!props.actorLabel && <MembershipLabel labelType={props.actorLabel} />}
+                    </span>
                 ),
                 studioLink: (
                     <a href={`/studios/${props.studioId}/`}>
@@ -45,6 +49,7 @@ const CuratorInviteMessage = props => (
 
 CuratorInviteMessage.propTypes = {
     actorUsername: PropTypes.string.isRequired,
+    actorLabel: PropTypes.number,
     className: PropTypes.string,
     datetimePromoted: PropTypes.string.isRequired,
     intl: intlShape,

src/views/messages/message-rows/favorite-project.jsx

@@ -4,6 +4,7 @@ const PropTypes = require('prop-types');
 const React = require('react');
 
 const SocialMessage = require('../../../components/social-message/social-message.jsx');
+const MembershipLabel = require('../../../components/membership-label/membership-label.jsx');
 
 const FavoriteProjectMessage = props => (
     <SocialMessage
@@ -19,12 +20,15 @@ const FavoriteProjectMessage = props => (
             id="messages.favoriteText"
             values={{
                 profileLink: (
-                    <a
-                        className="social-messages-profile-link"
-                        href={`/users/${props.actorUsername}/`}
-                    >
-                        {props.actorUsername}
-                    </a>
+                    <span>
+                        <a
+                            className="social-messages-profile-link"
+                            href={`/users/${props.actorUsername}/`}
+                        >
+                            {props.actorUsername}
+                        </a>
+                        {!!props.actorLabel && <MembershipLabel labelType={props.actorLabel} />}
+                    </span>
                 ),
                 projectLink: (
                     <a href={`/projects/${props.projectId}`}>
@@ -38,6 +42,7 @@ const FavoriteProjectMessage = props => (
 
 FavoriteProjectMessage.propTypes = {
     actorUsername: PropTypes.string.isRequired,
+    actorLabel: PropTypes.number,
     className: PropTypes.string,
     favoriteDateTime: PropTypes.string.isRequired,
     projectId: PropTypes.number.isRequired,

src/views/messages/message-rows/follow-user.jsx

@@ -4,6 +4,7 @@ const PropTypes = require('prop-types');
 const React = require('react');
 
 const SocialMessage = require('../../../components/social-message/social-message.jsx');
+const MembershipLabel = require('../../../components/membership-label/membership-label.jsx');
 
 const FollowUserMessage = props => (
     <SocialMessage
@@ -19,12 +20,15 @@ const FollowUserMessage = props => (
             id="messages.followText"
             values={{
                 profileLink: (
-                    <a
-                        className="social-messages-profile-link"
-                        href={`/users/${props.followerUsername}/`}
-                    >
-                        {props.followerUsername}
-                    </a>
+                    <span>
+                        <a
+                            className="social-messages-profile-link"
+                            href={`/users/${props.followerUsername}/`}
+                        >
+                            {props.followerUsername}
+                        </a>
+                        {!!props.followerLabel && <MembershipLabel labelType={props.followerLabel} />}
+                    </span>
                 )
             }}
         />
@@ -34,7 +38,8 @@ const FollowUserMessage = props => (
 FollowUserMessage.propTypes = {
     className: PropTypes.string,
     followDateTime: PropTypes.string.isRequired,
-    followerUsername: PropTypes.string.isRequired
+    followerUsername: PropTypes.string.isRequired,
+    followerLabel: PropTypes.number
 };
 
 module.exports = FollowUserMessage;

src/views/messages/message-rows/love-project.jsx

@@ -4,6 +4,7 @@ const PropTypes = require('prop-types');
 const React = require('react');
 
 const SocialMessage = require('../../../components/social-message/social-message.jsx');
+const MembershipLabel = require('../../../components/membership-label/membership-label.jsx');
 
 const LoveProjectMessage = props => (
     <SocialMessage
@@ -19,12 +20,15 @@ const LoveProjectMessage = props => (
             id="messages.loveText"
             values={{
                 profileLink: (
-                    <a
-                        className="social-messages-profile-link"
-                        href={`/users/${props.actorUsername}/`}
-                    >
-                        {props.actorUsername}
-                    </a>
+                    <span>
+                        <a
+                            className="social-messages-profile-link"
+                            href={`/users/${props.actorUsername}/`}
+                        >
+                            {props.actorUsername}
+                        </a>
+                        {!!props.actorLabel && <MembershipLabel labelType={props.actorLabel} />}
+                    </span>
                 ),
                 projectLink: (
                     <a href={`/projects/${props.projectId}`}>
@@ -38,6 +42,7 @@ const LoveProjectMessage = props => (
 
 LoveProjectMessage.propTypes = {
     actorUsername: PropTypes.string.isRequired,
+    actorLabel: PropTypes.number,
     className: PropTypes.string,
     loveDateTime: PropTypes.string.isRequired,
     projectId: PropTypes.number.isRequired,

src/views/messages/message-rows/remix-project.jsx

@@ -4,6 +4,7 @@ const PropTypes = require('prop-types');
 const React = require('react');
 
 const SocialMessage = require('../../../components/social-message/social-message.jsx');
+const MembershipLabel = require('../../../components/membership-label/membership-label.jsx');
 
 const RemixProjectMessage = props => (
     <SocialMessage
@@ -19,12 +20,15 @@ const RemixProjectMessage = props => (
             id="messages.remixText"
             values={{
                 profileLink: (
-                    <a
-                        className="social-messages-profile-link"
-                        href={`/users/${props.actorUsername}/`}
-                    >
-                        {props.actorUsername}
-                    </a>
+                    <span>
+                        <a
+                            className="social-messages-profile-link"
+                            href={`/users/${props.actorUsername}/`}
+                        >
+                            {props.actorUsername}
+                        </a>
+                        {!!props.actorLabel && <MembershipLabel labelType={props.actorLabel} />}
+                    </span>
                 ),
                 theRemixLink: (
                     <a href={`/projects/${props.projectId}`}>
@@ -43,6 +47,7 @@ const RemixProjectMessage = props => (
 
 RemixProjectMessage.propTypes = {
     actorUsername: PropTypes.string.isRequired,
+    actorLabel: PropTypes.number,
     className: PropTypes.string,
     parentId: PropTypes.number.isRequired,
     parentTitle: PropTypes.string.isRequired,