@atlaskit/smart-card 23.4.1 → 23.4.3

package/dist/cjs/view/FlexibleCard/utils.js

@@ -23,6 +23,8 @@ var _utils = require("../../utils");
 
 var _extractors = require("@atlaskit/linking-common/extractors");
 
+var _extractProviderIcon = _interopRequireDefault(require("../../extractors/flexible/icon/extract-provider-icon"));
+
 var getContextByStatus = function getContextByStatus(url, status, details, renderers) {
   switch (status) {
     case _constants.SmartLinkStatus.Pending:
@@ -42,10 +44,12 @@ var getContextByStatus = function getContextByStatus(url, status, details, rende
     case _constants.SmartLinkStatus.Fallback:
     default:
       var linkIcon = (0, _icon.extractErrorIcon)(details, status);
+      var provider = (0, _extractProviderIcon.default)(details === null || details === void 0 ? void 0 : details.data);
       return {
         linkIcon: linkIcon,
         title: url,
-        url: url
+        url: url,
+        provider: provider
       };
   }
 };

package/dist/es2019/version.json

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

package/dist/es2019/view/BlockCard/actions/flexible/AuthorizeAction.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import { ActionName } from '../../../../constants';
+import { messages } from '../../../../messages';
+/**
+ * Returns a CustomActionItem with a "Connect" default message
+ *
+ * @see CustomActionItem
+ * @param onAuthorize a function that will be called on the click of the button
+ */
+
+export const AuthorizeAction = onAuthorize => ({
+  name: ActionName.CustomAction,
+  content: /*#__PURE__*/React.createElement(FormattedMessage, messages.connect_link_account_card),
+  onClick: onAuthorize
+});

package/dist/es2019/view/BlockCard/actions/flexible/ForbiddenAction.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import { ActionName } from '../../../../constants';
+import { messages } from '../../../../messages';
+/**
+ * Returns a CustomActionItem with a "Try Another Account" default message
+ *
+ * @see CustomActionItem
+ * @param onAuthorize a function that will be called on the click of the button
+ */
+
+export const ForbiddenAction = onAuthorize => ({
+  name: ActionName.CustomAction,
+  content: /*#__PURE__*/React.createElement(FormattedMessage, messages.try_another_account),
+  onClick: onAuthorize
+});

package/dist/es2019/view/BlockCard/actions/flexible/RetryAction.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import { ActionName } from '../../../../constants';
+import { messages } from '../../../../messages';
+/**
+ * Returns a CustomActionItem with a "Retry" default message
+ *
+ * @see CustomActionItem
+ * @param onRetry a function that will be called on the click of the "Retry" button
+ */
+
+export const RetryAction = onRetry => ({
+  name: ActionName.CustomAction,
+  onClick: onRetry,
+  content: /*#__PURE__*/React.createElement(FormattedMessage, messages.try_again)
+});

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

@@ -0,0 +1,56 @@
+import React from 'react';
+import { css } from '@emotion/react';
+import { Provider } from '../../../../FlexibleCard/components/elements';
+import ElementGroup from '../../../../FlexibleCard/components/blocks/element-group';
+import { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize, SmartLinkWidth } from '../../../../../constants';
+import ActionGroup from '../../../../FlexibleCard/components/blocks/action-group';
+
+const getActionGroupStyles = size => {
+  if (size === SmartLinkSize.XLarge) {
+    // The biggest height of the action button exceeds the max line-height
+    // of the elements causing the action on the block with x-large size to
+    // get cut at the bottom.
+    return css`
+      max-height: 2rem;
+    `;
+  }
+};
+
+const providerStyles = css`
+  span:first-child {
+    margin-right: 0.375rem;
+  }
+`;
+/**
+ * This Components is a footer that is used in a Block Card with Flexible UI.
+ * It contains a provider icon if provider is present and an actions list if one is passed.
+ * To be shown as a part of Flexible UI, needs to be wrapped inside of a CustomBlock
+ *
+ * @see CustomBlock
+ * @param props are the data required for the block, such as actions to be displayed.
+ */
+
+const Footer = props => {
+  const {
+    actions,
+    size = SmartLinkSize.Medium,
+    testId = 'smart-block-card-footer'
+  } = props;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": testId
+  }, /*#__PURE__*/React.createElement(Provider, {
+    testId: `${testId}-provider`,
+    overrideCss: providerStyles
+  }), actions && actions.length > 0 ? /*#__PURE__*/React.createElement(ElementGroup, {
+    testId: "smart-element-group-actions",
+    align: SmartLinkAlignment.Right,
+    direction: SmartLinkDirection.Horizontal,
+    overrideCss: getActionGroupStyles(size),
+    width: SmartLinkWidth.Flexible
+  }, /*#__PURE__*/React.createElement(ActionGroup, {
+    items: actions,
+    appearance: "default"
+  })) : null);
+};
+
+export default Footer;

