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/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/FamilyMemberHistory/FamilyMemberHistory.js CHANGED Viewed

@@ -1,20 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import Accordion from '../../containers/Accordion/Accordion';
 import Coding from '../../datatypes/Coding';
 import Reference from '../../datatypes/Reference';
 import Annotation from '../../datatypes/Annotation';
 import _get from 'lodash/get';
-import {
-  Root,
-  Header,
-  Title,
-  BadgeSecondary,
-  Badge,
-  Body,
-  Value,
-} from '../../ui';
+import { Root, Header, Badge, Body } from '../../ui';
 import UnhandledResourceDataStructure from '../UnhandledResourceDataStructure';
 import fhirVersions from '../fhirResourceVersions';
 import Date from '../../datatypes/Date';
@@ -78,7 +71,7 @@ const resourceDTO = (fhirVersion, fhirResource) => {
 };
 const FamilyMemberHistory = props => {
-  const { fhirResource, fhirVersion } = props;
+  const { fhirResource, fhirVersion, fhirIcons } = props;
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -97,36 +90,52 @@ const FamilyMemberHistory = props => {
     notes,
   } = fhirResourceData;
+  const tableData = [
+    {
+      label: 'Patient',
+      testId: 'patient',
+      data: patient && <Reference fhirData={patient} />,
+      status: patient,
+    },
+    {
+      label: 'Relationship',
+      testId: 'hasRelationship',
+      data:
+        hasRelationship &&
+        relationship.map((item, i) => (
+          <Coding key={`relationship-item-${i}`} fhirData={item} />
+        )),
+      status: hasRelationship,
+    },
+    {
+      label: 'Note',
+      testId: 'noteText',
+      data: hasNotes && <Annotation fhirData={notes} />,
+      status: hasNotes,
+    },
+  ];
   return (
     <Root name="FamilyMemberHistory">
-      <Header>
-        <Title>{title}</Title>
-        {status && <Badge data-testid="status">{status}</Badge>}
-        {date && (
-          <BadgeSecondary>
-            on <Date fhirData={date} />
-          </BadgeSecondary>
-        )}
-      </Header>
-      <Body>
-        {patient && (
-          <Value label="Patient" data-testid="patient">
-            <Reference fhirData={patient} />
-          </Value>
-        )}
-        {hasRelationship && (
-          <Value label="Relationship" data-testid="hasRelationship">
-            {relationship.map((item, i) => (
-              <Coding key={`item-${i}`} fhirData={item} />
-            ))}
-          </Value>
-        )}
-        {hasNotes && (
-          <Value label="Note" data-testid="noteText">
-            <Annotation fhirData={notes} />
-          </Value>
-        )}
-      </Body>
+      <Accordion
+        headerContent={
+          <Header
+            resourceName="FamilyMemberHistory"
+            additionalContent={
+              date && (
+                <>
+                  <span className="me-2">On</span>
+                  <Date fhirData={date} />
+                </>
+              )
+            }
+            badges={status && <Badge data-testid="status">{status}</Badge>}
+            icon={fhirIcons}
+            title={title}
+          />
+        }
+        bodyContent={<Body tableData={tableData} />}
+      />
     </Root>
   );
 };

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

@@ -8,6 +8,7 @@ import example1DSTU2 from '../../../fixtures/dstu2/resources/familyMemberHistory
 import example1STU3 from '../../../fixtures/stu3/resources/familyMemberHistory/example1.json';
 import example2STU3 from '../../../fixtures/stu3/resources/familyMemberHistory/example2.json';
+import fhirIcons from '../../../fixtures/example-icons';
 export default {
   title: 'FamilyMemberHistory',
@@ -19,6 +20,7 @@ export const DefaultVisualizationDSTU2 = () => {
     <FamilyMemberHistory
       fhirVersion={fhirVersions.DSTU2}
       fhirResource={fhirResource}
+      fhirIcons={fhirIcons}
     />
   );
 };
@@ -29,6 +31,7 @@ export const Example1OfSTU3 = () => {
     <FamilyMemberHistory
       fhirVersion={fhirVersions.STU3}
       fhirResource={fhirResource}
+      fhirIcons={fhirIcons}
     />
   );
 };
@@ -39,6 +42,7 @@ export const Example2OfSTU3 = () => {
     <FamilyMemberHistory
       fhirVersion={fhirVersions.STU3}
       fhirResource={fhirResource}
+      fhirIcons={fhirIcons}
     />
   );
 };

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

@@ -3,20 +3,13 @@ import PropTypes from 'prop-types';
 import Reference from '../../datatypes/Reference';
 import Coding from '../../datatypes/Coding';
 import Date from '../../datatypes/Date';
