@atlaskit/smart-card 16.3.0 → 17.2.0

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

@@ -0,0 +1,68 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactIntlNext = require("react-intl-next");
+
+var _core = require("@emotion/core");
+
+var _utils = require("../../utils");
+
+var _token = require("../../../../../utils/token");
+
+var _intlUtils = require("@formatjs/intl-utils");
+
+var _messages = require("../../../../../messages");
+
+var _templateObject;
+
+var styles = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-size: 0.75rem;\n  line-height: 1rem;\n  ", "\n"])), _token.tokens.text, (0, _utils.getTruncateStyles)(1));
+var typeToDescriptorMap = {
+  created: _messages.messages.created_on,
+  modified: _messages.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 = (0, _reactIntlNext.useIntl)(),
+      formatRelativeTime = _useIntl.formatRelativeTime;
+
+  if (!type || !date) {
+    return null;
+  }
+
+  var _selectUnit = (0, _intlUtils.selectUnit)(date, Date.now()),
+      value = _selectUnit.value,
+      unit = _selectUnit.unit;
+
+  var context = formatRelativeTime(value, unit, {
+    numeric: 'auto'
+  });
+  return (0, _core.jsx)("span", {
+    css: styles,
+    "data-smart-element-date-time": true,
+    "data-testid": testId
+  }, (0, _core.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, typeToDescriptorMap[type], {
+    values: {
+      context: context
+    }
+  })));
+};
+
+var _default = DateTime;
+exports.default = _default;

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

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -0,0 +1,125 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _link = _interopRequireDefault(require("@atlaskit/icon/glyph/link"));
+
+var _core = require("@emotion/core");
+
+var _constants = require("../../../../../constants");
+
+var _atlaskitIcon = _interopRequireDefault(require("../../common/atlaskit-icon"));
+
+var _imageIcon = _interopRequireDefault(require("../../common/image-icon"));
+
+var _utils = require("../../utils");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var getPositionStyles = function getPositionStyles(size, position) {
+  switch (position) {
+    case _constants.SmartLinkPosition.Center:
+      return (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n        align-self: center;\n      "])));
+
+    case _constants.SmartLinkPosition.Top:
+    default:
+      return (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n        align-self: flex-start;\n        margin: 0;\n      "])));
+  }
+};
+
+var getWidth = function getWidth(size) {
+  switch (size) {
+    case _constants.SmartLinkSize.XLarge:
+      return '2rem';
+
+    case _constants.SmartLinkSize.Large:
+      return '1.5rem';
+
+    case _constants.SmartLinkSize.Medium:
+      return '1rem';
+
+    case _constants.SmartLinkSize.Small:
+    default:
+      return '.75rem';
+  }
+};
+
+var getIconStyles = function getIconStyles(size, position, width) {
+  return (0, _core.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n"])), getPositionStyles(size, position), (0, _utils.getIconSizeStyles)(width));
+};
+
+var getCustomRenderStyles = function getCustomRenderStyles(value) {
+  return (0, _core.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  line-height: ", ";\n  font-size: ", ";\n  text-align: center;\n  text-overflow: clip;\n  -webkit-box-orient: unset;\n  span {\n    margin: 0;\n    padding: 0;\n    vertical-align: baseline;\n  }\n"])), (0, _utils.getTruncateStyles)(1, value), value, value);
+};
+
+var renderAtlaskitIcon = function renderAtlaskitIcon(icon, label, testId) {
+  if (icon) {
+    return (0, _core.jsx)(_atlaskitIcon.default, {
+      icon: icon,
+      label: label,
+      testId: "".concat(testId, "-icon")
+    });
+  }
+};
+
+var renderDefaultIcon = function renderDefaultIcon(label, testId) {
+  return (0, _core.jsx)(_link.default, {
+    label: label,
+    testId: "".concat(testId, "-default")
+  });
+};
+
+var renderImageIcon = function renderImageIcon(defaultIcon, icon, url, testId) {
+  if (url) {
+    return (0, _core.jsx)(_imageIcon.default, {
+      defaultIcon: defaultIcon,
+      testId: testId,
+      url: url
+    });
+  }
+};
+
+var Icon = function Icon(_ref) {
+  var icon = _ref.icon,
+      _ref$label = _ref.label,
+      label = _ref$label === void 0 ? 'Link' : _ref$label,
+      _ref$position = _ref.position,
+      position = _ref$position === void 0 ? _constants.SmartLinkPosition.Top : _ref$position,
+      render = _ref.render,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? _constants.SmartLinkSize.Medium : _ref$size,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'smart-element-icon' : _ref$testId,
+      url = _ref.url;
+  var element = (0, _react.useMemo)(function () {
+    var defaultIcon = renderDefaultIcon(label, testId);
+    return (render === null || render === void 0 ? void 0 : render()) || renderImageIcon(defaultIcon, icon, url, testId) || renderAtlaskitIcon(icon, label, testId) || defaultIcon;
+  }, [icon, label, render, testId, url]);
+  var width = getWidth(size);
+  var styles = getIconStyles(size, position, width);
+  var renderStyles = render ? getCustomRenderStyles(width) : undefined;
+  return (0, _core.jsx)("div", {
+    css: [styles, renderStyles],
+    "data-fit-to-content": true,
+    "data-smart-element-icon": true,
+    "data-testid": testId
+  }, element);
+};
+
+var _default = Icon;
+exports.default = _default;

package/dist/cjs/view/FlexibleCard/components/elements/icon/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Title = exports.SubscriberCount = exports.State = exports.ProgrammingLanguage = exports.Priority = exports.ModifiedOn = exports.ModifiedBy = exports.LinkIcon = exports.CreatedOn = exports.CreatedBy = exports.CommentCount = exports.CollaboratorGroup = exports.AuthorGroup = void 0;
+
+var _utils = require("./utils");
+
+var _constants = require("../../../../constants");
+
+// Attention: Keep the export name and element name the same.
+// This will help reducing the code for mapping elements inside
+// createElement and renderElementItems
+var AuthorGroup = (0, _utils.createElement)(_constants.ElementName.AuthorGroup);
+exports.AuthorGroup = AuthorGroup;
+var CollaboratorGroup = (0, _utils.createElement)(_constants.ElementName.CollaboratorGroup);
+exports.CollaboratorGroup = CollaboratorGroup;
+var CommentCount = (0, _utils.createElement)(_constants.ElementName.CommentCount);
+exports.CommentCount = CommentCount;
+var CreatedBy = (0, _utils.createElement)(_constants.ElementName.CreatedBy);
+exports.CreatedBy = CreatedBy;
+var CreatedOn = (0, _utils.createElement)(_constants.ElementName.CreatedOn);
+exports.CreatedOn = CreatedOn;
+var LinkIcon = (0, _utils.createElement)(_constants.ElementName.LinkIcon);
+exports.LinkIcon = LinkIcon;
+var ModifiedBy = (0, _utils.createElement)(_constants.ElementName.ModifiedBy);
+exports.ModifiedBy = ModifiedBy;
+var ModifiedOn = (0, _utils.createElement)(_constants.ElementName.ModifiedOn);
+exports.ModifiedOn = ModifiedOn;
+var Priority = (0, _utils.createElement)(_constants.ElementName.Priority);
+exports.Priority = Priority;
+var ProgrammingLanguage = (0, _utils.createElement)(_constants.ElementName.ProgrammingLanguage);
+exports.ProgrammingLanguage = ProgrammingLanguage;
+var State = (0, _utils.createElement)(_constants.ElementName.State);
+exports.State = State;
+var SubscriberCount = (0, _utils.createElement)(_constants.ElementName.SubscriberCount);
+exports.SubscriberCount = SubscriberCount;
+var Title = (0, _utils.createElement)(_constants.ElementName.Title);
+exports.Title = Title;

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

@@ -0,0 +1,85 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _core = require("@emotion/core");
+
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+
+var _constants = require("../../../../../constants");
+
+var _utils = require("../../utils");
+
+var _token = require("../../../../../utils/token");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+var DEFAULT_MAX_LINES = 2;
+var MAXIMUM_MAX_LINES = 2;
+var MINIMUM_MAX_LINES = 1;
+var containerStyles = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1 1 auto;\n"])));
+
+var getThemeStyles = function getThemeStyles(theme) {
+  switch (theme) {
+    case _constants.SmartLinkTheme.Black:
+      return (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n        color: ", ";\n        :active {\n          color: ", ";\n        }\n        :hover {\n          color: ", ";\n          text-decoration: underline;\n        }\n      "])), _token.tokens.blackLink, _token.tokens.blackLinkPressed, _token.tokens.blackLink);
+
+    case _constants.SmartLinkTheme.Link:
+    default:
+      return (0, _core.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n        color: ", ";\n        :active {\n          color: ", ";\n        }\n        :hover {\n          color: ", ";\n          text-decoration: underline;\n        }\n      "])), _token.tokens.blueLink, _token.tokens.blueLinkPressed, _token.tokens.blueLink);
+  }
+};
+
+var getAnchorStyles = function getAnchorStyles(size, theme, maxLines) {
+  var sizeStyles = (0, _utils.getLinkSizeStyles)(size);
+  return (0, _core.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    flex: 1 1 auto;\n    ", "\n    ", "\n    // Theme should be last to be spread because it contains override values\n    ", "\n  "])), sizeStyles, (0, _utils.getTruncateStyles)(maxLines, (0, _utils.getLinkLineHeight)(size)), getThemeStyles(theme));
+};
+
+var getMaxLines = function getMaxLines(maxLines) {
+  if (maxLines > MAXIMUM_MAX_LINES) {
+    return DEFAULT_MAX_LINES;
+  }
+
+  if (maxLines < MINIMUM_MAX_LINES) {
+    return MINIMUM_MAX_LINES;
+  }
+
+  return maxLines;
+};
+
+var Link = function Link(_ref) {
+  var _ref$maxLines = _ref.maxLines,
+      maxLines = _ref$maxLines === void 0 ? DEFAULT_MAX_LINES : _ref$maxLines,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? _constants.SmartLinkSize.Medium : _ref$size,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'smart-element-link' : _ref$testId,
+      text = _ref.text,
+      _ref$theme = _ref.theme,
+      theme = _ref$theme === void 0 ? _constants.SmartLinkTheme.Link : _ref$theme,
+      url = _ref.url;
+  return (0, _core.jsx)("span", {
+    css: containerStyles
+  }, (0, _core.jsx)(_tooltip.default, {
+    content: text,
+    testId: "".concat(testId, "-tooltip"),
+    tag: "span"
+  }, (0, _core.jsx)("a", {
+    css: getAnchorStyles(size, theme, getMaxLines(maxLines)),
+    "data-smart-element-link": true,
+    "data-testid": testId,
+    href: url
+  }, text)));
+};
+
+var _default = Link;
+exports.default = _default;

package/dist/cjs/view/FlexibleCard/components/elements/link/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _core = require("@emotion/core");
+
+var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
+
+var _templateObject;
+
+var styles = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  line-height: inherit;\n"])));
+
+var Lozenge = function Lozenge(_ref) {
+  var _ref$appearance = _ref.appearance,
+      appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
+      text = _ref.text,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'smart-element-lozenge' : _ref$testId;
+
+  if (!text) {
+    return null;
+  }
+
+  return (0, _core.jsx)("span", {
+    css: styles,
+    "data-fit-to-content": true,
+    "data-smart-element-lozenge": true
+  }, (0, _core.jsx)(_lozenge.default, {
+    appearance: appearance,
+    testId: testId
+  }, text));
+};
+
+var _default = Lozenge;
+exports.default = _default;

package/dist/cjs/view/FlexibleCard/components/elements/lozenge/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _core = require("@emotion/core");
+
+var _utils = require("../../utils");
+
+var _token = require("../../../../../utils/token");
+
+var _templateObject;
+
+var styles = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-size: 0.75rem;\n  line-height: 1rem;\n  ", "\n"])), _token.tokens.text, (0, _utils.getTruncateStyles)(1));
+
+var Text = function Text(_ref) {
+  var content = _ref.content,
+      message = _ref.message,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'smart-element-text' : _ref$testId;
+
+  if (!message && !content) {
+    return null;
+  }
+
+  return (0, _core.jsx)("span", {
+    css: styles,
+    "data-smart-element-text": true,
+    "data-testid": testId
+  }, (0, _utils.getFormattedMessage)(message) || content);
+};
+
+var _default = Text;
+exports.default = _default;

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

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -0,0 +1,170 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createElement = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _constants = require("../../../../constants");
+
+var _icon = _interopRequireDefault(require("./icon"));
+
+var _link = _interopRequireDefault(require("./link"));
+
+var _lozenge = _interopRequireDefault(require("./lozenge"));
+
+var _flexibleUiContext = require("../../../../state/flexible-ui-context");
+
+var _badge = _interopRequireDefault(require("./badge"));
+
+var _avatarGroup = _interopRequireDefault(require("./avatar-group"));
+
+var _text = _interopRequireDefault(require("./text"));
+
+var _messages = require("../../../../messages");
+
+var _dateTime = _interopRequireDefault(require("./date-time"));
+
+var _elementMappings;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var elementMappings = (_elementMappings = {}, (0, _defineProperty2.default)(_elementMappings, _constants.ElementName.AuthorGroup, {
+  component: _avatarGroup.default
+}), (0, _defineProperty2.default)(_elementMappings, _constants.ElementName.CollaboratorGroup, {
+  component: _avatarGroup.default
+}), (0, _defineProperty2.default)(_elementMappings, _constants.ElementName.CommentCount, {
+  component: _badge.default,
+  props: {
+    icon: _constants.IconType.Comment
+  }
+}), (0, _defineProperty2.default)(_elementMappings, _constants.ElementName.CreatedBy, {
+  component: _text.default
+}), (0, _defineProperty2.default)(_elementMappings, _constants.ElementName.LinkIcon, {
+  component: _icon.default
+}), (0, _defineProperty2.default)(_elementMappings, _constants.ElementName.ModifiedBy, {
+  component: _text.default
+}), (0, _defineProperty2.default)(_elementMappings, _constants.ElementName.Priority, {
+  component: _badge.default
+}), (0, _defineProperty2.default)(_elementMappings, _constants.ElementName.ProgrammingLanguage, {
+  component: _badge.default,
+  props: {
+    icon: _constants.IconType.ProgrammingLanguage
+  }
+}), (0, _defineProperty2.default)(_elementMappings, _constants.ElementName.State, {
+  component: _lozenge.default
+}), (0, _defineProperty2.default)(_elementMappings, _constants.ElementName.SubscriberCount, {
+  component: _badge.default,
+  props: {
+    icon: _constants.IconType.Subscriber
+  }
+}), (0, _defineProperty2.default)(_elementMappings, _constants.ElementName.Title, {
+  component: _link.default
+}), (0, _defineProperty2.default)(_elementMappings, _constants.ElementName.CreatedOn, {
+  component: _dateTime.default
+}), (0, _defineProperty2.default)(_elementMappings, _constants.ElementName.ModifiedOn, {
+  component: _dateTime.default
+}), _elementMappings);
+
+var getContextKey = function getContextKey(name) {
+  // Attempt to predict context prop name in advance to reduce the amount of
+  // code run during runtime
+  return name.length > 0 ? name.charAt(0).toLowerCase() + name.slice(1) : undefined;
+};
+
+var getFormattedMessage = function getFormattedMessage(descriptor, value) {
+  return value ? {
+    message: {
+      descriptor: descriptor,
+      values: {
+        context: value
+      }
+    }
+  } : undefined;
+};
+
+var getData = function getData(elementName, contextKey, context) {
+  if (!context) {
+    return undefined;
+  }
+
+  var data = context[contextKey];
+
+  switch (elementName) {
+    case _constants.ElementName.CommentCount:
+    case _constants.ElementName.ProgrammingLanguage:
+    case _constants.ElementName.SubscriberCount:
+      return {
+        label: data
+      };
+
+    case _constants.ElementName.AuthorGroup:
+      return {
+        items: context.authorGroup
+      };
+
+    case _constants.ElementName.CollaboratorGroup:
+      return {
+        items: context.collaboratorGroup
+      };
+
+    case _constants.ElementName.CreatedBy:
+      return getFormattedMessage(_messages.messages.created_by, context.createdBy);
+
+    case _constants.ElementName.ModifiedBy:
+      return getFormattedMessage(_messages.messages.modified_by, context.modifiedBy);
+
+    case _constants.ElementName.ModifiedOn:
+      return context.modifiedOn ? {
+        date: new Date(context.modifiedOn),
+        type: 'modified'
+      } : undefined;
+
+    case _constants.ElementName.CreatedOn:
+      return context.createdOn ? {
+        date: new Date(context.createdOn),
+        type: 'created'
+      } : undefined;
+
+    case _constants.ElementName.Title:
+      return {
+        text: context.title,
+        url: context.url
+      };
+
+    default:
+      return data;
+  }
+};
+
+var createElement = function createElement(name) {
+  var _ref = elementMappings[name] || {},
+      BaseElement = _ref.component,
+      props = _ref.props;
+
+  var contextKey = getContextKey(name);
+
+  if (!BaseElement) {
+    throw Error("Element ".concat(name, " does not exist."));
+  }
+
+  return function (overrides) {
+    var context = (0, _react.useContext)(_flexibleUiContext.FlexibleUiContext);
+    var data = getData(name, contextKey, context);
+    return data ? /*#__PURE__*/_react.default.createElement(BaseElement, (0, _extends2.default)({}, props, data, overrides)) : null;
+  };
+};
+
+exports.createElement = createElement;

package/dist/cjs/view/FlexibleCard/components/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});