@atlaskit/smart-card 25.2.0 → 25.2.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 +7 -0
- package/dist/cjs/version.json +1 -1
- package/dist/cjs/view/InlineCard/Icon.js +22 -7
- package/dist/cjs/view/InlineCard/IconAndTitleLayout/index.js +1 -1
- package/dist/es2019/version.json +1 -1
- package/dist/es2019/view/InlineCard/Icon.js +20 -38
- package/dist/es2019/view/InlineCard/IconAndTitleLayout/index.js +1 -1
- package/dist/esm/version.json +1 -1
- package/dist/esm/view/InlineCard/Icon.js +22 -6
- package/dist/esm/view/InlineCard/IconAndTitleLayout/index.js +1 -1
- package/dist/types/view/InlineCard/Icon.d.ts +8 -9
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,12 @@
|
|
|
1
1
|
# @atlaskit/smart-card
|
|
2
2
|
|
|
3
|
+
## 25.2.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`03394282a26`](https://bitbucket.org/atlassian/atlassian-frontend/commits/03394282a26) - The change migrates `Shimmer` component to use the `Skeleton` component from the common package
|
|
8
|
+
- Updated dependencies
|
|
9
|
+
|
|
3
10
|
## 25.2.0
|
|
4
11
|
|
|
5
12
|
### Minor Changes
|
package/dist/cjs/version.json
CHANGED
|
@@ -7,22 +7,37 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
exports.Shimmer = exports.Icon = exports.AKIconWrapper = void 0;
|
|
8
8
|
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
9
9
|
var _styled = _interopRequireDefault(require("@emotion/styled"));
|
|
10
|
-
var
|
|
11
|
-
var
|
|
12
|
-
var
|
|
13
|
-
|
|
10
|
+
var _linkingCommon = require("@atlaskit/linking-common");
|
|
11
|
+
var _react = _interopRequireDefault(require("react"));
|
|
12
|
+
var _templateObject, _templateObject2;
|
|
14
13
|
// TODO: Figure out a more scalable/responsive solution
|
|
15
14
|
// for vertical alignment.
|
|
16
15
|
// Current rationale: vertically positioned at the top of
|
|
17
16
|
// the smart card container (when set to 0). Offset this
|
|
18
17
|
// to position it with appropriate whitespace from the top.
|
|
19
|
-
var Icon = _styled.default.img(
|
|
18
|
+
var Icon = _styled.default.img(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n height: 14px;\n width: 14px;\n margin-right: 4px;\n border-radius: 2px;\n user-select: none;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n"])));
|
|
20
19
|
|
|
21
20
|
// Used for 'untrue' icons which claim to be 16x16 but
|
|
22
21
|
// are less than that in height/width.
|
|
23
22
|
// TODO: Replace this override with proper AtlasKit solution.
|
|
24
23
|
exports.Icon = Icon;
|
|
25
|
-
var AKIconWrapper = _styled.default.span(
|
|
24
|
+
var AKIconWrapper = _styled.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n margin-right: -2px;\n"])));
|
|
26
25
|
exports.AKIconWrapper = AKIconWrapper;
|
|
27
|
-
var Shimmer =
|
|
26
|
+
var Shimmer = function Shimmer(_ref) {
|
|
27
|
+
var testId = _ref.testId;
|
|
28
|
+
var skeletonCustomStyles = {
|
|
29
|
+
position: 'absolute',
|
|
30
|
+
top: '50%',
|
|
31
|
+
left: '50%',
|
|
32
|
+
transform: 'translate(-50%, -50%)',
|
|
33
|
+
marginRight: 4
|
|
34
|
+
};
|
|
35
|
+
return /*#__PURE__*/_react.default.createElement(_linkingCommon.Skeleton, {
|
|
36
|
+
width: 14,
|
|
37
|
+
height: 14,
|
|
38
|
+
borderRadius: 2,
|
|
39
|
+
testId: testId,
|
|
40
|
+
style: skeletonCustomStyles
|
|
41
|
+
});
|
|
42
|
+
};
|
|
28
43
|
exports.Shimmer = Shimmer;
|
|
@@ -81,7 +81,7 @@ var IconAndTitleLayout = /*#__PURE__*/function (_React$Component) {
|
|
|
81
81
|
}),
|
|
82
82
|
errored: errored,
|
|
83
83
|
loading: /*#__PURE__*/_react.default.createElement(_Icon.Shimmer, {
|
|
84
|
-
|
|
84
|
+
testId: "".concat(testId, "-loading")
|
|
85
85
|
})
|
|
86
86
|
});
|
|
87
87
|
}
|
package/dist/es2019/version.json
CHANGED
|
@@ -1,14 +1,6 @@
|
|
|
1
1
|
import styled from '@emotion/styled';
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
0% {
|
|
5
|
-
background-position: -20px 0;
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
100% {
|
|
9
|
-
background-position: 20px 0;
|
|
10
|
-
}
|
|
11
|
-
`;
|
|
2
|
+
import { Skeleton } from '@atlaskit/linking-common';
|
|
3
|
+
import React from 'react';
|
|
12
4
|
|
|
13
5
|
// TODO: Figure out a more scalable/responsive solution
|
|
14
6
|
// for vertical alignment.
|
|
@@ -33,31 +25,21 @@ export const Icon = styled.img`
|
|
|
33
25
|
export const AKIconWrapper = styled.span`
|
|
34
26
|
margin-right: -2px;
|
|
35
27
|
`;
|
|
36
|
-
export const Shimmer =
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
background-repeat: no-repeat;
|
|
55
|
-
background-size: 40px 14px;
|
|
56
|
-
display: inline-block;
|
|
57
|
-
|
|
58
|
-
animation-duration: 1s;
|
|
59
|
-
animation-fill-mode: forwards;
|
|
60
|
-
animation-iteration-count: infinite;
|
|
61
|
-
animation-name: ${placeholderShimmer};
|
|
62
|
-
animation-timing-function: linear;
|
|
63
|
-
`;
|
|
28
|
+
export const Shimmer = ({
|
|
29
|
+
testId
|
|
30
|
+
}) => {
|
|
31
|
+
const skeletonCustomStyles = {
|
|
32
|
+
position: 'absolute',
|
|
33
|
+
top: '50%',
|
|
34
|
+
left: '50%',
|
|
35
|
+
transform: 'translate(-50%, -50%)',
|
|
36
|
+
marginRight: 4
|
|
37
|
+
};
|
|
38
|
+
return /*#__PURE__*/React.createElement(Skeleton, {
|
|
39
|
+
width: 14,
|
|
40
|
+
height: 14,
|
|
41
|
+
borderRadius: 2,
|
|
42
|
+
testId: testId,
|
|
43
|
+
style: skeletonCustomStyles
|
|
44
|
+
});
|
|
45
|
+
};
|
package/dist/esm/version.json
CHANGED
|
@@ -1,18 +1,34 @@
|
|
|
1
1
|
import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
|
|
2
|
-
var _templateObject, _templateObject2
|
|
2
|
+
var _templateObject, _templateObject2;
|
|
3
3
|
import styled from '@emotion/styled';
|
|
4
|
-
import {
|
|
5
|
-
|
|
4
|
+
import { Skeleton } from '@atlaskit/linking-common';
|
|
5
|
+
import React from 'react';
|
|
6
6
|
|
|
7
7
|
// TODO: Figure out a more scalable/responsive solution
|
|
8
8
|
// for vertical alignment.
|
|
9
9
|
// Current rationale: vertically positioned at the top of
|
|
10
10
|
// the smart card container (when set to 0). Offset this
|
|
11
11
|
// to position it with appropriate whitespace from the top.
|
|
12
|
-
export var Icon = styled.img(
|
|
12
|
+
export var Icon = styled.img(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n height: 14px;\n width: 14px;\n margin-right: 4px;\n border-radius: 2px;\n user-select: none;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n"])));
|
|
13
13
|
|
|
14
14
|
// Used for 'untrue' icons which claim to be 16x16 but
|
|
15
15
|
// are less than that in height/width.
|
|
16
16
|
// TODO: Replace this override with proper AtlasKit solution.
|
|
17
|
-
export var AKIconWrapper = styled.span(
|
|
18
|
-
export var Shimmer =
|
|
17
|
+
export var AKIconWrapper = styled.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n margin-right: -2px;\n"])));
|
|
18
|
+
export var Shimmer = function Shimmer(_ref) {
|
|
19
|
+
var testId = _ref.testId;
|
|
20
|
+
var skeletonCustomStyles = {
|
|
21
|
+
position: 'absolute',
|
|
22
|
+
top: '50%',
|
|
23
|
+
left: '50%',
|
|
24
|
+
transform: 'translate(-50%, -50%)',
|
|
25
|
+
marginRight: 4
|
|
26
|
+
};
|
|
27
|
+
return /*#__PURE__*/React.createElement(Skeleton, {
|
|
28
|
+
width: 14,
|
|
29
|
+
height: 14,
|
|
30
|
+
borderRadius: 2,
|
|
31
|
+
testId: testId,
|
|
32
|
+
style: skeletonCustomStyles
|
|
33
|
+
});
|
|
34
|
+
};
|
|
@@ -74,7 +74,7 @@ export var IconAndTitleLayout = /*#__PURE__*/function (_React$Component) {
|
|
|
74
74
|
}),
|
|
75
75
|
errored: errored,
|
|
76
76
|
loading: /*#__PURE__*/React.createElement(Shimmer, {
|
|
77
|
-
|
|
77
|
+
testId: "".concat(testId, "-loading")
|
|
78
78
|
})
|
|
79
79
|
});
|
|
80
80
|
}
|
|
@@ -1,13 +1,12 @@
|
|
|
1
|
-
|
|
1
|
+
import React from 'react';
|
|
2
2
|
export declare const Icon: import("@emotion/styled").StyledComponent<{
|
|
3
3
|
theme?: import("@emotion/react").Theme | undefined;
|
|
4
|
-
as?:
|
|
5
|
-
},
|
|
4
|
+
as?: React.ElementType<any> | undefined;
|
|
5
|
+
}, React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
|
|
6
6
|
export declare const AKIconWrapper: import("@emotion/styled").StyledComponent<{
|
|
7
7
|
theme?: import("@emotion/react").Theme | undefined;
|
|
8
|
-
as?:
|
|
9
|
-
},
|
|
10
|
-
export declare const Shimmer:
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
|
|
8
|
+
as?: React.ElementType<any> | undefined;
|
|
9
|
+
}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
|
|
10
|
+
export declare const Shimmer: ({ testId }: {
|
|
11
|
+
testId: string;
|
|
12
|
+
}) => JSX.Element;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/smart-card",
|
|
3
|
-
"version": "25.2.
|
|
3
|
+
"version": "25.2.1",
|
|
4
4
|
"description": "Smart card component",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
"@atlaskit/icon-object": "^6.2.0",
|
|
34
34
|
"@atlaskit/icon-priority": "^6.3.0",
|
|
35
35
|
"@atlaskit/in-product-testing": "^0.1.0",
|
|
36
|
-
"@atlaskit/linking-common": "^2.
|
|
36
|
+
"@atlaskit/linking-common": "^2.4.0",
|
|
37
37
|
"@atlaskit/logo": "^13.11.0",
|
|
38
38
|
"@atlaskit/lozenge": "^11.3.0",
|
|
39
39
|
"@atlaskit/media-common": "^4.0.0",
|
|
@@ -81,7 +81,7 @@
|
|
|
81
81
|
"@atlaskit/range": "^7.0.0",
|
|
82
82
|
"@atlaskit/section-message": "^6.3.0",
|
|
83
83
|
"@atlaskit/select": "^16.1.0",
|
|
84
|
-
"@atlaskit/table-tree": "^9.
|
|
84
|
+
"@atlaskit/table-tree": "^9.3.0",
|
|
85
85
|
"@atlaskit/tabs": "^13.3.0",
|
|
86
86
|
"@atlaskit/textarea": "^4.5.0",
|
|
87
87
|
"@atlaskit/textfield": "^5.3.0",
|