@atlaskit/smart-card 17.0.1 → 17.3.0

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

@@ -0,0 +1,122 @@
+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;
+      `;
+  }
+};
+
+export const 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 const getBaseStyles = (direction, size) => css`
+  display: flex;
+  gap: ${getGapSize(size)}rem;
+  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;
+  }
+};

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

@@ -1,7 +1,7 @@
 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
 const importIconMapper = {
   [IconType.Archive]: () => import(
@@ -134,7 +134,60 @@ const importIconMapper = {
     JiraIcon
   }) => ({
     default: JiraIcon
-  }))
+  })),
+  // Fallback icons
+  [IconType.Default]: () => import(
+  /* webpackChunkName: "glyphDefault" */
+  '@atlaskit/icon/glyph/link'),
+  [IconType.Error]: () => import(
+  /* webpackChunkName: "glyphError" */
+  '@atlaskit/icon/glyph/error'),
+  [IconType.Forbidden]: () => import(
+  /* webpackChunkName: "glyphForbidden" */
+  '@atlaskit/icon/glyph/lock-filled'),
+  // Badge
+  [IconType.Comment]: () => import(
+  /* webpackChunkName: "glyphComment" */
+  '@atlaskit/icon/glyph/comment'),
+  [IconType.PriorityBlocker]: () => import(
+  /* webpackChunkName: "glyphBlocker" */
+  '@atlaskit/icon-priority/glyph/priority-blocker'),
+  [IconType.PriorityCritical]: () => import(
+  /* webpackChunkName: "glyphCritical" */
+  '@atlaskit/icon-priority/glyph/priority-critical'),
+  [IconType.PriorityHigh]: () => import(
+  /* webpackChunkName: "glyphHigh" */
+  '@atlaskit/icon-priority/glyph/priority-high'),
+  [IconType.PriorityHighest]: () => import(
+  /* webpackChunkName: "glyphHighest" */
+  '@atlaskit/icon-priority/glyph/priority-highest'),
+  [IconType.PriorityLow]: () => import(
+  /* webpackChunkName: "glyphLow" */
+  '@atlaskit/icon-priority/glyph/priority-low'),
+  [IconType.PriorityLowest]: () => import(
+  /* webpackChunkName: "glyphLowest" */
+  '@atlaskit/icon-priority/glyph/priority-lowest'),
+  [IconType.PriorityMajor]: () => import(
+  /* webpackChunkName: "glyphMajor" */
+  '@atlaskit/icon-priority/glyph/priority-major'),
+  [IconType.PriorityMedium]: () => import(
+  /* webpackChunkName: "glyphMedium" */
+  '@atlaskit/icon-priority/glyph/priority-medium'),
+  [IconType.PriorityMinor]: () => import(
+  /* webpackChunkName: "glyphMinor" */
+  '@atlaskit/icon-priority/glyph/priority-minor'),
+  [IconType.PriorityTrivial]: () => import(
+  /* webpackChunkName: "glyphTrivial" */
+  '@atlaskit/icon-priority/glyph/priority-trivial'),
+  [IconType.PriorityUndefined]: () => import(
+  /* webpackChunkName: "glyphUndefined" */
+  '@atlaskit/icon/glyph/question'),
+  [IconType.ProgrammingLanguage]: () => import(
+  /* webpackChunkName: "glyphProgrammingLanguage" */
+  '@atlaskit/icon/glyph/code'),
+  [IconType.Subscriber]: () => import(
+  /* webpackChunkName: "glyphSubscriber" */
+  '@atlaskit/icon/glyph/people')
 };
 
 const getIconImportFn = icon => importIconMapper[icon];
@@ -157,19 +210,33 @@ const AtlaskitIcon = ({
     return null;
   }
 
-  const ImportedIcon = importIcon(importFn); // Logo component has a different prop set from other icon components
-  // and yet to support the token system.
+  const 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
+      });
 
-  const 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;
+    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/es2019/view/FlexibleCard/components/common/atlaskit-icon/types.js

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

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

