@atlaskit/profilecard 19.5.5 → 19.5.7

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/profilecard
 
+## 19.5.7
+
+### Patch Changes
+
+- [`834a98bdc7b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/834a98bdc7b) - [ECA11Y-13] Make focus ring visible for 'Give kudos' button
+- Updated dependencies
+
+## 19.5.6
+
+### Patch Changes
+
+- [`3ef90d5fc2f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3ef90d5fc2f) - Cleanup the references to version.json
+
 ## 19.5.5
 
 ### Patch Changes

package/dist/cjs/client/getTeamFromAGG.js

@@ -66,7 +66,7 @@ var addHeaders = function addHeaders(headers) {
   headers.append('X-ExperimentalApi', 'teams-beta');
   headers.append('X-ExperimentalApi', 'team-members-beta');
   headers.append('atl-client-name', "@atlaskit/profilecard");
-  headers.append('atl-client-version', "19.5.5");
+  headers.append('atl-client-version', "19.5.7");
   return headers;
 };
 exports.addHeaders = addHeaders;

package/dist/cjs/components/Team/TeamProfileCard.js

@@ -15,6 +15,7 @@ var _reactIntlNext = require("react-intl-next");
 var _avatarGroup = _interopRequireDefault(require("@atlaskit/avatar-group"));
 var _loadingButton = _interopRequireDefault(require("@atlaskit/button/loading-button"));
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
+var _focusRing = _interopRequireDefault(require("@atlaskit/focus-ring"));
 var _more = _interopRequireDefault(require("@atlaskit/icon/glyph/more"));
 var _menu = require("@atlaskit/menu");
 var _popup = _interopRequireDefault(require("@atlaskit/popup"));
@@ -122,12 +123,14 @@ var ActionButton = function ActionButton(_ref2) {
     analytics = _ref2.analytics,
     index = _ref2.index;
   var isGiveKudosActionButton = action.id === GIVE_KUDOS_ACTION_ID;
-  var actionButton = /*#__PURE__*/_react.default.createElement(_standardButton.default, {
+  var actionButton = /*#__PURE__*/_react.default.createElement(_focusRing.default, {
+    isInset: true
+  }, /*#__PURE__*/_react.default.createElement(_standardButton.default, {
     key: action.id || index,
     onClick: onActionClick(action, analytics, index),
     href: action.link,
     shouldFitContainer: true
-  }, action.label, isGiveKudosActionButton && /*#__PURE__*/_react.default.createElement(_Card.KudosBlobAnimation, null));
+  }, action.label, isGiveKudosActionButton && /*#__PURE__*/_react.default.createElement(_Card.AnimationWrapper, null, /*#__PURE__*/_react.default.createElement(_Card.KudosBlobAnimation, null))));
   if (isGiveKudosActionButton) {
     return /*#__PURE__*/_react.default.createElement(_Card.AnimatedKudosButton, null, actionButton);
   }

package/dist/cjs/components/User/ProfileCard.js

@@ -14,6 +14,7 @@ var _reactIntlNext = require("react-intl-next");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _avatar = _interopRequireDefault(require("@atlaskit/avatar"));
 var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
+var _focusRing = _interopRequireDefault(require("@atlaskit/focus-ring"));
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 var _colors = require("@atlaskit/theme/colors");
 var _messages = _interopRequireDefault(require("../../messages"));
@@ -161,7 +162,9 @@ var Actions = function Actions(_ref) {
     "data-testid": "profilecard-actions"
   }, regularActions.map(function (action, index) {
     var isKudos = action.id === GIVE_KUDOS_ACTION_ID;
-    var button = /*#__PURE__*/_react.default.createElement(_customThemeButton.default, {
+    var button = /*#__PURE__*/_react.default.createElement(_focusRing.default, {
+      isInset: true
+    }, /*#__PURE__*/_react.default.createElement(_customThemeButton.default, {
       appearance: "default",
       key: action.id || index,
       onClick: function onClick(event) {
@@ -171,7 +174,7 @@ var Actions = function Actions(_ref) {
         return onActionClick(action, args, event, index);
       },
       href: action.link
-    }, action.label, isKudos && /*#__PURE__*/_react.default.createElement(_Card.KudosBlobAnimation, null));
+    }, action.label, isKudos && /*#__PURE__*/_react.default.createElement(_Card.AnimationWrapper, null, /*#__PURE__*/_react.default.createElement(_Card.KudosBlobAnimation, null))));
     if (isKudos) {
       return /*#__PURE__*/_react.default.createElement(_Card.AnimatedKudosButton, null, button);
     }

package/dist/cjs/styled/Card.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SpinnerContainer = exports.ProfileImage = exports.OverflowActionButtonsWrapper = exports.LozengeWrapper = exports.KudosBlobAnimationStyle = exports.KudosBlobAnimation = exports.JobTitleLabel = exports.FullNameLabel = exports.DisabledInfo = exports.DetailsLabelText = exports.DetailsLabelIcon = exports.DetailsLabel = exports.DetailsGroup = exports.CustomLozengeContainer = exports.CardWrapper = exports.CardContent = exports.CardContainerEmpty = exports.CardContainer = exports.AppTitleLabel = exports.AnimatedKudosButton = exports.ActionsFlexSpacer = exports.ActionButtonGroup = void 0;
+exports.SpinnerContainer = exports.ProfileImage = exports.OverflowActionButtonsWrapper = exports.LozengeWrapper = exports.KudosBlobAnimationStyle = exports.KudosBlobAnimation = exports.JobTitleLabel = exports.FullNameLabel = exports.DisabledInfo = exports.DetailsLabelText = exports.DetailsLabelIcon = exports.DetailsLabel = exports.DetailsGroup = exports.CustomLozengeContainer = exports.CardWrapper = exports.CardContent = exports.CardContainer = exports.AppTitleLabel = exports.AnimationWrapper = exports.AnimatedKudosButton = exports.ActionsFlexSpacer = exports.ActionButtonGroup = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireDefault(require("react"));
@@ -17,16 +17,14 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 var getFullNameMargin = function getFullNameMargin(props) {
   return props.noMeta ? "".concat((0, _constants.gridSize)() * 4.5, "px 0 ").concat((0, _constants.gridSize)() * 1.5, "px 0") : "".concat((0, _constants.gridSize)() * 1.5, "px 0 0 0");
 };
-var CardContainerEmpty = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)([""])));
-exports.CardContainerEmpty = CardContainerEmpty;
-var CardWrapper = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  border-radius: ", "px;\n  width: ", "px;\n"])), _constants2.bgColor, _constants.borderRadius, (0, _constants.gridSize)() * 45);
+var CardWrapper = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  border-radius: ", "px;\n  width: ", "px;\n"])), _constants2.bgColor, _constants.borderRadius, (0, _constants.gridSize)() * 45);
 exports.CardWrapper = CardWrapper;
-var ProfileImage = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: ", ";\n  left: ", ";\n"])), "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)");
+var ProfileImage = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: ", ";\n  left: ", ";\n"])), "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)");
 exports.ProfileImage = ProfileImage;
