@atlaskit/profilecard 19.15.0 → 19.15.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @atlaskit/profilecard
2
2
 
3
+ ## 19.15.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [#104301](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/104301)
8
+ [`fa84aade26f84`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/fa84aade26f84) -
9
+ ECA11Y-16: Detailed list markup for profilecard details
10
+
3
11
  ## 19.15.0
4
12
 
5
13
  ### Minor Changes
@@ -60,6 +60,9 @@
60
60
  {
61
61
  "path": "../../../design-system/popup/afm-cc/tsconfig.json"
62
62
  },
63
+ {
64
+ "path": "../../../design-system/primitives/afm-cc/tsconfig.json"
65
+ },
63
66
  {
64
67
  "path": "../../../design-system/spinner/afm-cc/tsconfig.json"
65
68
  },
@@ -57,7 +57,7 @@ var addHeaders = exports.addHeaders = function addHeaders(headers) {
57
57
  headers.append('X-ExperimentalApi', 'teams-beta');
58
58
  headers.append('X-ExperimentalApi', 'team-members-beta');
59
59
  headers.append('atl-client-name', "@atlaskit/profilecard");
60
- headers.append('atl-client-version', "19.15.0");
60
+ headers.append('atl-client-version', "19.15.1");
61
61
  return headers;
62
62
  };
