fhir-react 0.3.2 → 0.3.6

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

@@ -9,6 +9,8 @@ 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';
+import DiagnosticReportIcon from '../../../assets/containers/DiagnosticReport/diagnostic-report.svg';
 
 export default { title: 'DiagnosticReport' };
 
@@ -18,6 +20,7 @@ export const DefaultVisualizationDSTU2 = () => {
     <DiagnosticReport
       fhirVersion={fhirVersions.DSTU2}
       fhirResource={fhirResource}
+      fhirIcons={require('../../../assets/containers/DiagnosticReport/diagnostic-report.svg')}
     />
   );
 };
@@ -28,6 +31,7 @@ export const ExampleDiagnosticReportSTU3 = () => {
     <DiagnosticReport
       fhirVersion={fhirVersions.STU3}
       fhirResource={fhirResource}
+      fhirIcons={DiagnosticReportIcon}
     />
   );
 };
@@ -38,6 +42,7 @@ export const ExampleDiagnosticReportR4 = () => {
     <DiagnosticReport
       fhirVersion={fhirVersions.R4}
       fhirResource={fhirResource}
+      fhirIcons={fhirIcons}
     />
   );
 };
@@ -48,6 +53,7 @@ export const Example2DiagnosticReportR4 = () => {
     <DiagnosticReport
       fhirVersion={fhirVersions.R4}
       fhirResource={fhirResource}
+      fhirIcons={false}
     />
   );
 };
@@ -58,11 +64,12 @@ export const Example3DiagnosticReportR4 = () => {
     <DiagnosticReport
       fhirVersion={fhirVersions.R4}
       fhirResource={fhirResource}
+      fhirIcons={'random text'}
     />
   );
 };
 
 export const ExampleWithoutFhirVersionProperty = () => {
   const fhirResource = object('Resource', exampleDiagnosticReportSTU3);
-  return <DiagnosticReport fhirResource={fhirResource} />;
+  return <DiagnosticReport fhirResource={fhirResource} fhirIcons={fhirIcons} />;
 };

package/src/components/resources/DiagnosticReport/DiagnosticReport.test.js

@@ -7,8 +7,79 @@ import exampleDiagnosticReportDSTU2 from '../../../fixtures/dstu2/resources/diag
 import exampleDiagnosticReportSTU3 from '../../../fixtures/stu3/resources/diagnosticReport/example1.json';
 import exampleDiagnosticReportR4 from '../../../fixtures/r4/resources/diagnosticReport/example1.json';
 import example2DiagnosticReportR4 from '../../../fixtures/r4/resources/diagnosticReport/example2.json';