@@ -0,0 +1,49 @@
+/** @jsx jsx */
+import React from 'react';
+import { css, jsx, keyframes } from '@emotion/core';
+import ImageLoader from 'react-render-image';
+const placeholderShimmer = keyframes`
+  0% { background-position: -20px 0; }
+  100% { background-position: 20px 0; }
+`;
+const shimmer = css`
+  border-radius: 2px;
+  user-select: none;
+
+  background: #f6f7f8;
+  background-image: linear-gradient(
+    to right,
+    #f6f7f8 0%,
+    #edeef1 20%,
+    #f6f7f8 40%,
+    #f6f7f8 100%
+  );
+  background-repeat: no-repeat;
+  background-size: 280% 100%;
+  display: inline-block;
+
+  animation-duration: 1s;
+  animation-fill-mode: forwards;
+  animation-iteration-count: infinite;
+  animation-name: ${placeholderShimmer};
+  animation-timing-function: linear;
+`;
+
+const ImageIcon = ({
+  defaultIcon,
+  testId,
+  url
+}) => jsx(ImageLoader, {
+  src: url,
+  loading: jsx("span", {
+    css: shimmer,
+    "data-testid": `${testId}-loading`
+  }),
+  loaded: jsx("img", {
+    src: url,
+    "data-testid": `${testId}-image`
+  }),
+  errored: defaultIcon
+});
+
+export default ImageIcon;

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

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

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

@@ -1,18 +1,17 @@
 /** @jsx jsx */
 import React from 'react';
-import { N0, N40A, N50A } from '@atlaskit/theme/colors';
 import { css, jsx } from '@emotion/core';
-import { SmartLinkSize } from '../../../../constants';
-import { token } from '@atlaskit/tokens';
+import { SmartLinkSize, SmartLinkTheme } from '../../../../constants';
+import { isFlexibleUiBlock, isFlexibleUiTitleBlock } from '../../../../utils/flexible';
+import { tokens } from '../../../../utils/token';
+const elevationStyles = css`
+  border: 1px solid transparent;
+  border-radius: 1.5px;
+  box-shadow: ${tokens.elevation};
+  margin: 2px;
+`;
 
