@atlaskit/smart-card 34.6.6 → 34.8.0

package/dist/cjs/view/InlineCard/IconAndTitleLayout/IconAndTitleLayoutOld.js

@@ -0,0 +1,226 @@
+/* IconAndTitleLayoutOld.tsx generated by @compiled/babel-plugin v0.36.0 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IconAndTitleLayoutOld = void 0;
+require("./IconAndTitleLayoutOld.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _reactMagneticDi = require("react-magnetic-di");
+var _reactRenderImage = _interopRequireDefault(require("react-render-image"));
+var _link = _interopRequireDefault(require("@atlaskit/icon/core/migration/link"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _primitives = require("@atlaskit/primitives");
+var _Icon = require("../Icon");
+var _styledEmotion = require("../styled-emotion");
+var _styled = require("./styled");
+var _styledEmotion2 = require("./styled-emotion");
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+var IconAndTitleLayoutOld = exports.IconAndTitleLayoutOld = /*#__PURE__*/function (_React$Component) {
+  function IconAndTitleLayoutOld() {
+    var _this;
+    (0, _classCallCheck2.default)(this, IconAndTitleLayoutOld);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper(this, IconAndTitleLayoutOld, [].concat(args));
+    (0, _defineProperty2.default)(_this, "handleClick", function (event) {
+      var onClick = _this.props.onClick;
+      if (onClick) {
+        event.preventDefault();
+        event.stopPropagation();
+        onClick(event);
+      }
+    });
+    (0, _defineProperty2.default)(_this, "handleKeyPress", function (event) {
+      var onClick = _this.props.onClick;
+      if (event.key !== ' ' && event.key !== 'Enter') {
+        return;
+      }
+      if (onClick) {
+        event.preventDefault();
+        event.stopPropagation();
+        onClick(event);
+      }
+    });
+    return _this;
+  }
+  (0, _inherits2.default)(IconAndTitleLayoutOld, _React$Component);
+  return (0, _createClass2.default)(IconAndTitleLayoutOld, [{
+    key: "renderAtlaskitIcon",
+    value: function renderAtlaskitIcon() {
+      var _this$props = this.props,
+        icon = _this$props.icon,
+        emoji = _this$props.emoji;
+      if (emoji) {
+        if ((0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1')) {
+          return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+            as: "span",
+            xcss: iconWrapperStyle,
+            testId: "icon-position-emoji-wrapper"
+          }, emoji);
+        }
+        return (0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard') ? /*#__PURE__*/_react.default.createElement(_styled.EmojiWrapperOldVisualRefresh, null, emoji) : /*#__PURE__*/_react.default.createElement(_styledEmotion2.EmojiWrapper, null, emoji);
+      }
+      if (!icon || typeof icon === 'string') {
+        return null;
+      }
+      if ((0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1')) {
+        return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+          as: "span",
+          xcss: iconWrapperStyle,
+          testId: "icon-atlaskit-icon-wrapper"
+        }, icon);
+      }
+      return (0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard') ? /*#__PURE__*/_react.default.createElement(_styled.IconWrapperOldVisualRefresh, null, icon) : /*#__PURE__*/_react.default.createElement(_styledEmotion2.IconWrapper, null, icon);
+    }
+  }, {
+    key: "renderImageIcon",
+    value: function renderImageIcon(errored, testId) {
+      var url = this.props.icon;
+      if (!url || typeof url !== 'string') {
+        return null;
+      }
+      if ((0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1')) {
+        return /*#__PURE__*/_react.default.createElement(_reactRenderImage.default, {
+          src: url,
+          loaded: /*#__PURE__*/_react.default.createElement("img", {
+            src: url,
+            "data-testid": "".concat(testId, "-image"),
+            alt: "",
+            className: (0, _runtime.ax)(["_1bsb1osq"])
+          }),
+          errored: errored,
+          loading: /*#__PURE__*/_react.default.createElement(_Icon.Shimmer, {
+            testId: "".concat(testId, "-loading")
+          })
+        });
+      }
+      return /*#__PURE__*/_react.default.createElement(_reactRenderImage.default, {
+        src: url,
+        loaded: /*#__PURE__*/_react.default.createElement(_Icon.Icon
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+        , {
+          className: "smart-link-icon",
+          src: url,
+          "data-testid": "".concat(testId, "-image")
+        }),
+        errored: errored,
+        loading: /*#__PURE__*/_react.default.createElement(_Icon.Shimmer, {
+          testId: "".concat(testId, "-loading")
+        })
+      });
+    }
+  }, {
+    key: "renderIconPlaceholder",
+    value: function renderIconPlaceholder(testId) {
+      var defaultIcon = this.props.defaultIcon;
+      if ((0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1')) {
+        return defaultIcon || /*#__PURE__*/_react.default.createElement(_link.default, {
+          label: "link",
+          LEGACY_size: "small",
+          testId: "".concat(testId, "-default"),
+          color: "currentColor"
+        });
+      }
+      if (defaultIcon) {
+        return /*#__PURE__*/_react.default.createElement(_styled.IconWrapperOldVisualRefresh, null, defaultIcon);
+      }
+      return /*#__PURE__*/_react.default.createElement(_styled.IconWrapperOldVisualRefresh, null, /*#__PURE__*/_react.default.createElement(_link.default, {
+        label: "link",
+        LEGACY_size: "small",
+        testId: "".concat(testId, "-default"),
+        color: "currentColor"
+      }));
+    }
+  }, {
+    key: "renderIcon",
+    value: function renderIcon(testId) {
+      // We render two kinds of icons here:
+      // - Image: acquired from either DAC or Teamwork Platform Apps;
+      // - Atlaskit Icon: an Atlaskit SVG;
+      // Each of these are scaled down to 12x12.
+      var icon = this.renderAtlaskitIcon();
+      if (icon) {
+        return icon;
+      }
+      var placeholder = this.renderIconPlaceholder(testId);
+      var image = this.renderImageIcon(placeholder, testId);
+      if ((0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1')) {
+        return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+          as: "span",
+          xcss: iconWrapperStyle,
+          testId: "".concat(testId, "-image-wrapper")
+        }, image || placeholder);
+      }
+      return image || placeholder;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props2 = this.props,
+        children = _this$props2.children,
+        title = _this$props2.title,
+        titleColor = _this$props2.titleColor,
+        titleTextColor = _this$props2.titleTextColor,
+        link = _this$props2.link,
+        rightSide = _this$props2.rightSide,
+        _this$props2$testId = _this$props2.testId,
+        testId = _this$props2$testId === void 0 ? 'inline-card-icon-and-title' : _this$props2$testId;
+      var titlePart = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styledEmotion2.IconPositionWrapper, {
+        "data-testid": "icon-position-wrapper"
+      }, children || /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styledEmotion2.IconEmptyWrapper, {
+        "data-testid": "icon-empty-wrapper"
+      }), this.renderIcon(testId))), /*#__PURE__*/_react.default.createElement(_styledEmotion2.TitleWrapper
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+      , {
+        style: {
+          color: titleTextColor
+        }
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+        ,
+        className: _styled.TitleWrapperClassNameOldVisualRefresh
+      }, title));
+      return (
+        /*#__PURE__*/
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        _react.default.createElement(_styledEmotion2.IconTitleWrapper, {
+          style: {
+            color: titleColor
+          },
+          "data-testid": testId
+        }, link ? /*#__PURE__*/_react.default.createElement(_styledEmotion.LinkAppearance, {
+          href: link,
+          onClick: this.handleClick,
+          onKeyPress: this.handleKeyPress
+        }, titlePart) : titlePart, rightSide ? /*#__PURE__*/_react.default.createElement(_styledEmotion.NoLinkAppearance, null, rightSide) : null)
+      );
+    }
+  }]);
+}(_react.default.Component);
+(0, _defineProperty2.default)(IconAndTitleLayoutOld, "defaultProps", {
+  rightSideSpacer: true
+});
+var iconWidth = '16px';
+var iconWrapperStyle = (0, _primitives.xcss)({
+  position: 'absolute',
+  display: 'inline-flex',
+  alignItems: 'center',
+  boxSizing: 'border-box',
+  top: 'space.0',
+  left: 'space.0',
+  bottom: 'space.0',
+  width: iconWidth,
+  userSelect: 'none'
+});
+var iconImageStyle = null;

