@atlaskit/smart-card 26.3.10 → 26.4.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/smart-card
 
+## 26.4.0
+
+### Minor Changes
+
+- [`2b7f0f3b158`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2b7f0f3b158) - [ux] Fix issue with metadata alignment of Title Block component in Confluence Web links.
+
 ## 26.3.10
 
 ### Patch Changes

package/dist/cjs/version.json

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

package/dist/cjs/view/BlockCard/views/flexible/FlexibleResolvedView.js

@@ -93,7 +93,8 @@ var FlexibleResolvedView = function FlexibleResolvedView(_ref) {
     hideRetry: true,
     subtitle: [{
       name: _constants.ElementName.Location
-    }]
+    }],
+    metadataPosition: _constants.SmartLinkPosition.Top
   }), /*#__PURE__*/_react.default.createElement(_blocks.MetadataBlock, {
     primary: metadata,
     maxLines: 1

package/dist/cjs/view/FlexibleCard/components/blocks/title-block/index.js

@@ -19,7 +19,7 @@ var _errored = _interopRequireDefault(require("./errored"));
 var _resolving = _interopRequireDefault(require("./resolving"));
 var _actionGroup = _interopRequireDefault(require("../action-group"));
 var _elements = require("../../elements");
-var _excluded = ["actions", "anchorTarget", "hideTitleTooltip", "maxLines", "onActionMenuOpenChange", "onClick", "overrideCss", "status", "showActionOnHover", "testId", "text", "theme", "hideRetry"];
+var _excluded = ["actions", "anchorTarget", "hideTitleTooltip", "maxLines", "onActionMenuOpenChange", "onClick", "overrideCss", "status", "showActionOnHover", "testId", "text", "theme", "hideRetry", "metadataPosition"];
 var _templateObject, _templateObject2;
 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; }
@@ -74,6 +74,7 @@ var TitleBlock = function TitleBlock(_ref) {
     text = _ref.text,
     theme = _ref.theme,
     hideRetry = _ref.hideRetry,
+    metadataPosition = _ref.metadataPosition,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   if (hideRetry && props.retry) {
     delete props.retry;
@@ -114,7 +115,8 @@ var TitleBlock = function TitleBlock(_ref) {
     actionGroup: actionGroup,
     overrideCss: combinedCss,
     testId: testId,
-    title: title
+    title: title,
+    metadataPosition: metadataPosition
   }));
 };
 var _default = TitleBlock;

package/dist/cjs/view/FlexibleCard/components/blocks/title-block/resolved/index.js

@@ -16,7 +16,7 @@ var _elementGroup = _interopRequireDefault(require("../../element-group"));
 var _constants = require("../../../../../../constants");
 var _utils = require("../../utils");
 var _templateObject;
-var _excluded = ["actionGroup", "metadata", "position", "subtitle", "testId", "text", "title"];
+var _excluded = ["actionGroup", "metadata", "position", "subtitle", "testId", "text", "title", "metadataPosition"];
 /**
  * This renders a fully resolved TitleBlock.
  * This should render when a Smart Link returns a valid response.
@@ -32,6 +32,7 @@ var TitleBlockResolvedView = function TitleBlockResolvedView(_ref) {
     testId = _ref.testId,
     text = _ref.text,
     title = _ref.title,
+    metadataPosition = _ref.metadataPosition,
     blockProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var metadataElements = (0, _utils.renderElementItems)(metadata);
   var subtitleElements = (0, _utils.renderElementItems)(subtitle);
@@ -48,7 +49,7 @@ var TitleBlockResolvedView = function TitleBlockResolvedView(_ref) {
   }, subtitleElements)), metadataElements && /*#__PURE__*/_react.default.createElement(_elementGroup.default, {
     direction: _constants.SmartLinkDirection.Horizontal,
     align: _constants.SmartLinkAlignment.Right,
-    position: _constants.SmartLinkPosition.Top
+    position: metadataPosition !== null && metadataPosition !== void 0 ? metadataPosition : _constants.SmartLinkPosition.Center
   }, metadataElements), actionGroup);
 };
 var _default = TitleBlockResolvedView;

package/dist/cjs/view/HoverCard/components/views/resolved/index.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.toFooterActions = exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _linkProvider = require("@atlaskit/link-provider");
@@ -106,7 +107,9 @@ var HoverCardResolvedView = function HoverCardResolvedView(_ref) {
     data: data,
     snippetHeight: snippetHeight.current
   });
