fhir-react 0.3.1 → 0.3.5

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

@@ -11,8 +11,80 @@ import example3AppointmentSTU3 from '../../../fixtures/stu3/resources/appointmen
 import example1AppointmentR4 from '../../../fixtures/r4/resources/appointment/example1.json';
 import example2AppointmentR4 from '../../../fixtures/r4/resources/appointment/example2.json';
 import example3AppointmentR4 from '../../../fixtures/r4/resources/appointment/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: exampleAppointmentDSTU2,
+    };
+
+    const { getByAltText } = render(<Appointment {...defaultProps} />);
+    const headerIcon = getByAltText('appointment');
+
+    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: exampleAppointmentDSTU2,
+      fhirIcons: false,
+    };
+
+    const { getByTestId } = render(<Appointment {...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: exampleAppointmentDSTU2,
+      fhirIcons: (
+        <img
+          src={require('../assets/containers/Appointment/appointment.svg')}
+          alt="appointment"
+        />
+      ),
+    };
+
+    const { getByAltText } = render(<Appointment {...defaultProps} />);
+    const headerIcon = getByAltText('appointment');
+
+    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: exampleAppointmentDSTU2,
+      fhirIcons: fhirIcons,
+    };
+
+    const { getByAltText } = render(<Appointment {...defaultProps} />);
+    const headerIcon = getByAltText('appointment');
+
+    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: exampleAppointmentDSTU2,
+      fhirIcons: avatarSrc,
+    };
+
+    const { getByAltText } = render(<Appointment {...defaultProps} />);
+    const headerIcon = getByAltText('header icon');
+
+    expect(headerIcon.getAttribute('src')).toContain(avatarSrc);
+  });
+
   it('should render with DSTU2 source data', () => {
     const defaultProps = {
       fhirResource: exampleAppointmentDSTU2,

package/src/components/resources/Binary/Binary.js

@@ -2,32 +2,43 @@ import React from 'react';
 import Img from '../../datatypes/Img';
 import Pdf from '../../datatypes/Pdf';
 import BinaryText from '../../datatypes/BinaryText';
+import Accordion from '../../containers/Accordion/Accordion';
+import { Body, Header } from '../../ui';
 
 const Binary = props => {
-  const { fhirResource } = props;
+  const { fhirResource, fhirIcons } = props;
+  const headerIcon = fhirIcons && fhirIcons['Binary'];
+
+  const loadBinaryFile = () => {
+    switch (fhirResource.contentType) {
+      case 'application/pdf':
+        if (props.children && typeof props.children === 'function') {
+          return props.children(fhirResource.content, fhirResource.contentType);
+        }
+        return <Pdf fhirResource={fhirResource} />;
+      case 'image/jpeg':
+        return <Img fhirResource={fhirResource} />;
+      case 'application/xml':
+        return <BinaryText fhirResource={fhirResource} />;
+      case 'application/json':
+        return <BinaryText fhirResource={fhirResource} />;
+      default:
+        return null;
+    }
+  };
 
   return (
     <div>
-      {(() => {
-        switch (fhirResource.contentType) {
-          case 'application/pdf':
-            if (props.children && typeof props.children === 'function') {
-              return props.children(
-                fhirResource.content,
-                fhirResource.contentType,
-              );
-            }
-            return <Pdf fhirResource={fhirResource} />;
-          case 'image/jpeg':
-            return <Img fhirResource={fhirResource} />;
-          case 'application/xml':
-            return <BinaryText fhirResource={fhirResource} />;
-          case 'application/json':
-            return <BinaryText fhirResource={fhirResource} />;
-          default:
-            return null;
+      <Accordion
+        headerContent={
+          <Header
+            resourceName="Binary"
+            title={`Binary file: ${fhirResource.contentType}`}
+            icon={headerIcon}
+          />
         }
-      })()}
+        bodyContent={<Body>{loadBinaryFile()}</Body>}
+      />
     </div>
   );
 };

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

@@ -8,6 +8,7 @@ import dstu2ExampleJpeg from '../../../fixtures/dstu2/resources/binary/example-j
 import stu3ExamplePdf from '../../../fixtures/stu3/resources/binary/example-pdf.json';
 import stu3ExampleJpeg from '../../../fixtures/stu3/resources/binary/example-jpeg.json';
 import stu3ExampleJson from '../../../fixtures/stu3/resources/binary/example-json.json';
+import fhirIcons from '../../../fixtures/example-icons';
 
 export default {
   title: 'Binary',
@@ -15,25 +16,25 @@ export default {
 
 export const PdfDSTU2 = () => {
   const fhirResource = object('Resource', dstu2ExamplePdf);
-  return <Binary fhirResource={fhirResource} />;
+  return <Binary fhirResource={fhirResource} fhirIcons={fhirIcons} />;
 };
 
 export const JpegDSTU2 = () => {
   const fhirResource = object('Resource', dstu2ExampleJpeg);
-  return <Binary fhirResource={fhirResource} />;
+  return <Binary fhirResource={fhirResource} fhirIcons={fhirIcons} />;
 };
 
 export const PdfSTU3 = () => {
   const fhirResource = object('Resource', stu3ExamplePdf);
-  return <Binary fhirResource={fhirResource} />;
+  return <Binary fhirResource={fhirResource} fhirIcons={fhirIcons} />;
 };
 
 export const JpegSTU3 = () => {
   const fhirResource = object('Resource', stu3ExampleJpeg);
-  return <Binary fhirResource={fhirResource} />;
+  return <Binary fhirResource={fhirResource} fhirIcons={fhirIcons} />;
 };
 
 export const JsonSTU3 = () => {
   const fhirResource = object('Resource', stu3ExampleJson);
-  return <Binary fhirResource={fhirResource} />;
+  return <Binary fhirResource={fhirResource} fhirIcons={fhirIcons} />;
 };

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

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

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

@@ -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/Condition/Condition.js

@@ -101,7 +101,6 @@ function Condition(props) {
     dateRecorded,
   } = resourceDTO(fhirVersion, fhirResource);
 
-  const headerIcon = fhirIcons[_get(fhirResource, 'resourceType')];
   const tableData = [
     {
       label: 'Asserted by',
@@ -145,7 +144,7 @@ function Condition(props) {
                 )}
               </>
             }
-            icon={headerIcon}
+            icon={fhirIcons}
             title={codeText}
             rightAdditionalContent={
               severityText && (

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

@@ -16,6 +16,8 @@ import example2ConditionR4 from '../../../fixtures/r4/resources/condition/exampl
 import example3ConditionR4 from '../../../fixtures/r4/resources/condition/example3.json';
 
 import fhirIcons from '../../../fixtures/example-icons';
+import ConditionIcon from '../../../assets/containers/Condition/condition.svg';
+
 export default { title: 'Condition' };
 
 export const DefaultVisualizationDSTU2 = () => {
@@ -24,7 +26,7 @@ export const DefaultVisualizationDSTU2 = () => {
     <Condition
       fhirResource={fhirResource}
       fhirVersion={fhirVersions.DSTU2}
-      fhirIcons={fhirIcons}
+      fhirIcons={require('../../../assets/containers/Condition/condition.svg')}
     />
   );
 };
@@ -35,7 +37,7 @@ export const ExampleWithoutSeverityDSTU2 = () => {
     <Condition
       fhirResource={fhirResource}
       fhirVersion={fhirVersions.DSTU2}
-      fhirIcons={fhirIcons}
+      fhirIcons={ConditionIcon}
     />
   );
 };
@@ -57,7 +59,7 @@ export const ExampleWithoutSeveritySTU3 = () => {
     <Condition
       fhirResource={fhirResource}
       fhirVersion={fhirVersions.STU3}
-      fhirIcons={fhirIcons}
+      fhirIcons={false}
     />
   );
 };
@@ -68,7 +70,7 @@ export const ExampleWithSeveritySTU3 = () => {
     <Condition
       fhirResource={fhirResource}
       fhirVersion={fhirVersions.STU3}
-      fhirIcons={fhirIcons}
+      fhirIcons={'random text'}
     />
   );
 };
@@ -76,32 +78,20 @@ export const ExampleWithSeveritySTU3 = () => {
 export const Example1ofR4 = () => {
   const fhirResource = object('Resource', example1ConditionR4);
   return (
-    <Condition
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.R4}
-      fhirIcons={fhirIcons}
-    />
+    <Condition fhirResource={fhirResource} fhirVersion={fhirVersions.R4} />
   );
 };
 
 export const Example2ofR4 = () => {
   const fhirResource = object('Resource', example2ConditionR4);
   return (
-    <Condition
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.R4}
-      fhirIcons={fhirIcons}
-    />
+    <Condition fhirResource={fhirResource} fhirVersion={fhirVersions.R4} />
   );
 };
 
 export const Example3ofR4 = () => {
   const fhirResource = object('Resource', example3ConditionR4);
   return (
-    <Condition
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.R4}
-      fhirIcons={fhirIcons}
-    />
+    <Condition fhirResource={fhirResource} fhirVersion={fhirVersions.R4} />
   );
 };

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

@@ -9,10 +9,80 @@ import exampleConditionSeverity from '../../../fixtures/dstu2/resources/conditio
 import exampleConditionSeveritySTU3 from '../../../fixtures/stu3/resources/condition/example-severity.json';
 import fhirVersions from '../fhirResourceVersions';
 import { render } from '@testing-library/react';
-
 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: exampleCondition,
+    };
+
+    const { getByAltText } = render(<Condition {...defaultProps} />);
+    const headerIcon = getByAltText('condition');
+
+    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: exampleCondition,
+      fhirIcons: false,
+    };
+
+    const { getByTestId } = render(<Condition {...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: exampleCondition,
+      fhirIcons: (
+        <img
+          src={require('../assets/containers/Condition/condition.svg')}
+          alt="condition"
+        />
+      ),
+    };
+
+    const { getByAltText } = render(<Condition {...defaultProps} />);
+    const headerIcon = getByAltText('condition');
+
+    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: exampleCondition,
+      fhirIcons: fhirIcons,
+    };
+
+    const { getByAltText } = render(<Condition {...defaultProps} />);
+    const headerIcon = getByAltText('condition');
+
+    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: exampleCondition,
+      fhirIcons: avatarSrc,
+    };
+
+    const { getByAltText } = render(<Condition {...defaultProps} />);
+    const headerIcon = getByAltText('header icon');
+
+    expect(headerIcon.getAttribute('src')).toContain(avatarSrc);
+  });
+
   it('DSTU2 - without severity field', () => {
     const defaultProps = {
       fhirResource: exampleCondition,