@atlaskit/smart-card 26.26.2 → 26.27.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/smart-card
 
+## 26.27.1
+
+### Patch Changes
+
+- [`3c60160da56`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3c60160da56) - Update usages of token color.border.input to color.input
+
+## 26.27.0
+
+### Minor Changes
+
+- [`12f9e6886ed`](https://bitbucket.org/atlassian/atlassian-frontend/commits/12f9e6886ed) - [ux] Add follow/unfollow button to card and hover preview (behind feature flag).
+
 ## 26.26.2
 
 ### Patch Changes

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

@@ -23,7 +23,7 @@ exports.ANALYTICS_CHANNEL = ANALYTICS_CHANNEL;
 var context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.26.2"
+  packageVersion: "26.27.1"
 };
 exports.context = context;
 var TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {

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

@@ -10,7 +10,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _FlexibleCard = _interopRequireDefault(require("../../../FlexibleCard"));
-var _titleBlock = _interopRequireDefault(require("../../../FlexibleCard/components/blocks/title-block"));
 var _blocks = require("../../../FlexibleCard/components/blocks");
 var _styled = require("./styled");
 var _constants = require("../../../../constants");
@@ -48,6 +47,21 @@ var FlexibleResolvedView = function FlexibleResolvedView(_ref) {
     titleMetadata = _ref2.titleMetadata,
     topMetadata = _ref2.topMetadata,
     bottomMetadata = _ref2.bottomMetadata;
+  var footerActions = (0, _react.useMemo)(function () {
+    return [{
+      name: _constants.ActionName.FollowAction,
+      hideIcon: true
+    }, {
+      name: _constants.ActionName.PreviewAction,
+      hideIcon: true
+    }, {
+      name: _constants.ActionName.ViewAction,
+      hideIcon: true
+    }, {
+      name: _constants.ActionName.DownloadAction,
+      hideIcon: true
+    }];
+  }, []);
   return /*#__PURE__*/_react.default.createElement(_FlexibleCard.default, {
     analytics: analytics,
     appearance: "block",
@@ -61,7 +75,7 @@ var FlexibleResolvedView = function FlexibleResolvedView(_ref) {
       hideElevation: true
     },
     url: url
-  }, /*#__PURE__*/_react.default.createElement(_titleBlock.default, (0, _extends2.default)({
+  }, /*#__PURE__*/_react.default.createElement(_blocks.TitleBlock, (0, _extends2.default)({
     position: _constants.SmartLinkPosition.Center,
     metadata: titleMetadata,
     hideRetry: true,
@@ -88,16 +102,7 @@ var FlexibleResolvedView = function FlexibleResolvedView(_ref) {
   }) : null, /*#__PURE__*/_react.default.createElement(_blocks.FooterBlock, (0, _extends2.default)({}, (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.enable-better-metadata_iojwg') && {
     overrideCss: _styled.footerBlockCss
   }, {
-    actions: [{
-      name: _constants.ActionName.PreviewAction,
-      hideIcon: true
-    }, {
-      name: _constants.ActionName.ViewAction,
-      hideIcon: true
-    }, {
-      name: _constants.ActionName.DownloadAction,
-      hideIcon: true
-    }]
+    actions: footerActions
   })));
 };
 var _default = (0, _withFlexibleUIBlockCardStyle.withFlexibleUIBlockCardStyle)(FlexibleResolvedView);

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

@@ -19,6 +19,6 @@ exports.titleBlockCss = titleBlockCss;
 var footerBlockCss = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  height: 1.5rem;\n\n  .actions-button-group {\n    button,\n    button:hover,\n    button:focus,\n    button:active {\n      font-size: 0.875rem;\n    }\n  }\n"])));
 exports.footerBlockCss = footerBlockCss;
 var flexibleBlockCardElevationStyle = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: 1.5px;\n  box-shadow: ", ";\n  margin: ", ";\n"])), _token.tokens.elevation, "var(--ds-space-025, 2px)");
-var refreshedFlexibleBlockCardStyle = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  & > div {\n    border-radius: ", ";\n    border: 1px solid ", ";\n  }\n"])), "var(--ds-border-radius-200, 8px)", "var(--ds-border-input, ".concat(_colors.N40, ")"));
+var refreshedFlexibleBlockCardStyle = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  & > div {\n    border-radius: ", ";\n    border: 1px solid ", ";\n  }\n"])), "var(--ds-border-radius-200, 8px)", "var(--ds-border, ".concat(_colors.N40, ")"));
 var flexibleBlockCardStyle = (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? refreshedFlexibleBlockCardStyle : flexibleBlockCardElevationStyle;
 exports.flexibleBlockCardStyle = flexibleBlockCardStyle;

package/dist/cjs/view/EmbedCard/components/styled.js

@@ -68,7 +68,7 @@ var height = function height(_ref5) {
 var wrapperStyles = function wrapperStyles(props) {
   return "\n  ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? wrapperBorderRadius : borderRadius, "\n  ").concat(minWidth(props), "\n  ").concat(maxWidth(props), "\n  ").concat(getInteractiveStyles(props), "\n  ").concat(visible(props), "\n  display: inline-flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  font-family: ").concat((0, _constants.fontFamily)(), ";\n  width: 100%;\n  user-select: none;\n  line-height: initial;\n  transition: background 0.3s;\n  position: relative;\n  ").concat(height(props), ";\n  ").concat(selected(props), "\n\n  &:after {\n    content: '';\n    transition: background 0.3s, box-shadow 0.3s;\n    position: absolute;\n    width: calc(100% + ", "var(--ds-space-200, 16px)", ");\n    height: calc(100% + ", "var(--ds-space-100, 8px)", ");\n    left: ", "var(--ds-space-negative-100, -8px)", ";\n    ").concat((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? wrapperBorderRadius : "background: transparent;\n           ".concat(borderRadius), "\n  }\n");
 };
-var visibleStyles = "\n  ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? "" : "background-color: ".concat("var(--ds-background-neutral-subtle, ".concat(colors.N30, ")"), ";"), "\n\n  &:after {\n    ").concat((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? "border: 1px solid ".concat("var(--ds-border-input, ".concat(colors.N40, ")"), ";\n           background-color: ", (0, _components.themed)({
+var visibleStyles = "\n  ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? "" : "background-color: ".concat("var(--ds-background-neutral-subtle, ".concat(colors.N30, ")"), ";"), "\n\n  &:after {\n    ").concat((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? "border: 1px solid ".concat("var(--ds-border, ".concat(colors.N40, ")"), ";\n           background-color: ", (0, _components.themed)({
   light: "var(--ds-surface-raised, white)",
   dark: "var(--ds-surface-raised, ".concat(BACKGROUND_COLOR_DARK, ")")
 })(), ";") : "background: ".concat("var(--ds-background-neutral, ".concat(colors.N30, ")"), " !important;"), "\n  }\n  .embed-header {\n    opacity: 1;\n  }");
@@ -111,7 +111,7 @@ exports.TextWrapper = TextWrapper;
 // NB: `overflow` is kept as `hidden` since
 // the internal contents of the `iframe` should
 // manage scrolling behaviour.
-var Content = _styled.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  background-color: ", ";\n  position: absolute;\n  z-index: 1;\n  width: 100%;\n  transition: box-shadow 0.3s;\n\n  > .calc-height > div > div {\n    left: unset !important;\n    width: unset !important;\n    height: unset !important;\n    position: initial !important;\n    padding-bottom: unset !important;\n  }\n  > .embed-preview > div {\n    margin: 0 auto;\n  }\n\n  ", ";\n\n  ", "\n\n  ", "\n"])), (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? "".concat(contentBorderRadius, ";\n       border: 1px solid ", "var(--ds-border-input, ".concat(colors.N40, ")"), ";") : borderRadius, "var(--ds-surface-raised, white)", function (_ref9) {
+var Content = _styled.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  background-color: ", ";\n  position: absolute;\n  z-index: 1;\n  width: 100%;\n  transition: box-shadow 0.3s;\n\n  > .calc-height > div > div {\n    left: unset !important;\n    width: unset !important;\n    height: unset !important;\n    position: initial !important;\n    padding-bottom: unset !important;\n  }\n  > .embed-preview > div {\n    margin: 0 auto;\n  }\n\n  ", ";\n\n  ", "\n\n  ", "\n"])), (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? "".concat(contentBorderRadius, ";\n       border: 1px solid ", "var(--ds-border, ".concat(colors.N40, ")"), ";") : borderRadius, "var(--ds-surface-raised, white)", function (_ref9) {
   var isInteractive = _ref9.isInteractive;
   if (isInteractive && !(0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.show-smart-links-refreshed-design')) {
     return "\n          .".concat(className, ":hover & {\n            box-shadow: ", "var(--ds-shadow-overlay, 0 4px 8px -2px rgba(23, 43, 77, 0.32), 0 0 1px rgba(23, 43, 77, 0.25))", ";\n          }\n        ");

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

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.toFooterActions = exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _constants = require("../../../../../constants");
 var _blocks = require("../../../../FlexibleCard/components/blocks");
@@ -21,7 +22,11 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 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 toFooterActions = function toFooterActions(cardActions, onActionClick) {
-  return cardActions.map(function (action) {
+  var followAction = {
+    hideIcon: true,
+    name: _constants.ActionName.FollowAction
+  };
+  var actions = cardActions.map(function (action) {
     if (action.id === 'preview-content') {
       return {
         content: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.preview_improved),
@@ -48,6 +53,7 @@ var toFooterActions = function toFooterActions(cardActions, onActionClick) {
       testId: action.id
     };
   });
+  return [followAction].concat((0, _toConsumableArray2.default)(actions));
 };
 exports.toFooterActions = toFooterActions;
 var HoverCardResolvedView = function HoverCardResolvedView(_ref) {

package/dist/cjs/view/LinkUrl/index.js

@@ -18,7 +18,7 @@ var _excluded = ["href", "children", "checkSafety", "onClick", "testId"],
   _excluded2 = ["isLinkSafe", "showSafetyWarningModal"];
 var PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.26.2",
+  packageVersion: "26.27.1",
   componentName: 'linkUrl'
 };
 var Link = (0, _click.withLinkClickedEvent)('a');

package/dist/cjs/view/RedesignedInlineCard/Frame/styled.js

@@ -11,7 +11,7 @@ var _colors = require("@atlaskit/theme/colors");
 var _components = require("@atlaskit/theme/components");
 var _templateObject, _templateObject2;
 var BACKGROUND_COLOR_DARK = '#262B31';
-var selected = "\n  cursor: pointer;\n  box-shadow: 0 0 0 2px ".concat("var(--ds-border-selected, ".concat(_colors.B100, ")"), ";\n  outline: none;\n  user-select: none;\n  &, :hover, :focus, :active {\n    text-decoration: none;\n  }\n  &:hover {\n    border: 1px solid ", "var(--ds-border-input, ".concat(_colors.N40, ")"), ";\n  }\n");
+var selected = "\n  cursor: pointer;\n  box-shadow: 0 0 0 2px ".concat("var(--ds-border-selected, ".concat(_colors.B100, ")"), ";\n  outline: none;\n  user-select: none;\n  &, :hover, :focus, :active {\n    text-decoration: none;\n  }\n  &:hover {\n    border: 1px solid ", "var(--ds-border, ".concat(_colors.N40, ")"), ";\n  }\n");
 var isInteractive = function isInteractive(_ref) {
   var isInteractive = _ref.isInteractive;
   if (isInteractive) {
@@ -55,8 +55,8 @@ var baseWrapperStyle = function baseWrapperStyle(props) {
     light: "var(--ds-surface-raised, white)",
     dark: "var(--ds-surface-raised, ".concat(BACKGROUND_COLOR_DARK, ")")
   })(props), ";\n\n  ").concat(isSelected(props), ";\n\n  ").concat(props.withoutBackground ? '' : (0, _components.themed)({
-    light: "border: 1px solid ".concat("var(--ds-border-input, ".concat(_colors.N40, ")"), ";"),
-    dark: "border: 1px solid ".concat("var(--ds-border-input, ".concat(_colors.N500, ")"), ";")
+    light: "border: 1px solid ".concat("var(--ds-border, ".concat(_colors.N40, ")"), ";"),
+    dark: "border: 1px solid ".concat("var(--ds-border, ".concat(_colors.N500, ")"), ";")
   })(props), "\n  &:hover {\n    ").concat((0, _components.themed)({
     light: "border-color: ".concat("var(--ds-border-accent-blue, ".concat(_colors.B200, ")"), ";"),
     dark: "border-color:  ".concat("var(--ds-border-accent-blue, ".concat(_colors.B200, ")"), ";")

package/dist/cjs/view/RedesignedInlineCard/utils/withFrameStyleControl.js

@@ -19,8 +19,8 @@ var _default = function _default(Button, frameRef) {
   return function (props) {
     var setBorderStyle = function setBorderStyle() {
       var borderColor = (0, _components.themed)({
-        light: "".concat("var(--ds-border-input, ".concat(_colors.N40, ")")),
-        dark: "".concat("var(--ds-border-input, ".concat(_colors.N500, ")"))
+        light: "".concat("var(--ds-border, ".concat(_colors.N40, ")")),
+        dark: "".concat("var(--ds-border, ".concat(_colors.N500, ")"))
       })();
       var frameNode = frameRef.current;
       if (frameNode) {

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

@@ -4,7 +4,7 @@ export const ANALYTICS_CHANNEL = 'media';
 export const context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.26.2"
+  packageVersion: "26.27.1"
 };
 export let TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

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

@@ -1,14 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import FlexibleCard from '../../../FlexibleCard';
-import TitleBlock from '../../../FlexibleCard/components/blocks/title-block';
-import { FooterBlock, MetadataBlock, PreviewBlock, SnippetBlock } from '../../../FlexibleCard/components/blocks';
+import { FooterBlock, MetadataBlock, PreviewBlock, SnippetBlock, TitleBlock } from '../../../FlexibleCard/components/blocks';
 import { metadataBlockCss, footerBlockCss } from './styled';
 import { ActionName, ElementName, MediaPlacement, SmartLinkPosition } from '../../../../constants';
 import { getSimulatedMetadata, getSimulatedBetterMetadata } from './utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { withFlexibleUIBlockCardStyle } from './utils/withFlexibleUIBlockCardStyle';
-
 /**
  * This view represents a Block card that has an 'Resolved' status.
  * @see SmartLinkStatus
@@ -36,6 +34,19 @@ const FlexibleResolvedView = ({
     topMetadata,
     bottomMetadata
   } = getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') ? getSimulatedBetterMetadata(cardState.details) : getSimulatedMetadata(cardState.details);
+  const footerActions = useMemo(() => [{
+    name: ActionName.FollowAction,
+    hideIcon: true
+  }, {
+    name: ActionName.PreviewAction,
+    hideIcon: true
+  }, {
+    name: ActionName.ViewAction,
+    hideIcon: true
+  }, {
+    name: ActionName.DownloadAction,
+    hideIcon: true
+  }], []);
   return /*#__PURE__*/React.createElement(FlexibleCard, {
     analytics: analytics,
     appearance: "block",
@@ -76,16 +87,7 @@ const FlexibleResolvedView = ({
   }) : null, /*#__PURE__*/React.createElement(FooterBlock, _extends({}, getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') && {
     overrideCss: footerBlockCss
   }, {
-    actions: [{
-      name: ActionName.PreviewAction,
-      hideIcon: true
-    }, {
-      name: ActionName.ViewAction,
-      hideIcon: true
-    }, {
-      name: ActionName.DownloadAction,
-      hideIcon: true
-    }]
+    actions: footerActions
   })));
 };
 export default withFlexibleUIBlockCardStyle(FlexibleResolvedView);

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

@@ -41,7 +41,7 @@ const flexibleBlockCardElevationStyle = css`
 const refreshedFlexibleBlockCardStyle = css`
   & > div {
     border-radius: ${"var(--ds-border-radius-200, 8px)"};
-    border: 1px solid ${`var(--ds-border-input, ${N40})`};
+    border: 1px solid ${`var(--ds-border, ${N40})`};
   }
 `;
 export const flexibleBlockCardStyle = getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? refreshedFlexibleBlockCardStyle : flexibleBlockCardElevationStyle;

package/dist/es2019/view/EmbedCard/components/styled.js

@@ -122,7 +122,7 @@ const visibleStyles = `
   ${getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? `` : `background-color: ${`var(--ds-background-neutral-subtle, ${colors.N30})`};`}
 
   &:after {
-    ${getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? `border: 1px solid ${`var(--ds-border-input, ${N40})`};
+    ${getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? `border: 1px solid ${`var(--ds-border, ${N40})`};
            background-color: ${themed({
   light: "var(--ds-surface-raised, white)",
   dark: `var(--ds-surface-raised, ${BACKGROUND_COLOR_DARK})`
@@ -198,7 +198,7 @@ export const TextWrapper = styled.div`
 // manage scrolling behaviour.
 export const Content = styled.div`
   ${getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? `${contentBorderRadius};
-       border: 1px solid ${`var(--ds-border-input, ${N40})`};` : borderRadius}
+       border: 1px solid ${`var(--ds-border, ${N40})`};` : borderRadius}
   background-color: ${"var(--ds-surface-raised, white)"};
   position: absolute;
   z-index: 1;

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

@@ -11,7 +11,11 @@ import { messages } from '../../../../../messages';
 import { FormattedMessage } from 'react-intl-next';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 export const toFooterActions = (cardActions, onActionClick) => {
-  return cardActions.map(action => {
+  const followAction = {
+    hideIcon: true,
+    name: ActionName.FollowAction
+  };
+  const actions = cardActions.map(action => {
     if (action.id === 'preview-content') {
       return {
         content: /*#__PURE__*/React.createElement(FormattedMessage, messages.preview_improved),
@@ -38,6 +42,7 @@ export const toFooterActions = (cardActions, onActionClick) => {
       testId: action.id
     };
   });
+  return [followAction, ...actions];
 };
 const HoverCardResolvedView = ({
   flexibleCardProps,

package/dist/es2019/view/LinkUrl/index.js

@@ -8,7 +8,7 @@ import LinkWarningModal from './LinkWarningModal';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 const PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.26.2",
+  packageVersion: "26.27.1",
   componentName: 'linkUrl'
 };
 const Link = withLinkClickedEvent('a');

package/dist/es2019/view/RedesignedInlineCard/Frame/styled.js

@@ -11,7 +11,7 @@ const selected = `
     text-decoration: none;
   }
   &:hover {
-    border: 1px solid ${`var(--ds-border-input, ${N40})`};
+    border: 1px solid ${`var(--ds-border, ${N40})`};
   }
 `;
 const isInteractive = ({
@@ -81,8 +81,8 @@ const baseWrapperStyle = props => `
   ${isSelected(props)};
 
   ${props.withoutBackground ? '' : themed({
-  light: `border: 1px solid ${`var(--ds-border-input, ${N40})`};`,
-  dark: `border: 1px solid ${`var(--ds-border-input, ${N500})`};`
+  light: `border: 1px solid ${`var(--ds-border, ${N40})`};`,
+  dark: `border: 1px solid ${`var(--ds-border, ${N500})`};`
 })(props)}
   &:hover {
     ${themed({

package/dist/es2019/view/RedesignedInlineCard/utils/withFrameStyleControl.js

@@ -12,8 +12,8 @@ import { N500, N40 } from '@atlaskit/theme/colors';
 export default ((Button, frameRef) => props => {
   const setBorderStyle = () => {
     const borderColor = themed({
-      light: `${`var(--ds-border-input, ${N40})`}`,
-      dark: `${`var(--ds-border-input, ${N500})`}`
+      light: `${`var(--ds-border, ${N40})`}`,
+      dark: `${`var(--ds-border, ${N500})`}`
     })();
     const frameNode = frameRef.current;
     if (frameNode) {

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

@@ -15,7 +15,7 @@ export var ANALYTICS_CHANNEL = 'media';
 export var context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.26.2"
+  packageVersion: "26.27.1"
 };
 export var TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

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

@@ -1,15 +1,13 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import FlexibleCard from '../../../FlexibleCard';
-import TitleBlock from '../../../FlexibleCard/components/blocks/title-block';
-import { FooterBlock, MetadataBlock, PreviewBlock, SnippetBlock } from '../../../FlexibleCard/components/blocks';
+import { FooterBlock, MetadataBlock, PreviewBlock, SnippetBlock, TitleBlock } from '../../../FlexibleCard/components/blocks';
 import { metadataBlockCss, footerBlockCss } from './styled';
 import { ActionName, ElementName, MediaPlacement, SmartLinkPosition } from '../../../../constants';
 import { getSimulatedMetadata, getSimulatedBetterMetadata } from './utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { withFlexibleUIBlockCardStyle } from './utils/withFlexibleUIBlockCardStyle';
-
 /**
  * This view represents a Block card that has an 'Resolved' status.
  * @see SmartLinkStatus
@@ -39,6 +37,21 @@ var FlexibleResolvedView = function FlexibleResolvedView(_ref) {
     titleMetadata = _ref2.titleMetadata,
     topMetadata = _ref2.topMetadata,
     bottomMetadata = _ref2.bottomMetadata;
+  var footerActions = useMemo(function () {
+    return [{
+      name: ActionName.FollowAction,
+      hideIcon: true
+    }, {
+      name: ActionName.PreviewAction,
+      hideIcon: true
+    }, {
+      name: ActionName.ViewAction,
+      hideIcon: true
+    }, {
+      name: ActionName.DownloadAction,
+      hideIcon: true
+    }];
+  }, []);
   return /*#__PURE__*/React.createElement(FlexibleCard, {
     analytics: analytics,
     appearance: "block",
@@ -79,16 +92,7 @@ var FlexibleResolvedView = function FlexibleResolvedView(_ref) {
   }) : null, /*#__PURE__*/React.createElement(FooterBlock, _extends({}, getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') && {
     overrideCss: footerBlockCss
   }, {
-    actions: [{
-      name: ActionName.PreviewAction,
-      hideIcon: true
-    }, {
-      name: ActionName.ViewAction,
-      hideIcon: true
-    }, {
-      name: ActionName.DownloadAction,
-      hideIcon: true
-    }]
+    actions: footerActions
   })));
 };
 export default withFlexibleUIBlockCardStyle(FlexibleResolvedView);

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

@@ -10,5 +10,5 @@ export var metadataBlockCss = css(_templateObject || (_templateObject = _taggedT
 export var titleBlockCss = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n"])), getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') ? "gap: 0.5em;" : "", getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? "[data-smart-element=\"Title\"] {\n          font-weight: 600;\n        }" : "");
 export var footerBlockCss = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  height: 1.5rem;\n\n  .actions-button-group {\n    button,\n    button:hover,\n    button:focus,\n    button:active {\n      font-size: 0.875rem;\n    }\n  }\n"])));
 var flexibleBlockCardElevationStyle = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  border-radius: 1.5px;\n  box-shadow: ", ";\n  margin: ", ";\n"])), tokens.elevation, "var(--ds-space-025, 2px)");
-var refreshedFlexibleBlockCardStyle = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  & > div {\n    border-radius: ", ";\n    border: 1px solid ", ";\n  }\n"])), "var(--ds-border-radius-200, 8px)", "var(--ds-border-input, ".concat(N40, ")"));
+var refreshedFlexibleBlockCardStyle = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  & > div {\n    border-radius: ", ";\n    border: 1px solid ", ";\n  }\n"])), "var(--ds-border-radius-200, 8px)", "var(--ds-border, ".concat(N40, ")"));
 export var flexibleBlockCardStyle = getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? refreshedFlexibleBlockCardStyle : flexibleBlockCardElevationStyle;

package/dist/esm/view/EmbedCard/components/styled.js

@@ -55,7 +55,7 @@ var height = function height(_ref5) {
 var wrapperStyles = function wrapperStyles(props) {
   return "\n  ".concat(getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? wrapperBorderRadius : borderRadius, "\n  ").concat(minWidth(props), "\n  ").concat(maxWidth(props), "\n  ").concat(getInteractiveStyles(props), "\n  ").concat(visible(props), "\n  display: inline-flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  font-family: ").concat(fontFamily(), ";\n  width: 100%;\n  user-select: none;\n  line-height: initial;\n  transition: background 0.3s;\n  position: relative;\n  ").concat(height(props), ";\n  ").concat(selected(props), "\n\n  &:after {\n    content: '';\n    transition: background 0.3s, box-shadow 0.3s;\n    position: absolute;\n    width: calc(100% + ", "var(--ds-space-200, 16px)", ");\n    height: calc(100% + ", "var(--ds-space-100, 8px)", ");\n    left: ", "var(--ds-space-negative-100, -8px)", ";\n    ").concat(getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? wrapperBorderRadius : "background: transparent;\n           ".concat(borderRadius), "\n  }\n");
 };
-var visibleStyles = "\n  ".concat(getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? "" : "background-color: ".concat("var(--ds-background-neutral-subtle, ".concat(colors.N30, ")"), ";"), "\n\n  &:after {\n    ").concat(getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? "border: 1px solid ".concat("var(--ds-border-input, ".concat(N40, ")"), ";\n           background-color: ", themed({
+var visibleStyles = "\n  ".concat(getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? "" : "background-color: ".concat("var(--ds-background-neutral-subtle, ".concat(colors.N30, ")"), ";"), "\n\n  &:after {\n    ").concat(getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? "border: 1px solid ".concat("var(--ds-border, ".concat(N40, ")"), ";\n           background-color: ", themed({
   light: "var(--ds-surface-raised, white)",
   dark: "var(--ds-surface-raised, ".concat(BACKGROUND_COLOR_DARK, ")")
 })(), ";") : "background: ".concat("var(--ds-background-neutral, ".concat(colors.N30, ")"), " !important;"), "\n  }\n  .embed-header {\n    opacity: 1;\n  }");
@@ -92,7 +92,7 @@ export var TextWrapper = styled.div(_templateObject5 || (_templateObject5 = _tag
 // NB: `overflow` is kept as `hidden` since
 // the internal contents of the `iframe` should
 // manage scrolling behaviour.
-export var Content = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  ", "\n  background-color: ", ";\n  position: absolute;\n  z-index: 1;\n  width: 100%;\n  transition: box-shadow 0.3s;\n\n  > .calc-height > div > div {\n    left: unset !important;\n    width: unset !important;\n    height: unset !important;\n    position: initial !important;\n    padding-bottom: unset !important;\n  }\n  > .embed-preview > div {\n    margin: 0 auto;\n  }\n\n  ", ";\n\n  ", "\n\n  ", "\n"])), getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? "".concat(contentBorderRadius, ";\n       border: 1px solid ", "var(--ds-border-input, ".concat(N40, ")"), ";") : borderRadius, "var(--ds-surface-raised, white)", function (_ref9) {
+export var Content = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  ", "\n  background-color: ", ";\n  position: absolute;\n  z-index: 1;\n  width: 100%;\n  transition: box-shadow 0.3s;\n\n  > .calc-height > div > div {\n    left: unset !important;\n    width: unset !important;\n    height: unset !important;\n    position: initial !important;\n    padding-bottom: unset !important;\n  }\n  > .embed-preview > div {\n    margin: 0 auto;\n  }\n\n  ", ";\n\n  ", "\n\n  ", "\n"])), getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? "".concat(contentBorderRadius, ";\n       border: 1px solid ", "var(--ds-border, ".concat(N40, ")"), ";") : borderRadius, "var(--ds-surface-raised, white)", function (_ref9) {
   var isInteractive = _ref9.isInteractive;
   if (isInteractive && !getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design')) {
     return "\n          .".concat(className, ":hover & {\n            box-shadow: ", "var(--ds-shadow-overlay, 0 4px 8px -2px rgba(23, 43, 77, 0.32), 0 0 1px rgba(23, 43, 77, 0.25))", ";\n          }\n        ");

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

@@ -1,4 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { ActionName, CardDisplay, SmartLinkPosition, SmartLinkSize } from '../../../../../constants';
 import { FooterBlock, MetadataBlock, SnippetBlock, TitleBlock } from '../../../../FlexibleCard/components/blocks';
@@ -11,7 +12,11 @@ import { messages } from '../../../../../messages';
 import { FormattedMessage } from 'react-intl-next';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 export var toFooterActions = function toFooterActions(cardActions, onActionClick) {
-  return cardActions.map(function (action) {
+  var followAction = {
+    hideIcon: true,
+    name: ActionName.FollowAction
+  };
+  var actions = cardActions.map(function (action) {
     if (action.id === 'preview-content') {
       return {
         content: /*#__PURE__*/React.createElement(FormattedMessage, messages.preview_improved),
@@ -38,6 +43,7 @@ export var toFooterActions = function toFooterActions(cardActions, onActionClick
       testId: action.id
     };
   });
+  return [followAction].concat(_toConsumableArray(actions));
 };
 var HoverCardResolvedView = function HoverCardResolvedView(_ref) {
   var _cardState$details;

package/dist/esm/view/LinkUrl/index.js

@@ -11,7 +11,7 @@ import LinkWarningModal from './LinkWarningModal';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 var PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.26.2",
+  packageVersion: "26.27.1",
   componentName: 'linkUrl'
 };
 var Link = withLinkClickedEvent('a');

package/dist/esm/view/RedesignedInlineCard/Frame/styled.js

@@ -4,7 +4,7 @@ import styled from '@emotion/styled';
 import { B50, B100, B200, B400, N20, N40, N500 } from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
 var BACKGROUND_COLOR_DARK = '#262B31';
-var selected = "\n  cursor: pointer;\n  box-shadow: 0 0 0 2px ".concat("var(--ds-border-selected, ".concat(B100, ")"), ";\n  outline: none;\n  user-select: none;\n  &, :hover, :focus, :active {\n    text-decoration: none;\n  }\n  &:hover {\n    border: 1px solid ", "var(--ds-border-input, ".concat(N40, ")"), ";\n  }\n");
+var selected = "\n  cursor: pointer;\n  box-shadow: 0 0 0 2px ".concat("var(--ds-border-selected, ".concat(B100, ")"), ";\n  outline: none;\n  user-select: none;\n  &, :hover, :focus, :active {\n    text-decoration: none;\n  }\n  &:hover {\n    border: 1px solid ", "var(--ds-border, ".concat(N40, ")"), ";\n  }\n");
 var isInteractive = function isInteractive(_ref) {
   var isInteractive = _ref.isInteractive;
   if (isInteractive) {
@@ -48,8 +48,8 @@ var baseWrapperStyle = function baseWrapperStyle(props) {
     light: "var(--ds-surface-raised, white)",
     dark: "var(--ds-surface-raised, ".concat(BACKGROUND_COLOR_DARK, ")")
   })(props), ";\n\n  ").concat(isSelected(props), ";\n\n  ").concat(props.withoutBackground ? '' : themed({
-    light: "border: 1px solid ".concat("var(--ds-border-input, ".concat(N40, ")"), ";"),
-    dark: "border: 1px solid ".concat("var(--ds-border-input, ".concat(N500, ")"), ";")
+    light: "border: 1px solid ".concat("var(--ds-border, ".concat(N40, ")"), ";"),
+    dark: "border: 1px solid ".concat("var(--ds-border, ".concat(N500, ")"), ";")
   })(props), "\n  &:hover {\n    ").concat(themed({
     light: "border-color: ".concat("var(--ds-border-accent-blue, ".concat(B200, ")"), ";"),
     dark: "border-color:  ".concat("var(--ds-border-accent-blue, ".concat(B200, ")"), ";")

package/dist/esm/view/RedesignedInlineCard/utils/withFrameStyleControl.js

@@ -13,8 +13,8 @@ export default (function (Button, frameRef) {
   return function (props) {
     var setBorderStyle = function setBorderStyle() {
       var borderColor = themed({
-        light: "".concat("var(--ds-border-input, ".concat(N40, ")")),
-        dark: "".concat("var(--ds-border-input, ".concat(N500, ")"))
+        light: "".concat("var(--ds-border, ".concat(N40, ")")),
+        dark: "".concat("var(--ds-border, ".concat(N500, ")"))
       })();
       var frameNode = frameRef.current;
       if (frameNode) {

package/dist/types/__fixtures__/atlas-project.d.ts

@@ -1,68 +1,3 @@
-declare const _default: {
-    meta: {
-        auth: never[];
-        definitionId: string;
-        product: string;
-        visibility: string;
-        access: string;
-        key: string;
-    };
-    data: {
-        '@context': {
-            '@vocab': string;
-            atlassian: string;
-            schema: string;
-        };
-        generator: {
-            '@type': string;
-            '@id': string;
-            name: string;
-            icon: {
-                '@type': string;
-                url: string;
-            };
-        };
-        '@type': string[];
-        url: string;
-        icon: {
-            '@type': string;
-            url: string;
-        };
-        name: string;
-        summary: string;
-        'atlassian:state': {
-            '@type': string;
-            name: string;
-            appearance: string;
-        };
-        attributedTo: {
-            name: string;
-            icon: string;
-        }[];
-        'atlassian:updatedBy': {
-            name: string;
-            icon: string;
-        }[];
-        preview: {
-            '@type': string;
-            href: string;
-        };
-        'schema:commentCount': number;
-        'atlassian:subscriberCount': number;
-        endTime: string;
-        updated: string;
-        'atlassian:serverAction': {
-            '@type': string;
-            name: string;
-            dataUpdateAction: {
-                '@type': string;
-                name: string;
-            };
-            resourceIdentifiers: {
-                ari: string;
-            };
-            refField: string;
-        }[];
-    };
-};
+import { JsonLd } from 'json-ld-types';
+declare const _default: JsonLd.Response<JsonLd.Data.BaseData>;
 export default _default;

package/dist/types-ts4.5/__fixtures__/atlas-project.d.ts

@@ -1,68 +1,3 @@
-declare const _default: {
-    meta: {
-        auth: never[];
-        definitionId: string;
-        product: string;
-        visibility: string;
-        access: string;
-        key: string;
-    };
-    data: {
-        '@context': {
-            '@vocab': string;
-            atlassian: string;
-            schema: string;
-        };
-        generator: {
-            '@type': string;
-            '@id': string;
-            name: string;
-            icon: {
-                '@type': string;
-                url: string;
-            };
-        };
-        '@type': string[];
-        url: string;
-        icon: {
-            '@type': string;
-            url: string;
-        };
-        name: string;
-        summary: string;
-        'atlassian:state': {
-            '@type': string;
-            name: string;
-            appearance: string;
-        };
-        attributedTo: {
-            name: string;
-            icon: string;
-        }[];
-        'atlassian:updatedBy': {
-            name: string;
-            icon: string;
-        }[];
-        preview: {
-            '@type': string;
-            href: string;
-        };
-        'schema:commentCount': number;
-        'atlassian:subscriberCount': number;
-        endTime: string;
-        updated: string;
-        'atlassian:serverAction': {
-            '@type': string;
-            name: string;
-            dataUpdateAction: {
-                '@type': string;
-                name: string;
-            };
-            resourceIdentifiers: {
-                ari: string;
-            };
-            refField: string;
-        }[];
-    };
-};
+import { JsonLd } from 'json-ld-types';
+declare const _default: JsonLd.Response<JsonLd.Data.BaseData>;
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "26.26.2",
+  "version": "26.27.1",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -38,7 +38,7 @@
     "@atlaskit/link-analytics": "^8.3.0",
     "@atlaskit/link-client-extension": "^1.7.0",
     "@atlaskit/link-extractors": "^1.1.0",
-    "@atlaskit/linking-common": "^4.9.0",
+    "@atlaskit/linking-common": "^4.10.0",
     "@atlaskit/linking-types": "^8.3.0",
     "@atlaskit/logo": "^13.14.0",
     "@atlaskit/lozenge": "^11.4.0",
@@ -48,7 +48,7 @@
     "@atlaskit/popup": "^1.9.0",
     "@atlaskit/spinner": "^15.5.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.22.0",
+    "@atlaskit/tokens": "^1.24.0",
     "@atlaskit/tooltip": "^17.8.0",
     "@atlaskit/ufo": "^0.2.0",
     "@babel/runtime": "^7.0.0",