fhir-react 0.3.2 → 0.3.6

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

@@ -13,38 +13,61 @@ import example1AppointmentR4 from '../../../fixtures/r4/resources/appointment/ex
 import example2AppointmentR4 from '../../../fixtures/r4/resources/appointment/example2.json';
 import example3AppointmentR4 from '../../../fixtures/r4/resources/appointment/example3.json';
 
+import fhirIcons from '../../../fixtures/example-icons';
+import AppointmentIcon from '../../../assets/containers/Appointment/appointment.svg';
+
 export default { title: 'Appointment' };
 
 export const DefaultVisualizationDSTU2 = () => {
   const fhirResource = object('Resource', exampleAppointmentDSTU2);
   return (
-    <Appointment fhirResource={fhirResource} fhirVersion={fhirVersions.DSTU2} />
+    <Appointment
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.DSTU2}
+      fhirIcons={require('../../../assets/containers/Appointment/appointment.svg')}
+    />
   );
 };
 
 export const Example2OfDSTU2 = () => {
   const fhirResource = object('Resource', example2AppointmentDSTU2);
   return (
-    <Appointment fhirResource={fhirResource} fhirVersion={fhirVersions.DSTU2} />
+    <Appointment
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.DSTU2}
+      fhirIcons={AppointmentIcon}
+    />
   );
 };
 
 export const Example1OfSTU3 = () => {
   const fhirResource = object('Resource', example1AppointmentSTU3);
   return (
-    <Appointment fhirResource={fhirResource} fhirVersion={fhirVersions.STU3} />
+    <Appointment
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.STU3}
+      fhirIcons={fhirIcons}
+    />
   );
 };
 export const Example2OfSTU3 = () => {
   const fhirResource = object('Resource', example2AppointmentSTU3);
   return (
-    <Appointment fhirResource={fhirResource} fhirVersion={fhirVersions.STU3} />
+    <Appointment
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.STU3}
+      fhirIcons={false}
+    />
   );
 };
 export const Example3OfSTU3 = () => {
   const fhirResource = object('Resource', example3AppointmentSTU3);
   return (
-    <Appointment fhirResource={fhirResource} fhirVersion={fhirVersions.STU3} />
+    <Appointment
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.STU3}
+      fhirIcons={'random text'}
+    />
   );
 };
 

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,42 @@ 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 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={fhirIcons}
+          />
         }
-      })()}
+        bodyContent={<Body>{loadBinaryFile()}</Body>}
+      />
     </div>
   );
 };

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

