@atlaskit/smart-card 26.3.9 → 26.4.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @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
+
+- [`d8263ae659f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d8263ae659f) - [ux] Small css fix for avatar alignment in smart links
+- [`438b90799c4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/438b90799c4) - Removes urlHash from linking platform events.
+
 ## 26.3.9
 
 ### Patch Changes

package/dist/cjs/utils/analytics/LinkAnalyticsContext.js

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.LinkAnalyticsContext = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _analyticsNext = require("@atlaskit/analytics-next");
-var _resolvedAttributes = require("@atlaskit/link-analytics/resolved-attributes");
 /**
  * Provides an analytics context to supply attributes to events based on a URL
  */
@@ -18,15 +17,12 @@ var LinkAnalyticsContext = function LinkAnalyticsContext(_ref) {
     id = _ref.id,
     children = _ref.children,
     source = _ref.source;
-  var _getUrlAttributes = (0, _resolvedAttributes.getUrlAttributes)(url),
-    urlHash = _getUrlAttributes.urlHash;
   var displayCategory = display === 'url' ? 'link' : undefined;
   return /*#__PURE__*/_react.default.createElement(_analyticsNext.AnalyticsContext, {
     data: {
       source: source,
       attributes: {
         displayCategory: displayCategory,
-        urlHash: urlHash,
         display: display,
         id: id
       }

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "26.3.9",
+	"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/FlexibleCard/components/elements/avatar-group/index.js

@@ -14,7 +14,8 @@ var _templateObject, _templateObject2;
 /** @jsx jsx */
 var MAX_COUNT = 4;
 var getStyles = function getStyles(size) {
-  var styles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    display: inline-flex;\n  "])));
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+  var styles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    display: inline-flex;\n    ul {\n      margin-right: 8px;\n    }\n  "])));
   switch (size) {
     case _constants.SmartLinkSize.XLarge:
     case _constants.SmartLinkSize.Large:

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/utils/analytics/LinkAnalyticsContext.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
-import { getUrlAttributes } from '@atlaskit/link-analytics/resolved-attributes';
 /**
  * Provides an analytics context to supply attributes to events based on a URL
  */
@@ -11,16 +10,12 @@ export const LinkAnalyticsContext = ({
   children,
   source
 }) => {
-  const {
-    urlHash
-  } = getUrlAttributes(url);
   const displayCategory = display === 'url' ? 'link' : undefined;
   return /*#__PURE__*/React.createElement(AnalyticsContext, {
     data: {
       source,
       attributes: {
         displayCategory,
-        urlHash,
         display,
         id
       }

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "26.3.9",
+	"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/FlexibleCard/components/elements/avatar-group/index.js

@@ -5,8 +5,12 @@ import AtlaskitAvatarGroup from '@atlaskit/avatar-group';
 import { SmartLinkSize } from '../../../../../constants';
 const MAX_COUNT = 4;
 const getStyles = size => {
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   const styles = css`
     display: inline-flex;
+    ul {
+      margin-right: 8px;
+    }
   `;
   switch (size) {
     case SmartLinkSize.XLarge:

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/utils/analytics/LinkAnalyticsContext.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
-import { getUrlAttributes } from '@atlaskit/link-analytics/resolved-attributes';
 /**
  * Provides an analytics context to supply attributes to events based on a URL
  */
@@ -11,15 +10,12 @@ export var LinkAnalyticsContext = function LinkAnalyticsContext(_ref) {
     id = _ref.id,
     children = _ref.children,
     source = _ref.source;
-  var _getUrlAttributes = getUrlAttributes(url),
-    urlHash = _getUrlAttributes.urlHash;
   var displayCategory = display === 'url' ? 'link' : undefined;
   return /*#__PURE__*/React.createElement(AnalyticsContext, {
     data: {
       source: source,
       attributes: {
         displayCategory: displayCategory,
-        urlHash: urlHash,
         display: display,
         id: id
       }

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "26.3.9",
+	"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/FlexibleCard/components/elements/avatar-group/index.js

@@ -7,7 +7,8 @@ import AtlaskitAvatarGroup from '@atlaskit/avatar-group';
 import { SmartLinkSize } from '../../../../../constants';
 var MAX_COUNT = 4;
 var getStyles = function getStyles(size) {
-  var styles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: inline-flex;\n  "])));
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+  var styles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: inline-flex;\n    ul {\n      margin-right: 8px;\n    }\n  "])));
   switch (size) {
     case SmartLinkSize.XLarge:
     case SmartLinkSize.Large:

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.9",
+  "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)