@atlaskit/smart-card 18.0.21 → 19.0.1

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

@@ -1,15 +1,25 @@
 /// <reference types="react" />
-import { SmartLinkSize, SmartLinkStatus, SmartLinkTheme } from '../../../../constants';
-import { RetryOptions } from '../../types';
-export declare type ContainerProps = {
-    clickableContainer?: boolean;
-    hideElevation?: boolean;
-    hidePadding?: boolean;
-    hideBackground?: boolean;
+import { SmartLinkStatus } from '../../../../constants';
+import { FlexibleUiOptions, RetryOptions } from '../../types';
+export declare type ContainerProps = FlexibleUiOptions & {
+    /**
+     * Determines the onClick behaviour of Flexible UI. This will proxy to the
+     * TitleBlock if supplied.
+     */
+    onClick?: React.EventHandler<React.MouseEvent | React.KeyboardEvent>;
+    /**
+     * The options that determine the retry behaviour when a Smart Link errors.
+     */
     retry?: RetryOptions;
-    size?: SmartLinkSize;
+    /**
+     * The status of the Smart Link. Used to conditionally render different blocks
+     * when Smart Link is in different states.
+     */
     status?: SmartLinkStatus;
-    theme?: SmartLinkTheme;
-    onClick?: React.EventHandler<React.MouseEvent | React.KeyboardEvent>;
+    /**
+     * A `testId` prop is provided for specified elements, which is a unique
+     * string that appears as a data attribute `data-testid` in the rendered code,
+     * serving as a hook for automated tests
+     */
     testId?: string;
 };

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

@@ -2,8 +2,8 @@
 import React from 'react';
 import { AvatarGroupProps } from './types';
 /**
- * An element that displays a group of avatars.
- * @public
+ * A base element that displays a group of avatars.
+ * @internal
  * @param {AvatarGroupProps} AvatarGroupProps - The props necessary for the AvatarGroup.
  * @see AuthorGroup
  * @see CollaboratorGroup

package/dist/types/view/FlexibleCard/components/elements/avatar-group/types.d.ts

@@ -1,9 +1,21 @@
 import { ElementProps } from '../types';
 export declare type AvatarItemProps = {
+    /**
+     * The image to be used in an `@atlaskit/avatar - this should be a url to the image src
+     */
     src?: string;
+    /**
+     * The name of the person in the avatar.
+     */
     name: string;
 };
 export declare type AvatarGroupProps = ElementProps & {
+    /**
+     * An array of Avatars to show
+     */
     items?: AvatarItemProps[];
+    /**
+     * The maximum number of Avatars to show in the AvatarGroup
+     */
     maxCount?: number;
 };

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

@@ -2,8 +2,8 @@
 import React from 'react';
 import { BadgeProps } from './types';
 /**
- * An element that displays some text with an associated icon.
- * @public
+ * A base element that displays some text with an associated icon.
+ * @internal
  * @param {BadgeProps} BadgeProps - The props necessary for the Badge.
  * @see CommentCount
  * @see ViewCount

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

@@ -1,7 +1,17 @@
 import { ElementProps } from '../types';
 import { IconType } from '../../../../../constants';
 export declare type BadgeProps = ElementProps & {
+    /**
+     * The Atlaskit Icon to display next to the label. If this is not supplied,
+     * then the badge icon will fallback to the URL provided.
+     */
     icon?: IconType;
+    /**
+     * The icon from this URL will be used for the badge if no Atlaskit Icon is provided.
+     */
     url?: string;
+    /**
+     * The text to display for the badge
+     */
     label?: string;
 };

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

@@ -2,8 +2,8 @@
 import React from 'react';
 import { DateTimeProps } from './types';
 /**
- * An element that displays an ISO Timestamp in text.
- * @public
+ * A base element that displays an ISO Timestamp in text.
+ * @internal
  * @param {DateTimeProps} DateTimeProps - The props necessary for the DateTime element.
  * @see CreatedOn
  * @see ModifiedOn

package/dist/types/view/FlexibleCard/components/elements/date-time/types.d.ts

@@ -1,6 +1,12 @@
 import { ElementProps } from '../types';
 export declare type DateTimeType = 'created' | 'modified';
 export declare type DateTimeProps = ElementProps & {
+    /**
+     * Whether the date time element text should contain "Modified" or "Created"
+     */
     type?: DateTimeType;
