terra-clinical-label-value-view
Version:
The label value view component displays a label and the associated value or list of values underneath the label.
60 lines (59 loc) • 3.48 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _bind = _interopRequireDefault(require("classnames/bind"));
var _LabelValueView = _interopRequireDefault(require("../../../LabelValueView"));
var _TextValueLabelValueViewTestModule = _interopRequireDefault(require("./TextValueLabelValueView.test.module.scss"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var cx = _bind.default.bind(_TextValueLabelValueViewTestModule.default);
var examples = function examples() {
return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("style", null, "\n #dl-wrapper > dd {\n margin-bottom: 14px;\n }\n\n #dl-wrapper {\n margin-bottom: 0;\n margin-top: 0;\n }\n "), /*#__PURE__*/_react.default.createElement("h3", null, "LabelValueView returned as a term and a definition (isChildOfDescriptionList='true'):"), /*#__PURE__*/_react.default.createElement("h4", {
id: "vitalsTopic"
}, "Vitals Topic Text"), /*#__PURE__*/_react.default.createElement("dl", {
id: "dl-wrapper",
"aria-labelledby": "vitalsTopic"
}, /*#__PURE__*/_react.default.createElement(_LabelValueView.default, {
label: "Collected By",
textValue: "Noah Brown",
isChildOfDescriptionList: true
}), /*#__PURE__*/_react.default.createElement(_LabelValueView.default, {
label: "Date",
textValue: "12/12/12 00:00AM",
isChildOfDescriptionList: true
}), /*#__PURE__*/_react.default.createElement(_LabelValueView.default, {
label: "Blood Pressure",
textValue: "110/60 mmHg",
isChildOfDescriptionList: true
}), /*#__PURE__*/_react.default.createElement(_LabelValueView.default, {
label: "Temperature",
textValue: "97 F",
isChildOfDescriptionList: true
}), /*#__PURE__*/_react.default.createElement(_LabelValueView.default, {
label: "Heart Rate",
textValue: "80 BPM",
isChildOfDescriptionList: true
})), /*#__PURE__*/_react.default.createElement("h3", null, "LabelValueView returned as a description list (isChildOfDescriptionList='false'):"), /*#__PURE__*/_react.default.createElement("h4", {
id: "collectedByTopic"
}, "Collected By Topic Text"), /*#__PURE__*/_react.default.createElement(_LabelValueView.default, {
label: "Collected By",
textValue: "Noah Brown",
isChildOfDescriptionList: false,
ariaLabelledBy: "collectedByTopic"
}), /*#__PURE__*/_react.default.createElement("h3", null, "LabelValueView returned as a description list (isChildOfDescriptionList is not given - will take the default value false):"), /*#__PURE__*/_react.default.createElement("h4", {
id: "temperatureTopic"
}, "Temperature Topic Text"), /*#__PURE__*/_react.default.createElement(_LabelValueView.default, {
label: "Temperature",
textValue: "97 F",
ariaLabelledBy: "temperatureTopic"
}), /*#__PURE__*/_react.default.createElement("h3", null, "Applied max-width of 200px to show word wrapping:"), /*#__PURE__*/_react.default.createElement("div", {
className: cx('labelvalueview-wrapper')
}, /*#__PURE__*/_react.default.createElement(_LabelValueView.default, {
id: "LongLabelValueView",
label: "supercalifragilisticexpialidocious",
textValue: "supercalifragilisticexpialidocious"
})));
};
var _default = exports.default = examples;