@atlaskit/profilecard 23.12.0 → 23.13.0

package/dist/esm/components/team-profile-card/team-actions/index.js

@@ -1,57 +1,33 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["teamProfileUrl", "isKudosEnabled", "otherActions", "loading"];
-import "./index.compiled.css";
-import { ax, ix } from "@compiled/react/runtime";
+var _excluded = ["isKudosEnabled", "otherActions", "loading"];
 import React, { Suspense, useCallback, useState } from 'react';
 import { useIntl } from 'react-intl-next';
-import { useAnalyticsEvents } from '@atlaskit/analytics-next';
-import { LinkButton } from '@atlaskit/button/new';
 import { GiveKudosLauncherLazy, KudosType } from '@atlaskit/give-kudos';
 import { ButtonItem } from '@atlaskit/menu';
-import { Box, Inline, Stack } from '@atlaskit/primitives';
 import { extractIdFromAri } from '../../../client/getTeamFromAGG';
-import { fireEvent } from '../../../util/analytics';
 import { messages } from './messages';
 import { MoreActions } from './more-actions';
 var GIVE_KUDOS_ACTION_ID = 'give-kudos';
-var styles = {
-  containerStyles: "_uwhke4h9 _15a5nqa1 _1i53muej _19bv1ejb _u5f31ejb _ca0qpxbi",
-  actionContainerStyles: "_16jlkb7n"
-};
-export var ButtonSection = function ButtonSection(_ref) {
-  var teamProfileUrl = _ref.teamProfileUrl,
-    isKudosEnabled = _ref.isKudosEnabled,
+export var TeamActions = function TeamActions(_ref) {
+  var isKudosEnabled = _ref.isKudosEnabled,
     otherActions = _ref.otherActions,
     loading = _ref.loading,
     props = _objectWithoutProperties(_ref, _excluded);
-  var _useAnalyticsEvents = useAnalyticsEvents(),
-    createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isKudosOpen = _useState2[0],
     setIsKudosOpen = _useState2[1];
-  var onTeamProfileClick = useCallback(function () {
-    if (createAnalyticsEvent) {
-      fireEvent(createAnalyticsEvent, {
-        action: 'clicked',
-        actionSubject: 'button',
-        actionSubjectId: 'viewTeamProfileButton',
-        attributes: {}
-      });
-    }
-  }, [createAnalyticsEvent]);
   var onKudosClick = useCallback(function () {
     setIsKudosOpen(true);
   }, []);
-  var extraActions = [];
+  var actions = [];
   var kudosProps = null;
   if (isKudosEnabled) {
-    extraActions.push({
+    actions.push({
       id: GIVE_KUDOS_ACTION_ID,
       item: /*#__PURE__*/React.createElement(ButtonItem, {
         onClick: onKudosClick
@@ -60,23 +36,15 @@ export var ButtonSection = function ButtonSection(_ref) {
     kudosProps = props;
   }
   if (otherActions) {
-    extraActions.push.apply(extraActions, _toConsumableArray(otherActions));
+    actions.push.apply(actions, _toConsumableArray(otherActions));
   }
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Stack, {
-    xcss: styles.containerStyles
-  }, /*#__PURE__*/React.createElement(Inline, {
-    space: "space.050"
-  }, teamProfileUrl && /*#__PURE__*/React.createElement(Box, {
-    xcss: styles.actionContainerStyles
-  }, /*#__PURE__*/React.createElement(LinkButton, {
-    onClick: onTeamProfileClick,
-    href: teamProfileUrl,
-    target: "_blank",
-    shouldFitContainer: true
-  }, formatMessage(messages.viewProfile))), extraActions.length > 0 && /*#__PURE__*/React.createElement(MoreActions, {
-    actions: extraActions,
+  if (actions.length === 0) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MoreActions, {
+    actions: actions,
     loading: loading
-  }))), isKudosEnabled && kudosProps && /*#__PURE__*/React.createElement(Suspense, {
+  }), isKudosEnabled && kudosProps && /*#__PURE__*/React.createElement(Suspense, {
     fallback: null
   }, /*#__PURE__*/React.createElement(GiveKudosLauncherLazy, {
     isOpen: isKudosOpen,

package/dist/esm/components/team-profile-card/team-actions/messages.js

@@ -1,10 +1,5 @@
 import { defineMessages } from 'react-intl-next';
 export var messages = defineMessages({
-  viewProfile: {
-    id: 'team-profile-card.team-actions.view-profile',
-    defaultMessage: 'View profile',
-    description: 'View profile button text'
-  },
   giveKudos: {
     id: 'team-profile-card.team-actions.give-kudos',
     defaultMessage: 'Give kudos',

package/dist/esm/components/team-profile-card/team-connections/main.js

@@ -3,6 +3,7 @@ import "./main.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback } from 'react';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
+import Avatar from '@atlaskit/avatar';
 import { LinkItem } from '@atlaskit/menu';
 import { Box, Inline, Stack, Text } from '@atlaskit/primitives/compiled';
 import { getContainerProperties } from '@atlaskit/teams-public';
@@ -61,4 +62,53 @@ export var TeamConnections = function TeamConnections(_ref) {
     xcss: styles.containerTypeIconButtonStyles,
     testId: "container-type-icon"
   }, icon)));
+};
+export var NewTeamConnections = function NewTeamConnections(_ref2) {
+  var containerType = _ref2.containerType,
+    title = _ref2.title,
+    containerIcon = _ref2.containerIcon,
+    link = _ref2.link;
+  var _getContainerProperti2 = getContainerProperties(containerType, 'medium'),
+    description = _getContainerProperti2.description,
+    icon = _getContainerProperti2.icon,
+    containerTypeText = _getContainerProperti2.containerTypeText;
+  var _useAnalyticsEvents2 = useAnalyticsEvents(),
+    createAnalyticsEvent = _useAnalyticsEvents2.createAnalyticsEvent;
+  var onClick = useCallback(function () {
+    fireEvent(createAnalyticsEvent, {
+      action: 'clicked',
+      actionSubject: 'teamConnectionItem',
+      actionSubjectId: 'teamProfileCard',
+      attributes: {
+        container: containerType
+      }
+    });
+  }, [containerType, createAnalyticsEvent]);
+  return /*#__PURE__*/React.createElement(LinkItem, {
+    href: link,
+    onClick: onClick,
+    description: /*#__PURE__*/React.createElement(Inline, {
+      space: "space.050"
+    }, /*#__PURE__*/React.createElement(Text, {
+      size: "small",
+      color: "color.text.subtlest"
+    }, description), /*#__PURE__*/React.createElement(Text, {
+      size: "small",
+      color: "color.text.subtlest"
+    }, containerTypeText)),
+    iconBefore: /*#__PURE__*/React.createElement(Avatar, {
+      size: "small",
+      appearance: "square",
+      src: containerIcon,
+      testId: "linked-container-icon"
+    }),
+    iconAfter: /*#__PURE__*/React.createElement(Box, {
+      backgroundColor: 'color.background.neutral.subtle',
+      xcss: styles.containerTypeIconButtonStyles,
+      testId: "container-type-icon"
+    }, icon)
+  }, /*#__PURE__*/React.createElement(Text, {
+    maxLines: 1,
+    color: "color.text"
+  }, title));
 };

package/dist/esm/components/team-profile-card/team-containers-skeleton/index.compiled.css

@@ -1,3 +1,5 @@
 
 ._2rko1q77{border-radius:var(--ds-border-radius-400,1pc)}
-._1rjc1b66{padding-block:var(--ds-space-050,4px)}._1bsbvbgk{width:4pc}
+._1rjc1b66{padding-block:var(--ds-space-050,4px)}._1bsbvbgk{width:4pc}
+._bozgpxbi{padding-inline-start:var(--ds-space-200,1pc)}
+._y4tipxbi{padding-inline-end:var(--ds-space-200,1pc)}

package/dist/esm/components/team-profile-card/team-containers-skeleton/index.js

@@ -6,11 +6,14 @@ import React from 'react';
 import { Box, Stack } from '@atlaskit/primitives/compiled';
 import { LinkedContainerCardSkeleton } from './linked-container-card-skeleton';
 var styles = {
-  showMoreButtonSkeleton: "_2rko1q77 _1rjc1b66 _1bsbvbgk"
+  showMoreButtonSkeleton: "_2rko1q77 _1rjc1b66 _1bsbvbgk",
+  containerSkeletonWrapper: "_bozgpxbi _y4tipxbi"
 };
 export var TeamContainersSkeleton = function TeamContainersSkeleton(_ref) {
   var numberOfContainers = _ref.numberOfContainers;
-  return /*#__PURE__*/React.createElement(Stack, {
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.containerSkeletonWrapper
+  }, /*#__PURE__*/React.createElement(Stack, {
     space: "space.200",
     testId: "profile-card-team-containers-skeleton"
   }, /*#__PURE__*/React.createElement(Stack, {
@@ -22,5 +25,5 @@ export var TeamContainersSkeleton = function TeamContainersSkeleton(_ref) {
   })), /*#__PURE__*/React.createElement(Box, {
     backgroundColor: "color.background.neutral",
     xcss: styles.showMoreButtonSkeleton
-  }));
+  })));
 };

package/dist/esm/util/analytics.js

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

package/dist/types/components/team-profile-card/main.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { type AvatarProps } from '@atlaskit/avatar-group';
-import { type ButtonSectionProps } from './team-actions';
+import { TeamActionsProps } from './team-actions';
 type TeamProfileCardProps = {
     containerId: string;
     teamId: string;
@@ -14,6 +14,6 @@ type TeamProfileCardProps = {
     userId: string;
     isVerified?: boolean;
     teamProfileUrl?: string;
-} & ButtonSectionProps;
+} & TeamActionsProps;
 export declare const TeamProfileCard: ({ containerId, teamId, displayName, description, avatarImageUrl, headerImageUrl, memberAvatars, memberCount, cloudId, userId, isVerified, teamProfileUrl, ...props }: TeamProfileCardProps) => JSX.Element;
 export {};

package/dist/types/components/team-profile-card/team-actions/index.d.ts

@@ -1,20 +1,19 @@
 import React from 'react';
 import { type ActionItem } from './more-actions';
-type BaseButtonSectionProps = {
-    teamProfileUrl?: string;
+type BaseTeamActionsProps = {
     otherActions?: ActionItem[];
     cloudId: string;
     teamId: string;
     loading?: boolean;
 };
-type KudosEnabledProps = BaseButtonSectionProps & {
+type KudosEnabledProps = BaseTeamActionsProps & {
     isKudosEnabled: true;
     teamCentralBaseUrl: string;
     analyticsSource: string;
 };
-type KudosDisabledProps = BaseButtonSectionProps & {
+type KudosDisabledProps = BaseTeamActionsProps & {
     isKudosEnabled?: false;
 };
-export type ButtonSectionProps = KudosEnabledProps | KudosDisabledProps;
-export declare const ButtonSection: ({ teamProfileUrl, isKudosEnabled, otherActions, loading, ...props }: ButtonSectionProps) => React.JSX.Element;
+export type TeamActionsProps = KudosEnabledProps | KudosDisabledProps;
+export declare const TeamActions: ({ isKudosEnabled, otherActions, loading, ...props }: TeamActionsProps) => React.JSX.Element | null;
 export {};

package/dist/types/components/team-profile-card/team-actions/messages.d.ts

@@ -1,9 +1,4 @@
 export declare const messages: {
-    viewProfile: {
-        id: string;
-        defaultMessage: string;
-        description: string;
-    };
     giveKudos: {
         id: string;
         defaultMessage: string;

package/dist/types/components/team-profile-card/team-connections/main.d.ts

@@ -1,3 +1,4 @@
 import React from 'react';
 import { type LinkedContainerCardProps } from '@atlaskit/teams-public';
 export declare const TeamConnections: ({ containerType, title, containerIcon, link, }: LinkedContainerCardProps) => React.JSX.Element;
+export declare const NewTeamConnections: ({ containerType, title, containerIcon, link, }: LinkedContainerCardProps) => React.JSX.Element;

package/dist/types-ts4.5/components/team-profile-card/main.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { type AvatarProps } from '@atlaskit/avatar-group';
-import { type ButtonSectionProps } from './team-actions';
+import { TeamActionsProps } from './team-actions';
 type TeamProfileCardProps = {
     containerId: string;
     teamId: string;
@@ -14,6 +14,6 @@ type TeamProfileCardProps = {
     userId: string;
     isVerified?: boolean;
     teamProfileUrl?: string;
-} & ButtonSectionProps;
+} & TeamActionsProps;
 export declare const TeamProfileCard: ({ containerId, teamId, displayName, description, avatarImageUrl, headerImageUrl, memberAvatars, memberCount, cloudId, userId, isVerified, teamProfileUrl, ...props }: TeamProfileCardProps) => JSX.Element;
 export {};

package/dist/types-ts4.5/components/team-profile-card/team-actions/index.d.ts

@@ -1,20 +1,19 @@
 import React from 'react';
 import { type ActionItem } from './more-actions';
-type BaseButtonSectionProps = {
-    teamProfileUrl?: string;
+type BaseTeamActionsProps = {
     otherActions?: ActionItem[];
     cloudId: string;
     teamId: string;
     loading?: boolean;
 };
-type KudosEnabledProps = BaseButtonSectionProps & {
+type KudosEnabledProps = BaseTeamActionsProps & {
     isKudosEnabled: true;
     teamCentralBaseUrl: string;
     analyticsSource: string;
 };
-type KudosDisabledProps = BaseButtonSectionProps & {
+type KudosDisabledProps = BaseTeamActionsProps & {
     isKudosEnabled?: false;
 };
-export type ButtonSectionProps = KudosEnabledProps | KudosDisabledProps;
-export declare const ButtonSection: ({ teamProfileUrl, isKudosEnabled, otherActions, loading, ...props }: ButtonSectionProps) => React.JSX.Element;
+export type TeamActionsProps = KudosEnabledProps | KudosDisabledProps;
+export declare const TeamActions: ({ isKudosEnabled, otherActions, loading, ...props }: TeamActionsProps) => React.JSX.Element | null;
 export {};

package/dist/types-ts4.5/components/team-profile-card/team-actions/messages.d.ts

@@ -1,9 +1,4 @@
 export declare const messages: {
-    viewProfile: {
-        id: string;
-        defaultMessage: string;
-        description: string;
-    };
     giveKudos: {
         id: string;
         defaultMessage: string;

package/dist/types-ts4.5/components/team-profile-card/team-connections/main.d.ts

@@ -1,3 +1,4 @@
 import React from 'react';
 import { type LinkedContainerCardProps } from '@atlaskit/teams-public';
 export declare const TeamConnections: ({ containerType, title, containerIcon, link, }: LinkedContainerCardProps) => React.JSX.Element;
+export declare const NewTeamConnections: ({ containerType, title, containerIcon, link, }: LinkedContainerCardProps) => React.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/profilecard",
-	"version": "23.12.0",
+	"version": "23.13.0",
 	"description": "A React component to display a card with user information.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"

package/dist/cjs/components/team-profile-card/team-actions/index.compiled.css

@@ -1,7 +0,0 @@
-._15a5nqa1{border-top-style:solid}
-._16jlkb7n{flex-grow:1}
-._19bv1ejb{padding-left:var(--ds-space-300,24px)}
-._1i53muej{border-top-color:var(--ds-border,#091e4224)}
-._ca0qpxbi{padding-top:var(--ds-space-200,1pc)}
-._u5f31ejb{padding-right:var(--ds-space-300,24px)}
-._uwhke4h9{border-top-width:var(--ds-border-width,1px)}

package/dist/es2019/components/team-profile-card/team-actions/index.compiled.css

@@ -1,7 +0,0 @@
-._15a5nqa1{border-top-style:solid}
-._16jlkb7n{flex-grow:1}
-._19bv1ejb{padding-left:var(--ds-space-300,24px)}
-._1i53muej{border-top-color:var(--ds-border,#091e4224)}
-._ca0qpxbi{padding-top:var(--ds-space-200,1pc)}
-._u5f31ejb{padding-right:var(--ds-space-300,24px)}
-._uwhke4h9{border-top-width:var(--ds-border-width,1px)}

package/dist/esm/components/team-profile-card/team-actions/index.compiled.css

@@ -1,7 +0,0 @@
-._15a5nqa1{border-top-style:solid}
-._16jlkb7n{flex-grow:1}
-._19bv1ejb{padding-left:var(--ds-space-300,24px)}
-._1i53muej{border-top-color:var(--ds-border,#091e4224)}
-._ca0qpxbi{padding-top:var(--ds-space-200,1pc)}
-._u5f31ejb{padding-right:var(--ds-space-300,24px)}
-._uwhke4h9{border-top-width:var(--ds-border-width,1px)}