@atlaskit/smart-card 18.0.16 → 18.0.19

package/dist/es2019/i18n/uk.js

@@ -0,0 +1,35 @@
+/**
+ * NOTE:
+ *
+ * This file is automatically generated by Traduki 2.0.
+ * DO NOT CHANGE IT BY HAND or your changes will be lost.
+ */
+//Ukrainian (Ukraine)
+export default {
+  'fabric.linking.cannot_connect': 'Не вдається підключитися, спробуйте ще раз',
+  'fabric.linking.cannot_find_link': 'Не вдається знайти посилання',
+  'fabric.linking.click_to_join': 'Можна приєднатися до {context}, щоб переглянути цю проблему',
+  'fabric.linking.connect_link_account': 'Для перегляду потрібно підключитись',
+  'fabric.linking.create_on': 'Створено {context}',
+  'fabric.linking.created_by': 'Автор: {context}',
+  'fabric.linking.delete': 'Видалити',
+  'fabric.linking.edit': 'Редагувати',
+  'fabric.linking.forbidden_access': 'У вас немає доступу',
+  'fabric.linking.invalid_permissions': 'Посилання з обмеженим доступом; спробуйте інший обліковий запис',
+  'fabric.linking.modified_on': 'Оновлено {context}',
+  'fabric.linking.pending_request': 'Запит на надання доступу в очікуванні',
+  'fabric.linking.priority_blocker': 'Блокувальний',
+  'fabric.linking.priority_critical': 'Критичний',
+  'fabric.linking.priority_high': 'Високий',
+  'fabric.linking.priority_highest': 'Найвищий',
+  'fabric.linking.priority_low': 'Низький',
+  'fabric.linking.priority_lowest': 'Найнижчий',
+  'fabric.linking.priority_major': 'Серйозний',
+  'fabric.linking.priority_medium': 'Середній',
+  'fabric.linking.priority_minor': 'Низький',
+  'fabric.linking.priority_trivial': 'Звичайний',
+  'fabric.linking.priority_undefined': 'Не визначено',
+  'fabric.linking.request_access': 'Надішліть запит на доступ до {context}, щоб переглянути завдання',
+  'fabric.linking.request_denied': 'Ваш запит на надання доступу відхилено',
+  'fabric.linking.updated_by': 'Автор зміни: {context}'
+};

package/dist/es2019/i18n/vi.js

@@ -0,0 +1,35 @@
+/**
+ * NOTE:
+ *
+ * This file is automatically generated by Traduki 2.0.
+ * DO NOT CHANGE IT BY HAND or your changes will be lost.
+ */
+//Vietnamese (Vietnam)
+export default {
+  'fabric.linking.cannot_connect': 'Không thể kết nối, hãy thử lại',
+  'fabric.linking.cannot_find_link': 'Không tìm được liên kết',
+  'fabric.linking.click_to_join': 'Tham gia {context} để xem vấn đề này',
+  'fabric.linking.connect_link_account': 'Kết nối để xem trước',
+  'fabric.linking.create_on': 'Đã tạo {context}',
+  'fabric.linking.created_by': 'Được tạo bởi {context}',
+  'fabric.linking.delete': 'Xóa',
+  'fabric.linking.edit': 'Chỉnh sửa',
+  'fabric.linking.forbidden_access': 'Quyền truy cập của bạn bị cấm',
+  'fabric.linking.invalid_permissions': 'Liên kết bị hạn chế, thử một tài khoản khác',
+  'fabric.linking.modified_on': 'Đã cập nhật {context}',
+  'fabric.linking.pending_request': 'Đang chờ xử lý yêu cầu quyền truy cập của bạn',
+  'fabric.linking.priority_blocker': 'Trở ngại',
+  'fabric.linking.priority_critical': 'Rất cao',
+  'fabric.linking.priority_high': 'Cao',
+  'fabric.linking.priority_highest': 'Cao nhất',
+  'fabric.linking.priority_low': 'Thấp',
+  'fabric.linking.priority_lowest': 'Thấp nhất',
+  'fabric.linking.priority_major': 'Lớn',
+  'fabric.linking.priority_medium': 'Trung bình',
+  'fabric.linking.priority_minor': 'Nhỏ',
+  'fabric.linking.priority_trivial': 'Không đáng kể',
+  'fabric.linking.priority_undefined': 'Chưa xác định',
+  'fabric.linking.request_access': 'Yêu cầu quyền truy cập vào {context} để xem vấn đề này',
+  'fabric.linking.request_denied': 'Yêu cầu quyền truy cập của bạn đã bị từ chối',
+  'fabric.linking.updated_by': 'Được sửa đổi bởi {context}'
+};

