@atlaskit/smart-card 21.1.2 → 21.1.3

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/smart-card
 
+## 21.1.3
+
+### Patch Changes
+
+- [`d0b3a262e03`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d0b3a262e03) - [ux] Embed Preview: Update the new embed preview modal UX
+
+  - Make title smaller
+  - Reduce gap between element
+  - Hide resize button on smaller screen
+
 ## 21.1.2
 
 ### Patch Changes

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "21.1.2",
+	"version": "21.1.3",
 	"sideEffects": false
 }

package/dist/cjs/view/EmbedModal/components/embed-content/index.js

@@ -17,7 +17,7 @@ var _utils = require("../../../../utils");
 
 var _templateObject;
 
-var iframeCss = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  height: calc(100vh - 214px);\n"])));
+var iframeCss = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  height: calc(100vh - 208px);\n"])));
 
 var EmbedContent = function EmbedContent(_ref) {
   var isTrusted = _ref.isTrusted,

package/dist/cjs/view/EmbedModal/components/link-info/index.js

@@ -93,12 +93,14 @@ var LinkInfo = function LinkInfo(_ref) {
     }) : (0, _core.jsx)(_vidFullScreenOn.default, {
       label: message.defaultMessage
     });
-    return (0, _core.jsx)(_linkInfoButton.default, {
+    return (0, _core.jsx)("span", {
+      className: "smart-link-resize-button"
+    }, (0, _core.jsx)(_linkInfoButton.default, {
       content: (0, _core.jsx)(_reactIntlNext.FormattedMessage, message),
       icon: icon,
       onClick: onResizeButtonClick,
       testId: "".concat(testId, "-resize")
-    });
+    }));
   }, [onResizeButtonClick, size, testId]);
   return (0, _core.jsx)("div", {
     css: _styled.containerStyles

package/dist/cjs/view/EmbedModal/components/link-info/link-info-button/index.js

@@ -31,6 +31,7 @@ var LinkInfoButton = function LinkInfoButton(_ref) {
     href: href,
     iconBefore: icon,
     onClick: onClick,
+    spacing: "none",
     target: target,
     testId: "".concat(testId, "-button")
   }));

package/dist/cjs/view/EmbedModal/components/link-info/styled.js

@@ -5,28 +5,21 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.titleCss = exports.subtitleCss = exports.iconCss = exports.containerStyles = exports.actionCss = void 0;
+exports.titleCss = exports.iconCss = exports.containerStyles = exports.actionCss = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
 var _core = require("@emotion/core");
 
-var _utils = require("../../../common/utils");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
-var _tokens = require("@atlaskit/tokens");
-
-var _colors = require("@atlaskit/theme/colors");
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-
-var containerStyles = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  display: flex;\n  gap: ", ";\n  justify-content: space-between;\n  padding: ", " ", ";\n"])), (0, _utils.gs)(2), (0, _utils.gs)(2), (0, _utils.gs)(3));
+var containerStyles = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  display: flex;\n  gap: 8px;\n  justify-content: space-between;\n  // AK ModalBody has 2px padding top and bottom.\n  // Using 14px here to create 16px gap between\n  // link info and iframe\n  padding: 24px 24px 14px 24px;\n"])));
 exports.containerStyles = containerStyles;