package/dist/es2019/view/BlockCard/views/flexible/FlexibleErroredView.js

@@ -0,0 +1,55 @@
+import React, { useMemo } from 'react';
+import FlexibleCard from '../../../FlexibleCard';
+import TitleBlock from '../../../FlexibleCard/components/blocks/title-block';
+import { messages } from '../../../../messages';
+import { token } from '@atlaskit/tokens';
+import { R300 } from '@atlaskit/theme/colors';
+import WarningIcon from '@atlaskit/icon/glyph/warning';
+import Footer from '../../components/flexible/footer';
+import { RetryAction } from '../../actions/flexible/RetryAction';
+import { CustomBlock } from '../../../FlexibleCard/components/blocks';
+import Text from '../../../FlexibleCard/components/elements/text';
+
+/**
+ * This view represents a Block Card with an 'Errored' status.
+ *
+ * @see SmartLinkStatus
+ * @see FlexibleCardProps
+ */
+const FlexibleErroredView = ({
+  cardState,
+  onAuthorize,
+  onError,
+  ui,
+  url,
+  onClick,
+  testId = 'smart-block-errored-view'
+}) => {
+  const status = cardState.status;
+  const actions = useMemo(() => onAuthorize ? [RetryAction(onAuthorize)] : [], [onAuthorize]);
+  return /*#__PURE__*/React.createElement(FlexibleCard, {
+    cardState: cardState,
+    onAuthorize: onAuthorize,
+    onClick: onClick,
+    onError: onError,
+    testId: testId,
+    ui: ui,
+    url: url
+  }, /*#__PURE__*/React.createElement(TitleBlock, {
+    hideRetry: true
+  }), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(WarningIcon, {
+    label: "errored-warning-icon",
+    size: "small",
+    primaryColor: token('color.icon.warning', R300),
+    testId: `${testId}-warning-icon`
+  }), /*#__PURE__*/React.createElement(Text, {
+    message: {
+      descriptor: messages.could_not_load_link
+    }
+  })), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(Footer, {
+    actions: actions,
+    status: status
+  })));
+};
+
+export default FlexibleErroredView;

package/dist/es2019/view/BlockCard/views/flexible/FlexibleForbiddenView.js

@@ -0,0 +1,57 @@
+import React, { useMemo } from 'react';
+import FlexibleCard from '../../../FlexibleCard';
+import TitleBlock from '../../../FlexibleCard/components/blocks/title-block';
+import { CustomBlock } from '../../../FlexibleCard/components/blocks';
+import { token } from '@atlaskit/tokens';
+import { R300 } from '@atlaskit/theme/colors';
+import { messages } from '../../../../messages';
+import LockIcon from '@atlaskit/icon/glyph/lock-filled';
+import Footer from '../../components/flexible/footer';
+import { ForbiddenAction } from '../../actions/flexible/ForbiddenAction';
+import Text from '../../../FlexibleCard/components/elements/text';
+
+/**
+ * This view represent a Block Card with the 'Forbidden' status.
+ * It should have a "Try another account" button that will allow a user to connect another account and view the block card.
+ *
+ * @see SmartLinkStatus
+ * @see FlexibleCardProps
+ */
+const FlexibleForbiddenView = ({
+  cardState,
+  onAuthorize,
+  onClick,
+  onError,
+  testId = 'smart-block-forbidden-view',
+  ui,
+  url
+}) => {
+  const status = cardState.status;
+  const actions = useMemo(() => onAuthorize ? [ForbiddenAction(onAuthorize)] : [], [onAuthorize]);
+  return /*#__PURE__*/React.createElement(FlexibleCard, {
+    appearance: "block",
+    cardState: cardState,
+    onAuthorize: onAuthorize,
+    onClick: onClick,
+    onError: onError,
+    testId: testId,
+    ui: ui,
+    url: url
+  }, /*#__PURE__*/React.createElement(TitleBlock, {
+    hideRetry: true
+  }), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(LockIcon, {
+    label: "forbidden-lock-icon",
+    size: "small",
+    primaryColor: token('color.icon.danger', R300),
+    testId: `${testId}-lock-icon`
+  }), /*#__PURE__*/React.createElement(Text, {
+    message: {
+      descriptor: messages.invalid_permissions_description
+    }
+  })), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(Footer, {
+    actions: actions,
+    status: status
+  })));
+};
+
+export default FlexibleForbiddenView;

