fhir-react 0.3.4 → 0.3.7

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 = () => {

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

@@ -7,8 +7,80 @@ import examplecarePlanDSTU2 from '../../../fixtures/dstu2/resources/carePlan/exa
 import exampleCarePlanSTU3 from '../../../fixtures/stu3/resources/carePlan/example1.json';
 import example1CarePlanR4 from '../../../fixtures/r4/resources/carePlan/weightLossPlan.json';
 import example2CarePlanR4 from '../../../fixtures/r4/resources/carePlan/pregnancyPlan.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: examplecarePlanDSTU2,
+      fhirVersion: fhirVersions.DSTU2,
+    };
+
+    const { getByAltText } = render(<CarePlan {...defaultProps} />);
+    const headerIcon = getByAltText('care plan');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with a false as a fhirIcons props should render a placeholder', () => {
+    const defaultProps = {
+      fhirResource: examplecarePlanDSTU2,
+      fhirVersion: fhirVersions.DSTU2,
+      fhirIcons: false,
+    };
+
+    const { getByTestId } = render(<CarePlan {...defaultProps} />);
+    const headerIcon = getByTestId('placeholder');
+
+    expect(headerIcon).toBeTruthy();
+  });
+
+  it('component with the img as a fhirIcons props should render an img', () => {
+    const defaultProps = {
+      fhirResource: examplecarePlanDSTU2,
+      fhirVersion: fhirVersions.DSTU2,
+      fhirIcons: (
+        <img
+          src={require('../assets/containers/CarePlan/care-plan.svg')}
+          alt="care plan"
+        />
+      ),
+    };
+
+    const { getByAltText } = render(<CarePlan {...defaultProps} />);
+    const headerIcon = getByAltText('care plan');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with the resources object as a fhirIcons props should render an img', () => {
+    const defaultProps = {
+      fhirResource: examplecarePlanDSTU2,
+      fhirVersion: fhirVersions.DSTU2,
+      fhirIcons: fhirIcons,
+    };
+
+    const { getByAltText } = render(<CarePlan {...defaultProps} />);
+    const headerIcon = getByAltText('care plan');
+
+    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: examplecarePlanDSTU2,
+      fhirVersion: fhirVersions.DSTU2,
+      fhirIcons: avatarSrc,
+    };
+
+    const { getByAltText } = render(<CarePlan {...defaultProps} />);
+    const headerIcon = getByAltText('header icon');
+
+    expect(headerIcon.getAttribute('src')).toContain(avatarSrc);
+  });
+
   it('should render with DSTU2 source data', () => {
     const defaultProps = {
       fhirResource: examplecarePlanDSTU2,
@@ -21,7 +93,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 +156,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/Claim/CareTeam.js

@@ -0,0 +1,55 @@
+import {
+  MissingValue,
+  Table,
+  TableCell,
+  TableHeader,
+  TableRow,
+  ValueSection,
+} from '../../ui';
+import Reference from '../../datatypes/Reference';
+import Coding from '../../datatypes/Coding';
+import React from 'react';
+
+const CareTeam = ({ careTeam }) => {
+  return (
+    <ValueSection label="Care Team" data-testid="careTeam" marginTop>
+      <Table>
+        <thead>
+          <TableRow>
+            <TableHeader>Provider</TableHeader>
+            <TableHeader>Role</TableHeader>
+            <TableHeader>Qualification</TableHeader>
+          </TableRow>
+        </thead>
+        <tbody className="border-top-0">
+          {careTeam.map((member, idx) => (
+            <TableRow key={idx}>
+              <TableCell data-testid="careTeam.provider" className="col-md-4">
+                <Reference fhirData={member.provider} />
+              </TableCell>
+              <TableCell data-testid="careTeam.role" className="col-md-4">
+                {member.role ? (
+                  <Coding fhirData={member.role} />
+                ) : (
+                  <MissingValue />
+                )}
+              </TableCell>
+              <TableCell
+                data-testid="careTeam.qualification"
+                className="col-md-4"
+              >
+                {careTeam.qualification ? (
+                  <Coding fhirData={member.qualification} />
+                ) : (
+                  <MissingValue />
+                )}
+              </TableCell>
+            </TableRow>
+          ))}
+        </tbody>
+      </Table>
+    </ValueSection>
+  );
+};
+
+export default CareTeam;

package/src/components/resources/Claim/Claim.css

@@ -1,12 +1,3 @@
-.fhir-resource__Claim__item-level {
-  height: 100%;
-  height: 50px;
-  margin: -12px;
-  display: flex;
-}
-
-.fhir-resource__Claim__item-level-fill {
-  width: 10px;
-  height: 100%;
-  background: #dee2e6;
+.table-expandable-row {
+  --bs-table-striped-bg: #eef1f3;
 }