fhir-react 0.3.7 → 0.3.10

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { object } from '@storybook/addon-knobs';
+import { defaultArgTypes } from '../../defaultArgTypes';
 
 import Claim from './Claim';
 import fhirVersions from '../fhirResourceVersions';
@@ -16,64 +16,51 @@ import fhirIcons from '../../../fixtures/example-icons';
 
 export default {
   title: 'Claim',
+  component: Claim,
+  argTypes: {
+    ...defaultArgTypes,
+  },
 };
 
-export const ExampleOfDSTU2 = () => {
-  const fhirResource = object('Resource', dstu2Example1);
-  return (
-    <Claim
-      fhirVersion={fhirVersions.DSTU2}
-      fhirResource={fhirResource}
-      fhirIcons={require('../../../assets/containers/Claim/claim.svg')}
-    />
-  );
+const Template = args => <Claim {...args} />;
+
+export const ExampleOfDSTU2 = Template.bind({});
+ExampleOfDSTU2.args = {
+  fhirVersion: fhirVersions.DSTU2,
+  fhirResource: dstu2Example1,
+  fhirIcons: require('../../../assets/containers/Claim/claim.svg'),
 };
 
-export const ExampleOfSTU3 = () => {
-  const fhirResource = object('Resource', stu3Example1);
-  return (
-    <Claim
-      fhirVersion={fhirVersions.STU3}
-      fhirResource={fhirResource}
-      fhirIcons={ClaimIcon}
-    />
-  );
+export const ExampleOfSTU3 = Template.bind({});
+ExampleOfSTU3.args = {
+  fhirVersion: fhirVersions.STU3,
+  fhirResource: stu3Example1,
+  fhirIcons: ClaimIcon,
 };
 
-export const Example2OfSTU3 = () => {
-  const fhirResource = object('Resource', stu3Example2);
-  return (
-    <Claim
-      fhirVersion={fhirVersions.STU3}
-      fhirResource={fhirResource}
-      fhirIcons={fhirIcons}
-    />
-  );
+export const Example2OfSTU3 = Template.bind({});
+Example2OfSTU3.args = {
+  fhirVersion: fhirVersions.STU3,
+  fhirResource: stu3Example2,
+  fhirIcons: fhirIcons,
 };
 
-export const Example3OfSTU3 = () => {
-  const fhirResource = object('Resource', stu3Example3);
-  return (
-    <Claim
-      fhirVersion={fhirVersions.STU3}
-      fhirResource={fhirResource}
-      fhirIcons={false}
-    />
-  );
+export const Example3OfSTU3 = Template.bind({});
+Example3OfSTU3.args = {
+  fhirVersion: fhirVersions.STU3,
+  fhirResource: stu3Example3,
+  fhirIcons: false,
 };
 
-export const Example1OfR4 = () => {
-  const fhirResource = object('Resource', r4Example1);
-  return (
-    <Claim
-      fhirVersion={fhirVersions.R4}
-      fhirResource={fhirResource}
-      fhirIcons={'random text'}
-    />
-  );
+export const Example1OfR4 = Template.bind({});
+Example1OfR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: r4Example1,
+  fhirIcons: 'random text',
 };
 
-export const Example2OfR4 = () => {
-  const fhirResource = object('Resource', r4Example2);
-  return <Claim fhirVersion={fhirVersions.R4} fhirResource={fhirResource} />;
+export const Example2OfR4 = Template.bind({});
+Example2OfR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: r4Example2,
 };

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

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

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

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

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

@@ -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,13 @@ 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,
+  rawOnClick,
+}) => {
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -314,88 +319,144 @@ 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}
+        rawOnClick={rawOnClick}
+      />
     </Root>
   );
 };

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { object } from '@storybook/addon-knobs';
+import { defaultArgTypes } from '../../defaultArgTypes';
 
 import fhirVersions from '../fhirResourceVersions';
 import ClaimResponse from './ClaimResponse';
@@ -10,53 +10,56 @@ 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' };
+export default {
+  title: 'ClaimResponse',
+  component: ClaimResponse,
+  argTypes: {
+    ...defaultArgTypes,
+  },
+};
+
+const Template = args => <ClaimResponse {...args} />;
 
-export const ExampleDSTU2 = () => {
-  const fhirResource = object('Resource', exampleClaimResponseDSTU2);
-  return (
-    <ClaimResponse
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.DSTU2}
-    />
-  );
+export const ExampleDSTU2 = Template.bind({});
+ExampleDSTU2.args = {
+  fhirVersion: fhirVersions.DSTU2,
+  fhirResource: exampleClaimResponseDSTU2,
+  fhirIcons: require('../../../assets/containers/ClaimResponse/claim-response.svg'),
 };
 
-export const Example1OfSTU3 = () => {
-  const fhirResource = object('Resource', exampleClaimResponseSTU3);
-  return (
-    <ClaimResponse
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.STU3}
-    />
-  );
+export const Example1OfSTU3 = Template.bind({});
+Example1OfSTU3.args = {
+  fhirVersion: fhirVersions.STU3,
+  fhirResource: exampleClaimResponseSTU3,
+  fhirIcons: ClaimResponseIcon,
 };
-export const Example2OfSTU3 = () => {
-  const fhirResource = object('Resource', example2ClaimResponseSTU3);
-  return (
-    <ClaimResponse
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.STU3}
-    />
-  );
+
+export const Example2OfSTU3 = Template.bind({});
+Example2OfSTU3.args = {
+  fhirVersion: fhirVersions.STU3,
+  fhirResource: example2ClaimResponseSTU3,
+  fhirIcons: fhirIcons,
 };
 
-export const Example1OfR4 = () => {
-  const fhirResource = object('Resource', example1ClaimResponseR4);
-  return (
-    <ClaimResponse fhirResource={fhirResource} fhirVersion={fhirVersions.R4} />
-  );
+export const Example1OfR4 = Template.bind({});
+Example1OfR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: example1ClaimResponseR4,
+  fhirIcons: false,
 };
-export const Example2OfR4 = () => {
-  const fhirResource = object('Resource', example2ClaimResponseR4);
-  return (
-    <ClaimResponse fhirResource={fhirResource} fhirVersion={fhirVersions.R4} />
-  );
+
+export const Example2OfR4 = Template.bind({});
+Example2OfR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: example2ClaimResponseR4,
+  fhirIcons: 'random text',
 };
-export const Example3OfR4 = () => {
-  const fhirResource = object('Resource', example3ClaimResponseR4);
-  return (
-    <ClaimResponse fhirResource={fhirResource} fhirVersion={fhirVersions.R4} />
-  );
+
+export const Example3OfR4 = Template.bind({});
+Example3OfR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: example3ClaimResponseR4,
 };