+    /**
+     * The date to display in the element.
+     */
     date?: Date;
 };

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

@@ -2,8 +2,8 @@
 import React from 'react';
 import { IconProps } from './types';
 /**
- * An element that displays an Icon or favicon.
- * @public
+ * A base element that displays an Icon or favicon.
+ * @internal
  * @param {IconProps} IconProps - The props necessary for the Icon element.
  * @see LinkIcon
  */

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

@@ -2,13 +2,26 @@
 import { ElementProps } from '../types';
 import { IconType, SmartLinkPosition } from '../../../../../constants';
 export declare type IconProps = ElementProps & {
+    /**
+     * If provided, Icon element will use this render function instead.
+     */
     render?: () => React.ReactNode;
+    /**
+     * The Atlaskit Icon to display. If no icon is provided, then the URL provided
+     * will be used.
+     */
     icon?: IconType;
+    /**
+     * The label provided to the Atlaskit Icon.
+     */
     label?: string;
-    /** Determines how the icon should be rendered.
-     * Top: Icon will be rendered at the "top" of the smart link.
-     * Center: Icon will be rendered at the "center" of the smart link relative to the vertical height.
+    /**
+     * Determines the position of the link icon in relative to the vertical
+     * height.  It can either be centred or placed on “top”. Default is top.
      */
     position?: SmartLinkPosition;
+    /**
+     * The icon from this url will be used if no render function or Atlaskit Icon is provided.
+     */
     url?: string;
 };

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

@@ -8,12 +8,12 @@ import { TextProps } from './text/types';
 import { DateTimeProps } from './date-time/types';
 import { MediaProps } from './media/types';
 /**
- * Creates an AvatarGroup element using the data from AuthorGroup in the Flexible UI Context.
+ * An AvatarGroup element using the data from AuthorGroup in the Flexible UI Context.
  * @see AvatarGroup
  */
 export declare const AuthorGroup: import("react").FC<AvatarGroupProps>;
 /**
- * Creates an AvatarGroup element using the data from CollaboratorGroup in the Flexible UI Context.
+ * An AvatarGroup element using the data from CollaboratorGroup in the Flexible UI Context.
  * @see AvatarGroup
  */
 export declare const CollaboratorGroup: import("react").FC<AvatarGroupProps>;

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

@@ -2,9 +2,9 @@
 import React from 'react';
 import { LinkProps } from './types';
 /**
- * An element that represent.
- * @public
- * @param {LinkProps} LinkProps - The props necessary for the Icon element.
+ * A base element that represent an anchor.
+ * @internal
+ * @param {LinkProps} LinkProps - The props necessary for the Link element.
  * @see LinkIcon
  */
 declare const Link: React.FC<LinkProps>;

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

@@ -1,11 +1,31 @@
 /// <reference types="react" />
 import { ElementProps } from '../types';
 import { SmartLinkTheme } from '../../../../../constants';
+import { AnchorTarget } from '../../types';
 export declare type LinkProps = ElementProps & {
+    /**
+     * Determines the behaviour when the Link is clicked. By default is used to
+     * propagate analytics.
+     */
     onClick?: React.EventHandler<React.MouseEvent | React.KeyboardEvent>;
+    /**
+     * The number of lines that the link text should spread over. Maximum of 2 lines.
+     */
     maxLines?: number;
+    /**
+     * The text to display. Overrides the default link text.
+     */
     text?: string;
+    /**
+     * The theme of the link. Can be Black, or Link (default blue URL).
+     */
     theme?: SmartLinkTheme;
+    /**
+     * The url that the Smart Link should be based upon.
+     */
     url?: string;
-    target?: '_blank' | '_self' | '_top' | '_parent';
+    /**
+     * The href target behaviour of the link.
+     */
+    target?: AnchorTarget;
 };

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

@@ -2,8 +2,8 @@
 import React from 'react';
 import { LozengeProps } from './types';
 /**
- * An element that displays a Lozenge.
- * @public
+ * A base element that displays a Lozenge.
+ * @internal
  * @param {LozengeProps} LozengeProps - The props necessary for the Lozenge element.
  * @see State
  */

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