package/dist/es2019/view/BlockCard/views/flexible/FlexibleNotFoundView.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import FlexibleCard from '../../../FlexibleCard';
+import TitleBlock from '../../../FlexibleCard/components/blocks/title-block';
+import { messages } from '../../../../messages';
+import WarningIcon from '@atlaskit/icon/glyph/warning';
+import { token } from '@atlaskit/tokens';
+import { R300 } from '@atlaskit/theme/colors';
+import Footer from '../../components/flexible/footer';
+import Text from '../../../FlexibleCard/components/elements/text';
+import { CustomBlock } from '../../../FlexibleCard/components/blocks';
+
+/**
+ * This view represents a Block Card with a 'Not_Found' status.
+ *
+ * @see SmartLinkStatus
+ * @see FlexibleCardProps
+ */
+const FlexibleNotFoundView = ({
+  cardState,
+  onAuthorize,
+  onError,
+  ui,
+  url,
+  onClick,
+  testId = 'smart-block-not-found-view'
+}) => {
+  const status = cardState.status;
+  return /*#__PURE__*/React.createElement(FlexibleCard, {
+    appearance: "block",
+    cardState: cardState,
+    onAuthorize: onAuthorize,
+    onClick: onClick,
+    onError: onError,
+    testId: testId,
+    ui: ui,
+    url: url
+  }, /*#__PURE__*/React.createElement(TitleBlock, {
+    hideRetry: true
+  }), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(WarningIcon, {
+    label: "not-found-warning-icon",
+    size: "small",
+    primaryColor: token('color.icon.warning', R300),
+    testId: `${testId}-warning-icon`
+  }), /*#__PURE__*/React.createElement(Text, {
+    message: {
+      descriptor: messages.not_found_description
+    },
+    testId: testId
+  })), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(Footer, {
+    status: status
+  })));
+};
+
+export default FlexibleNotFoundView;

package/dist/es2019/view/BlockCard/views/flexible/FlexibleUnauthorisedView.js

@@ -0,0 +1,53 @@
+import React, { useMemo } from 'react';
+import FlexibleCard from '../../../FlexibleCard';
+import TitleBlock from '../../../FlexibleCard/components/blocks/title-block';
+import { messages } from '../../../../messages';
+import Text from '../../../FlexibleCard/components/elements/text';
+import { AuthorizeAction } from '../../actions/flexible/AuthorizeAction';
+import Footer from '../../components/flexible/footer';
+import { CustomBlock } from '../../../FlexibleCard/components/blocks';
+
+/**
+ * This view represents a Block card that has an 'Unauthorized' status .
+ * It should have a "Connect" button that will allow a user to connect their account and view the block card.
+ *
+ * @see SmartLinkStatus
+ * @see UnauthorisedViewProps
+ */
+const FlexibleUnauthorisedView = ({
+  cardState,
+  providerName = '',
+  onAuthorize,
+  onClick,
+  onError,
+  testId = 'smart-block-unauthorized-view',
+  ui,
+  url
+}) => {
+  const status = cardState.status;
+  const actions = useMemo(() => onAuthorize ? [AuthorizeAction(onAuthorize)] : [], [onAuthorize]);
+  return /*#__PURE__*/React.createElement(FlexibleCard, {
+    appearance: "block",
+    cardState: cardState,
+    onAuthorize: onAuthorize,
+    onClick: onClick,
+    onError: onError,
+    testId: testId,
+    ui: ui,
+    url: url
+  }, /*#__PURE__*/React.createElement(TitleBlock, {
+    hideRetry: true
+  }), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(Text, {
+    message: {
+      descriptor: messages.connect_link_account_card_description,
+      values: {
+        context: providerName
+      }
+    }
+  })), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(Footer, {
+    actions: actions,
+    status: status
+  })));
+};
+
+export default FlexibleUnauthorisedView;

