npm - fhir-react - Versions diffs - 0.3.1 → 0.3.5 - Mend

fhir-react 0.3.1 → 0.3.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (83) hide show

package/src/components/resources/Device/Device.js CHANGED Viewed

@@ -11,13 +11,12 @@ import UnhandledResourceDataStructure from '../UnhandledResourceDataStructure';
 import {
   Root,
   Header,
-  Title,
   Badge,
-  BadgeSecondary,
   Body,
-  Value,
   MissingValue,
+  ValueSectionItem,
 } from '../../ui';
+import Accordion from '../../containers/Accordion';
 const commonDTO = fhirResource => {
   const model = _get(fhirResource, 'model', 'Device');
@@ -103,8 +102,7 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
-const Device = props => {
-  const { fhirResource, fhirVersion } = props;
+const Device = ({ fhirResource, fhirVersion, fhirIcons }) => {
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -130,35 +128,57 @@ const Device = props => {
   const safetyArr = hasSafety && !Array.isArray(safety) ? [safety] : safety;
   return (
     <Root name="Device">
-      <Header>
-        {model && <Title>{model}</Title>}
-        {status && <Badge data-testid="status">{status}</Badge>}
-        {hasExpiry && (
-          <BadgeSecondary data-testid="expiry">
-            expires on <Date fhirData={getExpiry} />
-          </BadgeSecondary>
-        )}
-      </Header>
-      <Body>
-        {hasTypeCoding && (
-          <Value data-testid="typeCoding" label="Type">
-            {getTypeCoding.map((coding, i) => (
-              <Coding key={`item-${i}`} fhirData={coding} />
-            ))}
-          </Value>
-        )}
-        <Value label="Unique device identifier" data-testid="uniqueId">
-          {getUdi ? getUdi : <MissingValue />}
-        </Value>
-        {udiCarrierAIDC && <Value label="AIDC barcode">{udiCarrierAIDC}</Value>}
-        {udiCarrierHRF && <Value label="HRF barcode">{udiCarrierHRF}</Value>}
-        {hasSafety &&
-          safetyArr.map((item, i) => (
-            <Value label="HRF barcode" key={`safety-${i}`}>
-              <CodeableConcept fhirData={item} />
-            </Value>
-          ))}
-      </Body>
+      <Accordion
+        headerContent={
+          <Header
+            icon={fhirIcons}
+            resourceName="Device"
+            badges={status && <Badge data-testid="status">{status}</Badge>}
+            title={model}
+            additionalContent={
+              hasExpiry && (
+                <div data-testid="expiry">
+                  <span className="text-secondary">expires on</span>{' '}
+                  <Date fhirData={getExpiry} isBlack />
+                </div>
+              )
+            }
+          />
+        }
+        bodyContent={
+          <Body>
+            {hasTypeCoding && (
+              <ValueSectionItem data-testid="typeCoding" label="Type">
+                {getTypeCoding.map((coding, i) => (
+                  <Coding key={`item-${i}`} fhirData={coding} />
+                ))}
+              </ValueSectionItem>
+            )}
+            <ValueSectionItem
+              label="Unique device identifier"
+              data-testid="uniqueId"
+            >
+              {getUdi ? getUdi : <MissingValue />}
+            </ValueSectionItem>
+            {udiCarrierAIDC && (
+              <ValueSectionItem label="AIDC barcode">
+                {udiCarrierAIDC}
+              </ValueSectionItem>
+            )}
+            {udiCarrierHRF && (
+              <ValueSectionItem label="HRF barcode">
+                {udiCarrierHRF}
+              </ValueSectionItem>
+            )}
+            {hasSafety &&
+              safetyArr.map((item, i) => (
+                <ValueSectionItem label="HRF barcode" key={`safety-${i}`}>
+                  <CodeableConcept fhirData={item} />
+                </ValueSectionItem>
+              ))}
+          </Body>
+        }
+      />
     </Root>
   );
 };

package/src/components/resources/DiagnosticReport/DiagnosticReport.js CHANGED Viewed

@@ -7,16 +7,9 @@ import _get from 'lodash/get';
 import _has from 'lodash/has';
 import fhirVersions from '../fhirResourceVersions';
 import UnhandledResourceDataStructure from '../UnhandledResourceDataStructure';
+import Accordion from '../../containers/Accordion';
-import {
-  Root,
-  Header,
-  Title,
-  Badge,
-  BadgeSecondary,
-  Body,
-  Value,
-} from '../../ui';
+import { Root, Header, Badge, Body, Value } from '../../ui';
 const commonDTO = fhirResource => {
   const title =
@@ -101,7 +94,7 @@ const resourceDTO = (fhirVersion, fhirResource) => {
 };
 const DiagnosticReport = props => {
-  const { fhirResource, fhirVersion } = props;
+  const { fhirResource, fhirVersion, fhirIcons } = props;
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -121,41 +114,58 @@ const DiagnosticReport = props => {
     performer,
     issued,
   } = fhirResourceData;
+  const tableData = [
+    {
+      label: 'Issued',
+      testId: 'issued',
+      data: <Date fhirData={issued} isBlack />,
+      status: issued,
+    },
+    {
+      label: 'Category',
+      testId: 'categoryCoding',
+      data:
+        categoryCoding &&
+        categoryCoding.map((coding, i) => (
+          <Coding key={`item-${i}`} fhirData={coding} />
+        )),
+      status: hasCategoryCoding,
+    },
+    {
+      label: 'Performer',
+      testId: 'performer',
+      data: <Reference fhirData={performer} />,
+      status: hasPerformer,
+    },
+    {
+      label: 'Conclusion',
+      testId: 'conclusion',
+      data: conclusion,
+      status: conclusion,
+    },
+  ];
   return (
     <Root name="DiagnosticReport">
-      <Header>
-        <Title data-testid="title">{title}</Title>
-        {status && <Badge data-testid="status">{status}</Badge>}
-        {effectiveDateTime && (
-          <BadgeSecondary data-testid="effectiveDateTime">
-            <Date fhirData={effectiveDateTime} />
-          </BadgeSecondary>
-        )}
-      </Header>
-      <Body>
-        {issued && (
-          <Value label="Issued" data-testid="issued">
-            <Date fhirData={issued} />
-          </Value>
-        )}
-        {hasCategoryCoding && (
-          <Value label="Category" data-testid="categoryCoding">
-            {categoryCoding.map((coding, i) => (
-              <Coding key={`item-${i}`} fhirData={coding} />
-            ))}
-          </Value>
-        )}
-        {hasPerformer && (
-          <Value label="Performer" data-testid="performer">
-            <Reference fhirData={performer} />
-          </Value>
-        )}
-        {conclusion && (
-          <Value label="Conclusion" data-testid="conclusion">
-            {conclusion}
-          </Value>
-        )}
-      </Body>
+      <Accordion
+        headerContent={
+          <Header
+            icon={fhirIcons}
+            resourceName="DiagnosticReport"
+            badges={status && <Badge data-testid="status">{status}</Badge>}
+            title={title}
+            additionalContent={
+              effectiveDateTime && (
+                <Value label="On" data-testid="effectiveDateTime">
+                  <Date fhirData={effectiveDateTime} isBlack />
+                </Value>
+              )
+            }
+          />
+        }
+        bodyContent={<Body tableData={tableData} />}
+      />
     </Root>
   );
 };

package/src/components/resources/DiagnosticReport/DiagnosticReport.stories.js CHANGED Viewed

@@ -9,6 +9,7 @@ import exampleDiagnosticReportSTU3 from '../../../fixtures/stu3/resources/diagno
 import exampleDiagnosticReportR4 from '../../../fixtures/r4/resources/diagnosticReport/example1.json';
 import example2DiagnosticReportR4 from '../../../fixtures/r4/resources/diagnosticReport/example2.json';
 import example3DiagnosticReportR4 from '../../../fixtures/r4/resources/diagnosticReport/example3.json';
+import fhirIcons from '../../../fixtures/example-icons';
 export default { title: 'DiagnosticReport' };
@@ -18,6 +19,7 @@ export const DefaultVisualizationDSTU2 = () => {
     <DiagnosticReport
       fhirVersion={fhirVersions.DSTU2}
       fhirResource={fhirResource}
+      fhirIcons={fhirIcons}
     />
   );
 };
@@ -28,6 +30,7 @@ export const ExampleDiagnosticReportSTU3 = () => {
     <DiagnosticReport
       fhirVersion={fhirVersions.STU3}
       fhirResource={fhirResource}
+      fhirIcons={fhirIcons}
     />
   );
 };
@@ -38,6 +41,7 @@ export const ExampleDiagnosticReportR4 = () => {
     <DiagnosticReport
       fhirVersion={fhirVersions.R4}
       fhirResource={fhirResource}
+      fhirIcons={fhirIcons}
     />
   );
 };
@@ -48,6 +52,7 @@ export const Example2DiagnosticReportR4 = () => {
     <DiagnosticReport
       fhirVersion={fhirVersions.R4}
       fhirResource={fhirResource}
+      fhirIcons={fhirIcons}
     />
   );
 };
