fhir-react 0.3.5 → 0.3.8

package/src/components/resources/ResearchStudy/ResearchStudy.js

@@ -13,16 +13,8 @@ import _get from 'lodash/get';
 import UnhandledResourceDataStructure from '../UnhandledResourceDataStructure';
 import fhirVersions from '../fhirResourceVersions';
 
-import {
-  Badge,
-  BadgeSecondary,
-  Body,
-  Header,
-  MissingValue,
-  Root,
-  Title,
-  Value,
-} from '../../ui';
+import { Badge, Body, Header, MissingValue, Root, Value } from '../../ui';
+import Accordion from '../../containers/Accordion';
 
 const commonDTO = fhirResource => {
   const title = _get(fhirResource, 'title', 'Research Study');
@@ -102,8 +94,7 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
 
-const ResearchStudy = props => {
-  const { fhirResource, fhirVersion } = props;
+const ResearchStudy = ({ fhirResource, fhirVersion, fhirIcons, onClick }) => {
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -140,126 +131,165 @@ const ResearchStudy = props => {
   const hasComments = comments.length > 0;
   const hasArms = arms.length > 0;
 
+  const tableData = [
+    {
+      label: 'Part of another study',
+      testId: 'partOf',
+      data: partOfReference && <Reference fhirData={partOfReference} />,
+      status: partOfReference,
+    },
+    {
+      label: 'Category',
+      testId: 'category',
+      data: categoryCoding && <Coding fhirData={categoryCoding} />,
+      status: categoryCoding,
+    },
+    {
+      label: 'Keywords',
+      testId: 'keywords',
+      data: hasKeywords && <CodeableConcept fhirData={keywordConcepts} />,
+      status: hasKeywords,
+    },
+    {
+      label: 'Description',
+      testId: 'description',
+      data: description && <Markdown fhirData={description} />,
+      status: description,
+    },
+    {
+      label: 'Focus',
+      testId: 'focus',
+      data: focusCoding && <Coding fhirData={focusCoding} />,
+      status: focusCoding,
+    },
+    {
+      label: 'Enrollment',
+      testId: 'enrollment',
+      data:
+        hasEnrollment &&
+        enrollmentReferences.map((enrollmentReference, idx) => (
+          <div key={idx} data-testid="enrollmentReference">
+            <Reference fhirData={enrollmentReference} />
+          </div>
+        )),
+      status: hasEnrollment,
+    },
+    {
+      label: 'Protocol',
+      testId: 'protocol',
+      data: protocolReference && <Reference fhirData={protocolReference} />,
+      status: protocolReference,
+    },
+    {
+      label: 'Study paths',
+      testId: 'arms',
+      data: hasArms && (
+        <ul>
+          {arms.map((arm, idx) => (
+            <li key={idx}>
+              <div data-testid="arms.name">{arm.name}</div>
+              <Coding fhirData={arm.coding} />
+              <div data-testid="arms.description">{arm.description}</div>
+            </li>
+          ))}
+        </ul>
+      ),
+      status: hasArms,
+    },
+    {
+      label: 'Comments',
+      testId: 'comments',
+      data: hasComments && <Annotation fhirData={comments} />,
+      status: hasComments,
+    },
+    {
+      label: 'Contacts',
+      testId: 'contacts',
+      data:
+        hasContacts &&
+        contacts.map((contact, idx) => (
+          <div key={idx}>
+            <div data-testid="contactsName">{contact.name}</div>
+            <div data-testid="contactsTelecom">
+              <Telecom fhirData={contact.telecoms} />
+            </div>
+          </div>
+        )),
+      status: hasContacts,
+    },
+    {
+      label: 'Principal investigator',
+      testId: 'principalInvestigator',
+      data: principalInvestigatorReference && (
+        <Reference fhirData={principalInvestigatorReference} />
+      ),
+      status: principalInvestigatorReference,
+    },
+    {
+      label: 'Sponsor',
+      testId: 'sponsor',
+      data: sponsorReference && <Reference fhirData={sponsorReference} />,
+      status: sponsorReference,
+    },
+    {
+      label: 'Sites',
+      testId: 'sites',
+      data:
+        hasSites &&
+        siteReferences.map((siteReference, idx) => (
+          <div key={idx} data-testid="siteReference">
+            <Reference fhirData={siteReference} />
+          </div>
+        )),
+      status: hasSites,
+    },
+    {
+      label: 'Location',
+      testId: 'location',
+      data: location && <CodeableConcept fhirData={location} />,
+      status: location,
+    },
+    {
+      label: 'Primary Purpose Type',
+      testId: 'primaryPurposeType',
+      data: primaryPurposeType && (
+        <CodeableConcept fhirData={primaryPurposeType} />
+      ),
+      status: primaryPurposeType,
+    },
+  ];
+
   return (
     <Root name="ResearchStudy">
-      <Header>
-        {title && <Title data-testid="title">{title}</Title>}
-        {status && <Badge data-testid="status">{status}</Badge>}
-        {hasPeriod && (
-          <BadgeSecondary data-testid="period">
-            {period.start ? (
-              <DateType fhirData={period.start} />
-            ) : (
-              <MissingValue />
-            )}
-            {' - '}
-            {period.end ? <DateType fhirData={period.end} /> : <MissingValue />}
-          </BadgeSecondary>
-        )}
-      </Header>
-      <Body>
-        {partOfReference && (
-          <Value label="Part of another study" data-testid="partOf">
-            <Reference fhirData={partOfReference} />
-          </Value>
-        )}
-        {categoryCoding && (
-          <Value label="Category" data-testid="category">
-            <Coding fhirData={categoryCoding} />
-          </Value>
-        )}
-        {hasKeywords && (
-          <Value label="Keywords" data-testid="keywords">
-            <CodeableConcept fhirData={keywordConcepts} />
-          </Value>
-        )}
-        {description && (
-          <Value label="Description" data-testid="description">
-            <Markdown fhirData={description} />
-          </Value>
-        )}
-        {focusCoding && (
-          <Value label="Focus" data-testid="focus">
-            <Coding fhirData={focusCoding} />
-          </Value>
-        )}
-        {hasEnrollment && (
-          <Value label="Enrollment" data-testid="enrollment">
-            {enrollmentReferences.map((enrollmentReference, idx) => (
-              <div key={idx} data-testid="enrollmentReference">
-                <Reference fhirData={enrollmentReference} />
-              </div>
-            ))}
-          </Value>
-        )}
-        {protocolReference && (
-          <Value label="Protocol" data-testid="protocol">
-            <Reference fhirData={protocolReference} />
-          </Value>
-        )}
-        {hasArms && (
-          <Value label="Study paths" data-testid="arms">
-            <ul>
-              {arms.map((arm, idx) => (
-                <li key={idx}>
-                  <div data-testid="arms.name">{arm.name}</div>
-                  <Coding fhirData={arm.coding} />
-                  <div data-testid="arms.description">{arm.description}</div>
-                </li>
-              ))}
-            </ul>
-          </Value>
-        )}
-        {hasComments && (
-          <Value label="Comments" data-testid="comments">
-            <Annotation fhirData={comments} />
-          </Value>
-        )}
-        {hasContacts && (
-          <Value label="Contacts" data-testid="contacts">
-            {contacts.map((contact, idx) => (
-              <div key={idx}>
-                <div data-testid="contactsName">{contact.name}</div>
-                <div data-testid="contactsTelecom">
-                  <Telecom fhirData={contact.telecoms} />
-                </div>
-              </div>
-            ))}
-          </Value>
-        )}
-        {principalInvestigatorReference && (
-          <Value
-            label="Principal investigator"
-            data-testid="principalInvestigator"
-          >
-            <Reference fhirData={principalInvestigatorReference} />
-          </Value>
-        )}
-        {sponsorReference && (
-          <Value label="Sponsor" data-testid="sponsor">
-            <Reference fhirData={sponsorReference} />
-          </Value>
-        )}
-        {hasSites && (
-          <Value label="Sites" data-testid="sites">
-            {siteReferences.map((siteReference, idx) => (
-              <div key={idx} data-testid="siteReference">
-                <Reference fhirData={siteReference} />
-              </div>
-            ))}
-          </Value>
-        )}
-        {location && (
-          <Value label="Location" data-testid="location">
-            <CodeableConcept fhirData={location} />
-          </Value>
-        )}
-        {primaryPurposeType && (
-          <Value label="Primary Purpose Type" data-testid="primaryPurposeType">
-            <CodeableConcept fhirData={primaryPurposeType} />
-          </Value>
-        )}
-      </Body>
+      <Accordion
+        headerContent={
+          <Header
+            resourceName="ResearchStudy"
+            title={title}
+            badges={status && <Badge data-testid="status">{status}</Badge>}
+            additionalContent={
+              hasPeriod && (
+                <Value data-testid="period">
+                  {period.start ? (
+                    <DateType fhirData={period.start} isBlack />
+                  ) : (
+                    <MissingValue />
+                  )}
+                  {' - '}
+                  {period.end ? (
+                    <DateType fhirData={period.end} isBlack />
+                  ) : (
+                    <MissingValue />
+                  )}
+                </Value>
+              )
+            }
+            icon={fhirIcons}
+          />
+        }
+        bodyContent={<Body tableData={tableData} />}
+        onClick={onClick}
+      />
     </Root>
   );
 };

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

@@ -6,6 +6,7 @@ import fhirVersions from '../fhirResourceVersions';
 
 import stu3Example1 from '../../../fixtures/stu3/resources/researchStudy/example-1.json';
 import r4Example1 from '../../../fixtures/r4/resources/researchStudy/example1.json';
+import fhirIcons from '../../../fixtures/example-icons';
 
 export default {
   title: 'ResearchStudy',
@@ -17,6 +18,7 @@ export const ExampleOfSTU3 = () => {
     <ResearchStudy
       fhirVersion={fhirVersions.STU3}
       fhirResource={fhirResource}
+      fhirIcons={fhirIcons}
     />
   );
 };

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 
 import ResearchStudy from './ResearchStudy';
 import fhirVersions from '../fhirResourceVersions';
@@ -7,8 +7,80 @@ import stu3Example1 from '../../../fixtures/stu3/resources/researchStudy/example
 import r4Example1 from '../../../fixtures/r4/resources/researchStudy/example1.json';
 
 import { nbspRegex } from '../../../testUtils';
+import fhirIcons from '../../../fixtures/example-icons';
 
 describe('should render ResearchStudy component properly', () => {
+  it('component without a fhirIcons props should render a default icon', () => {
+    const defaultProps = {
+      fhirVersion: fhirVersions.STU3,
+      fhirResource: stu3Example1,
+    };
+
+    const { getByAltText } = render(<ResearchStudy {...defaultProps} />);
+    const headerIcon = getByAltText('research study');
+
+    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(<ResearchStudy {...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/ResearchStudy/research-study.svg')}
+          alt="finger pointing something in a book"
+        />
+      ),
+    };
+
+    const { getByAltText } = render(<ResearchStudy {...defaultProps} />);
+    const headerIcon = getByAltText('finger pointing something in a book');
+
+    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(<ResearchStudy {...defaultProps} />);
+    const headerIcon = getByAltText('finger pointing something in a book');
+
+    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(<ResearchStudy {...defaultProps} />);
+    const headerIcon = getByAltText('header icon');
+
+    expect(headerIcon.getAttribute('src')).toContain(avatarSrc);
+  });
+
   it('with STU3 source data', () => {
     const defaultProps = {
       fhirResource: stu3Example1,
@@ -82,4 +154,39 @@ describe('should render ResearchStudy component properly', () => {
     const status = getByTestId('status').textContent;
     expect(status).toEqual('completed');
   });
+
+  it('should fire custom onClick function', () => {
+    const defaultProps = {
+      fhirResource: stu3Example1,
+      fhirVersion: fhirVersions.STU3,
+    };
+
+    const onClick = jest.fn();
+    const { getByRole } = render(
+      <ResearchStudy {...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: stu3Example1,
+      fhirVersion: fhirVersions.STU3,
+    };
+
+    const onClick = 'test';
+    const { getByRole } = render(
+      <ResearchStudy {...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/ResourceCategory/ResourceCategory.js

@@ -1,22 +1,14 @@
-import { Root, Title } from '../../ui';
-import HeaderIcon from '../../datatypes/HeaderIcon';
+import { Header, Root } from '../../ui';
 import React from 'react';
 import PropTypes from 'prop-types';
-import { isUrl } from '../../../utils/isUrl';
-
-const ResourceCategory = props => {
-  const { title, itemsCount, fhirIcons } = props;
 
+const ResourceCategory = ({ title, itemsCount, fhirIcons }) => {
   const parseNumber = value =>
     /^[1-9]+\d*$/.test(value) ? Number.parseInt(value) : null;
 
   const getItemsCountLabel = () =>
     `${parsedItemsCount} ${parsedItemsCount === 1 ? 'item' : 'items'}`;
 
-  const headerIcon = isUrl(fhirIcons)
-    ? fhirIcons
-    : fhirIcons && fhirIcons['ResourceCategory'];
-
   const parsedItemsCount = parseNumber(itemsCount);
 
   return (
@@ -26,8 +18,11 @@ const ResourceCategory = props => {
         className="btn d-flex align-items-center justify-content-between w-100 py-4 px-4 bg-white"
       >
         <div className="d-flex gap-2">
-          <HeaderIcon headerIcon={headerIcon} />
-          <Title data-testid="title">{title}</Title>
+          <Header
+            resourceName={'ResourceCategory'}
+            title={title}
+            icon={fhirIcons}
+          />
         </div>
         <div className="d-flex gap-2 align-items-center">
           {parsedItemsCount > 0 && (

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import ResourceCategory from './ResourceCategory';
 import fhirIcons from '../../../fixtures/example-icons';
+import ResourceCategoryIcon from '../../../assets/containers/ResourceCategory/resource-category.svg';
 
 export default { title: 'ResourceCategory' };
 
@@ -9,7 +10,7 @@ export const ExampleWithAllProperties = () => {
     <ResourceCategory
       itemsCount={41}
       title="Resource name"
-      fhirIcons={fhirIcons}
+      fhirIcons={require('../../../assets/containers/ResourceCategory/resource-category.svg')}
     />
   );
 };
@@ -19,7 +20,7 @@ export const ExampleWith1Item = () => {
     <ResourceCategory
       itemsCount={'1'}
       title="Resource name"
-      fhirIcons={fhirIcons}
+      fhirIcons={ResourceCategoryIcon}
     />
   );
 };
@@ -27,3 +28,13 @@ export const ExampleWith1Item = () => {
 export const ExampleWithoutItemsCount = () => {
   return <ResourceCategory title="Resource name" fhirIcons={fhirIcons} />;
 };
+
+export const ExampleWith1ItemAndDisableIcon = () => {
+  return (
+    <ResourceCategory
+      itemsCount={'1'}
+      title="Resource name"
+      fhirIcons={false}
+    />
+  );
+};