-const getElevationStyles = () => ({
-  border: `1px solid transparent`,
-  borderRadius: '1.5px',
-  boxShadow: token('elevation.shadow.raised', `0 1px 1px ${N50A}, 0 0 1px 1px ${N40A}`),
-  margin: '2px'
-});
-
-const getGapSize = size => {
+const getGap = size => {
   switch (size) {
     case SmartLinkSize.XLarge:
       return '1.25rem';
@@ -29,7 +28,7 @@ const getGapSize = size => {
   }
 };
 
-const getPaddingSize = size => {
+const getPadding = size => {
   switch (size) {
     case SmartLinkSize.XLarge:
       return '1.5rem';
@@ -46,31 +45,29 @@ const getPaddingSize = size => {
   }
 };
 
-export const getContainerStyles = (size, hideBackground, hideElevation, hidePadding) => {
-  const elevation = hideElevation ? {} : getElevationStyles();
-  return css({
-    backgroundColor: hideBackground ? undefined : token('elevation.surface', N0),
-    display: 'flex',
-    gap: `${getGapSize(size)} 0`,
-    flexDirection: 'column',
-    minWidth: 0,
-    overflow: 'hidden',
-    padding: hidePadding ? undefined : getPaddingSize(size),
-    ...elevation
-  });
-};
+export const getContainerStyles = (size, hideBackground, hideElevation, hidePadding) => css`
+  display: flex;
+  gap: ${getGap(size)} 0;
+  flex-direction: column;
+  min-width: 0;
+  overflow: hidden;
+  ${hideBackground ? '' : `background-color: ${tokens.background};`}
+  ${hidePadding ? '' : `padding: ${getPadding(size)};`}
+  ${hideElevation ? '' : elevationStyles}
+`;
 
-const renderChildren = (children, containerSize) => React.Children.map(children, child => {
-  if ( /*#__PURE__*/React.isValidElement(child)) {
+const renderChildren = (children, containerSize, containerTheme, status, retry) => React.Children.map(children, child => {
+  if ( /*#__PURE__*/React.isValidElement(child) && isFlexibleUiBlock(child)) {
     const {
       size: blockSize
     } = child.props;
     return /*#__PURE__*/React.cloneElement(child, {
-      size: blockSize || containerSize
+      retry: isFlexibleUiTitleBlock(child) ? retry : undefined,
+      size: blockSize || containerSize,
+      status,
+      theme: containerTheme
     });
   }
-
-  return child;
 });
 
 const Container = ({
@@ -78,12 +75,15 @@ const Container = ({
   hideBackground = false,
   hideElevation = false,
   hidePadding = false,
+  retry,
   size = SmartLinkSize.Medium,
-  testId = 'smart-links-container'
+  status,
+  testId = 'smart-links-container',
+  theme = SmartLinkTheme.Link
 }) => jsx("div", {
   css: getContainerStyles(size, hideBackground, hideElevation, hidePadding),
   "data-smart-link-container": true,
   "data-testid": testId
-}, renderChildren(children, size));
+}, renderChildren(children, size, theme, status, retry));
 
 export default Container;

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

@@ -0,0 +1,51 @@
+/** @jsx jsx */
+import React from 'react';
+import { css, jsx } from '@emotion/core';
+import AtlaskitAvatarGroup from '@atlaskit/avatar-group';
+import { SmartLinkSize } from '../../../../../constants';
+const MAX_COUNT = 4;
+
+const getStyles = size => {
+  switch (size) {
+    case SmartLinkSize.XLarge:
+    case SmartLinkSize.Large:
+      // Default AK small size
+      return;
+
+    case SmartLinkSize.Medium:
+    case SmartLinkSize.Small:
+    default:
+      return css`
+        li {
+          span,
+          svg {
+            max-height: 1.25rem;
+            max-width: 1.25rem;
+          }
+        }
+      `;
+  }
+};
+
+const AvatarGroup = ({
+  items = [],
+  maxCount = MAX_COUNT,
+  size = SmartLinkSize.Medium,
+  testId = 'smart-element-avatar-group'
+}) => {
+  if (!items.length) {
+    return null;
+  }
+
+  return jsx("span", {
+    css: getStyles(size)
+  }, jsx(AtlaskitAvatarGroup, {
+    maxCount: maxCount,
+    appearance: "stack",
+    size: "small",
+    data: items,
+    testId: testId
+  }));
+};
+
+export default AvatarGroup;

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

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

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

@@ -0,0 +1,102 @@
+/** @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';
+const badgeStyles = css`
+  align-items: center;
+  display: flex;
+  min-width: fit-content;
+`;
+const iconStyles = css`
+  color: ${tokens.badgeIcon};
+  ${getIconSizeStyles('1rem')}
+  span,
+  svg {
+    line-height: 0;
+  }
+`;
+const labelStyles = css`
+  color: ${tokens.badgeText};
+  font-size: 0.75rem;
+  line-height: 1rem;
+  padding-left: 0.125rem;
+`;
+const messageMapper = {
+  [IconType.PriorityBlocker]: messages.priority_blocker,
+  [IconType.PriorityCritical]: messages.priority_critical,
+  [IconType.PriorityHigh]: messages.priority_high,
+  [IconType.PriorityHighest]: messages.priority_highest,
+  [IconType.PriorityLow]: messages.priority_low,
+  [IconType.PriorityLowest]: messages.priority_lowest,
+  [IconType.PriorityMajor]: messages.priority_major,
+  [IconType.PriorityMedium]: messages.priority_medium,
+  [IconType.PriorityMinor]: messages.priority_minor,
+  [IconType.PriorityTrivial]: messages.priority_trivial,
+  [IconType.PriorityUndefined]: messages.priority_undefined
+};
+
+const getFormattedMessageOrLabel = (icon, content) => {
+  if (icon) {
+    const descriptor = messageMapper[icon];
+
+    if (descriptor) {
+      return getFormattedMessage({
+        descriptor
+      });
+    }
+  }
+
+  return content;
+};
+
+const renderAtlaskitIcon = (icon, testId) => {
+  if (icon) {
+    return jsx(AtlaskitIcon, {
+      icon: icon,
+      label: icon,
+      testId: `${testId}-icon`
+    });
+  }
+};
+
+const renderImageIcon = (url, testId) => {
+  if (url) {
+    return jsx(ImageIcon, {
+      testId: testId,
+      url: url
+    });
+  }
+};
+
+const Badge = ({
+  icon,
+  url,
+  label,
+  testId = 'smart-element-badge'
+}) => {
+  const formattedMessageOrLabel = getFormattedMessageOrLabel(icon, label);
+  const 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": `${testId}-label`
+  }, formattedMessageOrLabel));
+};
+
+export default Badge;

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

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

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

@@ -0,0 +1,53 @@
+import _extends from "@babel/runtime/helpers/extends";
+
+/** @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';
+const styles = css`
+  color: ${tokens.text};
+  font-size: 0.75rem;
+  line-height: 1rem;
+  ${getTruncateStyles(1)}
+`;
+const typeToDescriptorMap = {
+  created: messages.created_on,
+  modified: messages.modified_on
+};
+
+const DateTime = ({
+  date,
+  type,
+  testId = 'smart-element-date-time'
+}) => {
+  const {
+    formatRelativeTime
+  } = useIntl();
+
+  if (!type || !date) {
+    return null;
+  }
+
+  const {
+    value,
+    unit
+  } = selectUnit(date, Date.now());
+  const 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
+    }
+  })));
+};
+
+export default DateTime;

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

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