@atlaskit/smart-card 17.7.8 → 17.7.9

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 (8) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/cjs/version.json +1 -1
  3. package/dist/cjs/view/FlexibleCard/components/elements/media/index.js +12 -4
  4. package/dist/es2019/version.json +1 -1
  5. package/dist/es2019/view/FlexibleCard/components/elements/media/index.js +37 -4
  6. package/dist/esm/version.json +1 -1
  7. package/dist/esm/view/FlexibleCard/components/elements/media/index.js +12 -4
  8. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @atlaskit/smart-card
2
2
 
3
+ ## 17.7.9
4
+
5
+ ### Patch Changes
6
+
7
+ - [`63d4f963f72`](https://bitbucket.org/atlassian/atlassian-frontend/commits/63d4f963f72) - Flexible UI: Set PreviewBlock image aspect ratio to 16:9
8
+
3
9
  ## 17.7.8
4
10
 
5
11
  ### Patch Changes
package/dist/cjs/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/smart-card",
3
- "version": "17.7.8",
3
+ "version": "17.7.9",
4
4
  "sideEffects": false
5
5
  }
package/dist/cjs/view/FlexibleCard/components/elements/media/index.js CHANGED
@@ -17,9 +17,17 @@ var _imageIcon = _interopRequireDefault(require("../../common/image-icon"));
17
17
 
18
18
  var _templateObject;
19
19
 
