@atlaskit/profilecard 17.3.0 → 18.0.0
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 +12 -0
- package/dist/cjs/styled/Card.js +40 -36
- package/dist/cjs/styled/Error.js +6 -6
- package/dist/cjs/styled/ReportingLines.js +6 -6
- package/dist/cjs/styled/TeamCard.js +16 -32
- package/dist/cjs/util/analytics.js +1 -1
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/styled/Card.js +13 -8
- package/dist/es2019/styled/Error.js +1 -1
- package/dist/es2019/styled/ReportingLines.js +1 -1
- package/dist/es2019/styled/TeamCard.js +3 -22
- package/dist/es2019/util/analytics.js +1 -1
- package/dist/es2019/version.json +1 -1
- package/dist/esm/styled/Card.js +16 -12
- package/dist/esm/styled/Error.js +1 -1
- package/dist/esm/styled/ReportingLines.js +1 -1
- package/dist/esm/styled/TeamCard.js +14 -24
- package/dist/esm/util/analytics.js +1 -1
- package/dist/esm/version.json +1 -1
- package/dist/types/styled/Card.d.ts +90 -22
- package/dist/types/styled/Error.d.ts +20 -5
- package/dist/types/styled/ReportingLines.d.ts +20 -5
- package/dist/types/styled/TeamCard.d.ts +53 -17
- package/package.json +9 -8
- package/report.api.md +14 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# @atlaskit/profilecard
|
|
2
2
|
|
|
3
|
+
## 18.0.0
|
|
4
|
+
|
|
5
|
+
### Major Changes
|
|
6
|
+
|
|
7
|
+
- [`d1789629297`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d1789629297) - Switch from styled-components to emotion for CSS
|
|
8
|
+
|
|
9
|
+
## 17.3.1
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- Updated dependencies
|
|
14
|
+
|
|
3
15
|
## 17.3.0
|
|
4
16
|
|
|
5
17
|
### Minor Changes
|
package/dist/cjs/styled/Card.js
CHANGED
|
@@ -2,16 +2,20 @@
|
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
4
|
|
|
5
|
-
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
6
|
-
|
|
7
5
|
Object.defineProperty(exports, "__esModule", {
|
|
8
6
|
value: true
|
|
9
7
|
});
|
|
10
|
-
exports.SpinnerContainer = exports.ProfileImage = exports.OverflowActionButtonsWrapper = exports.LozengeWrapper = 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;
|
|
8
|
+
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;
|
|
9
|
+
|
|
10
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
11
11
|
|
|
12
12
|
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
13
13
|
|
|
14
|
-
var
|
|
14
|
+
var _react = _interopRequireDefault(require("react"));
|
|
15
|
+
|
|
16
|
+
var _core = require("@emotion/core");
|
|
17
|
+
|
|
18
|
+
var _styled = _interopRequireDefault(require("@emotion/styled"));
|
|
15
19
|
|
|
16
20
|
var _constants = require("@atlaskit/theme/constants");
|
|
17
21
|
|
|
@@ -19,62 +23,66 @@ var _tokens = require("@atlaskit/tokens");
|
|
|
19
23
|
|
|
20
24
|
var _constants2 = require("./constants");
|
|
21
25
|
|
|
22
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22
|
|
23
|
-
|
|
24
|
-
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
25
|
-
|
|
26
|
-
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
26
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22;
|
|
27
27
|
|
|
28
28
|
var getFullNameMargin = function getFullNameMargin(props) {
|
|
29
29
|
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");
|
|
30
30
|
};
|
|
31
31
|
|
|
32
|
-
var CardContainerEmpty =
|
|
32
|
+
var CardContainerEmpty = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)([""])));
|
|
33
33
|
|
|
34
34
|
exports.CardContainerEmpty = CardContainerEmpty;
|
|
35
35
|
|
|
36
|
-
var CardWrapper =
|
|
36
|
+
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);
|
|
37
37
|
|
|
38
38
|
exports.CardWrapper = CardWrapper;
|
|
39
39
|
|
|
40
|
-
var ProfileImage =
|
|
40
|
+
var ProfileImage = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n top: ", "px;\n left: ", "px;\n"])), (0, _constants.gridSize)() * 3, (0, _constants.gridSize)() * 3);
|
|
41
41
|
|
|
42
42
|
exports.ProfileImage = ProfileImage;
|
|
43
43
|
|
|
44
|
-
var ActionsFlexSpacer =
|
|
44
|
+
var ActionsFlexSpacer = _styled.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n flex: 1 0 auto;\n"])));
|
|
45
45
|
|
|
46
46
|
exports.ActionsFlexSpacer = ActionsFlexSpacer;
|
|
47
|
-
var kudosButtonAnimationTransformation = (0,
|
|
47
|
+
var kudosButtonAnimationTransformation = (0, _core.keyframes)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["{\n 0% { transform: translate(-80px, -50px); }\n 100% { transform: translate(90px, -70px); }\n}"])));
|
|
48
|
+
|
|
49
|
+
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, (0, _tokens.token)('color.background.information.pressed', '#85B8FF'), (0, _tokens.token)('color.background.discovery.pressed', '#B8ACF6'));
|
|
48
50
|
|
|
49
|
-
|
|
51
|
+
exports.KudosBlobAnimationStyle = KudosBlobAnimationStyle;
|
|
52
|
+
|
|
53
|
+
var KudosBlobAnimation = function KudosBlobAnimation(props) {
|
|
54
|
+
return /*#__PURE__*/_react.default.createElement(KudosBlobAnimationStyle, (0, _extends2.default)({
|
|
55
|
+
className: "kudos-blob-animation"
|
|
56
|
+
}, props));
|
|
57
|
+
};
|
|
50
58
|
|
|
51
59
|
exports.KudosBlobAnimation = KudosBlobAnimation;
|
|
52
60
|
|
|
53
|
-
var AnimatedKudosButton =
|
|
61
|
+
var AnimatedKudosButton = _styled.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n margin-left: ", "px;\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"])), _constants.gridSize, _constants.borderRadius);
|
|
54
62
|
|
|
55
63
|
exports.AnimatedKudosButton = AnimatedKudosButton;
|
|
56
64
|
|
|
57
|
-
var ActionButtonGroup =
|
|
65
|
+
var ActionButtonGroup = _styled.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n user-select: none;\n margin: ", "px 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: ", "px;\n\n &:first-child {\n margin-left: 0;\n }\n }\n"])), 2 * (0, _constants.gridSize)(), _constants.gridSize);
|
|
58
66
|
|
|
59
67
|
exports.ActionButtonGroup = ActionButtonGroup;
|
|
60
68
|
|
|
61
|
-
var OverflowActionButtonsWrapper =
|
|
69
|
+
var OverflowActionButtonsWrapper = _styled.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n display: inline-block;\n width: 32px;\n height: 32px;\n margin-left: ", "px;\n"])), _constants.gridSize);
|
|
62
70
|
|
|
63
71
|
exports.OverflowActionButtonsWrapper = OverflowActionButtonsWrapper;
|
|
64
72
|
|
|
65
|
-
var CardContent =
|
|
73
|
+
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);
|
|
66
74
|
|
|
67
75
|
exports.CardContent = CardContent;
|
|
68
76
|
|
|
69
|
-
var DetailsGroup =
|
|
77
|
+
var DetailsGroup = _styled.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n margin-left: ", "px;\n width: ", "px;\n"])), (0, _constants.gridSize)() * 14.5, (0, _constants.gridSize)() * 24.5);
|
|
70
78
|
|
|
71
79
|
exports.DetailsGroup = DetailsGroup;
|
|
72
80
|
|
|
73
|
-
var DisabledInfo =
|
|
81
|
+
var DisabledInfo = _styled.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n font-size: ", "px;\n color: ", ";\n margin: ", "px 0 0 0;\n line-height: ", "px;\n"])), _constants.fontSizeSmall, _constants2.labelTextColor, (0, _constants.gridSize)() * 1.5, (0, _constants.gridSize)() * 2);
|
|
74
82
|
|
|
75
83
|
exports.DisabledInfo = DisabledInfo;
|
|
76
84
|
|
|
77
|
-
var FullNameLabel =
|
|
85
|
+
var FullNameLabel = _styled.default.span(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n\n font-size: 18px;\n color: ", ";\n margin: ", ";\n line-height: ", "em;\n"])), function (props) {
|
|
78
86
|
return props.isDisabledAccount ? _constants2.headerTextColorInactive : _constants2.headerTextColor;
|
|
79
87
|
}, function (props) {
|
|
80
88
|
return getFullNameMargin(props);
|
|
@@ -82,46 +90,42 @@ var FullNameLabel = _styledComponents.default.span(_templateObject13 || (_templa
|
|
|
82
90
|
|
|
83
91
|
exports.FullNameLabel = FullNameLabel;
|
|
84
92
|
|
|
85
|
-
var LozengeWrapper =
|
|
93
|
+
var LozengeWrapper = _styled.default.div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n margin-top: ", "px;\n text-transform: uppercase;\n display: block;\n"])), (0, _constants.gridSize)() * 2);
|
|
86
94
|
|
|
87
95
|
exports.LozengeWrapper = LozengeWrapper;
|
|
88
|
-
var CustomLozengeContainer = (0,
|
|
96
|
+
var CustomLozengeContainer = (0, _styled.default)(LozengeWrapper)(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n justify-content: flex-start;\n margin-top: ", "px;\n > * {\n margin-top: ", "px;\n &:not(:last-child) {\n margin-right: ", "px;\n }\n }\n"])), (0, _constants.gridSize)() * 1.5, (0, _constants.gridSize)() / 2, (0, _constants.gridSize)() / 2);
|
|
89
97
|
exports.CustomLozengeContainer = CustomLozengeContainer;
|
|
90
98
|
|
|
91
|
-
var JobTitleLabel =
|
|
99
|
+
var JobTitleLabel = _styled.default.span(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n\n font-size: 14px;\n color: ", ";\n margin: 0 0 ", "px 0;\n line-height: ", "em;\n"])), _constants2.headerTextColor, (0, _constants.gridSize)() * 1.5, 24 / 14);
|
|
92
100
|
|
|
93
101
|
exports.JobTitleLabel = JobTitleLabel;
|
|
94
102
|
|
|
95
|
-
var AppTitleLabel =
|
|
103
|
+
var AppTitleLabel = _styled.default.span(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n background: ", ";\n color: ", ";\n border-radius: ", ";\n padding: 0 6px;\n width: fit-content;\n font-weight: bold;\n text-transform: uppercase;\n\n font-size: 12px;\n margin: 4px 0 ", "px 0;\n line-height: ", "em;\n"])), _constants2.appLabelBgColor, _constants2.appLabelTextColor, (0, _constants.borderRadius)(), (0, _constants.gridSize)() * 1.5, 24 / 14);
|
|
96
104
|
|
|
97
105
|
exports.AppTitleLabel = AppTitleLabel;
|
|
98
106
|
|
|
99
|
-
var SpinnerContainer =
|
|
107
|
+
var SpinnerContainer = _styled.default.div(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2.default)(["\n align-items: center;\n display: flex;\n height: ", "px;\n justify-content: center;\n position: relative;\n"])), (0, _constants.gridSize)() * 12);
|
|
100
108
|
|
|
101
109
|
exports.SpinnerContainer = SpinnerContainer;
|
|
102
110
|
|
|
103
|
-
var CardContainer =
|
|
111
|
+
var CardContainer = _styled.default.div(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n background-image: linear-gradient(\n to bottom,\n ", "\n 0%,\n ", "\n 100%\n );\n background-repeat: no-repeat;\n background-size: 100% ", "px;\n box-sizing: content-box;\n padding: ", "px;\n ", "\n overflow: hidden;\n"])), function (props) {
|
|
104
112
|
return props.isDisabledUser ? _constants2.headerBgColorDisabledUser : _constants2.headerBgColor;
|
|
105
113
|
}, function (props) {
|
|
106
114
|
return props.isDisabledUser ? _constants2.headerBgColorDisabledUser : _constants2.headerBgColor;
|
|
107
115
|
}, (0, _constants.gridSize)() * 12, (0, _constants.gridSize)() * 3, function (props) {
|
|
108
|
-
|
|
109
|
-
return '';
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
return (0, _styledComponents.css)(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2.default)(["\n box-shadow: ", ";\n border-radius: ", "px;\n "])), _constants2.boxShadow, _constants.borderRadius);
|
|
116
|
+
return props.withoutElevation ? '' : "\n box-shadow: ".concat(_constants2.boxShadow, ";\n border-radius: ").concat(_constants.borderRadius, "px;\n ");
|
|
113
117
|
});
|
|
114
118
|
|
|
115
119
|
exports.CardContainer = CardContainer;
|
|
116
120
|
|
|
117
|
-
var DetailsLabel =
|
|
121
|
+
var DetailsLabel = _styled.default.div(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n line-height: ", "px;\n font-size: ", "px;\n margin: ", "px 0 0 0;\n white-space: nowrap;\n\n & + & {\n margin-top: ", "px;\n }\n"])), (0, _constants.gridSize)() * 3, (0, _constants.gridSize)() * 1.5, (0, _constants.gridSize)() * 2, (0, _constants.gridSize)() / 4);
|
|
118
122
|
|
|
119
123
|
exports.DetailsLabel = DetailsLabel;
|
|
120
124
|
|
|
121
|
-
var DetailsLabelIcon =
|
|
125
|
+
var DetailsLabelIcon = _styled.default.div(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-shrink: 0;\n color: ", ";\n width: ", "px;\n height: ", "px;\n padding: ", "px;\n vertical-align: top;\n\n svg {\n width: 100%;\n height: 100%;\n }\n"])), _constants2.labelIconColor, (0, _constants.gridSize)() * 2, (0, _constants.gridSize)() * 2, (0, _constants.gridSize)() / 2);
|
|
122
126
|
|
|
123
127
|
exports.DetailsLabelIcon = DetailsLabelIcon;
|
|
124
128
|
|
|
125
|
-
var DetailsLabelText =
|
|
129
|
+
var DetailsLabelText = _styled.default.span(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2.default)(["\n overflow: hidden;\n text-overflow: ellipsis;\n color: ", ";\n padding-left: ", "px;\n"])), _constants2.labelTextColor, (0, _constants.gridSize)() / 2);
|
|
126
130
|
|
|
127
131
|
exports.DetailsLabelText = DetailsLabelText;
|
package/dist/cjs/styled/Error.js
CHANGED
|
@@ -9,7 +9,7 @@ exports.TeamErrorTitle = exports.TeamErrorText = exports.ErrorWrapper = exports.
|
|
|
9
9
|
|
|
10
10
|
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
11
11
|
|
|
12
|
-
var
|
|
12
|
+
var _styled = _interopRequireDefault(require("@emotion/styled"));
|
|
13
13
|
|
|
14
14
|
var _colors = require("@atlaskit/theme/colors");
|
|
15
15
|
|
|
@@ -23,22 +23,22 @@ var _constants2 = require("./constants");
|
|
|
23
23
|
|
|
24
24
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
|
|
25
25
|
|
|
26
|
-
var ErrorWrapper =
|
|
26
|
+
var ErrorWrapper = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n text-align: center;\n padding: ", "px;\n color: ", ";\n"])), (0, _constants.gridSize)() * 3, _constants2.errorIconColor);
|
|
27
27
|
|
|
28
28
|
exports.ErrorWrapper = ErrorWrapper;
|
|
29
29
|
|
|
30
|
-
var ErrorTitle =
|
|
30
|
+
var ErrorTitle = _styled.default.p(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n color: ", ";\n line-height: ", "px;\n margin: ", "px 0;\n"])), _constants2.errorTitleColor, (0, _constants.gridSize)() * 3, _constants.gridSize);
|
|
31
31
|
|
|
32
32
|
exports.ErrorTitle = ErrorTitle;
|
|
33
33
|
|
|
34
|
-
var ErrorText =
|
|
34
|
+
var ErrorText = _styled.default.span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n color: ", ";\n"])), _constants2.errorTextColor);
|
|
35
35
|
|
|
36
36
|
exports.ErrorText = ErrorText;
|
|
37
37
|
|
|
38
|
-
var TeamErrorTitle =
|
|
38
|
+
var TeamErrorTitle = _styled.default.p(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n ", ";\n"])), _typography.h400);
|
|
39
39
|
|
|
40
40
|
exports.TeamErrorTitle = TeamErrorTitle;
|
|
41
41
|
|
|
42
|
-
var TeamErrorText =
|
|
42
|
+
var TeamErrorText = _styled.default.p(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n color: ", ";\n margin-top: ", "px;\n"])), (0, _tokens.token)('color.text.subtlest', _colors.N200), (0, _constants.gridSize)() * 1);
|
|
43
43
|
|
|
44
44
|
exports.TeamErrorText = TeamErrorText;
|
|
@@ -9,7 +9,7 @@ exports.ReportingLinesSection = exports.ReportingLinesHeading = exports.OffsetWr
|
|
|
9
9
|
|
|
10
10
|
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
11
11
|
|
|
12
|
-
var
|
|
12
|
+
var _styled = _interopRequireDefault(require("@emotion/styled"));
|
|
13
13
|
|
|
14
14
|
var _constants = require("@atlaskit/theme/constants");
|
|
15
15
|
|
|
@@ -17,22 +17,22 @@ var _constants2 = require("./constants");
|
|
|
17
17
|
|
|
18
18
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
|
|
19
19
|
|
|
20
|
-
var ReportingLinesSection =
|
|
20
|
+
var ReportingLinesSection = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n // Minor left margin to align better with existing icon fields\n margin-left: ", "px;\n margin-top: ", "px;\n"])), (0, _constants.gridSize)() / 2, (0, _constants.gridSize)());
|
|
21
21
|
|
|
22
22
|
exports.ReportingLinesSection = ReportingLinesSection;
|
|
23
23
|
|
|
24
|
-
var ReportingLinesHeading =
|
|
24
|
+
var ReportingLinesHeading = _styled.default.h5(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n color: ", ";\n font-size: ", "px;\n font-weight: 600;\n margin-bottom: ", "px;\n"])), _constants2.appLabelTextColor, (0, _constants.gridSize)() * 1.5, (0, _constants.gridSize)());
|
|
25
25
|
|
|
26
26
|
exports.ReportingLinesHeading = ReportingLinesHeading;
|
|
27
27
|
|
|
28
|
-
var ManagerSection =
|
|
28
|
+
var ManagerSection = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n margin: ", "px ", "px;\n"])), (0, _constants.gridSize)() / 2, (0, _constants.gridSize)() / 2);
|
|
29
29
|
|
|
30
30
|
exports.ManagerSection = ManagerSection;
|
|
31
31
|
|
|
32
|
-
var ManagerName =
|
|
32
|
+
var ManagerName = _styled.default.span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n font-size: ", "px;\n margin-left: ", "px;\n"])), (0, _constants.gridSize)() * 1.5, (0, _constants.gridSize)());
|
|
33
33
|
|
|
34
34
|
exports.ManagerName = ManagerName;
|
|
35
35
|
|
|
36
|
-
var OffsetWrapper =
|
|
36
|
+
var OffsetWrapper = _styled.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n margin-top: ", "px;\n // Offset left margin so the avatar aligns with the heading\n margin-left: -", "px;\n"])), (0, _constants.gridSize)() / 2, (0, _constants.gridSize)() / 2);
|
|
37
37
|
|
|
38
38
|
exports.OffsetWrapper = OffsetWrapper;
|
|
@@ -2,8 +2,6 @@
|
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
4
|
|
|
5
|
-
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
6
|
-
|
|
7
5
|
Object.defineProperty(exports, "__esModule", {
|
|
8
6
|
value: true
|
|
9
7
|
});
|
|
@@ -11,7 +9,7 @@ exports.WrappedButton = exports.TeamName = exports.MoreButton = exports.MemberCo
|
|
|
11
9
|
|
|
12
10
|
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
13
11
|
|
|
14
|
-
var
|
|
12
|
+
var _styled = _interopRequireDefault(require("@emotion/styled"));
|
|
15
13
|
|
|
16
14
|
var _colors = require("@atlaskit/theme/colors");
|
|
17
15
|
|
|
@@ -23,73 +21,59 @@ var _tokens = require("@atlaskit/tokens");
|
|
|
23
21
|
|
|
24
22
|
var _constants2 = require("./constants");
|
|
25
23
|
|
|
26
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13
|
|
27
|
-
|
|
28
|
-
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
29
|
-
|
|
30
|
-
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
24
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
|
|
31
25
|
|
|
32
|
-
var CardTriggerWrapper =
|
|
26
|
+
var CardTriggerWrapper = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: inherit;\n"])));
|
|
33
27
|
|
|
34
28
|
exports.CardTriggerWrapper = CardTriggerWrapper;
|
|
35
29
|
|
|
36
|
-
var CardWrapper =
|
|
30
|
+
var CardWrapper = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n background-color: ", ";\n border-radius: ", "px;\n width: ", "px;\n position: relative;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n"])), _constants2.bgColor, _constants.borderRadius, (0, _constants.gridSize)() * 40);
|
|
37
31
|
|
|
38
32
|
exports.CardWrapper = CardWrapper;
|
|
39
|
-
var loadingImage = (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n background-color: ", ";\n"])), (0, _tokens.token)('color.background.neutral', _colors.N20));
|
|
40
|
-
var defaultImage = (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n background-color: ", ";\n"])), _constants2.teamHeaderBgColor);
|
|
41
|
-
|
|
42
|
-
var CardHeader = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n ", ";\n background-repeat: no-repeat;\n background-size: cover;\n box-sizing: content-box;\n height: ", "px;\n"])), function (props) {
|
|
43
|
-
if (props.isLoading) {
|
|
44
|
-
return loadingImage;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
if (props.image) {
|
|
48
|
-
return (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n background-image: url('", "');\n background-size: cover;\n background-position: center;\n "])), props.image);
|
|
49
|
-
}
|
|
50
33
|
|
|
51
|
-
|
|
34
|
+
var CardHeader = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n background-color: ", ";\n background-repeat: no-repeat;\n background-position: center;\n background-size: cover;\n box-sizing: content-box;\n height: ", "px;\n"])), function (props) {
|
|
35
|
+
return props.isLoading ? (0, _tokens.token)('color.background.neutral', _colors.N20) : props.image ? "url('".concat(props.image, "')") : _constants2.teamHeaderBgColor;
|
|
52
36
|
}, (0, _constants.gridSize)() * 16);
|
|
53
37
|
|
|
54
38
|
exports.CardHeader = CardHeader;
|
|
55
39
|
|
|
56
|
-
var CardContent =
|
|
40
|
+
var CardContent = _styled.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n padding: ", "px;\n min-height: ", "px;\n"])), (0, _constants.gridSize)() * 3, (0, _constants.gridSize)() * 13);
|
|
57
41
|
|
|
58
42
|
exports.CardContent = CardContent;
|
|
59
43
|
|
|
60
|
-
var TeamName =
|
|
44
|
+
var TeamName = _styled.default.h6(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n ", ";\n text-transform: none;\n overflow: hidden;\n max-height: 48px;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n"])), _typography.h600);
|
|
61
45
|
|
|
62
46
|
exports.TeamName = TeamName;
|
|
63
47
|
|
|
64
|
-
var MemberCount =
|
|
48
|
+
var MemberCount = _styled.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n color: ", ";\n margin-top: ", "px;\n"])), (0, _tokens.token)('color.text.subtlest', _colors.N200), (0, _constants.gridSize)() * 0.5);
|
|
65
49
|
|
|
66
50
|
exports.MemberCount = MemberCount;
|
|
67
51
|
|
|
68
|
-
var AvatarSection =
|
|
52
|
+
var AvatarSection = _styled.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n margin-top: ", "px;\n margin-left: -2px;\n"])), (0, _constants.gridSize)() * 2);
|
|
69
53
|
|
|
70
54
|
exports.AvatarSection = AvatarSection;
|
|
71
55
|
|
|
72
|
-
var DescriptionWrapper =
|
|
56
|
+
var DescriptionWrapper = _styled.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n margin-top: ", "px;\n align-items: center;\n display: flex;\n"])), (0, _constants.gridSize)() * 2);
|
|
73
57
|
|
|
74
58
|
exports.DescriptionWrapper = DescriptionWrapper;
|
|
75
59
|
|
|
76
|
-
var Description =
|
|
60
|
+
var Description = _styled.default.span(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n overflow: hidden;\n max-height: 60px;\n display: -webkit-box;\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n"])));
|
|
77
61
|
|
|
78
62
|
exports.Description = Description;
|
|
79
63
|
|
|
80
|
-
var ActionButtons =
|
|
64
|
+
var ActionButtons = _styled.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n width: calc(100% + 8px);\n display: flex;\n justify-content: space-between;\n margin: ", "px -", "px 0 -", "px;\n background-color: ", ";\n"])), (0, _constants.gridSize)() * 3, (0, _constants.gridSize)() * 3, (0, _constants.gridSize)(), (0, _tokens.token)('elevation.surface.overlay', 'hsla(0, 100%, 100%, 0.2)'));
|
|
81
65
|
|
|
82
66
|
exports.ActionButtons = ActionButtons;
|
|
83
67
|
|
|
84
|
-
var WrappedButton =
|
|
68
|
+
var WrappedButton = _styled.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n flex-basis: 0;\n flex-grow: 1;\n margin-left: 8px;\n"])));
|
|
85
69
|
|
|
86
70
|
exports.WrappedButton = WrappedButton;
|
|
87
71
|
|
|
88
|
-
var MoreButton =
|
|
72
|
+
var MoreButton = _styled.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n margin-left: 8px;\n"])));
|
|
89
73
|
|
|
90
74
|
exports.MoreButton = MoreButton;
|
|
91
75
|
|
|
92
|
-
var LoadingWrapper =
|
|
76
|
+
var LoadingWrapper = _styled.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n text-align: center;\n margin-top: ", "px;\n"])), (0, _constants.gridSize)() * 5); // export const LoadingTeamName = styled.div`
|
|
93
77
|
// width: 175px;
|
|
94
78
|
// height: ${gridSize () *3)px;
|
|
95
79
|
// border-radius: ${borderRadius}px;
|
|
@@ -59,7 +59,7 @@ var createEvent = function createEvent(eventType, action, actionSubject, actionS
|
|
|
59
59
|
actionSubjectId: actionSubjectId,
|
|
60
60
|
attributes: _objectSpread(_objectSpread({
|
|
61
61
|
packageName: "@atlaskit/profilecard",
|
|
62
|
-
packageVersion: "
|
|
62
|
+
packageVersion: "18.0.0"
|
|
63
63
|
}, attributes), {}, {
|
|
64
64
|
firedAt: Math.round((0, _performance.getPageTime)())
|
|
65
65
|
})
|
package/dist/cjs/version.json
CHANGED
|
@@ -1,4 +1,7 @@
|
|
|
1
|
-
import
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { keyframes } from '@emotion/core';
|
|
4
|
+
import styled from '@emotion/styled';
|
|
2
5
|
import { borderRadius, fontSizeSmall, gridSize } from '@atlaskit/theme/constants';
|
|
3
6
|
import { token } from '@atlaskit/tokens';
|
|
4
7
|
import { appLabelBgColor, appLabelTextColor, bgColor, boxShadow, headerBgColor, headerBgColorDisabledUser, headerTextColor, headerTextColorInactive, labelIconColor, labelTextColor } from './constants';
|
|
@@ -23,7 +26,7 @@ const kudosButtonAnimationTransformation = keyframes`{
|
|
|
23
26
|
0% { transform: translate(-80px, -50px); }
|
|
24
27
|
100% { transform: translate(90px, -70px); }
|
|
25
28
|
}`;
|
|
26
|
-
export const
|
|
29
|
+
export const KudosBlobAnimationStyle = styled.div`
|
|
27
30
|
display: none;
|
|
28
31
|
height: 150px;
|
|
29
32
|
width: 150px;
|
|
@@ -40,9 +43,15 @@ export const KudosBlobAnimation = styled.div`
|
|
|
40
43
|
);
|
|
41
44
|
overflow: hidden;
|
|
42
45
|
`;
|
|
46
|
+
export const KudosBlobAnimation = props => /*#__PURE__*/React.createElement(KudosBlobAnimationStyle, _extends({
|
|
47
|
+
className: "kudos-blob-animation"
|
|
48
|
+
}, props));
|
|
43
49
|
export const AnimatedKudosButton = styled.div`
|
|
44
50
|
margin-left: ${gridSize}px;
|
|
45
|
-
|
|
51
|
+
|
|
52
|
+
/* Need babel-plugin-emotion to use component selector */
|
|
53
|
+
/* Previously with styled-components: &:hover {KudosBlobAnimation} { */
|
|
54
|
+
&:hover .kudos-blob-animation {
|
|
46
55
|
display: block;
|
|
47
56
|
}
|
|
48
57
|
|
|
@@ -166,11 +175,7 @@ export const CardContainer = styled.div`
|
|
|
166
175
|
box-sizing: content-box;
|
|
167
176
|
padding: ${gridSize() * 3}px;
|
|
168
177
|
${props => {
|
|
169
|
-
|
|
170
|
-
return '';
|
|
171
|
-
}
|
|
172
|
-
|
|
173
|
-
return css`
|
|
178
|
+
return props.withoutElevation ? '' : `
|
|
174
179
|
box-shadow: ${boxShadow};
|
|
175
180
|
border-radius: ${borderRadius}px;
|
|
176
181
|
`;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import styled
|
|
1
|
+
import styled from '@emotion/styled';
|
|
2
2
|
import { N20, N200 } from '@atlaskit/theme/colors';
|
|
3
3
|
import { borderRadius, gridSize } from '@atlaskit/theme/constants';
|
|
4
4
|
import { h600 } from '@atlaskit/theme/typography';
|
|
@@ -15,29 +15,10 @@ export const CardWrapper = styled.div`
|
|
|
15
15
|
-webkit-font-smoothing: antialiased;
|
|
16
16
|
-moz-osx-font-smoothing: grayscale;
|
|
17
17
|
`;
|
|
18
|
-
const loadingImage = css`
|
|
19
|
-
background-color: ${token('color.background.neutral', N20)};
|
|
20
|
-
`;
|
|
21
|
-
const defaultImage = css`
|
|
22
|
-
background-color: ${teamHeaderBgColor};
|
|
23
|
-
`;
|
|
24
18
|
export const CardHeader = styled.div`
|
|
25
|
-
${props => {
|
|
26
|
-
if (props.isLoading) {
|
|
27
|
-
return loadingImage;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
if (props.image) {
|
|
31
|
-
return css`
|
|
32
|
-
background-image: url('${props.image}');
|
|
33
|
-
background-size: cover;
|
|
34
|
-
background-position: center;
|
|
35
|
-
`;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
return defaultImage;
|
|
39
|
-
}};
|
|
19
|
+
background-color: ${props => props.isLoading ? token('color.background.neutral', N20) : props.image ? `url('${props.image}')` : teamHeaderBgColor};
|
|
40
20
|
background-repeat: no-repeat;
|
|
21
|
+
background-position: center;
|
|
41
22
|
background-size: cover;
|
|
42
23
|
box-sizing: content-box;
|
|
43
24
|
height: ${gridSize() * 16}px;
|
|
@@ -38,7 +38,7 @@ const createEvent = (eventType, action, actionSubject, actionSubjectId, attribut
|
|
|
38
38
|
actionSubjectId,
|
|
39
39
|
attributes: {
|
|
40
40
|
packageName: "@atlaskit/profilecard",
|
|
41
|
-
packageVersion: "
|
|
41
|
+
packageVersion: "18.0.0",
|
|
42
42
|
...attributes,
|
|
43
43
|
firedAt: Math.round(getPageTime())
|
|
44
44
|
}
|
package/dist/es2019/version.json
CHANGED
package/dist/esm/styled/Card.js
CHANGED
|
@@ -1,8 +1,11 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
1
2
|
import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
|
|
2
3
|
|
|
3
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22
|
|
4
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22;
|
|
4
5
|
|
|
5
|
-
import
|
|
6
|
+
import React from 'react';
|
|
7
|
+
import { keyframes } from '@emotion/core';
|
|
8
|
+
import styled from '@emotion/styled';
|
|
6
9
|
import { borderRadius, fontSizeSmall, gridSize } from '@atlaskit/theme/constants';
|
|
7
10
|
import { token } from '@atlaskit/tokens';
|
|
8
11
|
import { appLabelBgColor, appLabelTextColor, bgColor, boxShadow, headerBgColor, headerBgColorDisabledUser, headerTextColor, headerTextColorInactive, labelIconColor, labelTextColor } from './constants';
|
|
@@ -16,8 +19,13 @@ export var CardWrapper = styled.div(_templateObject2 || (_templateObject2 = _tag
|
|
|
16
19
|
export var ProfileImage = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n position: absolute;\n top: ", "px;\n left: ", "px;\n"])), gridSize() * 3, gridSize() * 3);
|
|
17
20
|
export var ActionsFlexSpacer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n flex: 1 0 auto;\n"])));
|
|
18
21
|
var kudosButtonAnimationTransformation = keyframes(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["{\n 0% { transform: translate(-80px, -50px); }\n 100% { transform: translate(90px, -70px); }\n}"])));
|
|
19
|
-
export var
|
|
20
|
-
export var
|
|
22
|
+
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, token('color.background.information.pressed', '#85B8FF'), token('color.background.discovery.pressed', '#B8ACF6'));
|
|
23
|
+
export var KudosBlobAnimation = function KudosBlobAnimation(props) {
|
|
24
|
+
return /*#__PURE__*/React.createElement(KudosBlobAnimationStyle, _extends({
|
|
25
|
+
className: "kudos-blob-animation"
|
|
26
|
+
}, props));
|
|
27
|
+
};
|
|
28
|
+
export var AnimatedKudosButton = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n margin-left: ", "px;\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"])), gridSize, borderRadius);
|
|
21
29
|
export var ActionButtonGroup = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n user-select: none;\n margin: ", "px 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: ", "px;\n\n &:first-child {\n margin-left: 0;\n }\n }\n"])), 2 * gridSize(), gridSize);
|
|
22
30
|
export var OverflowActionButtonsWrapper = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n display: inline-block;\n width: 32px;\n height: 32px;\n margin-left: ", "px;\n"])), gridSize);
|
|
23
31
|
export var CardContent = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n min-height: ", "px;\n"])), gridSize() * 17);
|
|
@@ -38,12 +46,8 @@ export var CardContainer = styled.div(_templateObject19 || (_templateObject19 =
|
|
|
38
46
|
}, function (props) {
|
|
39
47
|
return props.isDisabledUser ? headerBgColorDisabledUser : headerBgColor;
|
|
40
48
|
}, gridSize() * 12, gridSize() * 3, function (props) {
|
|
41
|
-
|
|
42
|
-
return '';
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
return css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n box-shadow: ", ";\n border-radius: ", "px;\n "])), boxShadow, borderRadius);
|
|
49
|
+
return props.withoutElevation ? '' : "\n box-shadow: ".concat(boxShadow, ";\n border-radius: ").concat(borderRadius, "px;\n ");
|
|
46
50
|
});
|
|
47
|
-
export var DetailsLabel = styled.div(
|
|
48
|
-
export var DetailsLabelIcon = styled.div(
|
|
49
|
-
export var DetailsLabelText = styled.span(
|
|
51
|
+
export var DetailsLabel = styled.div(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n line-height: ", "px;\n font-size: ", "px;\n margin: ", "px 0 0 0;\n white-space: nowrap;\n\n & + & {\n margin-top: ", "px;\n }\n"])), gridSize() * 3, gridSize() * 1.5, gridSize() * 2, gridSize() / 4);
|
|
52
|
+
export var DetailsLabelIcon = styled.div(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n display: flex;\n flex-shrink: 0;\n color: ", ";\n width: ", "px;\n height: ", "px;\n padding: ", "px;\n vertical-align: top;\n\n svg {\n width: 100%;\n height: 100%;\n }\n"])), labelIconColor, gridSize() * 2, gridSize() * 2, gridSize() / 2);
|
|
53
|
+
export var DetailsLabelText = styled.span(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n overflow: hidden;\n text-overflow: ellipsis;\n color: ", ";\n padding-left: ", "px;\n"])), labelTextColor, gridSize() / 2);
|
package/dist/esm/styled/Error.js
CHANGED
|
@@ -2,7 +2,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
|
|
|
2
2
|
|
|
3
3
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
|
|
4
4
|
|
|
5
|
-
import styled from 'styled
|
|
5
|
+
import styled from '@emotion/styled';
|
|
6
6
|
import { N200 } from '@atlaskit/theme/colors';
|
|
7
7
|
import { gridSize } from '@atlaskit/theme/constants';
|
|
8
8
|
import { h400 } from '@atlaskit/theme/typography';
|
|
@@ -2,7 +2,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
|
|
|
2
2
|
|
|
3
3
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
|
|
4
4
|
|
|
5
|
-
import styled from 'styled
|
|
5
|
+
import styled from '@emotion/styled';
|
|
6
6
|
import { gridSize } from '@atlaskit/theme/constants';
|
|
7
7
|
import { appLabelTextColor } from './constants';
|
|
8
8
|
export var ReportingLinesSection = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n // Minor left margin to align better with existing icon fields\n margin-left: ", "px;\n margin-top: ", "px;\n"])), gridSize() / 2, gridSize());
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
|
|
2
2
|
|
|
3
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13
|
|
3
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
|
|
4
4
|
|
|
5
|
-
import styled
|
|
5
|
+
import styled from '@emotion/styled';
|
|
6
6
|
import { N20, N200 } from '@atlaskit/theme/colors';
|
|
7
7
|
import { borderRadius, gridSize } from '@atlaskit/theme/constants';
|
|
8
8
|
import { h600 } from '@atlaskit/theme/typography';
|
|
@@ -10,29 +10,19 @@ import { token } from '@atlaskit/tokens';
|
|
|
10
10
|
import { bgColor, teamHeaderBgColor } from './constants';
|
|
11
11
|
export var CardTriggerWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: inherit;\n"])));
|
|
12
12
|
export var CardWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n background-color: ", ";\n border-radius: ", "px;\n width: ", "px;\n position: relative;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n"])), bgColor, borderRadius, gridSize() * 40);
|
|
13
|
-
var
|
|
14
|
-
|
|
15
|
-
export var CardHeader = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n ", ";\n background-repeat: no-repeat;\n background-size: cover;\n box-sizing: content-box;\n height: ", "px;\n"])), function (props) {
|
|
16
|
-
if (props.isLoading) {
|
|
17
|
-
return loadingImage;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
if (props.image) {
|
|
21
|
-
return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n background-image: url('", "');\n background-size: cover;\n background-position: center;\n "])), props.image);
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
return defaultImage;
|
|
13
|
+
export var CardHeader = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n background-color: ", ";\n background-repeat: no-repeat;\n background-position: center;\n background-size: cover;\n box-sizing: content-box;\n height: ", "px;\n"])), function (props) {
|
|
14
|
+
return props.isLoading ? token('color.background.neutral', N20) : props.image ? "url('".concat(props.image, "')") : teamHeaderBgColor;
|
|
25
15
|
}, gridSize() * 16);
|
|
26
|
-
export var CardContent = styled.div(
|
|
27
|
-
export var TeamName = styled.h6(
|
|
28
|
-
export var MemberCount = styled.div(
|
|
29
|
-
export var AvatarSection = styled.div(
|
|
30
|
-
export var DescriptionWrapper = styled.div(
|
|
31
|
-
export var Description = styled.span(
|
|
32
|
-
export var ActionButtons = styled.div(
|
|
33
|
-
export var WrappedButton = styled.div(
|
|
34
|
-
export var MoreButton = styled.div(
|
|
35
|
-
export var LoadingWrapper = styled.div(
|
|
16
|
+
export var CardContent = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n padding: ", "px;\n min-height: ", "px;\n"])), gridSize() * 3, gridSize() * 13);
|
|
17
|
+
export var TeamName = styled.h6(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n ", ";\n text-transform: none;\n overflow: hidden;\n max-height: 48px;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n"])), h600);
|
|
18
|
+
export var MemberCount = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n color: ", ";\n margin-top: ", "px;\n"])), token('color.text.subtlest', N200), gridSize() * 0.5);
|
|
19
|
+
export var AvatarSection = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n margin-top: ", "px;\n margin-left: -2px;\n"])), gridSize() * 2);
|
|
20
|
+
export var DescriptionWrapper = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n margin-top: ", "px;\n align-items: center;\n display: flex;\n"])), gridSize() * 2);
|
|
21
|
+
export var Description = styled.span(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n overflow: hidden;\n max-height: 60px;\n display: -webkit-box;\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n"])));
|
|
22
|
+
export var ActionButtons = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n width: calc(100% + 8px);\n display: flex;\n justify-content: space-between;\n margin: ", "px -", "px 0 -", "px;\n background-color: ", ";\n"])), gridSize() * 3, gridSize() * 3, gridSize(), token('elevation.surface.overlay', 'hsla(0, 100%, 100%, 0.2)'));
|
|
23
|
+
export var WrappedButton = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n flex-basis: 0;\n flex-grow: 1;\n margin-left: 8px;\n"])));
|
|
24
|
+
export var MoreButton = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n margin-left: 8px;\n"])));
|
|
25
|
+
export var LoadingWrapper = styled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n text-align: center;\n margin-top: ", "px;\n"])), gridSize() * 5); // export const LoadingTeamName = styled.div`
|
|
36
26
|
// width: 175px;
|
|
37
27
|
// height: ${gridSize () *3)px;
|
|
38
28
|
// border-radius: ${borderRadius}px;
|
|
@@ -48,7 +48,7 @@ var createEvent = function createEvent(eventType, action, actionSubject, actionS
|
|
|
48
48
|
actionSubjectId: actionSubjectId,
|
|
49
49
|
attributes: _objectSpread(_objectSpread({
|
|
50
50
|
packageName: "@atlaskit/profilecard",
|
|
51
|
-
packageVersion: "
|
|
51
|
+
packageVersion: "18.0.0"
|
|
52
52
|
}, attributes), {}, {
|
|
53
53
|
firedAt: Math.round(getPageTime())
|
|
54
54
|
})
|
package/dist/esm/version.json
CHANGED
|
@@ -1,31 +1,99 @@
|
|
|
1
|
-
|
|
1
|
+
import React from 'react';
|
|
2
2
|
interface FullNameLabelProps {
|
|
3
3
|
noMeta?: boolean;
|
|
4
4
|
isDisabledAccount?: boolean;
|
|
5
5
|
}
|
|
6
|
-
export declare const CardContainerEmpty: import("styled
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
export declare const
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
export declare const
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
export declare const
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
export declare const
|
|
6
|
+
export declare const CardContainerEmpty: import("@emotion/styled").StyledComponent<{
|
|
7
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
8
|
+
as?: React.ElementType<any> | undefined;
|
|
9
|
+
}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
10
|
+
export declare const CardWrapper: import("@emotion/styled").StyledComponent<{
|
|
11
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
12
|
+
as?: React.ElementType<any> | undefined;
|
|
13
|
+
}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
14
|
+
export declare const ProfileImage: import("@emotion/styled").StyledComponent<{
|
|
15
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
16
|
+
as?: React.ElementType<any> | undefined;
|
|
17
|
+
}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
18
|
+
export declare const ActionsFlexSpacer: import("@emotion/styled").StyledComponent<{
|
|
19
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
20
|
+
as?: React.ElementType<any> | undefined;
|
|
21
|
+
}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
22
|
+
export declare const KudosBlobAnimationStyle: import("@emotion/styled").StyledComponent<{
|
|
23
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
24
|
+
as?: React.ElementType<any> | undefined;
|
|
25
|
+
}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
26
|
+
export declare const KudosBlobAnimation: React.FC;
|
|
27
|
+
export declare const AnimatedKudosButton: import("@emotion/styled").StyledComponent<{
|
|
28
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
29
|
+
as?: React.ElementType<any> | undefined;
|
|
30
|
+
}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
31
|
+
export declare const ActionButtonGroup: import("@emotion/styled").StyledComponent<{
|
|
32
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
33
|
+
as?: React.ElementType<any> | undefined;
|
|
34
|
+
}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
35
|
+
export declare const OverflowActionButtonsWrapper: import("@emotion/styled").StyledComponent<{
|
|
36
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
37
|
+
as?: React.ElementType<any> | undefined;
|
|
38
|
+
}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
39
|
+
export declare const CardContent: import("@emotion/styled").StyledComponent<{
|
|
40
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
41
|
+
as?: React.ElementType<any> | undefined;
|
|
42
|
+
}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
43
|
+
export declare const DetailsGroup: import("@emotion/styled").StyledComponent<{
|
|
44
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
45
|
+
as?: React.ElementType<any> | undefined;
|
|
46
|
+
}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
47
|
+
export declare const DisabledInfo: import("@emotion/styled").StyledComponent<{
|
|
48
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
49
|
+
as?: React.ElementType<any> | undefined;
|
|
50
|
+
}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
51
|
+
export declare const FullNameLabel: import("@emotion/styled").StyledComponent<{
|
|
52
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
53
|
+
as?: React.ElementType<any> | undefined;
|
|
54
|
+
} & FullNameLabelProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
|
|
55
|
+
export declare const LozengeWrapper: import("@emotion/styled").StyledComponent<{
|
|
56
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
57
|
+
as?: React.ElementType<any> | undefined;
|
|
58
|
+
}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
59
|
+
export declare const CustomLozengeContainer: import("@emotion/styled").StyledComponent<{
|
|
60
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
61
|
+
as?: React.ElementType<any> | undefined;
|
|
62
|
+
} & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
|
|
63
|
+
children?: React.ReactNode;
|
|
64
|
+
} & {
|
|
65
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
66
|
+
}, {}, {}>;
|
|
67
|
+
export declare const JobTitleLabel: import("@emotion/styled").StyledComponent<{
|
|
68
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
69
|
+
as?: React.ElementType<any> | undefined;
|
|
70
|
+
}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
|
|
71
|
+
export declare const AppTitleLabel: import("@emotion/styled").StyledComponent<{
|
|
72
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
73
|
+
as?: React.ElementType<any> | undefined;
|
|
74
|
+
}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
|
|
75
|
+
export declare const SpinnerContainer: import("@emotion/styled").StyledComponent<{
|
|
76
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
77
|
+
as?: React.ElementType<any> | undefined;
|
|
78
|
+
}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
23
79
|
interface CardContainerProps {
|
|
24
80
|
isDisabledUser?: boolean;
|
|
25
81
|
withoutElevation?: boolean;
|
|
26
82
|
}
|
|
27
|
-
export declare const CardContainer: import("styled
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
83
|
+
export declare const CardContainer: import("@emotion/styled").StyledComponent<{
|
|
84
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
85
|
+
as?: React.ElementType<any> | undefined;
|
|
86
|
+
} & CardContainerProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
87
|
+
export declare const DetailsLabel: import("@emotion/styled").StyledComponent<{
|
|
88
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
89
|
+
as?: React.ElementType<any> | undefined;
|
|
90
|
+
}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
91
|
+
export declare const DetailsLabelIcon: import("@emotion/styled").StyledComponent<{
|
|
92
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
93
|
+
as?: React.ElementType<any> | undefined;
|
|
94
|
+
}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
95
|
+
export declare const DetailsLabelText: import("@emotion/styled").StyledComponent<{
|
|
96
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
97
|
+
as?: React.ElementType<any> | undefined;
|
|
98
|
+
}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
|
|
31
99
|
export {};
|
|
@@ -1,6 +1,21 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
export declare const ErrorWrapper: import("
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
export declare const
|
|
2
|
+
export declare const ErrorWrapper: import("@emotion/styled").StyledComponent<{
|
|
3
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
4
|
+
as?: import("react").ElementType<any> | undefined;
|
|
5
|
+
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
6
|
+
export declare const ErrorTitle: import("@emotion/styled").StyledComponent<{
|
|
7
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
8
|
+
as?: import("react").ElementType<any> | undefined;
|
|
9
|
+
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
|
|
10
|
+
export declare const ErrorText: import("@emotion/styled").StyledComponent<{
|
|
11
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
12
|
+
as?: import("react").ElementType<any> | undefined;
|
|
13
|
+
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
|
|
14
|
+
export declare const TeamErrorTitle: import("@emotion/styled").StyledComponent<{
|
|
15
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
16
|
+
as?: import("react").ElementType<any> | undefined;
|
|
17
|
+
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
|
|
18
|
+
export declare const TeamErrorText: import("@emotion/styled").StyledComponent<{
|
|
19
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
20
|
+
as?: import("react").ElementType<any> | undefined;
|
|
21
|
+
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
|
|
@@ -1,6 +1,21 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
export declare const ReportingLinesSection: import("styled
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
export declare const
|
|
2
|
+
export declare const ReportingLinesSection: import("@emotion/styled").StyledComponent<{
|
|
3
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
4
|
+
as?: import("react").ElementType<any> | undefined;
|
|
5
|
+
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
6
|
+
export declare const ReportingLinesHeading: import("@emotion/styled").StyledComponent<{
|
|
7
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
8
|
+
as?: import("react").ElementType<any> | undefined;
|
|
9
|
+
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
|
|
10
|
+
export declare const ManagerSection: import("@emotion/styled").StyledComponent<{
|
|
11
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
12
|
+
as?: import("react").ElementType<any> | undefined;
|
|
13
|
+
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
14
|
+
export declare const ManagerName: import("@emotion/styled").StyledComponent<{
|
|
15
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
16
|
+
as?: import("react").ElementType<any> | undefined;
|
|
17
|
+
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
|
|
18
|
+
export declare const OffsetWrapper: import("@emotion/styled").StyledComponent<{
|
|
19
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
20
|
+
as?: import("react").ElementType<any> | undefined;
|
|
21
|
+
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
@@ -1,20 +1,56 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
export declare const CardTriggerWrapper: import("styled
|
|
3
|
-
|
|
4
|
-
|
|
2
|
+
export declare const CardTriggerWrapper: import("@emotion/styled").StyledComponent<{
|
|
3
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
4
|
+
as?: import("react").ElementType<any> | undefined;
|
|
5
|
+
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
6
|
+
export declare const CardWrapper: import("@emotion/styled").StyledComponent<{
|
|
7
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
8
|
+
as?: import("react").ElementType<any> | undefined;
|
|
9
|
+
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
10
|
+
export declare const CardHeader: import("@emotion/styled").StyledComponent<{
|
|
11
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
12
|
+
as?: import("react").ElementType<any> | undefined;
|
|
13
|
+
} & {
|
|
5
14
|
image?: string | undefined;
|
|
6
15
|
isLoading?: boolean | undefined;
|
|
7
|
-
},
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
export declare const TeamName: import("
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
export declare const
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
export declare const
|
|
16
|
+
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
17
|
+
export declare const CardContent: import("@emotion/styled").StyledComponent<{
|
|
18
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
19
|
+
as?: import("react").ElementType<any> | undefined;
|
|
20
|
+
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
21
|
+
export declare const TeamName: import("@emotion/styled").StyledComponent<{
|
|
22
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
23
|
+
as?: import("react").ElementType<any> | undefined;
|
|
24
|
+
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
|
|
25
|
+
export declare const MemberCount: import("@emotion/styled").StyledComponent<{
|
|
26
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
27
|
+
as?: import("react").ElementType<any> | undefined;
|
|
28
|
+
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
29
|
+
export declare const AvatarSection: import("@emotion/styled").StyledComponent<{
|
|
30
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
31
|
+
as?: import("react").ElementType<any> | undefined;
|
|
32
|
+
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
33
|
+
export declare const DescriptionWrapper: import("@emotion/styled").StyledComponent<{
|
|
34
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
35
|
+
as?: import("react").ElementType<any> | undefined;
|
|
36
|
+
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
37
|
+
export declare const Description: import("@emotion/styled").StyledComponent<{
|
|
38
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
39
|
+
as?: import("react").ElementType<any> | undefined;
|
|
40
|
+
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
|
|
41
|
+
export declare const ActionButtons: import("@emotion/styled").StyledComponent<{
|
|
42
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
43
|
+
as?: import("react").ElementType<any> | undefined;
|
|
44
|
+
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
45
|
+
export declare const WrappedButton: import("@emotion/styled").StyledComponent<{
|
|
46
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
47
|
+
as?: import("react").ElementType<any> | undefined;
|
|
48
|
+
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
49
|
+
export declare const MoreButton: import("@emotion/styled").StyledComponent<{
|
|
50
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
51
|
+
as?: import("react").ElementType<any> | undefined;
|
|
52
|
+
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
53
|
+
export declare const LoadingWrapper: import("@emotion/styled").StyledComponent<{
|
|
54
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
55
|
+
as?: import("react").ElementType<any> | undefined;
|
|
56
|
+
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/profilecard",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "18.0.0",
|
|
4
4
|
"description": "A React component to display a card with user information.",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -41,17 +41,19 @@
|
|
|
41
41
|
"@atlaskit/analytics-next": "^8.2.0",
|
|
42
42
|
"@atlaskit/avatar": "^21.1.0",
|
|
43
43
|
"@atlaskit/avatar-group": "^9.1.0",
|
|
44
|
-
"@atlaskit/button": "^16.
|
|
44
|
+
"@atlaskit/button": "^16.5.0",
|
|
45
45
|
"@atlaskit/dropdown-menu": "^11.5.0",
|
|
46
|
-
"@atlaskit/give-kudos": "^0.
|
|
46
|
+
"@atlaskit/give-kudos": "^1.0.0",
|
|
47
47
|
"@atlaskit/icon": "^21.11.0",
|
|
48
48
|
"@atlaskit/lozenge": "^11.3.0",
|
|
49
49
|
"@atlaskit/menu": "^1.4.0",
|
|
50
50
|
"@atlaskit/popup": "^1.5.0",
|
|
51
|
-
"@atlaskit/spinner": "^15.
|
|
51
|
+
"@atlaskit/spinner": "^15.3.0",
|
|
52
52
|
"@atlaskit/theme": "^12.2.0",
|
|
53
53
|
"@atlaskit/tokens": "^0.11.0",
|
|
54
54
|
"@babel/runtime": "^7.0.0",
|
|
55
|
+
"@emotion/core": "^10.0.9",
|
|
56
|
+
"@emotion/styled": "^11.0.0",
|
|
55
57
|
"date-fns": "^2.17.0",
|
|
56
58
|
"lodash": "^4.17.21",
|
|
57
59
|
"lru-fast": "^0.2.2",
|
|
@@ -59,15 +61,14 @@
|
|
|
59
61
|
},
|
|
60
62
|
"peerDependencies": {
|
|
61
63
|
"react": "^16.8.0",
|
|
62
|
-
"react-dom": "^16.8.0"
|
|
63
|
-
"styled-components": "^3.2.6"
|
|
64
|
+
"react-dom": "^16.8.0"
|
|
64
65
|
},
|
|
65
66
|
"devDependencies": {
|
|
66
67
|
"@atlaskit/docs": "*",
|
|
67
68
|
"@atlaskit/dynamic-table": "^14.8.0",
|
|
68
|
-
"@atlaskit/flag": "^
|
|
69
|
+
"@atlaskit/flag": "^15.0.0",
|
|
69
70
|
"@atlaskit/inline-edit": "^12.2.0",
|
|
70
|
-
"@atlaskit/select": "^
|
|
71
|
+
"@atlaskit/select": "^16.0.0",
|
|
71
72
|
"@atlaskit/util-data-test": "^17.6.0",
|
|
72
73
|
"@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
|
|
73
74
|
"@testing-library/react": "^12.1.5",
|
package/report.api.md
CHANGED
|
@@ -8,6 +8,7 @@
|
|
|
8
8
|
### Table of contents
|
|
9
9
|
|
|
10
10
|
- [Main Entry Types](#main-entry-types)
|
|
11
|
+
- [Peer Dependencies](#peer-dependencies)
|
|
11
12
|
|
|
12
13
|
### Main Entry Types
|
|
13
14
|
|
|
@@ -705,3 +706,16 @@ export interface WithOuterListenersProps {
|
|
|
705
706
|
```
|
|
706
707
|
|
|
707
708
|
<!--SECTION END: Main Entry Types-->
|
|
709
|
+
|
|
710
|
+
### Peer Dependencies
|
|
711
|
+
|
|
712
|
+
<!--SECTION START: Peer Dependencies-->
|
|
713
|
+
|
|
714
|
+
```json
|
|
715
|
+
{
|
|
716
|
+
"react": "^16.8.0",
|
|
717
|
+
"react-dom": "^16.8.0"
|
|
718
|
+
}
|
|
719
|
+
```
|
|
720
|
+
|
|
721
|
+
<!--SECTION END: Peer Dependencies-->
|