@atlaskit/smart-card 19.1.17 → 19.1.18

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/smart-card
 
+## 19.1.18
+
+### Patch Changes
+
+- [`b26dd70a1e6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b26dd70a1e6) - This PR adds the ability for an integrator to provide a string via `placeholder` which will be displayed instead of the url while the CardWithURLContent component is not mounted (i.e. not currently being observed). This should help with performance use cases where some text is required to be displayed before the full Smart Link component is rendered.
+
+  Usage:
+
+  ```Typescript
+  // This will render the string "spaghetti" before the Smart Link is loaded.
+  <Card url={url} appearance='inline' placeholder='spaghetti'/>
+  ```
+
 ## 19.1.17
 
 ### Patch Changes

package/dist/cjs/version.json

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

package/dist/cjs/view/CardWithUrl/component-lazy/LazyFallback.js

@@ -16,14 +16,16 @@ exports.loadingPlaceholderClassName = loadingPlaceholderClassName;
 
 var LoadingCardLink = function LoadingCardLink(_ref) {
   var isSelected = _ref.isSelected,
-      url = _ref.url;
+      url = _ref.url,
+      placeholder = _ref.placeholder;
   return /*#__PURE__*/_react.default.createElement(_LinkView.CardLinkView, {
     key: 'lazy-render-key',
     testId: 'lazy-render-placeholder',
     "data-trello-do-not-use-override": "lazy-render-placeholder-trello",
     isSelected: isSelected,
     link: url,
-    className: loadingPlaceholderClassName
+    className: loadingPlaceholderClassName,
+    placeholder: placeholder
   });
 };
 

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

@@ -66,7 +66,8 @@ function CardWithURLRenderer(props) {
       children = props.children,
       ui = props.ui,
       showHoverPreview = props.showHoverPreview,
-      analyticsEvents = props.analyticsEvents; // Wrapper around analytics.
+      analyticsEvents = props.analyticsEvents,
+      placeholder = props.placeholder; // Wrapper around analytics.
 
   var dispatchAnalytics = (0, _react.useCallback)(function (analyticsPayload) {
     if (analyticsPayload && analyticsPayload.attributes) {
@@ -124,7 +125,8 @@ function CardWithURLRenderer(props) {
     inlinePreloaderStyle: inlinePreloaderStyle,
     ui: ui,
     showHoverPreview: showHoverPreview,
-    analyticsEvents: analyticsEvents
+    analyticsEvents: analyticsEvents,
+    placeholder: placeholder
   };
   return /*#__PURE__*/_react.default.createElement(_reactErrorBoundary.ErrorBoundary, {
     FallbackComponent: ErrorFallback,

package/dist/cjs/view/LinkView/index.js

@@ -42,7 +42,7 @@ var CardLinkView = /*#__PURE__*/function (_React$PureComponent) {
     value: function render() {
       return /*#__PURE__*/_react.default.createElement(_Frame.Frame, (0, _extends2.default)({
         withoutBackground: true
-      }, this.props), this.props.link);
+      }, this.props), this.props.placeholder || this.props.link);
     }
   }]);
   return CardLinkView;

package/dist/es2019/version.json

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

package/dist/es2019/view/CardWithUrl/component-lazy/LazyFallback.js

@@ -3,12 +3,16 @@ import { CardLinkView } from '../../../view/LinkView';
 export const loadingPlaceholderClassName = 'smart-link-loading-placeholder';
 export const LoadingCardLink = ({
   isSelected,
-  url
-}) => /*#__PURE__*/React.createElement(CardLinkView, {
-  key: 'lazy-render-key',
-  testId: 'lazy-render-placeholder',
-  "data-trello-do-not-use-override": "lazy-render-placeholder-trello",
-  isSelected: isSelected,
-  link: url,
-  className: loadingPlaceholderClassName
-});
+  url,
+  placeholder
+}) => {
+  return /*#__PURE__*/React.createElement(CardLinkView, {
+    key: 'lazy-render-key',
+    testId: 'lazy-render-placeholder',
+    "data-trello-do-not-use-override": "lazy-render-placeholder-trello",
+    isSelected: isSelected,
+    link: url,
+    className: loadingPlaceholderClassName,
+    placeholder: placeholder
+  });
+};

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

@@ -35,7 +35,8 @@ export function CardWithURLRenderer(props) {
     children,
     ui,
     showHoverPreview,
-    analyticsEvents
+    analyticsEvents,
+    placeholder
   } = props; // Wrapper around analytics.
 
   const dispatchAnalytics = useCallback(analyticsPayload => {
@@ -96,7 +97,8 @@ export function CardWithURLRenderer(props) {
     inlinePreloaderStyle,
     ui,
     showHoverPreview,
-    analyticsEvents
+    analyticsEvents,
+    placeholder
   };
   return /*#__PURE__*/React.createElement(ErrorBoundary, {
     FallbackComponent: ErrorFallback,

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

@@ -5,7 +5,7 @@ export class CardLinkView extends React.PureComponent {
   render() {
     return /*#__PURE__*/React.createElement(Frame, _extends({
       withoutBackground: true
-    }, this.props), this.props.link);
+    }, this.props), this.props.placeholder || this.props.link);
   }
 
 }

package/dist/esm/version.json

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

package/dist/esm/view/CardWithUrl/component-lazy/LazyFallback.js

@@ -3,13 +3,15 @@ import { CardLinkView } from '../../../view/LinkView';
 export var loadingPlaceholderClassName = 'smart-link-loading-placeholder';
 export var LoadingCardLink = function LoadingCardLink(_ref) {
   var isSelected = _ref.isSelected,
-      url = _ref.url;
+      url = _ref.url,
+      placeholder = _ref.placeholder;
   return /*#__PURE__*/React.createElement(CardLinkView, {
     key: 'lazy-render-key',
     testId: 'lazy-render-placeholder',
     "data-trello-do-not-use-override": "lazy-render-placeholder-trello",
     isSelected: isSelected,
     link: url,
-    className: loadingPlaceholderClassName
+    className: loadingPlaceholderClassName,
+    placeholder: placeholder
   });
 };

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

@@ -42,7 +42,8 @@ export function CardWithURLRenderer(props) {
       children = props.children,
       ui = props.ui,
       showHoverPreview = props.showHoverPreview,
-      analyticsEvents = props.analyticsEvents; // Wrapper around analytics.
+      analyticsEvents = props.analyticsEvents,
+      placeholder = props.placeholder; // Wrapper around analytics.
 
   var dispatchAnalytics = useCallback(function (analyticsPayload) {
     if (analyticsPayload && analyticsPayload.attributes) {
@@ -100,7 +101,8 @@ export function CardWithURLRenderer(props) {
     inlinePreloaderStyle: inlinePreloaderStyle,
     ui: ui,
     showHoverPreview: showHoverPreview,
-    analyticsEvents: analyticsEvents
+    analyticsEvents: analyticsEvents,
+    placeholder: placeholder
   };
   return /*#__PURE__*/React.createElement(ErrorBoundary, {
     FallbackComponent: ErrorFallback,

package/dist/esm/view/LinkView/index.js

@@ -27,7 +27,7 @@ export var CardLinkView = /*#__PURE__*/function (_React$PureComponent) {
     value: function render() {
       return /*#__PURE__*/React.createElement(Frame, _extends({
         withoutBackground: true
-      }, this.props), this.props.link);
+      }, this.props), this.props.placeholder || this.props.link);
     }
   }]);
 

package/dist/types/view/Card/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { CardAppearance, CardPlatform, CardProps } from './types';
 import { WrappedComponentProps } from 'react-intl-next';
-export declare const Card: React.ForwardRefExoticComponent<Pick<Omit<React.PropsWithChildren<import("react-intl-next").WithIntlProps<CardProps & WrappedComponentProps<"intl">>>, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "children" | "data" | "appearance" | "testId" | "isSelected" | "inheritDimensions" | "id" | "onClick" | "analyticsContext" | "key" | "url" | "ui" | "showActions" | "onResolve" | "platform" | "isFrameVisible" | "embedIframeRef" | "showHoverPreview" | "inlinePreloaderStyle" | "importer" | "container" | "analyticsEvents" | "forwardedRef"> & React.RefAttributes<any>>;
+export declare const Card: React.ForwardRefExoticComponent<Pick<Omit<React.PropsWithChildren<import("react-intl-next").WithIntlProps<CardProps & WrappedComponentProps<"intl">>>, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "children" | "data" | "appearance" | "testId" | "isSelected" | "inheritDimensions" | "id" | "placeholder" | "onClick" | "analyticsContext" | "key" | "url" | "ui" | "showActions" | "onResolve" | "platform" | "isFrameVisible" | "embedIframeRef" | "showHoverPreview" | "inlinePreloaderStyle" | "importer" | "container" | "analyticsEvents" | "forwardedRef"> & React.RefAttributes<any>>;
 export type { CardAppearance, CardProps, CardPlatform };

package/dist/types/view/Card/types.d.ts

@@ -32,4 +32,5 @@ export interface CardProps extends WithAnalyticsEventsProps {
     children?: React.ReactNode;
     showHoverPreview?: boolean;
     analyticsEvents?: AnalyticsFacade;
+    placeholder?: string;
 }

package/dist/types/view/CardWithUrl/types.d.ts

@@ -24,4 +24,5 @@ export declare type CardWithUrlContentProps = {
     children?: React.ReactNode;
     showHoverPreview?: boolean;
     analyticsEvents?: AnalyticsFacade;
+    placeholder?: string;
 };

package/dist/types/view/LinkView/index.d.ts

@@ -1,5 +1,8 @@
 import React from 'react';
 import { FrameViewProps } from '../InlineCard/Frame';
-export declare class CardLinkView extends React.PureComponent<FrameViewProps> {
+export interface CardLinkViewProps extends FrameViewProps {
+    placeholder?: string;
+}
+export declare class CardLinkView extends React.PureComponent<CardLinkViewProps> {
     render(): JSX.Element;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "19.1.17",
+  "version": "19.1.18",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"