@atlaskit/smart-card 36.11.0 → 36.12.0

package/dist/esm/view/InlineCard/IconAndTitleLayout/index.js

@@ -15,6 +15,7 @@ import LinkIcon from '@atlaskit/icon/core/migration/link';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Box } from '@atlaskit/primitives/compiled';
 import { B400, N200 } from '@atlaskit/theme/colors';
+import { isProfileType } from '../../../utils';
 import { Icon, Shimmer } from '../Icon';
 import { EmojiWrapperOldVisualRefresh, IconEmptyWrapperOldVisualRefresh, IconPositionWrapperOldVisualRefresh, IconWrapperOldVisualRefresh, TitleWrapperClassNameOldVisualRefresh } from './styled';
 var iconWrapperStyle = null;
@@ -24,7 +25,8 @@ var styles = {
   iconOuterWrapperStyle: "_1e0c1o8l _2hwx1b66 _kqswh2mm",
   iconTitleWrapperStyle: "_o5721jtm _1nmz9jpi _16d9qvcn _ca0qv77o _u5f31b66 _n3tdv77o _19bv1b66",
   linkStyle: "_2rkogqwt",
-  noLinkAppearanceStyle: "_syaz131l _18u01b66"
+  noLinkAppearanceStyle: "_syaz131l _18u01b66",
+  roundImageStyle: "_2rko14q2"
 };
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- Ignored via go/DSP-18766
 var NoLinkAppearanceOldVisualRefresh = forwardRef(function (_ref, __cmplr) {
@@ -69,7 +71,8 @@ export var IconAndTitleLayout = function IconAndTitleLayout(_ref3) {
     link = _ref3.link,
     rightSide = _ref3.rightSide,
     _ref3$testId = _ref3.testId,
-    testId = _ref3$testId === void 0 ? 'inline-card-icon-and-title' : _ref3$testId;
+    testId = _ref3$testId === void 0 ? 'inline-card-icon-and-title' : _ref3$testId,
+    type = _ref3.type;
   var renderAtlaskitIcon = React.useCallback(function () {
     if (emoji) {
       if (fg('platform-linking-visual-refresh-v1')) {
@@ -85,6 +88,7 @@ export var IconAndTitleLayout = function IconAndTitleLayout(_ref3) {
     }
     return /*#__PURE__*/React.createElement(IconWrapperOldVisualRefresh, null, icon);
   }, [emoji, icon]);
+  var profileType = fg('platform-linking-visual-refresh-v2') ? isProfileType(type) : false;
   var renderImageIcon = React.useCallback(function (errored, testId) {
     if (!icon || typeof icon !== 'string') {
       return null;
@@ -96,7 +100,7 @@ export var IconAndTitleLayout = function IconAndTitleLayout(_ref3) {
           src: icon,
           "data-testid": "".concat(testId, "-image"),
           alt: "",
-          className: ax(["_c71l7vkz _p12f7vkz _1bsb1osq"])
+          className: ax(["_c71l7vkz _p12f7vkz _1bsb1osq", profileType && styles.roundImageStyle])
         }),
         errored: errored,
         loading: /*#__PURE__*/React.createElement(Shimmer, {
@@ -104,23 +108,23 @@ export var IconAndTitleLayout = function IconAndTitleLayout(_ref3) {
         })
       });
     }
+    var removedProps = !fg('platform-linking-visual-refresh-v2') ? {
+      className: 'smart-link-icon'
+    } : {};
     return /*#__PURE__*/React.createElement(ImageLoader, {
       src: icon,
-      loaded:
-      /*#__PURE__*/
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
-      React.createElement(Icon, {
-        className: "smart-link-icon",
+      loaded: /*#__PURE__*/React.createElement(Icon, _extends({}, removedProps, {
         src: icon,
         "data-testid": "".concat(testId, "-image"),
-        alt: ""
-      }),
+        alt: "",
+        className: ax([profileType && styles.roundImageStyle])
+      })),
       errored: errored,
       loading: /*#__PURE__*/React.createElement(Shimmer, {
         testId: "".concat(testId, "-loading")
       })
     });
-  }, [icon]);
+  }, [icon, profileType]);
   var renderIconPlaceholder = React.useCallback(function (testId) {
     if (fg('platform-linking-visual-refresh-v1')) {
       return defaultIcon || /*#__PURE__*/React.createElement(LinkIcon, {

package/dist/esm/view/InlineCard/ResolvedView/index.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
@@ -54,7 +55,8 @@ export var InlineCardResolvedView = /*#__PURE__*/function (_React$Component) {
         showHoverPreview = _this$props$showHover === void 0 ? false : _this$props$showHover,
         hoverPreviewOptions = _this$props.hoverPreviewOptions,
         actionOptions = _this$props.actionOptions,
-        truncateInline = _this$props.truncateInline;
+        truncateInline = _this$props.truncateInline,
+        type = _this$props.type;
       var inlineCardResolvedView = /*#__PURE__*/React.createElement(Frame, {
         testId: testId,
         link: link,
@@ -62,12 +64,14 @@ export var InlineCardResolvedView = /*#__PURE__*/function (_React$Component) {
         isHovered: isHovered,
         onClick: onClick,
         truncateInline: truncateInline
-      }, /*#__PURE__*/React.createElement(IconAndTitleLayout, {
+      }, /*#__PURE__*/React.createElement(IconAndTitleLayout, _extends({
         emoji: titlePrefix,
         icon: icon,
         title: title,
         titleTextColor: titleTextColor
-      }), this.renderLozenge());
+      }, fg('platform-linking-visual-refresh-v2') && {
+        type: type
+      })), this.renderLozenge());
       if (showHoverPreview && link) {
         return /*#__PURE__*/React.createElement(HoverCard, {
           id: id,

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

@@ -13,7 +13,7 @@ import LinkWarningModal from './LinkWarningModal';
 import { useLinkWarningModal } from './LinkWarningModal/hooks/use-link-warning-modal';
 var PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "36.11.0",
+  packageVersion: "36.12.0",
   componentName: 'linkUrl'
 };
 var Anchor = withLinkClickedEvent('a');

package/dist/types/state/flexible-ui-context/types.d.ts

@@ -231,6 +231,11 @@ export type FlexibleUiDataContext = {
      * @see Location
      */
     location?: LinkLocation;
+    /**
+     * Contains the type provided by the link extractor.
+     * @type string
+     */
+    type?: string[];
 };
 export type Icon = {
     icon?: IconType;

package/dist/types/utils/index.d.ts

@@ -36,3 +36,4 @@ export declare const openUrl: (url?: string) => Promise<void>;
  */
 export declare const getPreviewUrlWithTheme: (previewUrl: string, themeState: Partial<ActiveThemeState>) => string;
 export declare const isIconSizeLarge: (size?: SmartLinkSize) => boolean | undefined;
+export declare const isProfileType: (type?: string[]) => boolean;

package/dist/types/view/EmbedCard/components/ImageIcon.d.ts

@@ -1,3 +1,7 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import React from 'react';
 export interface ImageIconProps {
     alt?: string;
@@ -5,5 +9,6 @@ export interface ImageIconProps {
     src?: string;
     title?: string;
     default?: React.ReactElement;
+    appearance?: 'square' | 'round';
 }
-export declare const ImageIcon: ({ alt, src, size, title, default: defaultIcon, }: ImageIconProps) => React.JSX.Element | null;
+export declare const ImageIcon: ({ alt, src, size, title, default: defaultIcon, appearance, }: ImageIconProps) => JSX.Element | null;

package/dist/types/view/EmbedCard/views/ResolvedView.d.ts

@@ -28,5 +28,7 @@ export interface EmbedCardResolvedViewProps {
     onIframeDwell?: (dwellTime: number, dwellPercentVisible: number) => void;
     /** Optional callback for when user navigates into an iframe - for analytics **/
     onIframeFocus?: () => void;
+    /** Type of the object */
+    type?: string[];
 }
 export declare const EmbedCardResolvedView: React.ForwardRefExoticComponent<EmbedCardResolvedViewProps & React.RefAttributes<HTMLIFrameElement>>;

package/dist/types/view/EmbedModal/components/link-info/link-info-button/index.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { type LinkInfoButtonProps } from './types';
-declare const LinkInfoButton: ({ content, href, icon, onClick, target, testId }: LinkInfoButtonProps) => React.JSX.Element;
+declare const LinkInfoButton: ({ content, icon, label, onClick, testId }: LinkInfoButtonProps) => React.JSX.Element;
 export default LinkInfoButton;

package/dist/types/view/EmbedModal/components/link-info/link-info-button/old.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { type OldLinkInfoButtonProps } from './types';
+/**
+ * @private
+ * @deprecated Remove when cleaning up fg `platform-smart-card-remove-legacy-button` - EDM-12433
+ */
+declare const LinkInfoButton: ({ content, href, icon, onClick, target, testId, }: OldLinkInfoButtonProps) => React.JSX.Element;
+export default LinkInfoButton;

package/dist/types/view/EmbedModal/components/link-info/link-info-button/types.d.ts

@@ -1,5 +1,7 @@
 /// <reference types="react" />
-export type LinkInfoButtonProps = {
+import { MessageDescriptor } from 'react-intl-next';
+import { IconProp } from '@atlaskit/button/new';
+export type OldLinkInfoButtonProps = {
     content: React.ReactNode;
     icon: React.ReactChild;
     onClick?: () => void;
@@ -7,3 +9,10 @@ export type LinkInfoButtonProps = {
     target?: string;
     testId?: string;
 };
+export type LinkInfoButtonProps = {
+    content: React.ReactNode;
+    icon: IconProp;
+    label: MessageDescriptor;
+    onClick?: () => void;
+    testId?: string;
+};

package/dist/types/view/FlexibleCard/components/common/image-icon/index.d.ts

@@ -1,4 +1,8 @@
-import React from 'react';
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+/// <reference types="react" />
 import { type ImageIconProps } from './types';
-declare const ImageIcon: ({ defaultIcon, testId, url, width, height, onError, onLoad, }: ImageIconProps) => React.JSX.Element;
+declare const ImageIcon: ({ defaultIcon, testId, url, width, height, appearance, onError, onLoad, }: ImageIconProps) => JSX.Element;
 export default ImageIcon;

package/dist/types/view/FlexibleCard/components/common/image-icon/types.d.ts

@@ -7,4 +7,5 @@ export type ImageIconProps = {
     height?: string;
     onError?: () => void;
     onLoad?: () => void;
+    appearance?: 'square' | 'round';
 };

package/dist/types/view/FlexibleCard/components/elements/icon/index.d.ts

@@ -6,5 +6,5 @@ import { type IconProps } from './types';
  * @param {IconProps} IconProps - The props necessary for the Icon element.
  * @see LinkIcon
  */
-declare const Icon: ({ icon, overrideIcon, label, name, position, className, render, size, testId, url, }: IconProps) => JSX.Element;
+declare const Icon: ({ icon, overrideIcon, label, name, position, className, render, size, testId, url, appearance, }: IconProps) => JSX.Element;
 export default Icon;

package/dist/types/view/FlexibleCard/components/elements/icon/types.d.ts

@@ -29,4 +29,8 @@ export type IconProps = ElementProps & {
      * The icon from this url will be used if no render function or Atlaskit Icon is provided.
      */
     url?: string;
+    /**
+     * Whether to display the icon as a square or round image.
+     */
+    appearance?: 'square' | 'round';
 };

package/dist/types/view/InlineCard/IconAndTitleLayout/index.d.ts

@@ -19,7 +19,8 @@ export interface IconAndTitleLayoutProps {
     rightSide?: React.ReactNode;
     rightSideSpacer?: boolean;
     onClick?: React.EventHandler<React.MouseEvent | React.KeyboardEvent>;
+    type?: string[];
 }
-export declare const IconAndTitleLayout: ({ icon, emoji, defaultIcon, onClick, children, title, titleColor, titleTextColor, link, rightSide, testId, }: IconAndTitleLayoutProps) => JSX.Element;
+export declare const IconAndTitleLayout: ({ icon, emoji, defaultIcon, onClick, children, title, titleColor, titleTextColor, link, rightSide, testId, type, }: IconAndTitleLayoutProps) => JSX.Element;
 export declare const IconTitleWrapper: (props: ComponentPropsWithoutRef<typeof Box>) => JSX.Element;
 export declare const LozengeWrapper: (props: ComponentPropsWithoutRef<typeof Box>) => JSX.Element;

package/dist/types/view/InlineCard/ResolvedView/index.d.ts

@@ -32,6 +32,8 @@ export interface InlineCardResolvedViewProps {
     actionOptions?: CardActionOptions;
     /** Truncates the card to one line */
     truncateInline?: boolean;
+    /** Type of inline card */
+    type?: string[];
 }
 export declare class InlineCardResolvedView extends React.Component<InlineCardResolvedViewProps> {
     renderLozenge(): React.JSX.Element | null;

package/dist/types-ts4.5/state/flexible-ui-context/types.d.ts

@@ -231,6 +231,11 @@ export type FlexibleUiDataContext = {
      * @see Location
      */
     location?: LinkLocation;
+    /**
+     * Contains the type provided by the link extractor.
+     * @type string
+     */
+    type?: string[];
 };
 export type Icon = {
     icon?: IconType;

package/dist/types-ts4.5/utils/index.d.ts

@@ -36,3 +36,4 @@ export declare const openUrl: (url?: string) => Promise<void>;
  */
 export declare const getPreviewUrlWithTheme: (previewUrl: string, themeState: Partial<ActiveThemeState>) => string;
 export declare const isIconSizeLarge: (size?: SmartLinkSize) => boolean | undefined;
+export declare const isProfileType: (type?: string[]) => boolean;

package/dist/types-ts4.5/view/EmbedCard/components/ImageIcon.d.ts

@@ -1,3 +1,7 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import React from 'react';
 export interface ImageIconProps {
     alt?: string;
@@ -5,5 +9,6 @@ export interface ImageIconProps {
     src?: string;
     title?: string;
     default?: React.ReactElement;
+    appearance?: 'square' | 'round';
 }
-export declare const ImageIcon: ({ alt, src, size, title, default: defaultIcon, }: ImageIconProps) => React.JSX.Element | null;
+export declare const ImageIcon: ({ alt, src, size, title, default: defaultIcon, appearance, }: ImageIconProps) => JSX.Element | null;

package/dist/types-ts4.5/view/EmbedCard/views/ResolvedView.d.ts

@@ -28,5 +28,7 @@ export interface EmbedCardResolvedViewProps {
     onIframeDwell?: (dwellTime: number, dwellPercentVisible: number) => void;
     /** Optional callback for when user navigates into an iframe - for analytics **/
     onIframeFocus?: () => void;
+    /** Type of the object */
+    type?: string[];
 }
 export declare const EmbedCardResolvedView: React.ForwardRefExoticComponent<EmbedCardResolvedViewProps & React.RefAttributes<HTMLIFrameElement>>;

package/dist/types-ts4.5/view/EmbedModal/components/link-info/link-info-button/index.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { type LinkInfoButtonProps } from './types';
-declare const LinkInfoButton: ({ content, href, icon, onClick, target, testId }: LinkInfoButtonProps) => React.JSX.Element;
+declare const LinkInfoButton: ({ content, icon, label, onClick, testId }: LinkInfoButtonProps) => React.JSX.Element;
 export default LinkInfoButton;

package/dist/types-ts4.5/view/EmbedModal/components/link-info/link-info-button/old.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { type OldLinkInfoButtonProps } from './types';
+/**
+ * @private
+ * @deprecated Remove when cleaning up fg `platform-smart-card-remove-legacy-button` - EDM-12433
+ */
+declare const LinkInfoButton: ({ content, href, icon, onClick, target, testId, }: OldLinkInfoButtonProps) => React.JSX.Element;
+export default LinkInfoButton;

package/dist/types-ts4.5/view/EmbedModal/components/link-info/link-info-button/types.d.ts

@@ -1,5 +1,7 @@
 /// <reference types="react" />
-export type LinkInfoButtonProps = {
+import { MessageDescriptor } from 'react-intl-next';
+import { IconProp } from '@atlaskit/button/new';
+export type OldLinkInfoButtonProps = {
     content: React.ReactNode;
     icon: React.ReactChild;
     onClick?: () => void;
@@ -7,3 +9,10 @@ export type LinkInfoButtonProps = {
     target?: string;
     testId?: string;
 };
+export type LinkInfoButtonProps = {
+    content: React.ReactNode;
+    icon: IconProp;
+    label: MessageDescriptor;
+    onClick?: () => void;
+    testId?: string;
+};

package/dist/types-ts4.5/view/FlexibleCard/components/common/image-icon/index.d.ts

@@ -1,4 +1,8 @@
-import React from 'react';
+/// <reference types="react" />
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { type ImageIconProps } from './types';
-declare const ImageIcon: ({ defaultIcon, testId, url, width, height, onError, onLoad, }: ImageIconProps) => React.JSX.Element;
+declare const ImageIcon: ({ defaultIcon, testId, url, width, height, appearance, onError, onLoad, }: ImageIconProps) => JSX.Element;
 export default ImageIcon;

package/dist/types-ts4.5/view/FlexibleCard/components/common/image-icon/types.d.ts

@@ -7,4 +7,5 @@ export type ImageIconProps = {
     height?: string;
     onError?: () => void;
     onLoad?: () => void;
+    appearance?: 'square' | 'round';
 };

package/dist/types-ts4.5/view/FlexibleCard/components/elements/icon/index.d.ts

@@ -6,5 +6,5 @@ import { type IconProps } from './types';
  * @param {IconProps} IconProps - The props necessary for the Icon element.
  * @see LinkIcon
  */
-declare const Icon: ({ icon, overrideIcon, label, name, position, className, render, size, testId, url, }: IconProps) => JSX.Element;
+declare const Icon: ({ icon, overrideIcon, label, name, position, className, render, size, testId, url, appearance, }: IconProps) => JSX.Element;
 export default Icon;

package/dist/types-ts4.5/view/FlexibleCard/components/elements/icon/types.d.ts

@@ -29,4 +29,8 @@ export type IconProps = ElementProps & {
      * The icon from this url will be used if no render function or Atlaskit Icon is provided.
      */
     url?: string;
+    /**
+     * Whether to display the icon as a square or round image.
+     */
+    appearance?: 'square' | 'round';
 };

package/dist/types-ts4.5/view/InlineCard/IconAndTitleLayout/index.d.ts

@@ -19,7 +19,8 @@ export interface IconAndTitleLayoutProps {
     rightSide?: React.ReactNode;
     rightSideSpacer?: boolean;
     onClick?: React.EventHandler<React.MouseEvent | React.KeyboardEvent>;
+    type?: string[];
 }
-export declare const IconAndTitleLayout: ({ icon, emoji, defaultIcon, onClick, children, title, titleColor, titleTextColor, link, rightSide, testId, }: IconAndTitleLayoutProps) => JSX.Element;
+export declare const IconAndTitleLayout: ({ icon, emoji, defaultIcon, onClick, children, title, titleColor, titleTextColor, link, rightSide, testId, type, }: IconAndTitleLayoutProps) => JSX.Element;
 export declare const IconTitleWrapper: (props: ComponentPropsWithoutRef<typeof Box>) => JSX.Element;
 export declare const LozengeWrapper: (props: ComponentPropsWithoutRef<typeof Box>) => JSX.Element;

package/dist/types-ts4.5/view/InlineCard/ResolvedView/index.d.ts

@@ -32,6 +32,8 @@ export interface InlineCardResolvedViewProps {
     actionOptions?: CardActionOptions;
     /** Truncates the card to one line */
     truncateInline?: boolean;
+    /** Type of inline card */
+    type?: string[];
 }
 export declare class InlineCardResolvedView extends React.Component<InlineCardResolvedViewProps> {
     renderLozenge(): React.JSX.Element | null;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "36.11.0",
+	"version": "36.12.0",
 	"description": "Smart card component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -41,7 +41,7 @@
 		"@atlaskit/heading": "^5.2.0",
 		"@atlaskit/icon": "^25.6.0",
 		"@atlaskit/icon-file-type": "^7.0.0",
-		"@atlaskit/icon-lab": "^4.9.0",
+		"@atlaskit/icon-lab": "^4.10.0",
 		"@atlaskit/icon-object": "^7.1.0",
 		"@atlaskit/icon-priority": "^6.3.0",
 		"@atlaskit/image": "^3.0.0",
@@ -55,7 +55,7 @@
 		"@atlaskit/linking-types": "^9.10.0",
 		"@atlaskit/logo": "^16.0.0",
 		"@atlaskit/lozenge": "^12.2.0",
-		"@atlaskit/menu": "^3.2.0",
+		"@atlaskit/menu": "^4.0.0",
 		"@atlaskit/modal-dialog": "^14.1.0",
 		"@atlaskit/outbound-auth-flow-client": "^3.4.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
@@ -97,7 +97,7 @@
 		"@atlaskit/css-reset": "^7.2.0",
 		"@atlaskit/link-test-helpers": "^8.0.0",
 		"@atlaskit/media-test-helpers": "^35.0.0",
-		"@atlaskit/react-ufo": "^3.8.0",
+		"@atlaskit/react-ufo": "^3.9.0",
 		"@atlaskit/ssr": "workspace:^",
 		"@atlaskit/visual-regression": "workspace:^",
 		"@atlassian/analytics-tooling": "^0.5.0",
@@ -226,6 +226,10 @@
 		},
 		"smart_links_noun_support": {
 			"type": "boolean"
+		},
+		"platform-smart-card-remove-legacy-button": {
+			"type": "boolean",
+			"showOnWebsiteForTransitiveDependencies": true
 		}
 	}
 }