@@ -1,6 +1,12 @@
 import { ElementProps } from '../types';
 export declare type LozengeAppearance = 'default' | 'inprogress' | 'moved' | 'new' | 'removed' | 'success';
 export declare type LozengeProps = ElementProps & {
+    /**
+     * Determines the appearance of the Atlaskit lozenge.
+     */
     appearance?: LozengeAppearance;
+    /**
+     * The text to display within the lozenge.
+     */
     text?: string;
 };

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

@@ -2,8 +2,8 @@
 import React from 'react';
 import { MediaProps } from './types';
 /**
- * An element that displays a Media.
- * @public
+ * A base element that displays a Media.
+ * @internal
  * @param {MediaProps} MediaProps - The props necessary for the Media element.
  * @see Preview
  */

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

@@ -1,6 +1,12 @@
 import { ElementProps } from '../types';
 import { MediaType } from '../../../../../constants';
 export declare type MediaProps = ElementProps & {
+    /**
+     * The type of media to display. Can be image.
+     */
     type?: MediaType;
+    /**
+     * The URL of the associated media to display.
+     */
     url?: string;
 };

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

@@ -2,8 +2,8 @@
 import React from 'react';
 import { TextProps } from './types';
 /**
- * An element that displays some Text.
- * @public
+ * A base element that displays some Text.
+ * @internal
  * @param {TextProps} TextProps - The props necessary for the Text element.
  * @see Title
  */

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

@@ -1,7 +1,17 @@
 import { ElementProps } from '../types';
 import { MessageProps } from '../../types';
 export declare type TextProps = ElementProps & {
+    /**
+     * Determines the formatted message (i18n) to display.
+     * If this is provided, the content prop will not be displayed.
+     */
     message?: MessageProps;
+    /**
+     * The raw text content to display.
+     */
     content?: string;
+    /**
+     * The maximum number of lines the text should span over. Maximum is 2.
+     */
     maxLines?: number;
 };

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

@@ -1,7 +1,18 @@
 import { SerializedStyles } from '@emotion/core';
 import { SmartLinkSize } from '../../../../constants';
 export declare type ElementProps = {
+    /**
+     * Any additional CSS properties to apply to the element.
+     */
     overrideCss?: SerializedStyles;
+    /**
+     * The size of the element to display.
+     */
     size?: SmartLinkSize;
+    /**
+     * A `testId` prop is provided for specified elements, which is a unique
+     * string that appears as a data attribute `data-testid` in the rendered code,
+     * serving as a hook for automated tests
+     */
     testId?: string;
 };

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

@@ -1,4 +1,5 @@
 import { MessageDescriptor } from 'react-intl-next';