20
- var styles = function styles(url) {
21
- return (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n justify-content: center;\n width: 100%;\n > img {\n max-width: 100%;\n max-height: 100%;\n }\n"])));
22
- };
20
+ /**
21
+ * Media: Image
22
+ * [aspect-ratio: 16 / 9] The context box is fixed to aspect ratio of 16:9.
23
+ * [object-fit: cover] The replaced content is sized to maintain
24
+ * its aspect ratio while filling the element's entire content box.
25
+ * If the object's aspect ratio does not match the aspect ratio of its box,
26
+ * then the object will be clipped to fit.
27
+ * [object-position] Center alignment of the selected replaced element's
28
+ * contents within the element's box.
29
+ */
30
+ var styles = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n aspect-ratio: 16 / 9;\n display: flex;\n width: 100%;\n\n // fallback\n @supports not (aspect-ratio: auto) {\n padding-top: 56.25%; // 16:9 ratio (9 / 16 = 0.5625)\n height: 0;\n position: relative;\n overflow: hidden;\n }\n\n > img {\n min-height: 100%;\n min-width: 100%;\n max-height: 100%;\n max-width: 100%;\n object-fit: cover;\n object-position: center center;\n\n // fallback\n @supports not (aspect-ratio: auto) {\n position: absolute;\n transform: translate(-50%, -50%);\n left: 50%;\n top: 50%;\n width: auto;\n height: auto;\n }\n }\n"])));
23
31
 
24
32
  var Media = function Media(_ref) {
25
33
  var _ref$testId = _ref.testId,
@@ -32,7 +40,7 @@ var Media = function Media(_ref) {
32
40
  }
33
41
 
34
42
  return (0, _core.jsx)("div", {
35
- css: styles(url),
43
+ css: styles,
36
44
  "data-smart-element-media": true,
37
45
  "data-testid": testId
38
46
  }, (0, _core.jsx)(_imageIcon.default, {
package/dist/es2019/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/smart-card",
3
- "version": "17.7.8",
3
+ "version": "17.7.9",
4
4
  "sideEffects": false
5
5
  }
package/dist/es2019/view/FlexibleCard/components/elements/media/index.js CHANGED
@@ -3,13 +3,46 @@ import React from 'react';
3
3
  import { css, jsx } from '@emotion/core';
4
4
  import ImageIcon from '../../common/image-icon';
5
5
 
6
- const styles = url => css`
6
+ /**
7
+ * Media: Image
8
+ * [aspect-ratio: 16 / 9] The context box is fixed to aspect ratio of 16:9.
9
+ * [object-fit: cover] The replaced content is sized to maintain
10
+ * its aspect ratio while filling the element's entire content box.
11
+ * If the object's aspect ratio does not match the aspect ratio of its box,
12
+ * then the object will be clipped to fit.
13
+ * [object-position] Center alignment of the selected replaced element's
14
+ * contents within the element's box.
15
+ */
16
+ const styles = css`
17
+ aspect-ratio: 16 / 9;
7
18
  display: flex;
8
- justify-content: center;
9
19
  width: 100%;
20
+
21
+ // fallback
22
+ @supports not (aspect-ratio: auto) {
23
+ padding-top: 56.25%; // 16:9 ratio (9 / 16 = 0.5625)
24
+ height: 0;
25
+ position: relative;
26
+ overflow: hidden;
27
+ }
28
+
10
29
  > img {
11
- max-width: 100%;
30
+ min-height: 100%;
31
+ min-width: 100%;
12
32
  max-height: 100%;
33
+ max-width: 100%;
34
+ object-fit: cover;
35
+ object-position: center center;
36
+
37
+ // fallback
38
+ @supports not (aspect-ratio: auto) {
39
+ position: absolute;
40
+ transform: translate(-50%, -50%);
41
+ left: 50%;
42
+ top: 50%;
43
+ width: auto;
44
+ height: auto;
45
+ }
13
46
  }
14
47
  `;
15
48
 
@@ -23,7 +56,7 @@ const Media = ({
23
56
  }
24
57
 
25
58
  return jsx("div", {
26
- css: styles(url),
59
+ css: styles,
27
60
  "data-smart-element-media": true,
28
61
  "data-testid": testId
29
62
  }, jsx(ImageIcon, {
package/dist/esm/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/smart-card",
3
- "version": "17.7.8",
3
+ "version": "17.7.9",
4
4
  "sideEffects": false
5
5
  }
package/dist/esm/view/FlexibleCard/components/elements/media/index.js CHANGED
@@ -7,9 +7,17 @@ import React from 'react';
7
7
  import { css, jsx } from '@emotion/core';
8
8
  import ImageIcon from '../../common/image-icon';
9
9
 
10
- var styles = function styles(url) {
11
- return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n justify-content: center;\n width: 100%;\n > img {\n max-width: 100%;\n max-height: 100%;\n }\n"])));
12
- };
10
+ /**
11
+ * Media: Image
12
+ * [aspect-ratio: 16 / 9] The context box is fixed to aspect ratio of 16:9.
13
+ * [object-fit: cover] The replaced content is sized to maintain
14
+ * its aspect ratio while filling the element's entire content box.
15
+ * If the object's aspect ratio does not match the aspect ratio of its box,
16
+ * then the object will be clipped to fit.
17
+ * [object-position] Center alignment of the selected replaced element's
18
+ * contents within the element's box.
19
+ */
20
+ var styles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n aspect-ratio: 16 / 9;\n display: flex;\n width: 100%;\n\n // fallback\n @supports not (aspect-ratio: auto) {\n padding-top: 56.25%; // 16:9 ratio (9 / 16 = 0.5625)\n height: 0;\n position: relative;\n overflow: hidden;\n }\n\n > img {\n min-height: 100%;\n min-width: 100%;\n max-height: 100%;\n max-width: 100%;\n object-fit: cover;\n object-position: center center;\n\n // fallback\n @supports not (aspect-ratio: auto) {\n position: absolute;\n transform: translate(-50%, -50%);\n left: 50%;\n top: 50%;\n width: auto;\n height: auto;\n }\n }\n"])));
13
21
 
14
22
  var Media = function Media(_ref) {
15
23
  var _ref$testId = _ref.testId,
@@ -22,7 +30,7 @@ var Media = function Media(_ref) {
22
30
  }
23
31
 
24
32
  return jsx("div", {
25
- css: styles(url),
33
+ css: styles,
26
34
  "data-smart-element-media": true,
27
35
  "data-testid": testId
28
36
  }, jsx(ImageIcon, {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/smart-card",
3
- "version": "17.7.8",
3
+ "version": "17.7.9",
4
4
  "description": "Smart card component",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"