-var ActionsFlexSpacer = _styled.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1 0 auto;\n"])));
+var ActionsFlexSpacer = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1 0 auto;\n"])));
 exports.ActionsFlexSpacer = ActionsFlexSpacer;
-var kudosButtonAnimationTransformation = (0, _react2.keyframes)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["{\n  0%   { transform: translate(-80px, -50px); }\n  100% { transform: translate(90px, -70px); }\n}"])));
-var KudosBlobAnimationStyle = _styled.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  display: none;\n  height: 150px;\n  width: 150px;\n  z-index: -1;\n  position: absolute;\n  animation-name: ", ";\n  animation-iteration-count: 1;\n  animation-duration: 3s;\n  background-image: radial-gradient(\n    circle,\n    ", " 0%,\n    ", " 25%,\n    transparent 50%\n  );\n  overflow: hidden;\n"])), kudosButtonAnimationTransformation, "var(--ds-background-information-pressed, #85B8FF)", "var(--ds-background-discovery-pressed, #B8ACF6)");
+var kudosButtonAnimationTransformation = (0, _react2.keyframes)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  0%   { transform: translate(-80px, -50px); }\n  100% { transform: translate(90px, -70px); }\n"])));
+var KudosBlobAnimationStyle = _styled.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: none;\n  height: 150px;\n  width: 150px;\n  z-index: -1;\n  position: absolute;\n  top: ", "em;\n  animation-name: ", ";\n  animation-iteration-count: 1;\n  animation-duration: 3s;\n  background-image: radial-gradient(\n    circle,\n    ", " 0%,\n    ", " 25%,\n    transparent 50%\n  );\n  overflow: hidden;\n"])), (0, _constants.gridSize)() * 4 / (0, _constants.fontSize)(), kudosButtonAnimationTransformation, "var(--ds-background-information-pressed, #85B8FF)", "var(--ds-background-discovery-pressed, #B8ACF6)");
 exports.KudosBlobAnimationStyle = KudosBlobAnimationStyle;
 var KudosBlobAnimation = function KudosBlobAnimation(props) {
   return /*#__PURE__*/_react.default.createElement(KudosBlobAnimationStyle, (0, _extends2.default)({
@@ -34,11 +32,13 @@ var KudosBlobAnimation = function KudosBlobAnimation(props) {
   }, props));
 };
 exports.KudosBlobAnimation = KudosBlobAnimation;
-var AnimatedKudosButton = _styled.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: ", ";\n\n  /* Need babel-plugin-emotion to use component selector */\n  /* Previously with styled-components: &:hover {KudosBlobAnimation} { */\n  &:hover .kudos-blob-animation {\n    display: block;\n  }\n\n  button,\n  a {\n    clip-path: inset(0px 0px 0px 0px round ", "px);\n  }\n  overflow: hidden;\n"])), "var(--ds-space-100, 8px)", _constants.borderRadius);
+var AnimationWrapper = _styled.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  clip-path: inset(0px 0px 0px 0px round ", "px);\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n"])), _constants.borderRadius);
+exports.AnimationWrapper = AnimationWrapper;
+var AnimatedKudosButton = _styled.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: ", ";\n\n  /* Need babel-plugin-emotion to use component selector */\n  /* Previously with styled-components: &:hover {KudosBlobAnimation} { */\n  &:focus-within .kudos-blob-animation,\n  &:focus .kudos-blob-animation,\n  &:hover .kudos-blob-animation {\n    display: block;\n  }\n"])), "var(--ds-space-100, 8px)");
 exports.AnimatedKudosButton = AnimatedKudosButton;
-var ActionButtonGroup = _styled.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  user-select: none;\n  margin: ", " 0 0 0;\n  text-align: right;\n  display: flex;\n  justify-content: flex-end;\n\n  button,\n  a,\n  span {\n    margin-left: ", ";\n\n    &:first-child {\n      margin-left: 0;\n    }\n  }\n"])), "var(--ds-space-200, 16px)", "var(--ds-space-100, 8px)");
+var ActionButtonGroup = _styled.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  user-select: none;\n  margin: ", " 0 0 0;\n  text-align: right;\n  display: flex;\n  justify-content: flex-end;\n\n  button,\n  a {\n    position: relative;\n  }\n\n  button,\n  a,\n  span {\n    margin-left: ", ";\n\n    &:first-child {\n      margin-left: 0;\n    }\n  }\n\n  a,\n  button {\n    &:focus {\n      outline-color: ", ";\n      outline-offset: ", ";\n      outline-style: solid;\n      outline-width: ", ";\n    }\n  }\n"])), "var(--ds-space-200, 16px)", "var(--ds-space-100, 8px)", "var(--ds-border-focused, ".concat(_colors.B200, ")"), "var(--ds-border-width, 2px)", "var(--ds-border-width, 2px)");
 exports.ActionButtonGroup = ActionButtonGroup;
-var OverflowActionButtonsWrapper = _styled.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  width: 32px;\n  height: 32px;\n  margin-left: ", ";\n"])), "var(--ds-space-100, 8px)");
+var OverflowActionButtonsWrapper = _styled.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  width: 32px;\n  height: 32px;\n  margin-left: ", ";\n\n  button {\n    &:focus {\n      outline-color: ", ";\n      outline-offset: ", ";\n      outline-style: solid;\n      outline-width: ", ";\n    }\n  }\n"])), "var(--ds-space-100, 8px)", "var(--ds-border-focused, ".concat(_colors.B200, ")"), "var(--ds-border-width, 2px)", "var(--ds-border-width, 2px)");
 exports.OverflowActionButtonsWrapper = OverflowActionButtonsWrapper;
 var CardContent = _styled.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  min-height: ", "px;\n"])), (0, _constants.gridSize)() * 17);
 

package/dist/cjs/util/analytics.js

@@ -44,7 +44,7 @@ var createEvent = function createEvent(eventType, action, actionSubject, actionS
     actionSubjectId: actionSubjectId,
     attributes: _objectSpread(_objectSpread({
       packageName: "@atlaskit/profilecard",
-      packageVersion: "19.5.5"
+      packageVersion: "19.5.7"
     }, attributes), {}, {
       firedAt: Math.round((0, _performance.getPageTime)())
     })

package/dist/es2019/client/getTeamFromAGG.js

@@ -77,7 +77,7 @@ export const addHeaders = headers => {
   headers.append('X-ExperimentalApi', 'teams-beta');
   headers.append('X-ExperimentalApi', 'team-members-beta');
   headers.append('atl-client-name', "@atlaskit/profilecard");
-  headers.append('atl-client-version', "19.5.5");
+  headers.append('atl-client-version', "19.5.7");
   return headers;
 };
 export async function getTeamFromAGG(url, teamId, siteId) {

package/dist/es2019/components/Team/TeamProfileCard.js

@@ -4,12 +4,13 @@ import { FormattedMessage } from 'react-intl-next';
 import AvatarGroup from '@atlaskit/avatar-group';
 import LoadingButton from '@atlaskit/button/loading-button';
 import Button from '@atlaskit/button/standard-button';
+import FocusRing from '@atlaskit/focus-ring';
 import MoreIcon from '@atlaskit/icon/glyph/more';
 import { LinkItem, MenuGroup } from '@atlaskit/menu';
 import Popup from '@atlaskit/popup';
 import { layers } from '@atlaskit/theme/constants';
 import messages from '../../messages';
-import { AnimatedKudosButton, KudosBlobAnimation } from '../../styled/Card';
+import { AnimatedKudosButton, AnimationWrapper, KudosBlobAnimation } from '../../styled/Card';
 import { ErrorWrapper, TeamErrorText, TeamErrorTitle } from '../../styled/Error';
 import { ActionButtons, AvatarSection, CardContent, CardHeader, CardWrapper, Description, DescriptionWrapper, MemberCount, MoreButton, TeamName, WrappedButton } from '../../styled/TeamCard';
 import { actionClicked, errorRetryClicked, moreActionsClicked, moreMembersClicked, profileCardRendered, teamAvatarClicked } from '../../util/analytics';
@@ -102,12 +103,14 @@ const ActionButton = ({
   index
 }) => {
   const isGiveKudosActionButton = action.id === GIVE_KUDOS_ACTION_ID;
-  const actionButton = /*#__PURE__*/React.createElement(Button, {
+  const actionButton = /*#__PURE__*/React.createElement(FocusRing, {
+    isInset: true
+  }, /*#__PURE__*/React.createElement(Button, {
     key: action.id || index,
     onClick: onActionClick(action, analytics, index),
     href: action.link,
     shouldFitContainer: true
-  }, action.label, isGiveKudosActionButton && /*#__PURE__*/React.createElement(KudosBlobAnimation, null));
+  }, action.label, isGiveKudosActionButton && /*#__PURE__*/React.createElement(AnimationWrapper, null, /*#__PURE__*/React.createElement(KudosBlobAnimation, null))));
   if (isGiveKudosActionButton) {
     return /*#__PURE__*/React.createElement(AnimatedKudosButton, null, actionButton);
   }

package/dist/es2019/components/User/ProfileCard.js

@@ -4,10 +4,11 @@ import { FormattedMessage } from 'react-intl-next';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import Avatar from '@atlaskit/avatar';
 import Button from '@atlaskit/button/custom-theme-button';
+import FocusRing from '@atlaskit/focus-ring';
 import Spinner from '@atlaskit/spinner';
 import { N0 } from '@atlaskit/theme/colors';
 import messages from '../../messages';
-import { ActionButtonGroup, ActionsFlexSpacer, AnimatedKudosButton, CardContainer, CardContent, CardWrapper, KudosBlobAnimation, ProfileImage, SpinnerContainer } from '../../styled/Card';
+import { ActionButtonGroup, ActionsFlexSpacer, AnimatedKudosButton, AnimationWrapper, CardContainer, CardContent, CardWrapper, KudosBlobAnimation, ProfileImage, SpinnerContainer } from '../../styled/Card';
 import { actionClicked, fireEvent, profileCardRendered } from '../../util/analytics';
 import { isBasicClick } from '../../util/click';
 import { getPageTime } from '../../util/performance';
@@ -146,12 +147,14 @@ const Actions = ({
     "data-testid": "profilecard-actions"
   }, regularActions.map((action, index) => {
     const isKudos = action.id === GIVE_KUDOS_ACTION_ID;
-    const button = /*#__PURE__*/React.createElement(Button, {
+    const button = /*#__PURE__*/React.createElement(FocusRing, {
+      isInset: true
+    }, /*#__PURE__*/React.createElement(Button, {
       appearance: "default",
       key: action.id || index,
       onClick: (event, ...args) => onActionClick(action, args, event, index),
       href: action.link
-    }, action.label, isKudos && /*#__PURE__*/React.createElement(KudosBlobAnimation, null));
+    }, action.label, isKudos && /*#__PURE__*/React.createElement(AnimationWrapper, null, /*#__PURE__*/React.createElement(KudosBlobAnimation, null))));
     if (isKudos) {
       return /*#__PURE__*/React.createElement(AnimatedKudosButton, null, button);
     }

package/dist/es2019/styled/Card.js

@@ -2,11 +2,10 @@ import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { keyframes } from '@emotion/react';
 import styled from '@emotion/styled';
-import { N50A, N60A } from '@atlaskit/theme/colors';
-import { borderRadius, fontSizeSmall, gridSize } from '@atlaskit/theme/constants';
+import { B200, N50A, N60A } from '@atlaskit/theme/colors';
+import { borderRadius, fontSize, fontSizeSmall, gridSize } from '@atlaskit/theme/constants';
 import { appLabelBgColor, appLabelTextColor, bgColor, headerBgColor, headerBgColorDisabledUser, headerTextColor, headerTextColorInactive, labelIconColor, labelTextColor } from './constants';
 const getFullNameMargin = props => props.noMeta ? `${gridSize() * 4.5}px 0 ${gridSize() * 1.5}px 0` : `${gridSize() * 1.5}px 0 0 0`;
-export const CardContainerEmpty = styled.div``;
 export const CardWrapper = styled.div`
   background-color: ${bgColor};
   border-radius: ${borderRadius}px;
@@ -20,16 +19,17 @@ export const ProfileImage = styled.div`
 export const ActionsFlexSpacer = styled.div`
   flex: 1 0 auto;
 `;
-const kudosButtonAnimationTransformation = keyframes`{
+const kudosButtonAnimationTransformation = keyframes`
   0%   { transform: translate(-80px, -50px); }
   100% { transform: translate(90px, -70px); }
-}`;
+`;
 export const KudosBlobAnimationStyle = styled.div`
   display: none;
   height: 150px;
   width: 150px;
   z-index: -1;
   position: absolute;
+  top: ${gridSize() * 4 / fontSize()}em;
   animation-name: ${kudosButtonAnimationTransformation};
   animation-iteration-count: 1;
   animation-duration: 3s;
@@ -44,20 +44,24 @@ export const KudosBlobAnimationStyle = styled.div`
 export const KudosBlobAnimation = props => /*#__PURE__*/React.createElement(KudosBlobAnimationStyle, _extends({
   className: "kudos-blob-animation"
 }, props));
+export const AnimationWrapper = styled.div`
+  clip-path: inset(0px 0px 0px 0px round ${borderRadius}px);
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+`;
 export const AnimatedKudosButton = styled.div`
   margin-left: ${"var(--ds-space-100, 8px)"};
 
   /* Need babel-plugin-emotion to use component selector */
   /* Previously with styled-components: &:hover {KudosBlobAnimation} { */
+  &:focus-within .kudos-blob-animation,
+  &:focus .kudos-blob-animation,
   &:hover .kudos-blob-animation {
     display: block;
   }
-
-  button,
-  a {
-    clip-path: inset(0px 0px 0px 0px round ${borderRadius}px);
-  }
-  overflow: hidden;
 `;
 export const ActionButtonGroup = styled.div`
   user-select: none;
@@ -66,6 +70,11 @@ export const ActionButtonGroup = styled.div`
   display: flex;
   justify-content: flex-end;
 
+  button,
+  a {
+    position: relative;
+  }
+
   button,
   a,
   span {
@@ -75,12 +84,31 @@ export const ActionButtonGroup = styled.div`
       margin-left: 0;
     }
   }
+
+  a,
+  button {
+    &:focus {
+      outline-color: ${`var(--ds-border-focused, ${B200})`};
+      outline-offset: ${"var(--ds-border-width, 2px)"};
+      outline-style: solid;
+      outline-width: ${"var(--ds-border-width, 2px)"};
+    }
+  }
 `;
 export const OverflowActionButtonsWrapper = styled.div`
   display: inline-block;
   width: 32px;
   height: 32px;
   margin-left: ${"var(--ds-space-100, 8px)"};
+
+  button {
+    &:focus {
+      outline-color: ${`var(--ds-border-focused, ${B200})`};
+      outline-offset: ${"var(--ds-border-width, 2px)"};
+      outline-style: solid;
+      outline-width: ${"var(--ds-border-width, 2px)"};
+    }
+  }
 `;
 export const CardContent = styled.div`
   display: flex;

package/dist/es2019/util/analytics.js

@@ -31,7 +31,7 @@ const createEvent = (eventType, action, actionSubject, actionSubjectId, attribut
   actionSubjectId,
   attributes: {
     packageName: "@atlaskit/profilecard",
-    packageVersion: "19.5.5",
+    packageVersion: "19.5.7",
     ...attributes,
     firedAt: Math.round(getPageTime())
   }

package/dist/esm/client/getTeamFromAGG.js

@@ -51,7 +51,7 @@ export var addHeaders = function addHeaders(headers) {
   headers.append('X-ExperimentalApi', 'teams-beta');
   headers.append('X-ExperimentalApi', 'team-members-beta');
   headers.append('atl-client-name', "@atlaskit/profilecard");
-  headers.append('atl-client-version', "19.5.5");
+  headers.append('atl-client-version', "19.5.7");
   return headers;
 };
 export function getTeamFromAGG(_x, _x2, _x3) {

package/dist/esm/components/Team/TeamProfileCard.js

@@ -9,12 +9,13 @@ import { FormattedMessage } from 'react-intl-next';
 import AvatarGroup from '@atlaskit/avatar-group';
 import LoadingButton from '@atlaskit/button/loading-button';
 import Button from '@atlaskit/button/standard-button';
+import FocusRing from '@atlaskit/focus-ring';
 import MoreIcon from '@atlaskit/icon/glyph/more';
 import { LinkItem, MenuGroup } from '@atlaskit/menu';
 import Popup from '@atlaskit/popup';
 import { layers } from '@atlaskit/theme/constants';
 import messages from '../../messages';
-import { AnimatedKudosButton, KudosBlobAnimation } from '../../styled/Card';
+import { AnimatedKudosButton, AnimationWrapper, KudosBlobAnimation } from '../../styled/Card';
 import { ErrorWrapper, TeamErrorText, TeamErrorTitle } from '../../styled/Error';
 import { ActionButtons, AvatarSection, CardContent, CardHeader, CardWrapper, Description, DescriptionWrapper, MemberCount, MoreButton, TeamName, WrappedButton } from '../../styled/TeamCard';
 import { actionClicked, errorRetryClicked, moreActionsClicked, moreMembersClicked, profileCardRendered, teamAvatarClicked } from '../../util/analytics';
@@ -112,12 +113,14 @@ var ActionButton = function ActionButton(_ref2) {
     analytics = _ref2.analytics,
     index = _ref2.index;
   var isGiveKudosActionButton = action.id === GIVE_KUDOS_ACTION_ID;
-  var actionButton = /*#__PURE__*/React.createElement(Button, {
+  var actionButton = /*#__PURE__*/React.createElement(FocusRing, {
+    isInset: true
+  }, /*#__PURE__*/React.createElement(Button, {
     key: action.id || index,
     onClick: onActionClick(action, analytics, index),
     href: action.link,
     shouldFitContainer: true
-  }, action.label, isGiveKudosActionButton && /*#__PURE__*/React.createElement(KudosBlobAnimation, null));
+  }, action.label, isGiveKudosActionButton && /*#__PURE__*/React.createElement(AnimationWrapper, null, /*#__PURE__*/React.createElement(KudosBlobAnimation, null))));
   if (isGiveKudosActionButton) {
     return /*#__PURE__*/React.createElement(AnimatedKudosButton, null, actionButton);
   }

package/dist/esm/components/User/ProfileCard.js

@@ -6,10 +6,11 @@ import { FormattedMessage } from 'react-intl-next';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import Avatar from '@atlaskit/avatar';
 import Button from '@atlaskit/button/custom-theme-button';
+import FocusRing from '@atlaskit/focus-ring';
 import Spinner from '@atlaskit/spinner';
 import { N0 } from '@atlaskit/theme/colors';
 import messages from '../../messages';
-import { ActionButtonGroup, ActionsFlexSpacer, AnimatedKudosButton, CardContainer, CardContent, CardWrapper, KudosBlobAnimation, ProfileImage, SpinnerContainer } from '../../styled/Card';
+import { ActionButtonGroup, ActionsFlexSpacer, AnimatedKudosButton, AnimationWrapper, CardContainer, CardContent, CardWrapper, KudosBlobAnimation, ProfileImage, SpinnerContainer } from '../../styled/Card';
 import { actionClicked, fireEvent, profileCardRendered } from '../../util/analytics';
 import { isBasicClick } from '../../util/click';
 import { getPageTime } from '../../util/performance';
@@ -150,7 +151,9 @@ var Actions = function Actions(_ref) {
     "data-testid": "profilecard-actions"
   }, regularActions.map(function (action, index) {
     var isKudos = action.id === GIVE_KUDOS_ACTION_ID;
-    var button = /*#__PURE__*/React.createElement(Button, {
+    var button = /*#__PURE__*/React.createElement(FocusRing, {
+      isInset: true
+    }, /*#__PURE__*/React.createElement(Button, {
       appearance: "default",
       key: action.id || index,
       onClick: function onClick(event) {
@@ -160,7 +163,7 @@ var Actions = function Actions(_ref) {
         return onActionClick(action, args, event, index);
       },
       href: action.link
-    }, action.label, isKudos && /*#__PURE__*/React.createElement(KudosBlobAnimation, null));
+    }, action.label, isKudos && /*#__PURE__*/React.createElement(AnimationWrapper, null, /*#__PURE__*/React.createElement(KudosBlobAnimation, null))));
     if (isKudos) {
       return /*#__PURE__*/React.createElement(AnimatedKudosButton, null, button);
     }

package/dist/esm/styled/Card.js

@@ -4,26 +4,26 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 import React from 'react';
 import { keyframes } from '@emotion/react';
 import styled from '@emotion/styled';
-import { N50A, N60A } from '@atlaskit/theme/colors';
-import { borderRadius, fontSizeSmall, gridSize } from '@atlaskit/theme/constants';
+import { B200, N50A, N60A } from '@atlaskit/theme/colors';
+import { borderRadius, fontSize, fontSizeSmall, gridSize } from '@atlaskit/theme/constants';
 import { appLabelBgColor, appLabelTextColor, bgColor, headerBgColor, headerBgColorDisabledUser, headerTextColor, headerTextColorInactive, labelIconColor, labelTextColor } from './constants';
 var getFullNameMargin = function getFullNameMargin(props) {
   return props.noMeta ? "".concat(gridSize() * 4.5, "px 0 ").concat(gridSize() * 1.5, "px 0") : "".concat(gridSize() * 1.5, "px 0 0 0");
 };
-export var CardContainerEmpty = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral([""])));
-export var CardWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-radius: ", "px;\n  width: ", "px;\n"])), bgColor, borderRadius, gridSize() * 45);
-export var ProfileImage = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: ", ";\n  left: ", ";\n"])), "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)");
-export var ActionsFlexSpacer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  flex: 1 0 auto;\n"])));
-var kudosButtonAnimationTransformation = keyframes(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["{\n  0%   { transform: translate(-80px, -50px); }\n  100% { transform: translate(90px, -70px); }\n}"])));
-export var KudosBlobAnimationStyle = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: none;\n  height: 150px;\n  width: 150px;\n  z-index: -1;\n  position: absolute;\n  animation-name: ", ";\n  animation-iteration-count: 1;\n  animation-duration: 3s;\n  background-image: radial-gradient(\n    circle,\n    ", " 0%,\n    ", " 25%,\n    transparent 50%\n  );\n  overflow: hidden;\n"])), kudosButtonAnimationTransformation, "var(--ds-background-information-pressed, #85B8FF)", "var(--ds-background-discovery-pressed, #B8ACF6)");
+export var CardWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-radius: ", "px;\n  width: ", "px;\n"])), bgColor, borderRadius, gridSize() * 45);
+export var ProfileImage = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: ", ";\n  left: ", ";\n"])), "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)");
+export var ActionsFlexSpacer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  flex: 1 0 auto;\n"])));
+var kudosButtonAnimationTransformation = keyframes(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  0%   { transform: translate(-80px, -50px); }\n  100% { transform: translate(90px, -70px); }\n"])));
+export var KudosBlobAnimationStyle = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: none;\n  height: 150px;\n  width: 150px;\n  z-index: -1;\n  position: absolute;\n  top: ", "em;\n  animation-name: ", ";\n  animation-iteration-count: 1;\n  animation-duration: 3s;\n  background-image: radial-gradient(\n    circle,\n    ", " 0%,\n    ", " 25%,\n    transparent 50%\n  );\n  overflow: hidden;\n"])), gridSize() * 4 / fontSize(), kudosButtonAnimationTransformation, "var(--ds-background-information-pressed, #85B8FF)", "var(--ds-background-discovery-pressed, #B8ACF6)");
 export var KudosBlobAnimation = function KudosBlobAnimation(props) {
   return /*#__PURE__*/React.createElement(KudosBlobAnimationStyle, _extends({
     className: "kudos-blob-animation"
   }, props));
 };
-export var AnimatedKudosButton = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  margin-left: ", ";\n\n  /* Need babel-plugin-emotion to use component selector */\n  /* Previously with styled-components: &:hover {KudosBlobAnimation} { */\n  &:hover .kudos-blob-animation {\n    display: block;\n  }\n\n  button,\n  a {\n    clip-path: inset(0px 0px 0px 0px round ", "px);\n  }\n  overflow: hidden;\n"])), "var(--ds-space-100, 8px)", borderRadius);
-export var ActionButtonGroup = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  user-select: none;\n  margin: ", " 0 0 0;\n  text-align: right;\n  display: flex;\n  justify-content: flex-end;\n\n  button,\n  a,\n  span {\n    margin-left: ", ";\n\n    &:first-child {\n      margin-left: 0;\n    }\n  }\n"])), "var(--ds-space-200, 16px)", "var(--ds-space-100, 8px)");
-export var OverflowActionButtonsWrapper = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  display: inline-block;\n  width: 32px;\n  height: 32px;\n  margin-left: ", ";\n"])), "var(--ds-space-100, 8px)");
+export var AnimationWrapper = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  clip-path: inset(0px 0px 0px 0px round ", "px);\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n"])), borderRadius);
+export var AnimatedKudosButton = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  margin-left: ", ";\n\n  /* Need babel-plugin-emotion to use component selector */\n  /* Previously with styled-components: &:hover {KudosBlobAnimation} { */\n  &:focus-within .kudos-blob-animation,\n  &:focus .kudos-blob-animation,\n  &:hover .kudos-blob-animation {\n    display: block;\n  }\n"])), "var(--ds-space-100, 8px)");
+export var ActionButtonGroup = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  user-select: none;\n  margin: ", " 0 0 0;\n  text-align: right;\n  display: flex;\n  justify-content: flex-end;\n\n  button,\n  a {\n    position: relative;\n  }\n\n  button,\n  a,\n  span {\n    margin-left: ", ";\n\n    &:first-child {\n      margin-left: 0;\n    }\n  }\n\n  a,\n  button {\n    &:focus {\n      outline-color: ", ";\n      outline-offset: ", ";\n      outline-style: solid;\n      outline-width: ", ";\n    }\n  }\n"])), "var(--ds-space-200, 16px)", "var(--ds-space-100, 8px)", "var(--ds-border-focused, ".concat(B200, ")"), "var(--ds-border-width, 2px)", "var(--ds-border-width, 2px)");
+export var OverflowActionButtonsWrapper = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  display: inline-block;\n  width: 32px;\n  height: 32px;\n  margin-left: ", ";\n\n  button {\n    &:focus {\n      outline-color: ", ";\n      outline-offset: ", ";\n      outline-style: solid;\n      outline-width: ", ";\n    }\n  }\n"])), "var(--ds-space-100, 8px)", "var(--ds-border-focused, ".concat(B200, ")"), "var(--ds-border-width, 2px)", "var(--ds-border-width, 2px)");
 export var CardContent = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  min-height: ", "px;\n"])), gridSize() * 17);
 
 // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage

package/dist/esm/util/analytics.js

@@ -38,7 +38,7 @@ var createEvent = function createEvent(eventType, action, actionSubject, actionS
     actionSubjectId: actionSubjectId,
     attributes: _objectSpread(_objectSpread({
       packageName: "@atlaskit/profilecard",
-      packageVersion: "19.5.5"
+      packageVersion: "19.5.7"
     }, attributes), {}, {
       firedAt: Math.round(getPageTime())
     })

package/dist/types/styled/Card.d.ts

@@ -3,10 +3,6 @@ interface FullNameLabelProps {
     noMeta?: boolean;
     isDisabledAccount?: boolean;
 }
-export declare const CardContainerEmpty: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: React.ElementType<any> | undefined;
-}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const CardWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: React.ElementType<any> | undefined;
@@ -24,6 +20,10 @@ export declare const KudosBlobAnimationStyle: import("@emotion/styled").StyledCo
     as?: React.ElementType<any> | undefined;
 }, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const KudosBlobAnimation: React.FC;
+export declare const AnimationWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: React.ElementType<any> | undefined;
+}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const AnimatedKudosButton: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: React.ElementType<any> | undefined;

package/dist/types-ts4.5/styled/Card.d.ts

@@ -3,10 +3,6 @@ interface FullNameLabelProps {
     noMeta?: boolean;
     isDisabledAccount?: boolean;
 }
-export declare const CardContainerEmpty: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: React.ElementType<any> | undefined;
-}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const CardWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: React.ElementType<any> | undefined;
@@ -24,6 +20,10 @@ export declare const KudosBlobAnimationStyle: import("@emotion/styled").StyledCo
     as?: React.ElementType<any> | undefined;
 }, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const KudosBlobAnimation: React.FC;
+export declare const AnimationWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: React.ElementType<any> | undefined;
+}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const AnimatedKudosButton: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: React.ElementType<any> | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/profilecard",
-  "version": "19.5.5",
+  "version": "19.5.7",
   "description": "A React component to display a card with user information.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -42,7 +42,7 @@
     "lint": "(cd ../../.. && yarn eslint 'packages/people-and-teams/profilecard/**/*.{ts,tsx}')",
     "test": "(cd ../../.. && yarn test 'packages/people-and-teams/profilecard')",
     "test:watch": "(cd ../../.. && yarn test 'packages/people-and-teams/profilecard' --watch)",
-    "test:coverage": "(cd ../../.. && yarn test 'packages/people-and-teams/profilecard/src' --coverage --collectCoverageFrom='[\"packages/people-and-teams/profilecard/src/**\", \"!packages/people-and-teams/profilecard/src/__tests__/**\", \"!packages/people-and-teams/profilecard/src/version.json\", \"!packages/people-and-teams/profilecard/src/i18n/**\", \"!packages/people-and-teams/profilecard/src/mocks/**\"]')",
+    "test:coverage": "(cd ../../.. && yarn test 'packages/people-and-teams/profilecard/src' --coverage --collectCoverageFrom='[\"packages/people-and-teams/profilecard/src/**\", \"!packages/people-and-teams/profilecard/src/__tests__/**\", \"!packages/people-and-teams/profilecard/src/i18n/**\", \"!packages/people-and-teams/profilecard/src/mocks/**\"]')",
     "typecheck": "NODE_OPTIONS=--max-old-space-size=4096 tsc --noEmit --project ./tsconfig.json"
   },
   "config": {
@@ -51,10 +51,11 @@
   "dependencies": {
     "@atlaskit/analytics-next": "^9.1.0",
     "@atlaskit/avatar": "^21.3.0",
-    "@atlaskit/avatar-group": "^9.3.0",
+    "@atlaskit/avatar-group": "^9.4.0",
     "@atlaskit/button": "^16.9.0",
     "@atlaskit/dropdown-menu": "^11.11.0",
     "@atlaskit/empty-state": "^7.6.0",
+    "@atlaskit/focus-ring": "^1.3.4",
     "@atlaskit/give-kudos": "^2.0.0",
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/lozenge": "^11.4.0",

package/dist/cjs/version.json

@@ -1,4 +0,0 @@
-{
-	"name": "@atlaskit/profilecard",
-	"version": "19.5.5"
-}

package/dist/es2019/version.json

@@ -1,4 +0,0 @@
-{
-	"name": "@atlaskit/profilecard",
-	"version": "19.5.5"
-}

package/dist/esm/version.json

@@ -1,4 +0,0 @@
-{
-	"name": "@atlaskit/profilecard",
-	"version": "19.5.5"
-}