fhir-react 0.3.6 → 0.3.9

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

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';
 
@@ -111,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(
@@ -136,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(
@@ -160,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,13 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
 
-const CareTeam = props => {
-  const { fhirResource, fhirVersion } = props;
+const CareTeam = ({
+  fhirResource,
+  fhirVersion,
+  fhirIcons,
+  onClick,
+  rawOnClick,
+}) => {
   const {
     name,
     status,
@@ -98,54 +103,78 @@ 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}
+        rawOnClick={rawOnClick}
+      />
     </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}
+    />
+  );
 };

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 
 import CareTeam from './CareTeam';
 import fhirVersions from '../fhirResourceVersions';
@@ -8,7 +8,80 @@ import stu3Example1 from '../../../fixtures/stu3/resources/careTeam/example1.jso
 import stu3Example2 from '../../../fixtures/stu3/resources/careTeam/example2.json';
 import r4Example1 from '../../../fixtures/r4/resources/careTeam/example1.json';
 
+import fhirIcons from '../../../fixtures/example-icons';
+
 describe('should render the CareTeam component properly', () => {
+  it('component without a fhirIcons props should render a default icon', () => {
+    const defaultProps = {
+      fhirVersion: fhirVersions.STU3,
+      fhirResource: stu3Example1,
+    };
+
+    const { getByAltText } = render(<CareTeam {...defaultProps} />);
+    const headerIcon = getByAltText('care team');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with a false as a fhirIcons props should render a placeholder', () => {
+    const defaultProps = {
+      fhirVersion: fhirVersions.STU3,
+      fhirResource: stu3Example1,
+      fhirIcons: false,
+    };
+
+    const { getByTestId } = render(<CareTeam {...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.STU3,
+      fhirResource: stu3Example1,
+      fhirIcons: (
+        <img
+          src={require('../assets/containers/CareTeam/care-team.svg')}
+          alt="group of people"
+        />
+      ),
+    };
+
+    const { getByAltText } = render(<CareTeam {...defaultProps} />);
+    const headerIcon = getByAltText('group of people');
+
+    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.STU3,
+      fhirResource: stu3Example1,
+      fhirIcons: fhirIcons,
+    };
+
+    const { getByAltText } = render(<CareTeam {...defaultProps} />);
+    const headerIcon = getByAltText('group of people');
+
+    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.STU3,
+      fhirResource: stu3Example1,
+      fhirIcons: avatarSrc,
+    };
+
+    const { getByAltText } = render(<CareTeam {...defaultProps} />);
+    const headerIcon = getByAltText('header icon');
+
+    expect(headerIcon.getAttribute('src')).toContain(avatarSrc);
+  });
+
   it('should render with STU3 source data', () => {
     const defaultProps = {
       fhirResource: stu3Example1,
@@ -117,4 +190,39 @@ describe('should render the CareTeam component properly', () => {
     );
     expect(periodEnds).toEqual(['-', '1/1/2013']);
   });
+
+  it('should fire custom onClick function', () => {
+    const defaultProps = {
+      fhirResource: r4Example1,
+      fhirVersion: fhirVersions.R4,
+    };
+
+    const onClick = jest.fn();
+    const { getByRole } = render(
+      <CareTeam {...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: r4Example1,
+      fhirVersion: fhirVersions.R4,
+    };
+
+    const onClick = 'test';
+    const { getByRole } = render(
+      <CareTeam {...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/CareTeamParticipants.js

@@ -20,7 +20,7 @@ const CareTeamParticipants = props => {
             <TableHeader>End</TableHeader>
           </TableRow>
         </thead>
-        <tbody>{allParticipants}</tbody>
+        <tbody className="border-top-0">{allParticipants}</tbody>
       </Table>
     </ValueSection>
   );

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;
 }