@atlaskit/smart-card 17.0.1 → 17.3.0

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

@@ -0,0 +1,97 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _excluded = ["maxLines", "status", "testId", "primary", "secondary"];
+
+var _templateObject;
+
+import React from 'react';
+import { css } from '@emotion/core';
+import { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize, SmartLinkStatus, SmartLinkWidth } from '../../../../../constants';
+import { getGapSize, renderElementItems } from '../utils';
+import Block from '../block';
+import ElementGroup from '../element-group';
+var DEFAULT_MAX_LINES = 2;
+var MAXIMUM_MAX_LINES = 2;
+var MINIMUM_MAX_LINES = 1;
+
+var getElementGroupStyles = function getElementGroupStyles(size, maxLines) {
+  // MetadataBlock allows metadata elements to be displayed in
+  // multiple lines, with maximum of 2 lines.
+  // a) We need the height of the line to be equal on both left and right
+  //    sides so they line up nicely.
+  // b) There is no way to truncate non-text elements nicely. Here
+  //    it's fix max height of the element group so that anything that is
+  //    overflown will not be visible.
+  var lineHeight = getLineHeight(size);
+  var gap = getGapSize(size);
+  var gapHeight = gap * (maxLines - 1);
+  var height = lineHeight * maxLines + gapHeight;
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    flex-wrap: wrap;\n    line-height: ", "rem;\n    max-height: ", "rem;\n    > span,\n    > div {\n      min-height: ", "rem;\n      max-height: ", "rem;\n      line-height: ", "rem;\n    }\n  "])), lineHeight, height, lineHeight, lineHeight, lineHeight);
+};
+
+var getLineHeight = function getLineHeight(size) {
+  // The maximum height of all elements in specific size.
+  // These heights belongs to AvatarGroup.
+  switch (size) {
+    case SmartLinkSize.XLarge:
+    case SmartLinkSize.Large:
+      return 1.75;
+
+    case SmartLinkSize.Medium:
+    case SmartLinkSize.Small:
+    default:
+      return 1.5;
+  }
+};
+
+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 MetadataBlock = function MetadataBlock(_ref) {
+  var _ref$maxLines = _ref.maxLines,
+      maxLines = _ref$maxLines === void 0 ? DEFAULT_MAX_LINES : _ref$maxLines,
+      _ref$status = _ref.status,
+      status = _ref$status === void 0 ? SmartLinkStatus.Fallback : _ref$status,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'smart-block-metadata' : _ref$testId,
+      _ref$primary = _ref.primary,
+      primary = _ref$primary === void 0 ? [] : _ref$primary,
+      _ref$secondary = _ref.secondary,
+      secondary = _ref$secondary === void 0 ? [] : _ref$secondary,
+      blockProps = _objectWithoutProperties(_ref, _excluded);
+
+  if (primary.length === 0 && secondary.length === 0 || status !== SmartLinkStatus.Resolved) {
+    return null;
+  }
+
+  var primaryElements = renderElementItems(primary);
+  var secondaryElements = renderElementItems(secondary);
+  var _blockProps$size = blockProps.size,
+      size = _blockProps$size === void 0 ? SmartLinkSize.Medium : _blockProps$size;
+  var elementGroupStyles = getElementGroupStyles(size, getMaxLines(maxLines));
+  return /*#__PURE__*/React.createElement(Block, _extends({}, blockProps, {
+    testId: "".concat(testId, "-resolved-view")
+  }), primaryElements && /*#__PURE__*/React.createElement(ElementGroup, {
+    align: SmartLinkAlignment.Left,
+    css: elementGroupStyles,
+    direction: SmartLinkDirection.Horizontal,
+    width: SmartLinkWidth.Flexible
+  }, primaryElements), secondaryElements && /*#__PURE__*/React.createElement(ElementGroup, {
+    align: SmartLinkAlignment.Right,
+    css: elementGroupStyles,
+    direction: SmartLinkDirection.Horizontal,
+    width: SmartLinkWidth.Flexible
+  }, secondaryElements));
+};
+
+export default MetadataBlock;

package/dist/esm/view/FlexibleCard/components/blocks/metadata-block/types.js

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

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

