terra-clinical-item-view/lib/terra-dev-site/test/clinical-item-view/AccessoryItemView.test.js

The Item View component allows displays to be organized into rows and column and themed, while providing means to add accessory elements and a comment.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _IconAlert = _interopRequireDefault(require("terra-icon/lib/icon/IconAlert"));
var _IconInformation = _interopRequireDefault(require("terra-icon/lib/icon/IconInformation"));
var _bind = _interopRequireDefault(require("classnames/bind"));
var _ItemView = _interopRequireDefault(require("../../../ItemView"));
var _ItemViewCommonTestModule = _interopRequireDefault(require("./ItemViewCommon.test.module.scss"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var cx = _bind.default.bind(_ItemViewCommonTestModule.default);
var display1 = /*#__PURE__*/_react.default.createElement(_ItemView.default.Display, {
  text: "Display for context"
});
var displays = [display1, display1, display1, display1, display1, display1];
var views = function views() {
  return /*#__PURE__*/_react.default.createElement("div", {
    className: cx('accessory-itemview-wrapper')
  }, /*#__PURE__*/_react.default.createElement("p", null, "Applied width of 700px to show the start and end accessory alignment."), /*#__PURE__*/_react.default.createElement("h2", null, "Start Acessory"), /*#__PURE__*/_react.default.createElement(_ItemView.default, {
    startAccessory: /*#__PURE__*/_react.default.createElement(_IconAlert.default, {
      id: "StartAccessory"
    }),
    id: "test-start-accessory"
  }), /*#__PURE__*/_react.default.createElement("h2", null, "End Acessory"), /*#__PURE__*/_react.default.createElement(_ItemView.default, {
    endAccessory: /*#__PURE__*/_react.default.createElement(_IconInformation.default, {
      id: "EndAccessory"
    }),
    id: "test-end-accessory"
  }), /*#__PURE__*/_react.default.createElement("h2", null, "Start and End Acessory"), /*#__PURE__*/_react.default.createElement(_ItemView.default, {
    startAccessory: /*#__PURE__*/_react.default.createElement(_IconAlert.default, {
      id: "StartAccessory2"
    }),
    displays: displays,
    endAccessory: /*#__PURE__*/_react.default.createElement("button", {
      type: "button",
      id: "EndAccessory2",
      size: "medium"
    }, "Disclose"),
    layout: "twoColumns",
    accessoryAlignment: "alignTop",
    id: "test-both-accessory-top",
    trueColumn: true
  }), /*#__PURE__*/_react.default.createElement("h2", null, "Reserve Start Acessory Space"), /*#__PURE__*/_react.default.createElement(_ItemView.default, {
    reserveStartAccessorySpace: true,
    displays: displays,
    endAccessory: /*#__PURE__*/_react.default.createElement("button", {
      type: "button",
      id: "EndAccessory3",
      size: "medium"
    }, "Disclose"),
    layout: "twoColumns",
    id: "test-reserve-start-accessory",
    trueColumn: true
  }), /*#__PURE__*/_react.default.createElement("h2", null, "Start Accessory with Font Size 100px"), /*#__PURE__*/_react.default.createElement("ul", null, /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("h3", null, "The max-height and max-width of 40px is maintained"))), /*#__PURE__*/_react.default.createElement(_ItemView.default, {
    startAccessory: /*#__PURE__*/_react.default.createElement(_IconAlert.default, null),
    id: "test-scale",
    className: cx('itemview-fontsize')
  }));
};
var _default = exports.default = views;