@atlaskit/smart-card 26.5.8 → 26.5.10

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/smart-card
 
+## 26.5.10
+
+### Patch Changes
+
+- [`70f573b2c44`](https://bitbucket.org/atlassian/atlassian-frontend/commits/70f573b2c44) - Internal change to use space tokens for spacing properties. There is no visual change.
+
+## 26.5.9
+
+### Patch Changes
+
+- [`d394a5db254`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d394a5db254) - Fixes display analytics attribute provided by analytics context when the apperance is flexible
+
 ## 26.5.8
 
 ### Patch Changes

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

@@ -9,8 +9,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _react = _interopRequireDefault(require("react"));
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _resolvedAttributes = require("@atlaskit/link-analytics/resolved-attributes");
-var _flexible = require("../flexible");
-var _constants = require("../../constants");
 var _store = require("../../state/store");
 var _LinkAnalyticsContext = require("./LinkAnalyticsContext");
 /**
@@ -19,15 +17,14 @@ var _LinkAnalyticsContext = require("./LinkAnalyticsContext");
  */
 var SmartLinkAnalyticsContext = function SmartLinkAnalyticsContext(props) {
   var children = props.children,
-    appearance = props.appearance,
-    url = props.url;
+    url = props.url,
+    display = props.display;
   var _useSmartLinkState = (0, _store.useSmartCardState)(url),
     details = _useSmartLinkState.details,
     status = _useSmartLinkState.status;
   var attributes = (0, _resolvedAttributes.getResolvedAttributes)({
     url: url
   }, details, status);
-  var display = (0, _flexible.isFlexibleUiCard)(children) ? _constants.CardDisplay.Flexible : appearance;
   return /*#__PURE__*/_react.default.createElement(_LinkAnalyticsContext.LinkAnalyticsContext, (0, _extends2.default)({}, props, {
     display: display
   }), /*#__PURE__*/_react.default.createElement(_analyticsNext.AnalyticsContext, {

package/dist/cjs/version.json

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

package/dist/cjs/view/CardWithUrl/component.js

@@ -273,10 +273,14 @@ function Component(_ref) {
   }
 }
 var CardWithUrlContent = function CardWithUrlContent(props) {
-  return (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.enable-analytics-context') ? /*#__PURE__*/_react.default.createElement(_SmartLinkAnalyticsContext.SmartLinkAnalyticsContext, {
-    url: props.url,
-    appearance: props.appearance,
-    id: props.id
-  }, /*#__PURE__*/_react.default.createElement(Component, props)) : /*#__PURE__*/_react.default.createElement(Component, props);
+  if ((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.enable-analytics-context')) {
+    var display = (0, _flexible.isFlexibleUiCard)(props.children) ? _constants.CardDisplay.Flexible : props.appearance;
+    return /*#__PURE__*/_react.default.createElement(_SmartLinkAnalyticsContext.SmartLinkAnalyticsContext, {
+      url: props.url,
+      id: props.id,
+      display: display
+    }, /*#__PURE__*/_react.default.createElement(Component, props));
+  }
+  return /*#__PURE__*/_react.default.createElement(Component, props);
 };
 exports.CardWithUrlContent = CardWithUrlContent;

package/dist/cjs/view/EmbedCard/views/UnresolvedView.js

@@ -12,6 +12,7 @@ var _constants = require("@atlaskit/theme/constants");
 var _reactIntlNext = require("react-intl-next");
 var _messages = require("../../../messages");
 var _utils = require("../../common/utils");
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage-spacing */
 /** @jsx jsx */
 
 var EmbedCardUnresolvedView = function EmbedCardUnresolvedView(_ref) {

package/dist/cjs/view/HoverCard/components/HoverCardComponent.js

@@ -166,7 +166,7 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
     });
     return (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.enable-analytics-context') ? (0, _react.jsx)(_SmartLinkAnalyticsContext.SmartLinkAnalyticsContext, {
       url: url,
-      appearance: _constants.CardDisplay.HoverCardPreview,
+      display: _constants.CardDisplay.HoverCardPreview,
       id: id,
       source: HOVER_CARD_SOURCE
     }, (0, _react.jsx)(_HoverCardContent.default, hoverCardContentProps)) : (0, _react.jsx)(_HoverCardContent.default, hoverCardContentProps);

package/dist/cjs/view/InlineCard/Icon.js

@@ -27,10 +27,12 @@ var Shimmer = function Shimmer(_ref) {
   var testId = _ref.testId;
   var skeletonCustomStyles = {
     position: 'absolute',
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
     top: '50%',
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
     left: '50%',
     transform: 'translate(-50%, -50%)',
-    marginRight: 4
+    marginRight: "var(--ds-space-050, 4px)"
   };
   return /*#__PURE__*/_react.default.createElement(_linkingCommon.Skeleton, {
     width: 14,

package/dist/cjs/view/common/Metadata.js

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.Metadata = void 0;
 var _react = require("@emotion/react");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
-var _utils = require("./utils");
 var _colors = require("@atlaskit/theme/colors");
 /** @jsx jsx */
 
@@ -21,8 +20,8 @@ var Metadata = function Metadata(_ref) {
     metadataIcon = (0, _react.jsx)("img", {
       src: iconUrl,
       css: {
-        width: (0, _utils.gs)(1),
-        height: (0, _utils.gs)(1)
+        width: "var(--ds-space-100, 8px)",
+        height: "var(--ds-space-100, 8px)"
       }
     });
   }
@@ -30,14 +29,14 @@ var Metadata = function Metadata(_ref) {
     css: {
       display: 'flex',
       alignItems: 'center',
-      marginRight: (0, _utils.gs)(0.5)
+      marginRight: "var(--ds-space-050, 4px)"
     }
   }, metadataIcon, (0, _react.jsx)("span", {
     css: {
-      fontSize: (0, _utils.gs)(1.5),
+      fontSize: "var(--ds-space-150, 12px)",
       color: "".concat("var(--ds-text-subtlest, ".concat(_colors.N300, ")")),
-      marginRight: (0, _utils.gs)(0.5),
-      marginLeft: '2px'
+      marginRight: "var(--ds-space-050, 4px)",
+      marginLeft: "var(--ds-space-025, 2px)"
     }
   }, text));
   if (tooltip) {

package/dist/es2019/utils/analytics/SmartLinkAnalyticsContext.js

@@ -2,8 +2,6 @@ import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
 import { getResolvedAttributes } from '@atlaskit/link-analytics/resolved-attributes';
-import { isFlexibleUiCard } from '../flexible';
-import { CardDisplay } from '../../constants';
 import { useSmartCardState as useSmartLinkState } from '../../state/store';
 import { LinkAnalyticsContext } from './LinkAnalyticsContext';
 /**
@@ -13,8 +11,8 @@ import { LinkAnalyticsContext } from './LinkAnalyticsContext';
 export const SmartLinkAnalyticsContext = props => {
   const {
     children,
-    appearance,
-    url
+    url,
+    display
   } = props;
   const {
     details,
@@ -23,7 +21,6 @@ export const SmartLinkAnalyticsContext = props => {
   const attributes = getResolvedAttributes({
     url
   }, details, status);
-  const display = isFlexibleUiCard(children) ? CardDisplay.Flexible : appearance;
   return /*#__PURE__*/React.createElement(LinkAnalyticsContext, _extends({}, props, {
     display: display
   }), /*#__PURE__*/React.createElement(AnalyticsContext, {

package/dist/es2019/version.json

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

package/dist/es2019/view/CardWithUrl/component.js

@@ -259,8 +259,14 @@ function Component({
       });
   }
 }
-export const CardWithUrlContent = props => getBooleanFF('platform.linking-platform.smart-card.enable-analytics-context') ? /*#__PURE__*/React.createElement(SmartLinkAnalyticsContext, {
-  url: props.url,
-  appearance: props.appearance,
-  id: props.id
-}, /*#__PURE__*/React.createElement(Component, props)) : /*#__PURE__*/React.createElement(Component, props);
+export const CardWithUrlContent = props => {
+  if (getBooleanFF('platform.linking-platform.smart-card.enable-analytics-context')) {
+    const display = isFlexibleUiCard(props.children) ? CardDisplay.Flexible : props.appearance;
+    return /*#__PURE__*/React.createElement(SmartLinkAnalyticsContext, {
+      url: props.url,
+      id: props.id,
+      display: display
+    }, /*#__PURE__*/React.createElement(Component, props));
+  }
+  return /*#__PURE__*/React.createElement(Component, props);
+};

package/dist/es2019/view/EmbedCard/views/UnresolvedView.js

@@ -1,4 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage-spacing */
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 import Button from '@atlaskit/button/custom-theme-button';

package/dist/es2019/view/HoverCard/components/HoverCardComponent.js

@@ -146,7 +146,7 @@ export const HoverCardComponent = ({
     };
     return getBooleanFF('platform.linking-platform.smart-card.enable-analytics-context') ? jsx(SmartLinkAnalyticsContext, {
       url: url,
-      appearance: CardDisplay.HoverCardPreview,
+      display: CardDisplay.HoverCardPreview,
       id: id,
       source: HOVER_CARD_SOURCE
     }, jsx(HoverCardContent, hoverCardContentProps)) : jsx(HoverCardContent, hoverCardContentProps);

package/dist/es2019/view/InlineCard/Icon.js

@@ -30,10 +30,12 @@ export const Shimmer = ({
 }) => {
   const skeletonCustomStyles = {
     position: 'absolute',
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
     top: '50%',
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
     left: '50%',
     transform: 'translate(-50%, -50%)',
-    marginRight: 4
+    marginRight: "var(--ds-space-050, 4px)"
   };
   return /*#__PURE__*/React.createElement(Skeleton, {
     width: 14,

package/dist/es2019/view/common/Metadata.js

@@ -1,7 +1,6 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 import Tooltip from '@atlaskit/tooltip';
-import { gs } from './utils';
 import { N300 } from '@atlaskit/theme/colors';
 export const Metadata = ({
   text,
@@ -14,8 +13,8 @@ export const Metadata = ({
     metadataIcon = jsx("img", {
       src: iconUrl,
       css: {
-        width: gs(1),
-        height: gs(1)
+        width: "var(--ds-space-100, 8px)",
+        height: "var(--ds-space-100, 8px)"
       }
     });
   }
@@ -23,14 +22,14 @@ export const Metadata = ({
     css: {
       display: 'flex',
       alignItems: 'center',
-      marginRight: gs(0.5)
+      marginRight: "var(--ds-space-050, 4px)"
     }
   }, metadataIcon, jsx("span", {
     css: {
-      fontSize: gs(1.5),
+      fontSize: "var(--ds-space-150, 12px)",
       color: `${`var(--ds-text-subtlest, ${N300})`}`,
-      marginRight: gs(0.5),
-      marginLeft: '2px'
+      marginRight: "var(--ds-space-050, 4px)",
+      marginLeft: "var(--ds-space-025, 2px)"
     }
   }, text));
   if (tooltip) {

package/dist/esm/utils/analytics/SmartLinkAnalyticsContext.js

@@ -2,8 +2,6 @@ import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
 import { getResolvedAttributes } from '@atlaskit/link-analytics/resolved-attributes';
-import { isFlexibleUiCard } from '../flexible';
-import { CardDisplay } from '../../constants';
 import { useSmartCardState as useSmartLinkState } from '../../state/store';
 import { LinkAnalyticsContext } from './LinkAnalyticsContext';
 /**
@@ -12,15 +10,14 @@ import { LinkAnalyticsContext } from './LinkAnalyticsContext';
  */
 export var SmartLinkAnalyticsContext = function SmartLinkAnalyticsContext(props) {
   var children = props.children,
-    appearance = props.appearance,
-    url = props.url;
+    url = props.url,
+    display = props.display;
   var _useSmartLinkState = useSmartLinkState(url),
     details = _useSmartLinkState.details,
     status = _useSmartLinkState.status;
   var attributes = getResolvedAttributes({
     url: url
   }, details, status);
-  var display = isFlexibleUiCard(children) ? CardDisplay.Flexible : appearance;
   return /*#__PURE__*/React.createElement(LinkAnalyticsContext, _extends({}, props, {
     display: display
   }), /*#__PURE__*/React.createElement(AnalyticsContext, {

package/dist/esm/version.json

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

package/dist/esm/view/CardWithUrl/component.js

@@ -263,9 +263,13 @@ function Component(_ref) {
   }
 }
 export var CardWithUrlContent = function CardWithUrlContent(props) {
-  return getBooleanFF('platform.linking-platform.smart-card.enable-analytics-context') ? /*#__PURE__*/React.createElement(SmartLinkAnalyticsContext, {
-    url: props.url,
-    appearance: props.appearance,
-    id: props.id
-  }, /*#__PURE__*/React.createElement(Component, props)) : /*#__PURE__*/React.createElement(Component, props);
+  if (getBooleanFF('platform.linking-platform.smart-card.enable-analytics-context')) {
+    var display = isFlexibleUiCard(props.children) ? CardDisplay.Flexible : props.appearance;
+    return /*#__PURE__*/React.createElement(SmartLinkAnalyticsContext, {
+      url: props.url,
+      id: props.id,
+      display: display
+    }, /*#__PURE__*/React.createElement(Component, props));
+  }
+  return /*#__PURE__*/React.createElement(Component, props);
 };

package/dist/esm/view/EmbedCard/views/UnresolvedView.js

@@ -1,4 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage-spacing */
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 import Button from '@atlaskit/button/custom-theme-button';

package/dist/esm/view/HoverCard/components/HoverCardComponent.js

@@ -157,7 +157,7 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
     });
     return getBooleanFF('platform.linking-platform.smart-card.enable-analytics-context') ? jsx(SmartLinkAnalyticsContext, {
       url: url,
-      appearance: CardDisplay.HoverCardPreview,
+      display: CardDisplay.HoverCardPreview,
       id: id,
       source: HOVER_CARD_SOURCE
     }, jsx(HoverCardContent, hoverCardContentProps)) : jsx(HoverCardContent, hoverCardContentProps);

package/dist/esm/view/InlineCard/Icon.js

@@ -19,10 +19,12 @@ export var Shimmer = function Shimmer(_ref) {
   var testId = _ref.testId;
   var skeletonCustomStyles = {
     position: 'absolute',
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
     top: '50%',
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
     left: '50%',
     transform: 'translate(-50%, -50%)',
-    marginRight: 4
+    marginRight: "var(--ds-space-050, 4px)"
   };
   return /*#__PURE__*/React.createElement(Skeleton, {
     width: 14,

package/dist/esm/view/common/Metadata.js

@@ -1,7 +1,6 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 import Tooltip from '@atlaskit/tooltip';
-import { gs } from './utils';
 import { N300 } from '@atlaskit/theme/colors';
 export var Metadata = function Metadata(_ref) {
   var text = _ref.text,
@@ -13,8 +12,8 @@ export var Metadata = function Metadata(_ref) {
     metadataIcon = jsx("img", {
       src: iconUrl,
       css: {
-        width: gs(1),
-        height: gs(1)
+        width: "var(--ds-space-100, 8px)",
+        height: "var(--ds-space-100, 8px)"
       }
     });
   }
@@ -22,14 +21,14 @@ export var Metadata = function Metadata(_ref) {
     css: {
       display: 'flex',
       alignItems: 'center',
-      marginRight: gs(0.5)
+      marginRight: "var(--ds-space-050, 4px)"
     }
   }, metadataIcon, jsx("span", {
     css: {
-      fontSize: gs(1.5),
+      fontSize: "var(--ds-space-150, 12px)",
       color: "".concat("var(--ds-text-subtlest, ".concat(N300, ")")),
-      marginRight: gs(0.5),
-      marginLeft: '2px'
+      marginRight: "var(--ds-space-050, 4px)",
+      marginLeft: "var(--ds-space-025, 2px)"
     }
   }, text));
   if (tooltip) {

package/dist/types/utils/analytics/SmartLinkAnalyticsContext.d.ts

@@ -1,8 +1,7 @@
 import React from 'react';
-import { CardInnerAppearance } from '../../view/Card/types';
 type SmartLinkAnalyticsContextProps = {
     url: string;
-    appearance: CardInnerAppearance;
+    display?: string;
     id?: string | undefined;
     source?: string;
     children?: React.ReactNode;

package/dist/types-ts4.5/utils/analytics/SmartLinkAnalyticsContext.d.ts

@@ -1,8 +1,7 @@
 import React from 'react';
-import { CardInnerAppearance } from '../../view/Card/types';
 type SmartLinkAnalyticsContextProps = {
     url: string;
-    appearance: CardInnerAppearance;
+    display?: string;
     id?: string | undefined;
     source?: string;
     children?: React.ReactNode;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "26.5.8",
+  "version": "26.5.10",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -36,7 +36,7 @@
     "@atlaskit/avatar-group": "^9.3.0",
     "@atlaskit/button": "^16.7.0",
     "@atlaskit/dropdown-menu": "^11.9.0",
-    "@atlaskit/frontend-utilities": "^2.6.0",
+    "@atlaskit/frontend-utilities": "^2.7.0",
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/icon-file-type": "^6.4.0",
     "@atlaskit/icon-object": "^6.3.0",