@@ -0,0 +1,60 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _excluded = ["maxLines", "retry", "position", "testId", "theme"];
+
+var _templateObject, _templateObject2;
+
+/** @jsx jsx */
+import React from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import { css, jsx } from '@emotion/core';
+import { LinkIcon, Title } from '../../../elements';
+import Block from '../../block';
+import { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize } from '../../../../../../constants';
+import { getLinkLineHeight, getLinkSizeStyles, getTruncateStyles } from '../../../utils';
+import ElementGroup from '../../element-group';
+import { tokens } from '../../../../../../utils/token';
+var actionStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  cursor: pointer;\n  :hover {\n    color: ", ";\n    text-decoration: underline;\n  }\n"])), tokens.errorMessageHover);
+
+var getMessageStyles = function getMessageStyles(size, hasAction) {
+  var sizeStyles = getLinkSizeStyles(size);
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    flex: 1 1 auto;\n    justify-content: flex-end;\n    ", "\n    ", "\n    ", "\n    color: ", ";\n  "])), hasAction ? actionStyles : '', sizeStyles, getTruncateStyles(1, getLinkLineHeight(size)), tokens.errorMessage);
+};
+
+var TitleBlockErroredView = function TitleBlockErroredView(_ref) {
+  var maxLines = _ref.maxLines,
+      retry = _ref.retry,
+      position = _ref.position,
+      testId = _ref.testId,
+      theme = _ref.theme,
+      blockProps = _objectWithoutProperties(_ref, _excluded);
+
+  var _ref2 = retry || {},
+      descriptor = _ref2.descriptor,
+      onClick = _ref2.onClick,
+      values = _ref2.values;
+
+  var _blockProps$size = blockProps.size,
+      size = _blockProps$size === void 0 ? SmartLinkSize.Medium : _blockProps$size;
+  var hasAction = onClick !== undefined;
+  return jsx(Block, _extends({}, blockProps, {
+    testId: "".concat(testId, "-errored-view")
+  }), jsx(LinkIcon, {
+    position: position
+  }), jsx(Title, {
+    maxLines: maxLines,
+    theme: theme
+  }), descriptor && jsx(ElementGroup, {
+    direction: SmartLinkDirection.Horizontal,
+    align: SmartLinkAlignment.Right
+  }, jsx("span", {
+    css: getMessageStyles(size, hasAction),
+    onClick: onClick,
+    "data-testid": "".concat(testId, "-errored-view-message")
+  }, jsx(FormattedMessage, _extends({}, descriptor, {
+    values: values
+  })))));
+};
+
+export default TitleBlockErroredView;

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

@@ -0,0 +1,41 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["status", "testId"];
+import React from 'react';
+import { SmartLinkStatus } from '../../../../../constants';
+import TitleBlockResolvedView from './resolved';
+import TitleBlockErroredView from './errored';
+import TitleBlockResolvingView from './resolving';
+
+var TitleBlock = function TitleBlock(_ref) {
+  var _ref$status = _ref.status,
+      status = _ref$status === void 0 ? SmartLinkStatus.Fallback : _ref$status,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'smart-block-title' : _ref$testId,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  switch (status) {
+    case SmartLinkStatus.Pending:
+    case SmartLinkStatus.Resolving:
+      return /*#__PURE__*/React.createElement(TitleBlockResolvingView, _extends({}, props, {
+        testId: testId
+      }));
+
+    case SmartLinkStatus.Resolved:
+      return /*#__PURE__*/React.createElement(TitleBlockResolvedView, _extends({}, props, {
+        testId: testId
+      }));
+
+    case SmartLinkStatus.Unauthorized:
+    case SmartLinkStatus.Forbidden:
+    case SmartLinkStatus.NotFound:
+    case SmartLinkStatus.Errored:
+    case SmartLinkStatus.Fallback:
+    default:
+      return /*#__PURE__*/React.createElement(TitleBlockErroredView, _extends({}, props, {
+        testId: testId
+      }));
+  }
+};
+
+export default TitleBlock;

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

