@atlaskit/editor-plugin-card 2.0.2 → 2.0.3

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-card
 
+## 2.0.3
+
+### Patch Changes
+
+- [#108480](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/108480)
+  [`8552b1dc7f80d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8552b1dc7f80d) -
+  Creating new dropdown component for configuring links
+
 ## 2.0.2
 
 ### Patch Changes

package/dist/cjs/ui/LeftIconOverlay/ConfigureLinkDropdown/index.js

@@ -0,0 +1,58 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _new = _interopRequireDefault(require("@atlaskit/button/new"));
+var _dropdownMenu = _interopRequireWildcard(require("@atlaskit/dropdown-menu"));
+var _messages = require("@atlaskit/editor-common/messages");
+var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
+var _preferences = _interopRequireDefault(require("@atlaskit/icon/glyph/preferences"));
+var _shortcut = _interopRequireDefault(require("@atlaskit/icon/glyph/shortcut"));
+var _excluded = ["triggerRef"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var ConfigureLinkDropdown = function ConfigureLinkDropdown(props) {
+  var testId = props.testId;
+  var intl = (0, _reactIntlNext.useIntl)();
+  var configureLinkLabel = intl.formatMessage(_messages.cardMessages.inlineConfigureLink);
+  var goToLinkLabel = intl.formatMessage(_messages.cardMessages.inlineConfigureLink);
+  return /*#__PURE__*/_react.default.createElement(_dropdownMenu.default, {
+    trigger: function trigger(_ref) {
+      var triggerRef = _ref.triggerRef,
+        props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+      return /*#__PURE__*/_react.default.createElement(_new.default, (0, _extends2.default)({}, props, {
+        spacing: "none",
+        ref: triggerRef
+      }), /*#__PURE__*/_react.default.createElement("span", {
+        style: {
+          padding: "0 ".concat("var(--ds-space-025, 2px)")
+        }
+      }, /*#__PURE__*/_react.default.createElement(_chevronDown.default, {
+        label: configureLinkLabel,
+        size: 'small',
+        testId: "".concat(testId, "-icon")
+      })));
+    },
+    spacing: "compact",
+    placement: "bottom-start"
+  }, /*#__PURE__*/_react.default.createElement(_dropdownMenu.DropdownItemGroup, null, /*#__PURE__*/_react.default.createElement(_dropdownMenu.DropdownItem, {
+    elemBefore: /*#__PURE__*/_react.default.createElement(_shortcut.default, {
+      label: goToLinkLabel,
+      size: "small"
+    })
+  }, goToLinkLabel), /*#__PURE__*/_react.default.createElement(_dropdownMenu.DropdownItem, {
+    elemBefore: /*#__PURE__*/_react.default.createElement(_preferences.default, {
+      label: configureLinkLabel,
+      size: "small"
+    })
+  }, configureLinkLabel)));
+};
+var _default = exports.default = ConfigureLinkDropdown;

package/dist/es2019/ui/LeftIconOverlay/ConfigureLinkDropdown/index.js

@@ -0,0 +1,47 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { useIntl } from "react-intl-next";
+import Button from "@atlaskit/button/new";
+import DropdownMenu, { DropdownItem, DropdownItemGroup } from "@atlaskit/dropdown-menu";
+import { cardMessages as messages } from "@atlaskit/editor-common/messages";
+import ChevronDownIcon from "@atlaskit/icon/glyph/chevron-down";
+import PreferencesIcon from "@atlaskit/icon/glyph/preferences";
+import ShortcutIcon from "@atlaskit/icon/glyph/shortcut";
+const ConfigureLinkDropdown = props => {
+  const {
+    testId
+  } = props;
+  const intl = useIntl();
+  const configureLinkLabel = intl.formatMessage(messages.inlineConfigureLink);
+  const goToLinkLabel = intl.formatMessage(messages.inlineConfigureLink);
+  return /*#__PURE__*/React.createElement(DropdownMenu, {
+    trigger: ({
+      triggerRef,
+      ...props
+    }) => /*#__PURE__*/React.createElement(Button, _extends({}, props, {
+      spacing: "none",
+      ref: triggerRef
+    }), /*#__PURE__*/React.createElement("span", {
+      style: {
+        padding: `0 ${"var(--ds-space-025, 2px)"}`
+      }
+    }, /*#__PURE__*/React.createElement(ChevronDownIcon, {
+      label: configureLinkLabel,
+      size: 'small',
+      testId: `${testId}-icon`
+    }))),
+    spacing: "compact",
+    placement: "bottom-start"
+  }, /*#__PURE__*/React.createElement(DropdownItemGroup, null, /*#__PURE__*/React.createElement(DropdownItem, {
+    elemBefore: /*#__PURE__*/React.createElement(ShortcutIcon, {
+      label: goToLinkLabel,
+      size: "small"
+    })
+  }, goToLinkLabel), /*#__PURE__*/React.createElement(DropdownItem, {
+    elemBefore: /*#__PURE__*/React.createElement(PreferencesIcon, {
+      label: configureLinkLabel,
+      size: "small"
+    })
+  }, configureLinkLabel)));
+};
+export default ConfigureLinkDropdown;

package/dist/esm/ui/LeftIconOverlay/ConfigureLinkDropdown/index.js

@@ -0,0 +1,48 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["triggerRef"];
+import React from 'react';
+import { useIntl } from "react-intl-next";
+import Button from "@atlaskit/button/new";
+import DropdownMenu, { DropdownItem, DropdownItemGroup } from "@atlaskit/dropdown-menu";
+import { cardMessages as messages } from "@atlaskit/editor-common/messages";
+import ChevronDownIcon from "@atlaskit/icon/glyph/chevron-down";
+import PreferencesIcon from "@atlaskit/icon/glyph/preferences";
+import ShortcutIcon from "@atlaskit/icon/glyph/shortcut";
+var ConfigureLinkDropdown = function ConfigureLinkDropdown(props) {
+  var testId = props.testId;
+  var intl = useIntl();
+  var configureLinkLabel = intl.formatMessage(messages.inlineConfigureLink);
+  var goToLinkLabel = intl.formatMessage(messages.inlineConfigureLink);
+  return /*#__PURE__*/React.createElement(DropdownMenu, {
+    trigger: function trigger(_ref) {
+      var triggerRef = _ref.triggerRef,
+        props = _objectWithoutProperties(_ref, _excluded);
+      return /*#__PURE__*/React.createElement(Button, _extends({}, props, {
+        spacing: "none",
+        ref: triggerRef
+      }), /*#__PURE__*/React.createElement("span", {
+        style: {
+          padding: "0 ".concat("var(--ds-space-025, 2px)")
+        }
+      }, /*#__PURE__*/React.createElement(ChevronDownIcon, {
+        label: configureLinkLabel,
+        size: 'small',
+        testId: "".concat(testId, "-icon")
+      })));
+    },
+    spacing: "compact",
+    placement: "bottom-start"
+  }, /*#__PURE__*/React.createElement(DropdownItemGroup, null, /*#__PURE__*/React.createElement(DropdownItem, {
+    elemBefore: /*#__PURE__*/React.createElement(ShortcutIcon, {
+      label: goToLinkLabel,
+      size: "small"
+    })
+  }, goToLinkLabel), /*#__PURE__*/React.createElement(DropdownItem, {
+    elemBefore: /*#__PURE__*/React.createElement(PreferencesIcon, {
+      label: configureLinkLabel,
+      size: "small"
+    })
+  }, configureLinkLabel)));
+};
+export default ConfigureLinkDropdown;

package/dist/types/ui/LeftIconOverlay/ConfigureLinkDropdown/index.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export type SmallLinkDropdownProps = {
+    testId: string;
+};
+declare const ConfigureLinkDropdown: (props: SmallLinkDropdownProps) => JSX.Element;
+export default ConfigureLinkDropdown;

package/dist/types-ts4.5/ui/LeftIconOverlay/ConfigureLinkDropdown/index.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export type SmallLinkDropdownProps = {
+    testId: string;
+};
+declare const ConfigureLinkDropdown: (props: SmallLinkDropdownProps) => JSX.Element;
+export default ConfigureLinkDropdown;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-card",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "Card plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -34,7 +34,9 @@
   "dependencies": {
     "@atlaskit/adf-schema": "^36.10.7",
     "@atlaskit/analytics-next": "^9.3.0",
+    "@atlaskit/button": "^17.17.1",
     "@atlaskit/custom-steps": "^0.2.0",
+    "@atlaskit/dropdown-menu": "^12.10.2",
     "@atlaskit/editor-common": "^82.1.0",
     "@atlaskit/editor-plugin-analytics": "^1.2.0",
     "@atlaskit/editor-plugin-decorations": "^1.1.0",