@matt-dunn/react-wireframes/lib/WireframeAnnotationNotes/WireframeAnnotationNote.js

React component to annotate your components — useful for prototypes and proof of concepts

"use strict";

require("core-js/modules/es.symbol");

require("core-js/modules/es.symbol.description");

require("core-js/modules/es.array.slice");

require("core-js/modules/es.object.freeze");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.WireframeAnnotationNote = void 0;

var _react = _interopRequireDefault(require("react"));

var _styled = _interopRequireDefault(require("@emotion/styled"));

var _css = _interopRequireDefault(require("@emotion/css"));

var _Identifier = require("../components/Identifier");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _templateObject3() {
  var data = _taggedTemplateLiteral(["\n  margin-right: 0.5em;\n  border-width: 1px;\n  border-style: solid;\n  font-size: 0.75rem;\n  align-self: flex-start;\n"]);

  _templateObject3 = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2() {
  var data = _taggedTemplateLiteral(["\n      background-color: rgba(64, 134, 247, 0.25);\n  "]);

  _templateObject2 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject() {
  var data = _taggedTemplateLiteral(["\n  font-size: 0.85rem;\n  word-break: break-word;\n  padding: 6px 10px;\n\n  > header {\n    display: flex;\n    margin-bottom: 5px;\n    align-items: center;\n    \n    h2 {\n      font-size: 1.2rem;\n      margin: 0;\n      font-weight: normal;\n    }\n  }\n  \n  ", "\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}

function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

var WireframeAnnotationsNoteContainer = _styled.default.article(_templateObject(), function (_ref) {
  var isHighlighted = _ref.isHighlighted;
  return isHighlighted && (0, _css.default)(_templateObject2());
});

var IdentifierNote = (0, _styled.default)(_Identifier.Identifier)(_templateObject3());

var WireframeAnnotationNote = function WireframeAnnotationNote(_ref2) {
  var annotation = _ref2.annotation,
      parentReference = _ref2.parentReference,
      _ref2$isHighlighted = _ref2.isHighlighted,
      isHighlighted = _ref2$isHighlighted === void 0 ? false : _ref2$isHighlighted;
  return /*#__PURE__*/_react.default.createElement(WireframeAnnotationsNoteContainer, {
    isHighlighted: isHighlighted
  }, /*#__PURE__*/_react.default.createElement("header", null, /*#__PURE__*/_react.default.createElement(IdentifierNote, {
    annotation: annotation,
    parentReference: parentReference
  }), /*#__PURE__*/_react.default.createElement("h2", null, annotation.options.title)), /*#__PURE__*/_react.default.createElement("article", null, annotation.options.description));
};

exports.WireframeAnnotationNote = WireframeAnnotationNote;