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

fhir-react 0.3.4 → 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 (44) hide show

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

@@ -10,18 +10,17 @@ import { isNotEmptyArray } from '../../../utils';
 import fhirVersions from '../fhirResourceVersions';
 import UnhandledResourceDataStructure from '../UnhandledResourceDataStructure';
 import CarePlanActivity from './CarePlanActivity';
-import './CarePlan.css';
 import {
   Root,
   Header,
-  Title,
   Badge,
   BadgeSecondary,
   Body,
-  Value,
   MissingValue,
+  ValueSectionItem,
 } from '../../ui';
+import Accordion from '../../containers/Accordion';
 const commonDTO = fhirResource => {
   const status = _get(fhirResource, 'status', '');
@@ -163,8 +162,7 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
-const CarePlan = props => {
-  const { fhirResource, fhirVersion } = props;
+const CarePlan = ({ fhirResource, fhirVersion, fhirIcons }) => {
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -197,99 +195,116 @@ const CarePlan = props => {
   const authorArr = Array.isArray(author) ? author : [author];
   return (
     <Root name="CarePlan">
-      <Header>
-        <Title>Care Plan</Title>
-        {status && <Badge data-testid="status">{status}</Badge>}
-        {expiry && <BadgeSecondary>expires on ${expiry}</BadgeSecondary>}
-      </Header>
-      <Body>
-        {hasCategory && (
-          <Value label="Category" data-testid="category">
-            {category.map((category, i) =>
-              (category.coding || []).map((coding, j) => (
-                <Coding key={`item-${i}${j}`} fhirData={coding} />
-              )),
+      <Accordion
+        headerContent={
+          <Header
+            icon={fhirIcons}
+            resourceName="CarePlan"
+            badges={status && <Badge data-testid="status">{status}</Badge>}
+            title={'Care Plan'}
+            additionalContent={
+              expiry && <BadgeSecondary>expires on ${expiry}</BadgeSecondary>
+            }
+          />
+        }
+        bodyContent={
+          <Body>
+            {hasCategory && (
+              <ValueSectionItem label="Category" data-testid="category">
+                {category.map((category, i) =>
+                  (category.coding || []).map((coding, j) => (
+                    <Coding key={`item-${i}${j}`} fhirData={coding} />
+                  )),
+                )}
+              </ValueSectionItem>
             )}
-          </Value>
-        )}
-        {intent && (
-          <Value label="Intent" data-testid="intent">
-            {intent}
-          </Value>
-        )}
-        {hasGoals && (
-          <Value label="Goals" data-testid="goals">
-            {goals.map((goal, i) => (
-              <div key={`goal-${i}`}>
-                <Reference fhirData={goal} />
-              </div>
-            ))}
-          </Value>
-        )}
-        {description && (
-          <Value label="Description" data-testid="description">
-            {description}
-          </Value>
-        )}
-        {subject && (
-          <Value label="Subject" data-testid="subject">
-            <Reference fhirData={subject} />
-          </Value>
-        )}
-        {hasValue(author) && (
-          <Value label="Author" data-testid="author">
-            {authorArr.map((item, i) => (
-              <Reference key={`author-${i}`} fhirData={item} />
-            ))}
-          </Value>
-        )}
-        {periodStart && (
-          <Value label="Plan Period Start" data-testid="periodStart">
-            {periodStart ? (
-              <DateType fhirData={periodStart} />
-            ) : (
-              <MissingValue />
+            {intent && (
+              <ValueSectionItem label="Intent" data-testid="intent">
+                {intent}
+              </ValueSectionItem>
             )}
-          </Value>
-        )}
-        {periodEnd && (
-          <Value label="Plan Period End" data-testid="periodEnd">
-            {periodEnd ? <DateType fhirData={periodEnd} /> : <MissingValue />}
-          </Value>
-        )}
-        {hasAddresses && (
-          <Value label="Addresses" data-testid="addresses">
-            {addresses.map((address, i) => (
-              <div key={`item-${i}`}>
-                <Reference fhirData={address} />
-              </div>
-            ))}
-          </Value>
-        )}
-        {isNotEmptyArray(basedOn) && (
-          <Value label="Based on" data-testid="basedOn">
-            {basedOn.map((item, i) => (
-              <Reference key={`based-on-${i}`} fhirData={item} />
-            ))}
-          </Value>
-        )}
-        {isNotEmptyArray(partOf) && (
-          <Value label="Part of" data-testid="partOf">
-            {partOf.map((item, i) => (
-              <Reference key={`part-of-${i}`} fhirData={item} />
-            ))}
-          </Value>
-        )}
-        {hasActivity && (
-          <Value label="Activity" data-testid="activity">
-            {activity.map((activity, i) => (
-              <div key={`item-${i}`}>
-                <CarePlanActivity fhirData={activity} />
-              </div>
-            ))}
-          </Value>
-        )}
-      </Body>
+            {hasGoals && (
+              <ValueSectionItem label="Goals" data-testid="goals">
+                {goals.map((goal, i) => (
+                  <div key={`goal-${i}`}>
+                    <Reference fhirData={goal} />
+                  </div>
+                ))}
+              </ValueSectionItem>
+            )}
+            {description && (
+              <ValueSectionItem label="Description" data-testid="description">
+                {description}
+              </ValueSectionItem>
+            )}
+            {subject && (
+              <ValueSectionItem label="Subject" data-testid="subject">
+                <Reference fhirData={subject} />
+              </ValueSectionItem>
+            )}
+            {hasValue(author) && (
+              <ValueSectionItem label="Author" data-testid="author">
+                {authorArr.map((item, i) => (
+                  <Reference key={`author-${i}`} fhirData={item} />
+                ))}
+              </ValueSectionItem>
+            )}
+            {periodStart && (
+              <ValueSectionItem
+                label="Plan Period Start"
+                data-testid="periodStart"
+              >
+                {periodStart ? (
+                  <DateType fhirData={periodStart} isBlack />
+                ) : (
+                  <MissingValue />
+                )}
+              </ValueSectionItem>
+            )}
+            {periodEnd && (
+              <ValueSectionItem label="Plan Period End" data-testid="periodEnd">
+                {periodEnd ? (
+                  <DateType fhirData={periodEnd} isBlack />
+                ) : (
+                  <MissingValue />
+                )}
+              </ValueSectionItem>
+            )}
+            {hasAddresses && (
+              <ValueSectionItem label="Addresses" data-testid="addresses">
+                {addresses.map((address, i) => (
+                  <div key={`item-${i}`}>
+                    <Reference fhirData={address} />
+                  </div>
+                ))}
+              </ValueSectionItem>
+            )}
+            {isNotEmptyArray(basedOn) && (
+              <ValueSectionItem label="Based on" data-testid="basedOn">
+                {basedOn.map((item, i) => (
+                  <Reference key={`based-on-${i}`} fhirData={item} />
+                ))}
+              </ValueSectionItem>
+            )}
+            {isNotEmptyArray(partOf) && (
+              <ValueSectionItem label="Part of" data-testid="partOf">
+                {partOf.map((item, i) => (
+                  <Reference key={`part-of-${i}`} fhirData={item} />
+                ))}
+              </ValueSectionItem>
+            )}
+            {hasActivity && (
+              <ValueSectionItem label="Activity" data-testid="activity">
+                {activity.map((activity, i) => (
+                  <div key={`item-${i}`}>
+                    <CarePlanActivity fhirData={activity} />
+                  </div>
+                ))}
+              </ValueSectionItem>
+            )}
+          </Body>
+        }
+      />
     </Root>
   );
 };

package/src/components/resources/CarePlan/CarePlan.test.js CHANGED Viewed

@@ -21,7 +21,7 @@ describe('should render component correctly', () => {
     expect(getByTestId('status').textContent).toContain('active');
     expect(getByTestId('category').textContent).toContain('Longitudinal');
     expect(getByTestId('addresses').textContent).toContain('Dog bite');
-    expect(getByTestId('activity').textContent).toContain('ADULT DIET');
+    expect(getByTestId('activity').textContent).toContain('Adult diet');
     expect(getByTestId('subject').textContent).toEqual('Patient/d47f763e7c7f');
   });
@@ -84,7 +84,7 @@ describe('should render component correctly', () => {
     expect(container).not.toBeNull();
     expect(getByTestId('addresses').textContent).toContain('pregnancy');
-    expect(getByTestId('activity').textContent).toContain('First Antenatal');
+    expect(getByTestId('activity').textContent).toContain('First antenatal');
     expect(getByTestId('intent').textContent).toEqual('plan');
     expect(getByTestId('goals').textContent).toEqual('#goal');
     expect(getByTestId('subject').textContent).toContain('Eve Everywoman');

package/src/components/resources/CarePlan/CarePlanActivity.js CHANGED Viewed

@@ -5,8 +5,12 @@ import Coding from '../../datatypes/Coding';
 const CarePlanActivity = props => {
   const { title = '', hasCategories, categories } = props.fhirData;
   return (
-    <div className="fhir-resource__CarePlan__activity">
-      <div className="fhir-resource__CarePlan__activity-title">{title}</div>
+    <div className="fhir-resource__CarePlan__activity mb-2">
+      <div className="fhir-resource__CarePlan__activity-title fw-bold">
+        {title
+          .toLowerCase()
+          .replace(/./, firstLetter => firstLetter.toUpperCase())}
+      </div>
       {hasCategories &&
         categories.map((coding, i) => (
           <Coding key={`item-${i}`} fhirData={coding} />

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} />;
 };