package/dist/es2019/i18n/zh.js

@@ -0,0 +1,35 @@
+/**
+ * NOTE:
+ *
+ * This file is automatically generated by Traduki 2.0.
+ * DO NOT CHANGE IT BY HAND or your changes will be lost.
+ */
+//Chinese (Simplified)
+export default {
+  'fabric.linking.cannot_connect': '无法连接，请重试',
+  'fabric.linking.cannot_find_link': '未找到链接',
+  'fabric.linking.click_to_join': '加入{context}以查看此事务',
+  'fabric.linking.connect_link_account': '连接以预览',
+  'fabric.linking.create_on': '{context}已创建',
+  'fabric.linking.created_by': '创建者：{context}',
+  'fabric.linking.delete': '删除',
+  'fabric.linking.edit': '编辑',
+  'fabric.linking.forbidden_access': '您的访问已被禁止',
+  'fabric.linking.invalid_permissions': '受限链接，请尝试其他帐户',
+  'fabric.linking.modified_on': '{context}已更新',
+  'fabric.linking.pending_request': '您的访问请求正等待处理',
+  'fabric.linking.priority_blocker': '阻止程序',
+  'fabric.linking.priority_critical': '紧急',
+  'fabric.linking.priority_high': '高',
+  'fabric.linking.priority_highest': '最高',
+  'fabric.linking.priority_low': '低',
+  'fabric.linking.priority_lowest': '最低',
+  'fabric.linking.priority_major': '重要',
+  'fabric.linking.priority_medium': '中等',
+  'fabric.linking.priority_minor': '次要',
+  'fabric.linking.priority_trivial': '微小',
+  'fabric.linking.priority_undefined': '未定义',
+  'fabric.linking.request_access': '请求访问{context}以查看此事务',
+  'fabric.linking.request_denied': '您的访问请求已被拒绝',
+  'fabric.linking.updated_by': '修改者：{context}'
+};

package/dist/es2019/i18n/zh_TW.js

@@ -0,0 +1,35 @@
+/**
+ * NOTE:
+ *
+ * This file is automatically generated by Traduki 2.0.
+ * DO NOT CHANGE IT BY HAND or your changes will be lost.
+ */
+//Chinese (Traditional)
+export default {
+  'fabric.linking.cannot_connect': '無法連結，請再試一次',
+  'fabric.linking.cannot_find_link': '找不到連結',
+  'fabric.linking.click_to_join': '加入 {context} 以查看此議題',
+  'fabric.linking.connect_link_account': '連線以預覽',
+  'fabric.linking.create_on': '建立時間：{context}',
+  'fabric.linking.created_by': '建立者：{context}',
+  'fabric.linking.delete': '刪除',
+  'fabric.linking.edit': '編輯',
+  'fabric.linking.forbidden_access': '您的存取遭拒',
+  'fabric.linking.invalid_permissions': '連結受到限制，請嘗試其他帳戶',
+  'fabric.linking.modified_on': '更新時間：{context}',
+  'fabric.linking.pending_request': '您的存取要求擱置中',
+  'fabric.linking.priority_blocker': '封鎖程式',
+  'fabric.linking.priority_critical': '重要',
+  'fabric.linking.priority_high': '高',
+  'fabric.linking.priority_highest': '最高',
+  'fabric.linking.priority_low': '低',
+  'fabric.linking.priority_lowest': '最低',
+  'fabric.linking.priority_major': '主要',
+  'fabric.linking.priority_medium': '中',
+  'fabric.linking.priority_minor': '次要',
+  'fabric.linking.priority_trivial': '不太重要',
+  'fabric.linking.priority_undefined': '未定義',
+  'fabric.linking.request_access': '要求存取 {context} 以檢視此議題',
+  'fabric.linking.request_denied': '您的存取要求遭拒',
+  'fabric.linking.updated_by': '修改者：{context}'
+};

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