-var iconSize = '32px';
+var iconSize = '24px';
 var iconCss = (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  img,\n  span,\n  svg {\n    height: ", ";\n    min-height: ", ";\n    max-height: ", ";\n    width: ", ";\n    min-width: ", ";\n    max-width: ", ";\n  }\n"])), iconSize, iconSize, iconSize, iconSize, iconSize, iconSize);
 exports.iconCss = iconCss;
-var titleCss = (0, _core.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1 1 auto;\n\n  h3 {\n    flex: 1 1 auto;\n\n    // EDM-42336: UX is not finalised yet.\n    font-size: 20px;\n    font-weight: 400;\n    line-height: 24px;\n\n    display: -webkit-box;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    word-break: break-word;\n    -webkit-line-clamp: 1;\n    -webkit-box-orient: vertical;\n    // Fallback options\n    @supports not (-webkit-line-clamp: 1) {\n      max-height: 24px;\n    }\n  }\n"])));
+var height = '20px';
+var titleCss = (0, _core.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1 1 auto;\n\n  h3 {\n    flex: 1 1 auto;\n    font-size: 16px;\n    font-weight: 400;\n    line-height: ", ";\n\n    display: -webkit-box;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    word-break: break-word;\n    -webkit-line-clamp: 1;\n    -webkit-box-orient: vertical;\n    // Fallback options\n    @supports not (-webkit-line-clamp: 1) {\n      max-height: ", ";\n    }\n  }\n"])), height, height);
 exports.titleCss = titleCss;
-var subtitleCss = (0, _core.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n\n  // EDM-42336: UX is not finalised yet.\n  font-size: 12px;\n  font-weight: 400;\n  line-height: 16px;\n"])), (0, _tokens.token)('color.text.subtlest', _colors.N100));
-exports.subtitleCss = subtitleCss;
-var actionCss = (0, _core.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 0 0 auto;\n"])));
+var actionCss = (0, _core.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex: 0 0 auto;\n  gap: 4px;\n  line-height: ", ";\n  span {\n    line-height: ", ";\n  }\n\n  @media only screen and (max-width: 980px) {\n    // Hide resize button if the screen is smaller than the min width\n    // or too small to have enough impact to matter.\n    .smart-link-resize-button {\n      display: none;\n    }\n  }\n"])), height, height);
 exports.actionCss = actionCss;

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "21.1.2",
+	"version": "21.1.3",
 	"sideEffects": false
 }

package/dist/es2019/view/EmbedModal/components/embed-content/index.js

@@ -5,7 +5,7 @@ import { css, jsx } from '@emotion/core';
 import { getIframeSandboxAttribute } from '../../../../utils';
 const iframeCss = css`
   width: 100%;
-  height: calc(100vh - 214px);
+  height: calc(100vh - 208px);
 `;
 
 const EmbedContent = ({

package/dist/es2019/view/EmbedModal/components/link-info/index.js

@@ -65,12 +65,14 @@ const LinkInfo = ({
     }) : jsx(VidFullScreenOnIcon, {
       label: message.defaultMessage
     });
-    return jsx(LinkInfoButton, {
+    return jsx("span", {
+      className: "smart-link-resize-button"
+    }, jsx(LinkInfoButton, {
       content: jsx(FormattedMessage, message),
       icon: icon,
       onClick: onResizeButtonClick,
       testId: `${testId}-resize`
-    });
+    }));
   }, [onResizeButtonClick, size, testId]);
   return jsx("div", {
     css: containerStyles

package/dist/es2019/view/EmbedModal/components/link-info/link-info-button/index.js

@@ -21,6 +21,7 @@ const LinkInfoButton = ({
     href: href,
     iconBefore: icon,
     onClick: onClick,
+    spacing: "none",
     target: target,
     testId: `${testId}-button`
   }));

package/dist/es2019/view/EmbedModal/components/link-info/styled.js

@@ -1,15 +1,15 @@
 import { css } from '@emotion/core';
-import { gs } from '../../../common/utils';
-import { token } from '@atlaskit/tokens';
-import { N100 } from '@atlaskit/theme/colors';
 export const containerStyles = css`
   align-items: center;
   display: flex;
-  gap: ${gs(2)};
+  gap: 8px;
   justify-content: space-between;
-  padding: ${gs(2)} ${gs(3)};
+  // AK ModalBody has 2px padding top and bottom.
+  // Using 14px here to create 16px gap between
+  // link info and iframe
+  padding: 24px 24px 14px 24px;
 `;
-const iconSize = '32px';
+const iconSize = '24px';
 export const iconCss = css`
   img,
   span,
@@ -22,16 +22,15 @@ export const iconCss = css`
     max-width: ${iconSize};
   }
 `;
+const height = '20px';
 export const titleCss = css`
   flex: 1 1 auto;
 
   h3 {
     flex: 1 1 auto;
-
-    // EDM-42336: UX is not finalised yet.
-    font-size: 20px;
+    font-size: 16px;
     font-weight: 400;
-    line-height: 24px;
+    line-height: ${height};
 
     display: -webkit-box;
     overflow: hidden;
@@ -41,18 +40,24 @@ export const titleCss = css`
     -webkit-box-orient: vertical;
     // Fallback options
     @supports not (-webkit-line-clamp: 1) {
-      max-height: 24px;
+      max-height: ${height};
     }
   }
 `;
-export const subtitleCss = css`
-  color: ${token('color.text.subtlest', N100)};
-
-  // EDM-42336: UX is not finalised yet.
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 16px;
-`;
 export const actionCss = css`
+  display: flex;
   flex: 0 0 auto;
+  gap: 4px;
+  line-height: ${height};
+  span {
+    line-height: ${height};
+  }
+
+  @media only screen and (max-width: 980px) {
+    // Hide resize button if the screen is smaller than the min width
+    // or too small to have enough impact to matter.
+    .smart-link-resize-button {
+      display: none;
+    }
+  }
 `;

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "21.1.2",
+	"version": "21.1.3",
 	"sideEffects": false
 }

package/dist/esm/view/EmbedModal/components/embed-content/index.js

@@ -6,7 +6,7 @@ var _templateObject;
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import { getIframeSandboxAttribute } from '../../../../utils';
-var iframeCss = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  height: calc(100vh - 214px);\n"])));
+var iframeCss = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  height: calc(100vh - 208px);\n"])));
 
 var EmbedContent = function EmbedContent(_ref) {
   var isTrusted = _ref.isTrusted,

package/dist/esm/view/EmbedModal/components/link-info/index.js

@@ -65,12 +65,14 @@ var LinkInfo = function LinkInfo(_ref) {
     }) : jsx(VidFullScreenOnIcon, {
       label: message.defaultMessage
     });
-    return jsx(LinkInfoButton, {
+    return jsx("span", {
+      className: "smart-link-resize-button"
+    }, jsx(LinkInfoButton, {
       content: jsx(FormattedMessage, message),
       icon: icon,
       onClick: onResizeButtonClick,
       testId: "".concat(testId, "-resize")
-    });
+    }));
   }, [onResizeButtonClick, size, testId]);
   return jsx("div", {
     css: containerStyles

package/dist/esm/view/EmbedModal/components/link-info/link-info-button/index.js

@@ -20,6 +20,7 @@ var LinkInfoButton = function LinkInfoButton(_ref) {
     href: href,
     iconBefore: icon,
     onClick: onClick,
+    spacing: "none",
     target: target,
     testId: "".concat(testId, "-button")
   }));

package/dist/esm/view/EmbedModal/components/link-info/styled.js

@@ -1,14 +1,11 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 import { css } from '@emotion/core';
-import { gs } from '../../../common/utils';
-import { token } from '@atlaskit/tokens';
-import { N100 } from '@atlaskit/theme/colors';
-export var containerStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  align-items: center;\n  display: flex;\n  gap: ", ";\n  justify-content: space-between;\n  padding: ", " ", ";\n"])), gs(2), gs(2), gs(3));
-var iconSize = '32px';
+export var containerStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  align-items: center;\n  display: flex;\n  gap: 8px;\n  justify-content: space-between;\n  // AK ModalBody has 2px padding top and bottom.\n  // Using 14px here to create 16px gap between\n  // link info and iframe\n  padding: 24px 24px 14px 24px;\n"])));
+var iconSize = '24px';
 export var iconCss = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  img,\n  span,\n  svg {\n    height: ", ";\n    min-height: ", ";\n    max-height: ", ";\n    width: ", ";\n    min-width: ", ";\n    max-width: ", ";\n  }\n"])), iconSize, iconSize, iconSize, iconSize, iconSize, iconSize);
-export var titleCss = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  flex: 1 1 auto;\n\n  h3 {\n    flex: 1 1 auto;\n\n    // EDM-42336: UX is not finalised yet.\n    font-size: 20px;\n    font-weight: 400;\n    line-height: 24px;\n\n    display: -webkit-box;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    word-break: break-word;\n    -webkit-line-clamp: 1;\n    -webkit-box-orient: vertical;\n    // Fallback options\n    @supports not (-webkit-line-clamp: 1) {\n      max-height: 24px;\n    }\n  }\n"])));
-export var subtitleCss = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  color: ", ";\n\n  // EDM-42336: UX is not finalised yet.\n  font-size: 12px;\n  font-weight: 400;\n  line-height: 16px;\n"])), token('color.text.subtlest', N100));
-export var actionCss = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  flex: 0 0 auto;\n"])));
+var height = '20px';
+export var titleCss = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  flex: 1 1 auto;\n\n  h3 {\n    flex: 1 1 auto;\n    font-size: 16px;\n    font-weight: 400;\n    line-height: ", ";\n\n    display: -webkit-box;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    word-break: break-word;\n    -webkit-line-clamp: 1;\n    -webkit-box-orient: vertical;\n    // Fallback options\n    @supports not (-webkit-line-clamp: 1) {\n      max-height: ", ";\n    }\n  }\n"])), height, height);
+export var actionCss = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex: 0 0 auto;\n  gap: 4px;\n  line-height: ", ";\n  span {\n    line-height: ", ";\n  }\n\n  @media only screen and (max-width: 980px) {\n    // Hide resize button if the screen is smaller than the min width\n    // or too small to have enough impact to matter.\n    .smart-link-resize-button {\n      display: none;\n    }\n  }\n"])), height, height);

package/dist/types/view/EmbedModal/components/link-info/styled.d.ts

@@ -1,5 +1,4 @@
 export declare const containerStyles: import("@emotion/utils").SerializedStyles;
 export declare const iconCss: import("@emotion/utils").SerializedStyles;
 export declare const titleCss: import("@emotion/utils").SerializedStyles;
-export declare const subtitleCss: import("@emotion/utils").SerializedStyles;
 export declare const actionCss: import("@emotion/utils").SerializedStyles;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "21.1.2",
+  "version": "21.1.3",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"