@atlaskit/smart-card 16.3.0 → 17.2.0

package/dist/esm/view/FlexibleCard/components/blocks/action-group/index.js

@@ -0,0 +1,24 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject;
+
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import ButtonGroup from '@atlaskit/button/button-group';
+import { renderActionItems } from '../utils';
+import { SmartLinkSize } from '../../../../../constants';
+var styles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-flex;\n  line-height: 0;\n"])));
+
+var ActionGroup = function ActionGroup(_ref) {
+  var _ref$items = _ref.items,
+      items = _ref$items === void 0 ? [] : _ref$items,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? SmartLinkSize.Medium : _ref$size;
+  // Currently we only have delete action available, this prevents others from adding more delete actions
+  var actionsToRender = items.slice(0, 1);
+  return jsx("div", {
+    css: styles
+  }, jsx(ButtonGroup, null, renderActionItems(actionsToRender, size)));
+};
+
+export default ActionGroup;

package/dist/esm/view/FlexibleCard/components/blocks/action-group/types.js

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

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

@@ -0,0 +1,30 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject;
+
+/** @jsx jsx */
+import React from 'react';
+import { css, jsx } from '@emotion/core';
+import { SmartLinkDirection, SmartLinkSize } from '../../../../../constants';
+import { getBaseStyles, renderChildren } from '../utils';
+
+var getBlockStyles = function getBlockStyles(direction, size) {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  justify-content: flex-start;\n"])), getBaseStyles(direction, size));
+};
+
+var Block = function Block(_ref) {
+  var children = _ref.children,
+      _ref$direction = _ref.direction,
+      direction = _ref$direction === void 0 ? SmartLinkDirection.Horizontal : _ref$direction,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? SmartLinkSize.Medium : _ref$size,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'smart-block' : _ref$testId;
+  return jsx("div", {
+    css: getBlockStyles(direction, size),
+    "data-smart-block": true,
+    "data-testid": testId
+  }, renderChildren(children, size));
+};
+
+export default Block;

package/dist/esm/view/FlexibleCard/components/blocks/element-group/index.js

@@ -0,0 +1,46 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2, _templateObject3;
+
+/** @jsx jsx */
+import React from 'react';
+import { css, jsx } from '@emotion/core';
+import { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize, SmartLinkWidth } from '../../../../../constants';
+import { getBaseStyles, renderChildren } from '../utils';
+
+var getAlignmentStyles = function getAlignmentStyles(align) {
+  switch (align) {
+    case SmartLinkAlignment.Right:
+      return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        justify-content: flex-end;\n        text-align: right;\n      "])));
+
+    case SmartLinkAlignment.Left:
+    default:
+      return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        justify-content: flex-start;\n        text-align: left;\n      "])));
+  }
+};
+
+export var getElementGroupStyles = function getElementGroupStyles(direction, size, align, width) {
+  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  min-width: 10%;\n  ", "\n"])), getBaseStyles(direction, size), getAlignmentStyles(align), width === SmartLinkWidth.Flexible ? "flex: 1 3;" : '');
+};
+
+var ElementGroup = function ElementGroup(_ref) {
+  var _ref$align = _ref.align,
+      align = _ref$align === void 0 ? SmartLinkAlignment.Left : _ref$align,
+      children = _ref.children,
+      css = _ref.css,
+      _ref$direction = _ref.direction,
+      direction = _ref$direction === void 0 ? SmartLinkDirection.Horizontal : _ref$direction,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? SmartLinkSize.Medium : _ref$size,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'smart-element-group' : _ref$testId,
+      _ref$width = _ref.width,
+      width = _ref$width === void 0 ? SmartLinkWidth.FitToContent : _ref$width;
+  return jsx("div", {
+    css: [getElementGroupStyles(direction, size, align, width), css],
+    "data-smart-element-group": true,
+    "data-testid": testId
+  }, renderChildren(children, size));
+};
+
+export default ElementGroup;

package/dist/esm/view/FlexibleCard/components/blocks/element-group/types.js

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

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

@@ -0,0 +1,2 @@
+export { default as TitleBlock } from './title-block';
+export { default as MetadataBlock } from './metadata-block';

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

@@ -0,0 +1,83 @@
+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. 1.75 is the The maximum height of
+  //    all elements in specific size. This height belongs to AvatarGroup.
+  // 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 = 1.75;
+  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 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/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;
+  }
+};