npm - fhir-react - Versions diffs - 0.3.4 → 0.3.7 - Mend

fhir-react 0.3.4 → 0.3.7

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 (84) hide show

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

@@ -3,42 +3,13 @@ import PropTypes from 'prop-types';
 import _get from 'lodash/get';
 import _has from 'lodash/has';
-import Date from '../../datatypes/Date';
 import UnhandledResourceDataStructure from '../UnhandledResourceDataStructure';
 import fhirVersions from '../fhirResourceVersions';
-import Annotation from '../../datatypes/Annotation';
-import Reference from '../../datatypes/Reference';
-import {
-  Root,
-  Header,
-  Title,
-  Badge,
-  BadgeSecondary,
-  Body,
-  Value,
-  ValueSection,
-} from '../../ui';
-const MedicationDetails = props => {
-  const { medication, expiration, ingredient } = props;
-  return (
-    <div>
-      <h5>{medication} </h5>
-      <Value label="Expiration date">{expiration}</Value>
-      {ingredient && (
-        <Value label="Ingredient">
-          <ul>
-            {ingredient.map((item, i) => (
-              <li key={`item-${i}`}>
-                {_get(item, 'itemCodeableConcept.coding.0.display', '')}
-              </li>
-            ))}
-          </ul>
-        </Value>
-      )}
-    </div>
-  );
-};
+import Accordion from '../../containers/Accordion';
+import DatePeriod from '../../datatypes/DatePeriod/DatePeriod';
+import MedicationDetails from './MedicationDetails';
+import { Root, Header, Badge, Body } from '../../ui';
+import MedicationDosage from './MedicationDosage';
 const DEFAULT_TITLE = 'Medication Statement';
