fhir-react 0.3.7 → 0.3.8

package/src/components/resources/List/DrugTierDefinitionExtension.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import _get from 'lodash/get';
 import { getExtension } from './utils';
-import { ValueSection, Value } from '../../ui';
+import { ValueSection, ValueSectionItem } from '../../ui';
 import CodeableConcept from '../../datatypes/CodeableConcept';
 import Money from '../../datatypes/Money';
 
@@ -82,48 +82,92 @@ const DrugTierDefinitionExtension = props => {
     coinsuranceOption,
   } = dto(drugTierDefinitionExtension);
 
+  const drugData = [
+    {
+      label: 'Drug Tier ID',
+      testId: 'drugTierID',
+      data: drugTierID && <CodeableConcept fhirData={drugTierID} />,
+      status: drugTierID,
+    },
+    {
+      label: 'Mail order',
+      testId: 'mailOrder',
+      data: mailOrder ? 'yes' : 'no',
+      status: mailOrder,
+    },
+  ];
+
+  const costData = [
+    {
+      label: 'Pharmacy Type',
+      testId: 'pharmacyType',
+      data: pharmacyType && <CodeableConcept fhirData={pharmacyType} />,
+      status: pharmacyType,
+    },
+    {
+      label: 'Copay Amount',
+      testId: 'copayAmount',
+      data: copayAmount && <Money fhirData={copayAmount} />,
+      status: copayAmount,
+    },
+    {
+      label: 'Copay Option',
+      testId: 'copayOption',
+      data: copayOption && <CodeableConcept fhirData={copayOption} />,
+      status: copayOption,
+    },
+    {
+      label: 'Coinsurance Rate',
+      testId: 'coinsuranceRate',
+      data: coinsuranceRate,
+      status: coinsuranceRate === 0 || coinsuranceRate,
+    },
+    {
+      label: 'Coinsurance Option',
+      testId: 'coinsuranceOption',
+      data: coinsuranceOption && (
+        <CodeableConcept fhirData={coinsuranceOption} />
+      ),
+      status: coinsuranceOption,
+    },
+  ];
+
   return (
     hasExtensions && (
       <ValueSection
         label="Drug Tier Definition"
         data-testid="drugTierDefinition"
+        marginTop
       >
-        {drugTierID && (
-          <Value label="Drug Tier ID" data-testid="drugTierID">
-            <CodeableConcept fhirData={drugTierID} />
-          </Value>
-        )}
-        {mailOrder && (
-          <Value label="Mail order" data-testid="mailOrder">
-            {mailOrder ? 'yes' : 'no'}
-          </Value>
+        {drugData.map(
+          (item, index) =>
+            item.status && (
+              <ValueSectionItem
+                key={`drug-item-${index}`}
+                label={item.label}
+                data-testid={item.testId}
+              >
+                {item.data}
+              </ValueSectionItem>
+            ),
         )}
         {hasConstSharing && (
-          <ValueSection label="Cost sharing" data-testid="costSharing">
-            {pharmacyType && (
-              <Value label="Pharmacy Type" data-testid="pharmacyType">
-                <CodeableConcept fhirData={pharmacyType} />
-              </Value>
-            )}
-            {copayAmount && (
-              <Value label="Copay Amount" data-testid="copayAmount">
-                <Money fhirData={copayAmount} />
-              </Value>
-            )}
-            {copayOption && (
-              <Value label="Copay Option" data-testid="copayOption">
-                <CodeableConcept fhirData={copayOption} />
-              </Value>
-            )}
-            {(coinsuranceRate === 0 || coinsuranceRate) && (
-              <Value label="Coinsurance Rate" data-testid="coinsuranceRate">
-                {coinsuranceRate}
-              </Value>
-            )}
-            {coinsuranceOption && (
-              <Value label="Coinsurance Option" data-testid="coinsuranceOption">
-                <CodeableConcept fhirData={coinsuranceOption} />
-              </Value>
+          <ValueSection
+            label="Cost sharing"
+            data-testid="costSharing"
+            marginTop
+          >
+            {costData.map(
+              (item, index) =>
+                item.status && (
+                  <ValueSectionItem
+                    key={`cost-item-${index}`}
+                    label={item.label}
+                    data-testid={item.testId}
+                  >
+                    {item.data}
+                  </ValueSectionItem>
+                ),
             )}
           </ValueSection>
         )}

package/src/components/resources/List/Entries.js

@@ -16,7 +16,7 @@ import Reference from '../../datatypes/Reference';
 const Entries = ({ fhirData: items = [] }) => {
   if (items.length === 0) return null;
   return (
-    <ValueSection label="Entries" data-testid="entries">
+    <ValueSection label="Entries" data-testid="entries" marginTop>
       <Table>
         <thead>
           <TableRow>
@@ -26,7 +26,7 @@ const Entries = ({ fhirData: items = [] }) => {
             <TableHeader>Status</TableHeader>
           </TableRow>
         </thead>
-        <tbody>
+        <tbody className="border-top-0">
           {items.map((item, idx) => (
             <Entry key={idx} item={item} />
           ))}
@@ -50,7 +50,7 @@ const Entry = props => {
           <Reference fhirData={entry} />
         </TableCell>
         <TableCell data-testid="items.date">
-          {date ? <Date fhirData={date} /> : <MissingValue />}
+          {date ? <Date fhirData={date} isBlack /> : <MissingValue />}
         </TableCell>
         <TableCell data-testid="items.isDeleted">
           {deleted === true ? 'yes' : 'no'}

package/src/components/resources/List/List.js

@@ -8,11 +8,10 @@ import { getExtension } from './utils';
 import {
   Root,
   Header,
-  Title,
-  Value,
   Body,
   ValueSection,
   Badge,
+  ValueSectionItem,
 } from '../../ui';
 import Date from '../../datatypes/Date';
 import Reference from '../../datatypes/Reference';
@@ -20,6 +19,7 @@ import Entries from './Entries';
 import Identifier from '../../datatypes/Identifier/Identifier';
 import CodeableConcept from '../../datatypes/CodeableConcept';
 import DrugTierDefinitionExtension from './DrugTierDefinitionExtension';
+import Accordion from '../../containers/Accordion';
 
 const commonDTO = fhirResource => {
   const id = _get(fhirResource, 'id');
@@ -125,8 +125,13 @@ const resourceDTO = (fhirVersion, fhirResource, withDaVinciPDex) => {
   }
 };
 
-const List = props => {
-  const { fhirResource, fhirVersion, withDaVinciPDex = false } = props;
+const List = ({
+  fhirResource,
+  fhirVersion,
+  withDaVinciPDex = false,
+  fhirIcons,
+  onClick,
+}) => {
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource, withDaVinciPDex);
@@ -156,95 +161,137 @@ const List = props => {
     usdfPlanIDType,
   } = fhirResourceData;
 
+  const tableData = [
+    {
+      label: 'Identifier',
+      testId: 'identifier',
+      data:
+        identifier &&
+        identifier.map((id, index) => (
+          <div key={`identifier-${index}`}>
+            <Identifier fhirData={id} />
+          </div>
+        )),
+      status: identifier,
+    },
+    {
+      label: 'Mode',
+      testId: 'mode',
+      data: mode,
+      status: mode,
+    },
+    {
+      label: 'code',
+      testId: 'code',
+      data: code && <CodeableConcept fhirData={code} />,
+      status: code,
+    },
+    {
+      label: 'Subject',
+      testId: 'subject',
+      data: subject && <Reference fhirData={subject} />,
+      status: subject,
+    },
+    {
+      label: 'Date',
+      testId: 'date',
+      data: date && <Date fhirData={date} isBlack />,
+      status: date,
+    },
+    {
+      label: 'Source',
+      testId: 'source',
+      data: source && <Reference fhirData={source} />,
+      status: source,
+    },
+  ];
+
+  const extensionData = [
+    {
+      label: 'Network',
+      testId: 'usdfNetwork',
+      data: usdfNetwork,
+      status: usdfNetwork,
+    },
+    {
+      label: 'Summary URL',
+      testId: 'usdfSummaryURL',
+      data: usdfSummaryURL,
+      status: usdfSummaryURL,
+    },
+    {
+      label: 'Formulary URL',
+      testId: 'usdfFormularyURL',
+      data: usdfFormularyURL,
+      status: usdfFormularyURL,
+    },
+    {
+      label: 'Email Plan Contact',
+      testId: 'usdfEmailPlanContact',
+      data: usdfEmailPlanContact,
+      status: usdfEmailPlanContact,
+    },
+    {
+      label: 'Marketing URL',
+      testId: 'usdfMarketingURL',
+      data: usdfMarketingURL,
+      status: usdfMarketingURL,
+    },
+    {
+      label: 'Plan ID Type',
+      testId: 'usdfPlanIDType',
+      data: usdfPlanIDType,
+      status: usdfPlanIDType,
+    },
+  ];
+
   return (
     <Root name="List">
-      <Header>
-        <Title>
-          {title || 'List'} {id && id}{' '}
-          {status && <Badge data-testid="status">{status}</Badge>}
-        </Title>
-      </Header>
-      <Body>
-        {identifier && (
-          <Value label="Identifier" data-testid="identifier">
-            {identifier.map((id, index) => (
-              <div key={`identifier-${index}`}>
-                <Identifier fhirData={id} />
-              </div>
-            ))}
-          </Value>
-        )}
-        {mode && (
-          <Value label="Mode" data-testid="mode">
-            {mode}
-          </Value>
-        )}
-        {code && (
-          <Value label="code" data-testid="code">
-            <CodeableConcept fhirData={code} />
-          </Value>
-        )}
-        {subject && (
-          <Value label="Subject" data-testid="subject">
-            <Reference fhirData={subject} />
-          </Value>
-        )}
-        {date && (
-          <Value label="Date" data-testid="date">
-            <Date fhirData={date} />
-          </Value>
-        )}
-        {source && (
-          <Value label="Source" data-testid="source">
-            <Reference fhirData={source} />
-          </Value>
-        )}
-        {entry && <Entries fhirData={entry} />}
+      <Accordion
+        headerContent={
+          <Header
+            resourceName="List"
+            title={`${title || 'List'} ${id && id} `}
+            badges={status && <Badge data-testid="status">{status}</Badge>}
+            icon={fhirIcons}
+          />
+        }
+        bodyContent={
+          <Body tableData={tableData}>
+            {entry && <Entries fhirData={entry} />}
 
-        {hasExtensions && (
-          <ValueSection label="USDF extensions" data-testid="usdfExtensions">
-            {usdfDrugTierDefinition && (
-              <DrugTierDefinitionExtension
-                drugTierDefinitionExtension={usdfDrugTierDefinition}
-                data-testid="usdfDrugTierDefinition"
-              />
-            )}
-            {usdfNetwork && (
-              <Value label="Network" data-testid="usdfNetwork">
-                {usdfNetwork}
-              </Value>
-            )}
-            {usdfSummaryURL && (
-              <Value label="Summary URL" data-testid="usdfSummaryURL">
-                {usdfSummaryURL}
-              </Value>
-            )}
-            {usdfFormularyURL && (
-              <Value label="Formulary URL" data-testid="usdfFormularyURL">
-                {usdfFormularyURL}
-              </Value>
-            )}
-            {usdfEmailPlanContact && (
-              <Value
-                label="Email Plan Contact"
-                data-testid="usdfEmailPlanContact"
+            {hasExtensions && (
+              <ValueSection
+                label="USDF extensions"
+                data-testid="usdfExtensions"
+                marginTop
               >
-                {usdfEmailPlanContact}
-              </Value>
-            )}
-            {usdfMarketingURL && (
-              <Value label="Marketing URL" data-testid="usdfMarketingURL">
-                {usdfMarketingURL}
-              </Value>
-            )}
-            {usdfPlanIDType && (
-              <Value label="Plan ID Type" data-testid="usdfPlanIDType">
-                {usdfPlanIDType}
-              </Value>
+                {usdfDrugTierDefinition && (
+                  <DrugTierDefinitionExtension
+                    drugTierDefinitionExtension={usdfDrugTierDefinition}
+                    data-testid="usdfDrugTierDefinition"
+                  />
+                )}
+                <ValueSection marginTop>
+                  {extensionData.map(
+                    (item, index) =>
+                      item.status && (
+                        <ValueSectionItem
+                          key={`extension-item-${index}`}
+                          label={item.label}
+                          data-testid={item.testId}
+                        >
+                          {item.data}
+                        </ValueSectionItem>
+                      ),
+                  )}
+                </ValueSection>
+              </ValueSection>
             )}
-          </ValueSection>
-        )}
-      </Body>
+          </Body>
+        }
+        onClick={onClick}
+      />
     </Root>
   );
 };

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

@@ -14,32 +14,65 @@ import example1R4 from '../../../fixtures/r4/resources/list/example1.json';
 import example2R4 from '../../../fixtures/r4/resources/list/example2.json';
 import example3R4 from '../../../fixtures/r4/resources/list/example3.json';
 
+import fhirIcons from '../../../fixtures/example-icons';
+import ListIcon from '../../../assets/containers/List/list.svg';
+
 export default {
   title: 'List',
 };
 
 export const DefaultVisualizationDSTU2 = () => {
   const fhirResource = object('Resource', example1Dstu2);
-  return <List fhirVersion={fhirVersions.DSTU2} fhirResource={fhirResource} />;
+  return (
+    <List
+      fhirVersion={fhirVersions.DSTU2}
+      fhirResource={fhirResource}
+      fhirIcons={require('../../../assets/containers/List/list.svg')}
+    />
+  );
 };
 
 export const Example2DSTU2 = () => {
   const fhirResource = object('Resource', example2Dstu2);
-  return <List fhirVersion={fhirVersions.DSTU2} fhirResource={fhirResource} />;
+  return (
+    <List
+      fhirVersion={fhirVersions.DSTU2}
+      fhirResource={fhirResource}
+      fhirIcons={ListIcon}
+    />
+  );
 };
 export const Example3DSTU2 = () => {
   const fhirResource = object('Resource', example3Dstu2);
-  return <List fhirVersion={fhirVersions.DSTU2} fhirResource={fhirResource} />;
+  return (
+    <List
+      fhirVersion={fhirVersions.DSTU2}
+      fhirResource={fhirResource}
+      fhirIcons={fhirIcons}
+    />
+  );
 };
 
 export const DefaultVisualizationSTU3 = () => {
   const fhirResource = object('Resource', example1Stu3);
-  return <List fhirVersion={fhirVersions.STU3} fhirResource={fhirResource} />;
+  return (
+    <List
+      fhirVersion={fhirVersions.STU3}
+      fhirResource={fhirResource}
+      fhirIcons={false}
+    />
+  );
 };
 
 export const Example2STU3 = () => {
   const fhirResource = object('Resource', example2Stu3);
-  return <List fhirVersion={fhirVersions.STU3} fhirResource={fhirResource} />;
+  return (
+    <List
+      fhirVersion={fhirVersions.STU3}
+      fhirResource={fhirResource}
+      fhirIcons={'random text'}
+    />
+  );
 };
 export const Example3STU3 = () => {
   const fhirResource = object('Resource', example3Stu3);

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 
 import { fhirVersions } from '../../../index';
 
@@ -7,8 +7,79 @@ import List from './List';
 
 import example1Dstu2 from '../../../fixtures/dstu2/resources/list/example1.json';
 import example2R4 from '../../../fixtures/r4/resources/list/example2.json';
+import fhirIcons from '../../../fixtures/example-icons';
 
 describe('should render List component properly', () => {
+  it('component without a fhirIcons props should render a default icon', () => {
+    const defaultProps = {
+      fhirVersion: fhirVersions.DSTU2,
+      fhirResource: example1Dstu2,
+    };
+
+    const { getByAltText } = render(<List {...defaultProps} />);
+    const headerIcon = getByAltText('list');
+
+    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: example1Dstu2,
+      fhirIcons: false,
+    };
+
+    const { getByTestId } = render(<List {...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: example1Dstu2,
+      fhirIcons: (
+        <img
+          src={require('../assets/containers/List/list.svg')}
+          alt="checklist"
+        />
+      ),
+    };
+
+    const { getByAltText } = render(<List {...defaultProps} />);
+    const headerIcon = getByAltText('checklist');
+
+    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: example1Dstu2,
+      fhirIcons: fhirIcons,
+    };
+
+    const { getByAltText } = render(<List {...defaultProps} />);
+    const headerIcon = getByAltText('checklist');
+
+    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: example1Dstu2,
+      fhirIcons: avatarSrc,
+    };
+
+    const { getByAltText } = render(<List {...defaultProps} />);
+    const headerIcon = getByAltText('header icon');
+
+    expect(headerIcon.getAttribute('src')).toContain(avatarSrc);
+  });
   it('should render with DSTU2 source data', () => {
     const defaultProps = {
       fhirResource: example1Dstu2,
@@ -92,4 +163,37 @@ describe('should render List component properly', () => {
     );
     expect(getByTestId('usdfPlanIDType').textContent).toContain('HIOS-PLAN-ID');
   });
+
+  it('should fire custom onClick function', () => {
+    const defaultProps = {
+      fhirResource: example2R4,
+      fhirVersion: fhirVersions.R4,
+      withDaVinciPDex: true,
+    };
+
+    const onClick = jest.fn();
+    const { getByRole } = render(<List {...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: example2R4,
+      fhirVersion: fhirVersions.R4,
+      withDaVinciPDex: true,
+    };
+
+    const onClick = 'test';
+    const { getByRole } = render(<List {...defaultProps} onClick={onClick} />);
+    const accordion = getByRole('button');
+    fireEvent.click(accordion);
+
+    const attribute = accordion.getAttribute('data-bs-toggle');
+    expect(attribute).toEqual('collapse');
+  });
 });