@@ -8,6 +8,8 @@ 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';
+import BinaryIcon from '../../../assets/containers/Binary/binary.svg';
 
 export default {
   title: 'Binary',
@@ -15,25 +17,30 @@ export default {
 
 export const PdfDSTU2 = () => {
   const fhirResource = object('Resource', dstu2ExamplePdf);
-  return <Binary fhirResource={fhirResource} />;
+  return (
+    <Binary
+      fhirResource={fhirResource}
+      fhirIcons={require('../../../assets/containers/Binary/binary.svg')}
+    />
+  );
 };
 
 export const JpegDSTU2 = () => {
   const fhirResource = object('Resource', dstu2ExampleJpeg);
-  return <Binary fhirResource={fhirResource} />;
+  return <Binary fhirResource={fhirResource} fhirIcons={BinaryIcon} />;
 };
 
 export const PdfSTU3 = () => {
   const fhirResource = object('Resource', stu3ExamplePdf);
-  return <Binary fhirResource={fhirResource} />;
+  return <Binary fhirResource={fhirResource} fhirIcons={false} />;
 };
 
 export const JpegSTU3 = () => {
   const fhirResource = object('Resource', stu3ExampleJpeg);
-  return <Binary fhirResource={fhirResource} />;
+  return <Binary fhirResource={fhirResource} fhirIcons={'random text'} />;
 };
 
 export const JsonSTU3 = () => {
   const fhirResource = object('Resource', stu3ExampleJson);
-  return <Binary fhirResource={fhirResource} />;
+  return <Binary fhirResource={fhirResource} fhirIcons={fhirIcons} />;
 };

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

@@ -5,8 +5,75 @@ import Binary from './Binary';
 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';
 
 describe('should render component correctly', () => {
+  it('component without a fhirIcons props should render a default icon', () => {
+    const defaultProps = {
+      fhirResource: stu3ExamplePdf,
+    };
+
+    const { getByAltText } = render(<Binary {...defaultProps} />);
+    const headerIcon = getByAltText('binary');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with a false as a fhirIcons props should render a placeholder', () => {
+    const defaultProps = {
+      fhirResource: stu3ExamplePdf,
+      fhirIcons: false,
+    };
+
+    const { getByTestId } = render(<Binary {...defaultProps} />);
+    const headerIcon = getByTestId('placeholder');
+
+    expect(headerIcon).toBeTruthy();
+  });
+
+  it('component with the img as a fhirIcons props should render an img', () => {
+    const defaultProps = {
+      fhirResource: stu3ExamplePdf,
+      fhirIcons: (
+        <img
+          src={require('../assets/containers/Binary/binary.svg')}
+          alt="binary"
+        />
+      ),
+    };
+
+    const { getByAltText } = render(<Binary {...defaultProps} />);
+    const headerIcon = getByAltText('binary');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with the resources object as a fhirIcons props should render an img', () => {
+    const defaultProps = {
+      fhirResource: stu3ExamplePdf,
+      fhirIcons: fhirIcons,
+    };
+
+    const { getByAltText } = render(<Binary {...defaultProps} />);
+    const headerIcon = getByAltText('binary');
+
+    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: stu3ExamplePdf,
+      fhirIcons: avatarSrc,
+    };
+
+    const { getByAltText } = render(<Binary {...defaultProps} />);
+    const headerIcon = getByAltText('header icon');
+
+    expect(headerIcon.getAttribute('src')).toContain(avatarSrc);
+  });
+
   it('PDF binary file', () => {
     const { container } = render(<Binary fhirResource={stu3ExamplePdf} />);
     expect(container).not.toBe(null);

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.stories.js

@@ -10,38 +10,64 @@ import weightLossCarePlanR4 from '../../../fixtures/r4/resources/carePlan/weight
 import pregnancyCarePlanR4 from '../../../fixtures/r4/resources/carePlan/pregnancyPlan.json';
 import heartOperationCarePlanR4 from '../../../fixtures/r4/resources/carePlan/heartOperationPlan.json';
 import fhirVersions from '../fhirResourceVersions';
+import CarePlanIcon from '../../../assets/containers/CarePlan/care-plan.svg';
+import fhirIcons from '../../../fixtures/example-icons';
 
 export default { title: 'CarePlan' };
 
 export const DefaultVisualizationDSTU2 = () => {
   const fhirResource = object('Resource', exampleCarePlanDSTU2);
   return (
-    <CarePlan fhirVersion={fhirVersions.DSTU2} fhirResource={fhirResource} />
+    <CarePlan
+      fhirVersion={fhirVersions.DSTU2}
+      fhirResource={fhirResource}
+      fhirIcons={require('../../../assets/containers/CarePlan/care-plan.svg')}
+    />
   );
 };
 
 export const ExampleCarePlanSTU3 = () => {
   const fhirResource = object('Resource', exampleCarePlanSTU3);
   return (
-    <CarePlan fhirVersion={fhirVersions.STU3} fhirResource={fhirResource} />
+    <CarePlan
+      fhirVersion={fhirVersions.STU3}
+      fhirResource={fhirResource}
+      fhirIcons={CarePlanIcon}
+    />
   );
 };
 
 export const Example2CarePlanSTU3 = () => {
   const fhirResource = object('Resource', example2CarePlanSTU3);
   return (
-    <CarePlan fhirVersion={fhirVersions.STU3} fhirResource={fhirResource} />
+    <CarePlan
+      fhirVersion={fhirVersions.STU3}
+      fhirResource={fhirResource}
+      fhirIcons={fhirIcons}
+    />
   );
 };
 
 export const WeightLossCarePlanR4 = () => {
   const fhirResource = object('Resource', weightLossCarePlanR4);
-  return <CarePlan fhirVersion={fhirVersions.R4} fhirResource={fhirResource} />;
+  return (
+    <CarePlan
+      fhirVersion={fhirVersions.R4}
+      fhirResource={fhirResource}
+      fhirIcons={false}
+    />
+  );
 };
 
 export const PregnancyCarePlanR4 = () => {
   const fhirResource = object('Resource', pregnancyCarePlanR4);
-  return <CarePlan fhirVersion={fhirVersions.R4} fhirResource={fhirResource} />;
+  return (
+    <CarePlan
+      fhirVersion={fhirVersions.R4}
+      fhirResource={fhirResource}
+      fhirIcons={'random text'}
+    />
+  );
 };
 
 export const HeartOperatioCarePlanR4 = () => {