@@ -58,11 +63,12 @@ export const Example3DiagnosticReportR4 = () => {
     <DiagnosticReport
       fhirVersion={fhirVersions.R4}
       fhirResource={fhirResource}
+      fhirIcons={fhirIcons}
     />
   );
 };
 export const ExampleWithoutFhirVersionProperty = () => {
   const fhirResource = object('Resource', exampleDiagnosticReportSTU3);
-  return <DiagnosticReport fhirResource={fhirResource} />;
+  return <DiagnosticReport fhirResource={fhirResource} fhirIcons={fhirIcons} />;
 };

package/src/components/resources/DocumentReference/DocumentReference.js CHANGED Viewed

@@ -5,17 +5,16 @@ import prettyBytes from 'pretty-bytes';
 import fhirVersions from '../fhirResourceVersions';
 import Coding from '../../datatypes/Coding';
-import DateType from '../../datatypes/Date';
 import UnhandledResourceDataStructure from '../UnhandledResourceDataStructure';
+import Accordion from '../../containers/Accordion';
+import Date from '../../datatypes/Date';
 import {
   Root,
   Body,
   Header,
-  Title,
   Badge,
-  BadgeSecondary,
-  Value,
+  ValueSectionItem,
   ValueSection,
   Table,
   TableRow,
@@ -202,7 +201,7 @@ const Content = props => {
     <ContentItem key={i} item={item} />
   ));
   return (
-    <ValueSection label="Content">
+    <ValueSection label="Content" marginTop>
       <Table>
         <thead>
           <TableRow>
@@ -211,14 +210,14 @@ const Content = props => {
             <TableHeader>Resource</TableHeader>
           </TableRow>
         </thead>
-        <tbody>{allContent}</tbody>
+        <tbody className="border-top-0">{allContent}</tbody>
       </Table>
     </ValueSection>
   );
 };
 const DocumentReference = props => {
-  const { fhirVersion, fhirResource } = props;
+  const { fhirVersion, fhirResource, fhirIcons } = props;
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -241,67 +240,104 @@ const DocumentReference = props => {
   const hasContent = content.length > 0;
   const hasPeriod = context.periodStart || context.periodEnd;
+  const tableData = [
+    {
+      label: 'Document type',
+      testId: 'type',
+      data: <Coding fhirData={typeCoding} />,
+      status: typeCoding,
+    },
+    {
+      label: 'Document categorization',
+      testId: 'class',
+      data: <Coding fhirData={classCoding} />,
+      status: classCoding,
+    },
+    {
+      label: 'Security Label',
+      testId: 'securityLabel',
+      data: <Coding fhirData={securityLabelCoding} />,
+      status: securityLabelCoding,
+    },
+    {
+      label: 'Created At',
+      testId: 'createdAt',
+      data: <Date fhirData={createdAt} isBlack />,
+      status: createdAt,
+    },
+  ];
+  const contextTable = [
+    {
+      label: 'Event',
+      testId: 'context.event',
+      data: <Coding fhirData={context.eventCoding} />,
+      status: context.eventCoding,
+    },
+    {
+      label: 'Facility',
+      testId: 'context.facilityType',
+      data: <Coding fhirData={context.facilityTypeCoding} />,
+      status: context.facilityTypeCoding,
+    },
+    {
+      label: 'Practice Setting',
+      testId: 'context.practiceSetting',
+      data: <Coding fhirData={context.practiceSettingCoding} />,
+      status: context.practiceSettingCoding,
+    },
+    {
+      label: 'Period',
+      testId: 'context.period',
+      data: (
+        <>
+          {context.periodStart && (
+            <Date fhirData={context.periodStart} isBlack />
+          )}
+          {' - '}
+          {context.periodEnd && <Date fhirData={context.periodEnd} isBlack />}
+        </>
+      ),
+      status: hasPeriod,
+    },
+  ];
+  const getValueSectionItem = (item, index) =>
+    item.status && (
+      <ValueSectionItem
+        key={`context-item-${index}`}
+        label={item.label}
+        data-testid={item.testId}
+      >
+        {item.data}
+      </ValueSectionItem>
+    );
   return (
     <Root name="DocumentReference">
-      <Header>
-        <Title data-testid="title">{description}</Title>
-        {status && <Badge data-testid="status">{status}</Badge>}
-        {docStatus && (
-          <BadgeSecondary data-testid="docStatus">{docStatus}</BadgeSecondary>
-        )}
-      </Header>
-      <Body>
-        {typeCoding && (
-          <Value label="Document type" data-testid="type">
-            <Coding fhirData={typeCoding} />
-          </Value>
-        )}
-        {classCoding && (
-          <Value label="Document categorization" data-testid="class">
-            <Coding fhirData={classCoding} />
-          </Value>
-        )}
-        {securityLabelCoding && (
-          <Value label="Security Label" data-testid="securityLabel">
-            <Coding fhirData={securityLabelCoding} />
-          </Value>
-        )}
-        {createdAt && (
-          <Value label="Created At" data-testid="createdAt">
-            <DateType fhirData={createdAt} />
-          </Value>
-        )}
-        <ValueSection label="Context">
-          {context.eventCoding && (
-            <Value label="Event" data-testid="context.event">
-              <Coding fhirData={context.eventCoding} />
-            </Value>
-          )}
-          {context.facilityTypeCoding && (
-            <Value label="Facility" data-testid="context.facilityType">
-              <Coding fhirData={context.facilityTypeCoding} />
-            </Value>
-          )}
-          {context.practiceSettingCoding && (
-            <Value
-              label="Practice Setting"
-              data-testid="context.practiceSetting"
-            >
-              <Coding fhirData={context.practiceSettingCoding} />
-            </Value>
-          )}
-          {hasPeriod && (
-            <Value label="Period" data-testid="context.period">
-              {context.periodStart && (
-                <DateType fhirData={context.periodStart} />
+      <Accordion
+        headerContent={
+          <Header
+            icon={fhirIcons}
+            resourceName="DocumentReference"
+            title={description}
+            badges={status && <Badge data-testid="status">{status}</Badge>}
+            additionalBadge={
+              docStatus && <Badge data-testid="docStatus">{docStatus}</Badge>
+            }
+          />
+        }
+        bodyContent={
+          <Body tableData={tableData}>
+            <ValueSection label="Context" marginTop>
+              {contextTable.map((item, index) =>
+                getValueSectionItem(item, index),
               )}
-              {' - '}
-              {context.periodEnd && <DateType fhirData={context.periodEnd} />}
-            </Value>
-          )}
-        </ValueSection>
-        {hasContent && <Content content={content} />}
-      </Body>
+            </ValueSection>
+            {hasContent && <Content content={content} />}
+          </Body>
+        }
+      />
     </Root>
   );
 };

package/src/components/resources/DocumentReference/DocumentReference.stories.js CHANGED Viewed

@@ -7,6 +7,7 @@ import DocumentReference from './DocumentReference';
 import exampleDocumentReference from '../../../fixtures/dstu2/resources/documentReference/example1.json';
 import exampleDocumentReferenceSTU3 from '../../../fixtures/stu3/resources/documentReference/example1.json';
 import example1DocumentReferenceR4 from '../../../fixtures/r4/resources/documentReference/example1.json';
+import fhirIcons from '../../../fixtures/example-icons';
 export default { title: 'Document Reference' };
@@ -16,6 +17,7 @@ export const DefaultVisualizationDSTU2 = () => {
     <DocumentReference
       fhirResource={fhirResource}
       fhirVersion={fhirVersions.DSTU2}
+      fhirIcons={fhirIcons}
     />
   );
 };
@@ -26,6 +28,7 @@ export const ExampleSTU3 = () => {
     <DocumentReference
       fhirResource={fhirResource}
       fhirVersion={fhirVersions.STU3}
+      fhirIcons={fhirIcons}
     />
   );
 };
@@ -36,6 +39,7 @@ export const ExampleR4 = () => {
     <DocumentReference
       fhirResource={fhirResource}
       fhirVersion={fhirVersions.R4}
+      fhirIcons={fhirIcons}
     />
   );
 };

