@atlaskit/smart-card 19.1.26 → 19.1.27

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/smart-card
 
+## 19.1.27
+
+### Patch Changes
+
+- [`98d3f88e428`](https://bitbucket.org/atlassian/atlassian-frontend/commits/98d3f88e428) - This PR adds external element typings for Flexible UI metadata.
+  This means code completion will now be available when an element has a prop that can be overridden.
+  As of this PR, these are the `CreatedOn` and `ModifiedOn` elements, which now accept some `text` which will override the existing text.
+
+  This PR also exposes the overrideCss prop, allowing integrators to supply any CSS for their elements.
+
 ## 19.1.26
 
 ### Patch Changes

package/dist/cjs/version.json

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

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

@@ -128,11 +128,12 @@ var renderElementItems = function renderElementItems() {
     var name = curr.name,
         props = (0, _objectWithoutProperties2.default)(curr, _excluded);
     var Element = Elements[name];
+    var typedProps = props;
 
     if (Element && isElementDisplayValid(name, display)) {
       var element = /*#__PURE__*/_react.default.createElement(Element, (0, _extends2.default)({
         key: idx
-      }, props));
+      }, typedProps));
 
       if (!isElementNull(element)) {
         return [].concat((0, _toConsumableArray2.default)(acc), [element]);

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

@@ -33,45 +33,24 @@ var CollaboratorGroup = (0, _utils.createElement)(_constants.ElementName.Collabo
 exports.CollaboratorGroup = CollaboratorGroup;
 var CommentCount = (0, _utils.createElement)(_constants.ElementName.CommentCount);
 /**
- * Creates a ViewCount Badge element using the data from ViewCount in the Flexible UI Context.
- * @see Badge
+ * Creates a CreatedOn DateTime element using the data from CreatedOn in the Flexible UI Context.
+ * @see DateTime
  */
 
 exports.CommentCount = CommentCount;
-var ViewCount = (0, _utils.createElement)(_constants.ElementName.ViewCount);
-/**
- * Creates a ReactCount Badge element using the data from ReactCount in the Flexible UI Context.
- * @see Badge
- */
-
-exports.ViewCount = ViewCount;
-var ReactCount = (0, _utils.createElement)(_constants.ElementName.ReactCount);
-/**
- * Creates a VoteCount Badge element using the data from VoteCount in the Flexible UI Context.
- * @see Badge
- */
-
-exports.ReactCount = ReactCount;
-var VoteCount = (0, _utils.createElement)(_constants.ElementName.VoteCount);
+var CreatedOn = (0, _utils.createElement)(_constants.ElementName.CreatedOn);
 /**
  * Creates a CreatedBy text element using the data from CreatedBy in the Flexible UI Context.
  * @see Text
  */
 
-exports.VoteCount = VoteCount;
+exports.CreatedOn = CreatedOn;
 var CreatedBy = (0, _utils.createElement)(_constants.ElementName.CreatedBy);
-/**
- * Creates a CreatedOn DateTime element using the data from CreatedOn in the Flexible UI Context.
- * @see DateTime
- */
-
-exports.CreatedBy = CreatedBy;
-var CreatedOn = (0, _utils.createElement)(_constants.ElementName.CreatedOn);
 /**
  * Creates an element that contains Last Commit hash
  */
 
-exports.CreatedOn = CreatedOn;
+exports.CreatedBy = CreatedBy;
 var LatestCommit = (0, _utils.createElement)(_constants.ElementName.LatestCommit);
 /**
  * Creates a LinkIcon Icon element using the data from LinkIcon in the Flexible UI Context.
@@ -115,12 +94,26 @@ var Priority = (0, _utils.createElement)(_constants.ElementName.Priority);
 
 exports.Priority = Priority;
 var ProgrammingLanguage = (0, _utils.createElement)(_constants.ElementName.ProgrammingLanguage);
+/**
+ * Creates a Provider Badge element using the data from Provider in the Flexible UI Context.
+ * @see Badge
+ */
+
+exports.ProgrammingLanguage = ProgrammingLanguage;
+var Provider = (0, _utils.createElement)(_constants.ElementName.Provider);
+/**
+ * Creates a ReactCount Badge element using the data from ReactCount in the Flexible UI Context.
+ * @see Badge
+ */
+
+exports.Provider = Provider;
+var ReactCount = (0, _utils.createElement)(_constants.ElementName.ReactCount);
 /**
  * Creates a Snippet element using the data from Snippet in the Flexible UI Context.
  * @see Text
  */
 
-exports.ProgrammingLanguage = ProgrammingLanguage;
+exports.ReactCount = ReactCount;
 var Snippet = (0, _utils.createElement)(_constants.ElementName.Snippet);
 /**
  * Creates a State Lozenge element using the data from State in the Flexible UI Context.
@@ -145,10 +138,17 @@ var SubscriberCount = (0, _utils.createElement)(_constants.ElementName.Subscribe
 exports.SubscriberCount = SubscriberCount;
 var Title = (0, _utils.createElement)(_constants.ElementName.Title);
 /**
- * Creates a Provider Badge element using the data from Provider in the Flexible UI Context.
+ * Creates a ViewCount Badge element using the data from ViewCount in the Flexible UI Context.
  * @see Badge
  */
 
 exports.Title = Title;
-var Provider = (0, _utils.createElement)(_constants.ElementName.Provider);
-exports.Provider = Provider;
+var ViewCount = (0, _utils.createElement)(_constants.ElementName.ViewCount);
+/**
+ * Creates a VoteCount Badge element using the data from VoteCount in the Flexible UI Context.
+ * @see Badge
+ */
+
+exports.ViewCount = ViewCount;
+var VoteCount = (0, _utils.createElement)(_constants.ElementName.VoteCount);
+exports.VoteCount = VoteCount;

package/dist/es2019/version.json

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

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

@@ -116,11 +116,12 @@ export const renderElementItems = (items = [], display = 'inline') => {
       ...props
     } = curr;
     const Element = Elements[name];
+    const typedProps = props;
 
     if (Element && isElementDisplayValid(name, display)) {
       const element = /*#__PURE__*/React.createElement(Element, _extends({
         key: idx
-      }, props));
+      }, typedProps));
 
       if (!isElementNull(element)) {
         return [...acc, element];

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

@@ -22,35 +22,17 @@ export const CollaboratorGroup = createElement(ElementName.CollaboratorGroup);
 
 export const CommentCount = createElement(ElementName.CommentCount);
 /**
- * Creates a ViewCount Badge element using the data from ViewCount in the Flexible UI Context.
- * @see Badge
- */
-
-export const ViewCount = createElement(ElementName.ViewCount);
-/**
- * Creates a ReactCount Badge element using the data from ReactCount in the Flexible UI Context.
- * @see Badge
- */
-
-export const ReactCount = createElement(ElementName.ReactCount);
-/**
- * Creates a VoteCount Badge element using the data from VoteCount in the Flexible UI Context.
- * @see Badge
+ * Creates a CreatedOn DateTime element using the data from CreatedOn in the Flexible UI Context.
+ * @see DateTime
  */
 
-export const VoteCount = createElement(ElementName.VoteCount);
+export const CreatedOn = createElement(ElementName.CreatedOn);
 /**
  * Creates a CreatedBy text element using the data from CreatedBy in the Flexible UI Context.
  * @see Text
  */
 
 export const CreatedBy = createElement(ElementName.CreatedBy);
-/**
- * Creates a CreatedOn DateTime element using the data from CreatedOn in the Flexible UI Context.
- * @see DateTime
- */
-
-export const CreatedOn = createElement(ElementName.CreatedOn);
 /**
  * Creates an element that contains Last Commit hash
  */
@@ -92,6 +74,18 @@ export const Priority = createElement(ElementName.Priority);
  */
 
 export const ProgrammingLanguage = createElement(ElementName.ProgrammingLanguage);
+/**
+ * Creates a Provider Badge element using the data from Provider in the Flexible UI Context.
+ * @see Badge
+ */
+
+export const Provider = createElement(ElementName.Provider);
+/**
+ * Creates a ReactCount Badge element using the data from ReactCount in the Flexible UI Context.
+ * @see Badge
+ */
+
+export const ReactCount = createElement(ElementName.ReactCount);
 /**
  * Creates a Snippet element using the data from Snippet in the Flexible UI Context.
  * @see Text
@@ -118,8 +112,14 @@ export const SubscriberCount = createElement(ElementName.SubscriberCount);
 
 export const Title = createElement(ElementName.Title);
 /**
- * Creates a Provider Badge element using the data from Provider in the Flexible UI Context.
+ * Creates a ViewCount Badge element using the data from ViewCount in the Flexible UI Context.
+ * @see Badge
+ */
+
+export const ViewCount = createElement(ElementName.ViewCount);
+/**
+ * Creates a VoteCount Badge element using the data from VoteCount in the Flexible UI Context.
  * @see Badge
  */
 
-export const Provider = createElement(ElementName.Provider);
+export const VoteCount = createElement(ElementName.VoteCount);

package/dist/esm/version.json

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

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

@@ -92,11 +92,12 @@ export var renderElementItems = function renderElementItems() {
         props = _objectWithoutProperties(curr, _excluded);
 
     var Element = Elements[name];
+    var typedProps = props;
 
     if (Element && isElementDisplayValid(name, display)) {
       var element = /*#__PURE__*/React.createElement(Element, _extends({
         key: idx
-      }, props));
+      }, typedProps));
 
       if (!isElementNull(element)) {
         return [].concat(_toConsumableArray(acc), [element]);

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

@@ -22,35 +22,17 @@ export var CollaboratorGroup = createElement(ElementName.CollaboratorGroup);
 
 export var CommentCount = createElement(ElementName.CommentCount);
 /**
- * Creates a ViewCount Badge element using the data from ViewCount in the Flexible UI Context.
- * @see Badge
- */
-
-export var ViewCount = createElement(ElementName.ViewCount);
-/**
- * Creates a ReactCount Badge element using the data from ReactCount in the Flexible UI Context.
- * @see Badge
- */
-
-export var ReactCount = createElement(ElementName.ReactCount);
-/**
- * Creates a VoteCount Badge element using the data from VoteCount in the Flexible UI Context.
- * @see Badge
+ * Creates a CreatedOn DateTime element using the data from CreatedOn in the Flexible UI Context.
+ * @see DateTime
  */
 
-export var VoteCount = createElement(ElementName.VoteCount);
+export var CreatedOn = createElement(ElementName.CreatedOn);
 /**
  * Creates a CreatedBy text element using the data from CreatedBy in the Flexible UI Context.
  * @see Text
  */
 
 export var CreatedBy = createElement(ElementName.CreatedBy);
-/**
- * Creates a CreatedOn DateTime element using the data from CreatedOn in the Flexible UI Context.
- * @see DateTime
- */
-
-export var CreatedOn = createElement(ElementName.CreatedOn);
 /**
  * Creates an element that contains Last Commit hash
  */
@@ -92,6 +74,18 @@ export var Priority = createElement(ElementName.Priority);
  */
 
 export var ProgrammingLanguage = createElement(ElementName.ProgrammingLanguage);
+/**
+ * Creates a Provider Badge element using the data from Provider in the Flexible UI Context.
+ * @see Badge
+ */
+
+export var Provider = createElement(ElementName.Provider);
+/**
+ * Creates a ReactCount Badge element using the data from ReactCount in the Flexible UI Context.
+ * @see Badge
+ */
+
+export var ReactCount = createElement(ElementName.ReactCount);
 /**
  * Creates a Snippet element using the data from Snippet in the Flexible UI Context.
  * @see Text
@@ -118,8 +112,14 @@ export var SubscriberCount = createElement(ElementName.SubscriberCount);
 
 export var Title = createElement(ElementName.Title);
 /**
- * Creates a Provider Badge element using the data from Provider in the Flexible UI Context.
+ * Creates a ViewCount Badge element using the data from ViewCount in the Flexible UI Context.
+ * @see Badge
+ */
+
+export var ViewCount = createElement(ElementName.ViewCount);
+/**
+ * Creates a VoteCount Badge element using the data from VoteCount in the Flexible UI Context.
  * @see Badge
  */
 
-export var Provider = createElement(ElementName.Provider);
+export var VoteCount = createElement(ElementName.VoteCount);

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

@@ -35,13 +35,11 @@ export declare type BlockProps = {
  */
 export declare type ElementItem = {
     /**
-     * The name of the metadata element, used by Flexible UI to determine which
-     * element to render.
+     * Any additional CSS properties to apply to the element.
      */
-    name: ElementName.AuthorGroup | ElementName.CollaboratorGroup | ElementName.CommentCount | ElementName.CreatedBy | ElementName.CreatedOn | ElementName.ModifiedBy | ElementName.ModifiedOn | ElementName.Priority | ElementName.ProgrammingLanguage | ElementName.Provider | ElementName.ReactCount | ElementName.State | ElementName.SubscriberCount | ElementName.ViewCount | ElementName.VoteCount | ElementName.LatestCommit;
+    overrideCss?: SerializedStyles;
     /**
-     * The size of the element to render.
-     * The elements that support sizing are AuthorGroup and CollaboratorGroup.
+     * The size of the element to display.
      */
     size?: SmartLinkSize;
     /**
@@ -50,7 +48,7 @@ export declare type ElementItem = {
      * serving as a hook for automated tests
      */
     testId?: string;
-};
+} & ElementItemProps;
 /**
  * Used to represent an Action when passing props into Flexible UI.
  */
@@ -102,3 +100,155 @@ export declare type CustomActionItem = BaseActionItem & {
     name: ActionName.CustomAction;
 } & ((Required<Pick<ActionProps, 'icon' | 'iconPosition'>> & Pick<ActionProps, 'content'>) | ((Required<Pick<ActionProps, 'content'>> & Pick<ActionProps, 'icon' | 'iconPosition'>) & Pick<ActionProps, 'tooltipMessage'>));
 export declare type ActionItem = NamedActionItem | CustomActionItem;
+/**
+ * A type that contains all the possible combinations of elements with their corresponding props.
+ */
+export declare type ElementItemProps = AuthorGroup | CollaboratorGroup | CommentCount | CreatedBy | CreatedOn | LatestCommit | LinkIcon | ModifiedBy | ModifiedOn | Preview | Priority | ProgrammingLanguage | Provider | ReactCount | Snippet | State | SubscriberCount | Title | ViewCount | VoteCount;
+/**
+ * Represents the props available for an AuthorGroup element.
+ * @see AuthorGroup
+ */
+export declare type AuthorGroup = {
+    name: ElementName.AuthorGroup;
+};
+/**
+ * Represents the props available for an CollaboratorGroup element.
+ * @see CollaboratorGroup
+ */
+export declare type CollaboratorGroup = {
+    name: ElementName.CollaboratorGroup;
+};
+/**
+ * Represents the props available for an CommentCount element.
+ * @see CommentCount
+ */
+export declare type CommentCount = {
+    name: ElementName.CommentCount;
+};
+/**
+ * Represents the props available for an CreatedBy element.
+ * @see CreatedBy
+ */
+export declare type CreatedBy = {
+    name: ElementName.CreatedBy;
+};
+/**
+ * Represents the props available for an CreatedOn element.
+ * @see CreatedOn
+ */
+export declare type CreatedOn = {
+    name: ElementName.CreatedOn;
+    /**
+     * A string which will be displayed before the specified element.
+     */
+    text?: string;
+};
+/**
+ * Represents the props available for an LastCommit element.
+ * @see BadgeProps
+ */
+export declare type LatestCommit = {
+    name: ElementName.LatestCommit;
+};
+/**
+ * Represents the props available for an LinkIcon element.
+ * @see LinkIcon
+ */
+export declare type LinkIcon = {
+    name: ElementName.LinkIcon;
+};
+/**
+ * Represents the props available for an ModifiedBy element.
+ * @see ModifiedBy
+ */
+export declare type ModifiedBy = {
+    name: ElementName.ModifiedBy;
+};
+/**
+ * Represents the props available for an ModifiedOn element.
+ * @see ModifiedOn
+ */
+export declare type ModifiedOn = {
+    name: ElementName.ModifiedOn;
+    /**
+     * A string which will be displayed before the specified element.
+     */
+    text?: string;
+};
+/**
+ * Represents the props available for an Preview element.
+ * @see Preview
+ */
+export declare type Preview = {
+    name: ElementName.Preview;
+};
+/**
+ * Represents the props available for an Priority element.
+ * @see Priority
+ */
+export declare type Priority = {
+    name: ElementName.Priority;
+};
+/**
+ * Represents the props available for an ProgrammingLanguage element.
+ * @see ProgrammingLanguage
+ */
+export declare type ProgrammingLanguage = {
+    name: ElementName.ProgrammingLanguage;
+};
+/**
+ * Represents the props available for an Provider element.
+ * @see Provider
+ */
+export declare type Provider = {
+    name: ElementName.Provider;
+};
+/**
+ * Represents the props available for an ReactCount element.
+ * @see ReactCount
+ */
+export declare type ReactCount = {
+    name: ElementName.ReactCount;
+};
+/**
+ * Represents the props available for an Snippet element.
+ * @see Snippet
+ */
+export declare type Snippet = {
+    name: ElementName.Snippet;
+};
+/**
+ * Represents the props available for an State element.
+ * @see State
+ */
+export declare type State = {
+    name: ElementName.State;
+};
+/**
+ * Represents the props available for an SubscriberCount element.
+ * @see SubscriberCount
+ */
+export declare type SubscriberCount = {
+    name: ElementName.SubscriberCount;
+};
+/**
+ * Represents the props available for an Title element.
+ * @see Title
+ */
+export declare type Title = {
+    name: ElementName.Title;
+};
+/**
+ * Represents the props available for an ViewCount element.
+ * @see ViewCount
+ */
+export declare type ViewCount = {
+    name: ElementName.ViewCount;
+};
+/**
+ * Represents the props available for an VoteCount element.
+ * @see VoteCount
+ */
+export declare type VoteCount = {
+    name: ElementName.VoteCount;
+};

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

@@ -23,30 +23,15 @@ export declare const CollaboratorGroup: import("react").FC<AvatarGroupProps>;
  */
 export declare const CommentCount: import("react").FC<BadgeProps>;
 /**
- * Creates a ViewCount Badge element using the data from ViewCount in the Flexible UI Context.
- * @see Badge
- */
-export declare const ViewCount: import("react").FC<BadgeProps>;
-/**
- * Creates a ReactCount Badge element using the data from ReactCount in the Flexible UI Context.
- * @see Badge
- */
-export declare const ReactCount: import("react").FC<BadgeProps>;
-/**
- * Creates a VoteCount Badge element using the data from VoteCount in the Flexible UI Context.
- * @see Badge
+ * Creates a CreatedOn DateTime element using the data from CreatedOn in the Flexible UI Context.
+ * @see DateTime
  */
-export declare const VoteCount: import("react").FC<BadgeProps>;
+export declare const CreatedOn: import("react").FC<DateTimeProps>;
 /**
  * Creates a CreatedBy text element using the data from CreatedBy in the Flexible UI Context.
  * @see Text
  */
 export declare const CreatedBy: import("react").FC<TextProps>;
-/**
- * Creates a CreatedOn DateTime element using the data from CreatedOn in the Flexible UI Context.
- * @see DateTime
- */
-export declare const CreatedOn: import("react").FC<DateTimeProps>;
 /**
  * Creates an element that contains Last Commit hash
  */
@@ -81,6 +66,16 @@ export declare const Priority: import("react").FC<BadgeProps>;
  * @see Badge
  */
 export declare const ProgrammingLanguage: import("react").FC<BadgeProps>;
+/**
+ * Creates a Provider Badge element using the data from Provider in the Flexible UI Context.
+ * @see Badge
+ */
+export declare const Provider: import("react").FC<BadgeProps>;
+/**
+ * Creates a ReactCount Badge element using the data from ReactCount in the Flexible UI Context.
+ * @see Badge
+ */
+export declare const ReactCount: import("react").FC<BadgeProps>;
 /**
  * Creates a Snippet element using the data from Snippet in the Flexible UI Context.
  * @see Text
@@ -103,7 +98,12 @@ export declare const SubscriberCount: import("react").FC<BadgeProps>;
  */
 export declare const Title: import("react").FC<LinkProps>;
 /**
- * Creates a Provider Badge element using the data from Provider in the Flexible UI Context.
+ * Creates a ViewCount Badge element using the data from ViewCount in the Flexible UI Context.
  * @see Badge
  */
-export declare const Provider: import("react").FC<BadgeProps>;
+export declare const ViewCount: import("react").FC<BadgeProps>;
+/**
+ * Creates a VoteCount Badge element using the data from VoteCount in the Flexible UI Context.
+ * @see Badge
+ */
+export declare const VoteCount: import("react").FC<BadgeProps>;

package/package.json

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