@atlaskit/smart-card 16.3.0 → 17.2.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/common/atlaskit-icon/index.js

@@ -0,0 +1,242 @@
+import React from 'react';
+import Loadable from 'react-loadable';
+import { B200, B400, N700, R400 } from '@atlaskit/theme/colors';
+import { IconType } from '../../../../../constants';
+// prettier-ignore
+const importIconMapper = {
+  [IconType.Archive]: () => import(
+  /* webpackChunkName: "glyphArchive" */
+  '@atlaskit/icon-file-type/glyph/archive/16'),
+  [IconType.Audio]: () => import(
+  /* webpackChunkName: "glyphAudio" */
+  '@atlaskit/icon-file-type/glyph/audio/16'),
+  [IconType.Blog]: () => import(
+  /* webpackChunkName: "glyphBlog" */
+  '@atlaskit/icon-object/glyph/blog/16'),
+  [IconType.Code]: () => import(
+  /* webpackChunkName: "glyphCode" */
+  '@atlaskit/icon-file-type/glyph/source-code/16'),
+  [IconType.Document]: () => import(
+  /* webpackChunkName: "glyphDocument" */
+  '@atlaskit/icon-file-type/glyph/document/16'),
+  [IconType.Executable]: () => import(
+  /* webpackChunkName: "glyphExecutable" */
+  '@atlaskit/icon-file-type/glyph/executable/16'),
+  [IconType.File]: () => import(
+  /* webpackChunkName: "glyphFile" */
+  '@atlaskit/icon-file-type/glyph/generic/16'),
+  [IconType.Folder]: () => import(
+  /* webpackChunkName: "glyphFolder" */
+  '@atlaskit/icon-file-type/glyph/folder/16'),
+  [IconType.Generic]: () => import(
+  /* webpackChunkName: "glyphGeneric" */
+  '@atlaskit/icon-file-type/glyph/generic/16'),
+  [IconType.GIF]: () => import(
+  /* webpackChunkName: "glyphGIF" */
+  '@atlaskit/icon-file-type/glyph/gif/16'),
+  [IconType.GoogleDocs]: () => import(
+  /* webpackChunkName: "glyphGoogleDocs" */
+  '@atlaskit/icon-file-type/glyph/google-doc/16'),
+  [IconType.GoogleForms]: () => import(
+  /* webpackChunkName: "glyphGoogleForms" */
+  '@atlaskit/icon-file-type/glyph/google-form/16'),
+  [IconType.GoogleSheets]: () => import(
+  /* webpackChunkName: "glyphGoogleSheets" */
+  '@atlaskit/icon-file-type/glyph/google-sheet/16'),
+  [IconType.GoogleSlides]: () => import(
+  /* webpackChunkName: "glyphGoogleSlides" */
+  '@atlaskit/icon-file-type/glyph/google-slide/16'),
+  [IconType.Image]: () => import(
+  /* webpackChunkName: "glyphImage" */
+  '@atlaskit/icon-file-type/glyph/image/16'),
+  [IconType.MSExcel]: () => import(
+  /* webpackChunkName: "glyphMSExcel" */
+  '@atlaskit/icon-file-type/glyph/excel-spreadsheet/16'),
+  [IconType.MSPowerpoint]: () => import(
+  /* webpackChunkName: "glyphMSPowerpoint" */
+  '@atlaskit/icon-file-type/glyph/powerpoint-presentation/16'),
+  [IconType.MSWord]: () => import(
+  /* webpackChunkName: "glyphMSWord" */
+  '@atlaskit/icon-file-type/glyph/word-document/16'),
+  [IconType.PDF]: () => import(
+  /* webpackChunkName: "glyphPDF" */
+  '@atlaskit/icon-file-type/glyph/pdf-document/16'),
+  [IconType.Presentation]: () => import(
+  /* webpackChunkName: "glyphPresentation" */
+  '@atlaskit/icon-file-type/glyph/presentation/16'),
+  [IconType.Sketch]: () => import(
+  /* webpackChunkName: "glyphSketch" */
+  '@atlaskit/icon-file-type/glyph/sketch/16'),
+  [IconType.Spreadsheet]: () => import(
+  /* webpackChunkName: "glyphSpreadsheet" */
+  '@atlaskit/icon-file-type/glyph/spreadsheet/16'),
+  [IconType.Template]: () => import(
+  /* webpackChunkName: "glyphTemplate" */
+  '@atlaskit/icon/glyph/document-filled'),
+  [IconType.Video]: () => import(
+  /* webpackChunkName: "glyphVideo" */
+  '@atlaskit/icon-file-type/glyph/video/16'),
+  // Bitbucket icons
+  [IconType.Branch]: () => import(
+  /* webpackChunkName: "glyphBranch" */
+  '@atlaskit/icon-object/glyph/branch/16'),
+  [IconType.Commit]: () => import(
+  /* webpackChunkName: "glyphCommit" */
+  '@atlaskit/icon-object/glyph/commit/16'),
+  [IconType.Project]: () => import(
+  /* webpackChunkName: "glyphProject" */
+  '@atlaskit/icon/glyph/people-group'),
+  [IconType.PullRequest]: () => import(
+  /* webpackChunkName: "glyphPullRequest" */
+  '@atlaskit/icon-object/glyph/pull-request/16'),
+  [IconType.Repo]: () => import(
+  /* webpackChunkName: "glyphRepo" */
+  '@atlaskit/icon-object/glyph/code/16'),
+  // Jira icons
+  [IconType.Bug]: () => import(
+  /* webpackChunkName: "glyphBug" */
+  '@atlaskit/icon-object/glyph/bug/16'),
+  [IconType.Change]: () => import(
+  /* webpackChunkName: "glyphChange" */
+  '@atlaskit/icon-object/glyph/changes/16'),
+  [IconType.Epic]: () => import(
+  /* webpackChunkName: "glyphEpic" */
+  '@atlaskit/icon-object/glyph/epic/16'),
+  [IconType.Incident]: () => import(
+  /* webpackChunkName: "glyphIncident" */
+  '@atlaskit/icon-object/glyph/incident/16'),
+  [IconType.Problem]: () => import(
+  /* webpackChunkName: "glyphProblem" */
+  '@atlaskit/icon-object/glyph/problem/16'),
+  [IconType.ServiceRequest]: () => import(
+  /* webpackChunkName: "glyphServiceRequest" */
+  '@atlaskit/icon-object/glyph/issue/16'),
+  [IconType.Story]: () => import(
+  /* webpackChunkName: "glyphStory" */
+  '@atlaskit/icon-object/glyph/story/16'),
+  [IconType.SubTask]: () => import(
+  /* webpackChunkName: "glyphSubTask" */
+  '@atlaskit/icon-object/glyph/subtask/16'),
+  [IconType.Task]: () => import(
+  /* webpackChunkName: "glyphTask" */
+  '@atlaskit/icon-object/glyph/task/16'),
+  // Provider icons
+  [IconType.Confluence]: () => import(
+  /* webpackChunkName: "glyphConfluence" */
+  '@atlaskit/logo/confluence-icon').then(({
+    ConfluenceIcon
+  }) => ({
+    default: ConfluenceIcon
+  })),
+  [IconType.Jira]: () => import(
+  /* webpackChunkName: "glyphJira" */
+  '@atlaskit/logo/jira-icon').then(({
+    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];
+
+const importIcon = importFn => {
+  return Loadable({
+    loader: () => importFn().then(module => module.default),
+    loading: () => null
+  }); // Because we're using dynamic loading here, TS will not be able to infer the type.
+};
+
+const AtlaskitIcon = ({
+  icon,
+  label,
+  testId
+}) => {
+  const importFn = getIconImportFn(icon);
+
+  if (!importFn) {
+    return null;
+  }
+
+  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
+      });
+
+    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

@@ -0,0 +1,89 @@
+/** @jsx jsx */
+import React from 'react';
+import { css, jsx } from '@emotion/core';
+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 getGap = 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';
+  }
+};
+
+const getPadding = size => {
+  switch (size) {
+    case SmartLinkSize.XLarge:
+      return '1.5rem';
+
+    case SmartLinkSize.Large:
+      return '1.25rem';
+
+    case SmartLinkSize.Medium:
+      return '1rem';
+
+    case SmartLinkSize.Small:
+    default:
+      return '.5rem';
+  }
+};
+
+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, 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, {
+      retry: isFlexibleUiTitleBlock(child) ? retry : undefined,
+      size: blockSize || containerSize,
+      status,
+      theme: containerTheme
+    });
+  }
+});
+
+const Container = ({
+  children,
+  hideBackground = false,
+  hideElevation = false,
+  hidePadding = false,
+  retry,
+  size = SmartLinkSize.Medium,
+  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, theme, status, retry));
+
+export default Container;

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

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

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import AtlaskitAvatarGroup from '@atlaskit/avatar-group';
+import { SmartLinkSize } from '../../../../../constants';
+const MAX_COUNT = 4;
+
+const AvatarGroup = ({
+  items = [],
+  maxCount = MAX_COUNT,
+  size = SmartLinkSize.Medium,
+  testId = 'smart-element-avatar-group'
+}) => {
+  if (!items.length) {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement(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 {};