@atlaskit/smart-card 26.5.2 → 26.5.4

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.
Files changed (13) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/dist/cjs/version.json +1 -1
  3. package/dist/cjs/view/HoverCard/components/views/resolving/index.js +28 -7
  4. package/dist/cjs/view/HoverCard/components/views/resolving/styled.js +9 -3
  5. package/dist/es2019/version.json +1 -1
  6. package/dist/es2019/view/HoverCard/components/views/resolving/index.js +28 -7
  7. package/dist/es2019/view/HoverCard/components/views/resolving/styled.js +14 -0
  8. package/dist/esm/version.json +1 -1
  9. package/dist/esm/view/HoverCard/components/views/resolving/index.js +29 -8
  10. package/dist/esm/view/HoverCard/components/views/resolving/styled.js +6 -2
  11. package/dist/types/view/HoverCard/components/views/resolving/styled.d.ts +5 -2
  12. package/dist/types-ts4.5/view/HoverCard/components/views/resolving/styled.d.ts +5 -2
  13. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,18 @@
1
1
  # @atlaskit/smart-card
2
2
 
3
+ ## 26.5.4
4
+
5
+ ### Patch Changes
6
+
7
+ - [`2660603c726`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2660603c726) - [ux] A hover card loading state improvement is implemented: all elements except for actions would have a loading skeleton
8
+ - Updated dependencies
9
+
10
+ ## 26.5.3
11
+
12
+ ### Patch Changes
13
+
14
+ - Updated dependencies
15
+
3
16
  ## 26.5.2
4
17
 
5
18
  ### Patch Changes
package/dist/cjs/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/smart-card",
3
- "version": "26.5.2",
3
+ "version": "26.5.4",
4
4
  "sideEffects": false
5
5
  }
package/dist/cjs/view/HoverCard/components/views/resolving/index.js CHANGED
@@ -5,26 +5,47 @@ Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
7
  exports.default = void 0;
8
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
8
9
  var _react = require("@emotion/react");
9
10
  var _react2 = _interopRequireDefault(require("react"));
10
11
  var _loadingSkeleton = _interopRequireDefault(require("../../../../FlexibleCard/components/common/loading-skeleton"));
11
- var _FlexibleCard = _interopRequireDefault(require("../../../../FlexibleCard"));
12
- var _blocks = require("../../../../FlexibleCard/components/blocks");
13
12
  var _styled = require("../../../styled");
14
13
  var _styled2 = require("./styled");
14
+ var _actionGroup = _interopRequireDefault(require("../../../../FlexibleCard/components/blocks/action-group"));
15
+ var _blocks = require("../../../../FlexibleCard/components/blocks");
16
+ var _icon = _interopRequireDefault(require("../../../../FlexibleCard/components/elements/icon"));
15
17
  /** @jsx jsx */
16
18
 
