@atlaskit/smart-card 19.1.30 → 19.1.31

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/smart-card
 
+## 19.1.31
+
+### Patch Changes
+
+- [`34d17437062`](https://bitbucket.org/atlassian/atlassian-frontend/commits/34d17437062) - Flexible UI: Add DueOn element
+  Hover Preview: Update Atlas metadata
+
 ## 19.1.30
 
 ### Patch Changes

package/dist/cjs/constants.js

@@ -134,6 +134,7 @@ exports.ElementName = ElementName;
   ElementName["CommentCount"] = "CommentCount";
   ElementName["CreatedBy"] = "CreatedBy";
   ElementName["CreatedOn"] = "CreatedOn";
+  ElementName["DueOn"] = "DueOn";
   ElementName["LinkIcon"] = "LinkIcon";
   ElementName["ModifiedBy"] = "ModifiedBy";
   ElementName["ModifiedOn"] = "ModifiedOn";

package/dist/cjs/extractors/common/icon/extractIcon.js

@@ -19,6 +19,8 @@ var _3 = _interopRequireDefault(require("@atlaskit/icon-object/glyph/branch/16")
 
 var _4 = _interopRequireDefault(require("@atlaskit/icon-object/glyph/code/16"));
 
+var _5 = _interopRequireDefault(require("@atlaskit/icon-object/glyph/task/16"));
+
 var _priority = require("./priority");
 
 var _extractProvider = require("../context/extractProvider");
@@ -71,6 +73,11 @@ var extractIconByType = function extractIconByType(type, opts) {
     case 'atlassian:UndefinedLink':
       return (0, _extractIconFromDocument.extractIconFromDocument)(type, opts);
 
+    case 'atlassian:Goal':
+      return opts.icon || /*#__PURE__*/_react.default.createElement(_5.default, {
+        label: opts.title || 'goal'
+      });
+
     case 'atlassian:Project':
       return opts.icon || /*#__PURE__*/_react.default.createElement(_peopleGroup.default, {
         label: opts.title || 'project',

package/dist/cjs/extractors/common/icon/priority.js

@@ -12,6 +12,7 @@ var extractorPriorityMap = {
   'schema:BlogPosting': 10,
   'schema:SpreadsheetDigitalDocument': 10,
   'schema:PresentationDigitalDocument': 10,
+  'atlassian:Goal': 10,
   'atlassian:Task': 10,
   'atlassian:Project': 10,
   'atlassian:Template': 10,

package/dist/cjs/extractors/common/lozenge/extractLozenge.js

@@ -35,12 +35,18 @@ var extractLozenge = function extractLozenge(jsonLd) {
       var jsonLdDocument = jsonLd;
       var lozengeFromState = (0, _extractState.extractState)(jsonLdDocument);
       return lozengeFromState;
-    } else if (type.includes('atlassian:Project')) {
+    } else if (type.includes('atlassian:Goal')) {
       var jsonLdProject = jsonLd;
 
       var _lozengeFromState = (0, _extractState.extractState)(jsonLdProject);
 
       return _lozengeFromState;
+    } else if (type.includes('atlassian:Project')) {
+      var _jsonLdProject = jsonLd;
+
+      var _lozengeFromState2 = (0, _extractState.extractState)(_jsonLdProject);
+
+      return _lozengeFromState2;
     } else if (type.includes('atlassian:UndefinedLink')) {
       return {
         text: 'UNDEFINED',

package/dist/cjs/extractors/common/lozenge/extractState.js

@@ -24,14 +24,14 @@ var extractState = function extractState(jsonLd) {
       if (state.name) {
         return {
           text: state.name,
-          appearance: 'default'
+          appearance: state.appearance || 'default'
         };
       }
     } else if (state['@type'] === 'Object') {
       if (state.name) {
         return {
           text: state.name,
-          appearance: 'default'
+          appearance: state.appearance || 'default'
         };
       }
     }

package/dist/cjs/extractors/flexible/icon/extract-jsonld-data-icon.js

@@ -108,6 +108,12 @@ var extractJsonldDataIcon = function extractJsonldDataIcon(data) {
         label: taskLabel
       };
 
+    case 'atlassian:Goal':
+      return urlIcon || {
+        icon: _constants2.IconType.Task,
+        label: label || 'Goal'
+      };
+
     case 'atlassian:Project':
       return urlIcon || {
         icon: _constants2.IconType.Project,

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

@@ -47,6 +47,7 @@ var extractFlexibleUiContext = function extractFlexibleUiContext(response, rende
     voteCount: (0, _utils.extractVoteCount)(data),
     createdBy: (0, _utils.extractCreatedBy)(data),
     createdOn: (0, _extractDateCreated.extractDateCreated)(data),
+    dueOn: (0, _utils.extractDueOn)(data),
     latestCommit: (0, _latestCommit.extractLatestCommit)(data),
     linkIcon: (0, _icon.extractLinkIcon)(response, renderers),
     modifiedBy: (0, _utils.extractModifiedBy)(data),

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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.extractVoteCount = exports.extractViewCount = exports.extractTargetBranch = exports.extractSubscriberCount = exports.extractSourceBranch = exports.extractReactCount = exports.extractProgrammingLanguage = exports.extractModifiedBy = exports.extractCreatedBy = exports.extractCommentCount = void 0;
+exports.extractVoteCount = exports.extractViewCount = exports.extractTargetBranch = exports.extractSubscriberCount = exports.extractSourceBranch = exports.extractReactCount = exports.extractProgrammingLanguage = exports.extractModifiedBy = exports.extractDueOn = exports.extractCreatedBy = exports.extractCommentCount = void 0;
 
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 
@@ -27,6 +27,12 @@ var extractCommentCount = function extractCommentCount(data) {
 
 exports.extractCommentCount = extractCommentCount;
 
+var extractDueOn = function extractDueOn(data) {
+  return extractValue(data, 'endTime');
+};
+
+exports.extractDueOn = extractDueOn;
+
 var extractViewCount = function extractViewCount(data) {
   return extractValue(data, 'atlassian:viewCount');
 };

package/dist/cjs/version.json

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

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.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.LatestCommit, ['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.Provider, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Snippet, ['block']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.SourceBranch, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.State, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.SubscriberCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.TargetBranch, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Title, ['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.DueOn, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.LatestCommit, ['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.Provider, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Snippet, ['block']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.SourceBranch, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.State, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.SubscriberCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.TargetBranch, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Title, ['inline']), _ElementDisplaySchema);
 exports.ElementDisplaySchema = ElementDisplaySchema;
 
 var getDirectionStyles = function getDirectionStyles(direction) {

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.VoteCount = exports.ViewCount = exports.Title = exports.TargetBranch = exports.SubscriberCount = exports.State = exports.SourceBranch = exports.Snippet = exports.ReactCount = exports.Provider = exports.ProgrammingLanguage = exports.Priority = exports.Preview = exports.ModifiedOn = exports.ModifiedBy = exports.LinkIcon = exports.LatestCommit = exports.CreatedOn = exports.CreatedBy = exports.CommentCount = exports.CollaboratorGroup = exports.AuthorGroup = void 0;
+exports.VoteCount = exports.ViewCount = exports.Title = exports.TargetBranch = exports.SubscriberCount = exports.State = exports.SourceBranch = exports.Snippet = exports.ReactCount = exports.Provider = exports.ProgrammingLanguage = exports.Priority = exports.Preview = exports.ModifiedOn = exports.ModifiedBy = exports.LinkIcon = exports.LatestCommit = exports.DueOn = exports.CreatedOn = exports.CreatedBy = exports.CommentCount = exports.CollaboratorGroup = exports.AuthorGroup = void 0;
 
 var _utils = require("./utils");
 
@@ -47,10 +47,17 @@ var CreatedOn = (0, _utils.createElement)(_constants.ElementName.CreatedOn);
 exports.CreatedOn = CreatedOn;
 var CreatedBy = (0, _utils.createElement)(_constants.ElementName.CreatedBy);
 /**
- * Creates an element that contains Last Commit hash
+ * Creates a DueOn Lozenge element using the data from dueOn in the Flexible UI Context.
+ * @see Lozenge
  */
 
 exports.CreatedBy = CreatedBy;
+var DueOn = (0, _utils.createElement)(_constants.ElementName.DueOn);
+/**
+ * Creates an element that contains Last Commit hash
+ */
+
+exports.DueOn = DueOn;
 var LatestCommit = (0, _utils.createElement)(_constants.ElementName.LatestCommit);
 /**
  * Creates a LinkIcon Icon element using the data from LinkIcon in the Flexible UI Context.

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

@@ -17,6 +17,8 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _reactIntlNext = require("react-intl-next");
+
 var _core = require("@emotion/core");
 
 var _constants = require("../../../../constants");
@@ -78,6 +80,8 @@ var elementMappings = (_elementMappings = {}, (0, _defineProperty2.default)(_ele
   component: _text.default
 }), (0, _defineProperty2.default)(_elementMappings, _constants.ElementName.CreatedOn, {
   component: _dateTime.default
+}), (0, _defineProperty2.default)(_elementMappings, _constants.ElementName.DueOn, {
+  component: _lozenge.default
 }), (0, _defineProperty2.default)(_elementMappings, _constants.ElementName.LatestCommit, {
   component: _badge.default,
   props: {
@@ -154,6 +158,9 @@ var getData = function getData(elementName, contextKey, context) {
     case _constants.ElementName.CreatedOn:
       return toDateTimeProps('created', context.createdOn);
 
+    case _constants.ElementName.DueOn:
+      return toDateLozengeProps(context.dueOn);
+
     case _constants.ElementName.ModifiedBy:
       return toFormattedTextProps(_messages.messages.modified_by, context.modifiedBy);
 
@@ -185,6 +192,21 @@ var toBadgeProps = function toBadgeProps(label) {
   } : undefined;
 };
 
+var toDateLozengeProps = function toDateLozengeProps(dateString) {
+  if (dateString) {
+    var text = Date.parse(dateString) ? /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedDate, {
+      value: new Date(dateString),
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+      formatMatcher: "best fit"
+    }) : dateString;
+    return {
+      text: text
+    };
+  }
+};
+
 var toDateTimeProps = function toDateTimeProps(type, dateString) {
   return dateString ? {
     date: new Date(dateString),

package/dist/cjs/view/HoverCard/utils.js

@@ -53,6 +53,25 @@ var getSimulatedMetadata = function getSimulatedMetadata() {
         }
       };
 
+    case 'watermelon-object-provider':
+      if (types.includes('atlassian:Project')) {
+        return {
+          metadata: {
+            primary: [_constants.ElementName.AuthorGroup, _constants.ElementName.ModifiedOn, _constants.ElementName.State, _constants.ElementName.DueOn],
+            secondary: [],
+            subtitle: []
+          }
+        };
+      }
+
+      return {
+        metadata: {
+          primary: [_constants.ElementName.AuthorGroup, _constants.ElementName.State, _constants.ElementName.DueOn],
+          secondary: [],
+          subtitle: []
+        }
+      };
+
     default:
       return {
         metadata: {

package/dist/es2019/constants.js

@@ -111,6 +111,7 @@ export let ElementName;
   ElementName["CommentCount"] = "CommentCount";
   ElementName["CreatedBy"] = "CreatedBy";
   ElementName["CreatedOn"] = "CreatedOn";
+  ElementName["DueOn"] = "DueOn";
   ElementName["LinkIcon"] = "LinkIcon";
   ElementName["ModifiedBy"] = "ModifiedBy";
   ElementName["ModifiedOn"] = "ModifiedOn";

package/dist/es2019/extractors/common/icon/extractIcon.js

@@ -4,6 +4,7 @@ import CommitIcon from '@atlaskit/icon-object/glyph/commit/16';
 import PullRequestIcon from '@atlaskit/icon-object/glyph/pull-request/16';
 import BranchIcon from '@atlaskit/icon-object/glyph/branch/16';
 import RepoIcon from '@atlaskit/icon-object/glyph/code/16';
+import TaskIcon from '@atlaskit/icon-object/glyph/task/16';
 import { extractorPriorityMap } from './priority';
 import { extractProvider } from '../context/extractProvider';
 import { extractTitle } from '../primitives/extractTitle';
@@ -43,6 +44,11 @@ const extractIconByType = (type, opts) => {
     case 'atlassian:UndefinedLink':
       return extractIconFromDocument(type, opts);
 
+    case 'atlassian:Goal':
+      return opts.icon || /*#__PURE__*/React.createElement(TaskIcon, {
+        label: opts.title || 'goal'
+      });
+
     case 'atlassian:Project':
       return opts.icon || /*#__PURE__*/React.createElement(ProjectIcon, {
         label: opts.title || 'project',

package/dist/es2019/extractors/common/icon/priority.js

@@ -6,6 +6,7 @@ export const extractorPriorityMap = {
   'schema:BlogPosting': 10,
   'schema:SpreadsheetDigitalDocument': 10,
   'schema:PresentationDigitalDocument': 10,
+  'atlassian:Goal': 10,
   'atlassian:Task': 10,
   'atlassian:Project': 10,
   'atlassian:Template': 10,

package/dist/es2019/extractors/common/lozenge/extractLozenge.js

@@ -20,6 +20,10 @@ export const extractLozenge = jsonLd => {
       const jsonLdDocument = jsonLd;
       const lozengeFromState = extractState(jsonLdDocument);
       return lozengeFromState;
+    } else if (type.includes('atlassian:Goal')) {
+      const jsonLdProject = jsonLd;
+      const lozengeFromState = extractState(jsonLdProject);
+      return lozengeFromState;
     } else if (type.includes('atlassian:Project')) {
       const jsonLdProject = jsonLd;
       const lozengeFromState = extractState(jsonLdProject);

package/dist/es2019/extractors/common/lozenge/extractState.js

@@ -16,14 +16,14 @@ export const extractState = jsonLd => {
       if (state.name) {
         return {
           text: state.name,
-          appearance: 'default'
+          appearance: state.appearance || 'default'
         };
       }
     } else if (state['@type'] === 'Object') {
       if (state.name) {
         return {
           text: state.name,
-          appearance: 'default'
+          appearance: state.appearance || 'default'
         };
       }
     }

package/dist/es2019/extractors/flexible/icon/extract-jsonld-data-icon.js

@@ -82,6 +82,12 @@ const extractJsonldDataIcon = data => {
         label: taskLabel
       };
 
+    case 'atlassian:Goal':
+      return urlIcon || {
+        icon: IconType.Task,
+        label: label || 'Goal'
+      };
+
     case 'atlassian:Project':
       return urlIcon || {
         icon: IconType.Project,

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, extractViewCount, extractReactCount, extractVoteCount, extractSourceBranch, extractTargetBranch } from './utils';
+import { extractCommentCount, extractCreatedBy, extractModifiedBy, extractProgrammingLanguage, extractSubscriberCount, extractViewCount, extractReactCount, extractVoteCount, extractSourceBranch, extractTargetBranch, extractDueOn } from './utils';
 import { extractPersonCreatedBy } from '../common/person';
 import { extractPersonsUpdatedBy } from './collaboratorGroup';
 import { extractDateUpdated } from '../common/date/extractDateUpdated';
@@ -27,6 +27,7 @@ const extractFlexibleUiContext = (response, renderers) => {
     voteCount: extractVoteCount(data),
     createdBy: extractCreatedBy(data),
     createdOn: extractDateCreated(data),
+    dueOn: extractDueOn(data),
     latestCommit: extractLatestCommit(data),
     linkIcon: extractLinkIcon(response, renderers),
     modifiedBy: extractModifiedBy(data),

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

@@ -11,6 +11,7 @@ const extractValue = (data, key) => {
 };
 
 export const extractCommentCount = data => extractValue(data, 'schema:commentCount');
+export const extractDueOn = data => extractValue(data, 'endTime');
 export const extractViewCount = data => extractValue(data, 'atlassian:viewCount');
 export const extractReactCount = data => extractValue(data, 'atlassian:reactCount');
 export const extractVoteCount = data => extractValue(data, 'atlassian:voteCount');

package/dist/es2019/version.json

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

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

@@ -16,6 +16,7 @@ export const ElementDisplaySchema = {
   [ElementName.VoteCount]: ['inline'],
   [ElementName.CreatedBy]: ['inline'],
   [ElementName.CreatedOn]: ['inline'],
+  [ElementName.DueOn]: ['inline'],
   [ElementName.LatestCommit]: ['inline'],
   [ElementName.LinkIcon]: ['inline'],
   [ElementName.ModifiedBy]: ['inline'],

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

@@ -33,6 +33,12 @@ export const CreatedOn = createElement(ElementName.CreatedOn);
  */
 
 export const CreatedBy = createElement(ElementName.CreatedBy);
+/**
+ * Creates a DueOn Lozenge element using the data from dueOn in the Flexible UI Context.
+ * @see Lozenge
+ */
+
+export const DueOn = createElement(ElementName.DueOn);
 /**
  * Creates an element that contains Last Commit hash
  */

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

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useContext } from 'react';
+import { FormattedDate } from 'react-intl-next';
 import { css } from '@emotion/core';
 import { ElementName, IconType } from '../../../../constants';
 import Icon from './icon';
@@ -51,6 +52,9 @@ const elementMappings = {
   [ElementName.CreatedOn]: {
     component: DateTime
   },
+  [ElementName.DueOn]: {
+    component: Lozenge
+  },
   [ElementName.LatestCommit]: {
     component: Badge,
     props: {
@@ -143,6 +147,9 @@ const getData = (elementName, contextKey, context) => {
     case ElementName.CreatedOn:
       return toDateTimeProps('created', context.createdOn);
 
+    case ElementName.DueOn:
+      return toDateLozengeProps(context.dueOn);
+
     case ElementName.ModifiedBy:
       return toFormattedTextProps(messages.modified_by, context.modifiedBy);
 
@@ -174,6 +181,21 @@ const toBadgeProps = label => {
   } : undefined;
 };
 
+const toDateLozengeProps = dateString => {
+  if (dateString) {
+    const text = Date.parse(dateString) ? /*#__PURE__*/React.createElement(FormattedDate, {
+      value: new Date(dateString),
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+      formatMatcher: "best fit"
+    }) : dateString;
+    return {
+      text
+    };
+  }
+};
+
 const toDateTimeProps = (type, dateString) => {
   return dateString ? {
     date: new Date(dateString),

package/dist/es2019/view/HoverCard/utils.js

@@ -40,6 +40,25 @@ export const getSimulatedMetadata = (extensionKey = '', types = []) => {
         }
       };
 
+    case 'watermelon-object-provider':
+      if (types.includes('atlassian:Project')) {
+        return {
+          metadata: {
+            primary: [ElementName.AuthorGroup, ElementName.ModifiedOn, ElementName.State, ElementName.DueOn],
+            secondary: [],
+            subtitle: []
+          }
+        };
+      }
+
+      return {
+        metadata: {
+          primary: [ElementName.AuthorGroup, ElementName.State, ElementName.DueOn],
+          secondary: [],
+          subtitle: []
+        }
+      };
+
     default:
       return {
         metadata: {

package/dist/esm/constants.js

@@ -111,6 +111,7 @@ export var ElementName;
   ElementName["CommentCount"] = "CommentCount";
   ElementName["CreatedBy"] = "CreatedBy";
   ElementName["CreatedOn"] = "CreatedOn";
+  ElementName["DueOn"] = "DueOn";
   ElementName["LinkIcon"] = "LinkIcon";
   ElementName["ModifiedBy"] = "ModifiedBy";
   ElementName["ModifiedOn"] = "ModifiedOn";

package/dist/esm/extractors/common/icon/extractIcon.js

@@ -4,6 +4,7 @@ import CommitIcon from '@atlaskit/icon-object/glyph/commit/16';
 import PullRequestIcon from '@atlaskit/icon-object/glyph/pull-request/16';
 import BranchIcon from '@atlaskit/icon-object/glyph/branch/16';
 import RepoIcon from '@atlaskit/icon-object/glyph/code/16';
+import TaskIcon from '@atlaskit/icon-object/glyph/task/16';
 import { extractorPriorityMap } from './priority';
 import { extractProvider } from '../context/extractProvider';
 import { extractTitle } from '../primitives/extractTitle';
@@ -46,6 +47,11 @@ var extractIconByType = function extractIconByType(type, opts) {
     case 'atlassian:UndefinedLink':
       return extractIconFromDocument(type, opts);
 
+    case 'atlassian:Goal':
+      return opts.icon || /*#__PURE__*/React.createElement(TaskIcon, {
+        label: opts.title || 'goal'
+      });
+
     case 'atlassian:Project':
       return opts.icon || /*#__PURE__*/React.createElement(ProjectIcon, {
         label: opts.title || 'project',

package/dist/esm/extractors/common/icon/priority.js

@@ -6,6 +6,7 @@ export var extractorPriorityMap = {
   'schema:BlogPosting': 10,
   'schema:SpreadsheetDigitalDocument': 10,
   'schema:PresentationDigitalDocument': 10,
+  'atlassian:Goal': 10,
   'atlassian:Task': 10,
   'atlassian:Project': 10,
   'atlassian:Template': 10,

package/dist/esm/extractors/common/lozenge/extractLozenge.js

@@ -22,12 +22,18 @@ export var extractLozenge = function extractLozenge(jsonLd) {
       var jsonLdDocument = jsonLd;
       var lozengeFromState = extractState(jsonLdDocument);
       return lozengeFromState;
-    } else if (type.includes('atlassian:Project')) {
+    } else if (type.includes('atlassian:Goal')) {
       var jsonLdProject = jsonLd;
 
       var _lozengeFromState = extractState(jsonLdProject);
 
       return _lozengeFromState;
+    } else if (type.includes('atlassian:Project')) {
+      var _jsonLdProject = jsonLd;
+
+      var _lozengeFromState2 = extractState(_jsonLdProject);
+
+      return _lozengeFromState2;
     } else if (type.includes('atlassian:UndefinedLink')) {
       return {
         text: 'UNDEFINED',

package/dist/esm/extractors/common/lozenge/extractState.js

@@ -16,14 +16,14 @@ export var extractState = function extractState(jsonLd) {
       if (state.name) {
         return {
           text: state.name,
-          appearance: 'default'
+          appearance: state.appearance || 'default'
         };
       }
     } else if (state['@type'] === 'Object') {
       if (state.name) {
         return {
           text: state.name,
-          appearance: 'default'
+          appearance: state.appearance || 'default'
         };
       }
     }

package/dist/esm/extractors/flexible/icon/extract-jsonld-data-icon.js

@@ -90,6 +90,12 @@ var extractJsonldDataIcon = function extractJsonldDataIcon(data) {
         label: taskLabel
       };
 
+    case 'atlassian:Goal':
+      return urlIcon || {
+        icon: IconType.Task,
+        label: label || 'Goal'
+      };
+
     case 'atlassian:Project':
       return urlIcon || {
         icon: IconType.Project,

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, extractViewCount, extractReactCount, extractVoteCount, extractSourceBranch, extractTargetBranch } from './utils';
+import { extractCommentCount, extractCreatedBy, extractModifiedBy, extractProgrammingLanguage, extractSubscriberCount, extractViewCount, extractReactCount, extractVoteCount, extractSourceBranch, extractTargetBranch, extractDueOn } from './utils';
 import { extractPersonCreatedBy } from '../common/person';
 import { extractPersonsUpdatedBy } from './collaboratorGroup';
 import { extractDateUpdated } from '../common/date/extractDateUpdated';
@@ -27,6 +27,7 @@ var extractFlexibleUiContext = function extractFlexibleUiContext(response, rende
     voteCount: extractVoteCount(data),
     createdBy: extractCreatedBy(data),
     createdOn: extractDateCreated(data),
+    dueOn: extractDueOn(data),
     latestCommit: extractLatestCommit(data),
     linkIcon: extractLinkIcon(response, renderers),
     modifiedBy: extractModifiedBy(data),

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

@@ -14,6 +14,9 @@ var extractValue = function extractValue(data, key) {
 export var extractCommentCount = function extractCommentCount(data) {
   return extractValue(data, 'schema:commentCount');
 };
+export var extractDueOn = function extractDueOn(data) {
+  return extractValue(data, 'endTime');
+};
 export var extractViewCount = function extractViewCount(data) {
   return extractValue(data, 'atlassian:viewCount');
 };

package/dist/esm/version.json

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

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.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.LatestCommit, ['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.Provider, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.Snippet, ['block']), _defineProperty(_ElementDisplaySchema, ElementName.SourceBranch, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.State, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.SubscriberCount, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.TargetBranch, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.Title, ['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.DueOn, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.LatestCommit, ['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.Provider, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.Snippet, ['block']), _defineProperty(_ElementDisplaySchema, ElementName.SourceBranch, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.State, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.SubscriberCount, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.TargetBranch, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.Title, ['inline']), _ElementDisplaySchema);
 
 var getDirectionStyles = function getDirectionStyles(direction) {
   switch (direction) {

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

@@ -33,6 +33,12 @@ export var CreatedOn = createElement(ElementName.CreatedOn);
  */
 
 export var CreatedBy = createElement(ElementName.CreatedBy);
+/**
+ * Creates a DueOn Lozenge element using the data from dueOn in the Flexible UI Context.
+ * @see Lozenge
+ */
+
+export var DueOn = createElement(ElementName.DueOn);
 /**
  * Creates an element that contains Last Commit hash
  */

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

@@ -5,6 +5,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject, _elementMappings;
 
 import React, { useContext } from 'react';
+import { FormattedDate } from 'react-intl-next';
 import { css } from '@emotion/core';
 import { ElementName, IconType } from '../../../../constants';
 import Icon from './icon';
@@ -47,6 +48,8 @@ var elementMappings = (_elementMappings = {}, _defineProperty(_elementMappings,
   component: Text
 }), _defineProperty(_elementMappings, ElementName.CreatedOn, {
   component: DateTime
+}), _defineProperty(_elementMappings, ElementName.DueOn, {
+  component: Lozenge
 }), _defineProperty(_elementMappings, ElementName.LatestCommit, {
   component: Badge,
   props: {
@@ -123,6 +126,9 @@ var getData = function getData(elementName, contextKey, context) {
     case ElementName.CreatedOn:
       return toDateTimeProps('created', context.createdOn);
 
+    case ElementName.DueOn:
+      return toDateLozengeProps(context.dueOn);
+
     case ElementName.ModifiedBy:
       return toFormattedTextProps(messages.modified_by, context.modifiedBy);
 
@@ -154,6 +160,21 @@ var toBadgeProps = function toBadgeProps(label) {
   } : undefined;
 };
 
+var toDateLozengeProps = function toDateLozengeProps(dateString) {
+  if (dateString) {
+    var text = Date.parse(dateString) ? /*#__PURE__*/React.createElement(FormattedDate, {
+      value: new Date(dateString),
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+      formatMatcher: "best fit"
+    }) : dateString;
+    return {
+      text: text
+    };
+  }
+};
+
 var toDateTimeProps = function toDateTimeProps(type, dateString) {
   return dateString ? {
     date: new Date(dateString),

package/dist/esm/view/HoverCard/utils.js

@@ -43,6 +43,25 @@ export var getSimulatedMetadata = function getSimulatedMetadata() {
         }
       };
 
+    case 'watermelon-object-provider':
+      if (types.includes('atlassian:Project')) {
+        return {
+          metadata: {
+            primary: [ElementName.AuthorGroup, ElementName.ModifiedOn, ElementName.State, ElementName.DueOn],
+            secondary: [],
+            subtitle: []
+          }
+        };
+      }
+
+      return {
+        metadata: {
+          primary: [ElementName.AuthorGroup, ElementName.State, ElementName.DueOn],
+          secondary: [],
+          subtitle: []
+        }
+      };
+
     default:
       return {
         metadata: {

package/dist/types/constants.d.ts

@@ -85,6 +85,7 @@ export declare enum ElementName {
     CommentCount = "CommentCount",
     CreatedBy = "CreatedBy",
     CreatedOn = "CreatedOn",
+    DueOn = "DueOn",
     LinkIcon = "LinkIcon",
     ModifiedBy = "ModifiedBy",
     ModifiedOn = "ModifiedOn",

package/dist/types/extractors/common/lozenge/extractState.d.ts

@@ -1,3 +1,3 @@
 import { JsonLd } from 'json-ld-types';
 import { LinkLozenge } from './types';
-export declare const extractState: (jsonLd: JsonLd.Data.SourceCodePullRequest | JsonLd.Data.Document | JsonLd.Data.Project) => LinkLozenge | undefined;
+export declare const extractState: (jsonLd: JsonLd.Data.SourceCodePullRequest | JsonLd.Data.Document | JsonLd.Data.Project | JsonLd.Data.Goal) => LinkLozenge | undefined;

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

@@ -1,5 +1,6 @@
 import { JsonLd } from 'json-ld-types';
 export declare const extractCommentCount: (data: JsonLd.Data.BaseData) => number | undefined;
+export declare const extractDueOn: (data: JsonLd.Data.BaseData) => string | 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;

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

@@ -22,6 +22,13 @@ export declare type FlexibleUiDataContext = {
      * @see CommentCount
      */
     commentCount?: number;
+    /**
+     * Contains the ISO timestamp of when the resource was due.
+     * This value is mapped to JsonLD endTime.
+     * @type string - ISO Timestamp
+     * @see DueOn
+     */
+    dueOn?: string;
     /**
      * Contains the number of views of the linked resource.
      * @type number

package/dist/types/view/FlexibleCard/components/blocks/types.d.ts

@@ -103,7 +103,7 @@ export declare type ActionItem = NamedActionItem | CustomActionItem;
 /**
  * A type that contains all the possible combinations of elements with their corresponding props.
  */
-export declare type ElementItemProps = AuthorGroup | CollaboratorGroup | CommentCount | CreatedBy | CreatedOn | LatestCommit | LinkIcon | ModifiedBy | ModifiedOn | Preview | Priority | ProgrammingLanguage | Provider | ReactCount | Snippet | SourceBranch | State | SubscriberCount | TargetBranch | Title | ViewCount | VoteCount;
+export declare type ElementItemProps = AuthorGroup | CollaboratorGroup | CommentCount | CreatedBy | CreatedOn | DueOn | LatestCommit | LinkIcon | ModifiedBy | ModifiedOn | Preview | Priority | ProgrammingLanguage | Provider | ReactCount | Snippet | SourceBranch | State | SubscriberCount | TargetBranch | Title | ViewCount | VoteCount;
 /**
  * Represents the props available for an AuthorGroup element.
  * @see AuthorGroup
@@ -143,6 +143,13 @@ export declare type CreatedOn = {
      */
     text?: string;
 };
+/**
+ * Represents the props available for an DueOn element.
+ * @see CreatedOn
+ */
+export declare type DueOn = {
+    name: ElementName.DueOn;
+};
 /**
  * Represents the props available for an LastCommit element.
  * @see BadgeProps

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

@@ -32,6 +32,11 @@ export declare const CreatedOn: import("react").FC<DateTimeProps>;
  * @see Text
  */
 export declare const CreatedBy: import("react").FC<TextProps>;
+/**
+ * Creates a DueOn Lozenge element using the data from dueOn in the Flexible UI Context.
+ * @see Lozenge
+ */
+export declare const DueOn: import("react").FC<LozengeProps>;
 /**
  * Creates an element that contains Last Commit hash
  */

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ElementProps } from '../types';
 export declare type LozengeAppearance = 'default' | 'inprogress' | 'moved' | 'new' | 'removed' | 'success';
 export declare type LozengeProps = ElementProps & {
@@ -8,5 +9,5 @@ export declare type LozengeProps = ElementProps & {
     /**
      * The text to display within the lozenge.
      */
-    text?: string;
+    text?: string | React.ReactNode;
 };

package/package.json

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

package/report.api.md

@@ -247,6 +247,8 @@ export enum ElementName {
   // (undocumented)
   CreatedOn = 'CreatedOn',
   // (undocumented)
+  DueOn = 'DueOn',
+  // (undocumented)
   LatestCommit = 'LatestCommit',
   // (undocumented)
   LinkIcon = 'LinkIcon',