@atlaskit/smart-card 17.4.1 → 17.5.0

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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getTruncateStyles = exports.getLinkSizeStyles = exports.getLinkLineHeight = exports.getIconSizeStyles = exports.getFormattedMessage = void 0;
+exports.getTruncateStyles = exports.getMaxLines = exports.getLinkSizeStyles = exports.getLinkLineHeight = exports.getIconSizeStyles = exports.getFormattedMessage = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -76,6 +76,20 @@ var getLinkSizeStyles = function getLinkSizeStyles(size) {
 
 exports.getLinkSizeStyles = getLinkSizeStyles;
 
+var getMaxLines = function getMaxLines(value, defaultValue, max, min) {
+  if (value > max) {
+    return defaultValue;
+  }
+
+  if (value < min) {
+    return min;
+  }
+
+  return value;
+};
+
+exports.getMaxLines = getMaxLines;
+
 var getTruncateStyles = function getTruncateStyles(maxLines) {
   var lineHeight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '1rem';
   return (0, _core.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n    display: -webkit-box;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    word-break: break-word;\n    -webkit-line-clamp: ", ";\n    -webkit-box-orient: vertical;\n    // Fallback options\n    max-height: calc(", " * ", ");\n  "])), maxLines, maxLines, lineHeight);

package/dist/es2019/constants.js

@@ -1,4 +1,12 @@
+/**
+ * The alignment of Flexible UI component.
+ */
 export let SmartLinkAlignment;
+/**
+ * The direction of Flexible UI components. It establish the main-axis
+ * or how the child components laid out inside the parent component.
+ * Similar to flex's flex-direction concept.
+ */
 
 (function (SmartLinkAlignment) {
   SmartLinkAlignment["Left"] = "left";
@@ -6,6 +14,10 @@ export let SmartLinkAlignment;
 })(SmartLinkAlignment || (SmartLinkAlignment = {}));
 
 export let SmartLinkDirection;
+/**
+ * The positioning of the component within the parent component.
+ * Similar to flex's align-items or align-self concept.
+ */
 
 (function (SmartLinkDirection) {
   SmartLinkDirection["Horizontal"] = "horizontal";
@@ -13,6 +25,11 @@ export let SmartLinkDirection;
 })(SmartLinkDirection || (SmartLinkDirection = {}));
 
 export let SmartLinkPosition;
+/**
+ * The sizing options of the Flexible UI component. Every component
+ * has or inherits the sizing props. Implementation varies
+ * as per component.
+ */
 
 (function (SmartLinkPosition) {
   SmartLinkPosition["Top"] = "top";
@@ -20,6 +37,9 @@ export let SmartLinkPosition;
 })(SmartLinkPosition || (SmartLinkPosition = {}));
 
 export let SmartLinkSize;
+/**
+ * Smart Links link request status
+ */
 
 (function (SmartLinkSize) {
   SmartLinkSize["XLarge"] = "xlarge";
@@ -29,6 +49,10 @@ export let SmartLinkSize;
 })(SmartLinkSize || (SmartLinkSize = {}));
 
 export let SmartLinkStatus;
+/**
+ * Flexible UI theme available on the Card level.
+ * This determine the styling of the link.
+ */
 
 (function (SmartLinkStatus) {
   SmartLinkStatus["Pending"] = "pending";
@@ -42,25 +66,34 @@ export let SmartLinkStatus;
 })(SmartLinkStatus || (SmartLinkStatus = {}));
 
 export let SmartLinkTheme;
+/**
+ * Determines whether the container size will fit to the content
+ * or expand to the available width or the parent component.
+ * Similar to flex's flex-grow concept.
+ */
 
 (function (SmartLinkTheme) {
   SmartLinkTheme["Black"] = "black";
   SmartLinkTheme["Link"] = "link";
 })(SmartLinkTheme || (SmartLinkTheme = {}));
 
-export let SmartLinkWidth; // When adding an element...
-// 1) Create base element if it doesn't already existed.
-//    Base element are inside src/view/FlexibleCard/components/elements.
-//    E.g. Badge,DateTime, Icon, Lozenge, etc.
-// 2) Update FlexibleUiContext with the new prop for data representing
-//    the element, preferably with the same name as the element itself.
-//    (src/state/flexible-ui-context/types.ts)
-// 3) Update Flexible UI extractor (src/extractors/flexible/index.ts)
-// 4) Set base element and data mapping.
-//    (src/view/FlexibleCard/components/elements/utils.tsx)
-// 5) Create element. (src/view/FlexibleCard/components/elements/index.ts)
-// 6) Update element ElementDisplaySchema for inline/block display
-//    (src/view/FlexibleCard/components/blocks/utils.tsx)
+export let SmartLinkWidth;
+/**
+ * Flexible UI element name - each reflecting the link data its represented.
+ * When adding an element...
+ * 1) Create base element if it doesn't already existed.
+ *    Base element are inside src/view/FlexibleCard/components/elements.
+ *    E.g. Badge,DateTime, Icon, Lozenge, etc.
+ * 2) Update FlexibleUiContext with the new prop for data representing
+ *    the element, preferably with the same name as the element itself.
+ *    (src/state/flexible-ui-context/types.ts)
+ * 3) Update Flexible UI extractor (src/extractors/flexible/index.ts)
+ * 4) Set base element and data mapping
+ *    (src/view/FlexibleCard/components/elements/utils.tsx)
+ * 5) Create element. (src/view/FlexibleCard/components/elements/index.ts)
+ * 6) Update element ElementDisplaySchema for inline/block display
+ *    (src/view/FlexibleCard/components/blocks/utils.tsx)
+ */
 
 (function (SmartLinkWidth) {
   SmartLinkWidth["FitToContent"] = "fit-to-content";
@@ -68,6 +101,9 @@ export let SmartLinkWidth; // When adding an element...
 })(SmartLinkWidth || (SmartLinkWidth = {}));
 
 export let ElementName;
+/**
+ * Flexible UI action (button)
+ */
 
 (function (ElementName) {
   ElementName["AuthorGroup"] = "AuthorGroup";
@@ -88,6 +124,9 @@ export let ElementName;
 })(ElementName || (ElementName = {}));
 
 export let ActionName;
+/**
+ * Flexible UI icons - each mapped to AK icons.
+ */
 
 (function (ActionName) {
   ActionName["DeleteAction"] = "DeleteAction";

package/dist/es2019/index.js

@@ -13,4 +13,4 @@ export { contentFooterClassName, metadataListClassName, blockCardResolvingViewCl
 export { loadingPlaceholderClassName } from './view/CardWithUrl/component-lazy/LazyFallback'; // Flexible UI
 
 export { ActionName, ElementName, SmartLinkDirection, SmartLinkPosition, SmartLinkSize, SmartLinkTheme } from './constants';
-export { MetadataBlock, TitleBlock } from './view/FlexibleCard/components/blocks';
+export { MetadataBlock, SnippetBlock, TitleBlock } from './view/FlexibleCard/components/blocks';

package/dist/es2019/utils/token.js

@@ -1,23 +1,16 @@
-import { token } from '@atlaskit/tokens'; // Temporary safeguard while @atlaskit/tokens is being developed
-
-export const safeToken = (path, fallback) => {
-  try {
-    return token(path, fallback);
-  } catch (e) {
-    return fallback;
-  }
-};
+import { token } from '@atlaskit/tokens';
 export const tokens = {
-  actionIcon: safeToken('color.icon', '#44546F'),
-  background: safeToken('elevation.surface', '#FFFFFF'),
-  badgeIcon: safeToken('color.icon.subtle', '#626F86'),
-  badgeText: safeToken('color.text.subtlest', '#626F86'),
-  blackLink: safeToken('color.text.subtle', '#44546F'),
-  blackLinkPressed: safeToken('color.text', '#172B4D'),
-  blueLink: safeToken('color.link', '#0C66E4'),
-  blueLinkPressed: safeToken('color.link.pressed', '#0055CC'),
-  elevation: safeToken('elevation.shadow.raised', '0px 1px 1px #091E4240, 0px 0px 1px #091E424F'),
-  errorMessage: safeToken('color.text.disabled', '#6B778C'),
-  errorMessageHover: safeToken('color.text.subtle', '#8993A4'),
-  text: safeToken('color.text.subtlest', '#626F86')
+  actionIcon: token('color.icon', '#44546F'),
+  background: token('elevation.surface', '#FFFFFF'),
+  badgeIcon: token('color.icon.subtle', '#626F86'),
+  badgeText: token('color.text.subtlest', '#626F86'),
+  blackLink: token('color.text.subtle', '#44546F'),
+  blackLinkPressed: token('color.text', '#172B4D'),
+  blueLink: token('color.link', '#0C66E4'),
+  blueLinkPressed: token('color.link.pressed', '#0055CC'),
+  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'),
+  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": "17.4.1",
+	"version": "17.5.0",
 	"sideEffects": false
 }

package/dist/es2019/view/FlexibleCard/components/actions/action/index.js

@@ -8,7 +8,7 @@ import { getIconSizeStyles } from '../../utils';
 import { tokens } from '../../../../../utils/token';
 import { handleOnClick } from '../../../../../utils';
 
-const getWidth = size => {
+const getIconWidth = size => {
   switch (size) {
     case SmartLinkSize.XLarge:
     case SmartLinkSize.Large:
@@ -23,9 +23,27 @@ const getWidth = size => {
 
 const getIconStyles = size => css`
   color: ${tokens.actionIcon};
-  ${getIconSizeStyles(getWidth(size))};
+  ${getIconSizeStyles(getIconWidth(size))};
 `;
 
+const getButtonStyle = (size, iconOnly) => size === SmartLinkSize.Small ? css`
+        font-size: 0.75rem;
+        font-weight: 500;
+        line-height: 1rem;
+        button,
+        button:hover,
+        button:focus,
+        button:active {
+          line-height: 1rem;
+          ${iconOnly ? `
+            padding: 0.125rem;
+          ` : `
+            padding-left: 0.25rem;
+            padding-right: 0.25rem;
+          `}
+        }
+      ` : '';
+
 const ActionIcon = ({
   size,
   testId,
@@ -35,6 +53,13 @@ const ActionIcon = ({
   "data-testid": `${testId}-icon`
 }, icon);
 
+const sizeToSpacing = {
+  [SmartLinkSize.Small]: 'none',
+  [SmartLinkSize.Medium]: 'compact',
+  [SmartLinkSize.Large]: 'compact',
+  [SmartLinkSize.XLarge]: 'default'
+};
+
 const Action = ({
   appearance = 'subtle',
   content,
@@ -49,26 +74,29 @@ const Action = ({
     return null;
   }
 
-  const iconBefore = iconPosition === 'before' ? jsx(ActionIcon, {
+  const iconBefore = icon && iconPosition === 'before' ? jsx(ActionIcon, {
     size: size,
     testId: testId,
     icon: icon
   }) : undefined;
-  const iconAfter = iconPosition === 'after' ? jsx(ActionIcon, {
+  const iconAfter = icon && iconPosition === 'after' ? jsx(ActionIcon, {
     size: size,
     testId: testId,
     icon: icon
   }) : undefined;
+  const iconOnly = !content;
   return jsx(Tooltip, {
     content: tooltipMessage
+  }, jsx("div", {
+    css: getButtonStyle(size, iconOnly)
   }, jsx(Button, {
-    spacing: "none",
+    spacing: sizeToSpacing[size],
     appearance: appearance,
     testId: testId,
     onClick: handleOnClick(onClick),
     iconBefore: iconBefore,
     iconAfter: iconAfter
-  }, content));
+  }, content)));
 };
 
 export default Action;

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

@@ -11,6 +11,7 @@ const actionMappings = {
     component: Action,
     props: {
       testId: 'smart-action-delete-action',
+      content: /*#__PURE__*/React.createElement(FormattedMessage, messages.delete),
       icon: /*#__PURE__*/React.createElement(CrossIcon, {
         label: "Delete"
       }),
@@ -66,6 +67,9 @@ export const createUIAction = name => {
   }
 
   return overrides => {
-    return /*#__PURE__*/React.createElement(BaseAction, _extends({}, props, overrides));
+    const combinedProps = { ...props,
+      ...overrides
+    };
+    return /*#__PURE__*/React.createElement(BaseAction, combinedProps);
   };
 };

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

@@ -10,13 +10,14 @@ const styles = css`
 
 const ActionGroup = ({
   items = [],
-  size = SmartLinkSize.Medium
+  size = SmartLinkSize.Medium,
+  appearance
 }) => {
   // Currently we only have delete action available, this prevents others from adding more delete actions
   const actionsToRender = items.slice(0, 1);
   return jsx("div", {
     css: styles
-  }, jsx(ButtonGroup, null, renderActionItems(actionsToRender, size)));
+  }, jsx(ButtonGroup, null, renderActionItems(actionsToRender, size, appearance)));
 };
 
 export default ActionGroup;

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

@@ -0,0 +1,35 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { SmartLinkAlignment, SmartLinkDirection, SmartLinkStatus, SmartLinkWidth } from '../../../../../constants';
+import Block from '../block';
+import ElementGroup from '../element-group';
+import { Provider } from '../../elements';
+import ActionGroup from '../action-group';
+
+const FooterBlock = props => {
+  const {
+    status,
+    actions,
+    testId = 'smart-footer-block'
+  } = props;
+
+  if (status !== SmartLinkStatus.Resolved) {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement(Block, _extends({}, props, {
+    testId: `${testId}-resolved-view`
+  }), /*#__PURE__*/React.createElement(Provider, {
+    testId: `${testId}-provider`
+  }), actions && actions.length > 0 ? /*#__PURE__*/React.createElement(ElementGroup, {
+    testId: "smart-element-group-actions",
+    align: SmartLinkAlignment.Right,
+    direction: SmartLinkDirection.Horizontal,
+    width: SmartLinkWidth.Flexible
+  }, /*#__PURE__*/React.createElement(ActionGroup, {
+    items: actions,
+    appearance: "default"
+  })) : null);
+};
+
+export default FooterBlock;

package/dist/es2019/view/FlexibleCard/components/blocks/footer-block/types.js

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

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

@@ -1,2 +1,4 @@
-export { default as TitleBlock } from './title-block';
-export { default as MetadataBlock } from './metadata-block';
+export { default as FooterBlock } from './footer-block';
+export { default as MetadataBlock } from './metadata-block';
+export { default as SnippetBlock } from './snippet-block';
+export { default as TitleBlock } from './title-block';

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

@@ -0,0 +1,29 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import Block from '../block';
+import { SmartLinkStatus } from '../../../../../constants';
+import { Snippet } from '../../elements';
+import { getMaxLines } from '../../utils';
+const DEFAULT_MAX_LINES = 3;
+const MAXIMUM_MAX_LINES = 3;
+const MINIMUM_MAX_LINES = 1;
+
+const SnippetBlock = ({
+  maxLines = DEFAULT_MAX_LINES,
+  status = SmartLinkStatus.Fallback,
+  testId = 'smart-block-snippet',
+  ...blockProps
+}) => {
+  if (status !== SmartLinkStatus.Resolved) {
+    return null;
+  }
+
+  const snippetMaxLines = getMaxLines(maxLines, DEFAULT_MAX_LINES, MAXIMUM_MAX_LINES, MINIMUM_MAX_LINES);
+  return /*#__PURE__*/React.createElement(Block, _extends({}, blockProps, {
+    testId: `${testId}-resolved-view`
+  }), /*#__PURE__*/React.createElement(Snippet, {
+    maxLines: snippetMaxLines
+  }));
+};
+
+export default SnippetBlock;

package/dist/es2019/view/FlexibleCard/components/blocks/snippet-block/types.js

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

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

@@ -6,8 +6,7 @@ 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.
-
+import ElementGroup from './element-group';
 export const ElementDisplaySchema = {
   [ElementName.AuthorGroup]: ['inline'],
   [ElementName.CollaboratorGroup]: ['inline'],
@@ -130,19 +129,34 @@ export const renderElementItems = (items = [], display = 'inline') => {
     return elements;
   }
 };
-export const renderActionItems = (items = [], size = SmartLinkSize.Medium) => {
+export const renderActionItems = (items = [], size = SmartLinkSize.Medium, appearance) => {
   const actions = items.reduce((acc, curr, idx) => {
     const {
       name,
+      hideContent,
+      hideIcon,
+      onClick,
       ...props
     } = curr;
     const Action = Actions[name];
+    const actionProps = { ...props
+    };
+
+    if (hideContent) {
+      actionProps.content = '';
+    }
+
+    if (hideIcon) {
+      actionProps.icon = undefined;
+    }
 
     if (Action) {
       return [...acc, /*#__PURE__*/React.createElement(Action, _extends({
         size: size,
-        key: idx
-      }, props))];
+        key: idx,
+        appearance: appearance,
+        onClick: onClick
+      }, actionProps))];
     }
 
     return acc;

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

@@ -217,7 +217,7 @@ const AtlaskitIcon = ({
     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/es2019/view/FlexibleCard/components/elements/text/index.js

@@ -4,14 +4,15 @@ import { css, jsx } from '@emotion/core';
 import { getFormattedMessage, getTruncateStyles } from '../../utils';
 import { tokens } from '../../../../../utils/token';
 
-const getStyles = maxLines => css`
-  color: ${tokens.text};
+const getStyles = (maxLines, color) => css`
+  color: ${color};
   font-size: 0.75rem;
   line-height: 1rem;
   ${getTruncateStyles(maxLines)}
 `;
 
 const Text = ({
+  color = tokens.text,
   content,
   maxLines = 1,
   message,
@@ -22,7 +23,7 @@ const Text = ({
   }
 
   return jsx("span", {
-    css: getStyles(maxLines),
+    css: getStyles(maxLines, color),
     "data-smart-element-text": true,
     "data-testid": testId
   }, getFormattedMessage(message) || content);

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

@@ -10,6 +10,8 @@ import AvatarGroup from './avatar-group';
 import Text from './text';
 import { messages } from '../../../../messages';
 import DateTime from './date-time';
+import { tokens } from '../../../../utils/token';
+const SNIPPET_DEFAULT_MAX_LINES = 3;
 const elementMappings = {
   [ElementName.AuthorGroup]: {
     component: AvatarGroup
@@ -44,7 +46,8 @@ const elementMappings = {
   [ElementName.Snippet]: {
     component: Text,
     props: {
-      maxLines: 3
+      color: tokens.snippet,
+      maxLines: SNIPPET_DEFAULT_MAX_LINES
     }
   },
   [ElementName.State]: {

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

@@ -80,6 +80,17 @@ export const getLinkSizeStyles = size => {
       `;
   }
 };
+export const getMaxLines = (value, defaultValue, max, min) => {
+  if (value > max) {
+    return defaultValue;
+  }
+
+  if (value < min) {
+    return min;
+  }
+
+  return value;
+};
 export const getTruncateStyles = (maxLines, lineHeight = '1rem') => css`
     display: -webkit-box;
     overflow: hidden;

package/dist/esm/constants.js

@@ -1,4 +1,12 @@
+/**
+ * The alignment of Flexible UI component.
+ */
 export var SmartLinkAlignment;
+/**
+ * The direction of Flexible UI components. It establish the main-axis
+ * or how the child components laid out inside the parent component.
+ * Similar to flex's flex-direction concept.
+ */
 
 (function (SmartLinkAlignment) {
   SmartLinkAlignment["Left"] = "left";
@@ -6,6 +14,10 @@ export var SmartLinkAlignment;
 })(SmartLinkAlignment || (SmartLinkAlignment = {}));
 
 export var SmartLinkDirection;
+/**
+ * The positioning of the component within the parent component.
+ * Similar to flex's align-items or align-self concept.
+ */
 
 (function (SmartLinkDirection) {
   SmartLinkDirection["Horizontal"] = "horizontal";
@@ -13,6 +25,11 @@ export var SmartLinkDirection;
 })(SmartLinkDirection || (SmartLinkDirection = {}));
 
 export var SmartLinkPosition;
+/**
+ * The sizing options of the Flexible UI component. Every component
+ * has or inherits the sizing props. Implementation varies
+ * as per component.
+ */
 
 (function (SmartLinkPosition) {
   SmartLinkPosition["Top"] = "top";
@@ -20,6 +37,9 @@ export var SmartLinkPosition;
 })(SmartLinkPosition || (SmartLinkPosition = {}));
 
 export var SmartLinkSize;
+/**
+ * Smart Links link request status
+ */
 
 (function (SmartLinkSize) {
   SmartLinkSize["XLarge"] = "xlarge";
@@ -29,6 +49,10 @@ export var SmartLinkSize;
 })(SmartLinkSize || (SmartLinkSize = {}));
 
 export var SmartLinkStatus;
+/**
+ * Flexible UI theme available on the Card level.
+ * This determine the styling of the link.
+ */
 
 (function (SmartLinkStatus) {
   SmartLinkStatus["Pending"] = "pending";
@@ -42,25 +66,34 @@ export var SmartLinkStatus;
 })(SmartLinkStatus || (SmartLinkStatus = {}));
 
 export var SmartLinkTheme;
+/**
+ * Determines whether the container size will fit to the content
+ * or expand to the available width or the parent component.
+ * Similar to flex's flex-grow concept.
+ */
 
 (function (SmartLinkTheme) {
   SmartLinkTheme["Black"] = "black";
   SmartLinkTheme["Link"] = "link";
 })(SmartLinkTheme || (SmartLinkTheme = {}));
 
-export var SmartLinkWidth; // When adding an element...
-// 1) Create base element if it doesn't already existed.
-//    Base element are inside src/view/FlexibleCard/components/elements.
-//    E.g. Badge,DateTime, Icon, Lozenge, etc.
-// 2) Update FlexibleUiContext with the new prop for data representing
-//    the element, preferably with the same name as the element itself.
-//    (src/state/flexible-ui-context/types.ts)
-// 3) Update Flexible UI extractor (src/extractors/flexible/index.ts)
-// 4) Set base element and data mapping.
-//    (src/view/FlexibleCard/components/elements/utils.tsx)
-// 5) Create element. (src/view/FlexibleCard/components/elements/index.ts)
-// 6) Update element ElementDisplaySchema for inline/block display
-//    (src/view/FlexibleCard/components/blocks/utils.tsx)
+export var SmartLinkWidth;
+/**
+ * Flexible UI element name - each reflecting the link data its represented.
+ * When adding an element...
+ * 1) Create base element if it doesn't already existed.
+ *    Base element are inside src/view/FlexibleCard/components/elements.
+ *    E.g. Badge,DateTime, Icon, Lozenge, etc.
+ * 2) Update FlexibleUiContext with the new prop for data representing
+ *    the element, preferably with the same name as the element itself.
+ *    (src/state/flexible-ui-context/types.ts)
+ * 3) Update Flexible UI extractor (src/extractors/flexible/index.ts)
+ * 4) Set base element and data mapping
+ *    (src/view/FlexibleCard/components/elements/utils.tsx)
+ * 5) Create element. (src/view/FlexibleCard/components/elements/index.ts)
+ * 6) Update element ElementDisplaySchema for inline/block display
+ *    (src/view/FlexibleCard/components/blocks/utils.tsx)
+ */
 
 (function (SmartLinkWidth) {
   SmartLinkWidth["FitToContent"] = "fit-to-content";
@@ -68,6 +101,9 @@ export var SmartLinkWidth; // When adding an element...
 })(SmartLinkWidth || (SmartLinkWidth = {}));
 
 export var ElementName;
+/**
+ * Flexible UI action (button)
+ */
 
 (function (ElementName) {
   ElementName["AuthorGroup"] = "AuthorGroup";
@@ -88,6 +124,9 @@ export var ElementName;
 })(ElementName || (ElementName = {}));
 
 export var ActionName;
+/**
+ * Flexible UI icons - each mapped to AK icons.
+ */
 
 (function (ActionName) {
   ActionName["DeleteAction"] = "DeleteAction";

package/dist/esm/index.js

@@ -13,4 +13,4 @@ export { contentFooterClassName, metadataListClassName, blockCardResolvingViewCl
 export { loadingPlaceholderClassName } from './view/CardWithUrl/component-lazy/LazyFallback'; // Flexible UI
 
 export { ActionName, ElementName, SmartLinkDirection, SmartLinkPosition, SmartLinkSize, SmartLinkTheme } from './constants';
-export { MetadataBlock, TitleBlock } from './view/FlexibleCard/components/blocks';
+export { MetadataBlock, SnippetBlock, TitleBlock } from './view/FlexibleCard/components/blocks';