fhir-react 0.3.5 → 0.3.8

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 
 import ClaimResponse from './ClaimResponse';
 import fhirVersions from '../fhirResourceVersions';
@@ -10,8 +10,84 @@ import stu3Example2 from '../../../fixtures/stu3/resources/claimResponse/example
 import r4Example1 from '../../../fixtures/r4/resources/claimResponse/example1.json';
 import r4Example2 from '../../../fixtures/r4/resources/claimResponse/example2.json';
 import r4Example3 from '../../../fixtures/r4/resources/claimResponse/example3.json';
+import fhirIcons from '../../../fixtures/example-icons';
 
 describe('should render the ClaimResponse component properly', () => {
+  it('component without a fhirIcons props should render a default icon', () => {
+    const defaultProps = {
+      fhirVersion: fhirVersions.DSTU2,
+      fhirResource: dstu2Example1,
+    };
+
+    const { getByAltText } = render(<ClaimResponse {...defaultProps} />);
+    const headerIcon = getByAltText('claim response');
+
+    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: dstu2Example1,
+      fhirIcons: false,
+    };
+
+    const { getByTestId } = render(<ClaimResponse {...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: dstu2Example1,
+      fhirIcons: (
+        <img
+          src={require('../assets/containers/ClaimResponse/claim-response.svg')}
+          alt="clipboard with a symmetrical cross and a return arrow"
+        />
+      ),
+    };
+
+    const { getByAltText } = render(<ClaimResponse {...defaultProps} />);
+    const headerIcon = getByAltText(
+      'clipboard with a symmetrical cross and a return arrow',
+    );
+
+    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: dstu2Example1,
+      fhirIcons: fhirIcons,
+    };
+
+    const { getByAltText } = render(<ClaimResponse {...defaultProps} />);
+    const headerIcon = getByAltText(
+      'clipboard with a symmetrical cross and a return arrow',
+    );
+
+    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: dstu2Example1,
+      fhirIcons: avatarSrc,
+    };
+
+    const { getByAltText } = render(<ClaimResponse {...defaultProps} />);
+    const headerIcon = getByAltText('header icon');
+
+    expect(headerIcon.getAttribute('src')).toContain(avatarSrc);
+  });
+
   it('with DSTU2 source data', () => {
     const defaultProps = {
       fhirResource: dstu2Example1,
@@ -262,4 +338,39 @@ describe('should render the ClaimResponse component properly', () => {
       ' (expense)',
     ]);
   });
+
+  it('should fire custom onClick function', () => {
+    const defaultProps = {
+      fhirResource: r4Example3,
+      fhirVersion: fhirVersions.R4,
+    };
+
+    const onClick = jest.fn();
+    const { getAllByRole } = render(
+      <ClaimResponse {...defaultProps} onClick={onClick} />,
+    );
+    const accordion = getAllByRole('button')[0];
+    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: r4Example3,
+      fhirVersion: fhirVersions.R4,
+    };
+
+    const onClick = 'test';
+    const { getAllByRole } = render(
+      <ClaimResponse {...defaultProps} onClick={onClick} />,
+    );
+    const accordion = getAllByRole('button')[0];
+    fireEvent.click(accordion);
+
+    const attribute = accordion.getAttribute('data-bs-toggle');
+    expect(attribute).toEqual('collapse');
+  });
 });

package/src/components/resources/ClaimResponse/Item.js

@@ -1,20 +1,40 @@
-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';
 
