Create UserDisplayName component

src/components/UserDisplayName/UserDisplayName.example.js

@@ -0,0 +1,73 @@
+import UserDisplayName from './UserDisplayName';
+import { types as sdkTypes } from '../../util/sdkLoader';
+import { fakeIntl } from '../../util/test-data';
+
+const { UUID } = sdkTypes;
+
+const bannedUser = {
+  id: new UUID('banned-user'),
+  type: 'user',
+  attributes: {
+    banned: true,
+    deleted: false,
+  },
+};
+
+const deletedUser = {
+  id: new UUID('deleted-user'),
+  type: 'user',
+  attributes: {
+    banned: false,
+    deleted: true,
+  },
+};
+
+const normalUser = {
+  id: new UUID('normal-user'),
+  type: 'user',
+  attributes: {
+    banned: false,
+    deleted: false,
+    profile: {
+      displayName: 'Normal User',
+      abbreviatedName: 'NU',
+    },
+  },
+};
+
+export const BannedUser = {
+  component: UserDisplayName,
+  props: {
+    user: bannedUser,
+    intl: fakeIntl,
+  },
+  group: 'users',
+};
+
+export const DeletedUser = {
+  component: UserDisplayName,
+  props: {
+    user: deletedUser,
+    intl: fakeIntl,
+  },
+  group: 'users',
+};
+
+export const NormalUser = {
+  component: UserDisplayName,
+  props: {
+    user: normalUser,
+    intl: fakeIntl,
+  },
+  group: 'users',
+};
+
+export const BannedUserWithCustomName = {
+  component: UserDisplayName,
+  props: {
+    user: bannedUser,
+    bannedUserDisplayName: 'Custom banned user name',
+    intl: fakeIntl,
+  },
+  group: 'users',
+};

src/components/UserDisplayName/UserDisplayName.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import classNames from 'classnames';
+import { oneOfType, string } from 'prop-types';
+import { propTypes } from '../../util/types';
+
+const UserDisplayName = props => {
+  const {
+    rootClassName,
+    className,
+    user,
+    intl,
+    deletedUserDisplayName,
+    bannedUserDisplayName,
+  } = props;
+  const hasAttributes = user && user.attributes;
+  const userIsDeleted = hasAttributes && user.attributes.deleted;
+  const userIsBanned = hasAttributes && user.attributes.banned;
+  const userHasProfile = hasAttributes && user.attributes.profile;
+  const userDisplayName = userHasProfile && user.attributes.profile.displayName;
+
+  const deletedUserDisplayNameInUse = deletedUserDisplayName
+    ? deletedUserDisplayName
+    : intl.formatMessage({
+        id: 'UserDisplayName.deleted',
+      });
+
+  const bannedUserDisplayNameInUse = bannedUserDisplayName
+    ? bannedUserDisplayName
+    : intl.formatMessage({
+        id: 'UserDisplayName.banned',
+      });
+
+  const displayName = userDisplayName
+    ? userDisplayName
+    : userIsDeleted
+    ? deletedUserDisplayNameInUse
+    : userIsBanned
+    ? bannedUserDisplayNameInUse
+    : null;
+
+  const classes = classNames(rootClassName, className);
+  return <span className={classes}>{displayName}</span>;
+};
+
+UserDisplayName.defaultProps = {
+  rootClassName: null,
+  className: null,
+
+  user: null,
+  deletedUserDisplayName: null,
+  bannedUserDisplayName: null,
+};
+
+UserDisplayName.propTypes = {
+  rootClassName: string,
+  className: string,
+
+  user: oneOfType([propTypes.user, propTypes.currentUser]),
+  deletedUserDisplayName: string,
+  bannedUserDisplayName: string,
+};
+
+export default UserDisplayName;

src/components/index.js

@@ -114,5 +114,6 @@ export { default as TopbarDesktop } from './TopbarDesktop/TopbarDesktop';
 export { default as TopbarMobileMenu } from './TopbarMobileMenu/TopbarMobileMenu';
 export { default as TransactionPanel } from './TransactionPanel/TransactionPanel';
 export { default as UserCard } from './UserCard/UserCard';
+export { default as UserDisplayName } from './UserDisplayName/UserDisplayName';
 export { default as UserNav } from './UserNav/UserNav';
 export { default as ValidationError } from './ValidationError/ValidationError';

src/examples.js

@@ -65,6 +65,7 @@ import * as TabNav from './components/TabNav/TabNav.example';
 import * as TabNavHorizontal from './components/TabNavHorizontal/TabNavHorizontal.example';
 import * as Tabs from './components/Tabs/Tabs.example';
 import * as UserCard from './components/UserCard/UserCard.example';
+import * as UserDisplayName from './components/UserDisplayName/UserDisplayName.example';
 
 // forms
 import * as BookingDatesForm from './forms/BookingDatesForm/BookingDatesForm.example';
@@ -179,4 +180,5 @@ export {
   Tabs,
   Typography,
   UserCard,
+  UserDisplayName,
 };

src/translations/en.json

@@ -851,5 +851,7 @@
   "UserCard.contactUser": "Contact",
   "UserCard.heading": "Hello, I'm {name}.",
   "UserCard.showFullBioLink": "more",
-  "UserCard.viewProfileLink": "View profile"
+  "UserCard.viewProfileLink": "View profile",
+  "UserDisplayName.banned": "Banned user",
+  "UserDisplayName.deleted": "Deleted user"
 }