@atlaskit/smart-card 17.7.10 → 18.0.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/smart-card
 
+## 18.0.0
+
+### Major Changes
+
+- [`dd429d9fdca`](https://bitbucket.org/atlassian/atlassian-frontend/commits/dd429d9fdca) - [ux] EDM-2822: Fix smart link wraps just after the icon
+
+### Patch Changes
+
+- [`fb1cf506701`](https://bitbucket.org/atlassian/atlassian-frontend/commits/fb1cf506701) - [ux] ED-14487: polyfill ResizeObserver and IntersectionObserver for unit tests, but mock isIntersectionObserverSupported() for tests related to smart-cards
+- Updated dependencies
+
+## 17.7.12
+
+### Patch Changes
+
+- [`f9bbe6d0a56`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f9bbe6d0a56) - Add View, Vote and React badge elements
+
+## 17.7.11
+
+### Patch Changes
+
+- [`ca8c8db1440`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ca8c8db1440) - Flexible UI: Add separator between text/date-time elements
+
 ## 17.7.10
 
 ### Patch Changes

package/dist/cjs/constants.js

@@ -132,6 +132,9 @@ exports.ElementName = ElementName;
   ElementName["AuthorGroup"] = "AuthorGroup";
   ElementName["CollaboratorGroup"] = "CollaboratorGroup";
   ElementName["CommentCount"] = "CommentCount";
+  ElementName["ViewCount"] = "ViewCount";
+  ElementName["ReactCount"] = "ReactCount";
+  ElementName["VoteCount"] = "VoteCount";
   ElementName["CreatedBy"] = "CreatedBy";
   ElementName["CreatedOn"] = "CreatedOn";
   ElementName["LinkIcon"] = "LinkIcon";
@@ -212,6 +215,9 @@ exports.IconType = IconType;
   IconType["Error"] = "Default:Error";
   IconType["Forbidden"] = "Default:Forbidden";
   IconType["Comment"] = "Badge:Comment";
+  IconType["View"] = "Badge:View";
+  IconType["React"] = "Badge:React";
+  IconType["Vote"] = "Badge:Vote";
   IconType["PriorityBlocker"] = "Badge:PriorityBlocker";
   IconType["PriorityCritical"] = "Badge:PriorityCritical";
   IconType["PriorityHigh"] = "Badge:PriorityHigh";

package/dist/cjs/extractors/flexible/index.js

@@ -40,6 +40,9 @@ var extractFlexibleUiContext = function extractFlexibleUiContext(response, rende
     authorGroup: (0, _person.extractPersonCreatedBy)(data),
     collaboratorGroup: (0, _collaboratorGroup.extractPersonsUpdatedBy)(data),
     commentCount: (0, _utils.extractCommentCount)(data),
+    viewCount: (0, _utils.extractViewCount)(data),
+    reactCount: (0, _utils.extractReactCount)(data),
+    voteCount: (0, _utils.extractVoteCount)(data),
     createdBy: (0, _utils.extractCreatedBy)(data),
     createdOn: (0, _extractDateCreated.extractDateCreated)(data),
     linkIcon: (0, _icon.extractLinkIcon)(response, renderers),

package/dist/cjs/extractors/flexible/utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.extractSubscriberCount = exports.extractProgrammingLanguage = exports.extractModifiedBy = exports.extractCreatedBy = exports.extractCommentCount = void 0;
+exports.extractVoteCount = exports.extractViewCount = exports.extractSubscriberCount = exports.extractReactCount = exports.extractProgrammingLanguage = exports.extractModifiedBy = exports.extractCreatedBy = exports.extractCommentCount = void 0;
 
 var _person = require("../common/person");
 
@@ -17,6 +17,24 @@ var extractCommentCount = function extractCommentCount(data) {
 
 exports.extractCommentCount = extractCommentCount;
 
+var extractViewCount = function extractViewCount(data) {
+  return extractValue(data, 'atlassian:viewCount');
+};
+
+exports.extractViewCount = extractViewCount;
+
+var extractReactCount = function extractReactCount(data) {
+  return extractValue(data, 'atlassian:reactCount');
+};
+
+exports.extractReactCount = extractReactCount;
+
+var extractVoteCount = function extractVoteCount(data) {
+  return extractValue(data, 'atlassian:voteCount');
+};
+
+exports.extractVoteCount = extractVoteCount;
+
 var extractCreatedBy = function extractCreatedBy(data) {
   var persons = (0, _person.extractPersonCreatedBy)(data);
 

package/dist/cjs/version.json

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

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

@@ -126,7 +126,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  position: relative;\n\n  ", "\n  ", "\n  background-color: white;\n  position: absolute;\n  z-index: 1;\n  width: 100%;\n  top: ", ";\n  overflow: hidden;\n  height: calc(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"])), _mediaUi.borderRadius, cardShadow, (0, _utils.gs)(4), (0, _utils.gs)(4), function (_ref9) {
+var Content = _styled.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  background-color: white;\n  position: absolute;\n  z-index: 1;\n  width: 100%;\n  top: ", ";\n  overflow: hidden;\n  height: calc(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"])), _mediaUi.borderRadius, cardShadow, (0, _utils.gs)(4), (0, _utils.gs)(4), function (_ref9) {
   var isInteractive = _ref9.isInteractive;
 
   if (isInteractive) {

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

@@ -20,7 +20,7 @@ var _utils = require("../utils");
 var _templateObject;
 
 var getBlockStyles = function getBlockStyles(direction, size) {
-  return (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  justify-content: flex-start;\n"])), (0, _utils.getBaseStyles)(direction, size));
+  return (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  justify-content: flex-start;\n  [data-separator] + [data-separator]:before {\n    content: '\u2022';\n    margin-right: ", "rem;\n  }\n"])), (0, _utils.getBaseStyles)(direction, size), (0, _utils.getGapSize)(size));
 };
 
 var Block = function Block(_ref) {

package/dist/cjs/view/FlexibleCard/components/blocks/utils.js

@@ -48,7 +48,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 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) { (0, _defineProperty2.default)(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; }
 
-var ElementDisplaySchema = (_ElementDisplaySchema = {}, (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.AuthorGroup, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.CollaboratorGroup, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.CommentCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.CreatedBy, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.CreatedOn, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.LinkIcon, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ModifiedBy, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ModifiedOn, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Preview, ['block']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Priority, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ProgrammingLanguage, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Snippet, ['block']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.State, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.SubscriberCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Title, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Provider, ['inline']), _ElementDisplaySchema);
+var ElementDisplaySchema = (_ElementDisplaySchema = {}, (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.AuthorGroup, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.CollaboratorGroup, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.CommentCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ViewCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ReactCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.VoteCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.CreatedBy, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.CreatedOn, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.LinkIcon, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ModifiedBy, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ModifiedOn, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Preview, ['block']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Priority, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ProgrammingLanguage, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Snippet, ['block']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.State, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.SubscriberCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Title, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Provider, ['inline']), _ElementDisplaySchema);
 exports.ElementDisplaySchema = ElementDisplaySchema;
 
 var getDirectionStyles = function getDirectionStyles(direction) {

package/dist/cjs/view/FlexibleCard/components/common/atlaskit-icon/index.js

@@ -212,6 +212,18 @@ var importIconMapper = (_importIconMapper = {}, (0, _defineProperty2.default)(_i
   return Promise.resolve().then(function () {
     return _interopRequireWildcard(require('@atlaskit/icon/glyph/comment'));
   });
+}), (0, _defineProperty2.default)(_importIconMapper, _constants.IconType.View, function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require('@atlaskit/icon/glyph/watch'));
+  });
+}), (0, _defineProperty2.default)(_importIconMapper, _constants.IconType.React, function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require('@atlaskit/icon/glyph/like'));
+  });
+}), (0, _defineProperty2.default)(_importIconMapper, _constants.IconType.Vote, function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require('@atlaskit/icon/glyph/arrow-up'));
+  });
 }), (0, _defineProperty2.default)(_importIconMapper, _constants.IconType.PriorityBlocker, function () {
   return Promise.resolve().then(function () {
     return _interopRequireWildcard(require('@atlaskit/icon-priority/glyph/priority-blocker'));

package/dist/cjs/view/FlexibleCard/components/elements/date-time/index.js

@@ -55,6 +55,7 @@ var DateTime = function DateTime(_ref) {
   });
   return (0, _core.jsx)("span", {
     css: styles,
+    "data-separator": true,
     "data-smart-element-date-time": true,
     "data-testid": testId
   }, (0, _core.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, typeToDescriptorMap[type], {

package/dist/cjs/view/FlexibleCard/components/elements/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Title = exports.SubscriberCount = exports.State = exports.Snippet = exports.Provider = exports.ProgrammingLanguage = exports.Priority = exports.Preview = exports.ModifiedOn = exports.ModifiedBy = exports.LinkIcon = exports.CreatedOn = exports.CreatedBy = exports.CommentCount = exports.CollaboratorGroup = exports.AuthorGroup = void 0;
+exports.VoteCount = exports.ViewCount = exports.Title = exports.SubscriberCount = exports.State = exports.Snippet = exports.ReactCount = exports.Provider = exports.ProgrammingLanguage = exports.Priority = exports.Preview = exports.ModifiedOn = exports.ModifiedBy = exports.LinkIcon = exports.CreatedOn = exports.CreatedBy = exports.CommentCount = exports.CollaboratorGroup = exports.AuthorGroup = void 0;
 
 var _utils = require("./utils");
 
@@ -18,6 +18,12 @@ var CollaboratorGroup = (0, _utils.createElement)(_constants.ElementName.Collabo
 exports.CollaboratorGroup = CollaboratorGroup;
 var CommentCount = (0, _utils.createElement)(_constants.ElementName.CommentCount);
 exports.CommentCount = CommentCount;
+var ViewCount = (0, _utils.createElement)(_constants.ElementName.ViewCount);
+exports.ViewCount = ViewCount;
+var ReactCount = (0, _utils.createElement)(_constants.ElementName.ReactCount);
+exports.ReactCount = ReactCount;
+var VoteCount = (0, _utils.createElement)(_constants.ElementName.VoteCount);
+exports.VoteCount = VoteCount;
 var CreatedBy = (0, _utils.createElement)(_constants.ElementName.CreatedBy);
 exports.CreatedBy = CreatedBy;
 var CreatedOn = (0, _utils.createElement)(_constants.ElementName.CreatedOn);

package/dist/cjs/view/FlexibleCard/components/elements/text/index.js

@@ -39,6 +39,7 @@ var Text = function Text(_ref) {
 
   return (0, _core.jsx)("span", {
     css: getStyles(maxLines, color),
+    "data-separator": true,
     "data-smart-element-text": true,
     "data-testid": testId
   }, (0, _utils.getFormattedMessage)(message) || content);

package/dist/cjs/view/FlexibleCard/components/elements/utils.js

@@ -55,6 +55,21 @@ var elementMappings = (_elementMappings = {}, (0, _defineProperty2.default)(_ele
   props: {
     icon: _constants.IconType.Comment
   }
+}), (0, _defineProperty2.default)(_elementMappings, _constants.ElementName.ViewCount, {
+  component: _badge.default,
+  props: {
+    icon: _constants.IconType.View
+  }
+}), (0, _defineProperty2.default)(_elementMappings, _constants.ElementName.ReactCount, {
+  component: _badge.default,
+  props: {
+    icon: _constants.IconType.React
+  }
+}), (0, _defineProperty2.default)(_elementMappings, _constants.ElementName.VoteCount, {
+  component: _badge.default,
+  props: {
+    icon: _constants.IconType.Vote
+  }
 }), (0, _defineProperty2.default)(_elementMappings, _constants.ElementName.CreatedBy, {
   component: _text.default
 }), (0, _defineProperty2.default)(_elementMappings, _constants.ElementName.LinkIcon, {
@@ -112,6 +127,9 @@ var getData = function getData(elementName, contextKey, context) {
       return toAvatarGroupProps(data);
 
     case _constants.ElementName.CommentCount:
+    case _constants.ElementName.ViewCount:
+    case _constants.ElementName.ReactCount:
+    case _constants.ElementName.VoteCount:
     case _constants.ElementName.ProgrammingLanguage:
     case _constants.ElementName.SubscriberCount:
       return toBadgeProps(data);

package/dist/cjs/view/InlineCard/IconAndTitleLayout/styled.js

@@ -33,12 +33,12 @@ exports.IconWrapper = IconWrapper;
 
 var EmojiWrapper = _styled.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  margin-right: 2px;\n  user-select: none;\n  ", "\n  ", "\n"])), IconOverrides, IconObjectOverrides); // The main 'wrapping' element, title of the content.
 // NB: `white-space` adds little whitespace before wrapping.
-// NB: `hyphens` enables hyphenation on word break.
+// NB: `word-break` line breaks as soon as an overflow takes place.
 
 
 exports.EmojiWrapper = EmojiWrapper;
 
-var IconTitleWrapper = _styled.default.span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  hyphens: auto;\n  white-space: pre-wrap;\n  overflow-wrap: break-word;\n  word-break: break-word;\n"]))); // TODO: Replace overrides with proper AtlasKit solution.
+var IconTitleWrapper = _styled.default.span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  white-space: pre-wrap;\n  word-break: break-all;\n"]))); // TODO: Replace overrides with proper AtlasKit solution.
 
 
 exports.IconTitleWrapper = IconTitleWrapper;

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

@@ -20,7 +20,7 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 var LINK_COLOR_DARK = '#4794FF'; // By default buttons will hide overflow and ellipsis content instead of wrapping.
 // This basically turns the button back into inline content
 
-var IconStyledButton = _styled.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  text-align: initial !important;\n  display: inline !important;\n\n  &:hover {\n    /* Remove the text-decoration to match other inline card hover states*/\n    text-decoration: none !important;\n  }\n\n  > span {\n    display: inline;\n    > span {\n      overflow: initial;\n      text-overflow: initial;\n      white-space: initial;\n    }\n  }\n"])));
+var IconStyledButton = _styled.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  text-align: initial !important;\n  display: inline !important;\n\n  &:hover {\n    /* Remove the text-decoration to match other inline card hover states */\n    text-decoration: none !important;\n  }\n\n  > span {\n    display: inline;\n    > span {\n      overflow: initial;\n      text-overflow: initial;\n      white-space: initial;\n    }\n  }\n"])));
 
 exports.IconStyledButton = IconStyledButton;
 

package/dist/es2019/constants.js

@@ -109,6 +109,9 @@ export let ElementName;
   ElementName["AuthorGroup"] = "AuthorGroup";
   ElementName["CollaboratorGroup"] = "CollaboratorGroup";
   ElementName["CommentCount"] = "CommentCount";
+  ElementName["ViewCount"] = "ViewCount";
+  ElementName["ReactCount"] = "ReactCount";
+  ElementName["VoteCount"] = "VoteCount";
   ElementName["CreatedBy"] = "CreatedBy";
   ElementName["CreatedOn"] = "CreatedOn";
   ElementName["LinkIcon"] = "LinkIcon";
@@ -185,6 +188,9 @@ export let IconType;
   IconType["Error"] = "Default:Error";
   IconType["Forbidden"] = "Default:Forbidden";
   IconType["Comment"] = "Badge:Comment";
+  IconType["View"] = "Badge:View";
+  IconType["React"] = "Badge:React";
+  IconType["Vote"] = "Badge:Vote";
   IconType["PriorityBlocker"] = "Badge:PriorityBlocker";
   IconType["PriorityCritical"] = "Badge:PriorityCritical";
   IconType["PriorityHigh"] = "Badge:PriorityHigh";

package/dist/es2019/extractors/flexible/index.js

@@ -1,7 +1,7 @@
 import { extractLink, extractSummary, extractTitle } from '../common/primitives';
 import { extractLozenge } from '../common/lozenge';
 import { extractLinkIcon } from './icon';
-import { extractCommentCount, extractCreatedBy, extractModifiedBy, extractProgrammingLanguage, extractSubscriberCount } from './utils';
+import { extractCommentCount, extractCreatedBy, extractModifiedBy, extractProgrammingLanguage, extractSubscriberCount, extractViewCount, extractReactCount, extractVoteCount } from './utils';
 import { extractPersonCreatedBy } from '../common/person';
 import { extractPersonsUpdatedBy } from './collaboratorGroup';
 import { extractDateUpdated } from '../common/date/extractDateUpdated';
@@ -21,6 +21,9 @@ const extractFlexibleUiContext = (response, renderers) => {
     authorGroup: extractPersonCreatedBy(data),
     collaboratorGroup: extractPersonsUpdatedBy(data),
     commentCount: extractCommentCount(data),
+    viewCount: extractViewCount(data),
+    reactCount: extractReactCount(data),
+    voteCount: extractVoteCount(data),
     createdBy: extractCreatedBy(data),
     createdOn: extractDateCreated(data),
     linkIcon: extractLinkIcon(response, renderers),

package/dist/es2019/extractors/flexible/utils.js

@@ -5,6 +5,9 @@ const extractValue = (data, key) => {
 };
 
 export const extractCommentCount = data => extractValue(data, 'schema:commentCount');
+export const extractViewCount = data => extractValue(data, 'atlassian:viewCount');
+export const extractReactCount = data => extractValue(data, 'atlassian:reactCount');
+export const extractVoteCount = data => extractValue(data, 'atlassian:voteCount');
 export const extractCreatedBy = data => {
   const persons = extractPersonCreatedBy(data);
 

package/dist/es2019/version.json

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

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

@@ -170,8 +170,6 @@ export const TextWrapper = styled.div`
 // the internal contents of the `iframe` should
 // manage scrolling behaviour.
 export const Content = styled.div`
-  position: relative;
-
   ${borderRadius}
   ${cardShadow}
   background-color: white;

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

@@ -2,11 +2,15 @@
 import React from 'react';
 import { css, jsx } from '@emotion/core';
 import { SmartLinkDirection, SmartLinkSize } from '../../../../../constants';
-import { getBaseStyles, renderChildren } from '../utils';
+import { getBaseStyles, getGapSize, renderChildren } from '../utils';
 
 const getBlockStyles = (direction, size) => css`
   ${getBaseStyles(direction, size)}
   justify-content: flex-start;
+  [data-separator] + [data-separator]:before {
+    content: '•';
+    margin-right: ${getGapSize(size)}rem;
+  }
 `;
 
 const Block = ({

package/dist/es2019/view/FlexibleCard/components/blocks/utils.js

@@ -11,6 +11,9 @@ export const ElementDisplaySchema = {
   [ElementName.AuthorGroup]: ['inline'],
   [ElementName.CollaboratorGroup]: ['inline'],
   [ElementName.CommentCount]: ['inline'],
+  [ElementName.ViewCount]: ['inline'],
+  [ElementName.ReactCount]: ['inline'],
+  [ElementName.VoteCount]: ['inline'],
   [ElementName.CreatedBy]: ['inline'],
   [ElementName.CreatedOn]: ['inline'],
   [ElementName.LinkIcon]: ['inline'],

package/dist/es2019/view/FlexibleCard/components/common/atlaskit-icon/index.js

@@ -149,6 +149,15 @@ const importIconMapper = {
   [IconType.Comment]: () => import(
   /* webpackChunkName: "glyphComment" */
   '@atlaskit/icon/glyph/comment'),
+  [IconType.View]: () => import(
+  /* webpackChunkName: "glyphComment" */
+  '@atlaskit/icon/glyph/watch'),
+  [IconType.React]: () => import(
+  /* webpackChunkName: "glyphComment" */
+  '@atlaskit/icon/glyph/like'),
+  [IconType.Vote]: () => import(
+  /* webpackChunkName: "glyphComment" */
+  '@atlaskit/icon/glyph/arrow-up'),
   [IconType.PriorityBlocker]: () => import(
   /* webpackChunkName: "glyphBlocker" */
   '@atlaskit/icon-priority/glyph/priority-blocker'),

package/dist/es2019/view/FlexibleCard/components/elements/date-time/index.js

@@ -41,6 +41,7 @@ const DateTime = ({
   });
   return jsx("span", {
     css: styles,
+    "data-separator": true,
     "data-smart-element-date-time": true,
     "data-testid": testId
   }, jsx(FormattedMessage, _extends({}, typeToDescriptorMap[type], {

package/dist/es2019/view/FlexibleCard/components/elements/index.js

@@ -6,6 +6,9 @@ import { ElementName } from '../../../../constants';
 export const AuthorGroup = createElement(ElementName.AuthorGroup);
 export const CollaboratorGroup = createElement(ElementName.CollaboratorGroup);
 export const CommentCount = createElement(ElementName.CommentCount);
+export const ViewCount = createElement(ElementName.ViewCount);
+export const ReactCount = createElement(ElementName.ReactCount);
+export const VoteCount = createElement(ElementName.VoteCount);
 export const CreatedBy = createElement(ElementName.CreatedBy);
 export const CreatedOn = createElement(ElementName.CreatedOn);
 export const LinkIcon = createElement(ElementName.LinkIcon);

package/dist/es2019/view/FlexibleCard/components/elements/text/index.js

@@ -24,6 +24,7 @@ const Text = ({
 
   return jsx("span", {
     css: getStyles(maxLines, color),
+    "data-separator": true,
     "data-smart-element-text": true,
     "data-testid": testId
   }, getFormattedMessage(message) || content);

package/dist/es2019/view/FlexibleCard/components/elements/utils.js

@@ -26,6 +26,24 @@ const elementMappings = {
       icon: IconType.Comment
     }
   },
+  [ElementName.ViewCount]: {
+    component: Badge,
+    props: {
+      icon: IconType.View
+    }
+  },
+  [ElementName.ReactCount]: {
+    component: Badge,
+    props: {
+      icon: IconType.React
+    }
+  },
+  [ElementName.VoteCount]: {
+    component: Badge,
+    props: {
+      icon: IconType.Vote
+    }
+  },
   [ElementName.CreatedBy]: {
     component: Text
   },
@@ -96,6 +114,9 @@ const getData = (elementName, contextKey, context) => {
       return toAvatarGroupProps(data);
 
     case ElementName.CommentCount:
+    case ElementName.ViewCount:
+    case ElementName.ReactCount:
+    case ElementName.VoteCount:
     case ElementName.ProgrammingLanguage:
     case ElementName.SubscriberCount:
       return toBadgeProps(data);

package/dist/es2019/view/InlineCard/IconAndTitleLayout/styled.js

@@ -52,13 +52,11 @@ export const EmojiWrapper = styled.span`
   ${IconObjectOverrides}
 `; // The main 'wrapping' element, title of the content.
 // NB: `white-space` adds little whitespace before wrapping.
-// NB: `hyphens` enables hyphenation on word break.
+// NB: `word-break` line breaks as soon as an overflow takes place.
 
 export const IconTitleWrapper = styled.span`
-  hyphens: auto;
   white-space: pre-wrap;
-  overflow-wrap: break-word;
-  word-break: break-word;
+  word-break: break-all;
 `; // TODO: Replace overrides with proper AtlasKit solution.
 
 export const LozengeWrapper = styled.span`

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

@@ -9,7 +9,7 @@ export const IconStyledButton = styled.span`
   display: inline !important;
 
   &:hover {
-    /* Remove the text-decoration to match other inline card hover states*/
+    /* Remove the text-decoration to match other inline card hover states */
     text-decoration: none !important;
   }
 

package/dist/esm/constants.js

@@ -109,6 +109,9 @@ export var ElementName;
   ElementName["AuthorGroup"] = "AuthorGroup";
   ElementName["CollaboratorGroup"] = "CollaboratorGroup";
   ElementName["CommentCount"] = "CommentCount";
+  ElementName["ViewCount"] = "ViewCount";
+  ElementName["ReactCount"] = "ReactCount";
+  ElementName["VoteCount"] = "VoteCount";
   ElementName["CreatedBy"] = "CreatedBy";
   ElementName["CreatedOn"] = "CreatedOn";
   ElementName["LinkIcon"] = "LinkIcon";
@@ -185,6 +188,9 @@ export var IconType;
   IconType["Error"] = "Default:Error";
   IconType["Forbidden"] = "Default:Forbidden";
   IconType["Comment"] = "Badge:Comment";
+  IconType["View"] = "Badge:View";
+  IconType["React"] = "Badge:React";
+  IconType["Vote"] = "Badge:Vote";
   IconType["PriorityBlocker"] = "Badge:PriorityBlocker";
   IconType["PriorityCritical"] = "Badge:PriorityCritical";
   IconType["PriorityHigh"] = "Badge:PriorityHigh";

package/dist/esm/extractors/flexible/index.js

@@ -1,7 +1,7 @@
 import { extractLink, extractSummary, extractTitle } from '../common/primitives';
 import { extractLozenge } from '../common/lozenge';
 import { extractLinkIcon } from './icon';
-import { extractCommentCount, extractCreatedBy, extractModifiedBy, extractProgrammingLanguage, extractSubscriberCount } from './utils';
+import { extractCommentCount, extractCreatedBy, extractModifiedBy, extractProgrammingLanguage, extractSubscriberCount, extractViewCount, extractReactCount, extractVoteCount } from './utils';
 import { extractPersonCreatedBy } from '../common/person';
 import { extractPersonsUpdatedBy } from './collaboratorGroup';
 import { extractDateUpdated } from '../common/date/extractDateUpdated';
@@ -21,6 +21,9 @@ var extractFlexibleUiContext = function extractFlexibleUiContext(response, rende
     authorGroup: extractPersonCreatedBy(data),
     collaboratorGroup: extractPersonsUpdatedBy(data),
     commentCount: extractCommentCount(data),
+    viewCount: extractViewCount(data),
+    reactCount: extractReactCount(data),
+    voteCount: extractVoteCount(data),
     createdBy: extractCreatedBy(data),
     createdOn: extractDateCreated(data),
     linkIcon: extractLinkIcon(response, renderers),

package/dist/esm/extractors/flexible/utils.js

@@ -7,6 +7,15 @@ var extractValue = function extractValue(data, key) {
 export var extractCommentCount = function extractCommentCount(data) {
   return extractValue(data, 'schema:commentCount');
 };
+export var extractViewCount = function extractViewCount(data) {
+  return extractValue(data, 'atlassian:viewCount');
+};
+export var extractReactCount = function extractReactCount(data) {
+  return extractValue(data, 'atlassian:reactCount');
+};
+export var extractVoteCount = function extractVoteCount(data) {
+  return extractValue(data, 'atlassian:voteCount');
+};
 export var extractCreatedBy = function extractCreatedBy(data) {
   var persons = extractPersonCreatedBy(data);
 

package/dist/esm/version.json

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

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

@@ -88,7 +88,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  position: relative;\n\n  ", "\n  ", "\n  background-color: white;\n  position: absolute;\n  z-index: 1;\n  width: 100%;\n  top: ", ";\n  overflow: hidden;\n  height: calc(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"])), borderRadius, cardShadow, gridSize(4), gridSize(4), function (_ref9) {
+export var Content = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  background-color: white;\n  position: absolute;\n  z-index: 1;\n  width: 100%;\n  top: ", ";\n  overflow: hidden;\n  height: calc(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"])), borderRadius, cardShadow, gridSize(4), gridSize(4), function (_ref9) {
   var isInteractive = _ref9.isInteractive;
 
   if (isInteractive) {

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

@@ -6,10 +6,10 @@ var _templateObject;
 import React from 'react';
 import { css, jsx } from '@emotion/core';
 import { SmartLinkDirection, SmartLinkSize } from '../../../../../constants';
-import { getBaseStyles, renderChildren } from '../utils';
+import { getBaseStyles, getGapSize, renderChildren } from '../utils';
 
 var getBlockStyles = function getBlockStyles(direction, size) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  justify-content: flex-start;\n"])), getBaseStyles(direction, size));
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  justify-content: flex-start;\n  [data-separator] + [data-separator]:before {\n    content: '\u2022';\n    margin-right: ", "rem;\n  }\n"])), getBaseStyles(direction, size), getGapSize(size));
 };
 
 var Block = function Block(_ref) {

package/dist/esm/view/FlexibleCard/components/blocks/utils.js

@@ -20,7 +20,7 @@ import * as Actions from '../actions';
 import { isFlexibleUiElement } from '../../../../utils/flexible';
 import ActionGroup from './action-group';
 import ElementGroup from './element-group';
-export var ElementDisplaySchema = (_ElementDisplaySchema = {}, _defineProperty(_ElementDisplaySchema, ElementName.AuthorGroup, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.CollaboratorGroup, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.CommentCount, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.CreatedBy, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.CreatedOn, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.LinkIcon, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.ModifiedBy, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.ModifiedOn, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.Preview, ['block']), _defineProperty(_ElementDisplaySchema, ElementName.Priority, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.ProgrammingLanguage, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.Snippet, ['block']), _defineProperty(_ElementDisplaySchema, ElementName.State, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.SubscriberCount, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.Title, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.Provider, ['inline']), _ElementDisplaySchema);
+export var ElementDisplaySchema = (_ElementDisplaySchema = {}, _defineProperty(_ElementDisplaySchema, ElementName.AuthorGroup, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.CollaboratorGroup, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.CommentCount, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.ViewCount, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.ReactCount, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.VoteCount, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.CreatedBy, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.CreatedOn, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.LinkIcon, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.ModifiedBy, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.ModifiedOn, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.Preview, ['block']), _defineProperty(_ElementDisplaySchema, ElementName.Priority, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.ProgrammingLanguage, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.Snippet, ['block']), _defineProperty(_ElementDisplaySchema, ElementName.State, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.SubscriberCount, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.Title, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.Provider, ['inline']), _ElementDisplaySchema);
 
 var getDirectionStyles = function getDirectionStyles(direction) {
   switch (direction) {

package/dist/esm/view/FlexibleCard/components/common/atlaskit-icon/index.js

@@ -193,6 +193,18 @@ var importIconMapper = (_importIconMapper = {}, _defineProperty(_importIconMappe
   return import(
   /* webpackChunkName: "glyphComment" */
   '@atlaskit/icon/glyph/comment');
+}), _defineProperty(_importIconMapper, IconType.View, function () {
+  return import(
+  /* webpackChunkName: "glyphComment" */
+  '@atlaskit/icon/glyph/watch');
+}), _defineProperty(_importIconMapper, IconType.React, function () {
+  return import(
+  /* webpackChunkName: "glyphComment" */
+  '@atlaskit/icon/glyph/like');
+}), _defineProperty(_importIconMapper, IconType.Vote, function () {
+  return import(
+  /* webpackChunkName: "glyphComment" */
+  '@atlaskit/icon/glyph/arrow-up');
 }), _defineProperty(_importIconMapper, IconType.PriorityBlocker, function () {
   return import(
   /* webpackChunkName: "glyphBlocker" */

package/dist/esm/view/FlexibleCard/components/elements/date-time/index.js

@@ -39,6 +39,7 @@ var DateTime = function DateTime(_ref) {
   });
   return jsx("span", {
     css: styles,
+    "data-separator": true,
     "data-smart-element-date-time": true,
     "data-testid": testId
   }, jsx(FormattedMessage, _extends({}, typeToDescriptorMap[type], {

package/dist/esm/view/FlexibleCard/components/elements/index.js

@@ -6,6 +6,9 @@ import { ElementName } from '../../../../constants';
 export var AuthorGroup = createElement(ElementName.AuthorGroup);
 export var CollaboratorGroup = createElement(ElementName.CollaboratorGroup);
 export var CommentCount = createElement(ElementName.CommentCount);
+export var ViewCount = createElement(ElementName.ViewCount);
+export var ReactCount = createElement(ElementName.ReactCount);
+export var VoteCount = createElement(ElementName.VoteCount);
 export var CreatedBy = createElement(ElementName.CreatedBy);
 export var CreatedOn = createElement(ElementName.CreatedOn);
 export var LinkIcon = createElement(ElementName.LinkIcon);

package/dist/esm/view/FlexibleCard/components/elements/text/index.js

@@ -28,6 +28,7 @@ var Text = function Text(_ref) {
 
   return jsx("span", {
     css: getStyles(maxLines, color),
+    "data-separator": true,
     "data-smart-element-text": true,
     "data-testid": testId
   }, getFormattedMessage(message) || content);

package/dist/esm/view/FlexibleCard/components/elements/utils.js

@@ -26,6 +26,21 @@ var elementMappings = (_elementMappings = {}, _defineProperty(_elementMappings,
   props: {
     icon: IconType.Comment
   }
+}), _defineProperty(_elementMappings, ElementName.ViewCount, {
+  component: Badge,
+  props: {
+    icon: IconType.View
+  }
+}), _defineProperty(_elementMappings, ElementName.ReactCount, {
+  component: Badge,
+  props: {
+    icon: IconType.React
+  }
+}), _defineProperty(_elementMappings, ElementName.VoteCount, {
+  component: Badge,
+  props: {
+    icon: IconType.Vote
+  }
 }), _defineProperty(_elementMappings, ElementName.CreatedBy, {
   component: Text
 }), _defineProperty(_elementMappings, ElementName.LinkIcon, {
@@ -83,6 +98,9 @@ var getData = function getData(elementName, contextKey, context) {
       return toAvatarGroupProps(data);
 
     case ElementName.CommentCount:
+    case ElementName.ViewCount:
+    case ElementName.ReactCount:
+    case ElementName.VoteCount:
     case ElementName.ProgrammingLanguage:
     case ElementName.SubscriberCount:
       return toBadgeProps(data);

package/dist/esm/view/InlineCard/IconAndTitleLayout/styled.js

@@ -17,9 +17,9 @@ export var IconWrapper = styled.span(_templateObject || (_templateObject = _tagg
 
 export var EmojiWrapper = styled.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: inline-block;\n  margin-right: 2px;\n  user-select: none;\n  ", "\n  ", "\n"])), IconOverrides, IconObjectOverrides); // The main 'wrapping' element, title of the content.
 // NB: `white-space` adds little whitespace before wrapping.
-// NB: `hyphens` enables hyphenation on word break.
+// NB: `word-break` line breaks as soon as an overflow takes place.
 
-export var IconTitleWrapper = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  hyphens: auto;\n  white-space: pre-wrap;\n  overflow-wrap: break-word;\n  word-break: break-word;\n"]))); // TODO: Replace overrides with proper AtlasKit solution.
+export var IconTitleWrapper = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  white-space: pre-wrap;\n  word-break: break-all;\n"]))); // TODO: Replace overrides with proper AtlasKit solution.
 
 export var LozengeWrapper = styled.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: inline-block;\n  vertical-align: 1px;\n  & > span {\n    margin-left: 4px;\n    padding: 2px 0 2px 0;\n  }\n"]))); // TODO: Replace overrides with proper AtlasKit solution.
 

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

@@ -8,7 +8,7 @@ import { themed } from '@atlaskit/theme/components';
 var LINK_COLOR_DARK = '#4794FF'; // By default buttons will hide overflow and ellipsis content instead of wrapping.
 // This basically turns the button back into inline content
 
-export var IconStyledButton = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  text-align: initial !important;\n  display: inline !important;\n\n  &:hover {\n    /* Remove the text-decoration to match other inline card hover states*/\n    text-decoration: none !important;\n  }\n\n  > span {\n    display: inline;\n    > span {\n      overflow: initial;\n      text-overflow: initial;\n      white-space: initial;\n    }\n  }\n"])));
+export var IconStyledButton = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  text-align: initial !important;\n  display: inline !important;\n\n  &:hover {\n    /* Remove the text-decoration to match other inline card hover states */\n    text-decoration: none !important;\n  }\n\n  > span {\n    display: inline;\n    > span {\n      overflow: initial;\n      text-overflow: initial;\n      white-space: initial;\n    }\n  }\n"])));
 export var NoLinkAppearance = styled.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), themed({
   light: N200,
   dark: LINK_COLOR_DARK

package/dist/types/constants.d.ts

@@ -83,6 +83,9 @@ export declare enum ElementName {
     AuthorGroup = "AuthorGroup",
     CollaboratorGroup = "CollaboratorGroup",
     CommentCount = "CommentCount",
+    ViewCount = "ViewCount",
+    ReactCount = "ReactCount",
+    VoteCount = "VoteCount",
     CreatedBy = "CreatedBy",
     CreatedOn = "CreatedOn",
     LinkIcon = "LinkIcon",
@@ -153,6 +156,9 @@ export declare enum IconType {
     Error = "Default:Error",
     Forbidden = "Default:Forbidden",
     Comment = "Badge:Comment",
+    View = "Badge:View",
+    React = "Badge:React",
+    Vote = "Badge:Vote",
     PriorityBlocker = "Badge:PriorityBlocker",
     PriorityCritical = "Badge:PriorityCritical",
     PriorityHigh = "Badge:PriorityHigh",

package/dist/types/extractors/common/__mocks__/jsonld.d.ts

@@ -34,7 +34,11 @@ export declare const TEST_DOCUMENT_WITH_ACTIONS: {
     'atlassian:updatedBy'?: string | JsonLd.Primitives.LinkModel | JsonLd.Primitives.Person<any> | undefined;
     'schema:commentCount'?: number | undefined;
     'atlassian:isDeleted'?: boolean | undefined;
+    'atlassian:dateViewed'?: string | undefined;
+    'atlassian:reactCount'?: number | undefined;
     'atlassian:state'?: string | undefined;
+    'atlassian:viewCount'?: number | undefined;
+    'atlassian:voteCount'?: number | undefined;
     '@context': JsonLd.Primitives.Context;
     'atlassian:downloadUrl'?: string | undefined;
     'atlassian:visitUrl'?: string | undefined;
@@ -96,7 +100,11 @@ export declare const TEST_DOCUMENT_WITH_PREVIEW: {
     'schema:commentCount'?: number | undefined;
     'atlassian:isDeleted'?: boolean | undefined;
     'schema:potentialAction'?: import("schema-dts").DeleteAction | import("schema-dts").ViewAction | import("schema-dts").DownloadAction | import("schema-dts").WatchAction | import("schema-dts").CommentAction | import("schema-dts").ShareAction | JsonLd.Data.DocumentAction[] | undefined;
+    'atlassian:dateViewed'?: string | undefined;
+    'atlassian:reactCount'?: number | undefined;
     'atlassian:state'?: string | undefined;
+    'atlassian:viewCount'?: number | undefined;
+    'atlassian:voteCount'?: number | undefined;
     '@context': JsonLd.Primitives.Context;
     'atlassian:downloadUrl'?: string | undefined;
     'atlassian:visitUrl'?: string | undefined;

package/dist/types/extractors/flexible/utils.d.ts

@@ -1,5 +1,8 @@
 import { JsonLd } from 'json-ld-types';
 export declare const extractCommentCount: (data: JsonLd.Data.BaseData) => number | undefined;
+export declare const extractViewCount: (data: JsonLd.Data.BaseData) => number | undefined;
+export declare const extractReactCount: (data: JsonLd.Data.BaseData) => number | undefined;
+export declare const extractVoteCount: (data: JsonLd.Data.BaseData) => number | undefined;
 export declare const extractCreatedBy: (data: JsonLd.Data.BaseData) => string | undefined;
 export declare const extractModifiedBy: (data: JsonLd.Data.BaseData) => string | undefined;
 export declare const extractProgrammingLanguage: (data: JsonLd.Data.BaseData) => string | undefined;

package/dist/types/state/flexible-ui-context/types.d.ts

@@ -5,6 +5,9 @@ export declare type FlexibleUiDataContext = {
     authorGroup?: LinkPerson[];
     collaboratorGroup?: LinkPerson[];
     commentCount?: number;
+    viewCount?: number;
+    reactCount?: number;
+    voteCount?: number;
     createdBy?: string;
     createdOn?: string;
     linkIcon?: Icon;

package/dist/types/view/FlexibleCard/components/elements/index.d.ts

@@ -10,6 +10,9 @@ import { MediaProps } from './media/types';
 export declare const AuthorGroup: import("react").FC<AvatarGroupProps>;
 export declare const CollaboratorGroup: import("react").FC<AvatarGroupProps>;
 export declare const CommentCount: import("react").FC<BadgeProps>;
+export declare const ViewCount: import("react").FC<BadgeProps>;
+export declare const ReactCount: import("react").FC<BadgeProps>;
+export declare const VoteCount: import("react").FC<BadgeProps>;
 export declare const CreatedBy: import("react").FC<TextProps>;
 export declare const CreatedOn: import("react").FC<DateTimeProps>;
 export declare const LinkIcon: import("react").FC<IconProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "17.7.10",
+  "version": "18.0.0",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -36,12 +36,12 @@
     "@atlaskit/logo": "^13.5.0",
     "@atlaskit/lozenge": "^11.1.0",
     "@atlaskit/media-common": "^2.11.0",
-    "@atlaskit/media-ui": "^20.0.0",
+    "@atlaskit/media-ui": "^21.0.0",
     "@atlaskit/modal-dialog": "^12.2.0",
     "@atlaskit/outbound-auth-flow-client": "^3.3.0",
     "@atlaskit/spinner": "^15.1.0",
     "@atlaskit/theme": "^12.1.0",
-    "@atlaskit/tokens": "^0.7.0",
+    "@atlaskit/tokens": "^0.8.0",
     "@atlaskit/tooltip": "^17.5.2",
     "@atlaskit/ufo": "^0.1.0",
     "@babel/runtime": "^7.0.0",
@@ -51,7 +51,7 @@
     "async-retry": "^1.2.3",
     "dataloader": "^2.0.0",
     "facepaint": "^1.2.1",
-    "json-ld-types": "2.4.0",
+    "json-ld-types": "2.4.1",
     "p-throttle": "^4.1.1",
     "react-error-boundary": "^3.1.3",
     "react-lazily-render": "^1.2.0",
@@ -76,7 +76,7 @@
     "@atlaskit/inline-message": "^11.2.0",
     "@atlaskit/lozenge": "^11.1.0",
     "@atlaskit/media-integration-test-helpers": "^2.5.0",
-    "@atlaskit/media-test-helpers": "^29.2.0",
+    "@atlaskit/media-test-helpers": "^29.3.0",
     "@atlaskit/page": "^12.1.0",
     "@atlaskit/radio": "^5.3.0",
     "@atlaskit/range": "^6.0.0",