@atlaskit/smart-card 26.46.0 → 26.46.1

package/dist/cjs/view/common/ai-prism/ai-glowing-border/index.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.borderContentStyles = void 0;
+var _react = require("@emotion/react");
+var _react2 = _interopRequireDefault(require("react"));
+var _animatedSvgContainer = _interopRequireDefault(require("./animated-svg-container"));
+var _constants = require("../constants");
+/** @jsx jsx */
+
+var borderContainerStyles = (0, _react.css)({
+  display: 'flex',
+  position: 'relative',
+  padding: "var(--ds-space-025, 2px)",
+  width: 'fit-content'
+});
+var borderContentStyles = exports.borderContentStyles = (0, _react.css)({
+  borderRadius: _constants.INNER_BORDER_RADIUS,
+  flexGrow: 1,
+  zIndex: 1 // needs to be more than the svg container at least
+});
+
+/**
+ * The bulk of this file is originally from
+ * https://bitbucket.org/atlassian/barrel/src/master/ui/platform/ui-kit/ai
+ * with modifications.
+ */
+var AIGlowingBorder = function AIGlowingBorder(_ref) {
+  var children = _ref.children,
+    palette = _ref.palette,
+    _ref$isMoving = _ref.isMoving,
+    isMoving = _ref$isMoving === void 0 ? true : _ref$isMoving,
+    isGlowing = _ref.isGlowing,
+    testId = _ref.testId,
+    additionalCss = _ref.additionalCss;
+  return (0, _react.jsx)("div", {
+    css: [borderContainerStyles, additionalCss === null || additionalCss === void 0 ? void 0 : additionalCss.container],
+    "data-testid": testId
+  }, (0, _react.jsx)(_animatedSvgContainer.default, {
+    palette: palette,
+    isMoving: isMoving,
+    additionalCss: additionalCss === null || additionalCss === void 0 ? void 0 : additionalCss.animatedSvgContainer
+  }), isGlowing && (0, _react.jsx)(_animatedSvgContainer.default, {
+    palette: palette,
+    isMoving: isMoving,
+    isGlowing: true,
+    additionalCss: additionalCss === null || additionalCss === void 0 ? void 0 : additionalCss.animatedSvgContainer
+  }), (0, _react.jsx)("div", {
+    css: borderContentStyles
+  }, children, " "));
+};
+var _default = exports.default = AIGlowingBorder;