@@ -70,7 +70,7 @@ export const useSmartCardActions = (id, url, analytics) => {
     const nextStatus = response ? getStatus(response) : 'fatal'; // If we require authorization & do not have an authFlow available,
     // throw an error and render as a normal blue link.
 
-    if (nextStatus === 'unauthorized' && !hasAuthFlowSupported) {
+    if ((nextStatus === 'unauthorized' || nextStatus === 'forbidden') && !hasAuthFlowSupported) {
       handleResolvedLinkError(resourceUrl, new APIError('fallback', hostname, ERROR_MESSAGE_OAUTH));
       return;
     } // Handle any other errors

package/dist/es2019/utils/token.js

@@ -11,6 +11,7 @@ export const tokens = {
   elevation: token('elevation.shadow.raised', '0px 1px 1px #091E4240, 0px 0px 1px #091E424F'),
   errorMessage: token('color.text.disabled', '#6B778C'),
   errorMessageHover: token('color.text.subtle', '#8993A4'),
+  focus: token('color.border.focused', '#388BFF'),
   snippet: token('color.text', '#172B4D'),
   text: token('color.text.subtlest', '#626F86')
 };

package/dist/es2019/version.json

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

package/dist/es2019/view/FlexibleCard/components/blocks/action-group/index.js

@@ -9,9 +9,22 @@ import { SmartLinkSize } from '../../../../../constants';
 import Button from '@atlaskit/button/standard-button';
 import MoreIcon from '@atlaskit/icon/glyph/more';
 import { sizeToSpacing } from '../../actions/action';
+import { tokens } from '../../../../../utils/token';
 const styles = css`
   display: inline-flex;
   line-height: 1rem;
+  > div {
+    align-items: center;
+    button:focus {
+      // AK button removes the default browser outline on focus and apply
+      // box-shadow styling to create the outline appearance.
+      // Due to our container elements (Container/Block/ElementGroup) has
+      // overflow hidden to prevent the metadata element from leaking outside
+      // of its container, the box-shadow doesn't show properly.
+      // Invert the AK box-shadow styling.
+      box-shadow: inset 0 0 0 2px ${tokens.focus};
+    }
+  }
 `;
 /**
  * Creates a group of Action components. Accepts an array of Actions, in addition to some styling

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

@@ -27,6 +27,9 @@ const getMessageStyles = (size, hasAction) => {
     ${sizeStyles}
     ${getTruncateStyles(1, getLinkLineHeight(size))}
     color: ${tokens.errorMessage};
+    :focus {
+      outline: ${tokens.focus} solid 2px;
+    }
   `;
 };
 /**
@@ -63,9 +66,11 @@ const TitleBlockErroredView = ({
     direction: SmartLinkDirection.Horizontal,
     align: SmartLinkAlignment.Right
   }, jsx("span", {
+    className: hasAction ? 'has-action' : '',
     css: getMessageStyles(size, hasAction),
     onClick: onClick,
-    "data-testid": `${testId}-errored-view-message`
+    "data-testid": `${testId}-errored-view-message`,
+    tabIndex: hasAction ? 0 : -1
   }, jsx(FormattedMessage, _extends({}, descriptor, {
     values: values
   })))), actionGroup);

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

@@ -12,13 +12,12 @@ const getActionStyles = (showOnHover, isOpen) => {
   if (showOnHover && !isOpen) {
     return css`
       .actions-button-group {
-        visibility: hidden;
+        opacity: 0;
       }
 
-      &:hover {
-        .actions-button-group {
-          visibility: visible;
-        }
+      &:hover .actions-button-group,
+      .actions-button-group:focus-within {
+        opacity: 1;
       }
     `;
   }

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

@@ -3,28 +3,10 @@ import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import React from 'react';
 import { jsx } from '@emotion/core';
-import Spinner from '@atlaskit/spinner';
 import Block from '../../block';
 import { SmartLinkSize } from '../../../../../../constants';
-
-const getSpinnerSize = size => {
-  // Spinner sizes should be equivalent or smaller than Icon size
-  // to avoid the jumping.
-  switch (size) {
-    case SmartLinkSize.XLarge:
-      return 28;
-
-    case SmartLinkSize.Large:
-      return 24;
-
-    case SmartLinkSize.Medium:
-      return 16;
-
-    case SmartLinkSize.Small:
-    default:
-      return 12;
-  }
-};
+import LoadingSkeleton from '../../../common/loading-skeleton';
+import { getIconSizeStyles, getIconWidth } from '../../../utils';
 /**
  * This represents a TitleBlock for a Smart Link that is currently waiting
  * for a request to finish.
@@ -32,7 +14,6 @@ const getSpinnerSize = size => {
  * @see TitleBlock
  */
 
-
 const TitleBlockResolvingView = ({
   actionGroup,
   testId,
@@ -42,12 +23,16 @@ const TitleBlockResolvingView = ({
   const {
     size = SmartLinkSize.Medium
   } = blockProps;
+  const iconWidth = getIconWidth(size);
+  const iconStyles = getIconSizeStyles(iconWidth);
   return jsx(Block, _extends({}, blockProps, {
     testId: `${testId}-resolving-view`
-  }), jsx(Spinner, {
-    size: getSpinnerSize(size),
-    testId: `${testId}-resolving-spinner`
-  }), title, actionGroup);
+  }), jsx("span", {
+    css: iconStyles,
+    "data-testid": `${testId}-icon`
+  }, jsx(LoadingSkeleton, {
+    testId: `${testId}-icon-loading`
+  })), title, actionGroup);
 };
 
 export default TitleBlockResolvingView;

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

@@ -68,7 +68,6 @@ export const getBaseStyles = (direction, size) => css`
   line-height: 1rem;
   min-width: 0;
   overflow: hidden;
-  overflow-y: hidden;
   ${getDirectionStyles(direction)};
   &:empty {
     display: none;

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

@@ -1,34 +1,8 @@
 /** @jsx jsx */
 import React from 'react';
-import { css, jsx, keyframes } from '@emotion/core';
+import { jsx } from '@emotion/core';
 import ImageLoader from 'react-render-image';
-import { token } from '@atlaskit/tokens';
-const placeholderShimmer = keyframes`
-  0% { background-position: -20px 0; }
-  100% { background-position: 20px 0; }
-`;
-const shimmer = css`
-  border-radius: 2px;
-  user-select: none;
-  background: ${token('color.skeleton.subtle', '#f6f7f8')};
-  // TODO: https://product-fabric.atlassian.net/browse/DSP-4236
-  background-image: linear-gradient(
-    to right,
-    ${token('color.skeleton.subtle', '#f6f7f8')} 0%,
-    ${token('color.skeleton', '#edeef1')} 20%,
-    ${token('color.skeleton.subtle', '#f6f7f8')} 40%,
-    ${token('color.skeleton.subtle', '#f6f7f8')}100%
-  );
-  background-repeat: no-repeat;
-  background-size: 280% 100%;
-  display: inline-block;
-
-  animation-duration: 1s;
-  animation-fill-mode: forwards;
-  animation-iteration-count: infinite;
-  animation-name: ${placeholderShimmer};
-  animation-timing-function: linear;
-`;
+import LoadingSkeleton from '../loading-skeleton';
 
 const ImageIcon = ({
   defaultIcon,
@@ -36,9 +10,8 @@ const ImageIcon = ({
   url
 }) => jsx(ImageLoader, {
   src: url,
-  loading: jsx("span", {
-    css: shimmer,
-    "data-testid": `${testId}-loading`
+  loading: jsx(LoadingSkeleton, {
+    testId: `${testId}-loading`
   }),
   loaded: jsx("img", {
     src: url,

package/dist/es2019/view/FlexibleCard/components/common/loading-skeleton/index.js

@@ -0,0 +1,39 @@
+/** @jsx jsx */
+import React from 'react';
+import { css, jsx, keyframes } from '@emotion/core';
+import { token } from '@atlaskit/tokens';
+const animationNameStyles = keyframes`
+  0% { background-position: -20px 0; }
+  100% { background-position: 20px 0; }
+`;
+const styles = css`
+  border-radius: 2px;
+  user-select: none;
+  background: ${token('color.skeleton.subtle', '#f6f7f8')};
+  // TODO: https://product-fabric.atlassian.net/browse/DSP-4236
+  background-image: linear-gradient(
+    to right,
+    ${token('color.skeleton.subtle', '#f6f7f8')} 0%,
+    ${token('color.skeleton', '#edeef1')} 20%,
+    ${token('color.skeleton.subtle', '#f6f7f8')} 40%,
+    ${token('color.skeleton.subtle', '#f6f7f8')}100%
+  );
+  background-repeat: no-repeat;
+  background-size: 280% 100%;
+  display: inline-block;
+
+  animation-duration: 1s;
+  animation-fill-mode: forwards;
+  animation-iteration-count: infinite;
+  animation-name: ${animationNameStyles};
+  animation-timing-function: linear;
+`;
+
+const LoadingSkeleton = ({
+  testId
+}) => jsx("span", {
+  css: styles,
+  "data-testid": testId
+});
+
+export default LoadingSkeleton;

package/dist/es2019/view/FlexibleCard/components/common/loading-skeleton/types.js

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

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

@@ -1,9 +1,11 @@
 /** @jsx jsx */
-import React from 'react';
+import React, { useContext } from 'react';
 import { css, jsx } from '@emotion/core';
 import { SmartLinkSize, SmartLinkTheme } from '../../../../constants';
 import { isFlexibleUiBlock, isFlexibleUiTitleBlock } from '../../../../utils/flexible';
 import { tokens } from '../../../../utils/token';
+import { FlexibleUiContext } from '../../../../state/flexible-ui-context';
+import LayeredLink from './layered-link';
 const elevationStyles = css`
   border: 1px solid transparent;
   border-radius: 1.5px;
@@ -45,15 +47,33 @@ const getPadding = size => {
   }
 };
 
-export const getContainerStyles = (size, hideBackground, hideElevation, hidePadding) => css`
+const clickableContainerStyles = css`
+  // Position any interactive elements at the top of the z-index stack.
+  a,
+  button,
+  .has-action {
+    position: relative;
+    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: hidden;
+  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 renderChildren = (children, containerSize, containerTheme, status, retry, onClick) => React.Children.map(children, child => {
@@ -70,6 +90,31 @@ const renderChildren = (children, containerSize, containerTheme, status, retry,
     });
   }
 });