@@ -0,0 +1,47 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["maxLines", "metadata", "position", "subtitle", "actions", "testId", "theme"];
+import React from 'react';
+import { LinkIcon, Title } from '../../../elements';
+import Block from '../../block';
+import ElementGroup from '../../element-group';
+import { SmartLinkAlignment, SmartLinkDirection, SmartLinkWidth } from '../../../../../../constants';
+import { renderElementItems } from '../../utils';
+import ActionGroup from '../../action-group';
+
+var TitleBlockResolvedView = function TitleBlockResolvedView(_ref) {
+  var maxLines = _ref.maxLines,
+      _ref$metadata = _ref.metadata,
+      metadata = _ref$metadata === void 0 ? [] : _ref$metadata,
+      position = _ref.position,
+      _ref$subtitle = _ref.subtitle,
+      subtitle = _ref$subtitle === void 0 ? [] : _ref$subtitle,
+      _ref$actions = _ref.actions,
+      actions = _ref$actions === void 0 ? [] : _ref$actions,
+      testId = _ref.testId,
+      theme = _ref.theme,
+      blockProps = _objectWithoutProperties(_ref, _excluded);
+
+  var metadataElements = renderElementItems(metadata);
+  var subtitleElements = renderElementItems(subtitle);
+  return /*#__PURE__*/React.createElement(Block, _extends({}, blockProps, {
+    testId: "".concat(testId, "-resolved-view")
+  }), /*#__PURE__*/React.createElement(LinkIcon, {
+    position: position
+  }), /*#__PURE__*/React.createElement(ElementGroup, {
+    direction: SmartLinkDirection.Vertical,
+    width: SmartLinkWidth.Flexible
+  }, /*#__PURE__*/React.createElement(Title, {
+    maxLines: maxLines,
+    theme: theme
+  }), subtitleElements && /*#__PURE__*/React.createElement(ElementGroup, {
+    direction: SmartLinkDirection.Horizontal
+  }, subtitleElements)), metadataElements && /*#__PURE__*/React.createElement(ElementGroup, {
+    direction: SmartLinkDirection.Horizontal,
+    align: SmartLinkAlignment.Right
+  }, metadataElements), actions.length > 0 && /*#__PURE__*/React.createElement(ActionGroup, {
+    items: actions
+  }));
+};
+
+export default TitleBlockResolvedView;

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

@@ -0,0 +1,53 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["maxLines", "retry", "position", "testId", "theme"];
+
+/** @jsx jsx */
+import React from 'react';
+import { jsx } from '@emotion/core';
+import Spinner from '@atlaskit/spinner';
+import { Title } from '../../../elements';
+import Block from '../../block';
+import { SmartLinkSize } from '../../../../../../constants';
+
+var getSpinnerSize = function getSpinnerSize(size) {
+  // Spinner sizes should be equivalent or smaller than Icon size
+  // to avoid the jumping.
+  switch (size) {
+    case SmartLinkSize.XLarge:
+      return 28;
+
+    case SmartLinkSize.Large:
+      return 24;
+
+    case SmartLinkSize.Medium:
+      return 16;
+
+    case SmartLinkSize.Small:
+    default:
+      return 12;
+  }
+};
+
+var TitleBlockResolvingView = function TitleBlockResolvingView(_ref) {
+  var maxLines = _ref.maxLines,
+      retry = _ref.retry,
+      position = _ref.position,
+      testId = _ref.testId,
+      theme = _ref.theme,
+      blockProps = _objectWithoutProperties(_ref, _excluded);
+
+  var _blockProps$size = blockProps.size,
+      size = _blockProps$size === void 0 ? SmartLinkSize.Medium : _blockProps$size;
+  return jsx(Block, _extends({}, blockProps, {
+    testId: "".concat(testId, "-resolving-view")
+  }), jsx(Spinner, {
+    size: getSpinnerSize(size),
+    testId: "".concat(testId, "-resolving-spinner")
+  }), jsx(Title, {
+    maxLines: maxLines,
+    theme: theme
+  }));
+};
+
+export default TitleBlockResolvingView;

package/dist/esm/view/FlexibleCard/components/blocks/title-block/types.js

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

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

