fhir-react 0.3.6 → 0.3.7

package/build/style.css

@@ -19,9 +19,10 @@
 .fhir-datatype__Img__item{margin-left:auto;margin-right:auto;display:block}
 .fhir-datatype__BinaryText__block{background-color:#f8f9fa;padding:1.5rem;border-radius:.25rem;word-break:break-word;font-family:monospace;font-size:16px}
 .fhir-resource__Bundle__item{margin-top:10px}
-.fhir-resource__Claim__item-level{height:100%;height:50px;margin:-12px;display:flex}.fhir-resource__Claim__item-level-fill{width:10px;height:100%;background:#dee2e6}
+.table-expandable-row{--bs-table-striped-bg: #eef1f3}
 .fhir-datatype__Identifier{font-style:italic;cursor:help}
 .fhir-resource__ClaimResponse-item-adjudication,.fhir-resource__ClaimResponse-added-item-adjudication{display:flex;margin-bottom:5px}.fhir-resource__ClaimResponse-item-adjudication-category,.fhir-resource__ClaimResponse-added-item-adjudication-category{display:flex;margin-right:10px}
+.fhir-datatype__Attachment__img{border-radius:8px;height:80px}
 .fhir-datatype__Telecom__item-label{margin-right:10px;display:inline-block;padding:.25em .4em;font-size:75%;font-weight:700;line-height:1;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:3px;background-color:#f8f9fa;color:#606060}
 .fhir-resource__Practitioner__patientContact-relationship{font-weight:700}.fhir-resource__Practitioner__practitioner-avatar{border:4px solid #fff;border-radius:50%;margin-right:10px}
 .fhir-resource__Questionnaire-list{list-style:none;border:1px solid #f0f0f0;padding:2px;margin:2px}.fhir-resource__Questionnaire-list-title{background-color:#f6f6f6;padding:2px 2px 4px 2px}.fhir-resource__Questionnaire-questions-list{list-style:none}.fhir-resource__Questionnaire-questions-list li{border-bottom:1px solid #f5f5f5}.fhir-resource__Questionnaire-questions-list li:last-child{border-bottom:none}.fhir-resource__Questionnaire-questions-list-item-details{font-size:80%;color:#606060}.fhir-resource__Questionnaire-questions-list-item-details-el{display:inline-block;margin-right:15px}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fhir-react",
-  "version": "0.3.6",
+  "version": "0.3.7",
   "description": "React component library for displaying FHIR Resources ",
   "main": "build/index.js",
   "peerDependencies": {

package/src/assets/containers/Coverage/coverage.svg

@@ -0,0 +1,4 @@
+<svg width="14" height="16" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 2.27887V7.59126C0.0195882 9.34662 0.555719 11.0533 1.53579 12.4802C2.51586 13.907 3.89252 14.9852 5.47933 15.5685L6.22667 15.8565C6.72592 16.0478 7.27408 16.0478 7.77333 15.8565L8.52067 15.5685C10.1075 14.9852 11.4841 13.907 12.4642 12.4802C13.4443 11.0533 13.9804 9.34662 14 7.59126V2.27887C13.9993 2.07015 13.94 1.86623 13.8293 1.69238C13.7186 1.51853 13.5615 1.38239 13.3773 1.30084C11.3578 0.421695 9.18819 -0.0205999 7 0.000736774C4.81181 -0.0205999 2.64224 0.421695 0.622667 1.30084C0.438537 1.38239 0.281392 1.51853 0.170709 1.69238C0.060025 1.86623 0.000669861 2.07015 0 2.27887Z" fill="#6610F2"/>
+<path d="M10 7.33333C10 7.24493 9.96488 7.16014 9.90237 7.09763C9.83986 7.03512 9.75507 7 9.66667 7H8V5.33333C8 5.24493 7.96488 5.16014 7.90237 5.09763C7.83986 5.03512 7.75507 5 7.66667 5H6.33333C6.24493 5 6.16014 5.03512 6.09763 5.09763C6.03512 5.16014 6 5.24493 6 5.33333V7H4.33333C4.24493 7 4.16014 7.03512 4.09763 7.09763C4.03512 7.16014 4 7.24493 4 7.33333V8.66667C4 8.75507 4.03512 8.83986 4.09763 8.90237C4.16014 8.96488 4.24493 9 4.33333 9H6V10.6667C6 10.7551 6.03512 10.8399 6.09763 10.9024C6.16014 10.9649 6.24493 11 6.33333 11H7.66667C7.75507 11 7.83986 10.9649 7.90237 10.9024C7.96488 10.8399 8 10.7551 8 10.6667V9H9.66667C9.75507 9 9.83986 8.96488 9.90237 8.90237C9.96488 8.83986 10 8.75507 10 8.66667V7.33333Z" fill="white"/>
+</svg>

package/src/assets/containers/Medication/medication.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.52175 9.0435C7.01904 9.0435 9.0435 7.01904 9.0435 4.52175C9.0435 2.02446 7.01904 0 4.52175 0C2.02446 0 0 2.02446 0 4.52175C0 7.01904 2.02446 9.0435 4.52175 9.0435Z" fill="#FD7E14"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.6396 15.0832C11.0525 15.6702 10.2563 16.0001 9.42605 16.0001C8.5958 16.0001 7.79956 15.6702 7.21248 15.0832C6.62541 14.4961 6.29559 13.6998 6.29559 12.8696C6.29559 12.0394 6.62541 11.2431 7.21248 10.656L8.58067 9.28784L8.58071 9.28788L13.0078 13.715L11.6396 15.0832ZM10.656 7.21254L9.28778 8.58073L9.28782 8.58077L13.7149 13.0079L15.0831 11.6397C15.6702 11.0526 16 10.2564 16 9.42611C16 8.59587 15.6702 7.79962 15.0831 7.21254C14.496 6.62547 13.6998 6.29565 12.8695 6.29565C12.0393 6.29565 11.243 6.62547 10.656 7.21254ZM12.6279 8.21057C12.8683 8.16276 13.1175 8.18732 13.344 8.28116C13.5991 8.38687 13.8916 8.26576 13.9973 8.01065C14.103 7.75554 13.9819 7.46304 13.7268 7.35733C13.3176 7.18776 12.8672 7.14338 12.4328 7.22979C11.9984 7.3162 11.5993 7.52952 11.2861 7.84278C11.0909 8.03806 11.0909 8.35464 11.2862 8.54988C11.4815 8.74512 11.7981 8.74509 11.9933 8.5498C12.1666 8.37645 12.3875 8.25839 12.6279 8.21057Z" fill="#FEB272"/>
+<rect x="1" y="4" width="7" height="1" rx="0.5" fill="white"/>
+</svg>

package/src/assets/containers/Organization/organization.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 8C1 7.44772 1.44772 7 2 7H5C5.55228 7 6 7.44772 6 8V16H1V8Z" fill="#0D6EFD"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7 1C7 0.447715 7.44772 0 8 0H14C14.5523 0 15 0.447715 15 1V16H7V1ZM8.5 3C8.5 2.72386 8.72386 2.5 9 2.5H13C13.2761 2.5 13.5 2.72386 13.5 3C13.5 3.27614 13.2761 3.5 13 3.5H9C8.72386 3.5 8.5 3.27614 8.5 3ZM9 5.5C8.72386 5.5 8.5 5.72386 8.5 6C8.5 6.27614 8.72386 6.5 9 6.5H13C13.2761 6.5 13.5 6.27614 13.5 6C13.5 5.72386 13.2761 5.5 13 5.5H9ZM8.5 9C8.5 8.72386 8.72386 8.5 9 8.5H13C13.2761 8.5 13.5 8.72386 13.5 9C13.5 9.27614 13.2761 9.5 13 9.5H9C8.72386 9.5 8.5 9.27614 8.5 9ZM9 11.5C8.72386 11.5 8.5 11.7239 8.5 12C8.5 12.2761 8.72386 12.5 9 12.5H13C13.2761 12.5 13.5 12.2761 13.5 12C13.5 11.7239 13.2761 11.5 13 11.5H9Z" fill="#6EA8FE"/>
+<rect y="15" width="16" height="1" rx="0.5" fill="#0D6EFD"/>
+</svg>

package/src/components/datatypes/Attachment/Attachment.css

@@ -0,0 +1,5 @@
+/* Attachment */
+.fhir-datatype__Attachment__img {
+  border-radius: 8px;
+  height: 80px;
+}

package/src/components/datatypes/Attachment/Attachment.js

@@ -1,14 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import _get from 'lodash/get';
+import './Attachment.css';
 
 const Attachment = props => {
-  const { fhirData } = props;
+  const { fhirData, isImage = false } = props;
   const title = _get(fhirData, 'title', 'Link');
   const URL = _get(fhirData, 'url');
   return (
     <a href={URL} rel="noopener noreferrer" target="_blank">
-      {title}
+      {isImage ? (
+        <img className="fhir-datatype__Attachment__img" src={URL} alt={title} />
+      ) : (
+        title
+      )}
     </a>
   );
 };

package/src/components/datatypes/Identifier/Identifier.js

@@ -6,7 +6,7 @@ import './Identifier.css';
 import CodeableConcept from '../CodeableConcept';
 
 const Identifier = props => {
-  const { fhirData } = props;
+  const { fhirData, valueOnly = false, noCursive = false } = props;
   const identifierArray = Array.isArray(fhirData) ? fhirData : [fhirData];
 
   return identifierArray.map(identifier => {
@@ -24,9 +24,13 @@ const Identifier = props => {
     );
 
     return value ? (
-      <div className="fhir-datatype__Identifier" title={system} key={value}>
+      <div
+        className={`${noCursive && 'fst-normal'} fhir-datatype__Identifier`}
+        title={system}
+        key={value}
+      >
         <div style={{ display: 'flex' }}>
-          {displayIdentifierName}
+          {!valueOnly && displayIdentifierName}
           <span>{value}</span>
         </div>
       </div>

package/src/components/datatypes/Reference/Reference.js

@@ -13,7 +13,11 @@ const Reference = props => {
       data-testid={props['data-testid']}
     >
       {display && <span className="mr-2 pe-1">{display}</span>}
-      <span>{reference}</span>
+      {reference.startsWith('http://') || reference.startsWith('https://') ? (
+        <a href={reference}>{reference}</a>
+      ) : (
+        <span>{reference}</span>
+      )}
     </div>
   );
 };

package/src/components/resources/Claim/CareTeam.js

@@ -0,0 +1,55 @@
+import {
+  MissingValue,
+  Table,
+  TableCell,
+  TableHeader,
+  TableRow,
+  ValueSection,
+} from '../../ui';
+import Reference from '../../datatypes/Reference';
+import Coding from '../../datatypes/Coding';
+import React from 'react';
+
+const CareTeam = ({ careTeam }) => {
+  return (
+    <ValueSection label="Care Team" data-testid="careTeam" marginTop>
+      <Table>
+        <thead>
+          <TableRow>
+            <TableHeader>Provider</TableHeader>
+            <TableHeader>Role</TableHeader>
+            <TableHeader>Qualification</TableHeader>
+          </TableRow>
+        </thead>
+        <tbody className="border-top-0">
+          {careTeam.map((member, idx) => (
+            <TableRow key={idx}>
+              <TableCell data-testid="careTeam.provider" className="col-md-4">
+                <Reference fhirData={member.provider} />
+              </TableCell>
+              <TableCell data-testid="careTeam.role" className="col-md-4">
+                {member.role ? (
+                  <Coding fhirData={member.role} />
+                ) : (
+                  <MissingValue />
+                )}
+              </TableCell>
+              <TableCell
+                data-testid="careTeam.qualification"
+                className="col-md-4"
+              >
+                {careTeam.qualification ? (
+                  <Coding fhirData={member.qualification} />
+                ) : (
+                  <MissingValue />
+                )}
+              </TableCell>
+            </TableRow>
+          ))}
+        </tbody>
+      </Table>
+    </ValueSection>
+  );
+};
+
+export default CareTeam;

package/src/components/resources/Claim/Claim.css

@@ -1,12 +1,3 @@
-.fhir-resource__Claim__item-level {
-  height: 100%;
-  height: 50px;
-  margin: -12px;
-  display: flex;
-}
-
-.fhir-resource__Claim__item-level-fill {
-  width: 10px;
-  height: 100%;
-  background: #dee2e6;
+.table-expandable-row {
+  --bs-table-striped-bg: #eef1f3;
 }