+import Accordion from '../../containers/Accordion/Accordion';
 import _get from 'lodash/get';
 import _has from 'lodash/has';
 import UnhandledResourceDataStructure from '../UnhandledResourceDataStructure';
 import fhirVersions from '../fhirResourceVersions';
-import {
-  Root,
-  Header,
-  Title,
-  Badge,
-  BadgeSecondary,
-  Body,
-  Value,
-} from '../../ui';
+import { Root, Header, Badge, Body, Value } from '../../ui';
 const commonDTO = fhirResource => {
   const title = _get(fhirResource, 'note[0].text', 'Goal');
@@ -107,7 +100,9 @@ const resourceDTO = (fhirVersion, fhirResource) => {
 };
 const Goal = props => {
-  const { fhirResource, fhirVersion } = props;
+  const { fhirResource, fhirVersion, fhirIcons } = props;
+  const headerIcon = fhirIcons && fhirIcons['Goal'];
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -135,83 +130,107 @@ const Goal = props => {
     statusDate,
   } = fhirResourceData;
+  const tableData = [
+    {
+      label: 'Subject',
+      testId: 'subject',
+      data: subject && <Reference fhirData={subject} />,
+      status: subject,
+    },
+    {
+      label: 'Subject',
+      testId: 'statusDate',
+      data: statusDate && <Date fhirData={statusDate} />,
+      status: statusDate,
+    },
+    {
+      label: 'Description',
+      testId: 'description',
+      data: description,
+      status: description,
+    },
+    {
+      label: 'Category',
+      testId: 'category',
+      data:
+        hasCategory &&
+        category.map((item, i) => {
+          const coding = _get(item, 'coding', []);
+          if (!Array.isArray(coding)) {
+            return null;
+          }
+          return coding.map((codingItem, j) => (
+            <Coding key={`coding-item-${j}`} fhirData={codingItem} />
+          ));
+        }),
+      status: hasCategory,
+    },
+    {
+      label: 'Universal Device Identifier',
+      testId: 'udi',
+      data: udi,
+      status: hasUdi,
+    },
+    {
+      label: 'Addresses',
+      testId: 'addresses',
+      data:
+        hasAddresses &&
+        addresses.map((address, i) => (
+          <Reference key={`address-item-${i}`} fhirData={address} />
+        )),
+      status: hasAddresses,
+    },
+    {
+      label: 'Priority',
+      testId: 'priority',
+      data: priority && <Coding fhirData={priority} />,
+      status: priority,
+    },
+    {
+      label: 'Author',
+      testId: 'author',
+      data: author && <Reference fhirData={author} />,
+      status: author,
+    },
+    {
+      label: 'Outcome',
+      testId: 'outcomeReference',
+      data:
+        outcomeReference &&
+        outcomeReference.map((item, i) => (
+          <Reference key={`outcome-reference-item-${i}`} fhirData={item} />
+        )),
+      status: outcomeReference,
+    },
+    {
+      label: 'Achievement Status',
+      testId: 'achievementStatus',
+      data: achievementStatus && <Coding fhirData={achievementStatus} />,
+      status: achievementStatus,
+    },
+  ];
   return (
     <Root name="Goal">
-      <Header>
-        <Title data-testid="title">{title}</Title>
-        {hasStatus && <Badge data-testid="status">{status}</Badge>}
-        {startDate && (
-          <BadgeSecondary data-testid="statusSecondary">
-            starting on {startDate}
-          </BadgeSecondary>
-        )}
-      </Header>
-      <Body>
-        {subject && (
-          <Value label="Subject" data-testid="subject">
-            <Reference fhirData={subject} />
-          </Value>
-        )}
-        {statusDate && (
-          <Value label="Status Date" data-testid="statusDate">
-            <Date fhirData={statusDate} />
-          </Value>
-        )}
-        {description && (
-          <Value label="Description" data-testid="description">
-            {description}
-          </Value>
-        )}
-        {hasCategory && (
-          <Value label="Category" data-testid="category">
-            {category.map((item, i) => {
-              const coding = _get(item, 'coding', []);
-              if (!Array.isArray(coding)) {
-                return null;
-              }
-              return coding.map((codingItem, j) => (
-                <div key={`item-${j}`}>
-                  <Coding fhirData={codingItem} />
-                </div>
-              ));
-            })}
-          </Value>
-        )}
-        {hasUdi && <Value label="Universal Device Identifier"> {udi}</Value>}
-        {hasAddresses && (
-          <Value label="Addresses" data-testid="addresses">
-            {addresses.map((address, i) => {
-              return (
-                <div key={`item-${i}`}>
-                  <Reference fhirData={address} />
-                </div>
-              );
-            })}
-          </Value>
-        )}
-        {priority && (
-          <Value label="Priority" data-testid="priority">
-            <Coding fhirData={priority} />
-          </Value>
-        )}
-        {author && (
-          <Value label="Author" data-testid="author">
-            <Reference fhirData={author} />
-          </Value>
-        )}
-        {outcomeReference && (
-          <Value label="Outcome" data-testid="outcomeReference">
-            {outcomeReference.map((item, i) => (
-              <Reference key={`item-${i}`} fhirData={item} />
-            ))}
-          </Value>
-        )}
-        {achievementStatus && (
-          <Value label="Achievement Status" data-testid="achievementStatus">
-            <Coding fhirData={achievementStatus} />
-          </Value>
-        )}
-      </Body>
+      <Accordion
+        headerContent={
+          <Header
+            resourceName="Goal"
+            additionalContent={
+              startDate && (
+                <Value label="Started" data-testid="headerStartDate">
+                  <Date fhirData={startDate} isBlack />
+                </Value>
+              )
+            }
+            badges={hasStatus && <Badge data-testid="status">{status}</Badge>}
+            icon={headerIcon}
+            title={title}
+          />
+        }
+        bodyContent={<Body tableData={tableData} />}
+      />
     </Root>
   );
 };

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { object } from '@storybook/addon-knobs';
 import Goal from './Goal';
+import fhirIcons from '../../../fixtures/example-icons';
 import dstu2Example1 from '../../../fixtures/dstu2/resources/goal/example1.json';
 import dstu2Example2 from '../../../fixtures/dstu2/resources/goal/example2.json';
 import stu3Example1 from '../../../fixtures/stu3/resources/goal/example1.json';
@@ -16,30 +16,60 @@ export default {
 export const DefaultVisualizationDSTU2 = () => {
   const fhirResource = object('Resource', dstu2Example1);
-  return <Goal fhirVersion={fhirVersions.DSTU2} fhirResource={fhirResource} />;
+  return (
+    <Goal
+      fhirVersion={fhirVersions.DSTU2}
+      fhirResource={fhirResource}
+      fhirIcons={fhirIcons}
+    />
+  );
 };
 export const Example2OfDSTU2 = () => {
   const fhirResource = object('Resource', dstu2Example2);
-  return <Goal fhirVersion={fhirVersions.DSTU2} fhirResource={fhirResource} />;
+  return (
+    <Goal
+      fhirVersion={fhirVersions.DSTU2}
+      fhirResource={fhirResource}
+      fhirIcons={fhirIcons}
+    />
+  );
 };
 export const ExampleOfSTU3 = () => {
   const fhirResource = object('Resource', stu3Example1);
-  return <Goal fhirVersion={fhirVersions.STU3} fhirResource={fhirResource} />;
+  return (
+    <Goal
+      fhirVersion={fhirVersions.STU3}
+      fhirResource={fhirResource}
+      fhirIcons={fhirIcons}
+    />
+  );
 };
 export const Example1OfR4 = () => {
   const fhirResource = object('Resource', r4Example1);
-  return <Goal fhirVersion={fhirVersions.R4} fhirResource={fhirResource} />;
+  return (
+    <Goal
+      fhirVersion={fhirVersions.R4}
+      fhirResource={fhirResource}
+      fhirIcons={fhirIcons}
+    />
+  );
 };
 export const Example2OfR4 = () => {
   const fhirResource = object('Resource', r4Example2);
-  return <Goal fhirVersion={fhirVersions.R4} fhirResource={fhirResource} />;
+  return (
+    <Goal
+      fhirVersion={fhirVersions.R4}
+      fhirResource={fhirResource}
+      fhirIcons={fhirIcons}
+    />
+  );
 };
 export const ExampleWithoutFhirVersionProperty = () => {
   const fhirResource = object('Resource', stu3Example1);
-  return <Goal fhirResource={fhirResource} />;
+  return <Goal fhirResource={fhirResource} fhirIcons={fhirIcons} />;
 };

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

@@ -100,9 +100,7 @@ describe('should render Goal component properly', () => {
     expect(getByTestId('status').textContent).toEqual('completed');
-    expect(getByTestId('statusSecondary').textContent).toEqual(
-      'starting on 2015-04-05',
-    );
+    expect(getByTestId('headerStartDate').textContent).toEqual('4/5/2015');
     expect(getByTestId('subject').textContent).toContain(
       'Peter James Chalmers',