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

@@ -21,11 +21,11 @@ import {
   Header,
   MissingValue,
   Root,
-  Title,
-  Value,
   ValueSection,
   BadgeSecondary,
+  ValueSectionItem,
 } from '../../ui';
+import Accordion from '../../containers/Accordion';
 const commonDTO = fhirResource => {
   const id = _get(fhirResource, 'id');
@@ -285,8 +285,7 @@ const hasPaymentInfo = payment => {
   return Object.values(payment).filter(item => item).length > 0;
 };
-const ClaimResponse = props => {
-  const { fhirVersion, fhirResource } = props;
+const ClaimResponse = ({ fhirVersion, fhirResource, fhirIcons, onClick }) => {
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -314,88 +313,143 @@ const ClaimResponse = props => {
   const hasAddedItems = addedItems.length > 0;
   const hasPayment = hasPaymentInfo(payment);
+  const tableData = [
+    {
+      label: 'Created At',
+      testId: 'created',
+      data: created && <DateType fhirData={created} isBlack />,
+      status: created,
+    },
+    {
+      label: 'Request claim',
+      testId: 'request',
+      data: requestReference && <Reference fhirData={requestReference} />,
+      status: requestReference,
+    },
+    {
+      label: 'Disposition',
+      testId: 'disposition',
+      data: disposition,
+      status: disposition,
+    },
+    {
+      label: 'Total cost',
+      testId: 'totalCost',
+      data: totalCost && <Money fhirData={totalCost} />,
+      status: totalCost,
+    },
+    {
+      label: 'Total benefit',
+      testId: 'totalBenefit',
+      data: totalBenefit && <Money fhirData={totalBenefit} />,
+      status: totalBenefit,
+    },
+  ];
+  const paymentData = [
+    {
+      label: 'Type',
+      testId: 'payment.type',
+      data: payment.typeCoding ? (
+        <Coding fhirData={payment.typeCoding} />
+      ) : (
+        <MissingValue />
+      ),
+      status: true,
+    },
+    {
+      label: 'Amount',
+      testId: 'payment.amount',
+      data: payment.amount ? (
+        <Money fhirData={payment.amount} />
+      ) : (
+        <MissingValue />
+      ),
+      status: payment.amount,
+    },
+    {
+      label: 'Date',
+      testId: 'payment.date',
+      data: payment.date ? (
+        <DateType fhirData={payment.date} isBlack />
+      ) : (
+        <MissingValue />
+      ),
+      status: payment.date,
+    },
+    {
+      label: 'Reference',
+      testId: 'payment.ref',
+      data: payment.ref ? (
+        <Identifier fhirData={payment.ref} />
+      ) : (
+        <MissingValue />
+      ),
+      status: payment.ref,
+    },
+  ];
   return (
     <Root name="ClaimResponse">
-      <Header>
-        <Title>Claim response #{id}</Title>
-        {outcome && <Badge data-testid="outcome">{outcome}</Badge>}
-        {status && (
-          <BadgeSecondary data-testid="status">{status}</BadgeSecondary>
-        )}
-      </Header>
-      <Body>
-        {created && (
-          <Value label="Created At" data-testid="created">
-            <DateType fhirData={created} />
-          </Value>
-        )}
-        {requestReference && (
-          <Value label="Request claim" data-testid="request">
-            <Reference fhirData={requestReference} />
-          </Value>
-        )}
-        {disposition && (
-          <Value label="Disposition" data-testid="disposition">
-            {disposition}
-          </Value>
-        )}
-        {totalCost && (
-          <Value label="Total cost" data-testid="totalCost">
-            <Money fhirData={totalCost} />
-          </Value>
-        )}
-        {totalBenefit && (
-          <Value label="Total benefit" data-testid="totalBenefit">
-            <Money fhirData={totalBenefit} />
-          </Value>
-        )}
-        {isNotEmptyArray(totalCostsArr) && (
-          <ValueSection label="Total" data-testid="totalSection">
-            {totalCostsArr.map(
-              ({ category, amount }, i) =>
-                category && (
-                  <Value label={category} key={`total-value-${i}`}>
-                    <Money fhirData={amount} />
-                  </Value>
-                ),
+      <Accordion
+        headerContent={
+          <Header
+            resourceName="ClaimResponse"
+            title={`Claim response #${id}`}
+            badges={
+              <>
+                {outcome && <Badge data-testid="outcome">{outcome}</Badge>}
+                {status && (
+                  <BadgeSecondary data-testid="status">{status}</BadgeSecondary>
+                )}
+              </>
+            }
+            icon={fhirIcons}
+          />
+        }
+        bodyContent={
+          <Body tableData={tableData}>
+            {isNotEmptyArray(totalCostsArr) && (
+              <ValueSection label="Total" data-testid="totalSection" marginTop>
+                {totalCostsArr.map(
+                  ({ category, amount }, i) =>
+                    category && (
+                      <ValueSectionItem
+                        label={category}
+                        key={`total-value-${i}`}
+                      >
+                        <Money fhirData={amount} />
+                      </ValueSectionItem>
+                    ),
+                )}
+              </ValueSection>
+            )}
+            {hasPayment && (
+              <ValueSection
+                label="Payment"
+                data-testid="paymentSection"
+                marginTop
+              >
+                {paymentData.map(
+                  (item, index) =>
+                    item.status && (
+                      <ValueSectionItem
+                        key={`payment-item-${index}`}
+                        label={item.label}
+                        data-testid={item.testId}
+                      >
+                        {item.data}
+                      </ValueSectionItem>
+                    ),
+                )}
+              </ValueSection>
             )}
-          </ValueSection>
-        )}
-        {hasPayment && (
-          <ValueSection label="Payment" data-testid="paymentSection">
-            <Value label="Type" data-testid="payment.type">
-              {payment.typeCoding ? (
-                <Coding fhirData={payment.typeCoding} />
-              ) : (
-                <MissingValue />
-              )}
-            </Value>
-            <Value label="Amount" data-testid="payment.amount">
-              {payment.amount ? (
-                <Money fhirData={payment.amount} />
-              ) : (
-                <MissingValue />
-              )}
-            </Value>
-            <Value label="Date" data-testid="payment.date">
-              {payment.date ? (
-                <DateType fhirData={payment.date} />
-              ) : (
-                <MissingValue />
-              )}
-            </Value>
-            <Value label="Reference" data-testid="payment.ref">
-              {payment.ref ? (
-                <Identifier fhirData={payment.ref} />
-              ) : (
-                <MissingValue />
-              )}
-            </Value>
-          </ValueSection>
-        )}
-        {hasAddedItems && <AddedItems addedItems={addedItems} />}
-        {hasItems && <Items items={items} />}
-      </Body>
+            {hasAddedItems && <AddedItems addedItems={addedItems} />}
+            {hasItems && <Items items={items} />}
+          </Body>
+        }
+        onClick={onClick}
+      />
     </Root>
   );
 };

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

@@ -10,6 +10,8 @@ import example2ClaimResponseSTU3 from '../../../fixtures/stu3/resources/claimRes
 import example1ClaimResponseR4 from '../../../fixtures/r4/resources/claimResponse/example1.json';
 import example2ClaimResponseR4 from '../../../fixtures/r4/resources/claimResponse/example2.json';
 import example3ClaimResponseR4 from '../../../fixtures/r4/resources/claimResponse/example3.json';
+import fhirIcons from '../../../fixtures/example-icons';
+import ClaimResponseIcon from '../../../assets/containers/ClaimResponse/claim-response.svg';
 export default { title: 'Claim Response' };
@@ -19,6 +21,7 @@ export const ExampleDSTU2 = () => {
     <ClaimResponse
       fhirResource={fhirResource}
       fhirVersion={fhirVersions.DSTU2}
+      fhirIcons={require('../../../assets/containers/ClaimResponse/claim-response.svg')}
     />
   );
 };
@@ -29,6 +32,7 @@ export const Example1OfSTU3 = () => {
     <ClaimResponse
       fhirResource={fhirResource}
       fhirVersion={fhirVersions.STU3}
+      fhirIcons={ClaimResponseIcon}
     />
   );
 };
@@ -38,6 +42,7 @@ export const Example2OfSTU3 = () => {
     <ClaimResponse
       fhirResource={fhirResource}
       fhirVersion={fhirVersions.STU3}
+      fhirIcons={fhirIcons}
     />
   );
 };
@@ -45,13 +50,21 @@ export const Example2OfSTU3 = () => {
 export const Example1OfR4 = () => {
   const fhirResource = object('Resource', example1ClaimResponseR4);
   return (
-    <ClaimResponse fhirResource={fhirResource} fhirVersion={fhirVersions.R4} />
+    <ClaimResponse
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.R4}
+      fhirIcons={false}
+    />
   );
 };
 export const Example2OfR4 = () => {
   const fhirResource = object('Resource', example2ClaimResponseR4);
   return (
-    <ClaimResponse fhirResource={fhirResource} fhirVersion={fhirVersions.R4} />
+    <ClaimResponse
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.R4}
+      fhirIcons={'random text'}
+    />
   );
 };
 export const Example3OfR4 = () => {

package/src/components/resources/ClaimResponse/ClaimResponse.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 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 CHANGED Viewed

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

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

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

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

@@ -114,7 +114,7 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
-const Coverage = ({ fhirResource, fhirVersion, fhirIcons }) => {
+const Coverage = ({ fhirResource, fhirVersion, fhirIcons, onClick }) => {
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -232,6 +232,7 @@ const Coverage = ({ fhirResource, fhirVersion, fhirIcons }) => {
           />
         }
         bodyContent={<Body tableData={tableData} />}
+        onClick={onClick}
       />
     </Root>
   );

package/src/components/resources/Coverage/Coverage.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 Coverage from './Coverage';
 import fhirVersions from '../fhirResourceVersions';
@@ -151,4 +151,39 @@ describe('should render component correctly', () => {
     expect(getByTestId('type').textContent).toContain('extended healthcare');
     expect(queryAllByTestId('details').length).toEqual(0);
   });
+  it('should fire custom onClick function', () => {
+    const defaultProps = {
+      fhirResource: exampleCoverageR4,
+      fhirVersion: fhirVersions.R4,
+    };
+    const onClick = jest.fn();
+    const { getByRole } = render(
+      <Coverage {...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: exampleCoverageR4,
+      fhirVersion: fhirVersions.R4,
+    };
+    const onClick = 'test';
+    const { getByRole } = render(
+      <Coverage {...defaultProps} onClick={onClick} />,
+    );
+    const accordion = getByRole('button');
+    fireEvent.click(accordion);
+    const attribute = accordion.getAttribute('data-bs-toggle');
+    expect(attribute).toEqual('collapse');
+  });
 });