@atlaskit/smart-card 19.1.25 → 19.1.26

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/smart-card
 
+## 19.1.26
+
+### Patch Changes
+
+- [`00c79cca5b0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/00c79cca5b0) - hover card white space changes
+
 ## 19.1.25
 
 ### Patch Changes

package/dist/cjs/version.json

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

package/dist/cjs/view/HoverCard/components/hover-card-content.js

@@ -29,15 +29,18 @@ var _shortcut = _interopRequireDefault(require("@atlaskit/icon/glyph/shortcut"))
 
 var _helpers = require("../../../state/helpers");
 
+var _styled = require("../styled");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 var flexibleUiOptions = {
   hideElevation: true,
-  size: _constants.SmartLinkSize.Large,
+  size: _constants.SmartLinkSize.Medium,
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  theme: _constants.SmartLinkTheme.Black
+  theme: _constants.SmartLinkTheme.Black,
+  hidePadding: true
 };
 
 var getOpenAction = function getOpenAction(url, analytics) {
@@ -112,13 +115,20 @@ var HoverCardContent = function HoverCardContent(_ref) {
     ui: flexibleUiOptions,
     url: url
   }, /*#__PURE__*/_react.default.createElement(_blocks.TitleBlock, {
-    actions: titleActions
+    actions: titleActions,
+    overrideCss: _styled.titleBlockCss,
+    size: _constants.SmartLinkSize.Large,
+    position: _constants.SmartLinkPosition.Center
   }), /*#__PURE__*/_react.default.createElement(_blocks.MetadataBlock, {
     primary: primary,
     secondary: secondary,
-    size: _constants.SmartLinkSize.Small
+    size: _constants.SmartLinkSize.Large,
+    overrideCss: _styled.metadataBlockCss,
+    maxLines: 1
   }), body, /*#__PURE__*/_react.default.createElement(_blocks.FooterBlock, {
-    actions: footerActions
+    actions: footerActions,
+    size: _constants.SmartLinkSize.Large,
+    overrideCss: _styled.footerBlockCss
   }));
 };
 

package/dist/cjs/view/HoverCard/styled.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.HoverCardContainer = void 0;
+exports.titleBlockCss = exports.metadataBlockCss = exports.footerBlockCss = exports.HoverCardContainer = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -13,7 +13,13 @@ var _core = require("@emotion/core");
 
 var _index = require("../../index");
 
-var _templateObject;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
-var HoverCardContainer = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: none;\n  border-width: 0;\n  max-width: 350px;\n  padding: 0;\n\n  .", " {\n    display: none;\n  }\n"])), _index.loadingPlaceholderClassName);
-exports.HoverCardContainer = HoverCardContainer;
+var HoverCardContainer = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: none;\n  border-width: 0;\n  box-sizing: border-box;\n  width: 24rem;\n  padding: 1rem;\n\n  .", " {\n    display: none;\n  }\n"])), _index.loadingPlaceholderClassName);
+exports.HoverCardContainer = HoverCardContainer;
+var titleBlockCss = (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  gap: 0.5rem;\n"])));
+exports.titleBlockCss = titleBlockCss;
+var metadataBlockCss = (0, _core.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  gap: 0px;\n\n  /* primary element group */\n  [data-smart-element-group]:first-of-type {\n    flex-grow: 7;\n    /* horizontal spacing between elements in group */\n    > span {\n      margin-right: 0.5rem;\n    }\n  }\n  /* secondary element group */\n  [data-smart-element-group]:last-of-type {\n    flex-grow: 3;\n    /* horizontal spacing between elements in group */\n    > span {\n      margin-left: 0.5rem;\n    }\n  }\n"])));
+exports.metadataBlockCss = metadataBlockCss;
+var footerBlockCss = (0, _core.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  padding-top: 0.25rem;\n"])));
+exports.footerBlockCss = footerBlockCss;

package/dist/cjs/view/HoverCard/utils.js

@@ -17,8 +17,8 @@ var getSimulatedMetadata = function getSimulatedMetadata() {
     case 'confluence-object-provider':
       return {
         metadata: {
-          primary: [_constants.ElementName.AuthorGroup, _constants.ElementName.CreatedBy, _constants.ElementName.CommentCount, _constants.ElementName.ReactCount],
-          secondary: []
+          primary: [_constants.ElementName.AuthorGroup, _constants.ElementName.CreatedBy],
+          secondary: [_constants.ElementName.CommentCount, _constants.ElementName.ReactCount]
         }
       };
 

package/dist/es2019/version.json

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

package/dist/es2019/view/HoverCard/components/hover-card-content.js

@@ -2,17 +2,19 @@ import React, { useCallback, useEffect, useMemo } from 'react';
 import { extractMetadata } from '../../../extractors/hover/extractMetadata';
 import { getSimulatedMetadata, HOVER_CARD_ANALYTICS_DISPLAY } from '../utils';
 import extractPreview from '../../../extractors/flexible/extract-preview';
-import { ActionName, SmartLinkSize, SmartLinkTheme } from '../../../constants';
+import { ActionName, SmartLinkPosition, SmartLinkSize, SmartLinkTheme } from '../../../constants';
 import FlexibleCard from '../../FlexibleCard';
 import { FooterBlock, MetadataBlock, PreviewBlock, SnippetBlock, TitleBlock } from '../../FlexibleCard/components/blocks';
 import { isSpecialEvent } from '../../../utils';
 import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
 import { getExtensionKey } from '../../../state/helpers';
+import { titleBlockCss, metadataBlockCss, footerBlockCss } from '../styled';
 const flexibleUiOptions = {
   hideElevation: true,
-  size: SmartLinkSize.Large,
+  size: SmartLinkSize.Medium,
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  theme: SmartLinkTheme.Black
+  theme: SmartLinkTheme.Black,
+  hidePadding: true
 };
 
 const getOpenAction = (url, analytics) => ({
@@ -73,13 +75,20 @@ const HoverCardContent = ({
     ui: flexibleUiOptions,
     url: url
   }, /*#__PURE__*/React.createElement(TitleBlock, {
-    actions: titleActions
+    actions: titleActions,
+    overrideCss: titleBlockCss,
+    size: SmartLinkSize.Large,
+    position: SmartLinkPosition.Center
   }), /*#__PURE__*/React.createElement(MetadataBlock, {
     primary: primary,
     secondary: secondary,
-    size: SmartLinkSize.Small
+    size: SmartLinkSize.Large,
+    overrideCss: metadataBlockCss,
+    maxLines: 1
   }), body, /*#__PURE__*/React.createElement(FooterBlock, {
-    actions: footerActions
+    actions: footerActions,
+    size: SmartLinkSize.Large,
+    overrideCss: footerBlockCss
   }));
 };
 

package/dist/es2019/view/HoverCard/styled.js

@@ -3,10 +3,37 @@ import { loadingPlaceholderClassName } from '../../index';
 export const HoverCardContainer = css`
   background: none;
   border-width: 0;
-  max-width: 350px;
-  padding: 0;
+  box-sizing: border-box;
+  width: 24rem;
+  padding: 1rem;
 
   .${loadingPlaceholderClassName} {
     display: none;
   }
+`;
+export const titleBlockCss = css`
+  gap: 0.5rem;
+`;
+export const metadataBlockCss = css`
+  gap: 0px;
+
+  /* primary element group */
+  [data-smart-element-group]:first-of-type {
+    flex-grow: 7;
+    /* horizontal spacing between elements in group */
+    > span {
+      margin-right: 0.5rem;
+    }
+  }
+  /* secondary element group */
+  [data-smart-element-group]:last-of-type {
+    flex-grow: 3;
+    /* horizontal spacing between elements in group */
+    > span {
+      margin-left: 0.5rem;
+    }
+  }
+`;
+export const footerBlockCss = css`
+  padding-top: 0.25rem;
 `;

package/dist/es2019/view/HoverCard/utils.js

@@ -5,8 +5,8 @@ export const getSimulatedMetadata = (extensionKey = '') => {
     case 'confluence-object-provider':
       return {
         metadata: {
-          primary: [ElementName.AuthorGroup, ElementName.CreatedBy, ElementName.CommentCount, ElementName.ReactCount],
-          secondary: []
+          primary: [ElementName.AuthorGroup, ElementName.CreatedBy],
+          secondary: [ElementName.CommentCount, ElementName.ReactCount]
         }
       };
 

package/dist/esm/version.json

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

package/dist/esm/view/HoverCard/components/hover-card-content.js

@@ -2,17 +2,19 @@ import React, { useCallback, useEffect, useMemo } from 'react';
 import { extractMetadata } from '../../../extractors/hover/extractMetadata';
 import { getSimulatedMetadata, HOVER_CARD_ANALYTICS_DISPLAY } from '../utils';
 import extractPreview from '../../../extractors/flexible/extract-preview';
-import { ActionName, SmartLinkSize, SmartLinkTheme } from '../../../constants';
+import { ActionName, SmartLinkPosition, SmartLinkSize, SmartLinkTheme } from '../../../constants';
 import FlexibleCard from '../../FlexibleCard';
 import { FooterBlock, MetadataBlock, PreviewBlock, SnippetBlock, TitleBlock } from '../../FlexibleCard/components/blocks';
 import { isSpecialEvent } from '../../../utils';
 import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
 import { getExtensionKey } from '../../../state/helpers';
+import { titleBlockCss, metadataBlockCss, footerBlockCss } from '../styled';
 var flexibleUiOptions = {
   hideElevation: true,
-  size: SmartLinkSize.Large,
+  size: SmartLinkSize.Medium,
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  theme: SmartLinkTheme.Black
+  theme: SmartLinkTheme.Black,
+  hidePadding: true
 };
 
 var getOpenAction = function getOpenAction(url, analytics) {
@@ -87,13 +89,20 @@ var HoverCardContent = function HoverCardContent(_ref) {
     ui: flexibleUiOptions,
     url: url
   }, /*#__PURE__*/React.createElement(TitleBlock, {
-    actions: titleActions
+    actions: titleActions,
+    overrideCss: titleBlockCss,
+    size: SmartLinkSize.Large,
+    position: SmartLinkPosition.Center
   }), /*#__PURE__*/React.createElement(MetadataBlock, {
     primary: primary,
     secondary: secondary,
-    size: SmartLinkSize.Small
+    size: SmartLinkSize.Large,
+    overrideCss: metadataBlockCss,
+    maxLines: 1
   }), body, /*#__PURE__*/React.createElement(FooterBlock, {
-    actions: footerActions
+    actions: footerActions,
+    size: SmartLinkSize.Large,
+    overrideCss: footerBlockCss
   }));
 };
 

package/dist/esm/view/HoverCard/styled.js

@@ -1,7 +1,10 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 import { css } from '@emotion/core';
 import { loadingPlaceholderClassName } from '../../index';
-export var HoverCardContainer = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: none;\n  border-width: 0;\n  max-width: 350px;\n  padding: 0;\n\n  .", " {\n    display: none;\n  }\n"])), loadingPlaceholderClassName);
+export var HoverCardContainer = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: none;\n  border-width: 0;\n  box-sizing: border-box;\n  width: 24rem;\n  padding: 1rem;\n\n  .", " {\n    display: none;\n  }\n"])), loadingPlaceholderClassName);
+export var titleBlockCss = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  gap: 0.5rem;\n"])));
+export var metadataBlockCss = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  gap: 0px;\n\n  /* primary element group */\n  [data-smart-element-group]:first-of-type {\n    flex-grow: 7;\n    /* horizontal spacing between elements in group */\n    > span {\n      margin-right: 0.5rem;\n    }\n  }\n  /* secondary element group */\n  [data-smart-element-group]:last-of-type {\n    flex-grow: 3;\n    /* horizontal spacing between elements in group */\n    > span {\n      margin-left: 0.5rem;\n    }\n  }\n"])));
+export var footerBlockCss = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  padding-top: 0.25rem;\n"])));

package/dist/esm/view/HoverCard/utils.js

@@ -7,8 +7,8 @@ export var getSimulatedMetadata = function getSimulatedMetadata() {
     case 'confluence-object-provider':
       return {
         metadata: {
-          primary: [ElementName.AuthorGroup, ElementName.CreatedBy, ElementName.CommentCount, ElementName.ReactCount],
-          secondary: []
+          primary: [ElementName.AuthorGroup, ElementName.CreatedBy],
+          secondary: [ElementName.CommentCount, ElementName.ReactCount]
         }
       };
 

package/dist/types/view/HoverCard/styled.d.ts

@@ -1 +1,4 @@
 export declare const HoverCardContainer: import("@emotion/utils").SerializedStyles;
+export declare const titleBlockCss: import("@emotion/utils").SerializedStyles;
+export declare const metadataBlockCss: import("@emotion/utils").SerializedStyles;
+export declare const footerBlockCss: import("@emotion/utils").SerializedStyles;

package/package.json

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