@atlaskit/smart-card 16.3.0 → 17.2.0

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

@@ -0,0 +1,306 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+var _importIconMapper;
+
+import React from 'react';
+import Loadable from 'react-loadable';
+import { B200, B400, N700, R400 } from '@atlaskit/theme/colors';
+import { IconType } from '../../../../../constants';
+// prettier-ignore
+var importIconMapper = (_importIconMapper = {}, _defineProperty(_importIconMapper, IconType.Archive, function () {
+  return import(
+  /* webpackChunkName: "glyphArchive" */
+  '@atlaskit/icon-file-type/glyph/archive/16');
+}), _defineProperty(_importIconMapper, IconType.Audio, function () {
+  return import(
+  /* webpackChunkName: "glyphAudio" */
+  '@atlaskit/icon-file-type/glyph/audio/16');
+}), _defineProperty(_importIconMapper, IconType.Blog, function () {
+  return import(
+  /* webpackChunkName: "glyphBlog" */
+  '@atlaskit/icon-object/glyph/blog/16');
+}), _defineProperty(_importIconMapper, IconType.Code, function () {
+  return import(
+  /* webpackChunkName: "glyphCode" */
+  '@atlaskit/icon-file-type/glyph/source-code/16');
+}), _defineProperty(_importIconMapper, IconType.Document, function () {
+  return import(
+  /* webpackChunkName: "glyphDocument" */
+  '@atlaskit/icon-file-type/glyph/document/16');
+}), _defineProperty(_importIconMapper, IconType.Executable, function () {
+  return import(
+  /* webpackChunkName: "glyphExecutable" */
+  '@atlaskit/icon-file-type/glyph/executable/16');
+}), _defineProperty(_importIconMapper, IconType.File, function () {
+  return import(
+  /* webpackChunkName: "glyphFile" */
+  '@atlaskit/icon-file-type/glyph/generic/16');
+}), _defineProperty(_importIconMapper, IconType.Folder, function () {
+  return import(
+  /* webpackChunkName: "glyphFolder" */
+  '@atlaskit/icon-file-type/glyph/folder/16');
+}), _defineProperty(_importIconMapper, IconType.Generic, function () {
+  return import(
+  /* webpackChunkName: "glyphGeneric" */
+  '@atlaskit/icon-file-type/glyph/generic/16');
+}), _defineProperty(_importIconMapper, IconType.GIF, function () {
+  return import(
+  /* webpackChunkName: "glyphGIF" */
+  '@atlaskit/icon-file-type/glyph/gif/16');
+}), _defineProperty(_importIconMapper, IconType.GoogleDocs, function () {
+  return import(
+  /* webpackChunkName: "glyphGoogleDocs" */
+  '@atlaskit/icon-file-type/glyph/google-doc/16');
+}), _defineProperty(_importIconMapper, IconType.GoogleForms, function () {
+  return import(
+  /* webpackChunkName: "glyphGoogleForms" */
+  '@atlaskit/icon-file-type/glyph/google-form/16');
+}), _defineProperty(_importIconMapper, IconType.GoogleSheets, function () {
+  return import(
+  /* webpackChunkName: "glyphGoogleSheets" */
+  '@atlaskit/icon-file-type/glyph/google-sheet/16');
+}), _defineProperty(_importIconMapper, IconType.GoogleSlides, function () {
+  return import(
+  /* webpackChunkName: "glyphGoogleSlides" */
+  '@atlaskit/icon-file-type/glyph/google-slide/16');
+}), _defineProperty(_importIconMapper, IconType.Image, function () {
+  return import(
+  /* webpackChunkName: "glyphImage" */
+  '@atlaskit/icon-file-type/glyph/image/16');
+}), _defineProperty(_importIconMapper, IconType.MSExcel, function () {
+  return import(
+  /* webpackChunkName: "glyphMSExcel" */
+  '@atlaskit/icon-file-type/glyph/excel-spreadsheet/16');
+}), _defineProperty(_importIconMapper, IconType.MSPowerpoint, function () {
+  return import(
+  /* webpackChunkName: "glyphMSPowerpoint" */
+  '@atlaskit/icon-file-type/glyph/powerpoint-presentation/16');
+}), _defineProperty(_importIconMapper, IconType.MSWord, function () {
+  return import(
+  /* webpackChunkName: "glyphMSWord" */
+  '@atlaskit/icon-file-type/glyph/word-document/16');
+}), _defineProperty(_importIconMapper, IconType.PDF, function () {
+  return import(
+  /* webpackChunkName: "glyphPDF" */
+  '@atlaskit/icon-file-type/glyph/pdf-document/16');
+}), _defineProperty(_importIconMapper, IconType.Presentation, function () {
+  return import(
+  /* webpackChunkName: "glyphPresentation" */
+  '@atlaskit/icon-file-type/glyph/presentation/16');
+}), _defineProperty(_importIconMapper, IconType.Sketch, function () {
+  return import(
+  /* webpackChunkName: "glyphSketch" */
+  '@atlaskit/icon-file-type/glyph/sketch/16');
+}), _defineProperty(_importIconMapper, IconType.Spreadsheet, function () {
+  return import(
+  /* webpackChunkName: "glyphSpreadsheet" */
+  '@atlaskit/icon-file-type/glyph/spreadsheet/16');
+}), _defineProperty(_importIconMapper, IconType.Template, function () {
+  return import(
+  /* webpackChunkName: "glyphTemplate" */
+  '@atlaskit/icon/glyph/document-filled');
+}), _defineProperty(_importIconMapper, IconType.Video, function () {
+  return import(
+  /* webpackChunkName: "glyphVideo" */
+  '@atlaskit/icon-file-type/glyph/video/16');
+}), _defineProperty(_importIconMapper, IconType.Branch, function () {
+  return import(
+  /* webpackChunkName: "glyphBranch" */
+  '@atlaskit/icon-object/glyph/branch/16');
+}), _defineProperty(_importIconMapper, IconType.Commit, function () {
+  return import(
+  /* webpackChunkName: "glyphCommit" */
+  '@atlaskit/icon-object/glyph/commit/16');
+}), _defineProperty(_importIconMapper, IconType.Project, function () {
+  return import(
+  /* webpackChunkName: "glyphProject" */
+  '@atlaskit/icon/glyph/people-group');
+}), _defineProperty(_importIconMapper, IconType.PullRequest, function () {
+  return import(
+  /* webpackChunkName: "glyphPullRequest" */
+  '@atlaskit/icon-object/glyph/pull-request/16');
+}), _defineProperty(_importIconMapper, IconType.Repo, function () {
+  return import(
+  /* webpackChunkName: "glyphRepo" */
+  '@atlaskit/icon-object/glyph/code/16');
+}), _defineProperty(_importIconMapper, IconType.Bug, function () {
+  return import(
+  /* webpackChunkName: "glyphBug" */
+  '@atlaskit/icon-object/glyph/bug/16');
+}), _defineProperty(_importIconMapper, IconType.Change, function () {
+  return import(
+  /* webpackChunkName: "glyphChange" */
+  '@atlaskit/icon-object/glyph/changes/16');
+}), _defineProperty(_importIconMapper, IconType.Epic, function () {
+  return import(
+  /* webpackChunkName: "glyphEpic" */
+  '@atlaskit/icon-object/glyph/epic/16');
+}), _defineProperty(_importIconMapper, IconType.Incident, function () {
+  return import(
+  /* webpackChunkName: "glyphIncident" */
+  '@atlaskit/icon-object/glyph/incident/16');
+}), _defineProperty(_importIconMapper, IconType.Problem, function () {
+  return import(
+  /* webpackChunkName: "glyphProblem" */
+  '@atlaskit/icon-object/glyph/problem/16');
+}), _defineProperty(_importIconMapper, IconType.ServiceRequest, function () {
+  return import(
+  /* webpackChunkName: "glyphServiceRequest" */
+  '@atlaskit/icon-object/glyph/issue/16');
+}), _defineProperty(_importIconMapper, IconType.Story, function () {
+  return import(
+  /* webpackChunkName: "glyphStory" */
+  '@atlaskit/icon-object/glyph/story/16');
+}), _defineProperty(_importIconMapper, IconType.SubTask, function () {
+  return import(
+  /* webpackChunkName: "glyphSubTask" */
+  '@atlaskit/icon-object/glyph/subtask/16');
+}), _defineProperty(_importIconMapper, IconType.Task, function () {
+  return import(
+  /* webpackChunkName: "glyphTask" */
+  '@atlaskit/icon-object/glyph/task/16');
+}), _defineProperty(_importIconMapper, IconType.Confluence, function () {
+  return import(
+  /* webpackChunkName: "glyphConfluence" */
+  '@atlaskit/logo/confluence-icon').then(function (_ref) {
+    var ConfluenceIcon = _ref.ConfluenceIcon;
+    return {
+      default: ConfluenceIcon
+    };
+  });
+}), _defineProperty(_importIconMapper, IconType.Jira, function () {
+  return import(
+  /* webpackChunkName: "glyphJira" */
+  '@atlaskit/logo/jira-icon').then(function (_ref2) {
+    var JiraIcon = _ref2.JiraIcon;
+    return {
+      default: JiraIcon
+    };
+  });
+}), _defineProperty(_importIconMapper, IconType.Default, function () {
+  return import(
+  /* webpackChunkName: "glyphDefault" */
+  '@atlaskit/icon/glyph/link');
+}), _defineProperty(_importIconMapper, IconType.Error, function () {
+  return import(
+  /* webpackChunkName: "glyphError" */
+  '@atlaskit/icon/glyph/error');
+}), _defineProperty(_importIconMapper, IconType.Forbidden, function () {
+  return import(
+  /* webpackChunkName: "glyphForbidden" */
+  '@atlaskit/icon/glyph/lock-filled');
+}), _defineProperty(_importIconMapper, IconType.Comment, function () {
+  return import(
+  /* webpackChunkName: "glyphComment" */
+  '@atlaskit/icon/glyph/comment');
+}), _defineProperty(_importIconMapper, IconType.PriorityBlocker, function () {
+  return import(
+  /* webpackChunkName: "glyphBlocker" */
+  '@atlaskit/icon-priority/glyph/priority-blocker');
+}), _defineProperty(_importIconMapper, IconType.PriorityCritical, function () {
+  return import(
+  /* webpackChunkName: "glyphCritical" */
+  '@atlaskit/icon-priority/glyph/priority-critical');
+}), _defineProperty(_importIconMapper, IconType.PriorityHigh, function () {
+  return import(
+  /* webpackChunkName: "glyphHigh" */
+  '@atlaskit/icon-priority/glyph/priority-high');
+}), _defineProperty(_importIconMapper, IconType.PriorityHighest, function () {
+  return import(
+  /* webpackChunkName: "glyphHighest" */
+  '@atlaskit/icon-priority/glyph/priority-highest');
+}), _defineProperty(_importIconMapper, IconType.PriorityLow, function () {
+  return import(
+  /* webpackChunkName: "glyphLow" */
+  '@atlaskit/icon-priority/glyph/priority-low');
+}), _defineProperty(_importIconMapper, IconType.PriorityLowest, function () {
+  return import(
+  /* webpackChunkName: "glyphLowest" */
+  '@atlaskit/icon-priority/glyph/priority-lowest');
+}), _defineProperty(_importIconMapper, IconType.PriorityMajor, function () {
+  return import(
+  /* webpackChunkName: "glyphMajor" */
+  '@atlaskit/icon-priority/glyph/priority-major');
+}), _defineProperty(_importIconMapper, IconType.PriorityMedium, function () {
+  return import(
+  /* webpackChunkName: "glyphMedium" */
+  '@atlaskit/icon-priority/glyph/priority-medium');
+}), _defineProperty(_importIconMapper, IconType.PriorityMinor, function () {
+  return import(
+  /* webpackChunkName: "glyphMinor" */
+  '@atlaskit/icon-priority/glyph/priority-minor');
+}), _defineProperty(_importIconMapper, IconType.PriorityTrivial, function () {
+  return import(
+  /* webpackChunkName: "glyphTrivial" */
+  '@atlaskit/icon-priority/glyph/priority-trivial');
+}), _defineProperty(_importIconMapper, IconType.PriorityUndefined, function () {
+  return import(
+  /* webpackChunkName: "glyphUndefined" */
+  '@atlaskit/icon/glyph/question');
+}), _defineProperty(_importIconMapper, IconType.ProgrammingLanguage, function () {
+  return import(
+  /* webpackChunkName: "glyphProgrammingLanguage" */
+  '@atlaskit/icon/glyph/code');
+}), _defineProperty(_importIconMapper, IconType.Subscriber, function () {
+  return import(
+  /* webpackChunkName: "glyphSubscriber" */
+  '@atlaskit/icon/glyph/people');
+}), _importIconMapper);
+
+var getIconImportFn = function getIconImportFn(icon) {
+  return importIconMapper[icon];
+};
+
+var importIcon = function importIcon(importFn) {
+  return Loadable({
+    loader: function loader() {
+      return importFn().then(function (module) {
+        return module.default;
+      });
+    },
+    loading: function loading() {
+      return null;
+    }
+  }); // Because we're using dynamic loading here, TS will not be able to infer the type.
+};
+
+var AtlaskitIcon = function AtlaskitIcon(_ref3) {
+  var icon = _ref3.icon,
+      label = _ref3.label,
+      testId = _ref3.testId;
+  var importFn = getIconImportFn(icon);
+
+  if (!importFn) {
+    return null;
+  }
+
+  var ImportedIcon = importIcon(importFn);
+
+  switch (icon) {
+    case IconType.Confluence:
+    case IconType.Jira:
+      // Logo component has a different prop set from other icon components
+      return /*#__PURE__*/React.createElement(ImportedIcon, {
+        textColor: N700,
+        iconColor: B200,
+        iconGradientStart: B400,
+        iconGradientStop: B200
+      });
+
+    case IconType.Error:
+    case IconType.Forbidden:
+      return /*#__PURE__*/React.createElement(ImportedIcon, {
+        label: label,
+        testId: testId,
+        primaryColor: R400
+      });
+
+    default:
+      return /*#__PURE__*/React.createElement(ImportedIcon, {
+        label: label,
+        testId: testId
+      });
+  }
+};
+
+export default AtlaskitIcon;

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,30 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2;
+
+/** @jsx jsx */
+import React from 'react';
+import { css, jsx, keyframes } from '@emotion/core';
+import ImageLoader from 'react-render-image';
+var placeholderShimmer = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% { background-position: -20px 0; }\n  100% { background-position: 20px 0; }\n"])));
+var shimmer = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  border-radius: 2px;\n  user-select: none;\n\n  background: #f6f7f8;\n  background-image: linear-gradient(\n    to right,\n    #f6f7f8 0%,\n    #edeef1 20%,\n    #f6f7f8 40%,\n    #f6f7f8 100%\n  );\n  background-repeat: no-repeat;\n  background-size: 280% 100%;\n  display: inline-block;\n\n  animation-duration: 1s;\n  animation-fill-mode: forwards;\n  animation-iteration-count: infinite;\n  animation-name: ", ";\n  animation-timing-function: linear;\n"])), placeholderShimmer);
+
+var ImageIcon = function ImageIcon(_ref) {
+  var defaultIcon = _ref.defaultIcon,
+      testId = _ref.testId,
+      url = _ref.url;
+  return jsx(ImageLoader, {
+    src: url,
+    loading: jsx("span", {
+      css: shimmer,
+      "data-testid": "".concat(testId, "-loading")
+    }),
+    loaded: jsx("img", {
+      src: url,
+      "data-testid": "".concat(testId, "-image")
+    }),
+    errored: defaultIcon
+  });
+};
+
+export default ImageIcon;

