@atlaskit/smart-card 23.6.5 → 23.6.6

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/smart-card
 
+## 23.6.6
+
+### Patch Changes
+
+- [`b86cebed4a3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b86cebed4a3) - Hover Preview: Update actionable element hover state
+
 ## 23.6.5
 
 ### Patch Changes

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "23.6.5",
+	"version": "23.6.6",
 	"sideEffects": false
 }

package/dist/cjs/view/FlexibleCard/components/elements/lozenge/index.js

@@ -2,14 +2,18 @@
 
 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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _react2 = require("@emotion/react");
 
@@ -19,8 +23,12 @@ var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-
 
 var _templateObject, _templateObject2;
 
+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); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 var styles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-flex;\n  line-height: inherit;\n"])));
-var actionStyles = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  > span > span {\n    display: inline-flex;\n    align-items: center;\n    margin-right: -2px;\n  }\n\n  svg {\n    width: unset;\n    height: unset;\n    margin: -4px 0;\n  }\n"])));
+var actionStyles = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  > span > span {\n    display: inline-flex;\n    align-items: center;\n    margin-right: -2px;\n  }\n\n  svg {\n    width: unset;\n    height: unset;\n    margin: -4px 0;\n  }\n\n  :hover {\n    cursor: pointer;\n  }\n"])));
 /**
  * A base element that displays a Lozenge.
  * @internal
@@ -38,6 +46,23 @@ var Lozenge = function Lozenge(_ref) {
       _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'smart-element-lozenge' : _ref$testId;
 
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      isBold = _useState2[0],
+      setIsBold = _useState2[1];
+
+  var onHover = (0, _react.useCallback)(function (isHover) {
+    if (onClick) {
+      setIsBold(isHover);
+    }
+  }, [onClick]);
+  var onMouseEnter = (0, _react.useCallback)(function () {
+    return onHover(true);
+  }, [onHover]);
+  var onMouseLeave = (0, _react.useCallback)(function () {
+    return onHover(false);
+  }, [onHover]);
+
   if (!text) {
     return null;
   }
@@ -48,9 +73,13 @@ var Lozenge = function Lozenge(_ref) {
     "data-smart-element": name,
     "data-smart-element-lozenge": true,
     "data-testid": testId,
-    onClick: onClick
+    onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    tabIndex: onClick ? 0 : -1
   }, (0, _react2.jsx)(_lozenge.default, {
     appearance: appearance,
+    isBold: isBold,
     testId: "".concat(testId, "-lozenge")
   }, text, onClick && (0, _react2.jsx)(_chevronDown.default, {
     label: "action",

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "23.6.5",
+	"version": "23.6.6",
 	"sideEffects": false
 }

package/dist/es2019/view/FlexibleCard/components/elements/lozenge/index.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import React from 'react';
+import React, { useCallback, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import AtlaskitLozenge from '@atlaskit/lozenge';
 import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
@@ -19,6 +19,10 @@ const actionStyles = css`
     height: unset;
     margin: -4px 0;
   }
+
+  :hover {
+    cursor: pointer;
+  }
 `;
 /**
  * A base element that displays a Lozenge.
@@ -35,6 +39,15 @@ const Lozenge = ({
   text,
   testId = 'smart-element-lozenge'
 }) => {
+  const [isBold, setIsBold] = useState(false);
+  const onHover = useCallback(isHover => {
+    if (onClick) {
+      setIsBold(isHover);
+    }
+  }, [onClick]);
+  const onMouseEnter = useCallback(() => onHover(true), [onHover]);
+  const onMouseLeave = useCallback(() => onHover(false), [onHover]);
+
   if (!text) {
     return null;
   }
@@ -45,9 +58,13 @@ const Lozenge = ({
     "data-smart-element": name,
     "data-smart-element-lozenge": true,
     "data-testid": testId,
-    onClick: onClick
+    onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    tabIndex: onClick ? 0 : -1
   }, jsx(AtlaskitLozenge, {
     appearance: appearance,
+    isBold: isBold,
     testId: `${testId}-lozenge`
   }, text, onClick && jsx(ChevronDownIcon, {
     label: "action",

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "23.6.5",
+	"version": "23.6.6",
 	"sideEffects": false
 }

package/dist/esm/view/FlexibleCard/components/elements/lozenge/index.js

@@ -1,14 +1,15 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
 var _templateObject, _templateObject2;
 
 /** @jsx jsx */
-import React from 'react';
+import React, { useCallback, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import AtlaskitLozenge from '@atlaskit/lozenge';
 import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
 var styles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-flex;\n  line-height: inherit;\n"])));
-var actionStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  > span > span {\n    display: inline-flex;\n    align-items: center;\n    margin-right: -2px;\n  }\n\n  svg {\n    width: unset;\n    height: unset;\n    margin: -4px 0;\n  }\n"])));
+var actionStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  > span > span {\n    display: inline-flex;\n    align-items: center;\n    margin-right: -2px;\n  }\n\n  svg {\n    width: unset;\n    height: unset;\n    margin: -4px 0;\n  }\n\n  :hover {\n    cursor: pointer;\n  }\n"])));
 /**
  * A base element that displays a Lozenge.
  * @internal
@@ -26,6 +27,23 @@ var Lozenge = function Lozenge(_ref) {
       _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'smart-element-lozenge' : _ref$testId;
 
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isBold = _useState2[0],
+      setIsBold = _useState2[1];
+
+  var onHover = useCallback(function (isHover) {
+    if (onClick) {
+      setIsBold(isHover);
+    }
+  }, [onClick]);
+  var onMouseEnter = useCallback(function () {
+    return onHover(true);
+  }, [onHover]);
+  var onMouseLeave = useCallback(function () {
+    return onHover(false);
+  }, [onHover]);
+
   if (!text) {
     return null;
   }
@@ -36,9 +54,13 @@ var Lozenge = function Lozenge(_ref) {
     "data-smart-element": name,
     "data-smart-element-lozenge": true,
     "data-testid": testId,
-    onClick: onClick
+    onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    tabIndex: onClick ? 0 : -1
   }, jsx(AtlaskitLozenge, {
     appearance: appearance,
+    isBold: isBold,
     testId: "".concat(testId, "-lozenge")
   }, text, onClick && jsx(ChevronDownIcon, {
     label: "action",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "23.6.5",
+  "version": "23.6.6",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -33,7 +33,7 @@
     "@atlaskit/icon-object": "^6.2.0",
     "@atlaskit/icon-priority": "^6.3.0",
     "@atlaskit/in-product-testing": "^0.1.0",
-    "@atlaskit/linking-common": "^1.15.0",
+    "@atlaskit/linking-common": "^1.16.0",
     "@atlaskit/logo": "^13.10.0",
     "@atlaskit/lozenge": "^11.3.0",
     "@atlaskit/media-common": "^2.17.0",