npm - fhir-react - Versions diffs - 0.3.7 → 0.3.8 - Mend

fhir-react 0.3.7 → 0.3.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (138) hide show

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

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

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

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

@@ -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/Claim.js CHANGED Viewed

@@ -298,7 +298,7 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
-const Claim = ({ fhirResource, fhirVersion, fhirIcons }) => {
+const Claim = ({ fhirResource, fhirVersion, fhirIcons, onClick }) => {
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -481,6 +481,7 @@ const Claim = ({ fhirResource, fhirVersion, fhirIcons }) => {
             {items && <Items items={items} />}
           </Body>
         }
+        onClick={onClick}
       />
     </Root>
   );

package/src/components/resources/Claim/Claim.test.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 import Claim from './Claim';
 import fhirVersions from '../fhirResourceVersions';
@@ -360,4 +360,35 @@ describe('should render the Claim component properly', () => {
     expect(quantities).toEqual(['-']);
     expect(netPrices).toEqual(['135.57 USD']);
   });
+  it('should fire custom onClick function', () => {
+    const defaultProps = {
+      fhirResource: r4Example1,
+      fhirVersion: fhirVersions.R4,
+    };
+    const onClick = jest.fn();
+    const { getByRole } = render(<Claim {...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(<Claim {...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/ClaimResponse/AddedItem.js CHANGED Viewed

@@ -1,27 +1,62 @@
-import React from 'react';
+import React, { useState } from 'react';
-import { TableCell, TableRow } from '../../ui';
+import { Chevron, TableCell, TableRow } from '../../ui';
 import Coding from '../../datatypes/Coding';
 import Money from '../../datatypes/Money';
 import Item from './Item';
-const AddedItem = props => {
-  const { addedItem, parentSequences, level } = props;
+const AddedItem = ({
+  addedItem,
+  parentSequences,
+  parentId,
+  isCollapse = false,
+}) => {
   const itemSequences = [...parentSequences, addedItem.sequenceLinkId];
   const id = itemSequences.join('.');
+  const collapseId = parentSequences.length
+    ? parentId
+    : addedItem.sequenceLinkId;
+  const [rotate, setRotate] = useState(false);
+  const handleTableExpand = () => setRotate(!rotate);
+  const isExpandable =
+    parentSequences.length === 0 && addedItem.subItems.length !== 0;
   return (
     <>
-      <TableRow>
-        <TableCell data-testid="addedItems.sequence">{id}</TableCell>
-        <TableCell data-testid="addedItems.service">
+      <TableRow
+        className={`${isCollapse ? `collapse item-${parentId}` : ''} ${
+          isExpandable ? 'fw-bold table-expandable-row border-top' : ''
+        }`}
+        data-bs-target={`.item-${collapseId}`}
+        data-bs-toggle={'collapse'}
+        aria-controls={id}
+        aria-expanded="false"
+        onClick={handleTableExpand}
+      >
+        <TableCell
+          data-testid="addedItems.sequence"
+          className="col-md-2"
+          isAlignTop
+        >
+          {id}
+        </TableCell>
+        <TableCell
+          data-testid="addedItems.service"
+          className="col-md-2"
+          isAlignTop
+        >
           {addedItem.service && <Coding fhirData={addedItem.service} />}
         </TableCell>
-        <TableCell data-testid="addedItems.fee">
+        <TableCell data-testid="addedItems.fee" className="col-md-2" isAlignTop>
           {addedItem.fee && <Money fhirData={addedItem.fee} />}
         </TableCell>
-        <TableCell data-testid="addedItems.adjudication">
+        <TableCell
+          data-testid="addedItems.adjudication"
+          className="col-md-2"
+          isAlignTop
+        >
           {addedItem.adjudication.map((adjudication, idx) => (
             <div
               key={idx}
@@ -36,13 +71,28 @@ const AddedItem = props => {
             </div>
           ))}
         </TableCell>
+        {isExpandable ? (
+          <TableCell className="col-md-2" isAlignTop>
+            <button
+              className="fhir-container__Accordion__header-button w-100 p-0 border-0 rounded-1 collapsed text-dark bg-transparent shadow-none "
+              type="button"
+            >
+              <div className={` ${rotate ? ' header-rotate' : ''}`}>
+                <Chevron strokeColor={rotate ? '#2a6fd7' : '#6f83a9'} />
+              </div>
+            </button>
+          </TableCell>
+        ) : (
+          <TableCell style={{ width: '64px' }} className="col-md-2" />
+        )}
       </TableRow>
       {addedItem.subItems.map((subItem, idx) => (
         <Item
           key={idx}
           addedItem={subItem}
-          level={level + 1}
           parentSequences={itemSequences}
+          parentId={collapseId}
+          isCollapse
         />
       ))}
     </>

package/src/components/resources/ClaimResponse/AddedItems.js CHANGED Viewed

@@ -7,24 +7,20 @@ const AddedItems = props => {
   const { addedItems } = props;
   return (
-    <ValueSection label="Added Items" data-testid="addedItems">
+    <ValueSection label="Added Items" data-testid="addedItems" marginTop>
       <Table>
         <thead>
           <TableRow>
             <TableHeader>ID</TableHeader>
             <TableHeader>Service</TableHeader>
             <TableHeader>Fee</TableHeader>
-            <TableHeader expand>Adjudication</TableHeader>
+            <TableHeader>Adjudication</TableHeader>
+            <TableHeader></TableHeader>
           </TableRow>
         </thead>
-        <tbody>
+        <tbody className="border-top-0">
           {addedItems.map((item, idx) => (
-            <AddedItem
-              key={idx}
-              addedItem={item}
-              level={0}
-              parentSequences={[]}
-            />
+            <AddedItem key={idx} addedItem={item} parentSequences={[]} />
           ))}
         </tbody>
       </Table>