@atlaskit/smart-card 16.2.0 → 17.0.1

package/dist/es2019/extractors/common/actions/extractPreviewAction.js

@@ -40,7 +40,7 @@ const getInvokeOpts = (key, action, source) => ({
   }
 });
 
-export const extractPreviewAction = (definitionId = 'empty-object-provider', viewProps, jsonLd, handleInvoke, handleAnalytics, testId, platform) => {
+export const extractPreviewAction = (extensionKey = 'empty-object-provider', viewProps, jsonLd, handleInvoke, handleAnalytics, testId, platform) => {
   // Extract metadata from view props & raw JSON-LD.
   const metadataFromJsonLd = getMetadataFromJsonLd(jsonLd, platform);
   const metadataFromViewProps = getMetadataFromResolvedProps(viewProps);
@@ -50,7 +50,7 @@ export const extractPreviewAction = (definitionId = 'empty-object-provider', vie
 
   if (metadataFromJsonLd.src) {
     // Build action using instrumentation hooks.
-    const key = definitionId;
+    const key = extensionKey;
     const previewAction = PreviewAction({ ...metadata,
       testId,
       onOpen: () => {

package/dist/es2019/extractors/common/byline/extractByline.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import { FormattedRelative } from 'react-intl';
+import { FormattedRelativeTime } from 'react-intl-next';
+import { selectUnit } from '@formatjs/intl-utils';
 import { extractPersonUpdatedBy } from '../person/extractPersonUpdatedBy';
 import { extractPersonCreatedBy } from '../person/extractPersonCreatedBy';
 import { extractDateCreated } from '../date/extractDateCreated';
@@ -9,15 +10,25 @@ export const extractByline = jsonLd => {
   const createdAt = extractDateCreated(jsonLd);
 
   if (updatedAt) {
+    const {
+      value,
+      unit
+    } = selectUnit(new Date(updatedAt).getTime());
     const updatedBy = extractPersonUpdatedBy(jsonLd);
-    return /*#__PURE__*/React.createElement("span", null, "Updated ", updatedBy && `by ${updatedBy.name}`, ' ', /*#__PURE__*/React.createElement(FormattedRelative, {
-      value: updatedAt
+    return /*#__PURE__*/React.createElement("span", null, "Updated ", updatedBy && `by ${updatedBy.name}`, ' ', /*#__PURE__*/React.createElement(FormattedRelativeTime, {
+      value: value,
+      unit: unit
     }));
   } else if (createdAt) {
+    const {
+      value,
+      unit
+    } = selectUnit(new Date(createdAt).getTime());
     const createdBy = extractPersonCreatedBy(jsonLd);
     const createdByPerson = extractFirstPerson(createdBy);
-    return /*#__PURE__*/React.createElement("span", null, "Created ", createdByPerson && `by ${createdByPerson.name}`, ' ', /*#__PURE__*/React.createElement(FormattedRelative, {
-      value: createdAt
+    return /*#__PURE__*/React.createElement("span", null, "Created ", createdByPerson && `by ${createdByPerson.name}`, ' ', /*#__PURE__*/React.createElement(FormattedRelativeTime, {
+      value: value,
+      unit: unit
     }));
   }
 };

package/dist/es2019/extractors/flexible/index.js

@@ -0,0 +1,14 @@
+import { extractTitle } from '../common/primitives';
+
+const extractFlexibleUiContext = response => {
+  if (!response) {
+    return undefined;
+  }
+
+  const data = response.data;
+  return {
+    title: extractTitle(data)
+  };
+};
+
+export default extractFlexibleUiContext;

package/dist/es2019/index.js

@@ -9,5 +9,5 @@ export { embedHeaderHeight } from '@atlaskit/media-ui/embeds';
 export { SmartLinkEvents } from './utils/analytics/analytics';
 export { useSmartLinkEvents } from './view/SmartLinkEvents/useSmartLinkEvents'; // Classnames for integrators
 
-export { contentFooterClassName, metadataListClassName, blockCardResolvingViewClassName, blockCardResolvedViewClassName, blockCardForbiddenViewClassName, blockCardIconImageClassName } from '@atlaskit/media-ui/classNames';
+export { contentFooterClassName, metadataListClassName, blockCardResolvingViewClassName, blockCardResolvedViewClassName, blockCardForbiddenViewClassName, blockCardIconImageClassName, blockCardResolvedViewByClassName, blockCardForbiddenViewLinkClassName, blockCardContentClassName, blockCardContentHeaderClassName, blockCardContentHeaderNameClassName, blockCardNotFoundViewClassName, blockCardErroredViewClassName } from '@atlaskit/media-ui/classNames';
 export { loadingPlaceholderClassName } from './view/CardWithUrl/component-lazy/LazyFallback';

package/dist/es2019/providers/editor/transformer.js

@@ -2,6 +2,8 @@ const isJiraRoadMap = url => url.match(/^https:\/\/.*?\/jira\/software\/(c\/)?pr
 
 const isPolarisView = url => url.match(/^https:\/\/.*?\/jira\/polaris\/projects\/[^\/]+?\/ideas\/view\/\d+$|^https:\/\/.*?\/secure\/JiraProductDiscoveryAnonymous\.jspa\?hash=\w+|^https:\/\/.*?\/jira\/polaris\/share\/\w+/);
 
+const isJwmView = url => url.match(/^https:\/\/.*?\/jira\/core\/projects\/[^\/]+?\/(timeline|calendar)\/?/);
+
 const isSlackMessage = url => url.match(/^https:\/\/.+?\.slack\.com\/archives\/[CG][A-Z0-9]+\/p[0-9]+(\?.*)?$/);
 
 export class Transformer {
@@ -34,7 +36,7 @@ export class Transformer {
   }
 
   toAdf(url, appearance) {
-    if (isJiraRoadMap(url) || isPolarisView(url)) {
+    if (isJiraRoadMap(url) || isPolarisView(url) || isJwmView(url)) {
       return this.buildEmbedAdf(url);
     } else if (isSlackMessage(url)) {
       return this.buildBlockAdf(url);

package/dist/es2019/state/actions/index.js

@@ -158,7 +158,7 @@ export const useSmartCardActions = (id, url, analytics) => {
 
     try {
       // Begin analytics instrumentation.
-      analytics.ui.actionClickedEvent(key, action.type, source); // Invoke action - either client-side or server-side.
+      analytics.ui.actionClickedEvent(id, key, action.type, source, opts.type); // Invoke action - either client-side or server-side.
 
       let response;
 

package/dist/es2019/state/analytics/ufoExperiences.js

@@ -1,19 +1,22 @@
 import { ConcurrentExperience, ExperiencePerformanceTypes, ExperienceTypes } from '@atlaskit/ufo';
+const inlineExperience = {
+  platform: {
+    component: 'smart-links'
+  },
+  type: ExperienceTypes.Experience,
+  performanceType: ExperiencePerformanceTypes.InlineResult
+};
+const renderExperience = {
+  platform: {
+    component: 'smart-links'
+  },
+  type: ExperienceTypes.Load,
+  performanceType: ExperiencePerformanceTypes.PageSegmentLoad
+};
 const ufoExperiences = {
-  'smart-link-rendered': new ConcurrentExperience('smart-link-rendered', {
-    type: ExperienceTypes.Load,
-    performanceType: ExperiencePerformanceTypes.PageSegmentLoad,
-    platform: {
-      component: 'smart-links'
-    }
-  }),
-  'smart-link-authenticated': new ConcurrentExperience('smart-link-authenticated', {
-    type: ExperienceTypes.Load,
-    performanceType: ExperiencePerformanceTypes.PageSegmentLoad,
-    platform: {
-      component: 'smart-links'
-    }
-  })
+  'smart-link-rendered': new ConcurrentExperience('smart-link-rendered', renderExperience),
+  'smart-link-authenticated': new ConcurrentExperience('smart-link-authenticated', inlineExperience),
+  'smart-link-action-invocation': new ConcurrentExperience('smart-link-action-invocation', inlineExperience)
 };
 export const startUfoExperience = (experienceName, id, properties) => {
   const experience = ufoExperiences[experienceName].getInstance(id);

package/dist/es2019/state/analytics/useSmartLinkAnalytics.js

@@ -1,12 +1,20 @@
 import { uiAuthEvent, uiAuthAlternateAccountEvent, uiCardClickedEvent, uiActionClickedEvent, uiClosedAuthEvent, uiRenderSuccessEvent, resolvedEvent, unresolvedEvent, invokeSucceededEvent, invokeFailedEvent, connectSucceededEvent, connectFailedEvent, trackAppAccountConnected, screenAuthPopupEvent, instrumentEvent } from '../../utils/analytics';
 import { useMemo } from 'react';
-import { startUfoExperience, succeedUfoExperience } from './ufoExperiences';
+import { failUfoExperience, startUfoExperience, succeedUfoExperience } from './ufoExperiences';
 export const useSmartLinkAnalytics = dispatchAnalytics => {
   const ui = useMemo(() => ({
     authEvent: (display, definitionId, extensionKey) => dispatchAnalytics(uiAuthEvent(display, definitionId, extensionKey)),
     authAlternateAccountEvent: (display, definitionId, extensionKey) => dispatchAnalytics(uiAuthAlternateAccountEvent(display, definitionId, extensionKey)),
     cardClickedEvent: (display, definitionId, extensionKey) => dispatchAnalytics(uiCardClickedEvent(display, definitionId, extensionKey)),
-    actionClickedEvent: (providerKey, actionType, display) => dispatchAnalytics(uiActionClickedEvent(providerKey, actionType, display)),
+    actionClickedEvent: (id, extensionKey, actionType, display, invokeType) => {
+      startUfoExperience('smart-link-action-invocation', id, {
+        actionType,
+        display,
+        extensionKey,
+        invokeType
+      });
+      dispatchAnalytics(uiActionClickedEvent(extensionKey, actionType, display));
+    },
     closedAuthEvent: (display, definitionId, extensionKey) => dispatchAnalytics(uiClosedAuthEvent(display, definitionId, extensionKey)),
     renderSuccessEvent: (display, id, definitionId, extensionKey) => {
       succeedUfoExperience('smart-link-rendered', id, {
@@ -23,8 +31,14 @@ export const useSmartLinkAnalytics = dispatchAnalytics => {
   const operational = useMemo(() => ({
     resolvedEvent: (id, definitionId, extensionKey, resourceType) => dispatchAnalytics(resolvedEvent(id, definitionId, extensionKey, resourceType)),
     unresolvedEvent: (id, status, definitionId, extensionKey, resourceType) => dispatchAnalytics(unresolvedEvent(id, status, definitionId, extensionKey, resourceType)),
-    invokeSucceededEvent: (id, providerKey, actionType, display) => dispatchAnalytics(invokeSucceededEvent(id, providerKey, actionType, display)),
-    invokeFailedEvent: (id, providerKey, actionType, display, reason) => dispatchAnalytics(invokeFailedEvent(id, providerKey, actionType, display, reason)),
+    invokeSucceededEvent: (id, providerKey, actionType, display) => {
+      succeedUfoExperience('smart-link-action-invocation', id);
+      dispatchAnalytics(invokeSucceededEvent(id, providerKey, actionType, display));
+    },
+    invokeFailedEvent: (id, providerKey, actionType, display, reason) => {
+      failUfoExperience('smart-link-action-invocation', id);
+      dispatchAnalytics(invokeFailedEvent(id, providerKey, actionType, display, reason));
+    },
     connectSucceededEvent: (id, definitionId, extensionKey) => {
       startUfoExperience('smart-link-authenticated', id, {
         extensionKey,

package/dist/es2019/state/flexible-ui-context/index.js

@@ -0,0 +1,3 @@
+import { useContext, createContext } from 'react';
+export const FlexibleUiContext = /*#__PURE__*/createContext(undefined);
+export const useFlexibleUiContext = () => useContext(FlexibleUiContext);

package/dist/es2019/state/flexible-ui-context/types.js

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

package/dist/es2019/utils/analytics/analytics.js

@@ -69,7 +69,7 @@ export const unresolvedEvent = (id, status, definitionId, extensionKey, resource
     } : undefined
   }
 });
-export const invokeSucceededEvent = (id, providerKey, actionType, display) => {
+export const invokeSucceededEvent = (id, extensionKey, actionType, display) => {
   const measure = getMeasure(id, 'resolved') || {
     duration: undefined
   };
@@ -81,12 +81,12 @@ export const invokeSucceededEvent = (id, providerKey, actionType, display) => {
       id,
       actionType,
       display,
-      definitionId: providerKey,
+      extensionKey,
       duration: measure.duration
     }
   };
 };
-export const invokeFailedEvent = (id, providerKey, actionType, display, reason) => {
+export const invokeFailedEvent = (id, extensionKey, actionType, display, reason) => {
   const measure = getMeasure(id, 'errored') || {
     duration: undefined
   };
@@ -98,7 +98,7 @@ export const invokeFailedEvent = (id, providerKey, actionType, display, reason)
       id,
       actionType,
       display,
-      definitionId: providerKey,
+      extensionKey,
       duration: measure.duration,
       reason
     }
@@ -179,13 +179,13 @@ export const uiCardClickedEvent = (display, definitionId, extensionKey) => ({
     display
   }
 });
-export const uiActionClickedEvent = (providerKey, actionType, display) => ({
+export const uiActionClickedEvent = (extensionKey, actionType, display) => ({
   action: 'clicked',
   actionSubject: 'smartLinkAction',
   eventType: 'ui',
   attributes: { ...context,
     display,
-    definitionId: providerKey,
+    extensionKey,
     actionType: actionType
   }
 });

package/dist/es2019/version.json

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

package/dist/es2019/view/BlockCard/index.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { CardLinkView, BlockCardResolvingView, BlockCardErroredView, BlockCardUnauthorisedView, BlockCardForbiddenView, BlockCardResolvedView, BlockCardNotFoundView, AuthorizeAction, ForbiddenAction } from '@atlaskit/media-ui';
-import { getDefinitionId } from '../../state/helpers';
+import { getExtensionKey } from '../../state/helpers';
 import { extractBlockProps } from '../../extractors/block';
 import { getEmptyJsonLd, getUnauthorizedJsonLd } from '../../utils/jsonld';
 import { extractRequestAccessContext } from '../../extractors/common/context';
@@ -31,7 +31,7 @@ export const BlockCard = ({
   const extractorOpts = {
     handleAnalytics: handlePreviewAnalytics,
     handleInvoke,
-    definitionId: getDefinitionId(details)
+    extensionKey: getExtensionKey(details)
   };
 
   switch (status) {

package/dist/es2019/view/Card/index.js

@@ -4,12 +4,18 @@ import { CardWithDataRenderer } from '../CardWithData/loader';
 import { CardWithURLRenderer } from '../CardWithUrl/loader';
 import { isCardWithData } from '../../utils';
 import { context } from '../../utils/analytics';
+import { injectIntl, IntlProvider } from 'react-intl-next';
 
 class PlainCard extends React.PureComponent {
   render() {
-    return isCardWithData(this.props) ? /*#__PURE__*/React.createElement(CardWithDataRenderer, this.props) : /*#__PURE__*/React.createElement(CardWithURLRenderer, this.props);
+    const content = isCardWithData(this.props) ? /*#__PURE__*/React.createElement(CardWithDataRenderer, this.props) : /*#__PURE__*/React.createElement(CardWithURLRenderer, this.props);
+    return this.props.intl ? content : /*#__PURE__*/React.createElement(IntlProvider, {
+      locale: "en"
+    }, content);
   }
 
 }
 
-export const Card = withAnalyticsContext(context)(withAnalyticsEvents()(PlainCard));
+export const Card = withAnalyticsContext(context)(withAnalyticsEvents()(injectIntl(PlainCard, {
+  enforceContext: false
+})));

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

@@ -1,4 +1,4 @@
-import React, { lazy, useEffect, useState, Suspense } from 'react';
+import React, { lazy, useEffect, useState, Suspense, useCallback } from 'react';
 import uuid from 'uuid';
 import { CardLinkView } from '@atlaskit/media-ui';
 import { uiRenderFailedEvent, fireSmartLinkEvent } from '../../utils/analytics';
@@ -22,8 +22,35 @@ export function CardWithURLRenderer(props) {
       clearMeasures(id);
     };
   }, [id]);
+  const {
+    url,
+    appearance,
+    isSelected,
+    isFrameVisible,
+    onClick,
+    container,
+    onResolve,
+    testId,
+    showActions,
+    inheritDimensions,
+    platform,
+    embedIframeRef,
+    inlinePreloaderStyle,
+    createAnalyticsEvent
+  } = props; // Wrapper around analytics.
 
-  const logError = (error, info) => {
+  const dispatchAnalytics = useCallback(analyticsPayload => {
+    if (analyticsPayload && analyticsPayload.attributes) {
+      // Update if we haven't already set the display - possible
+      // in the case of `preview` which is rendered differently.
+      if (!analyticsPayload.attributes.display) {
+        analyticsPayload.attributes.display = appearance;
+      }
+    }
+
+    fireSmartLinkEvent(analyticsPayload, createAnalyticsEvent);
+  }, [appearance, createAnalyticsEvent]);
+  const logError = useCallback((error, info) => {
     const {
       componentStack
     } = info; // NB: APIErrors are thrown in response to Object Resolver Service.
@@ -43,41 +70,7 @@ export function CardWithURLRenderer(props) {
       failUfoExperience('smart-link-authenticated', id);
       dispatchAnalytics(uiRenderFailedEvent(appearance, error, errorInfo));
     }
-  }; // Wrapper around analytics.
-
-
-  const dispatchAnalytics = analyticsPayload => {
-    const {
-      appearance,
-      createAnalyticsEvent
-    } = props;
-
-    if (analyticsPayload && analyticsPayload.attributes) {
-      // Update if we haven't already set the display - possible
-      // in the case of `preview` which is rendered differently.
-      if (!analyticsPayload.attributes.display) {
-        analyticsPayload.attributes.display = appearance;
-      }
-    }
-
-    fireSmartLinkEvent(analyticsPayload, createAnalyticsEvent);
-  };
-
-  const {
-    url,
-    appearance,
-    isSelected,
-    isFrameVisible,
-    onClick,
-    container,
-    onResolve,
-    testId,
-    showActions,
-    inheritDimensions,
-    platform,
-    embedIframeRef,
-    inlinePreloaderStyle
-  } = props;
+  }, [appearance, dispatchAnalytics, id]);
 
   if (!url) {
     throw new Error('@atlaskit/smart-card: url property is missing.');

package/dist/es2019/view/EmbedCard/index.js

@@ -6,7 +6,7 @@ import { extractEmbedProps } from '../../extractors/embed';
 import { getEmptyJsonLd, getUnauthorizedJsonLd } from '../../utils/jsonld';
 import { extractInlineProps } from '../../extractors/inline';
 import { extractBlockProps } from '../../extractors/block';
-import { getDefinitionId } from '../../state/helpers';
+import { getExtensionKey } from '../../state/helpers';
 import { extractRequestAccessContext } from '../../extractors/common/context';
 export const EmbedCard = /*#__PURE__*/React.forwardRef(({
   url,
@@ -75,7 +75,7 @@ export const EmbedCard = /*#__PURE__*/React.forwardRef(({
         const resolvedBlockViewProps = extractBlockProps(data, meta, {
           handleAnalytics,
           handleInvoke,
-          definitionId: getDefinitionId(details)
+          extensionKey: getExtensionKey(details)
         });
         return /*#__PURE__*/React.createElement(BlockCardResolvedView, _extends({}, resolvedBlockViewProps, {
           isSelected: isSelected,

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

@@ -0,0 +1,62 @@
+/** @jsx jsx */
+import React from 'react';
+import { css, jsx } from '@emotion/core';
+import { SmartLinkDirection, SmartLinkSize } from '../../../../../constants';
+
+const getDirectionStyles = direction => {
+  switch (direction) {
+    case SmartLinkDirection.Vertical:
+      return {
+        flexDirection: 'column',
+        alignItems: 'flex-start'
+      };
+
+    case SmartLinkDirection.Horizontal:
+    default:
+      return {
+        flexDirection: 'row',
+        alignItems: '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 getBlockStyles = (direction, size) => css({
+  display: 'flex',
+  gap: getGapSize(size),
+  lineHeight: '1rem',
+  minWidth: 0,
+  ...getDirectionStyles(direction),
+  '& > *': {
+    minWidth: 0
+  }
+});
+
+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
+}, children);
+
+export default Block;

package/dist/es2019/view/FlexibleCard/components/blocks/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 { N0, N40A, N50A } from '@atlaskit/theme/colors';
+import { css, jsx } from '@emotion/core';
+import { SmartLinkSize } from '../../../../constants';
+import { token } from '@atlaskit/tokens';
+
+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 => {
+  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 getPaddingSize = 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) => {
+  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
+  });
+};
+
+const renderChildren = (children, containerSize) => React.Children.map(children, child => {
+  if ( /*#__PURE__*/React.isValidElement(child)) {
+    const {
+      size: blockSize
+    } = child.props;
+    return /*#__PURE__*/React.cloneElement(child, {
+      size: blockSize || containerSize
+    });
+  }
+
+  return child;
+});
+
+const Container = ({
+  children,
+  hideBackground = false,
+  hideElevation = false,
+  hidePadding = false,
+  size = SmartLinkSize.Medium,
+  testId = 'smart-links-container'
+}) => jsx("div", {
+  css: getContainerStyles(size, hideBackground, hideElevation, hidePadding),
+  "data-smart-link-container": true,
+  "data-testid": testId
+}, renderChildren(children, size));
+
+export default Container;

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

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