package/dist/esm/view/FlexibleCard/components/common/image-icon/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,88 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2;
+
+/** @jsx jsx */
+import React from 'react';
+import { css, jsx } from '@emotion/core';
+import { SmartLinkSize, SmartLinkTheme } from '../../../../constants';
+import { isFlexibleUiBlock, isFlexibleUiTitleBlock } from '../../../../utils/flexible';
+import { tokens } from '../../../../utils/token';
+var elevationStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border: 1px solid transparent;\n  border-radius: 1.5px;\n  box-shadow: ", ";\n  margin: 2px;\n"])), tokens.elevation);
+
+var getGap = function getGap(size) {
+  switch (size) {
+    case SmartLinkSize.XLarge:
+      return '1.25rem';
+
+    case SmartLinkSize.Large:
+      return '1rem';
+
+    case SmartLinkSize.Medium:
+      return '.5rem';
+
+    case SmartLinkSize.Small:
+    default:
+      return '.25rem';
+  }
+};
+
+var getPadding = function getPadding(size) {
+  switch (size) {
+    case SmartLinkSize.XLarge:
+      return '1.5rem';
+
+    case SmartLinkSize.Large:
+      return '1.25rem';
+
+    case SmartLinkSize.Medium:
+      return '1rem';
+
+    case SmartLinkSize.Small:
+    default:
+      return '.5rem';
+  }
+};
+
+export var getContainerStyles = function getContainerStyles(size, hideBackground, hideElevation, hidePadding) {
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  gap: ", " 0;\n  flex-direction: column;\n  min-width: 0;\n  overflow: hidden;\n  ", "\n  ", "\n  ", "\n"])), getGap(size), hideBackground ? '' : "background-color: ".concat(tokens.background, ";"), hidePadding ? '' : "padding: ".concat(getPadding(size), ";"), hideElevation ? '' : elevationStyles);
+};
+
+var renderChildren = function renderChildren(children, containerSize, containerTheme, status, retry) {
+  return React.Children.map(children, function (child) {
+    if ( /*#__PURE__*/React.isValidElement(child) && isFlexibleUiBlock(child)) {
+      var blockSize = child.props.size;
+      return /*#__PURE__*/React.cloneElement(child, {
+        retry: isFlexibleUiTitleBlock(child) ? retry : undefined,
+        size: blockSize || containerSize,
+        status: status,
+        theme: containerTheme
+      });
+    }
+  });
+};
+
+var Container = function Container(_ref) {
+  var children = _ref.children,
+      _ref$hideBackground = _ref.hideBackground,
+      hideBackground = _ref$hideBackground === void 0 ? false : _ref$hideBackground,
+      _ref$hideElevation = _ref.hideElevation,
+      hideElevation = _ref$hideElevation === void 0 ? false : _ref$hideElevation,
+      _ref$hidePadding = _ref.hidePadding,
+      hidePadding = _ref$hidePadding === void 0 ? false : _ref$hidePadding,
+      retry = _ref.retry,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? SmartLinkSize.Medium : _ref$size,
+      status = _ref.status,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'smart-links-container' : _ref$testId,
+      _ref$theme = _ref.theme,
+      theme = _ref$theme === void 0 ? SmartLinkTheme.Link : _ref$theme;
+  return jsx("div", {
+    css: getContainerStyles(size, hideBackground, hideElevation, hidePadding),
+    "data-smart-link-container": true,
+    "data-testid": testId
+  }, renderChildren(children, size, theme, status, retry));
+};
+
+export default Container;