package/dist/cjs/view/common/ai-prism/ai-glowing-border/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/view/common/ai-prism/constants.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.aiThemeTokens = exports.OUTER_BORDER_RADIUS = exports.INNER_BORDER_RADIUS = exports.GLOW_SIZE = exports.AI_BORDER_PALETTE = void 0;
+/**
+ * The bulk of this file is originally from
+ * https://bitbucket.org/atlassian/barrel/src/master/ui/platform/ui-kit/ai
+ * with modifications.
+ */
+
+var GLOW_SIZE = exports.GLOW_SIZE = 8;
+var INNER_BORDER_RADIUS = exports.INNER_BORDER_RADIUS = 8;
+var OUTER_BORDER_RADIUS = exports.OUTER_BORDER_RADIUS = 10;
+
+// We don't yet have design system tokens representing the AI prism colour palette. We should replace this with
+// equivalent tokens when available
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+var aiThemeTokens = exports.aiThemeTokens = {
+  blueUniqueGradientLight: '#00ACF8',
+  blueUniqueGradientDark: '#008BD2',
+  blue1000: '#092957',
+  blue800: '#0055CC',
+  blue700: '#0C66E4',
+  blue600: '#1D7AFC',
+  blue500: '#388BFF',
+  blue300: '#85B8FF',
+  blue200: '#CCE0FF',
+  blue100: '#E9F2FF',
+  teal500: '#37B4C3',
+  teal300: '#8BDBE5',
+  yellow500: '#CF9F02',
+  yellow200: '#F8E6A0',
+  red800: '#AE2A19',
+  red600: '#E34935',
+  orange500: '#F18D13',
+  orange300: '#FEC57B'
+};
+/* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
+
+var AI_BORDER_PALETTE = exports.AI_BORDER_PALETTE = {
+  dark: {
+    blue: aiThemeTokens.blue800,
+    teal: aiThemeTokens.teal500,
+    yellow: aiThemeTokens.yellow500
+  },
+  light: {
+    blue: aiThemeTokens.blue600,
+    teal: aiThemeTokens.teal300,
+    yellow: aiThemeTokens.yellow200
+  }
+};

package/dist/cjs/view/common/ai-prism/index.js

@@ -0,0 +1,45 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("@emotion/react");
+var _react2 = _interopRequireDefault(require("react"));
+var _tokens = require("@atlaskit/tokens");
+var _constants = require("./constants");
+var _aiGlowingBorder = _interopRequireDefault(require("./ai-glowing-border"));
+/** @jsx jsx */
+
+var contentStyles = (0, _react.css)({
+  backgroundColor: "var(--ds-surface-raised, white)",
+  borderRadius: _constants.INNER_BORDER_RADIUS
+});
+var AIPrism = function AIPrism(_ref) {
+  var _AI_BORDER_PALETTE$co;
+  var children = _ref.children,
+    _ref$isGlowing = _ref.isGlowing,
+    isGlowing = _ref$isGlowing === void 0 ? true : _ref$isGlowing,
+    _ref$isMoving = _ref.isMoving,
+    isMoving = _ref$isMoving === void 0 ? true : _ref$isMoving,
+    isVisible = _ref.isVisible,
+    testId = _ref.testId;
+  var _useThemeObserver = (0, _tokens.useThemeObserver)(),
+    _useThemeObserver$col = _useThemeObserver.colorMode,
+    colorMode = _useThemeObserver$col === void 0 ? 'light' : _useThemeObserver$col;
+  return (0, _react.jsx)(_aiGlowingBorder.default, {
+    additionalCss: {
+      animatedSvgContainer: (0, _react.css)({
+        opacity: isVisible ? 1 : 0
+      })
+    },
+    palette: (_AI_BORDER_PALETTE$co = _constants.AI_BORDER_PALETTE[colorMode]) !== null && _AI_BORDER_PALETTE$co !== void 0 ? _AI_BORDER_PALETTE$co : _constants.AI_BORDER_PALETTE.light,
+    isGlowing: isGlowing,
+    isMoving: isMoving,
+    testId: testId
+  }, (0, _react.jsx)("div", {
+    css: contentStyles
+  }, children));
+};
+var _default = exports.default = AIPrism;

package/dist/cjs/view/common/ai-prism/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/es2019/messages.js