-const Item = props => {
-  const { item, parentSequences, level } = props;
-
+const Item = ({ item, parentSequences, parentId, isCollapse = false }) => {
   const itemSequences = [...parentSequences, item.sequenceLinkId];
   const id = itemSequences.join('.');
+  const collapseId = parentSequences.length ? parentId : item.sequence;
+
+  const [rotate, setRotate] = useState(false);
+  const handleTableExpand = () => setRotate(!rotate);
+
+  const isExpandable =
+    parentSequences.length === 0 && item.subItems.length !== 0;
 
   return (
     <>
-      <TableRow>
-        <TableCell data-testid="items.sequence">{id}</TableCell>
-        <TableCell data-testid="items.adjudication">
+      <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="items.sequence"
+          className="col-md-2 align-self-start"
+          isAlignTop
+        >
+          {id}
+        </TableCell>
+        <TableCell data-testid="items.adjudication" className="col-md-8">
           {item.adjudication.map((adjudication, idx) => (
             <div
               key={idx}
@@ -29,13 +49,28 @@ const Item = 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>
       {item.subItems.map((subItem, idx) => (
         <Item
           key={idx}
           item={subItem}
-          level={level + 1}
           parentSequences={itemSequences}
+          parentId={collapseId}
+          isCollapse
         />
       ))}
     </>

package/src/components/resources/ClaimResponse/Items.js

@@ -7,17 +7,18 @@ const Items = props => {
   const { items } = props;
 
   return (
-    <ValueSection label="Items" data-testid="items">
+    <ValueSection label="Items" data-testid="items" marginTop>
       <Table>
         <thead>
           <TableRow>
             <TableHeader>ID</TableHeader>
-            <TableHeader expand>Adjudication</TableHeader>
+            <TableHeader>Adjudication</TableHeader>
+            <TableHeader></TableHeader>
           </TableRow>
         </thead>
-        <tbody>
+        <tbody className="border-top-0">
           {items.map((item, idx) => (
-            <Item key={idx} item={item} level={0} parentSequences={[]} />
+            <Item key={idx} item={item} parentSequences={[]} />
           ))}
         </tbody>
       </Table>

package/src/components/resources/Condition/Condition.js

@@ -86,9 +86,8 @@ const resourceDTO = (fhirVersion, fhirResource) => {
       throw Error('Unrecognized the fhir version property type.');
   }
 };
-function Condition(props) {
-  const { fhirResource, fhirVersion, fhirIcons } = props;
 
+const Condition = ({ fhirResource, fhirVersion, fhirIcons, onClick }) => {
   const {
     codeText,
     severityText,
@@ -157,10 +156,11 @@ function Condition(props) {
           />
         }
         bodyContent={<Body tableData={tableData} />}
+        onClick={onClick}
       />
     </Root>
   );
-}
+};
 
 Condition.propTypes = {
   fhirResource: PropTypes.shape({}).isRequired,

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

@@ -8,7 +8,7 @@ import exampleConditionSTU3 from '../../../fixtures/stu3/resources/condition/exa
 import exampleConditionSeverity from '../../../fixtures/dstu2/resources/condition/example-severity.json';
 import exampleConditionSeveritySTU3 from '../../../fixtures/stu3/resources/condition/example-severity.json';
 import fhirVersions from '../fhirResourceVersions';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 import fhirIcons from '../../../fixtures/example-icons';
 
 describe('should render component correctly', () => {
@@ -108,9 +108,7 @@ describe('should render component correctly', () => {
     expect(getByTestId('clinicalStatus').textContent).toEqual('active');
     expect(getByTestId('severity').textContent).toEqual('Medium severity');
     expect(getByTestId('onsetDate').textContent).toEqual('8/24/2015');
-    expect(getByTestId('asserter').textContent).toEqual(
-      'MOORE, NICKPractitioner/f8fedcd9e6e565a21f457909',
-    );
+    expect(getByTestId('asserter').textContent).toEqual('MOORE, NICK');
   });
 
   it('STU3 - without severity field', () => {
@@ -191,4 +189,39 @@ describe('should render component correctly', () => {
     expect(getByTestId('asserter').textContent).toEqual('Practitioner/f201');
     expect(getByTestId('dateRecorded').textContent).toEqual('4/4/2013');
   });
+
+  it('should fire custom onClick function', () => {
+    const defaultProps = {
+      fhirResource: example3ConditionSeverityR4,
+      fhirVersion: fhirVersions.R4,
+    };
+
+    const onClick = jest.fn();
+    const { getByRole } = render(
+      <Condition {...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: example3ConditionSeverityR4,
+      fhirVersion: fhirVersions.R4,
+    };
+
+    const onClick = 'test';
+    const { getByRole } = render(
+      <Condition {...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/Coverage/Coverage.js

@@ -6,8 +6,9 @@ import Reference from '../../datatypes/Reference';
 import Coding from '../../datatypes/Coding';
 import UnhandledResourceDataStructure from '../UnhandledResourceDataStructure';
 import fhirVersions from '../fhirResourceVersions';
-import { Root, Header, Title, Body, Value } from '../../ui';
+import { Root, Header, Body, Value } from '../../ui';
 import Identifier from '../../datatypes/Identifier';
+import Accordion from '../../containers/Accordion';
 
 const commonDTO = fhirResource => {
   const identifier = _get(fhirResource, 'identifier.0');
@@ -113,8 +114,7 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
 
-const Coverage = props => {
-  const { fhirResource, fhirVersion } = props;
+const Coverage = ({ fhirResource, fhirVersion, fhirIcons, onClick }) => {
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -138,74 +138,102 @@ const Coverage = props => {
   } = fhirResourceData;
   const issuerReferenceType = _get(issuer, 'reference');
   const issuerIdentifierType = _get(issuer, 'identifier');
+
+  const tableData = [
+    {
+      label: 'Issuer',
+      testId: 'issuer',
+      data: issuerReferenceType && <Reference fhirData={issuer} />,
+      status: issuerReferenceType,
+    },
+    {
+      label: 'Issuer',
+      testId: 'issuer',
+      data: issuerIdentifierType && <Identifier fhirData={issuer.identifier} />,
+      status: issuerIdentifierType,
+    },
+    {
+      label: 'PlanId',
+      testId: 'planId',
+      data: planId,
+      status: planId,
+    },
+    {
+      label: 'Coverage',
+      testId: '',
+      data: period && (
+        <>
+          {coverageFrom && (
+            <span data-testid="coverageFrom">from: {coverageFrom}</span>
+          )}{' '}
+          {coverageTo && <span data-testid="coverageTo">to: {coverageTo}</span>}
+        </>
+      ),
+      status: period,
+    },
+    {
+      label: 'Type of coverage',
+      testId: 'type',
+      data: type && <Coding fhirData={type} />,
+      status: type,
+    },
+    {
+      label: 'Details',
+      testId: 'details',
+      data: hasDetails && (
+        <>
+          <span>{details.planDescription}</span>
+          {details.classDescription && (
+            <>
+              {' | '}
+              <span>{details.classDescription}</span>
+            </>
+          )}
+        </>
+      ),
+      status: hasDetails,
+    },
+    {
+      label: 'Extension',
+      testId: 'extensions',
+      data:
+        hasExtension &&
+        extension.map((item, i) => {
+          const coding = Array.isArray(item.coding) ? item.coding : [];
+
+          return (
+            <span key={`item-${i}`}>
+              {item.name && <span>{item.name}</span>}
+              {coding.map((code, j) => (
+                <Coding key={`item-${j}`} fhirData={code} />
+              ))}
+            </span>
+          );
+        }),
+      status: hasExtension,
+    },
+  ];
+
   return (
     <Root name="coverage">
-      <Header>
-        {identifier && (
-          <Title>
-            Coverage <Identifier fhirData={identifier} />
-          </Title>
-        )}
-      </Header>
-      <Body>
-        {issuerReferenceType && (
-          <Value label="Issuer" data-testid="issuer">
-            <Reference fhirData={issuer} />
-          </Value>
-        )}
-        {issuerIdentifierType && (
-          <Value label="Issuer" data-testid="issuer">
-            <Identifier fhirData={issuer.identifier} />
-          </Value>
-        )}
-        {planId && (
-          <Value label="PlanId" data-testid="planId">
-            {planId}
-          </Value>
-        )}
-        {period && (
-          <Value label="Coverage">
-            {coverageFrom && (
-              <span data-testid="coverageFrom">from: {coverageFrom}</span>
-            )}{' '}
-            {coverageTo && (
-              <span data-testid="coverageTo">to: {coverageTo}</span>
-            )}
-          </Value>
-        )}
-        {type && (
-          <Value label="Type of coverage" data-testid="type">
-            <Coding fhirData={type} />
-          </Value>
-        )}
-        {hasDetails && (
-          <Value label="Details" data-testid="details">
-            <span>{details.planDescription}</span>
-            {details.classDescription && (
-              <>
-                {' | '}
-                <span>{details.classDescription}</span>
-              </>
-            )}
-          </Value>
-        )}
-        {hasExtension && (
-          <Value label="Extension" data-testid="extensions">
-            {extension.map((item, i) => {
-              const coding = Array.isArray(item.coding) ? item.coding : [];
-
-              return (
-                <span key={`item-${i}`}>
-                  {item.name && <span>{item.name}</span>}
-                  {coding.map((code, j) => (
-                    <Coding key={`item-${j}`} fhirData={code} />
-                  ))}
-                </span>
-              );
-            })}
-          </Value>
-        )}
-      </Body>
+      <Accordion
+        headerContent={
+          <Header
+            resourceName="Coverage"
+            additionalContent={
+              identifier && (
+                <Value label="Identifier">
+                  <Identifier fhirData={identifier} valueOnly noCursive />
+                </Value>
+              )
+            }
+            title="Coverage"
+            icon={fhirIcons}
+          />
+        }
+        bodyContent={<Body tableData={tableData} />}
+        onClick={onClick}
+      />
     </Root>
   );
 };

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

@@ -9,38 +9,64 @@ import exampleCoverageStu3 from '../../../fixtures/stu3/resources/coverage/examp
 import example2CoverageStu3 from '../../../fixtures/stu3/resources/coverage/example2.json';
 import exampleCoverageR4 from '../../../fixtures/r4/resources/coverage/example1.json';
 import example2CoverageR4 from '../../../fixtures/r4/resources/coverage/example2.json';
+import fhirIcons from '../../../fixtures/example-icons';
+import CoverageIcon from '../../../assets/containers/Coverage/coverage.svg';
 
 export default { title: 'Coverage' };
 
 export const DefaultVisualizationDSTU2 = () => {
   const fhirResource = object('Resource', exampleCoverageDstu2);
   return (
-    <Coverage fhirVersion={fhirVersions.DSTU2} fhirResource={fhirResource} />
+    <Coverage
+      fhirVersion={fhirVersions.DSTU2}
+      fhirResource={fhirResource}
+      fhirIcons={require('../../../assets/containers/Coverage/coverage.svg')}
+    />
   );
 };
 
 export const ExampleOfSTU3 = () => {
   const fhirResource = object('Resource', exampleCoverageStu3);
   return (
-    <Coverage fhirVersion={fhirVersions.STU3} fhirResource={fhirResource} />
+    <Coverage
+      fhirVersion={fhirVersions.STU3}
+      fhirResource={fhirResource}
+      fhirIcons={CoverageIcon}
+    />
   );
 };
 
 export const Example2OfSTU3 = () => {
   const fhirResource = object('Resource', example2CoverageStu3);
   return (
-    <Coverage fhirVersion={fhirVersions.STU3} fhirResource={fhirResource} />
+    <Coverage
+      fhirVersion={fhirVersions.STU3}
+      fhirResource={fhirResource}
+      fhirIcons={fhirIcons}
+    />
   );
 };
 
 export const ExampleOfR4 = () => {
   const fhirResource = object('Resource', exampleCoverageR4);
-  return <Coverage fhirResource={fhirResource} fhirVersion={fhirVersions.R4} />;
+  return (
+    <Coverage
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.R4}
+      fhirIcons={false}
+    />
+  );
 };
 
 export const Example2OfR4 = () => {
   const fhirResource = object('Resource', example2CoverageR4);
-  return <Coverage fhirResource={fhirResource} fhirVersion={fhirVersions.R4} />;
+  return (
+    <Coverage
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.R4}
+      fhirIcons={'random text'}
+    />
+  );
 };
 
 export const ExampleWithoutFhirVersionProperty = () => {