package/dist/esm/view/FlexibleCard/components/container/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/view/FlexibleCard/components/elements/avatar-group/index.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import AtlaskitAvatarGroup from '@atlaskit/avatar-group';
+import { SmartLinkSize } from '../../../../../constants';
+var MAX_COUNT = 4;
+
+var AvatarGroup = function AvatarGroup(_ref) {
+  var _ref$items = _ref.items,
+      items = _ref$items === void 0 ? [] : _ref$items,
+      _ref$maxCount = _ref.maxCount,
+      maxCount = _ref$maxCount === void 0 ? MAX_COUNT : _ref$maxCount,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? SmartLinkSize.Medium : _ref$size,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'smart-element-avatar-group' : _ref$testId;
+
+  if (!items.length) {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement(AtlaskitAvatarGroup, {
+    maxCount: maxCount,
+    appearance: "stack",
+    size: "small",
+    data: items,
+    testId: testId
+  });
+};
+
+export default AvatarGroup;

package/dist/esm/view/FlexibleCard/components/elements/avatar-group/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,79 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2, _templateObject3, _messageMapper;
+
+/** @jsx jsx */
+import React from 'react';
+import { css, jsx } from '@emotion/core';
+import { tokens } from '../../../../../utils/token';
+import { getFormattedMessage, getIconSizeStyles } from '../../utils';
+import { IconType } from '../../../../../constants';
+import { messages } from '../../../../../messages';
+import ImageIcon from '../../common/image-icon';
+import AtlaskitIcon from '../../common/atlaskit-icon';
+var badgeStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  align-items: center;\n  display: flex;\n  min-width: fit-content;\n"])));
+var iconStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  color: ", ";\n  ", "\n  span,\n  svg {\n    line-height: 0;\n  }\n"])), tokens.badgeIcon, getIconSizeStyles('1rem'));
+var labelStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 0.75rem;\n  line-height: 1rem;\n  padding-left: 0.125rem;\n"])), tokens.badgeText);
+var messageMapper = (_messageMapper = {}, _defineProperty(_messageMapper, IconType.PriorityBlocker, messages.priority_blocker), _defineProperty(_messageMapper, IconType.PriorityCritical, messages.priority_critical), _defineProperty(_messageMapper, IconType.PriorityHigh, messages.priority_high), _defineProperty(_messageMapper, IconType.PriorityHighest, messages.priority_highest), _defineProperty(_messageMapper, IconType.PriorityLow, messages.priority_low), _defineProperty(_messageMapper, IconType.PriorityLowest, messages.priority_lowest), _defineProperty(_messageMapper, IconType.PriorityMajor, messages.priority_major), _defineProperty(_messageMapper, IconType.PriorityMedium, messages.priority_medium), _defineProperty(_messageMapper, IconType.PriorityMinor, messages.priority_minor), _defineProperty(_messageMapper, IconType.PriorityTrivial, messages.priority_trivial), _defineProperty(_messageMapper, IconType.PriorityUndefined, messages.priority_undefined), _messageMapper);
+
+var getFormattedMessageOrLabel = function getFormattedMessageOrLabel(icon, content) {
+  if (icon) {
+    var descriptor = messageMapper[icon];
+
+    if (descriptor) {
+      return getFormattedMessage({
+        descriptor: descriptor
+      });
+    }
+  }
+
+  return content;
+};
+
+var renderAtlaskitIcon = function renderAtlaskitIcon(icon, testId) {
+  if (icon) {
+    return jsx(AtlaskitIcon, {
+      icon: icon,
+      label: icon,
+      testId: "".concat(testId, "-icon")
+    });
+  }
+};
+
+var renderImageIcon = function renderImageIcon(url, testId) {
+  if (url) {
+    return jsx(ImageIcon, {
+      testId: testId,
+      url: url
+    });
+  }
+};
+
+var Badge = function Badge(_ref) {
+  var icon = _ref.icon,
+      url = _ref.url,
+      label = _ref.label,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'smart-element-badge' : _ref$testId;
+  var formattedMessageOrLabel = getFormattedMessageOrLabel(icon, label);
+  var badgeIcon = renderAtlaskitIcon(icon, testId) || renderImageIcon(url, testId);
+
+  if (!formattedMessageOrLabel || !badgeIcon) {
+    return null;
+  }
+
+  return jsx("div", {
+    css: badgeStyles,
+    "data-fit-to-content": true,
+    "data-smart-element-badge": true,
+    "data-testid": testId
+  }, jsx("span", {
+    css: iconStyles
+  }, badgeIcon), jsx("span", {
+    css: labelStyles,
+    "data-testid": "".concat(testId, "-label")
+  }, formattedMessageOrLabel));
+};
+
+export default Badge;

package/dist/esm/view/FlexibleCard/components/elements/badge/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,51 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject;
+
+/** @jsx jsx */
+import React from 'react';
+import { useIntl, FormattedMessage } from 'react-intl-next';
+import { css, jsx } from '@emotion/core';
+import { getTruncateStyles } from '../../utils';
+import { tokens } from '../../../../../utils/token';
+import { selectUnit } from '@formatjs/intl-utils';
+import { messages } from '../../../../../messages';
+var styles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 0.75rem;\n  line-height: 1rem;\n  ", "\n"])), tokens.text, getTruncateStyles(1));
+var typeToDescriptorMap = {
+  created: messages.created_on,
+  modified: messages.modified_on
+};
+
+var DateTime = function DateTime(_ref) {
+  var date = _ref.date,
+      type = _ref.type,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'smart-element-date-time' : _ref$testId;
+
+  var _useIntl = useIntl(),
+      formatRelativeTime = _useIntl.formatRelativeTime;
+
+  if (!type || !date) {
+    return null;
+  }
+
+  var _selectUnit = selectUnit(date, Date.now()),
+      value = _selectUnit.value,
+      unit = _selectUnit.unit;
+
+  var context = formatRelativeTime(value, unit, {
+    numeric: 'auto'
+  });
+  return jsx("span", {
+    css: styles,
+    "data-smart-element-date-time": true,
+    "data-testid": testId
+  }, jsx(FormattedMessage, _extends({}, typeToDescriptorMap[type], {
+    values: {
+      context: context
+    }
+  })));
+};
+
+export default DateTime;

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

@@ -0,0 +1 @@
+export {};