package/dist/cjs/view/InlineCard/IconAndTitleLayout/index.compiled.css

@@ -1,7 +1,36 @@
+._11c81oud{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._154ize3t{top:var(--ds-space-0,0)}
+._16d9qvcn{-webkit-box-decoration-break:clone;box-decoration-break:clone}
 ._18u01b66{margin-left:var(--ds-space-050,4px)}
+._18u0v77o{margin-left:var(--ds-space-025,2px)}
+._19bv1b66{padding-left:var(--ds-space-050,4px)}
+._19pkidpf{margin-top:0}
+._19pkze3t{margin-top:var(--ds-space-0,0)}
 ._1bsb1osq{width:100%}
+._1bsb7vkz{width:1pc}
+._1e0c116y{display:inline-flex}
+._1e0c1o8l{display:inline-block}
+._1ltvze3t{left:var(--ds-space-0,0)}
+._1nmz9jpi{word-break:break-all}
+._2hwx1b66{margin-right:var(--ds-space-050,4px)}
+._4cvr1h6o{align-items:center}
+._94n5ze3t{bottom:var(--ds-space-0,0)}
+._ca0qv77o{padding-top:var(--ds-space-025,2px)}
+._kqswh2mm{position:relative}
+._kqswstnw{position:absolute}
+._n3tdv77o{padding-bottom:var(--ds-space-025,2px)}
+._o5721jtm{white-space:pre-wrap}
+._otyridpf{margin-bottom:0}
+._otyrze3t{margin-bottom:var(--ds-space-0,0)}
+._s7n4t94y{vertical-align:1px}
+._s7n4yfq0{vertical-align:bottom}
+._syaz131l{color:var(--ds-text-subtlest,#626f86)}
 ._syaz1wmz{color:var(--ds-text-subtlest,#6b778c)}
 ._syaz1y58{color:var(--ds-link,#0052cc)}
+._tzy4idpf{opacity:0}
+._u5f31b66{padding-right:var(--ds-space-050,4px)}
+._uiztglyw{-webkit-user-select:none;-ms-user-select:none;user-select:none}
+._vchhusvi{box-sizing:border-box}
 ._1bnxglyw:hover{text-decoration-line:none}
 ._9oik18uv:hover{text-decoration-color:initial}
 ._jf4cnqa1:hover{text-decoration-style:solid}