@atlaskit/profilecard 23.21.9 → 23.21.10

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/profilecard
 
+## 23.21.10
+
+### Patch Changes
+
+- [#181827](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/181827)
+  [`9bbba56baf22b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9bbba56baf22b) -
+  ENGHEALTH-27994 Ensures dt and dd elements are direct children of dl element as required by WCAG
+  guidelines
+
 ## 23.21.9
 
 ### Patch Changes

package/dist/cjs/client/getOrgIdForCloudIdFromAGG.js

@@ -11,7 +11,7 @@ var _graphqlUtils = require("./graphqlUtils");
 var ORG_ID_FROM_CLOUD_ID_QUERY = "query OrgIdFromCloudId($cloudId: ID!) {\n\ttenantContexts(cloudIds: [$cloudId]) {\n\t\torgId\n\t}\n}";
 var addHeaders = function addHeaders(headers) {
   headers.append('atl-client-name', "@atlaskit/profilecard");
-  headers.append('atl-client-version', "23.21.8");
+  headers.append('atl-client-version', "23.21.9");
   return headers;
 };
 function getOrgIdForCloudIdFromAGG(_x, _x2) {

package/dist/cjs/client/getTeamFromAGG.js

@@ -65,7 +65,7 @@ var addHeaders = exports.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', "23.21.8");
+  headers.append('atl-client-version', "23.21.9");
   return headers;
 };
 function getTeamFromAGG(_x, _x2, _x3) {

package/dist/cjs/components/User/ProfileCardDetails.compiled.css

@@ -3,6 +3,7 @@
 ._18u0idpf{margin-left:0}
 ._18u0ze3t{margin-left:var(--ds-space-0,0)}
 ._19bvze3t{padding-left:var(--ds-space-0,0)}
+._19pkxy5q{margin-top:var(--ds-space-400,2pc)}
 ._19pkze3t{margin-top:var(--ds-space-0,0)}
 ._1bguutpp#profilecard-name-label{margin-bottom:var(--ds-space-150,9pt)}
 ._1bto1l2s{text-overflow:ellipsis}

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

@@ -25,6 +25,7 @@ var _ReportingLinesDetails = _interopRequireDefault(require("./ReportingLinesDet
 var _excluded = ["text"];
 var styles = {
   detailedListWrapper: "_19pkze3t _2hwxze3t _otyrze3t _18u0ze3t _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t",
+  detailedListWrapperNext: "_19pkxy5q _2hwxze3t _otyrze3t _18u0ze3t _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t",
   fullNameLabel: "_1reo15vq _18m915vq _11c81ixg _1bto1l2s _o5721q9c",
   noMetaLabel: "_2hwxidpf _18u0idpf _rcujxy5q _1l6uutpp",
   noMetaLabelWithHighSpecificity: "_1hpmxy5q _1bguutpp",
@@ -124,7 +125,18 @@ var ProfileCardDetails = exports.ProfileCardDetails = function ProfileCardDetail
   }
   return /*#__PURE__*/_react.default.createElement(_Card.DetailsGroup, null, renderName(props.nickname, props.fullName, meta), meta && /*#__PURE__*/_react.default.createElement(_Card.JobTitleLabel, null, meta), /*#__PURE__*/_react.default.createElement(CustomLozenges, {
     lozenges: props.customLozenges
-  }), /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+  }), (0, _platformFeatureFlags.fg)('fix_profilecard_details_label_semantic_html') ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: styles.detailedListWrapperNext
+  }, /*#__PURE__*/_react.default.createElement(_Icon.IconLabel, {
+    icon: "email",
+    extraTopSpace: true
+  }, props.email), /*#__PURE__*/_react.default.createElement(_Icon.IconLabel, {
+    icon: "time"
+  }, props.timestring), /*#__PURE__*/_react.default.createElement(_Icon.IconLabel, {
+    icon: "companyName"
+  }, props.companyName), /*#__PURE__*/_react.default.createElement(_Icon.IconLabel, {
+    icon: "location"
+  }, props.location)) : /*#__PURE__*/_react.default.createElement(_compiled.Box, {
     as: "dl",
     xcss: styles.detailedListWrapper
   }, /*#__PURE__*/_react.default.createElement(_Icon.IconLabel, {

package/dist/cjs/styled/Card.compiled.css

@@ -17,6 +17,7 @@
 ._19bv12x7{padding-left:var(--ds-space-075,6px)}
 ._19bv1ejb{padding-left:var(--ds-space-300,24px)}
 ._19bvxy5q{padding-left:var(--ds-space-400,2pc)}
+._19bvze3t{padding-left:var(--ds-space-0,0)}
 ._19pk1b66{margin-top:var(--ds-space-050,4px)}
 ._19pkpxbi{margin-top:var(--ds-space-200,1pc)}
 ._19pkutpp{margin-top:var(--ds-space-150,9pt)}

package/dist/cjs/styled/Card.js

@@ -11,6 +11,7 @@ require("./Card.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireDefault(require("react"));
 var _css = require("@atlaskit/css");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 var kudosButtonAnimationTransformationCompiled = null;
 var styles = {
@@ -31,6 +32,7 @@ var styles = {
   cardContainerDisabledUser: "_1itkkf3t",
   cardContainerWithElevation: "_2rkoglpi _16qs1cd0",
   detailsLabel: "_zulpu2gc _1e0c1txw _4cvr1h6o _1bah1y6m _19pkutpp _2hwxze3t _18u0ze3t _otyrze3t _o5721q9c",
+  detailsLabelNext: "_zulpu2gc _1e0c1txw _4cvr1h6o _1bah1y6m _19pkutpp _2hwxze3t _18u0ze3t _otyrze3t _19bvze3t _o5721q9c",
   detailsLabelExtraTopSpace: "_19pkxy5q",
   detailsLabelIcon: "_1e0c1txw _1o9zidpf _syaz131l _1bsb7vkz _4t3i7vkz _s7n4jp4b _19pkze3t",
   detailsLabelText: "_1reo15vq _18m915vq _11c8dcr7 _1bto1l2s _syaz1fxt _19pkze3t _18u0ze3t",
@@ -149,7 +151,10 @@ var DetailsLabel = exports.DetailsLabel = function DetailsLabel(_ref12) {
   var children = _ref12.children,
     _ref12$extraTopSpace = _ref12.extraTopSpace,
     extraTopSpace = _ref12$extraTopSpace === void 0 ? false : _ref12$extraTopSpace;
-  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+  return (0, _platformFeatureFlags.fg)('fix_profilecard_details_label_semantic_html') ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    as: "dl",
+    xcss: (0, _css.cx)(styles.detailsLabelNext, extraTopSpace && styles.detailsLabelExtraTopSpace)
+  }, children) : /*#__PURE__*/_react.default.createElement(_compiled.Box, {
     xcss: (0, _css.cx)(styles.detailsLabel, extraTopSpace && styles.detailsLabelExtraTopSpace)
   }, children);
 };

package/dist/cjs/util/analytics.js

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

package/dist/es2019/client/getOrgIdForCloudIdFromAGG.js

@@ -6,7 +6,7 @@ const ORG_ID_FROM_CLOUD_ID_QUERY = `query OrgIdFromCloudId($cloudId: ID!) {
 }`;
 const addHeaders = headers => {
   headers.append('atl-client-name', "@atlaskit/profilecard");
-  headers.append('atl-client-version', "23.21.8");
+  headers.append('atl-client-version', "23.21.9");
   return headers;
 };
 export async function getOrgIdForCloudIdFromAGG(url, cloudId) {

package/dist/es2019/client/getTeamFromAGG.js

@@ -74,7 +74,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', "23.21.8");
+  headers.append('atl-client-version', "23.21.9");
   return headers;
 };
 export async function getTeamFromAGG(url, teamId, siteId) {

package/dist/es2019/components/User/ProfileCardDetails.compiled.css

@@ -3,6 +3,7 @@
 ._18u0idpf{margin-left:0}
 ._18u0ze3t{margin-left:var(--ds-space-0,0)}
 ._19bvze3t{padding-left:var(--ds-space-0,0)}
+._19pkxy5q{margin-top:var(--ds-space-400,2pc)}
 ._19pkze3t{margin-top:var(--ds-space-0,0)}
 ._1bguutpp#profilecard-name-label{margin-bottom:var(--ds-space-150,9pt)}
 ._1bto1l2s{text-overflow:ellipsis}

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

@@ -16,6 +16,7 @@ import { IconLabel } from '../Icon';
 import ReportingLinesDetails from './ReportingLinesDetails';
 const styles = {
   detailedListWrapper: "_19pkze3t _2hwxze3t _otyrze3t _18u0ze3t _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t",
+  detailedListWrapperNext: "_19pkxy5q _2hwxze3t _otyrze3t _18u0ze3t _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t",
   fullNameLabel: "_1reo15vq _18m915vq _11c81ixg _1bto1l2s _o5721q9c",
   noMetaLabel: "_2hwxidpf _18u0idpf _rcujxy5q _1l6uutpp",
   noMetaLabelWithHighSpecificity: "_1hpmxy5q _1bguutpp",
@@ -120,7 +121,18 @@ export const ProfileCardDetails = props => {
   }
   return /*#__PURE__*/React.createElement(DetailsGroup, null, renderName(props.nickname, props.fullName, meta), meta && /*#__PURE__*/React.createElement(JobTitleLabel, null, meta), /*#__PURE__*/React.createElement(CustomLozenges, {
     lozenges: props.customLozenges
-  }), /*#__PURE__*/React.createElement(Box, {
+  }), fg('fix_profilecard_details_label_semantic_html') ? /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.detailedListWrapperNext
+  }, /*#__PURE__*/React.createElement(IconLabel, {
+    icon: "email",
+    extraTopSpace: true
+  }, props.email), /*#__PURE__*/React.createElement(IconLabel, {
+    icon: "time"
+  }, props.timestring), /*#__PURE__*/React.createElement(IconLabel, {
+    icon: "companyName"
+  }, props.companyName), /*#__PURE__*/React.createElement(IconLabel, {
+    icon: "location"
+  }, props.location)) : /*#__PURE__*/React.createElement(Box, {
     as: "dl",
     xcss: styles.detailedListWrapper
   }, /*#__PURE__*/React.createElement(IconLabel, {

package/dist/es2019/styled/Card.compiled.css

@@ -17,6 +17,7 @@
 ._19bv12x7{padding-left:var(--ds-space-075,6px)}
 ._19bv1ejb{padding-left:var(--ds-space-300,24px)}
 ._19bvxy5q{padding-left:var(--ds-space-400,2pc)}
+._19bvze3t{padding-left:var(--ds-space-0,0)}
 ._19pk1b66{margin-top:var(--ds-space-050,4px)}
 ._19pkpxbi{margin-top:var(--ds-space-200,1pc)}
 ._19pkutpp{margin-top:var(--ds-space-150,9pt)}

package/dist/es2019/styled/Card.js

@@ -4,6 +4,7 @@ import "./Card.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import { cx } from '@atlaskit/css';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, Text } from '@atlaskit/primitives/compiled';
 const kudosButtonAnimationTransformationCompiled = null;
 const styles = {
@@ -24,6 +25,7 @@ const styles = {
   cardContainerDisabledUser: "_1itkkf3t",
   cardContainerWithElevation: "_2rkoglpi _16qs1cd0",
   detailsLabel: "_zulpu2gc _1e0c1txw _4cvr1h6o _1bah1y6m _19pkutpp _2hwxze3t _18u0ze3t _otyrze3t _o5721q9c",
+  detailsLabelNext: "_zulpu2gc _1e0c1txw _4cvr1h6o _1bah1y6m _19pkutpp _2hwxze3t _18u0ze3t _otyrze3t _19bvze3t _o5721q9c",
   detailsLabelExtraTopSpace: "_19pkxy5q",
   detailsLabelIcon: "_1e0c1txw _1o9zidpf _syaz131l _1bsb7vkz _4t3i7vkz _s7n4jp4b _19pkze3t",
   detailsLabelText: "_1reo15vq _18m915vq _11c8dcr7 _1bto1l2s _syaz1fxt _19pkze3t _18u0ze3t",
@@ -122,7 +124,10 @@ export const CardContainer = ({
 export const DetailsLabel = ({
   children,
   extraTopSpace = false
-}) => /*#__PURE__*/React.createElement(Box, {
+}) => fg('fix_profilecard_details_label_semantic_html') ? /*#__PURE__*/React.createElement(Box, {
+  as: "dl",
+  xcss: cx(styles.detailsLabelNext, extraTopSpace && styles.detailsLabelExtraTopSpace)
+}, children) : /*#__PURE__*/React.createElement(Box, {
   xcss: cx(styles.detailsLabel, extraTopSpace && styles.detailsLabelExtraTopSpace)
 }, children);
 export const DetailsLabelIcon = ({

package/dist/es2019/util/analytics.js

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

package/dist/esm/client/getOrgIdForCloudIdFromAGG.js

@@ -4,7 +4,7 @@ import { AGGQuery } from './graphqlUtils';
 var ORG_ID_FROM_CLOUD_ID_QUERY = "query OrgIdFromCloudId($cloudId: ID!) {\n\ttenantContexts(cloudIds: [$cloudId]) {\n\t\torgId\n\t}\n}";
 var addHeaders = function addHeaders(headers) {
   headers.append('atl-client-name', "@atlaskit/profilecard");
-  headers.append('atl-client-version', "23.21.8");
+  headers.append('atl-client-version', "23.21.9");
   return headers;
 };
 export function getOrgIdForCloudIdFromAGG(_x, _x2) {

package/dist/esm/client/getTeamFromAGG.js

@@ -56,7 +56,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', "23.21.8");
+  headers.append('atl-client-version', "23.21.9");
   return headers;
 };
 export function getTeamFromAGG(_x, _x2, _x3) {

package/dist/esm/components/User/ProfileCardDetails.compiled.css

@@ -3,6 +3,7 @@
 ._18u0idpf{margin-left:0}
 ._18u0ze3t{margin-left:var(--ds-space-0,0)}
 ._19bvze3t{padding-left:var(--ds-space-0,0)}
+._19pkxy5q{margin-top:var(--ds-space-400,2pc)}
 ._19pkze3t{margin-top:var(--ds-space-0,0)}
 ._1bguutpp#profilecard-name-label{margin-bottom:var(--ds-space-150,9pt)}
 ._1bto1l2s{text-overflow:ellipsis}

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

@@ -18,6 +18,7 @@ import { IconLabel } from '../Icon';
 import ReportingLinesDetails from './ReportingLinesDetails';
 var styles = {
   detailedListWrapper: "_19pkze3t _2hwxze3t _otyrze3t _18u0ze3t _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t",
+  detailedListWrapperNext: "_19pkxy5q _2hwxze3t _otyrze3t _18u0ze3t _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t",
   fullNameLabel: "_1reo15vq _18m915vq _11c81ixg _1bto1l2s _o5721q9c",
   noMetaLabel: "_2hwxidpf _18u0idpf _rcujxy5q _1l6uutpp",
   noMetaLabelWithHighSpecificity: "_1hpmxy5q _1bguutpp",
@@ -117,7 +118,18 @@ export var ProfileCardDetails = function ProfileCardDetails(props) {
   }
   return /*#__PURE__*/React.createElement(DetailsGroup, null, renderName(props.nickname, props.fullName, meta), meta && /*#__PURE__*/React.createElement(JobTitleLabel, null, meta), /*#__PURE__*/React.createElement(CustomLozenges, {
     lozenges: props.customLozenges
-  }), /*#__PURE__*/React.createElement(Box, {
+  }), fg('fix_profilecard_details_label_semantic_html') ? /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.detailedListWrapperNext
+  }, /*#__PURE__*/React.createElement(IconLabel, {
+    icon: "email",
+    extraTopSpace: true
+  }, props.email), /*#__PURE__*/React.createElement(IconLabel, {
+    icon: "time"
+  }, props.timestring), /*#__PURE__*/React.createElement(IconLabel, {
+    icon: "companyName"
+  }, props.companyName), /*#__PURE__*/React.createElement(IconLabel, {
+    icon: "location"
+  }, props.location)) : /*#__PURE__*/React.createElement(Box, {
     as: "dl",
     xcss: styles.detailedListWrapper
   }, /*#__PURE__*/React.createElement(IconLabel, {

package/dist/esm/styled/Card.compiled.css

@@ -17,6 +17,7 @@
 ._19bv12x7{padding-left:var(--ds-space-075,6px)}
 ._19bv1ejb{padding-left:var(--ds-space-300,24px)}
 ._19bvxy5q{padding-left:var(--ds-space-400,2pc)}
+._19bvze3t{padding-left:var(--ds-space-0,0)}
 ._19pk1b66{margin-top:var(--ds-space-050,4px)}
 ._19pkpxbi{margin-top:var(--ds-space-200,1pc)}
 ._19pkutpp{margin-top:var(--ds-space-150,9pt)}

package/dist/esm/styled/Card.js

@@ -4,6 +4,7 @@ import "./Card.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import { cx } from '@atlaskit/css';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, Text } from '@atlaskit/primitives/compiled';
 var kudosButtonAnimationTransformationCompiled = null;
 var styles = {
@@ -24,6 +25,7 @@ var styles = {
   cardContainerDisabledUser: "_1itkkf3t",
   cardContainerWithElevation: "_2rkoglpi _16qs1cd0",
   detailsLabel: "_zulpu2gc _1e0c1txw _4cvr1h6o _1bah1y6m _19pkutpp _2hwxze3t _18u0ze3t _otyrze3t _o5721q9c",
+  detailsLabelNext: "_zulpu2gc _1e0c1txw _4cvr1h6o _1bah1y6m _19pkutpp _2hwxze3t _18u0ze3t _otyrze3t _19bvze3t _o5721q9c",
   detailsLabelExtraTopSpace: "_19pkxy5q",
   detailsLabelIcon: "_1e0c1txw _1o9zidpf _syaz131l _1bsb7vkz _4t3i7vkz _s7n4jp4b _19pkze3t",
   detailsLabelText: "_1reo15vq _18m915vq _11c8dcr7 _1bto1l2s _syaz1fxt _19pkze3t _18u0ze3t",
@@ -142,7 +144,10 @@ export var DetailsLabel = function DetailsLabel(_ref12) {
   var children = _ref12.children,
     _ref12$extraTopSpace = _ref12.extraTopSpace,
     extraTopSpace = _ref12$extraTopSpace === void 0 ? false : _ref12$extraTopSpace;
-  return /*#__PURE__*/React.createElement(Box, {
+  return fg('fix_profilecard_details_label_semantic_html') ? /*#__PURE__*/React.createElement(Box, {
+    as: "dl",
+    xcss: cx(styles.detailsLabelNext, extraTopSpace && styles.detailsLabelExtraTopSpace)
+  }, children) : /*#__PURE__*/React.createElement(Box, {
     xcss: cx(styles.detailsLabel, extraTopSpace && styles.detailsLabelExtraTopSpace)
   }, children);
 };

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.21.8"
+      packageVersion: "23.21.9"
     }, attributes), {}, {
       firedAt: Math.round(getPageTime())
     })

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/profilecard",
-	"version": "23.21.9",
+	"version": "23.21.10",
 	"description": "A React component to display a card with user information.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -178,6 +178,9 @@
 		"platform-adopt-teams-nav-config": {
 			"type": "boolean"
 		},
+		"fix_profilecard_details_label_semantic_html": {
+			"type": "boolean"
+		},
 		"platform_editor_profilecard_style_fix": {
 			"type": "boolean"
 		}