fhir-react 0.3.5 → 0.3.8

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

@@ -17,8 +17,6 @@ import r4Example3 from '../../../fixtures/r4/resources/bundle/example3.json';
 import r4Example4 from '../../../fixtures/r4/resources/bundle/example4.json';
 import fhirVersions from '../fhirResourceVersions';
 
-import fhirIcons from '../../../fixtures/example-icons';
-
 export default {
   title: 'Bundle',
 };
@@ -26,133 +24,69 @@ export default {
 export const Example1OfDSTU2 = () => {
   const fhirResource = object('Resource', dstu2Example1);
   return (
-    <Bundle
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.DSTU2}
-      fhirIcons={fhirIcons}
-    />
+    <Bundle fhirResource={fhirResource} fhirVersion={fhirVersions.DSTU2} />
   );
 };
 
 export const Example2OfDSTU2 = () => {
   const fhirResource = object('Resource', dstu2Example2);
   return (
-    <Bundle
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.DSTU2}
-      fhirIcons={fhirIcons}
-    />
+    <Bundle fhirResource={fhirResource} fhirVersion={fhirVersions.DSTU2} />
   );
 };
 
 export const Example3OfDSTU2 = () => {
   const fhirResource = object('Resource', dstu2Example3);
   return (
-    <Bundle
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.DSTU2}
-      fhirIcons={fhirIcons}
-    />
+    <Bundle fhirResource={fhirResource} fhirVersion={fhirVersions.DSTU2} />
   );
 };
 
 export const Example4OfDSTU2 = () => {
   const fhirResource = object('Resource', dstu2Example4);
   return (
-    <Bundle
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.DSTU2}
-      fhirIcons={fhirIcons}
-    />
+    <Bundle fhirResource={fhirResource} fhirVersion={fhirVersions.DSTU2} />
   );
 };
 
 export const Example1OfSTU3 = () => {
   const fhirResource = object('Resource', stu3Example1);
-  return (
-    <Bundle
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.STU3}
-      fhirIcons={fhirIcons}
-    />
-  );
+  return <Bundle fhirResource={fhirResource} fhirVersion={fhirVersions.STU3} />;
 };
 
 export const Example2OfSTU3 = () => {
   const fhirResource = object('Resource', stu3Example2);
-  return (
-    <Bundle
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.STU3}
-      fhirIcons={fhirIcons}
-    />
-  );
+  return <Bundle fhirResource={fhirResource} fhirVersion={fhirVersions.STU3} />;
 };
 
 export const Example3OfSTU3 = () => {
   const fhirResource = object('Resource', stu3Example3);
-  return (
-    <Bundle
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.STU3}
-      fhirIcons={fhirIcons}
-    />
-  );
+  return <Bundle fhirResource={fhirResource} fhirVersion={fhirVersions.STU3} />;
 };
 
 export const Example4OfSTU3 = () => {
   const fhirResource = object('Resource', stu3Example4);
-  return (
-    <Bundle
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.STU3}
-      fhirIcons={fhirIcons}
-    />
-  );
+  return <Bundle fhirResource={fhirResource} fhirVersion={fhirVersions.STU3} />;
 };
 
 export const Example1OfR4 = () => {
   const fhirResource = object('Resource', r4Example1);
-  return (
-    <Bundle
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.R4}
-      fhirIcons={fhirIcons}
-    />
-  );
+  return <Bundle fhirResource={fhirResource} fhirVersion={fhirVersions.R4} />;
 };
 
 export const Example2OfR4 = () => {
   const fhirResource = object('Resource', r4Example2);
-  return (
-    <Bundle
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.R4}
-      fhirIcons={fhirIcons}
-    />
-  );
+  return <Bundle fhirResource={fhirResource} fhirVersion={fhirVersions.R4} />;
 };
 
 export const Example3OfR4 = () => {
   const fhirResource = object('Resource', r4Example3);
-  return (
-    <Bundle
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.R4}
-      fhirIcons={fhirIcons}
-    />
-  );
+  return <Bundle fhirResource={fhirResource} fhirVersion={fhirVersions.R4} />;
 };
 
 export const Example4OfR4 = () => {
   const fhirResource = object('Resource', r4Example4);
-  return (
-    <Bundle
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.R4}
-      fhirIcons={fhirIcons}
-    />
-  );
+  return <Bundle fhirResource={fhirResource} fhirVersion={fhirVersions.R4} />;
 };
 
 // export const ExampleWithoutFHIRVersionProperty = () => {

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

@@ -8,8 +8,6 @@ import dstu2Example2 from '../../../fixtures/dstu2/resources/bundle/example3.jso
 import stu3Example1 from '../../../fixtures/stu3/resources/bundle/example1.json';
 import r4Example1 from '../../../fixtures/r4/resources/bundle/example1.json';
 
