@atlaskit/smart-card 17.4.3 → 17.5.2

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

@@ -4,10 +4,14 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["name"],
-    _excluded2 = ["name"];
+    _excluded2 = ["name", "hideContent", "hideIcon", "onClick"];
 
 var _ElementDisplaySchema, _templateObject, _templateObject2, _templateObject3;
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 import React from 'react';
 import { css } from '@emotion/core';
 import { ElementName, SmartLinkDirection, SmartLinkSize } from '../../../../constants';
@@ -15,9 +19,8 @@ import * as Elements from '../elements';
 import * as Actions from '../actions';
 import { isFlexibleUiElement } from '../../../../utils/flexible';
 import ActionGroup from './action-group';
-import ElementGroup from './element-group'; // Determine whether the element can be display as inline/block.
-
-export var ElementDisplaySchema = (_ElementDisplaySchema = {}, _defineProperty(_ElementDisplaySchema, ElementName.AuthorGroup, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.CollaboratorGroup, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.CommentCount, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.CreatedBy, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.CreatedOn, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.LinkIcon, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.ModifiedBy, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.ModifiedOn, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.Priority, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.ProgrammingLanguage, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.Snippet, ['block']), _defineProperty(_ElementDisplaySchema, ElementName.State, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.SubscriberCount, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.Title, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.Provider, ['inline']), _ElementDisplaySchema);
+import ElementGroup from './element-group';
+export var ElementDisplaySchema = (_ElementDisplaySchema = {}, _defineProperty(_ElementDisplaySchema, ElementName.AuthorGroup, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.CollaboratorGroup, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.CommentCount, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.CreatedBy, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.CreatedOn, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.LinkIcon, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.ModifiedBy, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.ModifiedOn, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.Preview, ['block']), _defineProperty(_ElementDisplaySchema, ElementName.Priority, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.ProgrammingLanguage, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.Snippet, ['block']), _defineProperty(_ElementDisplaySchema, ElementName.State, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.SubscriberCount, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.Title, ['inline']), _defineProperty(_ElementDisplaySchema, ElementName.Provider, ['inline']), _ElementDisplaySchema);
 
 var getDirectionStyles = function getDirectionStyles(direction) {
   switch (direction) {
@@ -110,17 +113,33 @@ export var renderElementItems = function renderElementItems() {
 export var renderActionItems = function renderActionItems() {
   var items = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   var size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : SmartLinkSize.Medium;
+  var appearance = arguments.length > 2 ? arguments[2] : undefined;
   var actions = items.reduce(function (acc, curr, idx) {
     var name = curr.name,
+        hideContent = curr.hideContent,
+        hideIcon = curr.hideIcon,
+        onClick = curr.onClick,
         props = _objectWithoutProperties(curr, _excluded2);
 
     var Action = Actions[name];
 
+    var actionProps = _objectSpread({}, props);
+
+    if (hideContent) {
+      actionProps.content = '';
+    }
+
+    if (hideIcon) {
+      actionProps.icon = undefined;
+    }
+
     if (Action) {
       return [].concat(_toConsumableArray(acc), [/*#__PURE__*/React.createElement(Action, _extends({
         size: size,
-        key: idx
-      }, props))]);
+        key: idx,
+        appearance: appearance,
+        onClick: onClick
+      }, actionProps))]);
     }
 
     return acc;

package/dist/esm/view/FlexibleCard/components/common/atlaskit-icon/index.js

@@ -281,7 +281,7 @@ var AtlaskitIcon = function AtlaskitIcon(_ref3) {
     case IconType.Jira:
       // Logo component has a different prop set from other icon components
       return /*#__PURE__*/React.createElement(ImportedIcon, {
-        "data-testId": testId // Confluence and Jira imports don't have native testId prop
+        "data-testid": testId // Confluence and Jira imports don't have native testId prop
         ,
         textColor: N700,
         iconColor: B200,

package/dist/esm/view/FlexibleCard/components/elements/index.js

@@ -11,6 +11,7 @@ export var CreatedOn = createElement(ElementName.CreatedOn);
 export var LinkIcon = createElement(ElementName.LinkIcon);
 export var ModifiedBy = createElement(ElementName.ModifiedBy);
 export var ModifiedOn = createElement(ElementName.ModifiedOn);
+export var Preview = createElement(ElementName.Preview);
 export var Priority = createElement(ElementName.Priority);
 export var ProgrammingLanguage = createElement(ElementName.ProgrammingLanguage);
 export var Snippet = createElement(ElementName.Snippet);

package/dist/esm/view/FlexibleCard/components/elements/media/index.js

@@ -0,0 +1,34 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject;
+
+/** @jsx jsx */
+import React from 'react';
+import { css, jsx } from '@emotion/core';
+import ImageIcon from '../../common/image-icon';
+
+var styles = function styles(url) {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  width: 100%;\n  > img {\n    max-width: 100%;\n    max-height: 100%;\n  }\n"])));
+};
+
+var Media = function Media(_ref) {
+  var _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'smart-element-media' : _ref$testId,
+      type = _ref.type,
+      url = _ref.url;
+
+  if (!type || !url) {
+    return null;
+  }
+
+  return jsx("div", {
+    css: styles(url),
+    "data-smart-element-media": true,
+    "data-testid": testId
+  }, jsx(ImageIcon, {
+    testId: "".concat(testId, "-image"),
+    url: url
+  }));
+};
+
+export default Media;

package/dist/esm/view/FlexibleCard/components/elements/media/types.js

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

package/dist/esm/view/FlexibleCard/components/elements/utils.js

@@ -11,6 +11,7 @@ import Lozenge from './lozenge';
 import { FlexibleUiContext } from '../../../../state/flexible-ui-context';
 import Badge from './badge';
 import AvatarGroup from './avatar-group';
+import Media from './media';
 import Text from './text';
 import { messages } from '../../../../messages';
 import DateTime from './date-time';
@@ -31,6 +32,8 @@ var elementMappings = (_elementMappings = {}, _defineProperty(_elementMappings,
   component: Icon
 }), _defineProperty(_elementMappings, ElementName.ModifiedBy, {
   component: Text
+}), _defineProperty(_elementMappings, ElementName.Preview, {
+  component: Media
 }), _defineProperty(_elementMappings, ElementName.Priority, {
   component: Badge
 }), _defineProperty(_elementMappings, ElementName.ProgrammingLanguage, {

package/dist/types/constants.d.ts

@@ -88,6 +88,7 @@ export declare enum ElementName {
     LinkIcon = "LinkIcon",
     ModifiedBy = "ModifiedBy",
     ModifiedOn = "ModifiedOn",
+    Preview = "Preview",
     Priority = "Priority",
     ProgrammingLanguage = "ProgrammingLanguage",
     Snippet = "Snippet",
@@ -164,3 +165,9 @@ export declare enum IconType {
     ProgrammingLanguage = "Badge:ProgrammingLanguage",
     Subscriber = "Badge:Subscriber"
 }
+/**
+ * Type for Flexible UI's Media element
+ */
+export declare enum MediaType {
+    Image = "image"
+}

package/dist/types/extractors/flexible/extract-preview.d.ts

@@ -0,0 +1,4 @@
+import { JsonLd } from 'json-ld-types';
+import { Media } from '../../state/flexible-ui-context/types';
+declare const extractPreview: (data: JsonLd.Data.BaseData) => Media | undefined;
+export default extractPreview;

package/dist/types/index.d.ts

@@ -17,5 +17,5 @@ export { useSmartLinkEvents } from './view/SmartLinkEvents/useSmartLinkEvents';
 export { contentFooterClassName, metadataListClassName, blockCardResolvingViewClassName, blockCardResolvedViewClassName, blockCardForbiddenViewClassName, blockCardIconImageClassName, blockCardResolvedViewByClassName, blockCardForbiddenViewLinkClassName, blockCardContentClassName, blockCardContentHeaderClassName, blockCardContentHeaderNameClassName, blockCardNotFoundViewClassName, blockCardErroredViewClassName, } from './classNames';
 export { loadingPlaceholderClassName } from './view/CardWithUrl/component-lazy/LazyFallback';
 export { ActionName, ElementName, SmartLinkDirection, SmartLinkPosition, SmartLinkSize, SmartLinkTheme, } from './constants';
-export { MetadataBlock, SnippetBlock, TitleBlock, } from './view/FlexibleCard/components/blocks';
+export { MetadataBlock, PreviewBlock, SnippetBlock, TitleBlock, } from './view/FlexibleCard/components/blocks';
 export type { ActionItem, ElementItem, } from './view/FlexibleCard/components/blocks/types';

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

@@ -1,6 +1,6 @@
 import { LinkLozenge } from '../../extractors/common/lozenge/types';
 import { LinkPerson } from '../../extractors/common/person/types';
-import { IconType } from '../../constants';
+import { IconType, MediaType } from '../../constants';
 export declare type FlexibleUiDataContext = {
     authorGroup?: LinkPerson[];
     collaboratorGroup?: LinkPerson[];
@@ -10,6 +10,7 @@ export declare type FlexibleUiDataContext = {
     linkIcon?: Icon;
     modifiedBy?: string;
     modifiedOn?: string;
+    preview?: Media;
     priority?: Icon;
     programmingLanguage?: string;
     snippet?: string;
@@ -24,3 +25,7 @@ export declare type Icon = {
     label?: string;
     url?: string;
 };
+export declare type Media = {
+    type: MediaType;
+    url: string;
+};

package/dist/types/view/FlexibleCard/components/blocks/action-group/types.d.ts

@@ -1,8 +1,10 @@
 import { SmartLinkSize, SmartLinkDirection } from '../../../../../constants';
 import { ActionItem } from '../types';
+import { Appearance } from '@atlaskit/button';
 export declare type ActionGroupProps = {
     items: ActionItem[];
     size?: SmartLinkSize;
     direction?: SmartLinkDirection;
     testId?: string;
+    appearance?: Appearance;
 };

package/dist/types/view/FlexibleCard/components/blocks/footer-block/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { FooterBlockProps } from './types';
+declare const FooterBlock: React.FC<FooterBlockProps>;
+export default FooterBlock;

package/dist/types/view/FlexibleCard/components/blocks/footer-block/types.d.ts

@@ -0,0 +1,4 @@
+import { ActionItem, BlockProps } from '../types';
+export declare type FooterBlockProps = BlockProps & {
+    actions?: ActionItem[];
+};

package/dist/types/view/FlexibleCard/components/blocks/index.d.ts

@@ -1,3 +1,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';

package/dist/types/view/FlexibleCard/components/blocks/preview-block/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { PreviewBlockProps } from './types';
+declare const PreviewBlock: React.FC<PreviewBlockProps>;
+export default PreviewBlock;

package/dist/types/view/FlexibleCard/components/blocks/preview-block/types.d.ts

@@ -0,0 +1,2 @@
+import { BlockProps } from '../types';
+export declare type PreviewBlockProps = BlockProps;

package/dist/types/view/FlexibleCard/components/blocks/types.d.ts

@@ -13,5 +13,7 @@ export declare type ElementItem = {
 export declare type ActionItem = {
     name: ActionName;
     testId?: string;
+    hideContent?: boolean;
+    hideIcon?: boolean;
     onClick: () => any;
 };

package/dist/types/view/FlexibleCard/components/blocks/utils.d.ts

@@ -8,4 +8,4 @@ export declare const getGapSize: (size: SmartLinkSize) => number;
 export declare const getBaseStyles: (direction: SmartLinkDirection, size: SmartLinkSize) => SerializedStyles;
 export declare const renderChildren: (children: React.ReactNode, size: SmartLinkSize) => React.ReactNode;
 export declare const renderElementItems: (items?: ElementItem[], display?: ElementDisplaySchemaType) => React.ReactNode | undefined;
-export declare const renderActionItems: (items?: ActionItem[], size?: SmartLinkSize) => React.ReactNode | undefined;
+export declare const renderActionItems: (items?: ActionItem[], size?: SmartLinkSize, appearance?: "link" | "default" | "danger" | "primary" | "subtle" | "subtle-link" | "warning" | undefined) => React.ReactNode | undefined;

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

@@ -6,6 +6,7 @@ import { LozengeProps } from './lozenge/types';
 import { AvatarGroupProps } from './avatar-group/types';
 import { TextProps } from './text/types';
 import { DateTimeProps } from './date-time/types';
+import { MediaProps } from './media/types';
 export declare const AuthorGroup: import("react").FC<AvatarGroupProps>;
 export declare const CollaboratorGroup: import("react").FC<AvatarGroupProps>;
 export declare const CommentCount: import("react").FC<BadgeProps>;
@@ -14,6 +15,7 @@ export declare const CreatedOn: import("react").FC<DateTimeProps>;
 export declare const LinkIcon: import("react").FC<IconProps>;
 export declare const ModifiedBy: import("react").FC<TextProps>;
 export declare const ModifiedOn: import("react").FC<DateTimeProps>;
+export declare const Preview: import("react").FC<MediaProps>;
 export declare const Priority: import("react").FC<BadgeProps>;
 export declare const ProgrammingLanguage: import("react").FC<BadgeProps>;
 export declare const Snippet: import("react").FC<TextProps>;

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

@@ -0,0 +1,5 @@
+/** @jsx jsx */
+import React from 'react';
+import { MediaProps } from './types';
+declare const Media: React.FC<MediaProps>;
+export default Media;

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

@@ -0,0 +1,6 @@
+import { ElementProps } from '../types';
+import { MediaType } from '../../../../../constants';
+export declare type MediaProps = ElementProps & {
+    type?: MediaType;
+    url?: string;
+};

package/package.json

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