fhir-react 0.3.5 → 0.3.6

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

@@ -8,8 +8,75 @@ import stu3Example2 from '../../../fixtures/stu3/resources/medicationRequest/exa
 import r4Example1 from '../../../fixtures/r4/resources/medicationRequest/example1.json';
 import r4Example2 from '../../../fixtures/r4/resources/medicationRequest/example2.json';
 import r4Example3 from '../../../fixtures/r4/resources/medicationRequest/example3.json';
+import fhirIcons from '../../../fixtures/example-icons';
 
 describe('should render MedicationRequest component properly', () => {
+  it('component without a fhirIcons props should render a default icon', () => {
+    const defaultProps = {
+      fhirResource: stu3Example1,
+    };
+
+    const { getByAltText } = render(<MedicationRequest {...defaultProps} />);
+    const headerIcon = getByAltText('medication request');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with a false as a fhirIcons props should render a placeholder', () => {
+    const defaultProps = {
+      fhirResource: stu3Example1,
+      fhirIcons: false,
+    };
+
+    const { getByTestId } = render(<MedicationRequest {...defaultProps} />);
+    const headerIcon = getByTestId('placeholder');
+
+    expect(headerIcon).toBeTruthy();
+  });
+
+  it('component with the img as a fhirIcons props should render an img', () => {
+    const defaultProps = {
+      fhirResource: stu3Example1,
+      fhirIcons: (
+        <img
+          src={require('../assets/containers/MedicationOrder/medication-request.svg')}
+          alt="medication request"
+        />
+      ),
+    };
+
+    const { getByAltText } = render(<MedicationRequest {...defaultProps} />);
+    const headerIcon = getByAltText('medication request');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with the resources object as a fhirIcons props should render an img', () => {
+    const defaultProps = {
+      fhirResource: stu3Example1,
+      fhirIcons: fhirIcons,
+    };
+
+    const { getByAltText } = render(<MedicationRequest {...defaultProps} />);
+    const headerIcon = getByAltText('medication request');
+
+    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 = {
+      fhirResource: stu3Example1,
+      fhirIcons: avatarSrc,
+    };
+
+    const { getByAltText } = render(<MedicationRequest {...defaultProps} />);
+    const headerIcon = getByAltText('header icon');
+
+    expect(headerIcon.getAttribute('src')).toContain(avatarSrc);
+  });
+
   it('should render with STU3 source data', () => {
     const defaultProps = {
       fhirResource: stu3Example1,

package/src/components/resources/MedicationStatement/MedicationDosage.js

@@ -3,7 +3,7 @@ import React from 'react';
 import _get from 'lodash/get';
 
 const MedicationDosage = props => {
-  const { dosage, hasNote, note, key } = props;
+  const { dosage, hasNote, note, itemNumber } = props;
 
   const instructions = _get(dosage, 'text');
   const additionalInstructionText = _get(
@@ -16,7 +16,7 @@ const MedicationDosage = props => {
   const hasRoute = route.trim() !== '';
 
   return (
-    <ValueSection label="Dosage" key={key}>
+    <ValueSection label="Dosage" key={itemNumber}>
       <ValueSectionItem label="Instructions" data-testid="dosageInstruction">
         {instructions}
       </ValueSectionItem>

package/src/components/resources/MedicationStatement/MedicationStatement.js

@@ -172,6 +172,7 @@ const MedicationStatement = props => {
                   return (
                     <MedicationDetails
                       key={`item-${i}`}
+                      itemNumber={`item-${i}`}
                       medication={_get(medication, 'code.coding[0].display')}
                       expiration={_get(
                         medication,

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

@@ -10,6 +10,7 @@ import stu3Example2 from '../../../fixtures/stu3/resources/medicationStatement/e
 import r4Example1 from '../../../fixtures/r4/resources/medicationStatement/example1.json';
 import r4Example2 from '../../../fixtures/r4/resources/medicationStatement/example2.json';
 import fhirIcons from '../../../fixtures/example-icons';
+import MedicationStatementIcon from '../../../assets/containers/MedicationStatement/medication-statement.svg';
 
 export default {
   title: 'MedicationStatement',
@@ -21,7 +22,7 @@ export const DefaultVisualizationDSTU2 = () => {
     <MedicationStatement
       fhirVersion={fhirVersions.DSTU2}
       fhirResource={fhirResource}
-      fhirIcons={fhirIcons}
+      fhirIcons={require('../../../assets/containers/MedicationStatement/medication-statement.svg')}
     />
   );
 };
@@ -32,7 +33,7 @@ export const ExampleOfSTU3 = () => {
     <MedicationStatement
       fhirVersion={fhirVersions.STU3}
       fhirResource={fhirResource}
-      fhirIcons={fhirIcons}
+      fhirIcons={MedicationStatementIcon}
     />
   );
 };
@@ -54,7 +55,7 @@ export const Example1OfR4 = () => {
     <MedicationStatement
       fhirVersion={fhirVersions.R4}
       fhirResource={fhirResource}
-      fhirIcons={fhirIcons}
+      fhirIcons={false}
     />
   );
 };
@@ -65,7 +66,7 @@ export const Example2OfR4 = () => {
     <MedicationStatement
       fhirVersion={fhirVersions.R4}
       fhirResource={fhirResource}
-      fhirIcons={fhirIcons}
+      fhirIcons={'random text'}
     />
   );
 };

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

@@ -5,8 +5,80 @@ import fhirVersions from '../fhirResourceVersions';
 import example1MedicationStatement from '../../../fixtures/dstu2/resources/medicationStatement/example1.json';
 import stu3Example from '../../../fixtures/stu3/resources/medicationStatement/example1.json';
 import r4Example1 from '../../../fixtures/r4/resources/medicationStatement/example1.json';
+import fhirIcons from '../../../fixtures/example-icons';
 
 describe('should render MedicationStatement component correctly', () => {
+  it('component without a fhirIcons props should render a default icon', () => {
+    const defaultProps = {
+      fhirResource: example1MedicationStatement,
+      fhirVersion: fhirVersions.DSTU2,
+    };
+
+    const { getByAltText } = render(<MedicationStatement {...defaultProps} />);
+    const headerIcon = getByAltText('medication statement');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with a false as a fhirIcons props should render a placeholder', () => {
+    const defaultProps = {
+      fhirResource: example1MedicationStatement,
+      fhirVersion: fhirVersions.DSTU2,
+      fhirIcons: false,
+    };
+
+    const { getByTestId } = render(<MedicationStatement {...defaultProps} />);
+    const headerIcon = getByTestId('placeholder');
+
+    expect(headerIcon).toBeTruthy();
+  });
+
+  it('component with the img as a fhirIcons props should render an img', () => {
+    const defaultProps = {
+      fhirResource: example1MedicationStatement,
+      fhirVersion: fhirVersions.DSTU2,
+      fhirIcons: (
+        <img
+          src={require('../assets/containers/MedicationStatement/medication-statement.svg')}
+          alt="medication statement"
+        />
+      ),
+    };
+
+    const { getByAltText } = render(<MedicationStatement {...defaultProps} />);
+    const headerIcon = getByAltText('medication statement');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with the resources object as a fhirIcons props should render an img', () => {
+    const defaultProps = {
+      fhirResource: example1MedicationStatement,
+      fhirVersion: fhirVersions.DSTU2,
+      fhirIcons: fhirIcons,
+    };
+
+    const { getByAltText } = render(<MedicationStatement {...defaultProps} />);
+    const headerIcon = getByAltText('medication statement');
+
+    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 = {
+      fhirResource: example1MedicationStatement,
+      fhirVersion: fhirVersions.DSTU2,
+      fhirIcons: avatarSrc,
+    };
+
+    const { getByAltText } = render(<MedicationStatement {...defaultProps} />);
+    const headerIcon = getByAltText('header icon');
+
+    expect(headerIcon.getAttribute('src')).toContain(avatarSrc);
+  });
+
   it('with DSTU2 source data', () => {
     const defaultProps = {
       fhirResource: example1MedicationStatement,

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}
+    />
+  );
+};

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

@@ -5,42 +5,107 @@ import fhirIcons from '../../../fixtures/example-icons';
 import ResourceCategory from './ResourceCategory';
 
 describe('should render ResourceCategory component properly', () => {
-  const placeholderResource = fhirIcons['ResourceCategory'].props;
+  it('component without a fhirIcons props should render a default icon', () => {
+    const defaultProps = {
+      itemsCount: '41',
+      title: 'Resource name',
+    };
+
+    const { getByAltText } = render(<ResourceCategory {...defaultProps} />);
+    const headerIcon = getByAltText('resource category');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with a false as a fhirIcons props should render a placeholder', () => {
+    const defaultProps = {
+      itemsCount: '41',
+      title: 'Resource name',
+      fhirIcons: false,
+    };
+
+    const { getByTestId } = render(<ResourceCategory {...defaultProps} />);
+    const headerIcon = getByTestId('placeholder');
+
+    expect(headerIcon).toBeTruthy();
+  });
+
+  it('component with the img as a fhirIcons props should render an img', () => {
+    const defaultProps = {
+      itemsCount: '41',
+      title: 'Resource name',
+      fhirIcons: (
+        <img
+          src={require('../assets/containers/ResourceCategory/resource-category.svg')}
+          alt="resource category"
+        />
+      ),
+    };
+
+    const { getByAltText } = render(<ResourceCategory {...defaultProps} />);
+    const headerIcon = getByAltText('resource category');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with the resources object as a fhirIcons props should render an img', () => {
+    const defaultProps = {
+      itemsCount: '41',
+      title: 'Resource name',
+      fhirIcons: fhirIcons,
+    };
+
+    const { getByAltText } = render(<ResourceCategory {...defaultProps} />);
+    const headerIcon = getByAltText('resource category');
+
+    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 = {
+      itemsCount: '41',
+      title: 'Resource name',
+      fhirIcons: avatarSrc,
+    };
+
+    const { getByAltText } = render(<ResourceCategory {...defaultProps} />);
+    const headerIcon = getByAltText('header icon');
+
+    expect(headerIcon.getAttribute('src')).toContain(avatarSrc);
+  });
 
-  it('should render ResourceCategory component with icon and itemsCount > 1 correctly', () => {
+  it('should render ResourceCategory component with itemsCount > 1 correctly', () => {
     const defaultProps = {
       fhirIcons: fhirIcons,
       itemsCount: '41',
       title: 'Resource name',
     };
 
-    const { container, getByTestId, getByAltText } = render(
+    const { container, getByTestId } = render(
       <ResourceCategory {...defaultProps} />,
     );
     expect(container).not.toBeNull();
 
     expect(getByTestId('itemsCount').textContent).toContain('41 items');
     expect(getByTestId('title').textContent).toContain('Resource name');
-    const image = getByAltText(placeholderResource.alt);
-    expect(image.src).toContain(placeholderResource.src);
   });
 
-  it('should render ResourceCategory component with icon and itemsCount === 1 correctly', () => {
+  it('should render ResourceCategory component with itemsCount === 1 correctly', () => {
     const defaultProps = {
       fhirIcons: fhirIcons,
       itemsCount: 1,
       title: 'Resource name',
     };
 
-    const { container, getByTestId, getByAltText } = render(
+    const { container, getByTestId } = render(
       <ResourceCategory {...defaultProps} />,
     );
     expect(container).not.toBeNull();
 
     expect(getByTestId('itemsCount').textContent).toContain('1 item');
     expect(getByTestId('title').textContent).toContain('Resource name');
-    const image = getByAltText(placeholderResource.alt);
-    expect(image.src).toContain(placeholderResource.src);
   });
 
   it('should render ResourceCategory correctly with negative number passed as itemsCount', () => {
@@ -50,7 +115,7 @@ describe('should render ResourceCategory component properly', () => {
       title: 'Resource name',
     };
 
-    const { container, getByTestId, getByAltText, queryByTestId } = render(
+    const { container, getByTestId, queryByTestId } = render(
       <ResourceCategory {...defaultProps} />,
     );
     expect(container).not.toBeNull();
@@ -58,8 +123,6 @@ describe('should render ResourceCategory component properly', () => {
     const item = queryByTestId('itemsCount');
     expect(item).toBeNull();
     expect(getByTestId('title').textContent).toContain('Resource name');
-    const image = getByAltText(placeholderResource.alt);
-    expect(image.src).toContain(placeholderResource.src);
   });
 
   it('should render ResourceCategory correctly with invalid string passed as itemsCount', () => {
@@ -69,15 +132,13 @@ describe('should render ResourceCategory component properly', () => {
       title: 'Resource name',
     };
 
-    const { container, getByTestId, getByAltText, queryByTestId } = render(
+    const { container, getByTestId, queryByTestId } = render(
       <ResourceCategory {...defaultProps} />,
     );
     expect(container).not.toBeNull();
     const item = queryByTestId('itemsCount');
     expect(item).toBeNull();
     expect(getByTestId('title').textContent).toContain('Resource name');
-    const image = getByAltText(placeholderResource.alt);
-    expect(image.src).toContain(placeholderResource.src);
   });
 
   it('should render ResourceCategory correctly with floating point number passed as text in itemsCount', () => {
@@ -87,7 +148,7 @@ describe('should render ResourceCategory component properly', () => {
       title: 'Resource name',
     };
 
-    const { container, getByTestId, getByAltText, queryByTestId } = render(
+    const { container, getByTestId, queryByTestId } = render(
       <ResourceCategory {...defaultProps} />,
     );
     expect(container).not.toBeNull();
@@ -95,7 +156,5 @@ describe('should render ResourceCategory component properly', () => {
     const item = queryByTestId('itemsCount');
     expect(item).toBeNull();
     expect(getByTestId('title').textContent).toContain('Resource name');
-    const image = getByAltText(placeholderResource.alt);
-    expect(image.src).toContain(placeholderResource.src);
   });
 });

package/src/fixtures/example-icons.jsx

@@ -40,7 +40,7 @@ export default {
     <img
       className="header-icon__image"
       src={require('../assets/containers/AllergyIntolerance/allergy-intolerance.svg')}
-      alt="sneezing emoji"
+      alt="allergy intolerance"
     />
   ),
   Appointment: (
@@ -54,7 +54,7 @@ export default {
     <img
       className="header-icon__image"
       src={require('../assets/containers/CarePlan/care-plan.svg')}
-      alt="note with a heart"
+      alt="care plan"
     />
   ),
   CareTeam: (
@@ -82,21 +82,21 @@ export default {
     <img
       className="header-icon__image"
       src={require('../assets/containers/Device/device.svg')}
-      alt="computer rack"
+      alt="device"
     />
   ),
   DiagnosticReport: (
     <img
       className="header-icon__image"
       src={require('../assets/containers/DiagnosticReport/diagnostic-report.svg')}
-      alt="note with shapes"
+      alt="diagnostic report"
     />
   ),
   DocumentReference: (
     <img
       className="header-icon__image"
       src={require('../assets/containers/DocumentReference/document-reference.svg')}
-      alt="hand holding a note"
+      alt="document reference"
     />
   ),
   Encounter: (
@@ -117,14 +117,14 @@ export default {
     <img
       className="header-icon__image"
       src={require('../assets/containers/FamilyMemberHistory/family-member-history.svg')}
-      alt="parent and child"
+      alt="family member history"
     />
   ),
   Goal: (
     <img
       className="header-icon__image"
       src={require('../assets/containers/Goal/goal.svg')}
-      alt="arrow hits bullseye"
+      alt="goal"
     />
   ),
   List: (
@@ -141,11 +141,18 @@ export default {
       alt="location marker"
     />
   ),
-  Medication: (
+  MedicationOrder: (
     <img
       className="header-icon__image"
-      src={require('../assets/containers/Medication/medication.svg')}
-      alt="some pills"
+      src={require('../assets/containers/MedicationOrder/medication-order.svg')}
+      alt="medication order"
+    />
+  ),
+  MedicationRequest: (
+    <img
+      className="header-icon__image"
+      src={require('../assets/containers/MedicationRequest/medication-request.svg')}
+      alt="medication request"
     />
   ),
   MedicationAdministration: (
@@ -166,7 +173,7 @@ export default {
     <img
       className="header-icon__image"
       src={require('../assets/containers/MedicationStatement/medication-statement.svg')}
-      alt="note with symmetrical cross"
+      alt="medication statement"
     />
   ),
   Observation: (
@@ -200,8 +207,8 @@ export default {
   ResourceCategory: (
     <img
       className="header-icon__image"
-      src={require('../assets/containers/ResourceCategory/resource-placeholder.svg')}
-      alt="header icon"
+      src={require('../assets/containers/ResourceCategory/resource-category.svg')}
+      alt="resource category"
     />
   ),
   Patient: (