@atlaskit/smart-card 16.2.1 → 17.1.0

package/dist/es2019/view/FlexibleCard/components/actions/delete-action/index.js

@@ -0,0 +1,58 @@
+/** @jsx jsx */
+import React from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import { css, jsx } from '@emotion/core';
+import Button from '@atlaskit/button/custom-theme-button';
+import CrossIcon from '@atlaskit/icon/glyph/cross';
+import { SmartLinkSize } from '../../../../../constants';
+import Tooltip from '@atlaskit/tooltip';
+import { getIconSizeStyles } from '../../utils';
+import { messages } from '../../../../../messages';
+import { tokens } from '../../../../../utils/token';
+import { handleOnClick } from '../../../../../utils';
+
+const getWidth = size => {
+  switch (size) {
+    case SmartLinkSize.XLarge:
+    case SmartLinkSize.Large:
+      return '1.5rem';
+
+    case SmartLinkSize.Medium:
+    case SmartLinkSize.Small:
+    default:
+      return '1rem';
+  }
+};
+
+const getStyles = size => css`
+  color: ${tokens.actionIcon};
+  ${getIconSizeStyles(getWidth(size))};
+`;
+
+const DeleteAction = ({
+  appearance = 'subtle',
+  content,
+  onClick,
+  size = SmartLinkSize.Medium,
+  testId = 'smart-action-delete-action'
+}) => {
+  if (!onClick) {
+    return null;
+  }
+
+  return jsx(Tooltip, {
+    content: jsx(FormattedMessage, messages.delete)
+  }, jsx(Button, {
+    spacing: "none",
+    appearance: appearance,
+    testId: testId,
+    onClick: handleOnClick(onClick)
+  }, content || jsx("span", {
+    css: getStyles(size),
+    "data-testid": `${testId}-icon`
+  }, jsx(CrossIcon, {
+    label: "Delete"
+  }))));
+};
+
+export default DeleteAction;

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

@@ -0,0 +1,6 @@
+import { ActionName } from '../../../../constants';
+import { createAction } from './utils';
+// Attention: Keep the export name and action name the same.
+// This will help reducing the code for mapping action inside
+// createAction and renderActionItems
+export const DeleteAction = createAction(ActionName.DeleteAction);

package/dist/es2019/view/FlexibleCard/components/actions/types.js

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

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

@@ -0,0 +1,48 @@
+import _extends from "@babel/runtime/helpers/extends";
+import { ActionName } from '../../../../constants';
+import { FlexibleUiContext } from '../../../../state/flexible-ui-context';
+import React, { useContext } from 'react';
+import DeleteAction from './delete-action';
+const actionMappings = {
+  [ActionName.DeleteAction]: {
+    component: DeleteAction
+  }
+};
+
+const 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;
+};
+
+const getActionData = (actionName, contextKey, context) => {
+  if (!context) {
+    return undefined;
+  }
+
+  const data = context[contextKey];
+
+  switch (actionName) {
+    case ActionName.DeleteAction:
+    default:
+      return data;
+  }
+};
+
+export const createAction = name => {
+  const {
+    component: BaseAction,
+    props
+  } = actionMappings[name] || {};
+  const contextKey = getContextKey(name);
+
+  if (!BaseAction) {
+    throw Error(`Action ${name} does not exist.`);
+  }
+
+  return overrides => {
+    const context = useContext(FlexibleUiContext);
+    const data = getActionData(name, contextKey, context);
+    return /*#__PURE__*/React.createElement(BaseAction, _extends({}, props, data, overrides));
+  };
+};

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

@@ -0,0 +1,22 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import ButtonGroup from '@atlaskit/button/button-group';
+import { renderActionItems } from '../utils';
+import { SmartLinkSize } from '../../../../../constants';
+const styles = css`
+  display: inline-flex;
+  line-height: 0;
+`;
+
+const ActionGroup = ({
+  items = [],
+  size = SmartLinkSize.Medium
+}) => {
+  // Currently we only have delete action available, this prevents others from adding more delete actions
+  const actionsToRender = items.slice(0, 1);
+  return jsx("div", {
+    css: styles
+  }, jsx(ButtonGroup, null, renderActionItems(actionsToRender, size)));
+};
+
+export default ActionGroup;

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

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

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

