@atlaskit/smart-card 38.5.0 → 38.5.2

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

@@ -1,6 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { SmartLinkStatus } from '../../../../../constants';
+import { useFlexibleCardContext } from '../../../../../state/flexible-ui-context';
 import AIFooterBlockResolvedView from './resolved';
 /**
  * Represents a AIFooterBlock, designed to show provider metadata in
@@ -13,10 +15,22 @@ const AIFooterBlock = ({
   testId = 'smart-ai-footer-block',
   ...props
 }) => {
-  if (status !== SmartLinkStatus.Resolved) {
-    return null;
+  var _props$size, _cardContext$ui;
+  const cardContext = fg('platform-linking-flexible-card-context') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useFlexibleCardContext() : undefined;
+  if (fg('platform-linking-flexible-card-context')) {
+    if ((cardContext === null || cardContext === void 0 ? void 0 : cardContext.status) !== SmartLinkStatus.Resolved) {
+      return null;
+    }
+  } else {
+    if (status !== SmartLinkStatus.Resolved) {
+      return null;
+    }
   }
-  return /*#__PURE__*/React.createElement(AIFooterBlockResolvedView, _extends({}, props, {
+  return /*#__PURE__*/React.createElement(AIFooterBlockResolvedView, _extends({}, props, fg('platform-linking-flexible-card-context') ? {
+    size: (_props$size = props.size) !== null && _props$size !== void 0 ? _props$size : cardContext === null || cardContext === void 0 ? void 0 : (_cardContext$ui = cardContext.ui) === null || _cardContext$ui === void 0 ? void 0 : _cardContext$ui.size
+  } : undefined, {
     testId: testId
   }));
 };

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

@@ -1,7 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { InternalActionName, SmartLinkStatus } from '../../../../../constants';
-import { useFlexibleUiContext } from '../../../../../state/flexible-ui-context';
+import { useFlexibleCardContext, useFlexibleUiContext } from '../../../../../state/flexible-ui-context';
 import AISummaryBlockResolvedView from './resolved';
 /**
  * Represents an AISummaryBlock, designed to summarising link resource
@@ -15,16 +16,27 @@ const AISummaryBlock = ({
   testId = 'smart-ai-summary-block',
   ...props
 }) => {
-  var _context$actions;
+  var _context$actions, _props$size, _cardContext$ui;
+  const cardContext = fg('platform-linking-flexible-card-context') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useFlexibleCardContext() : undefined;
   const context = useFlexibleUiContext();
   const actionData = context === null || context === void 0 ? void 0 : (_context$actions = context.actions) === null || _context$actions === void 0 ? void 0 : _context$actions[InternalActionName.AISummaryAction];
-  if (status !== SmartLinkStatus.Resolved) {
-    return null;
+  if (fg('platform-linking-flexible-card-context')) {
+    if ((cardContext === null || cardContext === void 0 ? void 0 : cardContext.status) !== SmartLinkStatus.Resolved) {
+      return null;
+    }
+  } else {
+    if (status !== SmartLinkStatus.Resolved) {
+      return null;
+    }
   }
   if (!(actionData !== null && actionData !== void 0 && actionData.url)) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(AISummaryBlockResolvedView, _extends({}, props, {
+  return /*#__PURE__*/React.createElement(AISummaryBlockResolvedView, _extends({}, props, fg('platform-linking-flexible-card-context') ? {
+    size: (_props$size = props.size) !== null && _props$size !== void 0 ? _props$size : cardContext === null || cardContext === void 0 ? void 0 : (_cardContext$ui = cardContext.ui) === null || _cardContext$ui === void 0 ? void 0 : _cardContext$ui.size
+  } : undefined, {
     testId: testId,
     url: actionData.url
   }));

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

@@ -1,6 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { SmartLinkStatus } from '../../../../../constants';
+import { useFlexibleCardContext } from '../../../../../state/flexible-ui-context';
 import FooterBlockResolvedView from './resolved';
 /**
  * Represents a FooterBlock, designed to contain elements and actions that should appear
@@ -15,10 +17,22 @@ const FooterBlock = ({
   alwaysShow,
   ...props
 }) => {
-  if (status !== SmartLinkStatus.Resolved && !alwaysShow) {
-    return null;
+  var _props$size, _cardContext$ui;
+  const cardContext = fg('platform-linking-flexible-card-context') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useFlexibleCardContext() : undefined;
+  if (fg('platform-linking-flexible-card-context')) {
+    if ((cardContext === null || cardContext === void 0 ? void 0 : cardContext.status) !== SmartLinkStatus.Resolved && !alwaysShow) {
+      return null;
+    }
+  } else {
+    if (status !== SmartLinkStatus.Resolved && !alwaysShow) {
+      return null;
+    }
   }
-  return /*#__PURE__*/React.createElement(FooterBlockResolvedView, _extends({}, props, {
+  return /*#__PURE__*/React.createElement(FooterBlockResolvedView, _extends({}, props, fg('platform-linking-flexible-card-context') ? {
+    size: (_props$size = props.size) !== null && _props$size !== void 0 ? _props$size : cardContext === null || cardContext === void 0 ? void 0 : (_cardContext$ui = cardContext.ui) === null || _cardContext$ui === void 0 ? void 0 : _cardContext$ui.size
+  } : undefined, {
     testId: testId
   }));
 };

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

@@ -7,6 +7,7 @@ import { ax, ix } from "@compiled/react/runtime";
 
 import { fg } from '@atlaskit/platform-feature-flags';
 import { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize, SmartLinkStatus, SmartLinkWidth } from '../../../../../constants';
+import { useFlexibleCardContext } from '../../../../../state/flexible-ui-context';
 import Block from '../block';
 import ElementGroup from '../element-group';
 import { renderElementItems } from '../utils';
@@ -38,6 +39,22 @@ const getMaxLines = maxLines => {
   }
   return maxLines;
 };
+const ElementItemRenderer = ({
+  align = SmartLinkAlignment.Left,
+  items = [],
+  display = 'inline',
+  size = SmartLinkSize.Medium,
+  maxLines = DEFAULT_MAX_LINES
+}) => {
+  const elements = renderElementItems(items, display);
+  return elements && /*#__PURE__*/React.createElement(ElementGroup, {
+    align: align,
+    direction: SmartLinkDirection.Horizontal,
+    width: SmartLinkWidth.Flexible,
+    size: size,
+    className: ax([truncateStyles[maxLines], !fg('platform-linking-visual-refresh-v1') && sizeStylesOld[size], fg('platform-linking-visual-refresh-v1') && sizeStyles[size]])
+  }, elements);
+};
 
 /**
  * Represents a MetadataBlock, designed to contain groups of metadata in the form of elements.
@@ -54,15 +71,41 @@ const MetadataBlock = ({
   secondary = [],
   ...blockProps
 }) => {
-  if (primary.length === 0 && secondary.length === 0 || status !== SmartLinkStatus.Resolved) {
-    return null;
+  var _ref, _blockProps$size, _cardContext$ui;
+  const cardContext = fg('platform-linking-flexible-card-context') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useFlexibleCardContext() : undefined;
+  if (fg('platform-linking-flexible-card-context')) {
+    if (primary.length === 0 && secondary.length === 0 || (cardContext === null || cardContext === void 0 ? void 0 : cardContext.status) !== SmartLinkStatus.Resolved) {
+      return null;
+    }
+  } else {
+    if (primary.length === 0 && secondary.length === 0 || status !== SmartLinkStatus.Resolved) {
+      return null;
+    }
   }
-  const primaryElements = renderElementItems(primary);
-  const secondaryElements = renderElementItems(secondary);
   const {
-    size = SmartLinkSize.Medium
+    size: sizeProp = SmartLinkSize.Medium
   } = blockProps;
+  const size = fg('platform-linking-flexible-card-context') ? (_ref = (_blockProps$size = blockProps === null || blockProps === void 0 ? void 0 : blockProps.size) !== null && _blockProps$size !== void 0 ? _blockProps$size : cardContext === null || cardContext === void 0 ? void 0 : (_cardContext$ui = cardContext.ui) === null || _cardContext$ui === void 0 ? void 0 : _cardContext$ui.size) !== null && _ref !== void 0 ? _ref : SmartLinkSize.Medium : sizeProp;
   const maxLinesTotal = getMaxLines(maxLines);
+  if (fg('platform-linking-flexible-card-context')) {
+    return /*#__PURE__*/React.createElement(Block, _extends({}, blockProps, {
+      size: size,
+      testId: `${testId}-resolved-view`
+    }), /*#__PURE__*/React.createElement(ElementItemRenderer, {
+      items: primary,
+      size: size,
+      maxLines: maxLinesTotal
+    }), /*#__PURE__*/React.createElement(ElementItemRenderer, {
+      align: SmartLinkAlignment.Right,
+      items: secondary,
+      size: size,
+      maxLines: maxLinesTotal
+    }));
+  }
+  const primaryElements = renderElementItems(primary);
+  const secondaryElements = renderElementItems(secondary);
   return /*#__PURE__*/React.createElement(Block, _extends({}, blockProps, {
     testId: `${testId}-resolved-view`
   }), primaryElements && /*#__PURE__*/React.createElement(ElementGroup, {

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

@@ -1,6 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { SmartLinkStatus } from '../../../../../constants';
+import { useFlexibleUiOptionContext } from '../../../../../state/flexible-ui-context';
 import PreviewBlockResolvedView from './resolved';
 /**
  * Represents a PreviewBlock, which typically contains media or other large format content.
@@ -15,7 +17,13 @@ const PreviewBlock = ({
   overrideUrl,
   ...blockProps
 }) => {
-  return /*#__PURE__*/React.createElement(PreviewBlockResolvedView, _extends({}, blockProps, {
+  var _blockProps$size;
+  const ui = fg('platform-linking-flexible-card-context') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useFlexibleUiOptionContext() : undefined;
+  return /*#__PURE__*/React.createElement(PreviewBlockResolvedView, _extends({}, blockProps, fg('platform-linking-flexible-card-context') ? {
+    size: (_blockProps$size = blockProps.size) !== null && _blockProps$size !== void 0 ? _blockProps$size : ui === null || ui === void 0 ? void 0 : ui.size
+  } : undefined, {
     testId: testId,
     overrideUrl: overrideUrl
   }));

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

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { SmartLinkStatus } from '../../../../../constants';
-import { useFlexibleUiContext } from '../../../../../state/flexible-ui-context';
+import { useFlexibleCardContext, useFlexibleUiContext } from '../../../../../state/flexible-ui-context';
 import { useSmartLinkRenderers } from '../../../../../state/renderers';
 import { Snippet } from '../../elements';
 import { getMaxLines } from '../../utils';
@@ -24,15 +24,24 @@ const SnippetBlock = ({
   text,
   ...blockProps
 }) => {
-  var _ref, _context$meta$objectI, _context$meta, _context$meta$resourc, _context$meta2, _context$meta$tenantI, _context$meta3;
+  var _blockProps$size2, _cardContext$ui2, _ref, _context$meta$objectI, _context$meta, _context$meta$resourc, _context$meta2, _context$meta$tenantI, _context$meta3;
   const context = fg('cc-ai-linking-platform-snippet-renderer') ?
   // eslint-disable-next-line react-hooks/rules-of-hooks
   useFlexibleUiContext() : undefined;
   const renderers = fg('cc-ai-linking-platform-snippet-renderer') ?
   // eslint-disable-next-line react-hooks/rules-of-hooks
   useSmartLinkRenderers() : undefined;
-  if (status !== SmartLinkStatus.Resolved && !text) {
-    return null;
+  const cardContext = fg('platform-linking-flexible-card-context') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useFlexibleCardContext() : undefined;
+  if (fg('platform-linking-flexible-card-context')) {
+    if ((cardContext === null || cardContext === void 0 ? void 0 : cardContext.status) !== SmartLinkStatus.Resolved && !text) {
+      return null;
+    }
+  } else {
+    if (status !== SmartLinkStatus.Resolved && !text) {
+      return null;
+    }
   }
   const snippetMaxLines = getMaxLines(maxLines, DEFAULT_MAX_LINES, MAXIMUM_MAX_LINES, MINIMUM_MAX_LINES);
   const statusTestId = !text ? 'resolved' : 'non-resolved';
@@ -41,12 +50,17 @@ const SnippetBlock = ({
     content: text
   });
   if (!fg('cc-ai-linking-platform-snippet-renderer')) {
-    return /*#__PURE__*/React.createElement(Block, _extends({}, blockProps, {
+    var _blockProps$size, _cardContext$ui;
+    return /*#__PURE__*/React.createElement(Block, _extends({}, blockProps, fg('platform-linking-flexible-card-context') ? {
+      size: (_blockProps$size = blockProps.size) !== null && _blockProps$size !== void 0 ? _blockProps$size : cardContext === null || cardContext === void 0 ? void 0 : (_cardContext$ui = cardContext.ui) === null || _cardContext$ui === void 0 ? void 0 : _cardContext$ui.size
+    } : undefined, {
       testId: `${testId}-${statusTestId}-view`
     }), snippet);
   }
   const SnippetReplacement = renderers === null || renderers === void 0 ? void 0 : renderers.snippet;
-  return /*#__PURE__*/React.createElement(Block, _extends({}, blockProps, {
+  return /*#__PURE__*/React.createElement(Block, _extends({}, blockProps, fg('platform-linking-flexible-card-context') ? {
+    size: (_blockProps$size2 = blockProps.size) !== null && _blockProps$size2 !== void 0 ? _blockProps$size2 : cardContext === null || cardContext === void 0 ? void 0 : (_cardContext$ui2 = cardContext.ui) === null || _cardContext$ui2 === void 0 ? void 0 : _cardContext$ui2.size
+  } : undefined, {
     testId: `${testId}-${statusTestId}-view`
   }), SnippetReplacement ? /*#__PURE__*/React.createElement(SnippetReplacement, {
     fallbackText: (_ref = text || (context === null || context === void 0 ? void 0 : context.snippet)) !== null && _ref !== void 0 ? _ref : '',

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

@@ -7,6 +7,7 @@ import { useCallback, useState } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { SmartLinkStatus } from '../../../../../constants';
 import { useMouseDownEvent } from '../../../../../state/analytics/useLinkClicked';
+import { useFlexibleCardContext } from '../../../../../state/flexible-ui-context';
 import { Title } from '../../elements';
 import ActionGroup from '../action-group';
 import TitleBlockErroredView from './errored';
@@ -49,7 +50,7 @@ const TitleBlock = ({
   maxLines,
   onActionMenuOpenChange,
   onClick,
-  status = SmartLinkStatus.Fallback,
+  status: statusProp = SmartLinkStatus.Fallback,
   showActionOnHover,
   testId = 'smart-block-title',
   text,
@@ -62,6 +63,14 @@ const TitleBlock = ({
   anchorRef,
   ...props
 }) => {
+  var _props$size;
+  const cardContext = fg('platform-linking-flexible-card-context') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useFlexibleCardContext() : undefined;
+  const {
+    status = SmartLinkStatus.Fallback,
+    ui
+  } = cardContext || {};
   if (!fg('platform-linking-flexible-card-unresolved-action')) {
     if (hideRetry && props.retry) {
       delete props.retry;
@@ -87,14 +96,16 @@ const TitleBlock = ({
   const onMouseDown = useMouseDownEvent();
   const title = /*#__PURE__*/React.createElement(Title, _extends({
     hideTooltip: hideTitleTooltip,
-    maxLines: maxLines,
-    onClick: onClick,
+    maxLines: maxLines
+  }, fg('platform-linking-flexible-card-context') ? undefined : {
+    onClick
+  }, {
     onMouseDown: onMouseDown,
     target: anchorTarget,
-    theme: theme,
+    theme: fg('platform-linking-flexible-card-context') ? ui === null || ui === void 0 ? void 0 : ui.theme : theme,
     anchorRef: anchorRef
   }, overrideText));
-  const Component = getTitleBlockViewComponent(status);
+  const Component = getTitleBlockViewComponent(fg('platform-linking-flexible-card-context') ? status : statusProp);
   return /*#__PURE__*/React.createElement(Component, _extends({}, props, {
     actionGroup: actionGroup
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
@@ -108,8 +119,9 @@ const TitleBlock = ({
     hideRetry
   } : undefined, {
     icon: icon,
-    size: props.size,
-    theme: theme
+    size: fg('platform-linking-flexible-card-context') ? (_props$size = props.size) !== null && _props$size !== void 0 ? _props$size : ui === null || ui === void 0 ? void 0 : ui.size : props === null || props === void 0 ? void 0 : props.size
+  }, fg('platform-linking-flexible-card-context') ? undefined : {
+    theme
   }));
 };
 export default TitleBlock;

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

@@ -35,6 +35,14 @@ export const getChildrenOptions = (children, context) => {
   }
   return options;
 };
+const filterChildren = (children, removeBlockRestriction) => {
+  if (fg('platform-linking-flexible-card-openness')) {
+    if (removeBlockRestriction) {
+      return children;
+    }
+  }
+  return React.Children.map(children, child => /*#__PURE__*/React.isValidElement(child) && isFlexibleUiBlock(child) ? child : undefined);
+};
 const renderChildren = (children, containerSize, containerTheme, status, retry, onClick, removeBlockRestriction) => {
   return React.Children.map(children, child => {
     if ( /*#__PURE__*/React.isValidElement(child) && isFlexibleUiBlock(child)) {
@@ -333,7 +341,7 @@ const Container = ({
       "--_73mooq": ix(previewOnLeft ? gap : padding),
       "--_12k13bg": ix(previewOnRight ? gap : padding)
     }
-  }, clickableContainer ? getLayeredLink(testId, context, children, onClick) : null, renderChildren(children, size, theme, status, retry, onClick, removeBlockRestriction)) : /*#__PURE__*/React.createElement("div", {
+  }, clickableContainer ? getLayeredLink(testId, context, children, onClick) : null, fg('platform-linking-flexible-card-context') ? filterChildren(children, removeBlockRestriction) : renderChildren(children, size, theme, status, retry, onClick, removeBlockRestriction)) : /*#__PURE__*/React.createElement("div", {
     "data-smart-link-container": true,
     "data-testid": testId,
     className: ax(["_1e0c1txw _2lx21bp4 _1ul9idpf _1reo15vq _kqswh2mm _1pcmkb7n _1v7y1i6y _ufn21i6y", gapStyleMapOld[size], !hideBackground && "_bfhkhp5a", "_1yt418y6 _jb7v18y6 _y5vk167t _1yob1wow _r37x1r5k", previewOnLeft && previewOnLeftStyleMapOld[size], previewOnRight && previewOnRightStyleMapOld[size], !hideElevation && "_19ith6cr _2rkopd34 _19pkv77o _2hwxv77o _otyrv77o _18u0v77o", clickableContainer && "_nqwih2mm _18ywh2mm _1nq3h2mm _1t4ckb7n _1nxdkb7n _xnbykb7n"]),
@@ -342,7 +350,7 @@ const Container = ({
       "--_73mooq": ix(previewOnLeft ? gap : padding),
       "--_12k13bg": ix(previewOnRight ? gap : padding)
     }
-  }, clickableContainer ? getLayeredLink(testId, context, children, onClick) : null, renderChildren(children, size, theme, status, retry, onClick, removeBlockRestriction));
+  }, clickableContainer ? getLayeredLink(testId, context, children, onClick) : null, fg('platform-linking-flexible-card-context') ? filterChildren(children, removeBlockRestriction) : renderChildren(children, size, theme, status, retry, onClick, removeBlockRestriction));
   if (context !== null && context !== void 0 && context.url && (canShowHoverPreview || canShowAuthTooltip)) {
     return /*#__PURE__*/React.createElement(HoverCardControl, {
       isHoverPreview: canShowHoverPreview,

package/dist/es2019/view/FlexibleCard/components/elements/applied-to-components-count-element/index.js

@@ -1,20 +1,15 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { useContext } from 'react';
+import React from 'react';
 import { useIntl } from 'react-intl-next';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { IconType } from '../../../../../constants';
 import { messages } from '../../../../../messages';
-import { FlexibleUiContext, useFlexibleUiContext } from '../../../../../state/flexible-ui-context';
+import { useFlexibleUiContext } from '../../../../../state/flexible-ui-context';
 import { BaseBadgeElement } from '../common';
 const AppliedToComponentsCountElement = props => {
   const {
     formatMessage
   } = useIntl();
-  const context = fg('platform-linking-flexible-card-context') ?
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  useFlexibleUiContext() :
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  useContext(FlexibleUiContext);
+  const context = useFlexibleUiContext();
   if (
   // Check for null and undefined, render if it's 0.
   (context === null || context === void 0 ? void 0 : context.appliedToComponentsCount) === null || (context === null || context === void 0 ? void 0 : context.appliedToComponentsCount) === undefined) {

package/dist/es2019/view/FlexibleCard/components/elements/assigned-to-element/index.js

@@ -0,0 +1,14 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { ElementName } from '../../../../../constants';
+import { messages } from '../../../../../messages';
+import { useFlexibleUiContext } from '../../../../../state/flexible-ui-context';
+import { BaseTextElement, toFormattedTextProps } from '../common';
+const AssignedToElement = props => {
+  const context = useFlexibleUiContext();
+  const data = context ? toFormattedTextProps(messages.assigned_to, context.assignedTo) : null;
+  return data ? /*#__PURE__*/React.createElement(BaseTextElement, _extends({}, data, props, {
+    name: ElementName.AssignedTo
+  })) : null;
+};
+export default AssignedToElement;

package/dist/es2019/view/FlexibleCard/components/elements/assigned-to-group-element/index.js

@@ -0,0 +1,13 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { ElementName } from '../../../../../constants';
+import { useFlexibleUiContext } from '../../../../../state/flexible-ui-context';
+import { BaseAvatarGroupElement, toAvatarGroupProps } from '../common';
+const AssignedToGroupElement = props => {
+  const context = useFlexibleUiContext();
+  const data = context ? toAvatarGroupProps(context.assignedToGroup, true) : null;
+  return data ? /*#__PURE__*/React.createElement(BaseAvatarGroupElement, _extends({}, data, props, {
+    name: ElementName.AssignedToGroup
+  })) : null;
+};
+export default AssignedToGroupElement;

package/dist/es2019/view/FlexibleCard/components/elements/attachment-count-element/index.js

@@ -0,0 +1,16 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { ElementName, IconType } from '../../../../../constants';
+import { useFlexibleUiContext } from '../../../../../state/flexible-ui-context';
+import { BaseBadgeElement, toBadgeProps } from '../common';
+const AttachmentCountElement = props => {
+  var _context$attachmentCo;
+  const context = useFlexibleUiContext();
+  const data = context ? toBadgeProps((_context$attachmentCo = context.attachmentCount) === null || _context$attachmentCo === void 0 ? void 0 : _context$attachmentCo.toString()) : null;
+  return data ? /*#__PURE__*/React.createElement(BaseBadgeElement, _extends({
+    icon: IconType.Attachment
+  }, data, props, {
+    name: ElementName.AttachmentCount
+  })) : null;
+};
+export default AttachmentCountElement;

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

@@ -0,0 +1,13 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { ElementName } from '../../../../../constants';
+import { useFlexibleUiContext } from '../../../../../state/flexible-ui-context';
+import { BaseAvatarGroupElement, toAvatarGroupProps } from '../common';
+const AuthorGroupElement = props => {
+  const context = useFlexibleUiContext();
+  const data = context ? toAvatarGroupProps(context.authorGroup, false) : null;
+  return data ? /*#__PURE__*/React.createElement(BaseAvatarGroupElement, _extends({}, data, props, {
+    name: ElementName.AuthorGroup
+  })) : null;
+};
+export default AuthorGroupElement;

package/dist/es2019/view/FlexibleCard/components/elements/checklist-progress-element/index.js

@@ -0,0 +1,16 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { ElementName, IconType } from '../../../../../constants';
+import { useFlexibleUiContext } from '../../../../../state/flexible-ui-context';
+import { BaseBadgeElement, toBadgeProps } from '../common';
+const ChecklistProgressElement = props => {
+  var _context$checklistPro;
+  const context = useFlexibleUiContext();
+  const data = context ? toBadgeProps((_context$checklistPro = context.checklistProgress) === null || _context$checklistPro === void 0 ? void 0 : _context$checklistPro.toString()) : null;
+  return data ? /*#__PURE__*/React.createElement(BaseBadgeElement, _extends({
+    icon: IconType.CheckItem
+  }, data, props, {
+    name: ElementName.ChecklistProgress
+  })) : null;
+};
+export default ChecklistProgressElement;

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

@@ -0,0 +1,13 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { ElementName } from '../../../../../constants';
+import { useFlexibleUiContext } from '../../../../../state/flexible-ui-context';
+import { BaseAvatarGroupElement, toAvatarGroupProps } from '../common';
+const CollaboratorGroupElement = props => {
+  const context = useFlexibleUiContext();
+  const data = context ? toAvatarGroupProps(context.collaboratorGroup, false) : undefined;
+  return data ? /*#__PURE__*/React.createElement(BaseAvatarGroupElement, _extends({}, data, props, {
+    name: ElementName.CollaboratorGroup
+  })) : null;
+};
+export default CollaboratorGroupElement;

package/dist/es2019/view/FlexibleCard/components/elements/comment-count-element/index.js

@@ -0,0 +1,16 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { ElementName, IconType } from '../../../../../constants';
+import { useFlexibleUiContext } from '../../../../../state/flexible-ui-context';
+import { BaseBadgeElement, toBadgeProps } from '../common';
+const CommentCountElement = props => {
+  var _context$commentCount;
+  const context = useFlexibleUiContext();
+  const data = context ? toBadgeProps((_context$commentCount = context.commentCount) === null || _context$commentCount === void 0 ? void 0 : _context$commentCount.toString()) : null;
+  return data ? /*#__PURE__*/React.createElement(BaseBadgeElement, _extends({
+    icon: IconType.Comment
+  }, data, props, {
+    name: ElementName.CommentCount
+  })) : null;
+};
+export default CommentCountElement;

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

@@ -14,7 +14,7 @@ const badgeStyles = null;
  * @see StoryPoints
  * */
 
-const AtlaskitElementBadge = ({
+const BaseAtlaskitElementBadge = ({
   value,
   name,
   className,
@@ -34,4 +34,9 @@ const AtlaskitElementBadge = ({
     className: ax([!fg('platform-linking-visual-refresh-v1') && "_4cvr1h6o _1e0c116y", fg('platform-linking-visual-refresh-v1') && "_4cvr1h6o _1e0c116y _1ul91ns9", className])
   }), /*#__PURE__*/React.createElement(AKBadge, null, value));
 };
-export default AtlaskitElementBadge;
+export default BaseAtlaskitElementBadge;
+export const toAtlaskitBadgeProps = value => {
+  return value ? {
+    value
+  } : undefined;
+};

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

@@ -90,4 +90,11 @@ const BaseAvatarGroup = ({
     testId: testId
   }));
 };
-export default BaseAvatarGroup;
+export default BaseAvatarGroup;
+export const toAvatarGroupProps = (items, showFallbackAvatar) => {
+  return items ? {
+    items
+  } : showFallbackAvatar ? {
+    items: []
+  } : undefined;
+};

package/dist/es2019/view/FlexibleCard/components/elements/common/base-badge-element/index.js

@@ -162,4 +162,15 @@ const BaseBadgeElementCompiledNew = ({
     className: ax(["_11c8dcr7 _syaz131l _19bv1xvx _s7n4nkob"])
   }, formattedMessageOrLabel));
 };
-export default withFeatureFlaggedComponent(BaseBadgeElementCompiledNew, BaseBadgeElementRefreshNewWithOverrideCss, () => fg('platform-linking-visual-refresh-v1'));
+export default withFeatureFlaggedComponent(BaseBadgeElementCompiledNew, BaseBadgeElementRefreshNewWithOverrideCss, () => fg('platform-linking-visual-refresh-v1'));
+export const toBadgeProps = label => {
+  if (fg('platform-linking-flexible-card-elements-refactor')) {
+    // Don't render the element if its 0
+    return label !== '0' && label ? {
+      label
+    } : undefined;
+  }
+  return label ? {
+    label
+  } : undefined;
+};

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

@@ -27,7 +27,7 @@ const typeToDescriptorMap = {
 /**
  * A base element that displays an ISO Timestamp in text.
  * @internal
- * @param {BaseDateTimeProps} BaseDateTimeProps - The props necessary for the DateTime element.
+ * @param {BaseDateTimeElementProps} BaseDateTimeElementProps - The props necessary for the DateTime element.
  * @see CreatedOn
  * @see ModifiedOn
  * @see SentOn
@@ -94,4 +94,10 @@ const BaseDateTimeElement = ({
     className: ax([!fg('platform-linking-visual-refresh-v1') && "_11c8dcr7 _1reo15vq _18m915vq _syaz131l _1e0ccj1k _1bto1l2s _1nmz1hna _1yyjkb7n _sudp1e54 _102k1j6v", fg('platform-linking-visual-refresh-v1') && "_11c81o8v _1reo15vq _18m915vq _syaz1gjq _1e0ccj1k _1ul9idpf _1bto1l2s _1nmz1hna _1yyjkb7n _sudp1e54 _102k7vkz", className])
   }, content);
 };
-export default BaseDateTimeElement;
+export default BaseDateTimeElement;
+export const toDateTimeProps = (type, dateString) => {
+  return dateString ? {
+    date: new Date(dateString),
+    type
+  } : undefined;
+};

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

@@ -11,10 +11,11 @@ import { useMemo } from 'react';
 import LinkIcon from '@atlaskit/icon/core/migration/link';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Box } from '@atlaskit/primitives/compiled';
-import { SmartLinkPosition, SmartLinkSize } from '../../../../../constants';
-import AtlaskitIcon from '../../common/atlaskit-icon';
-import ImageIcon from '../../common/image-icon';
-import { getIconWidth } from '../../utils';
+import { SmartLinkPosition, SmartLinkSize } from '../../../../../../constants';
+import { isProfileType } from '../../../../../../utils';
+import AtlaskitIcon from '../../../common/atlaskit-icon';
+import ImageIcon from '../../../common/image-icon';
+import { getIconWidth } from '../../../utils';
 const styles = {
   container: "_1ul91ns9",
   iconWrapperStyle: "_1e0c1txw _4cvr1h6o _1bah1h6o"
@@ -102,4 +103,17 @@ const IconElement = ({
     }
   }, element));
 };
-export default IconElement;
+export default IconElement;
+export const toLinkIconProps = (data, type) => {
+  const isDataLinkIcon = _data => {
+    return typeof _data === 'object' && _data !== null && ('icon' in _data || 'url' in _data);
+  };
+  if (!isDataLinkIcon(data)) {
+    return typeof data === 'object' ? data : undefined;
+  }
+  const isImageRound = isProfileType(type);
+  return {
+    ...data,
+    appearance: isImageRound ? 'round' : 'square'
+  };
+};

package/dist/es2019/view/FlexibleCard/components/elements/common/base-link-element/index.js

@@ -104,4 +104,10 @@ const BaseLinkElement = ({
     className: ax(["_16jlkb7n _1o9zkb7n _i0dl1wug"])
   }, hideTooltip || text === undefined ? anchor : withTooltip(anchor, text, testId));
 };
-export default BaseLinkElement;
+export default BaseLinkElement;
+export const toLinkProps = (text, url) => {
+  return text ? {
+    text,
+    url
+  } : undefined;
+};