@atlaskit/smart-card 23.4.8 → 23.5.1

package/dist/es2019/view/CardWithUrl/component.js

@@ -52,8 +52,9 @@ export function CardWithUrlContent({
 
   if (showHoverPreview === undefined && showHoverPreviewFlag !== undefined) {
     showHoverPreview = Boolean(showHoverPreviewFlag);
-  } // Setup UI handlers.
+  }
 
+  const enableFlexibleBlockCardFlag = Boolean(useFeatureFlag('enableFlexibleBlockCard')); // Setup UI handlers.
 
   const handleClick = useCallback(event => {
     const clickUrl = getClickUrl(url, state.details);
@@ -182,7 +183,8 @@ export function CardWithUrlContent({
         onError: onError,
         testId: testId,
         showActions: showActions,
-        platform: platform
+        platform: platform,
+        enableFlexibleBlockCard: enableFlexibleBlockCardFlag
       });
 
     case 'embed':

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

@@ -1,8 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
+
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import { SmartLinkStatus } from '../../../../../constants';
-import Block from '../block';
-import { Preview } from '../../elements';
+import PreviewBlockResolvedView from './resolved';
 /**
  * Represents a PreviewBlock, which typically contains media or other large format content.
  * @public
@@ -13,17 +15,14 @@ import { Preview } from '../../elements';
 const PreviewBlock = ({
   status = SmartLinkStatus.Fallback,
   testId = 'smart-block-preview',
-  onError,
   ...blockProps
 }) => {
   if (status !== SmartLinkStatus.Resolved) {
     return null;
   }
 
-  return /*#__PURE__*/React.createElement(Block, _extends({}, blockProps, {
-    testId: `${testId}-resolved-view`
-  }), /*#__PURE__*/React.createElement(Preview, {
-    onError: onError
+  return jsx(PreviewBlockResolvedView, _extends({}, blockProps, {
+    testId: testId
   }));
 };
 

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

@@ -0,0 +1,103 @@
+import _extends from "@babel/runtime/helpers/extends";
+
+/** @jsx jsx */
+import React, { useCallback, useEffect, useState } from 'react';
+import { css, jsx } from '@emotion/react';
+import { MediaPlacement } from '../../../../../../constants';
+import Block from '../../block';
+import { Preview } from '../../../elements';
+/**
+ * Due to its placement on the left/right and ignoreContainerPadding prop
+ * rely on its parent container styling, css variables are declared in
+ * <Container /> to preset the base values for the preview block styling.
+ *
+ * `--container-padding` is the padding of the Container. This value is based
+ *   on size and hidePadding.
+ * `--container-gap-left` and `--container-gap-right` are the gap or padding of
+ *   the Container depending on whether the container has other preview blocks
+ *   with left/right positioning.
+ * `--preview-block-width` is the size of the preview image in relation to
+ *   the Container width when the placement is left/right.
+ * @param placement
+ * @param ignoreContainerPadding
+ */
+
+const getPreviewBlockStyles = (placement, ignoreContainerPadding) => {
+  if (placement === MediaPlacement.Left || placement === MediaPlacement.Right) {
+    const containerPadding = ignoreContainerPadding ? '0rem' : 'var(--container-padding)';
+    return css`
+      position: absolute;
+      top: ${containerPadding};
+      bottom: ${containerPadding};
+      width: calc(var(--preview-block-width) - ${containerPadding});
+
+      ${placement === MediaPlacement.Left ? `left: ${containerPadding};` : ''}
+      ${placement === MediaPlacement.Right ? `right: ${containerPadding};` : ''}
+
+      [data-smart-element-media='image'] {
+        aspect-ratio: unset;
+        padding-top: unset;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+    `;
+  }
+
+  if (ignoreContainerPadding) {
+    return css`
+      margin-left: calc(var(--container-gap-left) * -1);
+      margin-right: calc(var(--container-gap-right) * -1);
+      &:first-of-type {
+        margin-top: calc(var(--container-padding) * -1);
+      }
+      &:last-of-type {
+        margin-bottom: calc(var(--container-padding) * -1);
+      }
+    `;
+  }
+};
+/**
+ * Represents a resolved PreviewBlock, which typically contains media or other large format content.
+ * @public
+ * @param {PreviewBlock} PreviewBlock
+ * @see Block
+ */
+
+
+const PreviewBlockResolvedView = ({
+  ignoreContainerPadding = false,
+  onError,
+  overrideCss,
+  placement,
+  testId,
+  ...blockProps
+}) => {
+  const [styles, setStyles] = useState(overrideCss);
+  const updateStyles = useCallback(() => {
+    setStyles(css`
+      ${getPreviewBlockStyles(placement, ignoreContainerPadding)}
+      ${overrideCss}
+    `);
+  }, [ignoreContainerPadding, overrideCss, placement]);
+  useEffect(() => {
+    updateStyles();
+  }, [ignoreContainerPadding, overrideCss, placement, updateStyles]);
+  const handleOnLoad = useCallback(() => {
+    updateStyles();
+  }, [updateStyles]);
+  const handleOnError = useCallback(() => {
+    if (onError) {
+      onError();
+    }
+  }, [onError]);
+  return jsx(Block, _extends({}, blockProps, {
+    overrideCss: styles,
+    testId: `${testId}-resolved-view`
+  }), jsx(Preview, {
+    onError: handleOnError,
+    onLoad: handleOnLoad
+  }));
+};
+
+export default PreviewBlockResolvedView;

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

@@ -8,7 +8,8 @@ const ImageIcon = ({
   defaultIcon,
   testId,
   url,
-  onError
+  onError,
+  onLoad
 }) => jsx(ImageLoader, {
   src: url,
   loading: jsx(LoadingSkeleton, {
@@ -19,7 +20,8 @@ const ImageIcon = ({
     "data-testid": `${testId}-image`
   }),
   errored: defaultIcon,
-  onError: onError
+  onError: onError,
+  onLoad: onLoad
 });
 
 export default ImageIcon;

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

@@ -1,11 +1,12 @@
 /** @jsx jsx */
 import React, { useContext } from 'react';
 import { css, jsx } from '@emotion/react';
-import { SmartLinkSize, SmartLinkTheme } from '../../../../constants';
-import { isFlexibleUiBlock, isFlexibleUiTitleBlock } from '../../../../utils/flexible';
+import { MediaPlacement, SmartLinkSize, SmartLinkTheme } from '../../../../constants';
+import { isFlexibleUiBlock, isFlexibleUiPreviewBlock, isFlexibleUiTitleBlock } from '../../../../utils/flexible';
 import { tokens } from '../../../../utils/token';
 import { FlexibleUiContext } from '../../../../state/flexible-ui-context';
 import LayeredLink from './layered-link';
+import { isFlexUiPreviewPresent } from '../../../../state/flexible-ui-context/utils';
 const elevationStyles = css`
   border: 1px solid transparent;
   border-radius: 1.5px;
@@ -56,25 +57,75 @@ const clickableContainerStyles = css`
     z-index: 1;
   }
 `;
-export const getContainerStyles = (size, hideBackground, hideElevation, hidePadding, clickableContainer) => css`
-  display: flex;
-  gap: ${getGap(size)} 0;
-  flex-direction: column;
-  min-width: 0;
-  overflow-x: hidden;
-  position: relative;
-  ${hideBackground ? '' : `background-color: ${tokens.background};`}
-  ${hidePadding ? '' : `padding: ${getPadding(size)};`}
-  ${hideElevation ? '' : elevationStyles}
-  ${clickableContainer ? clickableContainerStyles : ''}
-  &:hover ~ .actions-button-group {
-    opacity: 1;
-  }
-  a:focus,
-  .has-action:focus {
-    outline-offset: -2px;
+
+const getContainerPaddingStyles = (size, hidePadding, childrenOptions) => {
+  const padding = hidePadding ? '0rem' : getPadding(size);
+  const gap = getGap(size);
+  const {
+    previewOnLeft,
+    previewOnRight
+  } = childrenOptions;
+  return css`
+    // Set variables for PreviewBlock to use.
+    --container-padding: ${padding};
+    --container-gap-left: ${previewOnLeft ? gap : padding};
+    --container-gap-right: ${previewOnRight ? gap : padding};
+    --preview-block-width: 30%;
+
+    padding: ${padding};
+    ${previewOnLeft ? `padding-left: calc(var(--preview-block-width) + ${gap});` : ''}
+    ${previewOnRight ? `padding-right: calc(var(--preview-block-width) + ${gap});` : ''}
+  `;
+};
+
+const getChildrenOptions = (children, context) => {
+  let options = {};
+
+  if (isFlexUiPreviewPresent(context)) {
+    React.Children.map(children, child => {
+      if ( /*#__PURE__*/React.isValidElement(child)) {
+        if (isFlexibleUiPreviewBlock(child)) {
+          const {
+            placement
+          } = child.props;
+
+          if (placement === MediaPlacement.Left) {
+            options.previewOnLeft = true;
+          }
+
+          if (placement === MediaPlacement.Right) {
+            options.previewOnRight = true;
+          }
+        }
+      }
+    });
   }
-`;
+
+  return options;
+};
+
+export const getContainerStyles = (size, hideBackground, hideElevation, hidePadding, clickableContainer, childrenOptions) => {
+  const paddingCss = getContainerPaddingStyles(size, hidePadding, childrenOptions);
+  return css`
+    display: flex;
+    gap: ${getGap(size)} 0;
+    flex-direction: column;
+    min-width: 0;
+    overflow-x: hidden;
+    position: relative;
+    ${hideBackground ? '' : `background-color: ${tokens.background};`}
+    ${paddingCss}
+    ${hideElevation ? '' : elevationStyles}
+    ${clickableContainer ? clickableContainerStyles : ''}
+    &:hover ~ .actions-button-group {
+      opacity: 1;
+    }
+    a:focus,
+    .has-action:focus {
+      outline-offset: -2px;
+    }
+  `;
+};
 
 const renderChildren = (children, containerSize, containerTheme, status, retry, onClick) => React.Children.map(children, child => {
   if ( /*#__PURE__*/React.isValidElement(child) && isFlexibleUiBlock(child)) {
@@ -149,8 +200,9 @@ const Container = ({
   theme = SmartLinkTheme.Link
 }) => {
   const context = useContext(FlexibleUiContext);
+  const childrenOptions = getChildrenOptions(children, context);
   return jsx("div", {
-    css: getContainerStyles(size, hideBackground, hideElevation, hidePadding, clickableContainer),
+    css: getContainerStyles(size, hideBackground, hideElevation, hidePadding, clickableContainer, childrenOptions),
     "data-smart-link-container": true,
     "data-testid": testId
   }, clickableContainer ? getLayeredLink(testId, context, children, onClick) : null, renderChildren(children, size, theme, status, retry, onClick));

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

@@ -2,10 +2,24 @@
 import React from 'react';
 import { css, jsx } from '@emotion/react';
 import AtlaskitLozenge from '@atlaskit/lozenge';
+import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
 const styles = css`
   display: inline-flex;
   line-height: inherit;
 `;
+const actionStyles = css`
+  > span > span {
+    display: inline-flex;
+    align-items: center;
+    margin-right: -2px;
+  }
+
+  svg {
+    width: unset;
+    height: unset;
+    margin: -4px 0;
+  }
+`;
 /**
  * A base element that displays a Lozenge.
  * @internal
@@ -16,6 +30,7 @@ const styles = css`
 const Lozenge = ({
   appearance = 'default',
   name,
+  onClick,
   overrideCss,
   text,
   testId = 'smart-element-lozenge'
@@ -25,15 +40,19 @@ const Lozenge = ({
   }
 
   return jsx("span", {
-    css: [styles, overrideCss],
+    css: [styles, onClick ? actionStyles : undefined, overrideCss],
     "data-fit-to-content": true,
     "data-smart-element": name,
     "data-smart-element-lozenge": true,
-    "data-testid": testId
+    "data-testid": testId,
+    onClick: onClick
   }, jsx(AtlaskitLozenge, {
     appearance: appearance,
     testId: `${testId}-lozenge`
-  }, text));
+  }, text, onClick && jsx(ChevronDownIcon, {
+    label: "action",
+    testId: `${testId}-action`
+  })));
 };
 
 export default Lozenge;

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

@@ -60,6 +60,7 @@ const Media = ({
   testId = 'smart-element-media',
   type,
   url,
+  onLoad,
   onError
 }) => {
   if (!type || !url) {
@@ -75,6 +76,7 @@ const Media = ({
     testId: `${testId}-image`,
     url: url,
     onError: onError,
+    onLoad: onLoad,
     defaultIcon: null
   }));
 };

package/dist/es2019/view/HoverCard/components/HoverCardContent.js

@@ -1,3 +1,4 @@
+import { useFeatureFlag } from '@atlaskit/link-provider';
 import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
 import { extractType } from '@atlaskit/linking-common/extractors';
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
@@ -9,7 +10,7 @@ import { isSpecialEvent } from '../../../utils';
 import FlexibleCard from '../../FlexibleCard';
 import { FooterBlock, MetadataBlock, SnippetBlock, TitleBlock } from '../../FlexibleCard/components/blocks';
 import { flexibleUiOptions, footerBlockCss, metadataBlockCss, titleBlockCss, hiddenSnippetStyles } from '../styled';
-import { getSimulatedMetadata, SMART_CARD_ANALYTICS_DISPLAY } from '../utils';
+import { toActionableMetadata, getSimulatedMetadata, SMART_CARD_ANALYTICS_DISPLAY } from '../utils';
 import HoverCardLoadingView from './HoverCardLoadingView';
 import SnippetOrPreview from './SnippetOrPreview';
 export const getOpenAction = (url, analytics, onActionClick) => ({
@@ -56,6 +57,7 @@ const HoverCardContent = ({
 }) => {
   var _cardState$details;
 
+  const showActionableElement = useFeatureFlag('enableActionableElement');
   const actions = useSmartCardActions(id, url, analytics);
   useEffect(() => {
     actions.loadMetadata();
@@ -82,13 +84,21 @@ const HoverCardContent = ({
   const titleActions = useMemo(() => [getOpenAction(url, analytics, onActionClick)], [url, analytics, onActionClick]);
   const footerActions = useMemo(() => toFooterActions(cardActions, onActionClick), [cardActions, onActionClick]);
   const data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
-  const types = data ? extractType(data) : undefined; //TODO: EDM-3224 deleted simulated and use real JsonLd
-
   const {
     primary,
     secondary,
     subtitle
-  } = extractMetadata(getSimulatedMetadata(extensionKey, types));
+  } = useMemo(() => {
+    const types = data ? extractType(data) : undefined; //TODO: EDM-3224 deleted simulated and use real JsonLd
+
+    const metadata = extractMetadata(getSimulatedMetadata(extensionKey, types));
+    const primary = showActionableElement ? toActionableMetadata(onActionClick, extensionKey, types, cardActions, metadata.primary) : metadata.primary;
+    return {
+      primary,
+      secondary: metadata.secondary,
+      subtitle: metadata.subtitle
+    };
+  }, [cardActions, data, extensionKey, onActionClick, showActionableElement]);
   const titleMaxLines = subtitle && subtitle.length > 0 ? 1 : 2;
   const snippetHeight = React.useRef(0);
   const snippetBlockRef = useRef(null);

package/dist/es2019/view/HoverCard/utils.js

@@ -77,4 +77,24 @@ export const getSimulatedMetadata = (extensionKey = '', types = []) => {
         }
       };
   }
+};
+export const toActionableMetadata = (onActionClick, extensionKey, types = [], cardActions = [], elementItems = []) => {
+  // Actionable State for Jira issue
+  if (extensionKey === 'jira-object-provider' && types !== null && types !== void 0 && types.includes('atlassian:Task')) {
+    const previewAction = cardActions.find(action => action.id === 'preview-content');
+
+    if (previewAction) {
+      return elementItems.map(elementItem => elementItem.name === ElementName.State ? { ...elementItem,
+        onClick: () => {
+          if (onActionClick) {
+            onActionClick(previewAction.id);
+          }
+
+          return previewAction.invoke();
+        }
+      } : elementItem);
+    }
+  }
+
+  return elementItems;
 };

package/dist/esm/constants.js

@@ -221,4 +221,11 @@ export var MediaType;
 
 (function (MediaType) {
   MediaType["Image"] = "image";
-})(MediaType || (MediaType = {}));
+})(MediaType || (MediaType = {}));
+
+export var MediaPlacement;
+
+(function (MediaPlacement) {
+  MediaPlacement["Left"] = "left";
+  MediaPlacement["Right"] = "right";
+})(MediaPlacement || (MediaPlacement = {}));

package/dist/esm/index.js

@@ -12,5 +12,5 @@ export { useSmartLinkEvents } from './view/SmartLinkEvents/useSmartLinkEvents';
 export { contentFooterClassName, metadataListClassName, blockCardResolvingViewClassName, blockCardResolvedViewClassName, blockCardForbiddenViewClassName, blockCardIconImageClassName, blockCardResolvedViewByClassName, blockCardForbiddenViewLinkClassName, blockCardContentClassName, blockCardContentHeaderClassName, blockCardContentHeaderNameClassName, blockCardNotFoundViewClassName, blockCardErroredViewClassName } from './classNames';
 export { loadingPlaceholderClassName } from './view/CardWithUrl/component-lazy/LazyFallback'; // Flexible UI
 
-export { ActionName, ElementName, SmartLinkDirection, SmartLinkPosition, SmartLinkSize, SmartLinkTheme } from './constants';
+export { ActionName, ElementName, MediaPlacement, SmartLinkDirection, SmartLinkPosition, SmartLinkSize, SmartLinkTheme } from './constants';
 export { MetadataBlock, PreviewBlock, SnippetBlock, TitleBlock, FooterBlock } from './view/FlexibleCard/components/blocks';

package/dist/esm/state/flexible-ui-context/utils.js

@@ -0,0 +1,7 @@
+/**
+ * Returns true if preview data is available in the FlexibleUiDataContext
+ * @param context is the FlexibleUiDataContext
+ */
+export var isFlexUiPreviewPresent = function isFlexUiPreviewPresent(context) {
+  return Boolean(context && context.preview);
+};

package/dist/esm/utils/flexible.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import * as Blocks from '../view/FlexibleCard/components/blocks';
-import { TitleBlock } from '../view/FlexibleCard/components/blocks';
+import { PreviewBlock, TitleBlock } from '../view/FlexibleCard/components/blocks';
 import * as Elements from '../view/FlexibleCard/components/elements';
 export var isFlexibleUiCard = function isFlexibleUiCard(children) {
   if (children && React.Children.toArray(children).some(function (child) {
@@ -23,4 +23,7 @@ export var isFlexibleUiElement = function isFlexibleUiElement(node) {
 };
 export var isFlexibleUiTitleBlock = function isFlexibleUiTitleBlock(node) {
   return /*#__PURE__*/React.isValidElement(node) && node.type === TitleBlock;
+};
+export var isFlexibleUiPreviewBlock = function isFlexibleUiPreviewBlock(node) {
+  return /*#__PURE__*/React.isValidElement(node) && node.type === PreviewBlock;
 };

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "23.4.8",
+	"version": "23.5.1",
 	"sideEffects": false
 }

package/dist/esm/view/BlockCard/components/flexible/footer/index.js

@@ -28,7 +28,7 @@ var providerStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplate
  * @param props are the data required for the block, such as actions to be displayed.
  */
 
-var Footer = function Footer(props) {
+var BlockCardFooter = function BlockCardFooter(props) {
   var actions = props.actions,
       _props$size = props.size,
       size = _props$size === void 0 ? SmartLinkSize.Medium : _props$size,
@@ -49,4 +49,4 @@ var Footer = function Footer(props) {
   })) : null);
 };
 
-export default Footer;
+export default BlockCardFooter;