-import fhirIcons from '../../../fixtures/example-icons';
-
 describe('Bundle should render component correctly', () => {
   it('should render component correctly with DSTU2 source data', () => {
     const defaultProps = {
@@ -31,7 +29,6 @@ describe('Bundle should render component correctly', () => {
     const defaultProps = {
       fhirVersion: fhirVersions.DSTU2,
       fhirResource: dstu2Example2,
-      fhirIcons: fhirIcons,
     };
     const { getByText, getAllByTestId } = render(<Bundle {...defaultProps} />);
     expect(getAllByTestId('title').map(title => title.textContent)).toEqual([

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

@@ -162,7 +162,7 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
 
-const CarePlan = ({ fhirResource, fhirVersion, fhirIcons }) => {
+const CarePlan = ({ fhirResource, fhirVersion, fhirIcons, onClick }) => {
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -304,6 +304,7 @@ const CarePlan = ({ fhirResource, fhirVersion, fhirIcons }) => {
             )}
           </Body>
         }
+        onClick={onClick}
       />
     </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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 import CarePlan from './CarePlan';
 import fhirVersions from '../fhirResourceVersions';
 
@@ -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,
@@ -39,8 +111,9 @@ describe('should render component correctly', () => {
     expect(getByTestId('activity').textContent).toContain('3141-9');
     expect(getByTestId('intent').textContent).toEqual('plan');
     expect(getByTestId('description').textContent).toContain('Manage obesity');
-    expect(getByTestId('subject').textContent).toContain('Peter James');
-    expect(getByTestId('subject').textContent).toContain('Patient/example');
+    expect(getByTestId('subject').textContent).toContain(
+      'Peter James Chalmers',
+    );
     expect(getByTestId('author').textContent).toContain('Dr Adam Careful');
     expect(getByTestId('periodEnd').textContent).toEqual('6/1/2017');
     expect(getByTestId('basedOn').textContent).toEqual(
@@ -64,8 +137,9 @@ describe('should render component correctly', () => {
     expect(getByTestId('intent').textContent).toEqual('plan');
     expect(getByTestId('goals').textContent).toEqual('Goal/example');
     expect(getByTestId('description').textContent).toContain('Manage obesity');
-    expect(getByTestId('subject').textContent).toContain('Peter James');
-    expect(getByTestId('subject').textContent).toContain('Patient/example');
+    expect(getByTestId('subject').textContent).toContain(
+      'Peter James Chalmers',
+    );
     expect(getByTestId('author').textContent).toContain('Dr Adam Careful');
     expect(getByTestId('periodEnd').textContent).toEqual('6/1/2017');
     expect(getByTestId('basedOn').textContent).toEqual(
@@ -88,8 +162,42 @@ describe('should render component correctly', () => {
     expect(getByTestId('intent').textContent).toEqual('plan');
     expect(getByTestId('goals').textContent).toEqual('#goal');
     expect(getByTestId('subject').textContent).toContain('Eve Everywoman');
-    expect(getByTestId('subject').textContent).toContain('Patient/1');
     expect(getByTestId('periodStart').textContent).toEqual('1/1/2013');
     expect(getByTestId('periodEnd').textContent).toEqual('10/1/2013');
   });
+
+  it('should fire custom onClick function', () => {
+    const defaultProps = {
+      fhirResource: example2CarePlanR4,
+      fhirVersion: fhirVersions.R4,
+    };
+
+    const onClick = jest.fn();
+    const { getByRole } = render(
+      <CarePlan {...defaultProps} onClick={onClick} />,
+    );
+    const accordion = getByRole('button');
+    fireEvent.click(accordion);
+
+    const attribute = accordion.getAttribute('data-bs-toggle');
+    expect(attribute).not.toEqual('collapse');
+    expect(onClick).toHaveBeenCalled();
+  });
+
+  it('should not fire custom onClick function', () => {
+    const defaultProps = {
+      fhirResource: example2CarePlanR4,
+      fhirVersion: fhirVersions.R4,
+    };
+
+    const onClick = 'test';
+    const { getByRole } = render(
+      <CarePlan {...defaultProps} onClick={onClick} />,
+    );
+    const accordion = getByRole('button');
+    fireEvent.click(accordion);
+
+    const attribute = accordion.getAttribute('data-bs-toggle');
+    expect(attribute).toEqual('collapse');
+  });
 });

package/src/components/resources/CareTeam/CareTeam.js

@@ -4,8 +4,7 @@ import {
   Header,
   MissingValue,
   Root,
-  Title,
-  Value,
+  ValueSection,
 } from '../../ui';
 
 import CareTeamParticipants from './CareTeamParticipants';
@@ -16,6 +15,7 @@ import React from 'react';
 import Reference from '../../datatypes/Reference';
 import _get from 'lodash/get';
 import fhirVersions from '../fhirResourceVersions';
+import Accordion from '../../containers/Accordion';
 
 const commonDTO = fhirResource => {
   // Default value for title - "Care team"
@@ -83,8 +83,7 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
 
-const CareTeam = props => {
-  const { fhirResource, fhirVersion } = props;
+const CareTeam = ({ fhirResource, fhirVersion, fhirIcons, onClick }) => {
   const {
     name,
     status,
@@ -98,54 +97,77 @@ const CareTeam = props => {
   } = resourceDTO(fhirVersion, fhirResource);
   const hasParticipants = participants.length > 0;
 
+  const tableData = [
+    {
+      label: 'Category',
+      testId: 'category',
+      data: category && <CodableConcept fhirData={category} isCursive />,
+      status: category,
+    },
+    {
+      label: 'Subject',
+      testId: 'subject',
+      data: subject && <Reference fhirData={subject} />,
+      status: subject,
+    },
+    {
+      label: 'Encounter',
+      testId: 'encounter',
+      data: encounter && <Reference fhirData={encounter} />,
+      status: encounter,
+    },
+    {
+      label: 'Managing organization',
+      testId: 'managingOrganization',
+      data: managingOrganization && (
+        <Reference fhirData={managingOrganization} />
+      ),
+      status: managingOrganization,
+    },
+    {
+      label: 'Care Period Start',
+      testId: 'periodStart',
+      data: periodStart ? (
+        <DateType fhirData={periodStart} isBlack />
+      ) : (
+        <MissingValue />
+      ),
+      status: periodStart,
+    },
+    {
+      label: 'Care Period End',
+      testId: 'periodEnd',
+      data: periodEnd ? (
+        <DateType fhirData={periodEnd} isBlack />
+      ) : (
+        <MissingValue />
+      ),
+      status: periodEnd,
+    },
+  ];
+
   return (
     <Root name="CareTeam">
-      <Header>
-        {name && <Title>{name}</Title>}
-        {status && <Badge data-testid="status">{status}</Badge>}
-      </Header>
-      <Body>
-        {category && (
-          <Value label="Category" data-testid="category">
-            <CodableConcept fhirData={category} />
-          </Value>
-        )}
-        {subject && (
-          <Value label="Subject" data-testid="subject">
-            <Reference fhirData={subject} />
-          </Value>
-        )}
-        {encounter && (
-          <Value label="Encounter" data-testid="encounter">
-            <Reference fhirData={encounter} />
-          </Value>
-        )}
-        {managingOrganization && (
-          <Value
-            label="Managing organization"
-            data-testid="managingOrganization"
-          >
-            <Reference fhirData={managingOrganization} />
-          </Value>
-        )}
-        {periodStart && (
-          <Value label="Care Period Start" data-testid="periodStart">
-            {periodStart ? (
-              <DateType fhirData={periodStart} />
-            ) : (
-              <MissingValue />
-            )}
-          </Value>
-        )}
-        {periodEnd && (
-          <Value label="Care Period End" data-testid="periodEnd">
-            {periodEnd ? <DateType fhirData={periodEnd} /> : <MissingValue />}
-          </Value>
-        )}
-        {hasParticipants && (
-          <CareTeamParticipants participants={participants} />
-        )}
-      </Body>
+      <Accordion
+        headerContent={
+          <Header
+            resourceName={'CareTeam'}
+            icon={fhirIcons}
+            title={name}
+            badges={status && <Badge data-testid="status">{status}</Badge>}
+          />
+        }
+        bodyContent={
+          <Body tableData={tableData}>
+            <ValueSection>
+              {hasParticipants && (
+                <CareTeamParticipants participants={participants} />
+              )}
+            </ValueSection>
+          </Body>
+        }
+        onClick={onClick}
+      />
     </Root>
   );
 };

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

@@ -7,6 +7,9 @@ import example_STU3 from '../../../fixtures/stu3/resources/careTeam/example1.jso
 import example2_STU3 from '../../../fixtures/stu3/resources/careTeam/example2.json';
 import example_R4 from '../../../fixtures/r4/resources/careTeam/example1.json';
 
+import fhirIcons from '../../../fixtures/example-icons';
+import CareTeamIcon from '../../../assets/containers/CareTeam/care-team.svg';
+
 export default {
   title: 'CareTeam',
 };
@@ -14,18 +17,32 @@ export default {
 export const ExampleSTU3 = () => {
   const fhirResource = object('Resource', example_STU3);
   return (
-    <CareTeam fhirResource={fhirResource} fhirVersion={fhirVersions.STU3} />
+    <CareTeam
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.STU3}
+      fhirIcons={CareTeamIcon}
+    />
   );
 };
 
 export const Example2OfSTU3 = () => {
   const fhirResource = object('Resource', example2_STU3);
   return (
-    <CareTeam fhirResource={fhirResource} fhirVersion={fhirVersions.STU3} />
+    <CareTeam
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.STU3}
+      fhirIcons={fhirIcons}
+    />
   );
 };
 
 export const ExampleR4 = () => {
   const fhirResource = object('Resource', example_R4);
-  return <CareTeam fhirResource={fhirResource} fhirVersion={fhirVersions.R4} />;
+  return (
+    <CareTeam
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.R4}
+      fhirIcons={false}
+    />
+  );
 };