@@ -13,6 +13,11 @@ export const messages = defineMessages({
     defaultMessage: 'Add account',
     description: 'Allows to add a new account'
   },
+  ai_summarize: {
+    id: 'fabric.linking.ai_summarize',
+    defaultMessage: 'Summarize',
+    description: 'Action to summarize link resource content with AI'
+  },
   assigned_to: {
     id: 'fabric.linking.assigned_to',
     defaultMessage: 'Assigned to {context}',

package/dist/es2019/utils/analytics/analytics.js

@@ -4,7 +4,7 @@ export const ANALYTICS_CHANNEL = 'media';
 export const context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.46.0"
+  packageVersion: "26.46.1"
 };
 export let TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

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

@@ -0,0 +1,25 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import AISummaryBlockResolvedView from './resolved';
+import { SmartLinkStatus } from '../../../../../constants';
+
+/**
+ * Represents an AISummaryBlock, designed to summarising link resource
+ * content using AI.
+ * @public
+ * @param {AISummaryBlockProps} AISummaryBlock
+ * @see Block
+ */
+const AISummaryBlock = ({
+  status,
+  testId = 'smart-ai-summary-block',
+  ...props
+}) => {
+  if (status !== SmartLinkStatus.Resolved) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(AISummaryBlockResolvedView, _extends({}, props, {
+    testId: testId
+  }));
+};
+export default AISummaryBlock;

package/dist/es2019/view/FlexibleCard/components/blocks/ai-summary-block/resolved/index.js

@@ -0,0 +1,62 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useCallback, useMemo } from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import { ActionName, SmartLinkAlignment, SmartLinkSize, SmartLinkWidth } from '../../../../../../constants';
+import { useFlexibleUiContext } from '../../../../../../state/flexible-ui-context';
+import ActionGroup from '../../action-group';
+import Block from '../../block';
+import ElementGroup from '../../element-group';
+import { filterActionItems, getActionGroupStyles, renderElementItems } from '../../utils';
+import { messages } from '../../../../../../messages';
+const AISummaryBlockResolvedView = props => {
+  const {
+    actions = [],
+    metadata,
+    testId,
+    onActionMenuOpenChange,
+    onAIActionChange,
+    size = SmartLinkSize.Medium
+  } = props;
+  const context = useFlexibleUiContext();
+  const metadataElements = renderElementItems(metadata);
+  const onAIActionClick = useCallback(() => {
+    if (onAIActionChange) {
+      onAIActionChange();
+    }
+  }, [onAIActionChange]);
+  const combinedActions = useMemo(() => {
+    const aiAction = {
+      content: /*#__PURE__*/React.createElement(FormattedMessage, messages.ai_summarize),
+      name: ActionName.CustomAction,
+      onClick: onAIActionClick,
+      testId: `${testId}-ai-summary-action`
+    };
+    return [aiAction, ...actions];
+  }, [actions, onAIActionClick, testId]);
+  const hasActions = useMemo(() => {
+    var _filterActionItems;
+    return ((_filterActionItems = filterActionItems(combinedActions, context)) === null || _filterActionItems === void 0 ? void 0 : _filterActionItems.length) > 0;
+  }, [combinedActions, context]);
+  const onDropdownOpenChange = useCallback(isOpen => {
+    if (onActionMenuOpenChange) {
+      onActionMenuOpenChange({
+        isOpen
+      });
+    }
+  }, [onActionMenuOpenChange]);
+  return /*#__PURE__*/React.createElement(Block, _extends({}, props, {
+    testId: `${testId}-resolved-view`
+  }), /*#__PURE__*/React.createElement(ElementGroup, {
+    width: SmartLinkWidth.Flexible
+  }, metadataElements), hasActions && /*#__PURE__*/React.createElement(ElementGroup, {
+    testId: "smart-element-group-actions",
+    align: SmartLinkAlignment.Right,
+    overrideCss: getActionGroupStyles(size),
+    width: SmartLinkWidth.Flexible
+  }, /*#__PURE__*/React.createElement(ActionGroup, {
+    onDropdownOpenChange: onDropdownOpenChange,
+    items: combinedActions,
+    appearance: "default"
+  })));
+};
+export default AISummaryBlockResolvedView;

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

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

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

@@ -1,5 +1,4 @@
 import _extends from "@babel/runtime/helpers/extends";
-import { css } from '@emotion/react';
 import React, { useCallback, useMemo } from 'react';
 import { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize, SmartLinkWidth } from '../../../../../../constants';
 import { useFlexibleUiContext } from '../../../../../../state/flexible-ui-context';
@@ -7,17 +6,7 @@ import { Provider } from '../../../elements';
 import ActionGroup from '../../action-group';
 import Block from '../../block';
 import ElementGroup from '../../element-group';
