@atlaskit/editor-plugin-card 0.15.0 → 0.15.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-card
 
+## 0.15.1
+
+### Patch Changes
+
+- [#64861](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/64861) [`87c2c502ea93`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/87c2c502ea93) - [UX] scale icon size based on font size in discoverability overlay
+- [#64817](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/64817) [`afa680b9f6bb`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/afa680b9f6bb) - change background color for active state of discoverability overlay to match color of smart link active state
+- Updated dependencies
+
 ## 0.15.0
 
 ### Minor Changes

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

@@ -9,6 +9,7 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _debounce = _interopRequireDefault(require("lodash/debounce"));
@@ -19,6 +20,8 @@ var _preferences = _interopRequireDefault(require("@atlaskit/icon/glyph/preferen
 var _colors = require("@atlaskit/theme/colors");
 var _utils2 = require("./utils");
 var _excluded = ["children", "isSelected", "isVisible", "testId", "url"];
+var _active;
+/* eslint-disable @atlaskit/design-system/no-nested-styles */
 /* eslint-disable @atlaskit/design-system/prefer-primitives */
 /** @jsx jsx */
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -29,11 +32,22 @@ var PADDING_IN_PX = 4;
 var ICON_WIDTH_IN_PX = 14;
 var ICON_AND_LABEL_CLASSNAME = 'ak-editor-card-overlay-icon-and-label';
 var OVERLAY_LABEL_CLASSNAME = 'ak-editor-card-overlay-label';
+var OVERLAY_GRADIENT_CLASSNAME = 'ak-editor-card-overlay-gradient';
 var OVERLAY_MARKER_CLASSNAME = 'ak-editor-card-overlay-marker';
 var TEXT_NODE_SELECTOR = ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'].join(',');
+var SMART_LINK_BACKGROUND_COLOR = "var(--ds-surface-raised, ".concat(_colors.N0, ")");
+var SMART_LINK_ACTIVE_COLOR = "var(--ds-background-selected, ".concat(_colors.B100, ")");
+var getGradientWithColor = function getGradientWithColor(color) {
+  return "linear-gradient(270deg, ".concat(color, " 0%, rgba(255, 255, 255, 0.00) 100%)");
+};
 var containerStyles = (0, _react2.css)({
   position: 'relative',
-  lineHeight: 'normal'
+  lineHeight: 'normal',
+  ':active': (_active = {}, (0, _defineProperty2.default)(_active, ".".concat(ICON_AND_LABEL_CLASSNAME), {
+    background: SMART_LINK_ACTIVE_COLOR
+  }), (0, _defineProperty2.default)(_active, ".".concat(OVERLAY_GRADIENT_CLASSNAME), {
+    background: getGradientWithColor(SMART_LINK_ACTIVE_COLOR)
+  }), _active)
 });
 var overlayStyles = (0, _react2.css)({
   // Set default styling to be invisible but available in dom for width calculation.
@@ -53,8 +67,7 @@ var overlayStyles = (0, _react2.css)({
   zIndex: 2,
   // Appearance
   color: "var(--ds-text-subtlest, ".concat(_colors.N700, ")"),
-  // Using `&` twice to increase specificity. (These are not nested styles.)+
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  // Using `&` twice to increase specificity. (These are not nested styles.)
   '&&:link, &&:active, &&:focus, &&:hover, &&:visited': {
     color: "var(--ds-text-subtlest, ".concat(_colors.N700, ")"),
     textDecoration: 'none'
@@ -67,7 +80,6 @@ var showOverlayStyles = (0, _react2.css)({
 });
 var iconStyles = (0, _react2.css)({
   // Position icon in the middle
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   span: {
     display: 'flex'
   }
@@ -78,7 +90,7 @@ var labelStyles = (0, _react2.css)({
   width: 'max-content'
 });
 var iconAndLabelStyles = (0, _react2.css)({
-  background: "var(--ds-surface-raised, white)",
+  background: SMART_LINK_BACKGROUND_COLOR,
   display: 'flex',
   alignItems: 'center',
   height: '100%',
@@ -97,7 +109,7 @@ var overflowingContainerStyles = (0, _react2.css)({
 var gradientStyles = (0, _react2.css)({
   width: '2.5rem',
   height: '100%',
-  background: "linear-gradient(270deg, ".concat("var(--ds-surface-raised, white)", " 0%, rgba(255, 255, 255, 0.00) 100%)")
+  background: getGradientWithColor(SMART_LINK_BACKGROUND_COLOR)
 });
 var InlineCardOverlay = function InlineCardOverlay(_ref) {
   var children = _ref.children,
@@ -124,6 +136,7 @@ var InlineCardOverlay = function InlineCardOverlay(_ref) {
   var maxOverlayWidth = (0, _react.useRef)(0);
   var minOverlayWidth = (0, _react.useRef)(ESTIMATED_MIN_WIDTH_IN_PX);
   var parentWidth = (0, _react.useRef)(0);
+  var iconSize = (0, _react.useRef)('small');
   var containerRef = (0, _react.useRef)(null);
   var setVisibility = (0, _react.useCallback)(function () {
     if (!containerRef.current || !maxOverlayWidth.current) {
@@ -173,6 +186,7 @@ var InlineCardOverlay = function InlineCardOverlay(_ref) {
           min = _getOverlayWidths.min;
         maxOverlayWidth.current = max;
         minOverlayWidth.current = min;
+        iconSize.current = (0, _utils2.getIconSize)(_label);
       }
     }
     if (isVisible) {
@@ -240,7 +254,7 @@ var InlineCardOverlay = function InlineCardOverlay(_ref) {
     css: iconStyles
   }, (0, _react2.jsx)(_preferences.default, {
     label: label,
-    size: "small",
+    size: iconSize.current,
     testId: "".concat(testId, "-icon")
   })), showLabel && (0, _react2.jsx)("span", {
     css: labelStyles,
@@ -248,6 +262,7 @@ var InlineCardOverlay = function InlineCardOverlay(_ref) {
     "data-testid": "".concat(testId, "-label")
   }, label)), (0, _react2.jsx)("span", {
     css: gradientStyles,
+    className: OVERLAY_GRADIENT_CLASSNAME,
     "data-testid": "".concat(testId, "-gradient")
   })))));
 };

package/dist/cjs/ui/InlineCardOverlay/utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isOneLine = exports.getOverlayWidths = exports.getInlineCardAvailableWidth = exports.getChildElement = void 0;
+exports.isOneLine = exports.getOverlayWidths = exports.getInlineCardAvailableWidth = exports.getIconSize = exports.getChildElement = void 0;
 /**
  * Find a child element inside a ref.
  */
@@ -37,4 +37,12 @@ var getOverlayWidths = exports.getOverlayWidths = function getOverlayWidths(over
     max: max,
     min: min
   };
+};
+var getIconSize = exports.getIconSize = function getIconSize(labelEl) {
+  var h2FontSizePx = 20;
+  var fontSize = window && parseFloat(window.getComputedStyle(labelEl).fontSize);
+  if (!fontSize || fontSize < h2FontSizePx) {
+    return 'small';
+  }
+  return 'medium';
 };

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

@@ -1,4 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
+/* eslint-disable @atlaskit/design-system/no-nested-styles */
 /* eslint-disable @atlaskit/design-system/prefer-primitives */
 /** @jsx jsx */
 
@@ -9,19 +10,33 @@ import { useIntl } from 'react-intl-next';
 import { cardMessages as messages } from '@atlaskit/editor-common/messages';
 import { ZERO_WIDTH_JOINER } from '@atlaskit/editor-common/utils';
 import PreferencesIcon from '@atlaskit/icon/glyph/preferences';
-import { N700 } from '@atlaskit/theme/colors';
-import { getChildElement, getInlineCardAvailableWidth, getOverlayWidths, isOneLine } from './utils';
+import { B100, N0, N700 } from '@atlaskit/theme/colors';
+import { getChildElement, getIconSize, getInlineCardAvailableWidth, getOverlayWidths, isOneLine } from './utils';
 const DEBOUNCE_IN_MS = 5;
 const ESTIMATED_MIN_WIDTH_IN_PX = 16;
 const PADDING_IN_PX = 4;
 const ICON_WIDTH_IN_PX = 14;
 const ICON_AND_LABEL_CLASSNAME = 'ak-editor-card-overlay-icon-and-label';
 const OVERLAY_LABEL_CLASSNAME = 'ak-editor-card-overlay-label';
+const OVERLAY_GRADIENT_CLASSNAME = 'ak-editor-card-overlay-gradient';
 const OVERLAY_MARKER_CLASSNAME = 'ak-editor-card-overlay-marker';
 const TEXT_NODE_SELECTOR = ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'].join(',');
+const SMART_LINK_BACKGROUND_COLOR = `var(--ds-surface-raised, ${N0})`;
+const SMART_LINK_ACTIVE_COLOR = `var(--ds-background-selected, ${B100})`;
+const getGradientWithColor = color => {
+  return `linear-gradient(270deg, ${color} 0%, rgba(255, 255, 255, 0.00) 100%)`;
+};
 const containerStyles = css({
   position: 'relative',
-  lineHeight: 'normal'
+  lineHeight: 'normal',
+  ':active': {
+    [`.${ICON_AND_LABEL_CLASSNAME}`]: {
+      background: SMART_LINK_ACTIVE_COLOR
+    },
+    [`.${OVERLAY_GRADIENT_CLASSNAME}`]: {
+      background: getGradientWithColor(SMART_LINK_ACTIVE_COLOR)
+    }
+  }
 });
 const overlayStyles = css({
   // Set default styling to be invisible but available in dom for width calculation.
@@ -41,8 +56,7 @@ const overlayStyles = css({
   zIndex: 2,
   // Appearance
   color: `var(--ds-text-subtlest, ${N700})`,
-  // Using `&` twice to increase specificity. (These are not nested styles.)+
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  // Using `&` twice to increase specificity. (These are not nested styles.)
   '&&:link, &&:active, &&:focus, &&:hover, &&:visited': {
     color: `var(--ds-text-subtlest, ${N700})`,
     textDecoration: 'none'
@@ -55,7 +69,6 @@ const showOverlayStyles = css({
 });
 const iconStyles = css({
   // Position icon in the middle
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   span: {
     display: 'flex'
   }
@@ -66,7 +79,7 @@ const labelStyles = css({
   width: 'max-content'
 });
 const iconAndLabelStyles = css({
-  background: "var(--ds-surface-raised, white)",
+  background: SMART_LINK_BACKGROUND_COLOR,
   display: 'flex',
   alignItems: 'center',
   height: '100%',
@@ -85,7 +98,7 @@ const overflowingContainerStyles = css({
 const gradientStyles = css({
   width: '2.5rem',
   height: '100%',
-  background: `linear-gradient(270deg, ${"var(--ds-surface-raised, white)"} 0%, rgba(255, 255, 255, 0.00) 100%)`
+  background: getGradientWithColor(SMART_LINK_BACKGROUND_COLOR)
 });
 const InlineCardOverlay = ({
   children,
@@ -101,6 +114,7 @@ const InlineCardOverlay = ({
   const maxOverlayWidth = useRef(0);
   const minOverlayWidth = useRef(ESTIMATED_MIN_WIDTH_IN_PX);
   const parentWidth = useRef(0);
+  const iconSize = useRef('small');
   const containerRef = useRef(null);
   const setVisibility = useCallback(() => {
     if (!containerRef.current || !maxOverlayWidth.current) {
@@ -151,6 +165,7 @@ const InlineCardOverlay = ({
         } = getOverlayWidths(iconAndLabel, label);
         maxOverlayWidth.current = max;
         minOverlayWidth.current = min;
+        iconSize.current = getIconSize(label);
       }
     }
     if (isVisible) {
@@ -216,7 +231,7 @@ const InlineCardOverlay = ({
     css: iconStyles
   }, jsx(PreferencesIcon, {
     label: label,
-    size: "small",
+    size: iconSize.current,
     testId: `${testId}-icon`
   })), showLabel && jsx("span", {
     css: labelStyles,
@@ -224,6 +239,7 @@ const InlineCardOverlay = ({
     "data-testid": `${testId}-label`
   }, label)), jsx("span", {
     css: gradientStyles,
+    className: OVERLAY_GRADIENT_CLASSNAME,
     "data-testid": `${testId}-gradient`
   })))));
 };

package/dist/es2019/ui/InlineCardOverlay/utils.js

@@ -29,4 +29,12 @@ export const getOverlayWidths = (overlayEl, labelEl) => {
     max,
     min
   };
+};
+export const getIconSize = labelEl => {
+  const h2FontSizePx = 20;
+  const fontSize = window && parseFloat(window.getComputedStyle(labelEl).fontSize);
+  if (!fontSize || fontSize < h2FontSizePx) {
+    return 'small';
+  }
+  return 'medium';
 };

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

@@ -1,7 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["children", "isSelected", "isVisible", "testId", "url"];
+var _active;
+/* eslint-disable @atlaskit/design-system/no-nested-styles */
 /* eslint-disable @atlaskit/design-system/prefer-primitives */
 /** @jsx jsx */
 
@@ -12,19 +15,30 @@ import { useIntl } from 'react-intl-next';
 import { cardMessages as messages } from '@atlaskit/editor-common/messages';
 import { ZERO_WIDTH_JOINER } from '@atlaskit/editor-common/utils';
 import PreferencesIcon from '@atlaskit/icon/glyph/preferences';
-import { N700 } from '@atlaskit/theme/colors';
-import { getChildElement, getInlineCardAvailableWidth, getOverlayWidths, isOneLine } from './utils';
+import { B100, N0, N700 } from '@atlaskit/theme/colors';
+import { getChildElement, getIconSize, getInlineCardAvailableWidth, getOverlayWidths, isOneLine } from './utils';
 var DEBOUNCE_IN_MS = 5;
 var ESTIMATED_MIN_WIDTH_IN_PX = 16;
 var PADDING_IN_PX = 4;
 var ICON_WIDTH_IN_PX = 14;
 var ICON_AND_LABEL_CLASSNAME = 'ak-editor-card-overlay-icon-and-label';
 var OVERLAY_LABEL_CLASSNAME = 'ak-editor-card-overlay-label';
+var OVERLAY_GRADIENT_CLASSNAME = 'ak-editor-card-overlay-gradient';
 var OVERLAY_MARKER_CLASSNAME = 'ak-editor-card-overlay-marker';
 var TEXT_NODE_SELECTOR = ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'].join(',');
+var SMART_LINK_BACKGROUND_COLOR = "var(--ds-surface-raised, ".concat(N0, ")");
+var SMART_LINK_ACTIVE_COLOR = "var(--ds-background-selected, ".concat(B100, ")");
+var getGradientWithColor = function getGradientWithColor(color) {
+  return "linear-gradient(270deg, ".concat(color, " 0%, rgba(255, 255, 255, 0.00) 100%)");
+};
 var containerStyles = css({
   position: 'relative',
-  lineHeight: 'normal'
+  lineHeight: 'normal',
+  ':active': (_active = {}, _defineProperty(_active, ".".concat(ICON_AND_LABEL_CLASSNAME), {
+    background: SMART_LINK_ACTIVE_COLOR
+  }), _defineProperty(_active, ".".concat(OVERLAY_GRADIENT_CLASSNAME), {
+    background: getGradientWithColor(SMART_LINK_ACTIVE_COLOR)
+  }), _active)
 });
 var overlayStyles = css({
   // Set default styling to be invisible but available in dom for width calculation.
@@ -44,8 +58,7 @@ var overlayStyles = css({
   zIndex: 2,
   // Appearance
   color: "var(--ds-text-subtlest, ".concat(N700, ")"),
-  // Using `&` twice to increase specificity. (These are not nested styles.)+
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  // Using `&` twice to increase specificity. (These are not nested styles.)
   '&&:link, &&:active, &&:focus, &&:hover, &&:visited': {
     color: "var(--ds-text-subtlest, ".concat(N700, ")"),
     textDecoration: 'none'
@@ -58,7 +71,6 @@ var showOverlayStyles = css({
 });
 var iconStyles = css({
   // Position icon in the middle
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   span: {
     display: 'flex'
   }
@@ -69,7 +81,7 @@ var labelStyles = css({
   width: 'max-content'
 });
 var iconAndLabelStyles = css({
-  background: "var(--ds-surface-raised, white)",
+  background: SMART_LINK_BACKGROUND_COLOR,
   display: 'flex',
   alignItems: 'center',
   height: '100%',
@@ -88,7 +100,7 @@ var overflowingContainerStyles = css({
 var gradientStyles = css({
   width: '2.5rem',
   height: '100%',
-  background: "linear-gradient(270deg, ".concat("var(--ds-surface-raised, white)", " 0%, rgba(255, 255, 255, 0.00) 100%)")
+  background: getGradientWithColor(SMART_LINK_BACKGROUND_COLOR)
 });
 var InlineCardOverlay = function InlineCardOverlay(_ref) {
   var children = _ref.children,
@@ -115,6 +127,7 @@ var InlineCardOverlay = function InlineCardOverlay(_ref) {
   var maxOverlayWidth = useRef(0);
   var minOverlayWidth = useRef(ESTIMATED_MIN_WIDTH_IN_PX);
   var parentWidth = useRef(0);
+  var iconSize = useRef('small');
   var containerRef = useRef(null);
   var setVisibility = useCallback(function () {
     if (!containerRef.current || !maxOverlayWidth.current) {
@@ -164,6 +177,7 @@ var InlineCardOverlay = function InlineCardOverlay(_ref) {
           min = _getOverlayWidths.min;
         maxOverlayWidth.current = max;
         minOverlayWidth.current = min;
+        iconSize.current = getIconSize(_label);
       }
     }
     if (isVisible) {
@@ -231,7 +245,7 @@ var InlineCardOverlay = function InlineCardOverlay(_ref) {
     css: iconStyles
   }, jsx(PreferencesIcon, {
     label: label,
-    size: "small",
+    size: iconSize.current,
     testId: "".concat(testId, "-icon")
   })), showLabel && jsx("span", {
     css: labelStyles,
@@ -239,6 +253,7 @@ var InlineCardOverlay = function InlineCardOverlay(_ref) {
     "data-testid": "".concat(testId, "-label")
   }, label)), jsx("span", {
     css: gradientStyles,
+    className: OVERLAY_GRADIENT_CLASSNAME,
     "data-testid": "".concat(testId, "-gradient")
   })))));
 };

package/dist/esm/ui/InlineCardOverlay/utils.js

@@ -31,4 +31,12 @@ export var getOverlayWidths = function getOverlayWidths(overlayEl, labelEl) {
     max: max,
     min: min
   };
+};
+export var getIconSize = function getIconSize(labelEl) {
+  var h2FontSizePx = 20;
+  var fontSize = window && parseFloat(window.getComputedStyle(labelEl).fontSize);
+  if (!fontSize || fontSize < h2FontSizePx) {
+    return 'small';
+  }
+  return 'medium';
 };

package/dist/types/ui/InlineCardOverlay/utils.d.ts

@@ -1,3 +1,4 @@
+import type { Size } from '@atlaskit/icon';
 /**
  * Find a child element inside a ref.
  */
@@ -16,3 +17,4 @@ export declare const getOverlayWidths: (overlayEl: HTMLElement, labelEl: HTMLEle
     max: number;
     min: number;
 };
+export declare const getIconSize: (labelEl: HTMLElement) => Size;

package/dist/types-ts4.5/ui/InlineCardOverlay/utils.d.ts

@@ -1,3 +1,4 @@
+import type { Size } from '@atlaskit/icon';
 /**
  * Find a child element inside a ref.
  */
@@ -16,3 +17,4 @@ export declare const getOverlayWidths: (overlayEl: HTMLElement, labelEl: HTMLEle
     max: number;
     min: number;
 };
+export declare const getIconSize: (labelEl: HTMLElement) => Size;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-card",
-  "version": "0.15.0",
+  "version": "0.15.1",
   "description": "Card plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -35,7 +35,7 @@
     "@atlaskit/adf-schema": "^35.2.0",
     "@atlaskit/analytics-next": "^9.1.0",
     "@atlaskit/custom-steps": "^0.0.10",
-    "@atlaskit/editor-common": "^76.33.0",
+    "@atlaskit/editor-common": "^76.34.0",
     "@atlaskit/editor-plugin-analytics": "^0.4.0",
     "@atlaskit/editor-plugin-decorations": "^0.2.0",
     "@atlaskit/editor-plugin-feature-flags": "^1.0.0",
@@ -44,13 +44,13 @@
     "@atlaskit/editor-plugin-hyperlink": "^0.6.0",
     "@atlaskit/editor-plugin-width": "^0.2.0",
     "@atlaskit/editor-prosemirror": "1.1.0",
-    "@atlaskit/editor-shared-styles": "^2.8.0",
+    "@atlaskit/editor-shared-styles": "^2.9.0",
     "@atlaskit/frontend-utilities": "^2.7.0",
     "@atlaskit/icon": "^22.0.0",
     "@atlaskit/link-analytics": "^8.3.0",
     "@atlaskit/link-client-extension": "^1.8.0",
     "@atlaskit/link-datasource": "^1.19.0",
-    "@atlaskit/linking-common": "^5.1.0",
+    "@atlaskit/linking-common": "^5.3.0",
     "@atlaskit/linking-types": "^8.5.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
     "@atlaskit/primitives": "^1.16.0",