17
19
  var HoverCardLoadingView = function HoverCardLoadingView(_ref) {
18
- var flexibleCardProps = _ref.flexibleCardProps,
19
- titleBlockProps = _ref.titleBlockProps;
20
+ var titleBlockProps = _ref.titleBlockProps;
21
+ var testId = 'hover-card-loading-view';
20
22
  var lineHeightRem = 1.25;
21
23
  var skeletonWidth = _styled.CARD_WIDTH_REM - 2;
24
+ var size = titleBlockProps.size,
25
+ actions = titleBlockProps.actions;
26
+ var actionGroup = (actions === null || actions === void 0 ? void 0 : actions.length) && (actions === null || actions === void 0 ? void 0 : actions.length) > 0 && (0, _react.jsx)(_actionGroup.default, {
27
+ items: actions,
28
+ visibleButtonsNum: 2
29
+ });
22
30
  return (0, _react.jsx)("div", {
23
31
  css: _styled2.loadingViewContainer,
24
- "data-testid": "hover-card-loading-view"
25
- }, (0, _react.jsx)(_FlexibleCard.default, flexibleCardProps, (0, _react.jsx)(_blocks.TitleBlock, titleBlockProps)), (0, _react.jsx)("div", {
32
+ "data-testid": testId
33
+ }, (0, _react.jsx)("div", {
26
34
  css: _styled2.skeletonContainer
27
- }, (0, _react.jsx)("span", null), (0, _react.jsx)(_loadingSkeleton.default, {
35
+ }, (0, _react.jsx)(_blocks.CustomBlock, (0, _extends2.default)({}, titleBlockProps, {
36
+ overrideCss: _styled2.titleBlockStyles,
37
+ testId: "".concat(testId, "-title-block")
38
+ }), (0, _react.jsx)(_icon.default, {
39
+ render: function render() {
40
+ return (0, _react.jsx)(_loadingSkeleton.default, null);
41
+ },
42
+ size: size
43
+ }), (0, _react.jsx)("span", {
44
+ css: (0, _styled2.getTitleStyles)(lineHeightRem),
45
+ "data-testid": "".concat(testId, "-title")
46
+ }, (0, _react.jsx)(_loadingSkeleton.default, {
47
+ height: lineHeightRem
48
+ })), actionGroup), (0, _react.jsx)(_loadingSkeleton.default, {
28
49
  width: skeletonWidth,
29
50
  height: lineHeightRem
30
51
  }), (0, _react.jsx)(_loadingSkeleton.default, {
package/dist/cjs/view/HoverCard/components/views/resolving/styled.js CHANGED
@@ -4,11 +4,17 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.skeletonContainer = exports.loadingViewContainer = void 0;
7
+ exports.titleBlockStyles = exports.skeletonContainer = exports.loadingViewContainer = exports.getTitleStyles = void 0;
8
8
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
9
9
  var _react = require("@emotion/react");
10
- var _templateObject, _templateObject2;
10
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
11
11
  var loadingViewContainer = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n"])));
12
12
  exports.loadingViewContainer = loadingViewContainer;
13
13
  var skeletonContainer = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n gap: 0.625rem;\n align-items: center;\n"])));
14
- exports.skeletonContainer = skeletonContainer;
14
+ exports.skeletonContainer = skeletonContainer;
15
+ var getTitleStyles = function getTitleStyles(height) {
16
+ return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n flex: 1 0 auto;\n height: ", "rem;\n\n span {\n width: 100%;\n }\n "])), height);
17
+ };
18
+ exports.getTitleStyles = getTitleStyles;
19
+ var titleBlockStyles = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n gap: 0.5rem;\n"])));
20
+ exports.titleBlockStyles = titleBlockStyles;
package/dist/es2019/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/smart-card",
3
- "version": "26.5.2",
3
+ "version": "26.5.4",
4
4
  "sideEffects": false
5
5
  }
package/dist/es2019/view/HoverCard/components/views/resolving/index.js CHANGED
@@ -1,23 +1,44 @@
1
+ import _extends from "@babel/runtime/helpers/extends";
1
2
  /** @jsx jsx */
2
3
  import { jsx } from '@emotion/react';
3
4
  import React from 'react';
4
5
  import LoadingSkeleton from '../../../../FlexibleCard/components/common/loading-skeleton';
5
- import FlexibleCard from '../../../../FlexibleCard';
6
- import { TitleBlock } from '../../../../FlexibleCard/components/blocks';
7
6
  import { CARD_WIDTH_REM } from '../../../styled';
8
- import { loadingViewContainer, skeletonContainer } from './styled';
7
+ import { getTitleStyles, loadingViewContainer, skeletonContainer, titleBlockStyles } from './styled';
8
+ import ActionGroup from '../../../../FlexibleCard/components/blocks/action-group';
9
+ import { CustomBlock } from '../../../../FlexibleCard/components/blocks';
10
+ import Icon from '../../../../FlexibleCard/components/elements/icon';
9
11
  const HoverCardLoadingView = ({
10
- flexibleCardProps,
11
12
  titleBlockProps
12
13
  }) => {
14
+ const testId = 'hover-card-loading-view';
13
15
  const lineHeightRem = 1.25;
14
16
  const skeletonWidth = CARD_WIDTH_REM - 2;
17
+ const {
18
+ size,
19
+ actions
20
+ } = titleBlockProps;
21
+ const actionGroup = (actions === null || actions === void 0 ? void 0 : actions.length) && (actions === null || actions === void 0 ? void 0 : actions.length) > 0 && jsx(ActionGroup, {
22
+ items: actions,
23
+ visibleButtonsNum: 2
24
+ });
15
25
  return jsx("div", {
16
26
  css: loadingViewContainer,
17
- "data-testid": "hover-card-loading-view"
18
- }, jsx(FlexibleCard, flexibleCardProps, jsx(TitleBlock, titleBlockProps)), jsx("div", {
27
+ "data-testid": testId
28
+ }, jsx("div", {
19
29
  css: skeletonContainer
20
- }, jsx("span", null), jsx(LoadingSkeleton, {
30
+ }, jsx(CustomBlock, _extends({}, titleBlockProps, {
31
+ overrideCss: titleBlockStyles,
32
+ testId: `${testId}-title-block`
33
+ }), jsx(Icon, {
34
+ render: () => jsx(LoadingSkeleton, null),
35
+ size: size
36
+ }), jsx("span", {
37
+ css: getTitleStyles(lineHeightRem),
38
+ "data-testid": `${testId}-title`
39
+ }, jsx(LoadingSkeleton, {
40
+ height: lineHeightRem
41
+ })), actionGroup), jsx(LoadingSkeleton, {
21
42
  width: skeletonWidth,
22
43
  height: lineHeightRem
23
44
  }), jsx(LoadingSkeleton, {
package/dist/es2019/view/HoverCard/components/views/resolving/styled.js CHANGED
@@ -8,4 +8,18 @@ export const skeletonContainer = css`
8
8
  flex-direction: column;
9
9
  gap: 0.625rem;
10
10
  align-items: center;
11
+ `;
12
+ export const getTitleStyles = height => {
13
+ return css`
14
+ flex: 1 0 auto;
15
+ height: ${height}rem;
16
+
17
+ span {
18
+ width: 100%;
19
+ }
20
+ `;
21
+ };
22
+ export const titleBlockStyles = css`
23
+ width: 100%;
24
+ gap: 0.5rem;
11
25
  `;
package/dist/esm/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/smart-card",
3
- "version": "26.5.2",
3
+ "version": "26.5.4",
4
4
  "sideEffects": false
5
5
  }
package/dist/esm/view/HoverCard/components/views/resolving/index.js CHANGED
@@ -1,22 +1,43 @@
1
+ import _extends from "@babel/runtime/helpers/extends";
1
2
  /** @jsx jsx */
2
3
  import { jsx } from '@emotion/react';
3
4
  import React from 'react';
4
5
  import LoadingSkeleton from '../../../../FlexibleCard/components/common/loading-skeleton';
5
- import FlexibleCard from '../../../../FlexibleCard';
6
- import { TitleBlock } from '../../../../FlexibleCard/components/blocks';
7
6
  import { CARD_WIDTH_REM } from '../../../styled';
8
- import { loadingViewContainer, skeletonContainer } from './styled';
7
+ import { getTitleStyles, loadingViewContainer, skeletonContainer, titleBlockStyles } from './styled';
8
+ import ActionGroup from '../../../../FlexibleCard/components/blocks/action-group';
9
+ import { CustomBlock } from '../../../../FlexibleCard/components/blocks';
10
+ import Icon from '../../../../FlexibleCard/components/elements/icon';
9
11
  var HoverCardLoadingView = function HoverCardLoadingView(_ref) {
10
- var flexibleCardProps = _ref.flexibleCardProps,
11
- titleBlockProps = _ref.titleBlockProps;
12
+ var titleBlockProps = _ref.titleBlockProps;
13
+ var testId = 'hover-card-loading-view';
12
14
  var lineHeightRem = 1.25;
13
15
  var skeletonWidth = CARD_WIDTH_REM - 2;
16
+ var size = titleBlockProps.size,
17
+ actions = titleBlockProps.actions;
18
+ var actionGroup = (actions === null || actions === void 0 ? void 0 : actions.length) && (actions === null || actions === void 0 ? void 0 : actions.length) > 0 && jsx(ActionGroup, {
19
+ items: actions,
20
+ visibleButtonsNum: 2
21
+ });
14
22
  return jsx("div", {
15
23
  css: loadingViewContainer,
16
- "data-testid": "hover-card-loading-view"
17
- }, jsx(FlexibleCard, flexibleCardProps, jsx(TitleBlock, titleBlockProps)), jsx("div", {
24
+ "data-testid": testId
25
+ }, jsx("div", {
18
26
  css: skeletonContainer
19
- }, jsx("span", null), jsx(LoadingSkeleton, {
27
+ }, jsx(CustomBlock, _extends({}, titleBlockProps, {
28
+ overrideCss: titleBlockStyles,
29
+ testId: "".concat(testId, "-title-block")
30
+ }), jsx(Icon, {
31
+ render: function render() {
32
+ return jsx(LoadingSkeleton, null);
33
+ },
34
+ size: size
35
+ }), jsx("span", {
36
+ css: getTitleStyles(lineHeightRem),
37
+ "data-testid": "".concat(testId, "-title")
38
+ }, jsx(LoadingSkeleton, {
39
+ height: lineHeightRem
40
+ })), actionGroup), jsx(LoadingSkeleton, {
20
41
  width: skeletonWidth,
21
42
  height: lineHeightRem
22
43
  }), jsx(LoadingSkeleton, {
package/dist/esm/view/HoverCard/components/views/resolving/styled.js CHANGED
@@ -1,5 +1,9 @@
1
1
  import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
2
- var _templateObject, _templateObject2;
2
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
3
3
  import { css } from '@emotion/react';
4
4
  export var loadingViewContainer = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n"])));
5
- export var skeletonContainer = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n gap: 0.625rem;\n align-items: center;\n"])));
5
+ export var skeletonContainer = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n gap: 0.625rem;\n align-items: center;\n"])));
6
+ export var getTitleStyles = function getTitleStyles(height) {
7
+ return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n flex: 1 0 auto;\n height: ", "rem;\n\n span {\n width: 100%;\n }\n "])), height);
8
+ };
9
+ export var titleBlockStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n width: 100%;\n gap: 0.5rem;\n"])));
package/dist/types/view/HoverCard/components/views/resolving/styled.d.ts CHANGED
@@ -1,2 +1,5 @@
1
- export declare const loadingViewContainer: import("@emotion/react").SerializedStyles;
2
- export declare const skeletonContainer: import("@emotion/react").SerializedStyles;
1
+ import { SerializedStyles } from '@emotion/react';
2
+ export declare const loadingViewContainer: SerializedStyles;
3
+ export declare const skeletonContainer: SerializedStyles;
4
+ export declare const getTitleStyles: (height: number) => SerializedStyles;
5
+ export declare const titleBlockStyles: SerializedStyles;
package/dist/types-ts4.5/view/HoverCard/components/views/resolving/styled.d.ts CHANGED
@@ -1,2 +1,5 @@
1
- export declare const loadingViewContainer: import("@emotion/react").SerializedStyles;
2
- export declare const skeletonContainer: import("@emotion/react").SerializedStyles;
1
+ import { SerializedStyles } from '@emotion/react';
2
+ export declare const loadingViewContainer: SerializedStyles;
3
+ export declare const skeletonContainer: SerializedStyles;
4
+ export declare const getTitleStyles: (height: number) => SerializedStyles;
5
+ export declare const titleBlockStyles: SerializedStyles;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/smart-card",
3
- "version": "26.5.2",
3
+ "version": "26.5.4",
4
4
  "description": "Smart card component",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -45,10 +45,10 @@
45
45
  "@atlaskit/link-analytics": "^8.0.2",
46
46
  "@atlaskit/link-client-extension": "^1.2.0",
47
47
  "@atlaskit/linking-common": "^2.14.0",
48
- "@atlaskit/linking-types": "^5.0.0",
48
+ "@atlaskit/linking-types": "^6.0.0",
49
49
  "@atlaskit/logo": "^13.14.0",
50
50
  "@atlaskit/lozenge": "^11.4.0",
51
- "@atlaskit/media-common": "^5.0.0",
51
+ "@atlaskit/media-common": "^7.0.0",
52
52
  "@atlaskit/modal-dialog": "^12.6.0",
53
53
  "@atlaskit/outbound-auth-flow-client": "^3.4.0",
54
54
  "@atlaskit/platform-feature-flags": "^0.2.1",