@atlaskit/smart-card 26.33.1 → 26.33.2

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 (16) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/cjs/utils/analytics/analytics.js +1 -1
  3. package/dist/cjs/view/EmbedCard/views/unresolved-view/index.js +4 -2
  4. package/dist/cjs/view/EmbedCard/views/unresolved-view/styled.js +7 -7
  5. package/dist/cjs/view/LinkUrl/index.js +1 -1
  6. package/dist/es2019/utils/analytics/analytics.js +1 -1
  7. package/dist/es2019/view/EmbedCard/views/unresolved-view/index.js +5 -3
  8. package/dist/es2019/view/EmbedCard/views/unresolved-view/styled.js +16 -13
  9. package/dist/es2019/view/LinkUrl/index.js +1 -1
  10. package/dist/esm/utils/analytics/analytics.js +1 -1
  11. package/dist/esm/view/EmbedCard/views/unresolved-view/index.js +5 -3
  12. package/dist/esm/view/EmbedCard/views/unresolved-view/styled.js +6 -6
  13. package/dist/esm/view/LinkUrl/index.js +1 -1
  14. package/dist/types/view/EmbedCard/views/unresolved-view/styled.d.ts +1 -0
  15. package/dist/types-ts4.5/view/EmbedCard/views/unresolved-view/styled.d.ts +1 -0
  16. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @atlaskit/smart-card
2
2
 
3
+ ## 26.33.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [#41089](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41089) [`f5acb8e8917`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f5acb8e8917) - [ux] Update embed unresolved view styling (behind feature flag)
8
+
3
9
  ## 26.33.1
4
10
 
5
11
  ### Patch Changes
package/dist/cjs/utils/analytics/analytics.js CHANGED
@@ -22,7 +22,7 @@ var ANALYTICS_CHANNEL = exports.ANALYTICS_CHANNEL = 'media';
22
22
  var context = exports.context = {
23
23
  componentName: 'smart-cards',
24
24
  packageName: "@atlaskit/smart-card",
25
- packageVersion: "26.33.1"
25
+ packageVersion: "26.33.2"
26
26
  };
27
27
  var TrackQuickActionType = exports.TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
28
28
  TrackQuickActionType["StatusUpdate"] = "StatusUpdate";
package/dist/cjs/view/EmbedCard/views/unresolved-view/index.js CHANGED
@@ -54,16 +54,18 @@ var UnresolvedView = function UnresolvedView(_ref) {
54
54
  }, (0, _react.jsx)("div", {
55
55
  css: _styled.containerStyles,
56
56
  "data-testid": "".concat(testId, "-unresolved-container")
57
+ }, (0, _react.jsx)("div", {
58
+ css: _styled.contentStyles
57
59
  }, (0, _react.jsx)("img", {
58
60
  css: _styled.imageStyles,
59
61
  "data-testid": "".concat(testId, "-unresolved-image"),
60
62
  src: image
61
- }), (0, _react.jsx)("span", {
63
+ }), (0, _react.jsx)("h2", {
62
64
  css: _styled.titleStyles,
63
65
  "data-testid": "".concat(testId, "-unresolved-title")
64
66
  }, title), (0, _react.jsx)("span", {
65
67
  css: _styled.descriptionStyles,
66
68
  "data-testid": "".concat(testId, "-unresolved-description")
67
- }, description), button));
69
+ }, description), button)));
68
70
  };
69
71
  var _default = exports.default = UnresolvedView;
package/dist/cjs/view/EmbedCard/views/unresolved-view/styled.js CHANGED
@@ -4,13 +4,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.titleStyles = exports.imageStyles = exports.descriptionStyles = exports.containerStyles = void 0;
7
+ exports.titleStyles = exports.imageStyles = exports.descriptionStyles = exports.contentStyles = exports.containerStyles = void 0;
8
8
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
9
- var _constants = require("@atlaskit/theme/constants");
10
9
  var _react = require("@emotion/react");
11
10
  var _utils = require("../../../common/utils");