+import fhirIcons from '../../../fixtures/example-icons';
 
 describe('should render component correctly', () => {
+  it('component without a fhirIcons props should render a default icon', () => {
+    const defaultProps = {
+      fhirResource: exampleDiagnosticReportDSTU2,
+      fhirVersion: fhirVersions.DSTU2,
+    };
+
+    const { getByAltText } = render(<DiagnosticReport {...defaultProps} />);
+    const headerIcon = getByAltText('diagnostic report');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with a false as a fhirIcons props should render a placeholder', () => {
+    const defaultProps = {
+      fhirResource: exampleDiagnosticReportDSTU2,
+      fhirVersion: fhirVersions.DSTU2,
+      fhirIcons: false,
+    };
+
+    const { getByTestId } = render(<DiagnosticReport {...defaultProps} />);
+    const headerIcon = getByTestId('placeholder');
+
+    expect(headerIcon).toBeTruthy();
+  });
+
+  it('component with the img as a fhirIcons props should render an img', () => {
+    const defaultProps = {
+      fhirResource: exampleDiagnosticReportDSTU2,
+      fhirVersion: fhirVersions.DSTU2,
+      fhirIcons: (
+        <img
+          src={require('../assets/containers/DiagnosticReport/diagnostic-report.svg')}
+          alt="diagnostic report"
+        />
+      ),
+    };
+
+    const { getByAltText } = render(<DiagnosticReport {...defaultProps} />);
+    const headerIcon = getByAltText('diagnostic report');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with the resources object as a fhirIcons props should render an img', () => {
+    const defaultProps = {
+      fhirResource: exampleDiagnosticReportDSTU2,
+      fhirVersion: fhirVersions.DSTU2,
+      fhirIcons: fhirIcons,
+    };
+
+    const { getByAltText } = render(<DiagnosticReport {...defaultProps} />);
+    const headerIcon = getByAltText('diagnostic report');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with the url as a fhirIcons props should render an img', () => {
+    const avatarSrc =
+      'https://www.gravatar.com/avatar/?s=50&r=any&default=identicon&forcedefault=1';
+    const defaultProps = {
+      fhirResource: exampleDiagnosticReportDSTU2,
+      fhirVersion: fhirVersions.DSTU2,
+      fhirIcons: avatarSrc,
+    };
+
+    const { getByAltText } = render(<DiagnosticReport {...defaultProps} />);
+    const headerIcon = getByAltText('header icon');
+
+    expect(headerIcon.getAttribute('src')).toContain(avatarSrc);
+  });
   it('should render with DSTU2 source data', () => {
     const defaultProps = {
       fhirResource: exampleDiagnosticReportDSTU2,

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

@@ -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

@@ -7,6 +7,8 @@ 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';
+import DocumentReferenceIcon from '../../../assets/containers/DocumentReference/document-reference.svg';
 
 export default { title: 'Document Reference' };
 
@@ -16,6 +18,7 @@ export const DefaultVisualizationDSTU2 = () => {
     <DocumentReference
       fhirResource={fhirResource}
       fhirVersion={fhirVersions.DSTU2}
+      fhirIcons={require('../../../assets/containers/DocumentReference/document-reference.svg')}
     />
   );
 };
@@ -26,6 +29,7 @@ export const ExampleSTU3 = () => {
     <DocumentReference
       fhirResource={fhirResource}
       fhirVersion={fhirVersions.STU3}
+      fhirIcons={DocumentReferenceIcon}
     />
   );
 };
@@ -36,6 +40,7 @@ export const ExampleR4 = () => {
     <DocumentReference
       fhirResource={fhirResource}
       fhirVersion={fhirVersions.R4}
+      fhirIcons={fhirIcons}
     />
   );
 };

package/src/components/resources/DocumentReference/DocumentReference.test.js

@@ -8,8 +8,79 @@ import DocumentReference from './DocumentReference';
 import dstu2Example1 from '../../../fixtures/dstu2/resources/documentReference/example1.json';
 import stu3Example1 from '../../../fixtures/stu3/resources/documentReference/example1.json';
 import r4Example1 from '../../../fixtures/r4/resources/documentReference/example1.json';
+import fhirIcons from '../../../fixtures/example-icons';
 
 describe('should render the DocumentReference component properly', () => {
+  it('component without a fhirIcons props should render a default icon', () => {
+    const defaultProps = {
+      fhirResource: dstu2Example1,
+      fhirVersion: fhirVersions.DSTU2,
+    };
+
+    const { getByAltText } = render(<DocumentReference {...defaultProps} />);
+    const headerIcon = getByAltText('document reference');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with a false as a fhirIcons props should render a placeholder', () => {
+    const defaultProps = {
+      fhirResource: dstu2Example1,
+      fhirVersion: fhirVersions.DSTU2,
+      fhirIcons: false,
+    };
+
+    const { getByTestId } = render(<DocumentReference {...defaultProps} />);
+    const headerIcon = getByTestId('placeholder');
+
+    expect(headerIcon).toBeTruthy();
+  });
+
+  it('component with the img as a fhirIcons props should render an img', () => {
+    const defaultProps = {
+      fhirResource: dstu2Example1,
+      fhirVersion: fhirVersions.DSTU2,
+      fhirIcons: (
+        <img
+          src={require('../assets/containers/DocumentReference/document-reference.svg')}
+          alt="document reference"
+        />
+      ),
+    };
+
+    const { getByAltText } = render(<DocumentReference {...defaultProps} />);
+    const headerIcon = getByAltText('document reference');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with the resources object as a fhirIcons props should render an img', () => {
+    const defaultProps = {
+      fhirResource: dstu2Example1,
+      fhirVersion: fhirVersions.DSTU2,
+      fhirIcons: fhirIcons,
+    };
+
+    const { getByAltText } = render(<DocumentReference {...defaultProps} />);
+    const headerIcon = getByAltText('document reference');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with the url as a fhirIcons props should render an img', () => {
+    const avatarSrc =
+      'https://www.gravatar.com/avatar/?s=50&r=any&default=identicon&forcedefault=1';
+    const defaultProps = {
+      fhirResource: dstu2Example1,
+      fhirVersion: fhirVersions.DSTU2,
+      fhirIcons: avatarSrc,
+    };
+
+    const { getByAltText } = render(<DocumentReference {...defaultProps} />);
+    const headerIcon = getByAltText('header icon');
+
+    expect(headerIcon.getAttribute('src')).toContain(avatarSrc);
+  });
   it('should render with DSTU2 source data', () => {
     const { getByTestId } = render(
       <DocumentReference

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

@@ -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

@@ -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'}
+    />
   );
 };
 

package/src/components/resources/Encounter/Encounter.test.js

@@ -9,8 +9,80 @@ import example2_STU3 from '../../../fixtures/stu3/resources/encounter/example-2.
 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 fhirIcons from '../../../fixtures/example-icons';
 
 describe('should render component correctly', () => {
+  it('component without a fhirIcons props should render a default icon', () => {
+    const defaultProps = {
+      fhirVersion: fhirVersions.DSTU2,
+      fhirResource: example1,
+    };
+
+    const { getByAltText } = render(<Encounter {...defaultProps} />);
+    const headerIcon = getByAltText('encounter');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with a false as a fhirIcons props should render a placeholder', () => {
+    const defaultProps = {
+      fhirVersion: fhirVersions.DSTU2,
+      fhirResource: example1,
+      fhirIcons: false,
+    };
+
+    const { getByTestId } = render(<Encounter {...defaultProps} />);
+    const headerIcon = getByTestId('placeholder');
+
+    expect(headerIcon).toBeTruthy();
+  });
+
+  it('component with the img as a fhirIcons props should render an img', () => {
+    const defaultProps = {
+      fhirVersion: fhirVersions.DSTU2,
+      fhirResource: example1,
+      fhirIcons: (
+        <img
+          src={require('../assets/containers/Encounter/encounter.svg')}
+          alt="encounter"
+        />
+      ),
+    };
+
+    const { getByAltText } = render(<Encounter {...defaultProps} />);
+    const headerIcon = getByAltText('encounter');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with the resources object as a fhirIcons props should render an img', () => {
+    const defaultProps = {
+      fhirVersion: fhirVersions.DSTU2,
+      fhirResource: example1,
+      fhirIcons: fhirIcons,
+    };
+
+    const { getByAltText } = render(<Encounter {...defaultProps} />);
+    const headerIcon = getByAltText('encounter');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with the url as a fhirIcons props should render an img', () => {
+    const avatarSrc =
+      'https://www.gravatar.com/avatar/?s=50&r=any&default=identicon&forcedefault=1';
+    const defaultProps = {
+      fhirVersion: fhirVersions.DSTU2,
+      fhirResource: example1,
+      fhirIcons: avatarSrc,
+    };
+
+    const { getByAltText } = render(<Encounter {...defaultProps} />);
+    const headerIcon = getByAltText('header icon');
+
+    expect(headerIcon.getAttribute('src')).toContain(avatarSrc);
+  });
+
   it('DSTU2 - with PARTICIPANTS table', () => {
     const defaultProps = {
       fhirVersion: fhirVersions.DSTU2,