@@ -0,0 +1,114 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _excluded = ["name"],
+    _excluded2 = ["name"];
+
+var _templateObject, _templateObject2, _templateObject3;
+
+import React from 'react';
+import { css } from '@emotion/core';
+import { SmartLinkDirection, SmartLinkSize } from '../../../../constants';
+import * as Elements from '../elements';
+import * as Actions from '../actions';
+import { isFlexibleUiElement } from '../../../../utils/flexible';
+import ActionGroup from './action-group';
+import ElementGroup from './element-group';
+
+var getDirectionStyles = function getDirectionStyles(direction) {
+  switch (direction) {
+    case SmartLinkDirection.Vertical:
+      return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        flex-direction: column;\n        align-items: flex-start;\n      "])));
+
+    case SmartLinkDirection.Horizontal:
+    default:
+      return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        flex-direction: row;\n        align-items: center;\n      "])));
+  }
+};
+
+export var getGapSize = function getGapSize(size) {
+  switch (size) {
+    case SmartLinkSize.XLarge:
+      return 1.25;
+
+    case SmartLinkSize.Large:
+      return 1;
+
+    case SmartLinkSize.Medium:
+      return 0.5;
+
+    case SmartLinkSize.Small:
+    default:
+      return 0.25;
+  }
+};
+export var getBaseStyles = function getBaseStyles(direction, size) {
+  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  gap: ", "rem;\n  line-height: 1rem;\n  min-width: 0;\n  overflow: hidden;\n  overflow-y: hidden;\n  ", ";\n  &:empty {\n    display: none;\n  }\n  & > * {\n    min-width: 0;\n  }\n  & > [data-fit-to-content] {\n    min-width: fit-content;\n  }\n"])), getGapSize(size), getDirectionStyles(direction));
+};
+
+var isActionGroup = function isActionGroup(node) {
+  return /*#__PURE__*/React.isValidElement(node) && node.type === ActionGroup;
+};
+
+var isElementOrElementGroup = function isElementOrElementGroup(node) {
+  return /*#__PURE__*/React.isValidElement(node) && (isFlexibleUiElement(node) || node.type === ElementGroup);
+};
+
+export var renderChildren = function renderChildren(children, size) {
+  return React.Children.map(children, function (child) {
+    if (isElementOrElementGroup(child) || isActionGroup(child)) {
+      var node = child;
+      var childSize = node.props.size;
+      return /*#__PURE__*/React.cloneElement(node, {
+        size: childSize || size
+      });
+    }
+
+    return child;
+  });
+};
+export var renderElementItems = function renderElementItems() {
+  var items = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var elements = items.reduce(function (acc, curr, idx) {
+    var name = curr.name,
+        props = _objectWithoutProperties(curr, _excluded);
+
+    var Element = Elements[name];
+
+    if (Element) {
+      return [].concat(_toConsumableArray(acc), [/*#__PURE__*/React.createElement(Element, _extends({
+        key: idx
+      }, props))]);
+    }
+
+    return acc;
+  }, []);
+
+  if (elements.length) {
+    return elements;
+  }
+};
+export var renderActionItems = function renderActionItems() {
+  var items = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : SmartLinkSize.Medium;
+  var actions = items.reduce(function (acc, curr, idx) {
+    var name = curr.name,
+        props = _objectWithoutProperties(curr, _excluded2);
+
+    var Action = Actions[name];
+
+    if (Action) {
+      return [].concat(_toConsumableArray(acc), [/*#__PURE__*/React.createElement(Action, _extends({
+        size: size,
+        key: idx
+      }, props))]);
+    }
+
+    return acc;
+  }, []);
+
+  if (actions.length) {
+    return actions;
+  }
+};

package/dist/esm/view/FlexibleCard/components/{elements/icon → common}/atlaskit-icon/index.js

@@ -4,8 +4,8 @@ var _importIconMapper;
 
 import React from 'react';
 import Loadable from 'react-loadable';
-import { B200, B400, N700 } from '@atlaskit/theme/colors';
-import { IconType } from '../../../../../../constants';
+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(
@@ -177,6 +177,74 @@ var importIconMapper = (_importIconMapper = {}, _defineProperty(_importIconMappe
       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) {
@@ -206,19 +274,33 @@ var AtlaskitIcon = function AtlaskitIcon(_ref3) {
     return null;
   }
 
-  var ImportedIcon = importIcon(importFn); // Logo component has a different prop set from other icon components
-  // and yet to support the token system.
+  var ImportedIcon = importIcon(importFn);
 
-  var importedIcon = icon === IconType.Confluence || icon === IconType.Jira ? /*#__PURE__*/React.createElement(ImportedIcon, {
-    textColor: N700,
-    iconColor: B200,
-    iconGradientStart: B400,
-    iconGradientStop: B200
-  }) : /*#__PURE__*/React.createElement(ImportedIcon, {
-    label: label,
-    testId: testId
-  });
-  return importedIcon;
+  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 {};