+
+const getTitleBlockProps = children => {
+  const block = React.Children.toArray(children).find(child => isFlexibleUiTitleBlock(child));
+
+  if ( /*#__PURE__*/React.isValidElement(block)) {
+    return block.props;
+  }
+};
+
+const getLayeredLink = (testId, context, children) => {
+  const {
+    title,
+    url = ''
+  } = context || {};
+  const {
+    anchorTarget: target,
+    text
+  } = getTitleBlockProps(children) || {};
+  return jsx(LayeredLink, {
+    target: target,
+    testId: testId,
+    text: text || title,
+    url: url
+  });
+};
 /**
  * This represents the container in which all Flexible UI Smart Links are rendered.
  * @see Block
@@ -78,19 +123,23 @@ const renderChildren = (children, containerSize, containerTheme, status, retry,
 
 const Container = ({
   children,
+  clickableContainer = false,
   hideBackground = false,
   hideElevation = false,
   hidePadding = false,
+  onClick,
   retry,
   size = SmartLinkSize.Medium,
   status,
   testId = 'smart-links-container',
-  theme = SmartLinkTheme.Link,
-  onClick
-}) => jsx("div", {
-  css: getContainerStyles(size, hideBackground, hideElevation, hidePadding),
-  "data-smart-link-container": true,
-  "data-testid": testId
-}, renderChildren(children, size, theme, status, retry, onClick));
+  theme = SmartLinkTheme.Link
+}) => {
+  const context = useContext(FlexibleUiContext);
+  return jsx("div", {
+    css: getContainerStyles(size, hideBackground, hideElevation, hidePadding, clickableContainer),
+    "data-smart-link-container": true,
+    "data-testid": testId
+  }, clickableContainer ? getLayeredLink(testId, context, children) : null, renderChildren(children, size, theme, status, retry, onClick));
+};
 
 export default Container;

package/dist/es2019/view/FlexibleCard/components/container/layered-link/index.js

@@ -0,0 +1,54 @@
+/** @jsx jsx */
+import React from 'react';
+import { jsx, css } from '@emotion/core';
+const styles = css`
+  // Stretch the invisible link over the whole of the post.
+  // Hide the link’s text.
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  overflow-x: hidden;
+  text-indent: 100%;
+  white-space: nowrap;
+
+  // Needs a heightened specificity to trump other anchor.
+  // Stack it under all other links in the post text.
+  a&.layered-link {
+    position: absolute;
+    z-index: 0;
+  }
+
+  // When hovering over the layered link, any hidden action buttons inside
+  // the Container should become visible.
+  // As actions resides inside blocks and layered link is expected to be
+  // on the same level of blocks. That makes the blocks, e.g. TitleBlock,
+  // its sibling. Using general sibling combinator here to apply styling to
+  // all the siblings of layered link.
+  // The general sibling combinator (~) separates two selectors and matches all
+  // iterations of the second element, that are following the first element
+  // (though not necessarily immediately), and are children of the same parent
+  // element.
+  &:hover ~ * {
+    .actions-button-group {
+      opacity: 1;
+    }
+  }
+`;
+
+const LayeredLink = ({
+  target,
+  testId,
+  text,
+  url
+}) => jsx("a", {
+  className: "layered-link",
+  css: styles,
+  "data-testid": `${testId}-layered-link`,
+  href: url,
+  target: target,
+  tabIndex: -1 // Hide tab index and let the title link be the link.
+
+}, text);
+
+export default LayeredLink;