@@ -0,0 +1,23 @@
+/** @jsx jsx */
+import React from 'react';
+import { css, jsx } from '@emotion/core';
+import { SmartLinkDirection, SmartLinkSize } from '../../../../../constants';
+import { getBaseStyles, renderChildren } from '../utils';
+
+const getBlockStyles = (direction, size) => css`
+  ${getBaseStyles(direction, size)}
+  justify-content: flex-start;
+`;
+
+const Block = ({
+  children,
+  direction = SmartLinkDirection.Horizontal,
+  size = SmartLinkSize.Medium,
+  testId = 'smart-block'
+}) => jsx("div", {
+  css: getBlockStyles(direction, size),
+  "data-smart-block": true,
+  "data-testid": testId
+}, renderChildren(children, size));
+
+export default Block;

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

@@ -0,0 +1,38 @@
+/** @jsx jsx */
+import React from 'react';
+import { css, jsx } from '@emotion/core';
+import { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize, SmartLinkWidth } from '../../../../../constants';
+import { getBaseStyles, renderChildren } from '../utils';
+
+const getFlexJustifyContent = align => {
+  switch (align) {
+    case SmartLinkAlignment.Right:
+      return 'flex-end';
+
+    case SmartLinkAlignment.Left:
+    default:
+      return 'flex-start';
+  }
+};
+
+export const getElementGroupStyles = (direction, size, align, width) => css`
+  ${getBaseStyles(direction, size)}
+  justify-content: ${getFlexJustifyContent(align)};
+  min-width: 10%;
+  ${width === SmartLinkWidth.Flexible ? `flex: 1 3;` : ''}
+`;
+
+const ElementGroup = ({
+  align = SmartLinkAlignment.Left,
+  children,
+  direction = SmartLinkDirection.Horizontal,
+  size = SmartLinkSize.Medium,
+  testId = 'smart-element-group',
+  width = SmartLinkWidth.FitToContent
+}) => jsx("div", {
+  css: getElementGroupStyles(direction, size, align, width),
+  "data-smart-element-group": true,
+  "data-testid": testId
+}, renderChildren(children, size));
+
+export default ElementGroup;

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

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

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

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

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