12
- var _templateObject, _templateObject2, _templateObject3, _templateObject4;
13
- var containerStyles = exports.containerStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100%;\n"])));
14
- var imageStyles = exports.imageStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n max-height: ", ";\n margin-bottom: ", ";\n overflow: hidden;\n"])), (0, _utils.gs)(14), (0, _utils.gs)(4));
15
- var titleStyles = exports.titleStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n font-size: ", ";\n margin-bottom: ", ";\n max-width: ", ";\n text-align: center;\n"])), (0, _utils.gs)(2.5), (0, _utils.gs)(1.5), (0, _utils.gs)(50));
16
- var descriptionStyles = exports.descriptionStyles = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n font-size: ", ";\n margin-bottom: ", ";\n text-align: center;\n max-width: ", ";\n line-height: ", ";\n"])), (0, _constants.fontSize)(), (0, _utils.gs)(2.5), (0, _utils.gs)(50), (0, _utils.gs)(3));
11
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
12
+ var containerStyles = exports.containerStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: grid;\n height: inherit;\n"])));
13
+ var contentStyles = exports.contentStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n margin: auto;\n padding: ", ";\n gap: ", ";\n max-width: ", ";\n"])), "var(--ds-space-200, 16px)", "var(--ds-space-250, 20px)", (0, _utils.gs)(50));
14
+ var imageStyles = exports.imageStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n height: 120px;\n width: 180px;\n object-fit: contain;\n object-position: center center;\n"])));
15
+ var titleStyles = exports.titleStyles = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n text-align: center;\n margin: 0;\n padding: 0;\n"])));
16
+ var descriptionStyles = exports.descriptionStyles = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n font-size: 1em;\n text-align: center;\n"])));
package/dist/cjs/view/LinkUrl/index.js CHANGED
@@ -18,7 +18,7 @@ var _excluded = ["href", "children", "checkSafety", "onClick", "testId"],
18
18
  _excluded2 = ["isLinkSafe", "showSafetyWarningModal"];
19
19
  var PACKAGE_DATA = {
20
20
  packageName: "@atlaskit/smart-card",
21
- packageVersion: "26.33.1",
21
+ packageVersion: "26.33.2",
22
22
  componentName: 'linkUrl'
23
23
  };
24
24
  var Link = (0, _click.withLinkClickedEvent)('a');
package/dist/es2019/utils/analytics/analytics.js CHANGED
@@ -4,7 +4,7 @@ export const ANALYTICS_CHANNEL = 'media';
4
4
  export const context = {
5
5
  componentName: 'smart-cards',
6
6
  packageName: "@atlaskit/smart-card",
7
- packageVersion: "26.33.1"
7
+ packageVersion: "26.33.2"
8
8
  };
9
9
  export let TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
10
10
  TrackQuickActionType["StatusUpdate"] = "StatusUpdate";
package/dist/es2019/view/EmbedCard/views/unresolved-view/index.js CHANGED
@@ -4,7 +4,7 @@ import { jsx } from '@emotion/react';
4
4
  import React, { useMemo } from 'react';
5
5
  import { ExpandedFrame } from '../../components/ExpandedFrame';
6
6
  import { ImageIcon } from '../../components/ImageIcon';
7
- import { containerStyles, descriptionStyles, imageStyles, titleStyles } from './styled';
7
+ import { containerStyles, contentStyles, descriptionStyles, imageStyles, titleStyles } from './styled';
8
8
  const UnresolvedView = ({
9
9
  button,
10
10
  description,
@@ -44,16 +44,18 @@ const UnresolvedView = ({
44
44
  }, jsx("div", {
45
45
  css: containerStyles,
46
46
  "data-testid": `${testId}-unresolved-container`
47
+ }, jsx("div", {
48
+ css: contentStyles
47
49
  }, jsx("img", {
48
50
  css: imageStyles,
49
51
  "data-testid": `${testId}-unresolved-image`,
50
52
  src: image
51
- }), jsx("span", {
53
+ }), jsx("h2", {
52
54
  css: titleStyles,
53
55
  "data-testid": `${testId}-unresolved-title`
54
56
  }, title), jsx("span", {
55
57
  css: descriptionStyles,
56
58
  "data-testid": `${testId}-unresolved-description`
57
- }, description), button));
59
+ }, description), button)));
58
60
  };
59
61
  export default UnresolvedView;
package/dist/es2019/view/EmbedCard/views/unresolved-view/styled.js CHANGED
@@ -1,28 +1,31 @@
1
- import { fontSize } from '@atlaskit/theme/constants';
2
1
  import { css } from '@emotion/react';
3
2
  import { gs } from '../../../common/utils';