package/dist/es2019/view/FlexibleCard/components/container/layered-link/types.js

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

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

@@ -48,6 +48,7 @@ const AvatarGroup = ({
 
   return jsx("span", {
     css: [getStyles(size), overrideCss],
+    "data-fit-to-content": true,
     "data-smart-element-avatar-group": true,
     "data-testid": testId
   }, jsx(AtlaskitAvatarGroup, {

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

@@ -5,7 +5,7 @@ import { css, jsx } from '@emotion/core';
 import { SmartLinkPosition, SmartLinkSize } from '../../../../../constants';
 import AtlaskitIcon from '../../common/atlaskit-icon';
 import ImageIcon from '../../common/image-icon';
-import { getIconSizeStyles, getTruncateStyles } from '../../utils';
+import { getIconSizeStyles, getIconWidth, getTruncateStyles } from '../../utils';
 
 const getPositionStyles = (size, position) => {
   switch (position) {
@@ -23,23 +23,6 @@ const getPositionStyles = (size, position) => {
   }
 };
 
-const getWidth = size => {
-  switch (size) {
-    case SmartLinkSize.XLarge:
-      return '2rem';
-
-    case SmartLinkSize.Large:
-      return '1.5rem';
-
-    case SmartLinkSize.Medium:
-      return '1rem';
-
-    case SmartLinkSize.Small:
-    default:
-      return '.75rem';
-  }
-};
-
 const getIconStyles = (size, position, width) => css`
   ${getPositionStyles(size, position)}
   ${getIconSizeStyles(width)}
@@ -105,7 +88,7 @@ const Icon = ({
     const defaultIcon = renderDefaultIcon(label, testId);
     return (render === null || render === void 0 ? void 0 : render()) || renderImageIcon(defaultIcon, icon, url, testId) || renderAtlaskitIcon(icon, label, testId) || defaultIcon;
   }, [icon, label, render, testId, url]);
-  const width = getWidth(size);
+  const width = getIconWidth(size);
   const styles = getIconStyles(size, position, width);
   const renderStyles = render ? getCustomRenderStyles(width) : undefined;
   return jsx("div", {

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

@@ -39,6 +39,22 @@ export const getIconSizeStyles = width => {
     }
   `;
 };
+export const getIconWidth = size => {
+  switch (size) {
+    case SmartLinkSize.XLarge:
+      return '2rem';
+
+    case SmartLinkSize.Large:
+      return '1.5rem';
+
+    case SmartLinkSize.Medium:
+      return '1rem';
+
+    case SmartLinkSize.Small:
+    default:
+      return '.75rem';
+  }
+};
 export const getLinkLineHeight = size => {
   switch (size) {
     case SmartLinkSize.XLarge:

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

@@ -32,9 +32,9 @@ const FlexibleCard = ({
   }, /*#__PURE__*/React.createElement(Container, _extends({
     testId: testId
   }, ui, {
+    onClick: onClick,
     retry: retry,
-    status: status,
-    onClick: onClick
+    status: status
   }), children));
 };