Profilecard - Team profilecard

Note: This component is designed for internal Atlassian development.

External contributors will be able to use this component but will not be able to submit issues.

A React component that wraps a trigger, such that when interacted a user profile card pops up.

It's recommended to talk to us, in particular our team's designers, on Slack at #help-people-and-teams-xpc before integrating this in your product. This is for the purpose of design's understanding, as it is important that design understands the consumer / your use case(s), and we are happy to chat further if the current design doesn't meet your needs.

Usage

Using the ProfileCardTrigger

import ProfileCardTrigger from '@atlaskit/profilecard/user'; import ProfileClient from '@atlaskit/profilecard/client'; const profileClient = new ProfileClient({ url: 'https://directory-graphql-service/endpoint' // GraphQL service endpoint }); <TeamProfileCardTrigger orgId="SOME-ORG-ID" teamId="SOME-TEAM-ID" resourceClient={profileClient} > <Avatar ... /> </TeamProfileCardTrigger>

Profilecard

Profilecard triggered by hover

Hover to preview the team:

Profilecard triggered by click

Click on them to preview:

Profilecard triggered by hover or click

Click on them to preview:

This will try to be "smart" to determine whether to close correctly on mousing away or not.

Timeout
Error rate

Including you?

Use real client?

Header
Team name
Members
Description
Extra actions
Scroll down to test focus behaviour

Extras at the bottom of the page to test focus bouncing

||| |||

Here are some relevant examples for better understanding the trigger and triggerLinkType props:

TeamProfileCardTrigger Props...

teamId string required

The id of the team.

orgId string required

The id of the organization that the team belongs to. Currently this is unused, but will become necessary in the future.

resourceClient object required

An instance of ProfileClient.

flushCache required () => undefined
getProfile required function
cloudId,
userId,
analytics
=> Promise
isBot boolean required
isCurrentUser boolean
avatarUrl string
email string
fullName string
location string
meta string
nickname string
companyName string
timestring string
status required One of
"active",
"inactive",
"closed"
statusModifiedDate union One of
number,
null
customLozenges arrayType Array
text required React.ReactNode
appearance One of
"default",
"success",
"removed",
"inprogress",
"new",
"moved"
isBold boolean
accountType string
isAgent boolean
getTeamProfile required function
teamId,
orgId,
fireAnalytics
=> Promise
largeAvatarImageUrl string
smallAvatarImageUrl string
largeHeaderImageUrl string
smallHeaderImageUrl string
id string required
displayName string required
description string required
organizationId string
members arrayType Array
id string required
fullName string required
avatarUrl string required
isVerified boolean
getReportingLines required userId => Promise
managers arrayType Array
accountIdentifier string required
identifierType union required One of
"ATLASSIAN_ID",
"BASE64_HASH",
"UNKNOWN"
pii
name string required
picture string
reports arrayType Array
accountIdentifier string required
identifierType union required One of
"ATLASSIAN_ID",
"BASE64_HASH",
"UNKNOWN"
pii
name string required
picture string
shouldShowGiveKudos required => Promiseboolean
getTeamCentralBaseUrl required teamCentralScopes => PromiseOne of
string,
undefined
getRovoAgentProfile required function
id,
fireAnalytics
=> Promise
id string required
identity_account_id union One of
string,
null
named_id string required
name string required
description union required One of
string,
null
system_prompt_template union One of
string,
null
creator_type union required One of
"SYSTEM",
"CUSTOMER",
"THIRD_PARTY",
"FORGE"
creator union One of
string,
null
visibility union One of
"PUBLIC",
"PRIVATE",
null
is_default boolean required
actor_type string required
follow_up_prompt_template union One of
string,
null
plugin_routing_type union One of
"DEFAULT",
"SKIP",
null
user_defined_conversation_starters union required One of
Array
string
,
null
favourite boolean required
favourite_count number required
deactivated boolean
icon union One of
string,
null
external_config_reference string
getRovoAgentPermissions required function
id,
fireAnalytics
=> Promise
permissions required RecordOne of
"AGENT_UPDATE",
"AGENT_DEACTIVATE"
,
permitted boolean required
deleteAgent required function
id,
fireAnalytics
=> Promiseundefined
setFavouriteAgent required function
id,
isFavourite,
fireAnalytics
=> Promiseundefined

position union = "bottom-start"

The position relative to the trigger that the card should be displayed in.

One of
"bottom-start",
"bottom",
"bottom-end",
"left-start",
"left",
"left-end",
"top-end",
"top",
"top-start",
"right-end",
"right",
"right-start"

trigger union = "hover"

The interaction method used to trigger the team profile card to appear.

  • Click is generally recommended, but your needs may vary.

  • Hover works for mouse users, but does not support those who use a keyboard or screen reader, avoid using this if it's possible or makes sense.

  • Hover-click is usable for scenarios like inline-edits, where mouse users cannot click on the trigger without causing side effects, but keyboard users are still able to navigate into and trigger the profile card.

Look at the "Team Profilecard Trigger" or "Trigger Link Types" examples to see how they behave, or ask in #help-people-and-teams-xpc on Slack for our recommendations.

One of
"hover",
"click",
"hover-click"

triggerLinkType union = "link"

We generally prefer to wrap the trigger in a link to the team profile page. This prop determines how that link behaves.

  • Link is generally the recommended prop (especially in combination with click or hover-click for the trigger prop above). It wraps the trigger in an anchor tag with the team profile link (that users can interact with via middle-click, etc.), but left clicking on the link is suppressed.

  • None does not wrap the trigger in a link at all. This makes it difficult for keyboard or screen reader users to know how to trigger the profile card. Generally avoid this.

  • Clickable-link wraps the trigger in a link with no special behaviour. This is suitable for places where you want the trigger to serve primarily as a link, and optionally allow hovering to preview the team first.

Look at the example on "Trigger Link Types" for more in-depth analysis, or ask in #help-people-and-teams-xpc on Slack for our recommendations.

One of
"none",
"link",
"clickable-link"

children React.ReactNode

This is the component that will cause a team profile card to appear when interacted with according to the method specified by the trigger prop.

React.ReactNode

addFlag function

Used by the card to show Flags.

flag => undefined

cloudId string

Optional cloudId. Pass this if rendering card within a sited context.

shouldRenderToParent boolean = true

Whether the popup should have the parent as its root.

viewingUserId string

The id of the user viewing the profile card.

This is used to determine whether to say that the member count is "including you" or not.

actions arrayType = []

A list of extra buttons to be displayed at the bottom of the card. View Profile is always included by default.

Array
callback ...args => any
shouldRender data => boolean
id string
label required React.ReactNode
link string

onUserClick function

A function allowing products to provide an onClick handler for when the user clicks on a user's avatar or avatar group item.

function
userId,
event
=> undefined

viewProfileOnClick function

An onClick action that navigates to the team's profile page. Something you may want, e.g. for an SPA site or tracking analytics of navigation. This is optional, just the viewProfileLink will suffice. Will be used for:

  • Adding an onClick to the trigger if the triggerLinkType is clickable-link.

  • Providing an onClick for the View Profile action button on the card.

event => undefined

createAnalyticsEvent import

@atlaskit/analytics-next.CreateUIAnalyticsEvent