-import { filterActionItems } from '../../utils';
-const getActionGroupStyles = size => {
-  if (size === SmartLinkSize.XLarge) {
-    // The biggest height of the action button exceeds the max line-height
-    // of the elements causing the action on the block with x-large size to
-    // get cut at the bottom.
-    return css`
-      max-height: 2rem;
-    `;
-  }
-};
+import { filterActionItems, getActionGroupStyles } from '../../utils';
 const FooterBlockResolvedView = props => {
   const {
     actions,

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

@@ -7,4 +7,5 @@ export { default as CustomBlock } from './block';
 
 // Internal components to be used within @atlaskit/smart-card only.
 export { default as InternalFooterBlock } from './footer-block/resolved';
-export { default as RelatedUrlsBlock } from './related-urls-block';
+export { default as RelatedUrlsBlock } from './related-urls-block';
+export { default as AISummaryBlock } from './ai-summary-block';

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

@@ -111,6 +111,16 @@ export const isJSXElementNull = children => {
   return Boolean(children.type() === null);
 };
 const isElementOrElementGroup = node => /*#__PURE__*/React.isValidElement(node) && (isFlexibleUiElement(node) || node.type === ElementGroup);
+export const getActionGroupStyles = size => {
+  if (size === SmartLinkSize.XLarge) {
+    // The biggest height of the action button exceeds the max line-height
+    // of the elements causing the action on the block with x-large size to
+    // get cut at the bottom.
+    return css`
+      max-height: 2rem;
+    `;
+  }
+};
 export const filterActionItems = (items = [], context) => {
   return items.filter(item => {
     switch (item.name) {

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

@@ -7,7 +7,7 @@ import { useLinkWarningModal } from './LinkWarningModal/hooks/use-link-warning-m
 import LinkWarningModal from './LinkWarningModal';
 const PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.46.0",
+  packageVersion: "26.46.1",
   componentName: 'linkUrl'
 };
 const Link = withLinkClickedEvent('a');

package/dist/es2019/view/common/ai-icon/index.js

@@ -0,0 +1,108 @@
+import React from 'react';
+import SVG from '@atlaskit/icon/svg';
+import { B200, B400 } from '@atlaskit/theme/colors';
+/**
+ * The bulk of this file is originally from
+ * https://bitbucket.org/atlassian/barrel/src/master/ui/platform/ui-kit/ai
+ * with modifications
+ */
+const AiIcon = props => /*#__PURE__*/React.createElement(SVG, props, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
+  id: "ai_icon_lg0",
+  x1: "21",
+  y1: "12",
+  x2: "17.5",
+  y2: "12",
+  gradientUnits: "userSpaceOnUse"
+}, /*#__PURE__*/React.createElement("stop", {
+  offset: "0.270833",
+  stopColor: `var(--ds-icon-accent-blue, ${B200})`,
+  color: `var(--ds-icon-accent-blue, ${B200})`
+}), /*#__PURE__*/React.createElement("stop", {
+  offset: "1",
+  stopColor: `var(--ds-text-accent-blue, ${B400})`,
+  color: `var(--ds-text-accent-blue, ${B400})`
+})), /*#__PURE__*/React.createElement("linearGradient", {
+  id: "ai_icon_lg1",
+  x1: "12.5",
+  y1: "3",
+  x2: "12.5",
+  y2: "6.5",
+  gradientUnits: "userSpaceOnUse"
+}, /*#__PURE__*/React.createElement("stop", {
+  offset: "0.1875",
+  stopColor: `var(--ds-icon-accent-blue, ${B200})`,
+  color: `var(--ds-icon-accent-blue, ${B200})`
+}), /*#__PURE__*/React.createElement("stop", {
+  offset: "1",
+  stopColor: `var(--ds-text-accent-blue, ${B400})`,
+  color: `var(--ds-text-accent-blue, ${B400})`
+})), /*#__PURE__*/React.createElement("linearGradient", {
+  id: "ai_icon_lg2",
+  x1: "6.82996",
+  y1: "12",
+  x2: "3.32996",
+  y2: "12",
+  gradientUnits: "userSpaceOnUse"
+}, /*#__PURE__*/React.createElement("stop", {
+  stopColor: `var(--ds-text-accent-blue, ${B400})`,
+  color: `var(--ds-text-accent-blue, ${B400})`
+}), /*#__PURE__*/React.createElement("stop", {
+  offset: "0.791667",
+  stopColor: `var(--ds-icon-accent-blue, ${B200})`,
+  color: `var(--ds-icon-accent-blue, ${B200})`
+})), /*#__PURE__*/React.createElement("linearGradient", {
+  id: "ai_icon_lg3",
+  x1: "12.5",
+  y1: "17",
+  x2: "12.5",
+  y2: "21",
+  gradientUnits: "userSpaceOnUse"
+}, /*#__PURE__*/React.createElement("stop", {
+  stopColor: `var(--ds-text-accent-blue, ${B400})`,
+  color: `var(--ds-text-accent-blue, ${B400})`
+}), /*#__PURE__*/React.createElement("stop", {
+  offset: "0.802083",
+  stopColor: `var(--ds-icon-accent-blue, ${B200})`,
+  color: `var(--ds-icon-accent-blue, ${B200})`
+}))), /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M17.17 12C17.17 11.4477 17.6177 11 18.17 11H20C20.5523 11 21 11.4477 21 12C21 12.5523 20.5523 13 20 13H18.17C17.6177 13 17.17 12.5523 17.17 12Z",
+  fill: "url(#ai_icon_lg0)"
+}), /*#__PURE__*/React.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M12 3C12.5523 3 13 3.44772 13 4V5.83C13 6.38228 12.5523 6.83 12 6.83C11.4477 6.83 11 6.38228 11 5.83V4C11 3.44772 11.4477 3 12 3Z",
+  fill: "url(#ai_icon_lg1)"
+}), /*#__PURE__*/React.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M3 12C3 11.4477 3.44772 11 4 11H5.83C6.38228 11 6.83 11.4477 6.83 12C6.83 12.5523 6.38228 13 5.83 13H4C3.44772 13 3 12.5523 3 12Z",
+  fill: "url(#ai_icon_lg2)"
+}), /*#__PURE__*/React.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M12 17.17C12.5523 17.17 13 17.6177 13 18.17V20C13 20.5523 12.5523 21 12 21C11.4477 21 11 20.5523 11 20V18.17C11 17.6177 11.4477 17.17 12 17.17Z",
+  fill: "url(#ai_icon_lg3)"
+}), /*#__PURE__*/React.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M14.2929 14.2929C14.6835 13.9024 15.3166 13.9024 15.7071 14.2929L19.7071 18.2929C20.0977 18.6834 20.0977 19.3166 19.7071 19.7071C19.3166 20.0976 18.6835 20.0976 18.2929 19.7071L14.2929 15.7071C13.9024 15.3166 13.9024 14.6834 14.2929 14.2929Z",
+  fill: `var(--ds-icon-accent-blue, ${B200})`
+}), /*#__PURE__*/React.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M19.7071 4.29289C20.0977 4.68342 20.0977 5.31658 19.7071 5.70711L15.7071 9.70711C15.3166 10.0976 14.6835 10.0976 14.2929 9.70711C13.9024 9.31658 13.9024 8.68342 14.2929 8.29289L18.2929 4.29289C18.6835 3.90237 19.3166 3.90237 19.7071 4.29289Z",
+  fill: `var(--ds-icon-accent-blue, ${B200})`
+}), /*#__PURE__*/React.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M4.29289 4.29289C4.68342 3.90237 5.31658 3.90237 5.70711 4.29289L9.70711 8.29289C10.0976 8.68342 10.0976 9.31658 9.70711 9.70711C9.31658 10.0976 8.68342 10.0976 8.29289 9.70711L4.29289 5.70711C3.90237 5.31658 3.90237 4.68342 4.29289 4.29289Z",
+  fill: `var(--ds-icon-accent-blue, ${B200})`
+}), /*#__PURE__*/React.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M9.70711 14.2929C10.0976 14.6834 10.0976 15.3166 9.70711 15.7071L5.70711 19.7071C5.31658 20.0976 4.68342 20.0976 4.29289 19.7071C3.90237 19.3166 3.90237 18.6834 4.29289 18.2929L8.29289 14.2929C8.68342 13.9024 9.31658 13.9024 9.70711 14.2929Z",
+  fill: `var(--ds-icon-accent-blue, ${B200})`
+})));
+export default AiIcon;