@@ -0,0 +1,68 @@
+import _extends from "@babel/runtime/helpers/extends";
+
+/** @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';
+const actionStyles = css`
+  cursor: pointer;
+  :hover {
+    color: ${tokens.errorMessageHover};
+    text-decoration: underline;
+  }
+`;
+
+const getMessageStyles = (size, hasAction) => {
+  const sizeStyles = getLinkSizeStyles(size);
+  return css`
+    justify-content: flex-end;
+    ${hasAction ? actionStyles : ''}
+    ${sizeStyles}
+    ${getTruncateStyles(1, getLinkLineHeight(size))}
+    color: ${tokens.errorMessage};
+  `;
+};
+
+const TitleBlockErroredView = ({
+  maxLines,
+  retry,
+  position,
+  testId,
+  theme,
+  ...blockProps
+}) => {
+  const {
+    descriptor,
+    onClick,
+    values
+  } = retry || {};
+  const {
+    size = SmartLinkSize.Medium
+  } = blockProps;
+  const hasAction = onClick !== undefined;
+  return jsx(Block, _extends({}, blockProps, {
+    testId: `${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": `${testId}-errored-view-message`
+  }, jsx(FormattedMessage, _extends({}, descriptor, {
+    values: values
+  })))));
+};
+
+export default TitleBlockErroredView;

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

@@ -0,0 +1,37 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { SmartLinkStatus } from '../../../../../constants';
+import TitleBlockResolvedView from './resolved';
+import TitleBlockErroredView from './errored';
+import TitleBlockResolvingView from './resolving';
+
+const TitleBlock = ({
+  status = SmartLinkStatus.Fallback,
+  testId = 'smart-block-title',
+  ...props
+}) => {
+  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/es2019/view/FlexibleCard/components/blocks/title-block/resolved/index.js

@@ -0,0 +1,42 @@
+import _extends from "@babel/runtime/helpers/extends";
+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';
+
+const TitleBlockResolvedView = ({
+  maxLines,
+  metadata = [],
+  position,
+  subtitle = [],
+  actions = [],
+  testId,
+  theme,
+  ...blockProps
+}) => {
+  const metadataElements = renderElementItems(metadata);
+  const subtitleElements = renderElementItems(subtitle);
+  return /*#__PURE__*/React.createElement(Block, _extends({}, blockProps, {
+    testId: `${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/es2019/view/FlexibleCard/components/blocks/title-block/resolving/index.js

@@ -0,0 +1,52 @@
+import _extends from "@babel/runtime/helpers/extends";
+
+/** @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';
+
+const 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;
+  }
+};
+
+const TitleBlockResolvingView = ({
+  maxLines,
+  retry,
+  position,
+  testId,
+  theme,
+  ...blockProps
+}) => {
+  const {
+    size = SmartLinkSize.Medium
+  } = blockProps;
+  return jsx(Block, _extends({}, blockProps, {
+    testId: `${testId}-resolving-view`
+  }), jsx(Spinner, {
+    size: getSpinnerSize(size),
+    testId: `${testId}-resolving-spinner`
+  }), jsx(Title, {
+    maxLines: maxLines,
+    theme: theme
+  }));
+};
+
+export default TitleBlockResolvingView;

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

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

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

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

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

@@ -0,0 +1,123 @@
+import _extends from "@babel/runtime/helpers/extends";
+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';
+
+const getDirectionStyles = direction => {
+  switch (direction) {
+    case SmartLinkDirection.Vertical:
+      return css`
+        flex-direction: column;
+        align-items: flex-start;
+      `;
+
+    case SmartLinkDirection.Horizontal:
+    default:
+      return css`
+        flex-direction: row;
+        align-items: center;
+      `;
+  }
+};
+
+const getGapSize = 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';
+  }
+};
+
+export const getBaseStyles = (direction, size) => css`
+  display: flex;
+  gap: ${getGapSize(size)};
+  line-height: 1rem;
+  min-width: 0;
+  overflow: hidden;
+  overflow-y: hidden;
+  ${getDirectionStyles(direction)};
+  &:empty {
+    display: none;
+  }
+  & > * {
+    min-width: 0;
+  }
+  & > [data-fit-to-content] {
+    min-width: fit-content;
+  }
+`;
+
+const isActionGroup = node => /*#__PURE__*/React.isValidElement(node) && node.type === ActionGroup;
+
+const isElementOrElementGroup = node => /*#__PURE__*/React.isValidElement(node) && (isFlexibleUiElement(node) || node.type === ElementGroup);
+
+export const renderChildren = (children, size) => React.Children.map(children, child => {
+  if (isElementOrElementGroup(child) || isActionGroup(child)) {
+    const node = child;
+    const {
+      size: childSize
+    } = node.props;
+    return /*#__PURE__*/React.cloneElement(node, {
+      size: childSize || size
+    });
+  }
+
+  return child;
+});
+export const renderElementItems = (items = []) => {
+  const elements = items.reduce((acc, curr, idx) => {
+    const {
+      name,
+      ...props
+    } = curr;
+    const Element = Elements[name];
+
+    if (Element) {
+      return [...acc, /*#__PURE__*/React.createElement(Element, _extends({
+        key: idx
+      }, props))];
+    }
+
+    return acc;
+  }, []);
+
+  if (elements.length) {
+    return elements;
+  }
+};
+export const renderActionItems = (items = [], size = SmartLinkSize.Medium) => {
+  const actions = items.reduce((acc, curr, idx) => {
+    const {
+      name,
+      ...props
+    } = curr;
+    const Action = Actions[name];
+
+    if (Action) {
+      return [...acc, /*#__PURE__*/React.createElement(Action, _extends({
+        size: size,
+        key: idx
+      }, props))];
+    }
+
+    return acc;
+  }, []);
+
+  if (actions.length) {
+    return actions;
+  }
+};