@atlaskit/editor-plugin-card 1.10.3 → 1.11.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-card
 
+## 1.11.0
+
+### Minor Changes
+
+-   [#97997](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/97997)
+    [`ee970964e1f2`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ee970964e1f2) -
+    [ux] Replaces the Datasources Toolbar TableIcon with a new custom Icon
+
 ## 1.10.3
 
 ### Patch Changes

package/dist/cjs/ui/DatasourceAppearanceButton.js

@@ -1,6 +1,5 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,13 +10,13 @@ var _messages = require("@atlaskit/editor-common/messages");
 var _ui = require("@atlaskit/editor-common/ui");
 var _utils = require("@atlaskit/editor-common/utils");
 var _state = require("@atlaskit/editor-prosemirror/state");
-var _table = _interopRequireDefault(require("@atlaskit/icon/glyph/table"));
 var _linkDatasource = require("@atlaskit/link-datasource");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
 var _doc = require("../pm-plugins/doc");
 var _pluginKey = require("../pm-plugins/plugin-key");
 var _CardContextProvider = require("./CardContextProvider");
+var _DatasourceIcon = require("./DatasourceIcon");
 var _useFetchDatasourceInfo = require("./useFetchDatasourceInfo");
 /** @jsx jsx */
 
@@ -97,7 +96,7 @@ var DatasourceAppearanceButtonWithCardContext = function DatasourceAppearanceBut
   return (0, _react2.jsx)(_primitives.Flex, null, (0, _react2.jsx)(_ui.FloatingToolbarButton, {
     css: buttonStyles,
     title: buttonLabel,
-    icon: (0, _react2.jsx)(_table.default, {
+    icon: (0, _react2.jsx)(_DatasourceIcon.DatasourceIcon, {
       label: buttonLabel
     }),
     selected: selected,

package/dist/cjs/ui/DatasourceIcon/index.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DatasourceIcon = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _icon = _interopRequireDefault(require("@atlaskit/icon"));
+var _primitives = require("@atlaskit/primitives");
+var IconDatasourceGlyph = function IconDatasourceGlyph(props) {
+  return /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "15",
+    height: "15",
+    viewBox: "0 0 15 15",
+    fill: "none"
+  }, props), /*#__PURE__*/_react.default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M0 2C0 0.89543 0.895431 0 2 0H13C14.1046 0 15 0.895431 15 2V13C15 14.1046 14.1046 15 13 15H2C0.89543 15 0 14.1046 0 13V2ZM5 6C5 5.44772 5.44772 5 6 5L12 5C12.5523 5 13 5.44772 13 6C13 6.55229 12.5523 7 12 7L6 7C5.44772 7 5 6.55228 5 6ZM6 8C5.44772 8 5 8.44771 5 9C5 9.55228 5.44772 10 6 10L12 10C12.5523 10 13 9.55229 13 9C13 8.44772 12.5523 8 12 8L6 8ZM5 12C5 11.4477 5.44772 11 6 11L12 11C12.5523 11 13 11.4477 13 12C13 12.5523 12.5523 13 12 13L6 13C5.44772 13 5 12.5523 5 12ZM3 7C3.55228 7 4 6.55228 4 6C4 5.44772 3.55228 5 3 5C2.44772 5 2 5.44772 2 6C2 6.55228 2.44772 7 3 7ZM5 3C5 2.44772 5.44772 2 6 2L12 2C12.5523 2 13 2.44772 13 3C13 3.55229 12.5523 4 12 4L6 4C5.44772 4 5 3.55228 5 3ZM3 4C3.55228 4 4 3.55228 4 3C4 2.44772 3.55228 2 3 2C2.44772 2 2 2.44772 2 3C2 3.55228 2.44772 4 3 4ZM4 9C4 9.55229 3.55228 10 3 10C2.44772 10 2 9.55229 2 9C2 8.44771 2.44772 8 3 8C3.55228 8 4 8.44771 4 9ZM3 13C3.55228 13 4 12.5523 4 12C4 11.4477 3.55228 11 3 11C2.44772 11 2 11.4477 2 12C2 12.5523 2.44772 13 3 13Z",
+    fill: 'currentColor'
+  }));
+};
+var wrapperStyles = (0, _primitives.xcss)({
+  padding: 'space.050',
+  justifyContent: 'center',
+  alignItems: 'center',
+  width: 'space.300',
+  height: 'space.300'
+});
+var DatasourceIcon = exports.DatasourceIcon = function DatasourceIcon(props) {
+  return /*#__PURE__*/_react.default.createElement(_primitives.Flex, {
+    xcss: wrapperStyles
+  }, /*#__PURE__*/_react.default.createElement(_icon.default, (0, _extends2.default)({
+    glyph: IconDatasourceGlyph
+  }, props)));
+};

package/dist/es2019/ui/DatasourceAppearanceButton.js

@@ -5,13 +5,13 @@ import { cardMessages as messages } from '@atlaskit/editor-common/messages';
 import { FloatingToolbarButton as Button } from '@atlaskit/editor-common/ui';
 import { canRenderDatasource } from '@atlaskit/editor-common/utils';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
-import TableIcon from '@atlaskit/icon/glyph/table';
 import { buildDatasourceAdf } from '@atlaskit/link-datasource';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { Flex } from '@atlaskit/primitives';
 import { updateCardViaDatasource } from '../pm-plugins/doc';
 import { pluginKey } from '../pm-plugins/plugin-key';
 import { CardContextProvider } from './CardContextProvider';
+import { DatasourceIcon } from './DatasourceIcon';
 import { useFetchDatasourceInfo } from './useFetchDatasourceInfo';
 const buttonStyles = css({
   pointerEvents: 'auto'
@@ -91,7 +91,7 @@ const DatasourceAppearanceButtonWithCardContext = ({
   return jsx(Flex, null, jsx(Button, {
     css: buttonStyles,
     title: buttonLabel,
-    icon: jsx(TableIcon, {
+    icon: jsx(DatasourceIcon, {
       label: buttonLabel
     }),
     selected: selected,

package/dist/es2019/ui/DatasourceIcon/index.js

@@ -0,0 +1,32 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import Icon from '@atlaskit/icon';
+import { Flex, xcss } from '@atlaskit/primitives';
+const IconDatasourceGlyph = props => {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "15",
+    height: "15",
+    viewBox: "0 0 15 15",
+    fill: "none"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M0 2C0 0.89543 0.895431 0 2 0H13C14.1046 0 15 0.895431 15 2V13C15 14.1046 14.1046 15 13 15H2C0.89543 15 0 14.1046 0 13V2ZM5 6C5 5.44772 5.44772 5 6 5L12 5C12.5523 5 13 5.44772 13 6C13 6.55229 12.5523 7 12 7L6 7C5.44772 7 5 6.55228 5 6ZM6 8C5.44772 8 5 8.44771 5 9C5 9.55228 5.44772 10 6 10L12 10C12.5523 10 13 9.55229 13 9C13 8.44772 12.5523 8 12 8L6 8ZM5 12C5 11.4477 5.44772 11 6 11L12 11C12.5523 11 13 11.4477 13 12C13 12.5523 12.5523 13 12 13L6 13C5.44772 13 5 12.5523 5 12ZM3 7C3.55228 7 4 6.55228 4 6C4 5.44772 3.55228 5 3 5C2.44772 5 2 5.44772 2 6C2 6.55228 2.44772 7 3 7ZM5 3C5 2.44772 5.44772 2 6 2L12 2C12.5523 2 13 2.44772 13 3C13 3.55229 12.5523 4 12 4L6 4C5.44772 4 5 3.55228 5 3ZM3 4C3.55228 4 4 3.55228 4 3C4 2.44772 3.55228 2 3 2C2.44772 2 2 2.44772 2 3C2 3.55228 2.44772 4 3 4ZM4 9C4 9.55229 3.55228 10 3 10C2.44772 10 2 9.55229 2 9C2 8.44771 2.44772 8 3 8C3.55228 8 4 8.44771 4 9ZM3 13C3.55228 13 4 12.5523 4 12C4 11.4477 3.55228 11 3 11C2.44772 11 2 11.4477 2 12C2 12.5523 2.44772 13 3 13Z",
+    fill: 'currentColor'
+  }));
+};
+const wrapperStyles = xcss({
+  padding: 'space.050',
+  justifyContent: 'center',
+  alignItems: 'center',
+  width: 'space.300',
+  height: 'space.300'
+});
+export const DatasourceIcon = props => {
+  return /*#__PURE__*/React.createElement(Flex, {
+    xcss: wrapperStyles
+  }, /*#__PURE__*/React.createElement(Icon, _extends({
+    glyph: IconDatasourceGlyph
+  }, props)));
+};

package/dist/esm/ui/DatasourceAppearanceButton.js

@@ -5,13 +5,13 @@ import { cardMessages as messages } from '@atlaskit/editor-common/messages';
 import { FloatingToolbarButton as Button } from '@atlaskit/editor-common/ui';
 import { canRenderDatasource } from '@atlaskit/editor-common/utils';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
-import TableIcon from '@atlaskit/icon/glyph/table';
 import { buildDatasourceAdf } from '@atlaskit/link-datasource';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { Flex } from '@atlaskit/primitives';
 import { updateCardViaDatasource } from '../pm-plugins/doc';
 import { pluginKey } from '../pm-plugins/plugin-key';
 import { CardContextProvider } from './CardContextProvider';
+import { DatasourceIcon } from './DatasourceIcon';
 import { useFetchDatasourceInfo } from './useFetchDatasourceInfo';
 var buttonStyles = css({
   pointerEvents: 'auto'
@@ -89,7 +89,7 @@ var DatasourceAppearanceButtonWithCardContext = function DatasourceAppearanceBut
   return jsx(Flex, null, jsx(Button, {
     css: buttonStyles,
     title: buttonLabel,
-    icon: jsx(TableIcon, {
+    icon: jsx(DatasourceIcon, {
       label: buttonLabel
     }),
     selected: selected,

package/dist/esm/ui/DatasourceIcon/index.js

@@ -0,0 +1,32 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import Icon from '@atlaskit/icon';
+import { Flex, xcss } from '@atlaskit/primitives';
+var IconDatasourceGlyph = function IconDatasourceGlyph(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "15",
+    height: "15",
+    viewBox: "0 0 15 15",
+    fill: "none"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M0 2C0 0.89543 0.895431 0 2 0H13C14.1046 0 15 0.895431 15 2V13C15 14.1046 14.1046 15 13 15H2C0.89543 15 0 14.1046 0 13V2ZM5 6C5 5.44772 5.44772 5 6 5L12 5C12.5523 5 13 5.44772 13 6C13 6.55229 12.5523 7 12 7L6 7C5.44772 7 5 6.55228 5 6ZM6 8C5.44772 8 5 8.44771 5 9C5 9.55228 5.44772 10 6 10L12 10C12.5523 10 13 9.55229 13 9C13 8.44772 12.5523 8 12 8L6 8ZM5 12C5 11.4477 5.44772 11 6 11L12 11C12.5523 11 13 11.4477 13 12C13 12.5523 12.5523 13 12 13L6 13C5.44772 13 5 12.5523 5 12ZM3 7C3.55228 7 4 6.55228 4 6C4 5.44772 3.55228 5 3 5C2.44772 5 2 5.44772 2 6C2 6.55228 2.44772 7 3 7ZM5 3C5 2.44772 5.44772 2 6 2L12 2C12.5523 2 13 2.44772 13 3C13 3.55229 12.5523 4 12 4L6 4C5.44772 4 5 3.55228 5 3ZM3 4C3.55228 4 4 3.55228 4 3C4 2.44772 3.55228 2 3 2C2.44772 2 2 2.44772 2 3C2 3.55228 2.44772 4 3 4ZM4 9C4 9.55229 3.55228 10 3 10C2.44772 10 2 9.55229 2 9C2 8.44771 2.44772 8 3 8C3.55228 8 4 8.44771 4 9ZM3 13C3.55228 13 4 12.5523 4 12C4 11.4477 3.55228 11 3 11C2.44772 11 2 11.4477 2 12C2 12.5523 2.44772 13 3 13Z",
+    fill: 'currentColor'
+  }));
+};
+var wrapperStyles = xcss({
+  padding: 'space.050',
+  justifyContent: 'center',
+  alignItems: 'center',
+  width: 'space.300',
+  height: 'space.300'
+});
+export var DatasourceIcon = function DatasourceIcon(props) {
+  return /*#__PURE__*/React.createElement(Flex, {
+    xcss: wrapperStyles
+  }, /*#__PURE__*/React.createElement(Icon, _extends({
+    glyph: IconDatasourceGlyph
+  }, props)));
+};

package/dist/types/ui/DatasourceIcon/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { GlyphProps } from '@atlaskit/icon/types';
+export declare const DatasourceIcon: (props: GlyphProps) => JSX.Element;

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { GlyphProps } from '@atlaskit/icon/types';
+export declare const DatasourceIcon: (props: GlyphProps) => JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-card",
-  "version": "1.10.3",
+  "version": "1.11.0",
   "description": "Card plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -35,7 +35,7 @@
     "@atlaskit/adf-schema": "^35.12.2",
     "@atlaskit/analytics-next": "^9.3.0",
     "@atlaskit/custom-steps": "^0.1.0",
-    "@atlaskit/editor-common": "^79.1.0",
+    "@atlaskit/editor-common": "^79.2.0",
     "@atlaskit/editor-plugin-analytics": "^1.1.0",
     "@atlaskit/editor-plugin-decorations": "^1.1.0",
     "@atlaskit/editor-plugin-editor-viewmode": "^1.1.0",
@@ -55,7 +55,7 @@
     "@atlaskit/linking-types": "^8.8.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
     "@atlaskit/primitives": "^6.1.0",
-    "@atlaskit/smart-card": "^26.60.0",
+    "@atlaskit/smart-card": "^26.62.0",
     "@atlaskit/theme": "^12.7.0",
     "@atlaskit/tokens": "^1.45.0",
     "@babel/runtime": "^7.0.0",