63
63
  function getTeamFromAGG(_x, _x2, _x3) {
@@ -10,12 +10,17 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
10
10
  var _react = _interopRequireDefault(require("react"));
11
11
  var _reactIntlNext = require("react-intl-next");
12
12
  var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
13
+ var _primitives = require("@atlaskit/primitives");
13
14
  var _relativeDate = _interopRequireDefault(require("../../internal/relative-date"));
14
15
  var _messages = _interopRequireDefault(require("../../messages"));
15
16
  var _Card = require("../../styled/Card");
16
17
  var _Icon = require("../Icon");
17
18
  var _ReportingLinesDetails = _interopRequireDefault(require("./ReportingLinesDetails"));
18
19
  var _excluded = ["text"];
20
+ var detailedListWrapperStyles = (0, _primitives.xcss)({
21
+ margin: 'space.0',
22
+ padding: 'space.0'
23
+ });
19
24
  var renderName = function renderName(nickname, fullName, meta) {
20
25
  if (!fullName && !nickname) {
21
26
  return null;
@@ -97,7 +102,10 @@ var ProfileCardDetails = exports.ProfileCardDetails = function ProfileCardDetail
97
102
  }
98
103
  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, {
99
104
  lozenges: props.customLozenges
100
- }), /*#__PURE__*/_react.default.createElement(_Icon.IconLabel, {
105
+ }), /*#__PURE__*/_react.default.createElement(_primitives.Box, {
106
+ as: "dl",
107
+ xcss: detailedListWrapperStyles
108
+ }, /*#__PURE__*/_react.default.createElement(_Icon.IconLabel, {
101
109
  icon: "email"
102
110
  }, props.email), /*#__PURE__*/_react.default.createElement(_Icon.IconLabel, {
103
111
  icon: "time"
@@ -105,7 +113,7 @@ var ProfileCardDetails = exports.ProfileCardDetails = function ProfileCardDetail
105
113
  icon: "companyName"
106
114
  }, props.companyName), /*#__PURE__*/_react.default.createElement(_Icon.IconLabel, {
107
115
  icon: "location"
108
- }, props.location), /*#__PURE__*/_react.default.createElement(_ReportingLinesDetails.default, {
116
+ }, props.location)), /*#__PURE__*/_react.default.createElement(_ReportingLinesDetails.default, {
109
117
  reportingLines: props.reportingLines,
110
118
  reportingLinesProfileUrl: props.reportingLinesProfileUrl,
111
119
  onReportingLinesClick: props.onReportingLinesClick,
@@ -105,4 +105,4 @@ var DetailsLabel = exports.DetailsLabel = _styled.default.div(_templateObject20
105
105
  var DetailsLabelIcon = exports.DetailsLabelIcon = _styled.default.div(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2.default)(["\n\tdisplay: flex;\n\tflex-shrink: 0;\n\tcolor: ", ";\n\twidth: ", ";\n\theight: ", ";\n\tpadding: ", ";\n\tvertical-align: top;\n\n\tsvg {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t}\n"])), _constants2.labelIconColor, "var(--ds-space-200, 16px)", "var(--ds-space-200, 16px)", "var(--ds-space-050, 4px)");
106
106
 
107
107
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
108
- var DetailsLabelText = exports.DetailsLabelText = _styled.default.span(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2.default)(["\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\tcolor: ", ";\n\tpadding-left: ", ";\n"])), _constants2.labelTextColor, "var(--ds-space-050, 4px)");
108
+ var DetailsLabelText = exports.DetailsLabelText = _styled.default.span(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2.default)(["\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\tcolor: ", ";\n\tpadding-left: ", ";\n\tmargin-inline-start: 0;\n\tmargin-top: 0;\n"])), _constants2.labelTextColor, "var(--ds-space-050, 4px)");
@@ -44,7 +44,7 @@ var createEvent = function createEvent(eventType, action, actionSubject, actionS
44
44
  actionSubjectId: actionSubjectId,
45
45
  attributes: _objectSpread(_objectSpread({
46
46
  packageName: "@atlaskit/profilecard",
47
- packageVersion: "19.15.0"
47
+ packageVersion: "19.15.1"
48
48
  }, attributes), {}, {
49
49
  firedAt: Math.round((0, _performance.getPageTime)())
50
50
  })
@@ -67,7 +67,7 @@ export const addHeaders = headers => {
67
67
  headers.append('X-ExperimentalApi', 'teams-beta');
68
68
  headers.append('X-ExperimentalApi', 'team-members-beta');
69
69
  headers.append('atl-client-name', "@atlaskit/profilecard");
70
- headers.append('atl-client-version', "19.15.0");
70
+ headers.append('atl-client-version', "19.15.1");
71
71
  return headers;
72
72
  };
73
73
  export async function getTeamFromAGG(url, teamId, siteId) {
@@ -2,11 +2,16 @@ import _extends from "@babel/runtime/helpers/extends";
2
2
  import React from 'react';
3
3
  import { FormattedMessage } from 'react-intl-next';
4
4
  import Lozenge from '@atlaskit/lozenge';
5
+ import { Box, xcss } from '@atlaskit/primitives';
5
6
  import relativeDate from '../../internal/relative-date';
6
7
  import messages from '../../messages';
7
8
  import { AppTitleLabel, CustomLozengeContainer, DetailsGroup, DisabledInfo, FullNameLabel, JobTitleLabel, LozengeWrapper } from '../../styled/Card';
8
9
  import { IconLabel } from '../Icon';
9
10
  import ReportingLinesDetails from './ReportingLinesDetails';
11
+ const detailedListWrapperStyles = xcss({
12
+ margin: 'space.0',
13
+ padding: 'space.0'
14
+ });
10
15
  const renderName = (nickname, fullName, meta) => {
11
16
  if (!fullName && !nickname) {
12
17
  return null;
@@ -91,7 +96,10 @@ export const ProfileCardDetails = props => {
91
96
  }
92
97
  return /*#__PURE__*/React.createElement(DetailsGroup, null, renderName(props.nickname, props.fullName, meta), meta && /*#__PURE__*/React.createElement(JobTitleLabel, null, meta), /*#__PURE__*/React.createElement(CustomLozenges, {
93
98
  lozenges: props.customLozenges
94
- }), /*#__PURE__*/React.createElement(IconLabel, {
99
+ }), /*#__PURE__*/React.createElement(Box, {
100
+ as: "dl",
101
+ xcss: detailedListWrapperStyles
102
+ }, /*#__PURE__*/React.createElement(IconLabel, {
95
103
  icon: "email"
96
104
  }, props.email), /*#__PURE__*/React.createElement(IconLabel, {
97
105
  icon: "time"
@@ -99,7 +107,7 @@ export const ProfileCardDetails = props => {
99
107
  icon: "companyName"
100
108
  }, props.companyName), /*#__PURE__*/React.createElement(IconLabel, {
101
109
  icon: "location"
102
- }, props.location), /*#__PURE__*/React.createElement(ReportingLinesDetails, {
110
+ }, props.location)), /*#__PURE__*/React.createElement(ReportingLinesDetails, {
103
111
  reportingLines: props.reportingLines,
104
112
  reportingLinesProfileUrl: props.reportingLinesProfileUrl,
105
113
  onReportingLinesClick: props.onReportingLinesClick,
@@ -287,4 +287,6 @@ export const DetailsLabelText = styled.span`
287
287
  text-overflow: ellipsis;
288
288
  color: ${labelTextColor};
289
289
  padding-left: ${"var(--ds-space-050, 4px)"};
290
+ margin-inline-start: 0;
291
+ margin-top: 0;
290
292
  `;
@@ -31,7 +31,7 @@ const createEvent = (eventType, action, actionSubject, actionSubjectId, attribut
31
31
  actionSubjectId,
32
32
  attributes: {
33
33
  packageName: "@atlaskit/profilecard",
34
- packageVersion: "19.15.0",
34
+ packageVersion: "19.15.1",
35
35
  ...attributes,
36
36
  firedAt: Math.round(getPageTime())
37
37
  }
@@ -48,7 +48,7 @@ export var addHeaders = function addHeaders(headers) {
48
48
  headers.append('X-ExperimentalApi', 'teams-beta');
49
49
  headers.append('X-ExperimentalApi', 'team-members-beta');
50
50
  headers.append('atl-client-name', "@atlaskit/profilecard");
51
- headers.append('atl-client-version', "19.15.0");
51
+ headers.append('atl-client-version', "19.15.1");
52
52
  return headers;
53
53
  };
54
54
  export function getTeamFromAGG(_x, _x2, _x3) {
@@ -4,11 +4,16 @@ var _excluded = ["text"];
4
4
  import React from 'react';
5
5
  import { FormattedMessage } from 'react-intl-next';
6
6
  import Lozenge from '@atlaskit/lozenge';
7
+ import { Box, xcss } from '@atlaskit/primitives';
7
8
  import relativeDate from '../../internal/relative-date';
8
9
  import messages from '../../messages';
9
10
  import { AppTitleLabel, CustomLozengeContainer, DetailsGroup, DisabledInfo, FullNameLabel, JobTitleLabel, LozengeWrapper } from '../../styled/Card';
10
11
  import { IconLabel } from '../Icon';
11
12
  import ReportingLinesDetails from './ReportingLinesDetails';
13
+ var detailedListWrapperStyles = xcss({
14
+ margin: 'space.0',
15
+ padding: 'space.0'
16
+ });
12
17
  var renderName = function renderName(nickname, fullName, meta) {
13
18
  if (!fullName && !nickname) {
14
19
  return null;
@@ -90,7 +95,10 @@ export var ProfileCardDetails = function ProfileCardDetails(props) {
90
95
  }
91
96
  return /*#__PURE__*/React.createElement(DetailsGroup, null, renderName(props.nickname, props.fullName, meta), meta && /*#__PURE__*/React.createElement(JobTitleLabel, null, meta), /*#__PURE__*/React.createElement(CustomLozenges, {
92
97
  lozenges: props.customLozenges
93
- }), /*#__PURE__*/React.createElement(IconLabel, {
98
+ }), /*#__PURE__*/React.createElement(Box, {
99
+ as: "dl",
100
+ xcss: detailedListWrapperStyles
101
+ }, /*#__PURE__*/React.createElement(IconLabel, {
94
102
  icon: "email"
95
103
  }, props.email), /*#__PURE__*/React.createElement(IconLabel, {
96
104
  icon: "time"
@@ -98,7 +106,7 @@ export var ProfileCardDetails = function ProfileCardDetails(props) {
98
106
  icon: "companyName"
99
107
  }, props.companyName), /*#__PURE__*/React.createElement(IconLabel, {
100
108
  icon: "location"
101
- }, props.location), /*#__PURE__*/React.createElement(ReportingLinesDetails, {
109
+ }, props.location)), /*#__PURE__*/React.createElement(ReportingLinesDetails, {
102
110
  reportingLines: props.reportingLines,
103
111
  reportingLinesProfileUrl: props.reportingLinesProfileUrl,
104
112
  onReportingLinesClick: props.onReportingLinesClick,
@@ -98,4 +98,4 @@ export var DetailsLabel = styled.div(_templateObject20 || (_templateObject20 = _
98
98
  export var DetailsLabelIcon = styled.div(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n\tdisplay: flex;\n\tflex-shrink: 0;\n\tcolor: ", ";\n\twidth: ", ";\n\theight: ", ";\n\tpadding: ", ";\n\tvertical-align: top;\n\n\tsvg {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t}\n"])), labelIconColor, "var(--ds-space-200, 16px)", "var(--ds-space-200, 16px)", "var(--ds-space-050, 4px)");
99
99
 
100
100
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
101
- export var DetailsLabelText = styled.span(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\tcolor: ", ";\n\tpadding-left: ", ";\n"])), labelTextColor, "var(--ds-space-050, 4px)");
101
+ export var DetailsLabelText = styled.span(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\tcolor: ", ";\n\tpadding-left: ", ";\n\tmargin-inline-start: 0;\n\tmargin-top: 0;\n"])), labelTextColor, "var(--ds-space-050, 4px)");
@@ -38,7 +38,7 @@ var createEvent = function createEvent(eventType, action, actionSubject, actionS
38
38
  actionSubjectId: actionSubjectId,
39
39
  attributes: _objectSpread(_objectSpread({
40
40
  packageName: "@atlaskit/profilecard",
41
- packageVersion: "19.15.0"
41
+ packageVersion: "19.15.1"
42
42
  }, attributes), {}, {
43
43
  firedAt: Math.round(getPageTime())
44
44
  })
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/profilecard",
3
- "version": "19.15.0",
3
+ "version": "19.15.1",
4
4
  "description": "A React component to display a card with user information.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -66,6 +66,7 @@
66
66
  "@atlaskit/menu": "^2.4.0",
67
67
  "@atlaskit/platform-feature-flags": "^0.2.4",
68
68
  "@atlaskit/popup": "^1.18.0",
69
+ "@atlaskit/primitives": "^7.3.0",
69
70
  "@atlaskit/spinner": "^16.1.0",
70
71
  "@atlaskit/theme": "^12.9.0",
71
72
  "@atlaskit/tokens": "^1.50.0",
@@ -83,6 +84,7 @@
83
84
  "react-dom": "^16.8.0"
84
85
  },
85
86
  "devDependencies": {
87
+ "@af/visual-regression": "*",
86
88
  "@atlassian/ptc-test-utils": "^0.8.0",
87
89
  "@testing-library/react": "^12.1.5",
88
90
  "enzyme": "^3.10.0",