+export declare type AnchorTarget = '_blank' | '_self' | '_top' | '_parent';
 export declare type MessageProps = {
     descriptor: MessageDescriptor;
     values?: Record<string, string>;

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

@@ -1,29 +1,99 @@
 /// <reference types="react" />
 import { MessageDescriptor } from 'react-intl-next';
-import { CardState } from '../../state/store/types';
+import { CardState } from '@atlaskit/linking-common';
+import { CardProviderRenderers } from '@atlaskit/link-provider';
 import { SmartLinkSize, SmartLinkTheme } from '../../constants';
 import { CardAppearance } from '../../view/Card';
-import { CardProviderRenderers } from '../../state/context/types';
 export declare type FlexibleCardProps = {
+    /**
+     * Determines the appearance of the Smart Link.
+     * @internal
+     */
     appearance?: CardAppearance;
+    /**
+     * Determines the status and data of the Smart Link.
+     * @internal
+     */
     cardState: CardState;
+    /**
+     * The Flexible UI block component(s) to be rendered.
+     * The minimum is a TitleBlock.
+     */
+    children: React.ReactNode;
+    /**
+     * Determines the onClick behaviour of Flexible UI. This will proxy to the
+     * TitleBlock if supplied.
+     */
+    onClick?: React.EventHandler<React.MouseEvent | React.KeyboardEvent>;
+    /**
+     * An additional action that can be performed when link is not resolved, e.g.
+     * connect account to gain access to 403 link.
+     * @internal
+     */
     onAuthorize?: () => void;
+    /**
+     * Any additional renderers required by Flexible UI. Currently used by icon
+     * to render Emoji.
+     */
     renderers?: CardProviderRenderers;
+    /**
+     * A `testId` prop is provided for specified elements, which is a unique
+     * string that appears as a data attribute `data-testid` in the rendered code,
+     * serving as a hook for automated tests
+     */
     testId?: string;
+    /**
+     * Determines the appearance of Flexible UI.
+     * @see FlexibleUiOptions
+     */
     ui?: FlexibleUiOptions;
+    /**
+     * Determines the URL of the Smart Link.
+     */
     url: string;
-    onClick?: React.EventHandler<React.MouseEvent | React.KeyboardEvent>;
 };
 export declare type FlexibleUiOptions = {
+    /**
+     * Determines whether the entire Smart Link container should be clickable.
+     */
     clickableContainer?: boolean;
+    /**
+     * Determines whether to hide elevation styling.
+     */
     hideElevation?: boolean;
+    /**
+     * Determines whether to hide css padding styling.
+     */
     hidePadding?: boolean;
+    /**
+     * Determines whether to hide css background color styling.
+     */
     hideBackground?: boolean;
+    /**
+     * Determines the default padding and sizing of the underlying blocks and
+     * elements within Flexible UI.
+     */
     size?: SmartLinkSize;
+    /**
+     * Determines the default theme of the Flexible UI.
+     * Can be Black or Link (default URL blue)
+     */
     theme?: SmartLinkTheme;
 };
+/**
+ * Retry options used if Smart Link resolves to an errored state.
+ */
 export declare type RetryOptions = {
+    /**
+     * Determines the error message to show.
+     */
     descriptor?: MessageDescriptor;
+    /**
+     * Determines the onClick behaviour of the error message.
+     */
     onClick?: ((e: React.MouseEvent<HTMLElement>) => void) | undefined;
+    /**
+     * A list of optional value pairs for string interpolation in the message.
+     */
     values?: Record<string, string>;
 };

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

@@ -1,7 +1,7 @@
 import { JsonLd } from 'json-ld-types';
+import { CardProviderRenderers } from '@atlaskit/link-provider';
 import { RetryOptions } from './types';
 import { SmartLinkStatus } from '../../constants';
 import { FlexibleUiDataContext } from '../../state/flexible-ui-context/types';
-import { CardProviderRenderers } from '../../state/context/types';
 export declare const getContextByStatus: (url: string, status?: SmartLinkStatus | undefined, details?: JsonLd.Response<JsonLd.Data.BaseData> | undefined, renderers?: CardProviderRenderers | undefined) => FlexibleUiDataContext | undefined;
 export declare const getRetryOptions: (url: string, status?: SmartLinkStatus | undefined, details?: JsonLd.Response<JsonLd.Data.BaseData> | undefined, onAuthorize?: (() => void) | undefined) => RetryOptions | undefined;

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

@@ -1,6 +1,11 @@
 import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
+import { ElementItem } from '../FlexibleCard/components/blocks/types';
 export interface HoverCardProps extends WithAnalyticsEventsProps {
     url: string;
 }
 export declare type PreviewDisplay = 'card' | 'embed';
 export declare type PreviewInvokeMethod = 'keyboard' | 'mouse_hover' | 'mouse_click';
+export interface MetadataOptions {
+    primary: Array<ElementItem>;
+    secondary: Array<ElementItem>;
+}

package/dist/types/view/HoverCard/utils.d.ts

@@ -0,0 +1,2 @@
+import { JsonLd } from 'json-ld-types';
+export declare const getSimulatedMetadata: (extensionKey: string) => JsonLd.Primitives.Property<any>;

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

@@ -1,6 +1,6 @@
 import { EventHandler, MouseEvent, KeyboardEvent } from 'react';
+import { CardProviderRenderers } from '@atlaskit/link-provider';
 import { CardState } from '../../state/types';
-import { CardProviderRenderers } from '../../state/context/types';
 import { InlinePreloaderStyle } from '../types';
 export declare type InlineCardProps = {
     url: string;

package/docs-helpers/flexible-ui-action-item.tsx

@@ -0,0 +1,6 @@
+import { BaseActionItem } from '../src/view/FlexibleCard/components/blocks/types';
+
+/**
+ * Hack to display Flexible UI `ActionItem` for documentation purpose.
+ */
+export default (props: BaseActionItem) => null;

package/docs-helpers/flexible-ui-actions-prop.tsx

@@ -0,0 +1,6 @@
+import { BaseActionItem } from '../src/view/FlexibleCard/components/blocks/types';
+
+/**
+ * Hack to display Flexible UI `actions` prop for documentation purpose.
+ */
+export default (props: { actions?: BaseActionItem[] }) => null;

package/docs-helpers/flexible-ui-element-item.tsx

@@ -0,0 +1,6 @@
+import { ElementItem } from '../src/view/FlexibleCard/components/blocks/types';
+
+/**
+ * Hack to display Flexible UI `ElementItem` for documentation purpose.
+ */
+export default (props: ElementItem) => null;

package/docs-helpers/flexible-ui-prop.tsx

@@ -0,0 +1,6 @@
+import { FlexibleUiOptions } from '../src/view/FlexibleCard/types';
+
+/**
+ * Hack to display Flexible UI `ui` prop in details for documentation purpose.
+ */
+export default (props: FlexibleUiOptions) => null;

package/docs-helpers/flexible-ui.tsx

@@ -0,0 +1,28 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { Prop, Props } from '@atlaskit/docs';
+
+const actionsStyles = css`
+  > div,
+  > div > div {
+    margin-top: 0;
+  }
+  h3 {
+    display: none;
+  }
+`;
+
+const actionsProps = (
+  <Props
+    heading=""
+    props={require('!!extract-react-types-loader!../docs-helpers/flexible-ui-actions-prop')}
+  />
+);
+
+export const overrideActionsProps = (props: Object) => (
+  <Prop
+    {...props}
+    shapeComponent={() => <div css={actionsStyles}>{actionsProps}</div>}
+    type="arrayType"
+  />
+);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "18.0.21",
+  "version": "19.0.1",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -33,7 +33,7 @@
     "@atlaskit/icon-object": "^6.2.0",
     "@atlaskit/icon-priority": "^6.3.0",
     "@atlaskit/in-product-testing": "^0.1.0",
-    "@atlaskit/linking-common": "^1.0.0",
+    "@atlaskit/linking-common": "^1.1.0",
     "@atlaskit/logo": "^13.5.0",
     "@atlaskit/lozenge": "^11.1.0",
     "@atlaskit/media-common": "^2.12.0",
@@ -50,20 +50,16 @@
     "@emotion/core": "^10.0.9",
     "@emotion/styled": "^10.0.7",
     "@formatjs/intl-utils": "^3.8.4",
-    "async-retry": "^1.2.3",
-    "dataloader": "^2.0.0",
     "facepaint": "^1.2.1",
     "json-ld-types": "2.4.1",
-    "p-throttle": "^4.1.1",
     "react-error-boundary": "^3.1.3",
     "react-lazily-render": "^1.2.0",
     "react-loadable": "^5.1.0",
     "react-render-image": "^1.1.3",
-    "redux": "^3.7.2",
-    "setimmediate": "^1.0.5",
     "uuid": "^3.1.0"
   },
   "peerDependencies": {
+    "@atlaskit/link-provider": "^1.0.0",
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
     "react-intl-next": "npm:react-intl@^5.18.1"
@@ -93,13 +89,11 @@
     "@testing-library/react": "^8.0.1",
     "@testing-library/react-hooks": "^1.0.4",
     "@testing-library/user-event": "10.4.0",
-    "@types/async-retry": "^1.4.1",
     "@types/enzyme": "^3.1.15",
     "@types/lodash": "^4.14.157",
     "@types/lorem-ipsum": "^1.0.2",
     "@types/react": "^16.8.0",
     "@types/react-loadable": "^5.4.1",
-    "@types/redux": "^3.6.0",
     "abortcontroller-polyfill": "^1.1.9",
     "brace": "^0.11.1",
     "enzyme": "^3.10.0",