@@ -137,7 +108,7 @@ const resourceDTO = (fhirVersion, fhirResource) => {
 };
 const MedicationStatement = props => {
-  const { fhirResource, fhirVersion } = props;
+  const { fhirResource, fhirVersion, fhirIcons } = props;
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -165,94 +136,71 @@ const MedicationStatement = props => {
   return (
     <Root name="MedicationStatement">
-      <Header>
-        <Title>{title}</Title>
-        {status && <Badge data-testid="hasStatus">{status}</Badge>}
-        {hasEffectivePeriod && (
-          <BadgeSecondary data-testid="hasEffectivePeriod">
-            from <Date fhirData={statusDesc.from} /> {'to '}
-            <Date fhirData={statusDesc.to} />
-            <span>{reported}</span>
-          </BadgeSecondary>
-        )}
-      </Header>
-      <Body>
-        {hasMedications && (
-          <Value label="Medications">
-            {contained.map((medication, i) => {
-              const hasMedicationDetails = _has(
-                medication,
-                'code.coding[0].display',
-              );
-              if (hasMedicationDetails) {
-                return (
-                  <MedicationDetails
-                    key={`item-${i}`}
-                    medication={_get(medication, 'code.coding[0].display')}
-                    expiration={_get(
-                      medication,
-                      'package.batch[0].expirationDate',
-                    )}
-                    ingredient={_get(medication, 'ingredient', [])}
+      <Accordion
+        headerContent={
+          <Header
+            icon={fhirIcons}
+            resourceName="MedicationStatement"
+            badges={status && <Badge data-testid="hasStatus">{status}</Badge>}
+            title={title}
+            additionalContent={
+              hasEffectivePeriod && (
+                <>
+                  <DatePeriod
+                    periodBeginLabel="Start date"
+                    periodBeginDate={statusDesc.from}
+                    periodBeginTestId="startDate"
+                    periodEndLabel="End date"
+                    periodEndDate={statusDesc.to}
+                    periodEndTestId="endDate"
                   />
+                  <span>{reported}</span>
+                </>
+              )
+            }
+          />
+        }
+        bodyContent={
+          <Body>
+            {hasMedications &&
+              contained.map((medication, i) => {
+                const hasMedicationDetails = _has(
+                  medication,
+                  'code.coding[0].display',
                 );
-              }
-              return null;
-            })}
-          </Value>
-        )}
-        {medicationReference && (
-          <Value label="Medication Reference" data-testid="medicationReference">
-            <Reference fhirData={medicationReference} />
-          </Value>
-        )}
-        {hasReasonCode && (
-          <Value label="Reason" data-testid="hasReasonCode">
-            <ul>
-              {reasonCode.map((item, i) => {
-                const display = _get(item, 'coding.0.display');
-                if (display) {
-                  return <li key={`item-${i}`}>{display}</li>;
+                if (hasMedicationDetails) {
+                  return (
+                    <MedicationDetails
+                      key={`item-${i}`}
+                      itemNumber={`item-${i}`}
+                      medication={_get(medication, 'code.coding[0].display')}
+                      expiration={_get(
+                        medication,
+                        'package.batch[0].expirationDate',
+                      )}
+                      ingredient={_get(medication, 'ingredient', [])}
+                      medicationReference={medicationReference}
+                      hasReasonCode={hasReasonCode}
+                      reasonCode={reasonCode}
+                    />
+                  );
                 }
                 return null;
               })}
-            </ul>
-          </Value>
-        )}
-        {hasDosage && (
-          <ValueSection label="Dosage" data-testid="dosage">
-            {fhirResource.dosage.map((dosage, i) => {
-              const text = _get(dosage, 'text');
-              const additionalInstructionText = _get(
-                dosage,
-                'additionalInstruction[0].text',
-              );
-              const route =
-                _get(dosage, 'route.coding[0].display') ||
-                `${_get(dosage, 'route.text', '')} ${_get(dosage, 'text', '')}`;
-              const hasRoute = route.trim() !== '';
-              return (
-                <div key={`dosage-${i}`}>
-                  <Value label="Instructions" data-testid="dosageInstruction">
-                    {text}
-                  </Value>
-                  {additionalInstructionText && (
-                    <Value label="Additional Instruction">
-                      {additionalInstructionText}
-                    </Value>
-                  )}
-                  {hasRoute && <Value label="Route">{route}</Value>}
-                </div>
-              );
-            })}
-          </ValueSection>
-        )}
-        {hasNote && (
-          <Value label="Notes" data-testid="hasNote">
-            <Annotation fhirData={note} />
-          </Value>
-        )}
-      </Body>
+            {hasDosage &&
+              fhirResource.dosage.map((dosage, i) => {
+                return (
+                  <MedicationDosage
+                    key={`dosage-${i}`}
+                    dosage={dosage}
+                    hasNote={hasNote}
+                    note={note}
+                  />
+                );
+              })}
+          </Body>
+        }
+      />
     </Root>
   );
 };

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

@@ -9,6 +9,8 @@ import stu3Example1 from '../../../fixtures/stu3/resources/medicationStatement/e
 import stu3Example2 from '../../../fixtures/stu3/resources/medicationStatement/example2.json';
 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',
@@ -20,6 +22,7 @@ export const DefaultVisualizationDSTU2 = () => {
     <MedicationStatement
       fhirVersion={fhirVersions.DSTU2}
       fhirResource={fhirResource}
+      fhirIcons={require('../../../assets/containers/MedicationStatement/medication-statement.svg')}
     />
   );
 };
@@ -30,6 +33,7 @@ export const ExampleOfSTU3 = () => {
     <MedicationStatement
       fhirVersion={fhirVersions.STU3}
       fhirResource={fhirResource}
+      fhirIcons={MedicationStatementIcon}
     />
   );
 };
@@ -40,6 +44,7 @@ export const Example2OfSTU3 = () => {
     <MedicationStatement
       fhirVersion={fhirVersions.STU3}
       fhirResource={fhirResource}
+      fhirIcons={fhirIcons}
     />
   );
 };
@@ -50,6 +55,7 @@ export const Example1OfR4 = () => {
     <MedicationStatement
       fhirVersion={fhirVersions.R4}
       fhirResource={fhirResource}
+      fhirIcons={false}
     />
   );
 };
@@ -60,6 +66,7 @@ export const Example2OfR4 = () => {
     <MedicationStatement
       fhirVersion={fhirVersions.R4}
       fhirResource={fhirResource}
+      fhirIcons={'random text'}
     />
   );
 };

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

@@ -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,
@@ -19,7 +91,7 @@ describe('should render MedicationStatement component correctly', () => {
     expect(getByTestId('title').textContent).toContain(
       'amphetamine-dextroamphetamine',
     );
-    expect(getByTestId('hasEffectivePeriod').textContent).toContain('from');
+    expect(getByTestId('startDate').textContent).toContain('4/19/2016');
     expect(queryByTestId('medicationReference')).toBeNull();
     expect(getByTestId('dosageInstruction').textContent).toContain(
@@ -32,19 +104,35 @@ describe('should render MedicationStatement component correctly', () => {
       fhirResource: stu3Example,
       fhirVersion: fhirVersions.STU3,
     };
-    const { getByTestId, queryAllByTestId } = render(
+    const { getByTestId, queryAllByTestId, queryByTestId } = render(
       <MedicationStatement {...defaultProps} />,
     );
     expect(getByTestId('title').textContent).toEqual('Medication Statement');
-    expect(queryAllByTestId('hasEffectivePeriod')).toHaveLength(0);
+    expect(queryAllByTestId('startDate')).toHaveLength(0);
+    expect(queryAllByTestId('endDate')).toHaveLength(0);
     expect(getByTestId('dosageInstruction').textContent).toContain(
       '1-2 tablets once daily',
     );
-    expect(getByTestId('hasNote').textContent).toContain('occasional');
+    const ingredients = queryAllByTestId('ingredient-item').map(
+      x => x.textContent,
+    );
+    expect(ingredients).toHaveLength(2);
+    expect(ingredients).toEqual([
+      'Acetaminophen 500 MG',
+      'Diphenhydramine Hydrochloride 25 mg',
+    ]);
+    expect(getByTestId('dosageInstruction').textContent).toContain(
+      '1-2 tablets once daily at bedtime as needed for restless legs',
+    );
+    expect(queryByTestId('medicationReference').textContent).toContain(
+      '#med0309',
+    );
+    expect(getByTestId('hasNote').textContent).toContain('occasional');
     expect(getByTestId('hasReasonCode').textContent).toContain('Legs');
   });
@@ -58,14 +146,23 @@ describe('should render MedicationStatement component correctly', () => {
     );
     expect(getByTestId('title').textContent).toEqual('Medication Statement');
-    expect(queryAllByTestId('hasEffectivePeriod')).toHaveLength(0);
+    expect(queryAllByTestId('startDate')).toHaveLength(0);
+    expect(queryAllByTestId('endDate')).toHaveLength(0);
     expect(getByTestId('dosageInstruction').textContent).toContain(
       '1-2 tablets once daily',
     );
-    expect(getByTestId('hasNote').textContent).toContain('occasional');
+    const ingredients = queryAllByTestId('ingredient-item').map(
+      x => x.textContent,
+    );
+    expect(ingredients).toHaveLength(2);
+    expect(ingredients).toEqual([
+      'Acetaminophen 500 MG',
+      'Diphenhydramine Hydrochloride 25 mg',
+    ]);
+    expect(getByTestId('hasNote').textContent).toContain('occasional');
     expect(getByTestId('hasReasonCode').textContent).toContain('Legs');
     expect(getByTestId('medicationReference').textContent).toContain(
       '#med0309',

package/src/components/resources/Organization/Organization.js CHANGED Viewed

@@ -8,7 +8,8 @@ import Telecom from '../../datatypes/Telecom';
 import Identifier from '../../datatypes/Identifier';
 import UnhandledResourceDataStructure from '../UnhandledResourceDataStructure';
 import fhirVersions from '../fhirResourceVersions';
-import { Root, Header, Title, Body, Value, NotEnoughData } from '../../ui';
+import { Root, Header, Body, NotEnoughData } from '../../ui';
+import Accordion from '../../containers/Accordion';
 const commonDTO = fhirResource => {
   const identifier = _get(fhirResource, 'identifier', '');
@@ -54,8 +55,7 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
-const Organization = props => {
-  const { fhirResource, fhirVersion } = props;
+const Organization = ({ fhirResource, fhirVersion, fhirIcons }) => {
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -74,42 +74,60 @@ const Organization = props => {
   const hasTelecom = Array.isArray(telecom) && telecom.length > 0;
   const hasTypes = Array.isArray(typeCodings) && typeCodings.length > 0;
   const notEnoughData = !hasAddresses && !hasTelecom && !hasTypes;
+  const tableData = [
+    {
+      label: 'Identifiers',
+      testId: 'identifier',
+      data: identifier && <Identifier fhirData={identifier} noCursive />,
+      status: identifier,
+    },
+    {
+      label: 'Addresses',
+      testId: 'address',
+      data:
+        hasAddresses &&
+        addresses.map((item, i) => (
+          <Address key={`item-${i}`} fhirData={item} />
+        )),
+      status: hasAddresses,
+    },
+    {
+      label: 'Contacts',
+      testId: 'contact',
+      data:
+        hasTelecom &&
+        telecom.map((item, i) => <Telecom key={`item-${i}`} fhirData={item} />),
+      status: hasTelecom,
+    },
+    {
+      label: 'Type',
+      testId: 'type',
+      data:
+        hasTypes &&
+        typeCodings.map((typeCoding, idx) => (
+          <Coding key={idx} fhirData={typeCoding} />
+        )),
+      status: hasTypes,
+    },
+    {
+      label: '',
+      testId: '',
+      data: notEnoughData && <NotEnoughData data-testid="NotEnoughData" />,
+      status: notEnoughData,
+    },
+  ];
   return (
     <Root name="Organization">
-      {name && (
-        <Header>
-          <Title>{name}</Title>
-        </Header>
-      )}
-      <Body>
-        {identifier && (
-          <Value label="Identifiers" data-testid="identifier">
-            <Identifier fhirData={identifier} />
-          </Value>
-        )}
-        {hasAddresses && (
-          <Value label="Addresses" data-testid="address">
-            {addresses.map((item, i) => (
-              <Address key={`item-${i}`} fhirData={item} />
-            ))}
-          </Value>
-        )}
-        {hasTelecom && (
-          <Value label="Contacts" data-testid="contact">
-            {telecom.map((item, i) => (
-              <Telecom key={`item-${i}`} fhirData={item} />
-            ))}
-          </Value>
-        )}
-        {hasTypes && (
-          <Value label="Type" data-testid="type">
-            {typeCodings.map((typeCoding, idx) => (
-              <Coding key={idx} fhirData={typeCoding} />
-            ))}
-          </Value>
-        )}
-        {notEnoughData && <NotEnoughData data-testid="NotEnoughData" />}
-      </Body>
+      <Accordion
+        headerContent={
+          name && (
+            <Header resourceName="Organization" title={name} icon={fhirIcons} />
+          )
+        }
+        bodyContent={<Body tableData={tableData} />}
+      />
     </Root>
   );
 };

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

@@ -14,6 +14,9 @@ import r4Example1 from '../../../fixtures/r4/resources/organization/example1.jso
 import r4Example2 from '../../../fixtures/r4/resources/organization/example2.json';
 import r4Example3 from '../../../fixtures/r4/resources/organization/example3.json';
+import fhirIcons from '../../../fixtures/example-icons';
+import OrganizationIcon from '../../../assets/containers/Organization/organization.svg';
 export default {
   title: 'Organization',
 };
@@ -24,6 +27,7 @@ export const DefaultVisualizationDSTU2 = () => {
     <Organization
       fhirResource={fhirResource}
       fhirVersion={fhirVersions.DSTU2}
+      fhirIcons={OrganizationIcon}
     />
   );
 };
@@ -34,6 +38,7 @@ export const Example2OfDSTU2 = () => {
     <Organization
       fhirResource={fhirResource}
       fhirVersion={fhirVersions.DSTU2}
+      fhirIcons={fhirIcons}
     />
   );
 };
@@ -41,14 +46,22 @@ export const Example2OfDSTU2 = () => {
 export const Example1OfSTU3 = () => {
   const fhirResource = object('Resource', stu3Example1);
   return (
-    <Organization fhirResource={fhirResource} fhirVersion={fhirVersions.STU3} />
+    <Organization
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.STU3}
+      fhirIcons={false}
+    />
   );
 };
 export const Example2OfSTU3 = () => {
   const fhirResource = object('Resource', stu3Example2);
   return (
-    <Organization fhirResource={fhirResource} fhirVersion={fhirVersions.STU3} />
+    <Organization
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.STU3}
+      fhirIcons={'random text'}
+    />
   );
 };

package/src/components/resources/Organization/Organization.test.js CHANGED Viewed

@@ -14,7 +14,80 @@ import r4Example1 from '../../../fixtures/r4/resources/organization/example1.jso
 import r4Example2 from '../../../fixtures/r4/resources/organization/example2.json';
 import r4Example3 from '../../../fixtures/r4/resources/organization/example3.json';
+import fhirIcons from '../../../fixtures/example-icons';
 describe('should render Organization component properly', () => {
+  it('component without a fhirIcons props should render a default icon', () => {
+    const defaultProps = {
+      fhirVersion: fhirVersions.DSTU2,
+      fhirResource: dstu2Example1,
+    };
+    const { getByAltText } = render(<Organization {...defaultProps} />);
+    const headerIcon = getByAltText('organization');
+    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(<Organization {...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/Organization/organization.svg')}
+          alt="organization"
+        />
+      ),
+    };
+    const { getByAltText } = render(<Organization {...defaultProps} />);
+    const headerIcon = getByAltText('organization');
+    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(<Organization {...defaultProps} />);
+    const headerIcon = getByAltText('organization');
+    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(<Organization {...defaultProps} />);
+    const headerIcon = getByAltText('header icon');
+    expect(headerIcon.getAttribute('src')).toContain(avatarSrc);
+  });
   it('should render with DSTU2 source data', () => {
     const defaultProps = {
       fhirResource: dstu2Example1,