4
3
  export const containerStyles = css`
4
+ display: grid;
5
+ height: inherit;
6
+ `;
7
+ export const contentStyles = css`
5
8
  display: flex;
6
9
  flex-direction: column;
7
- align-items: center;
8
10
  justify-content: center;
9
- height: 100%;
11
+ align-items: center;
12
+ margin: auto;
13
+ padding: ${"var(--ds-space-200, 16px)"};
14
+ gap: ${"var(--ds-space-250, 20px)"};
15
+ max-width: ${gs(50)};
10
16
  `;
11
17
  export const imageStyles = css`
12
- max-height: ${gs(14)};
13
- margin-bottom: ${gs(4)};
14
- overflow: hidden;
18
+ height: 120px;
19
+ width: 180px;
20
+ object-fit: contain;
21
+ object-position: center center;
15
22
  `;
16
23
  export const titleStyles = css`
17
- font-size: ${gs(2.5)};
18
- margin-bottom: ${gs(1.5)};
19
- max-width: ${gs(50)};
20
24
  text-align: center;
25
+ margin: 0;
26
+ padding: 0;
21
27
  `;
22
28
  export const descriptionStyles = css`
23
- font-size: ${fontSize()};
24
- margin-bottom: ${gs(2.5)};
29
+ font-size: 1em;
25
30
  text-align: center;
26
- max-width: ${gs(50)};
27
- line-height: ${gs(3)};
28
31
  `;
package/dist/es2019/view/LinkUrl/index.js CHANGED
@@ -8,7 +8,7 @@ import LinkWarningModal from './LinkWarningModal';
8
8
  import { getBooleanFF } from '@atlaskit/platform-feature-flags';
9
9
  const PACKAGE_DATA = {
10
10
  packageName: "@atlaskit/smart-card",
11
- packageVersion: "26.33.1",
11
+ packageVersion: "26.33.2",
12
12
  componentName: 'linkUrl'
13
13
  };
14
14
  const Link = withLinkClickedEvent('a');
package/dist/esm/utils/analytics/analytics.js CHANGED
@@ -15,7 +15,7 @@ export var ANALYTICS_CHANNEL = 'media';
15
15
  export var context = {
16
16
  componentName: 'smart-cards',
17
17
  packageName: "@atlaskit/smart-card",
18
- packageVersion: "26.33.1"
18
+ packageVersion: "26.33.2"
19
19
  };
20
20
  export var TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
21
21
  TrackQuickActionType["StatusUpdate"] = "StatusUpdate";
package/dist/esm/view/EmbedCard/views/unresolved-view/index.js CHANGED
@@ -4,7 +4,7 @@ import { jsx } from '@emotion/react';
4
4
  import React, { useMemo } from 'react';
5
5
  import { ExpandedFrame } from '../../components/ExpandedFrame';
6
6
  import { ImageIcon } from '../../components/ImageIcon';
7
- import { containerStyles, descriptionStyles, imageStyles, titleStyles } from './styled';
7
+ import { containerStyles, contentStyles, descriptionStyles, imageStyles, titleStyles } from './styled';
8
8
  var UnresolvedView = function UnresolvedView(_ref) {
9
9
  var button = _ref.button,
10
10
  description = _ref.description,
@@ -43,16 +43,18 @@ var UnresolvedView = function UnresolvedView(_ref) {
43
43
  }, jsx("div", {
44
44
  css: containerStyles,
45
45
  "data-testid": "".concat(testId, "-unresolved-container")
46
+ }, jsx("div", {
47
+ css: contentStyles
46
48
  }, jsx("img", {
47
49
  css: imageStyles,
48
50
  "data-testid": "".concat(testId, "-unresolved-image"),
49
51
  src: image
50
- }), jsx("span", {
52
+ }), jsx("h2", {
51
53
  css: titleStyles,
52
54
  "data-testid": "".concat(testId, "-unresolved-title")
53
55
  }, title), jsx("span", {
54
56
  css: descriptionStyles,
55
57
  "data-testid": "".concat(testId, "-unresolved-description")
56
- }, description), button));
58
+ }, description), button)));
57
59
  };
58
60
  export default UnresolvedView;
package/dist/esm/view/EmbedCard/views/unresolved-view/styled.js CHANGED
@@ -1,9 +1,9 @@
1
1
  import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
2
- var _templateObject, _templateObject2, _templateObject3, _templateObject4;
3
- import { fontSize } from '@atlaskit/theme/constants';
2
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
4
3
  import { css } from '@emotion/react';
5
4
  import { gs } from '../../../common/utils';