package/dist/es2019/view/BlockCard/views/flexible/types.js

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

package/dist/es2019/view/EmbedCard/components/ExpandedFrame.js

@@ -14,7 +14,8 @@ export const ExpandedFrame = ({
   minWidth,
   maxWidth,
   testId = 'expanded-frame',
-  inheritDimensions
+  inheritDimensions,
+  allowScrollBar = false
 }) => {
   const isInteractive = () => !isPlaceholder && (Boolean(href) || Boolean(onClick));
 
@@ -32,6 +33,8 @@ export const ExpandedFrame = ({
   }, text)));
 
   const renderContent = () => /*#__PURE__*/React.createElement(Content, {
+    "data-testid": "embed-content-wrapper",
+    allowScrollBar: allowScrollBar,
     isInteractive: isInteractive()
   }, children);
 

package/dist/es2019/view/EmbedCard/components/styled.js

@@ -196,7 +196,6 @@ export const Content = styled.div`
   z-index: 1;
   width: 100%;
   top: ${gridSize(4)};
-  overflow: hidden;
   height: calc(100% - ${gridSize(4)});
   transition: box-shadow 0.3s;
 
@@ -224,6 +223,10 @@ export const Content = styled.div`
     return '';
   }
 }};
+
+  ${({
+  allowScrollBar
+}) => allowScrollBar ? 'overflow: auto;' : 'overflow: hidden;'}
 `;
 export const Image = styled.img`
   ${({

package/dist/es2019/view/EmbedCard/views/ForbiddenView.js

@@ -55,7 +55,8 @@ export const EmbedCardForbiddenView = ({
     isSelected: isSelected,
     inheritDimensions: inheritDimensions,
     onClick: onClick,
-    testId: testId
+    testId: testId,
+    allowScrollBar: true
   }, /*#__PURE__*/React.createElement(EmbedCardUnresolvedView, {
     image: LockImage,
     title: "invalid_permissions",

package/dist/es2019/view/EmbedCard/views/NotFoundView.js

@@ -22,7 +22,8 @@ export const EmbedCardNotFoundView = ({
     isSelected: isSelected,
     inheritDimensions: inheritDimensions,
     onClick: onClick,
-    testId: testId
+    testId: testId,
+    allowScrollBar: true
   }, /*#__PURE__*/React.createElement(EmbedCardUnresolvedView, {
     image: NotFoundImage,
     title: "not_found_title",

package/dist/es2019/view/EmbedCard/views/UnauthorisedView.js

@@ -29,7 +29,8 @@ export const EmbedCardUnauthorisedView = ({
     isSelected: isSelected,
     inheritDimensions: inheritDimensions,
     onClick: onClick,
-    testId: testId
+    testId: testId,
+    allowScrollBar: true
   }, /*#__PURE__*/React.createElement(EmbedCardUnresolvedView, {
     image: (_context$image = context === null || context === void 0 ? void 0 : context.image) !== null && _context$image !== void 0 ? _context$image : UnauthorisedImage,
     title: "connect_link_account_card_name",

package/dist/es2019/view/EmbedCard/views/UnresolvedView.js

@@ -38,7 +38,7 @@ export const EmbedCardUnresolvedView = ({
     css: {
       fontSize: gridSize(2.5),
       marginBottom: gridSize(1.5),
-      width: gridSize(50),
+      maxWidth: gridSize(50),
       textAlign: 'center'
     },
     "data-testid": `${testId}-unresolved-title`
@@ -51,7 +51,7 @@ export const EmbedCardUnresolvedView = ({
       fontSize: fontSize(),
       marginBottom: gridSize(2.5),
       textAlign: 'center',
-      width: gridSize(50),
+      maxWidth: gridSize(50),
       lineHeight: gridSize(3)
     },
     "data-testid": `${testId}-unresolved-description`

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

@@ -2,4 +2,5 @@ export { default as FooterBlock } from './footer-block';
 export { default as MetadataBlock } from './metadata-block';
 export { default as PreviewBlock } from './preview-block';
 export { default as SnippetBlock } from './snippet-block';
-export { default as TitleBlock } from './title-block';
+export { default as TitleBlock } from './title-block';
+export { default as CustomBlock } from './block';

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

@@ -6,6 +6,7 @@ import extractFlexibleLinkContext from '../../extractors/flexible';
 import { extractErrorIcon } from '../../extractors/flexible/icon';
 import { handleOnClick } from '../../utils';
 import { extractProvider } from '@atlaskit/linking-common/extractors';
+import extractProviderIcon from '../../extractors/flexible/icon/extract-provider-icon';
 export const getContextByStatus = (url, status, details, renderers) => {
   switch (status) {
     case SmartLinkStatus.Pending:
@@ -25,10 +26,12 @@ export const getContextByStatus = (url, status, details, renderers) => {
     case SmartLinkStatus.Fallback:
     default:
       const linkIcon = extractErrorIcon(details, status);
+      const provider = extractProviderIcon(details === null || details === void 0 ? void 0 : details.data);
       return {
         linkIcon,
         title: url,
-        url
+        url,
+        provider
       };
   }
 };

package/dist/esm/version.json

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

package/dist/esm/view/BlockCard/actions/flexible/AuthorizeAction.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import { ActionName } from '../../../../constants';
+import { messages } from '../../../../messages';
+/**
+ * Returns a CustomActionItem with a "Connect" default message
+ *
+ * @see CustomActionItem
+ * @param onAuthorize a function that will be called on the click of the button
+ */
+
+export var AuthorizeAction = function AuthorizeAction(onAuthorize) {
+  return {
+    name: ActionName.CustomAction,
+    content: /*#__PURE__*/React.createElement(FormattedMessage, messages.connect_link_account_card),
+    onClick: onAuthorize
+  };
+};

package/dist/esm/view/BlockCard/actions/flexible/ForbiddenAction.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import { ActionName } from '../../../../constants';
+import { messages } from '../../../../messages';
+/**
+ * Returns a CustomActionItem with a "Try Another Account" default message
+ *
+ * @see CustomActionItem
+ * @param onAuthorize a function that will be called on the click of the button
+ */
+
+export var ForbiddenAction = function ForbiddenAction(onAuthorize) {
+  return {
+    name: ActionName.CustomAction,
+    content: /*#__PURE__*/React.createElement(FormattedMessage, messages.try_another_account),
+    onClick: onAuthorize
+  };
+};

package/dist/esm/view/BlockCard/actions/flexible/RetryAction.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import { ActionName } from '../../../../constants';
+import { messages } from '../../../../messages';
+/**
+ * Returns a CustomActionItem with a "Retry" default message
+ *
+ * @see CustomActionItem
+ * @param onRetry a function that will be called on the click of the "Retry" button
+ */
+
+export var RetryAction = function RetryAction(onRetry) {
+  return {
+    name: ActionName.CustomAction,
+    onClick: onRetry,
+    content: /*#__PURE__*/React.createElement(FormattedMessage, messages.try_again)
+  };
+};

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

@@ -0,0 +1,54 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2;
+
+import React from 'react';
+import { css } from '@emotion/react';
+import { Provider } from '../../../../FlexibleCard/components/elements';
+import ElementGroup from '../../../../FlexibleCard/components/blocks/element-group';
+import { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize, SmartLinkWidth } from '../../../../../constants';
+import ActionGroup from '../../../../FlexibleCard/components/blocks/action-group';
+
+var getActionGroupStyles = function getActionGroupStyles(size) {
+  if (size === SmartLinkSize.XLarge) {
+    // The biggest height of the action button exceeds the max line-height
+    // of the elements causing the action on the block with x-large size to
+    // get cut at the bottom.
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      max-height: 2rem;\n    "])));
+  }
+};
+
+var providerStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  span:first-child {\n    margin-right: 0.375rem;\n  }\n"])));
+/**
+ * This Components is a footer that is used in a Block Card with Flexible UI.
+ * It contains a provider icon if provider is present and an actions list if one is passed.
+ * To be shown as a part of Flexible UI, needs to be wrapped inside of a CustomBlock
+ *
+ * @see CustomBlock
+ * @param props are the data required for the block, such as actions to be displayed.
+ */
+
+var Footer = function Footer(props) {
+  var actions = props.actions,
+      _props$size = props.size,
+      size = _props$size === void 0 ? SmartLinkSize.Medium : _props$size,
+      _props$testId = props.testId,
+      testId = _props$testId === void 0 ? 'smart-block-card-footer' : _props$testId;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": testId
+  }, /*#__PURE__*/React.createElement(Provider, {
+    testId: "".concat(testId, "-provider"),
+    overrideCss: providerStyles
+  }), actions && actions.length > 0 ? /*#__PURE__*/React.createElement(ElementGroup, {
+    testId: "smart-element-group-actions",
+    align: SmartLinkAlignment.Right,
+    direction: SmartLinkDirection.Horizontal,
+    overrideCss: getActionGroupStyles(size),
+    width: SmartLinkWidth.Flexible
+  }, /*#__PURE__*/React.createElement(ActionGroup, {
+    items: actions,
+    appearance: "default"
+  })) : null);
+};
+
+export default Footer;

package/dist/esm/view/BlockCard/views/flexible/FlexibleErroredView.js

@@ -0,0 +1,57 @@
+import React, { useMemo } from 'react';
+import FlexibleCard from '../../../FlexibleCard';
+import TitleBlock from '../../../FlexibleCard/components/blocks/title-block';
+import { messages } from '../../../../messages';
+import { token } from '@atlaskit/tokens';
+import { R300 } from '@atlaskit/theme/colors';
+import WarningIcon from '@atlaskit/icon/glyph/warning';
+import Footer from '../../components/flexible/footer';
+import { RetryAction } from '../../actions/flexible/RetryAction';
+import { CustomBlock } from '../../../FlexibleCard/components/blocks';
+import Text from '../../../FlexibleCard/components/elements/text';
+
+/**
+ * This view represents a Block Card with an 'Errored' status.
+ *
+ * @see SmartLinkStatus
+ * @see FlexibleCardProps
+ */
+var FlexibleErroredView = function FlexibleErroredView(_ref) {
+  var cardState = _ref.cardState,
+      onAuthorize = _ref.onAuthorize,
+      onError = _ref.onError,
+      ui = _ref.ui,
+      url = _ref.url,
+      onClick = _ref.onClick,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'smart-block-errored-view' : _ref$testId;
+  var status = cardState.status;
+  var actions = useMemo(function () {
+    return onAuthorize ? [RetryAction(onAuthorize)] : [];
+  }, [onAuthorize]);
+  return /*#__PURE__*/React.createElement(FlexibleCard, {
+    cardState: cardState,
+    onAuthorize: onAuthorize,
+    onClick: onClick,
+    onError: onError,
+    testId: testId,
+    ui: ui,
+    url: url
+  }, /*#__PURE__*/React.createElement(TitleBlock, {
+    hideRetry: true
+  }), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(WarningIcon, {
+    label: "errored-warning-icon",
+    size: "small",
+    primaryColor: token('color.icon.warning', R300),
+    testId: "".concat(testId, "-warning-icon")
+  }), /*#__PURE__*/React.createElement(Text, {
+    message: {
+      descriptor: messages.could_not_load_link
+    }
+  })), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(Footer, {
+    actions: actions,
+    status: status
+  })));
+};
+
+export default FlexibleErroredView;