-  return /*#__PURE__*/_react.default.createElement(_FlexibleCard.default, flexibleCardProps, /*#__PURE__*/_react.default.createElement(_blocks.TitleBlock, titleBlockProps), /*#__PURE__*/_react.default.createElement(_blocks.MetadataBlock, {
+  return /*#__PURE__*/_react.default.createElement(_FlexibleCard.default, flexibleCardProps, /*#__PURE__*/_react.default.createElement(_blocks.TitleBlock, (0, _extends2.default)({}, titleBlockProps, {
+    metadataPosition: _constants.SmartLinkPosition.Top
+  })), /*#__PURE__*/_react.default.createElement(_blocks.MetadataBlock, {
     primary: primary,
     secondary: secondary,
     size: _constants.SmartLinkSize.Large,

package/dist/es2019/version.json

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

package/dist/es2019/view/BlockCard/views/flexible/FlexibleResolvedView.js

@@ -75,7 +75,8 @@ const FlexibleResolvedView = ({
     hideRetry: true,
     subtitle: [{
       name: ElementName.Location
-    }]
+    }],
+    metadataPosition: SmartLinkPosition.Top
   }), /*#__PURE__*/React.createElement(MetadataBlock, {
     primary: metadata,
     maxLines: 1

package/dist/es2019/view/FlexibleCard/components/blocks/title-block/index.js

@@ -65,6 +65,7 @@ const TitleBlock = ({
   text,
   theme,
   hideRetry,
+  metadataPosition,
   ...props
 }) => {
   if (hideRetry && props.retry) {
@@ -105,7 +106,8 @@ const TitleBlock = ({
     actionGroup: actionGroup,
     overrideCss: combinedCss,
     testId: testId,
-    title: title
+    title: title,
+    metadataPosition: metadataPosition
   }));
 };
 export default TitleBlock;

package/dist/es2019/view/FlexibleCard/components/blocks/title-block/resolved/index.js

@@ -20,6 +20,7 @@ const TitleBlockResolvedView = ({
   testId,
   text,
   title,
+  metadataPosition,
   ...blockProps
 }) => {
   const metadataElements = renderElementItems(metadata);
@@ -39,7 +40,7 @@ const TitleBlockResolvedView = ({
   }, subtitleElements)), metadataElements && /*#__PURE__*/React.createElement(ElementGroup, {
     direction: SmartLinkDirection.Horizontal,
     align: SmartLinkAlignment.Right,
-    position: SmartLinkPosition.Top
+    position: metadataPosition !== null && metadataPosition !== void 0 ? metadataPosition : SmartLinkPosition.Center
   }, metadataElements), actionGroup);
 };
 export default TitleBlockResolvedView;

package/dist/es2019/view/HoverCard/components/views/resolved/index.js

@@ -1,7 +1,8 @@
+import _extends from "@babel/runtime/helpers/extends";
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { useFeatureFlag } from '@atlaskit/link-provider';
 import { extractType } from '@atlaskit/linking-common/extractors';
-import { ActionName, CardDisplay, SmartLinkSize } from '../../../../../constants';
+import { ActionName, CardDisplay, SmartLinkPosition, SmartLinkSize } from '../../../../../constants';
 import { FooterBlock, MetadataBlock, SnippetBlock, TitleBlock } from '../../../../FlexibleCard/components/blocks';
 import { footerBlockCss, hiddenSnippetStyles, metadataBlockCss } from './styled';
 import FlexibleCard from '../../../../FlexibleCard';
@@ -91,7 +92,9 @@ const HoverCardResolvedView = ({
     data: data,
     snippetHeight: snippetHeight.current
   });
-  return /*#__PURE__*/React.createElement(FlexibleCard, flexibleCardProps, /*#__PURE__*/React.createElement(TitleBlock, titleBlockProps), /*#__PURE__*/React.createElement(MetadataBlock, {
+  return /*#__PURE__*/React.createElement(FlexibleCard, flexibleCardProps, /*#__PURE__*/React.createElement(TitleBlock, _extends({}, titleBlockProps, {
+    metadataPosition: SmartLinkPosition.Top
+  })), /*#__PURE__*/React.createElement(MetadataBlock, {
     primary: primary,
     secondary: secondary,
     size: SmartLinkSize.Large,

package/dist/esm/version.json

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

package/dist/esm/view/BlockCard/views/flexible/FlexibleResolvedView.js

@@ -83,7 +83,8 @@ var FlexibleResolvedView = function FlexibleResolvedView(_ref) {
     hideRetry: true,
     subtitle: [{
       name: ElementName.Location
-    }]
+    }],
+    metadataPosition: SmartLinkPosition.Top
   }), /*#__PURE__*/React.createElement(MetadataBlock, {
     primary: metadata,
     maxLines: 1

package/dist/esm/view/FlexibleCard/components/blocks/title-block/index.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _excluded = ["actions", "anchorTarget", "hideTitleTooltip", "maxLines", "onActionMenuOpenChange", "onClick", "overrideCss", "status", "showActionOnHover", "testId", "text", "theme", "hideRetry"];
+var _excluded = ["actions", "anchorTarget", "hideTitleTooltip", "maxLines", "onActionMenuOpenChange", "onClick", "overrideCss", "status", "showActionOnHover", "testId", "text", "theme", "hideRetry", "metadataPosition"];
 var _templateObject, _templateObject2;
 import React, { useCallback, useState } from 'react';
 import { css } from '@emotion/react';
@@ -64,6 +64,7 @@ var TitleBlock = function TitleBlock(_ref) {
     text = _ref.text,
     theme = _ref.theme,
     hideRetry = _ref.hideRetry,
+    metadataPosition = _ref.metadataPosition,
     props = _objectWithoutProperties(_ref, _excluded);
   if (hideRetry && props.retry) {
     delete props.retry;
@@ -104,7 +105,8 @@ var TitleBlock = function TitleBlock(_ref) {
     actionGroup: actionGroup,
     overrideCss: combinedCss,
     testId: testId,
-    title: title
+    title: title,
+    metadataPosition: metadataPosition
   }));
 };
 export default TitleBlock;

package/dist/esm/view/FlexibleCard/components/blocks/title-block/resolved/index.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _templateObject;
-var _excluded = ["actionGroup", "metadata", "position", "subtitle", "testId", "text", "title"];
+var _excluded = ["actionGroup", "metadata", "position", "subtitle", "testId", "text", "title", "metadataPosition"];
 import React from 'react';
 import { css } from '@emotion/react';
 import { LinkIcon } from '../../../elements';
@@ -26,6 +26,7 @@ var TitleBlockResolvedView = function TitleBlockResolvedView(_ref) {
     testId = _ref.testId,
     text = _ref.text,
     title = _ref.title,
+    metadataPosition = _ref.metadataPosition,
     blockProps = _objectWithoutProperties(_ref, _excluded);
   var metadataElements = renderElementItems(metadata);
   var subtitleElements = renderElementItems(subtitle);
@@ -42,7 +43,7 @@ var TitleBlockResolvedView = function TitleBlockResolvedView(_ref) {
   }, subtitleElements)), metadataElements && /*#__PURE__*/React.createElement(ElementGroup, {
     direction: SmartLinkDirection.Horizontal,
     align: SmartLinkAlignment.Right,
-    position: SmartLinkPosition.Top
+    position: metadataPosition !== null && metadataPosition !== void 0 ? metadataPosition : SmartLinkPosition.Center
   }, metadataElements), actionGroup);
 };
 export default TitleBlockResolvedView;

package/dist/esm/view/HoverCard/components/views/resolved/index.js

@@ -1,10 +1,11 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { useFeatureFlag } from '@atlaskit/link-provider';
 import { extractType } from '@atlaskit/linking-common/extractors';
-import { ActionName, CardDisplay, SmartLinkSize } from '../../../../../constants';
+import { ActionName, CardDisplay, SmartLinkPosition, SmartLinkSize } from '../../../../../constants';
 import { FooterBlock, MetadataBlock, SnippetBlock, TitleBlock } from '../../../../FlexibleCard/components/blocks';
 import { footerBlockCss, hiddenSnippetStyles, metadataBlockCss } from './styled';
 import FlexibleCard from '../../../../FlexibleCard';
@@ -95,7 +96,9 @@ var HoverCardResolvedView = function HoverCardResolvedView(_ref) {
     data: data,
     snippetHeight: snippetHeight.current
   });
-  return /*#__PURE__*/React.createElement(FlexibleCard, flexibleCardProps, /*#__PURE__*/React.createElement(TitleBlock, titleBlockProps), /*#__PURE__*/React.createElement(MetadataBlock, {
+  return /*#__PURE__*/React.createElement(FlexibleCard, flexibleCardProps, /*#__PURE__*/React.createElement(TitleBlock, _extends({}, titleBlockProps, {
+    metadataPosition: SmartLinkPosition.Top
+  })), /*#__PURE__*/React.createElement(MetadataBlock, {
     primary: primary,
     secondary: secondary,
     size: SmartLinkSize.Large,

package/dist/types/view/FlexibleCard/components/blocks/title-block/types.d.ts

@@ -85,6 +85,11 @@ export type TitleBlockProps = {
      * @internal
      */
     theme?: SmartLinkTheme;
+    /**
+     * The vertical position of the metadata fields. Internal prop, please DO NOT USE.
+     * @internal
+     */
+    metadataPosition?: SmartLinkPosition;
 } & BlockProps;
 export type TitleBlockViewProps = TitleBlockProps & {
     actionGroup?: React.ReactNode;

package/dist/types-ts4.5/view/FlexibleCard/components/blocks/title-block/types.d.ts

@@ -85,6 +85,11 @@ export type TitleBlockProps = {
      * @internal
      */
     theme?: SmartLinkTheme;
+    /**
+     * The vertical position of the metadata fields. Internal prop, please DO NOT USE.
+     * @internal
+     */
+    metadataPosition?: SmartLinkPosition;
 } & BlockProps;
 export type TitleBlockViewProps = TitleBlockProps & {
     actionGroup?: React.ReactNode;

package/package.json

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

package/report.api.md

@@ -890,6 +890,7 @@ type TitleBlockProps = {
   subtitle?: ElementItem[];
   text?: string;
   theme?: SmartLinkTheme;
+  metadataPosition?: SmartLinkPosition;
 } & BlockProps;
 
 // @public (undocumented)

package/tmp/api-report-tmp.d.ts

@@ -747,6 +747,7 @@ type TitleBlockProps = {
     subtitle?: ElementItem[];
     text?: string;
     theme?: SmartLinkTheme;
+    metadataPosition?: SmartLinkPosition;
 } & BlockProps;
 
 // @public (undocumented)