package/src/components/resources/Encounter/Encounter.js CHANGED Viewed

@@ -160,8 +160,7 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
-const Encounter = props => {
-  const { fhirResource, fhirVersion } = props;
+const Encounter = ({ fhirResource, fhirVersion, fhirIcons }) => {
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -177,7 +176,6 @@ const Encounter = props => {
     encounterType,
     resourceClass,
     resourceStatus,
-    resourceName,
     participant,
   } = fhirResourceData;
@@ -207,7 +205,7 @@ const Encounter = props => {
       <Accordion
         headerContent={
           <Header
-            resourceName={resourceName}
+            resourceName={'Encounter'}
             additionalContent={
               periodStart && (
                 <Value label="Start date" data-testid="headerStartDate">
@@ -221,6 +219,7 @@ const Encounter = props => {
               )
             }
             title={locationDisplay}
+            icon={fhirIcons}
           />
         }
         bodyContent={

package/src/components/resources/Encounter/Encounter.stories.js CHANGED Viewed

@@ -11,6 +11,8 @@ import example1_R4 from '../../../fixtures/r4/resources/encounter/example1.json'
 import example2_R4 from '../../../fixtures/r4/resources/encounter/example2.json';
 import example3_R4 from '../../../fixtures/r4/resources/encounter/example3.json';
 import fhirVersions from '../fhirResourceVersions';
+import fhirIcons from '../../../fixtures/example-icons';
+import EncounterIcon from '../../../assets/containers/Encounter/encounter.svg';
 export default {
   title: 'Encounter',
@@ -19,35 +21,55 @@ export default {
 export const DefaultVisualizationDSTU2 = () => {
   const fhirResource = object('Resource', example1);
   return (
-    <Encounter fhirVersion={fhirVersions.DSTU2} fhirResource={fhirResource} />
+    <Encounter
+      fhirVersion={fhirVersions.DSTU2}
+      fhirResource={fhirResource}
+      fhirIcons={require('../../../assets/containers/Encounter/encounter.svg')}
+    />
   );
 };
 export const ExampleWithoutParticipantsDSTU2 = () => {
   const fhirResource = object('Resource', example2);
   return (
-    <Encounter fhirVersion={fhirVersions.DSTU2} fhirResource={fhirResource} />
+    <Encounter
+      fhirVersion={fhirVersions.DSTU2}
+      fhirResource={fhirResource}
+      fhirIcons={EncounterIcon}
+    />
   );
 };
 export const ExampleSTU3 = () => {
   const fhirResource = object('Resource', example_STU3);
   return (
-    <Encounter fhirVersion={fhirVersions.STU3} fhirResource={fhirResource} />
+    <Encounter
+      fhirVersion={fhirVersions.STU3}
+      fhirResource={fhirResource}
+      fhirIcons={fhirIcons}
+    />
   );
 };
 export const ExampleWithoutParticipantSTU3 = () => {
   const fhirResource = object('Resource', example2_STU3);
   return (
-    <Encounter fhirVersion={fhirVersions.STU3} fhirResource={fhirResource} />
+    <Encounter
+      fhirVersion={fhirVersions.STU3}
+      fhirResource={fhirResource}
+      fhirIcons={false}
+    />
   );
 };
 export const ExampleWithoutParticipantR4 = () => {
   const fhirResource = object('Resource', example1_R4);
   return (
-    <Encounter fhirVersion={fhirVersions.R4} fhirResource={fhirResource} />
+    <Encounter
+      fhirVersion={fhirVersions.R4}
+      fhirResource={fhirResource}
+      fhirIcons={'random text'}
+    />
   );
 };