6
- export var containerStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100%;\n"])));
7
- export var imageStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n max-height: ", ";\n margin-bottom: ", ";\n overflow: hidden;\n"])), gs(14), gs(4));
8
- export var titleStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n font-size: ", ";\n margin-bottom: ", ";\n max-width: ", ";\n text-align: center;\n"])), gs(2.5), gs(1.5), gs(50));
9
- export var descriptionStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n font-size: ", ";\n margin-bottom: ", ";\n text-align: center;\n max-width: ", ";\n line-height: ", ";\n"])), fontSize(), gs(2.5), gs(50), gs(3));
5
+ export var containerStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: grid;\n height: inherit;\n"])));
6
+ export var contentStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n margin: auto;\n padding: ", ";\n gap: ", ";\n max-width: ", ";\n"])), "var(--ds-space-200, 16px)", "var(--ds-space-250, 20px)", gs(50));
7
+ export var imageStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n height: 120px;\n width: 180px;\n object-fit: contain;\n object-position: center center;\n"])));
8
+ export var titleStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n text-align: center;\n margin: 0;\n padding: 0;\n"])));
9
+ export var descriptionStyles = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n font-size: 1em;\n text-align: center;\n"])));
package/dist/esm/view/LinkUrl/index.js CHANGED
@@ -11,7 +11,7 @@ import LinkWarningModal from './LinkWarningModal';
11
11
  import { getBooleanFF } from '@atlaskit/platform-feature-flags';
12
12
  var PACKAGE_DATA = {
13
13
  packageName: "@atlaskit/smart-card",
14
- packageVersion: "26.33.1",
14
+ packageVersion: "26.33.2",
15
15
  componentName: 'linkUrl'
16
16
  };
17
17
  var Link = withLinkClickedEvent('a');
package/dist/types/view/EmbedCard/views/unresolved-view/styled.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  export declare const containerStyles: import("@emotion/react").SerializedStyles;
2
+ export declare const contentStyles: import("@emotion/react").SerializedStyles;
2
3
  export declare const imageStyles: import("@emotion/react").SerializedStyles;
3
4
  export declare const titleStyles: import("@emotion/react").SerializedStyles;
4
5
  export declare const descriptionStyles: import("@emotion/react").SerializedStyles;
package/dist/types-ts4.5/view/EmbedCard/views/unresolved-view/styled.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  export declare const containerStyles: import("@emotion/react").SerializedStyles;
2
+ export declare const contentStyles: import("@emotion/react").SerializedStyles;
2
3
  export declare const imageStyles: import("@emotion/react").SerializedStyles;
3
4
  export declare const titleStyles: import("@emotion/react").SerializedStyles;
4
5
  export declare const descriptionStyles: import("@emotion/react").SerializedStyles;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/smart-card",
3
- "version": "26.33.1",
3
+ "version": "26.33.2",
4
4
  "description": "Smart card component",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -24,7 +24,7 @@
24
24
  "dependencies": {
25
25
  "@atlaskit/analytics-gas-types": "^5.1.0",
26
26
  "@atlaskit/analytics-next": "^9.1.0",
27
- "@atlaskit/avatar": "^21.3.0",
27
+ "@atlaskit/avatar": "^21.4.0",
28
28
  "@atlaskit/avatar-group": "^9.4.0",
29
29
  "@atlaskit/badge": "^15.1.0",
30
30
  "@atlaskit/button": "^16.10.0",
@@ -42,7 +42,7 @@
42
42
  "@atlaskit/linking-types": "^8.4.0",
43
43
  "@atlaskit/logo": "^13.14.0",
44
44
  "@atlaskit/lozenge": "^11.4.0",
45
- "@atlaskit/modal-dialog": "^12.7.0",
45
+ "@atlaskit/modal-dialog": "^12.8.0",
46
46
  "@atlaskit/outbound-auth-flow-client": "^3.4.0",
47
47
  "@atlaskit/platform-feature-flags": "^0.2.1",
48
48
  "@atlaskit/popup": "^1.10.0",
@@ -74,7 +74,7 @@
74
74
  "devDependencies": {
75
75
  "@af/visual-regression": "*",
76
76
  "@atlaskit/analytics-listeners": "^8.7.0",
77
- "@atlaskit/avatar": "^21.3.0",
77
+ "@atlaskit/avatar": "^21.4.0",
78
78
  "@atlaskit/css-reset": "^6.5.0",
79
79
  "@atlaskit/link-test-helpers": "^6.1.0",
80
80
  "@atlaskit/lozenge": "^11.4.0",