fhir-react 0.3.7 → 0.3.10

package/src/components/datatypes/CodeableConcept/CodeableConcept.js

@@ -19,8 +19,7 @@ export const hasValue = data => {
   return false;
 };
 
-const CodeableConcept = props => {
-  const { fhirData } = props;
+const CodeableConcept = ({ fhirData, isCursive = false }) => {
   if (!_isObject(fhirData)) return null;
 
   const data = Array.isArray(fhirData) ? fhirData : [fhirData];
@@ -40,7 +39,11 @@ const CodeableConcept = props => {
               </span>
             )}
             {coding.map((codingData, j) => (
-              <Coding key={`codingData-${j}`} fhirData={codingData} />
+              <Coding
+                key={`codingData-${j}`}
+                fhirData={codingData}
+                isCursive={isCursive}
+              />
             ))}
           </div>
         );

package/src/components/datatypes/Coding/Coding.js

@@ -4,8 +4,7 @@ import _get from 'lodash/get';
 
 import './Coding.css';
 
-const Coding = props => {
-  const { fhirData } = props;
+const Coding = ({ fhirData, isCursive = false }) => {
   const display = _get(fhirData, 'display', '');
   const code = _get(fhirData, 'code', '');
   const system = _get(fhirData, 'system', '');
@@ -14,7 +13,12 @@ const Coding = props => {
     <div className="fhir-datatype__Coding">
       <span className="fhir-datatype__Coding__title">{display}</span>&nbsp;
       {hasAdditionalInfo && (
-        <span className="fhir-datatype__Coding__code" title={system}>
+        <span
+          className={`${
+            isCursive ? 'fst-italic' : ''
+          } fhir-datatype__Coding__code`}
+          title={system}
+        >
           ({code || '?'})
         </span>
       )}

package/src/components/datatypes/Reference/Reference.js

@@ -7,17 +7,19 @@ const Reference = props => {
   const { fhirData } = props;
   const display = _get(fhirData, 'display');
   const reference = _get(fhirData, 'reference', '');
+
   return (
     <div
       className="fhir-datatype__Reference d-inline-block"
       data-testid={props['data-testid']}
     >
       {display && <span className="mr-2 pe-1">{display}</span>}
-      {reference.startsWith('http://') || reference.startsWith('https://') ? (
-        <a href={reference}>{reference}</a>
-      ) : (
-        <span>{reference}</span>
-      )}
+      {!display &&
+        (reference.startsWith('http://') || reference.startsWith('https://') ? (
+          <a href={reference}>{reference}</a>
+        ) : (
+          <span>{reference}</span>
+        ))}
     </div>
   );
 };

package/src/components/datatypes/Telecom/Telecom.js

@@ -3,8 +3,7 @@ import _get from 'lodash/get';
 
 import './Telecom.css';
 
-const Telecom = props => {
-  const { fhirData } = props;
+const Telecom = ({ fhirData, noSystemData = false }) => {
   if (Array.isArray(fhirData)) {
     return (
       <div className="fhir-datatype__Telecom">
@@ -12,7 +11,7 @@ const Telecom = props => {
           const system = _get(item, 'system', '');
           return (
             <div className="fhir-datatype__Telecom__item" key={`phone-${i}`}>
-              {system && (
+              {!noSystemData && system && (
                 <span className="fhir-datatype__Telecom__item-label">
                   {system}
                 </span>

package/src/components/defaultArgTypes.js

@@ -0,0 +1,12 @@
+export const defaultArgTypes = {
+  fhirVersion: {
+    table: {
+      disable: true,
+    },
+  },
+  fhirIcons: {
+    table: {
+      disable: true,
+    },
+  },
+};

package/src/components/resources/AdverseEvent/AdverseEvent.js

@@ -2,11 +2,19 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import _get from 'lodash/get';
 import fhirVersions from '../fhirResourceVersions';
-import { Root, Header, Title, Body, Value } from '../../ui';
+import {
+  Root,
+  Header,
+  Body,
+  ValueSection,
+  ValueSectionItem,
+  Value,
+} from '../../ui';
 import Reference from '../../datatypes/Reference';
 import Date from '../../datatypes/Date';
 import UnhandledResourceDataStructure from '../UnhandledResourceDataStructure';
 import CodeableConcept, { hasValue } from '../../datatypes/CodeableConcept';
+import Accordion from '../../containers/Accordion';
 
 const commonDTO = fhirResource => {
   const subject = _get(fhirResource, 'subject');
@@ -63,8 +71,13 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
 
-const AdverseEvent = props => {
-  const { fhirResource, fhirVersion } = props;
+const AdverseEvent = ({
+  fhirResource,
+  fhirVersion,
+  fhirIcons,
+  onClick,
+  rawOnClick,
+}) => {
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -86,47 +99,80 @@ const AdverseEvent = props => {
     hasEvent,
   } = fhirResourceData;
 
+  const tableData = [
+    {
+      label: 'Event',
+      testId: 'event',
+      data: hasEventType && <CodeableConcept fhirData={eventType} />,
+      status: hasEventType,
+    },
+    {
+      label: 'Event',
+      testId: 'event',
+      data: hasEvent && <CodeableConcept fhirData={event} />,
+      status: hasEvent,
+    },
+    {
+      label: 'Seriousness',
+      testId: 'hasSeriousness',
+      data: hasSeriousness && (
+        <CodeableConcept fhirData={seriousness} isCursive />
+      ),
+      status: hasSeriousness,
+    },
+    {
+      label: 'Actuality',
+      testId: 'actuality',
+      data: actuality,
+      status: actuality,
+    },
+  ];
+
   return (
     <Root name="AdverseEvent">
-      <Header>
-        {subject && (
-          <Title>
-            <Reference fhirData={subject} />
-          </Title>
-        )}
-      </Header>
-      <Body>
-        {date && (
-          <Value label="Date" data-testid="date">
-            <Date fhirData={date} />
-          </Value>
-        )}
-        {hasEventType && (
-          <Value label="Type" data-testid="type">
-            <CodeableConcept fhirData={eventType} />
-          </Value>
-        )}
-        {hasEvent && (
-          <Value label="Event" data-testid="event">
-            <CodeableConcept fhirData={event} />
-          </Value>
-        )}
-        {description && (
-          <Value label="Description" data-testid="description">
-            {description}
-          </Value>
-        )}
-        {hasSeriousness && (
-          <Value label="Seriousness" data-testid="hasSeriousness">
-            <CodeableConcept fhirData={seriousness} />
-          </Value>
-        )}
-        {actuality && (
-          <Value label="Actuality" data-testid="actuality">
-            {actuality}
-          </Value>
-        )}
-      </Body>
+      <Accordion
+        headerContent={
+          <Header
+            resourceName={'AdverseEvent'}
+            title={subject && <Reference fhirData={subject} />}
+            icon={fhirIcons}
+            additionalContent={
+              date && (
+                <Value label="Date" data-testid="date">
+                  <Date fhirData={date} isBlack />
+                </Value>
+              )
+            }
+          />
+        }
+        bodyContent={
+          <Body>
+            {description && (
+              <ValueSection
+                label="Comment"
+                data-testid="description"
+                marginBottom
+              >
+                <span className="text-secondary">{description}</span>
+              </ValueSection>
+            )}
+            {tableData.map(
+              (item, index) =>
+                item.status && (
+                  <ValueSectionItem
+                    key={`adverse-event-item-${index}`}
+                    label={item.label}
+                    data-testid={item.testId}
+                  >
+                    {item.data}
+                  </ValueSectionItem>
+                ),
+            )}
+          </Body>
+        }
+        onClick={onClick}
+        rawOnClick={rawOnClick}
+      />
     </Root>
   );
 };

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { object } from '@storybook/addon-knobs';
+import { defaultArgTypes } from '../../defaultArgTypes';
 
 import AdverseEvent from './AdverseEvent';
 import fhirVersions from '../fhirResourceVersions';
@@ -7,20 +7,28 @@ import fhirVersions from '../fhirResourceVersions';
 import stu3Example1 from '../../../fixtures/stu3/resources/adverseEvent/example1.json';
 import r4Example1 from '../../../fixtures/r4/resources/adverseEvent/example1.json';
 
+import fhirIcons from '../../../fixtures/example-icons';
+
 export default {
   title: 'AdverseEvent',
+  component: AdverseEvent,
+  argTypes: {
+    ...defaultArgTypes,
+  },
 };
 
-export const DefaultVisualizationSTU3 = () => {
-  const fhirResource = object('Resource', stu3Example1);
-  return (
-    <AdverseEvent fhirResource={fhirResource} fhirVersion={fhirVersions.STU3} />
-  );
+const Template = args => <AdverseEvent {...args} />;
+
+export const DefaultVisualizationSTU3 = Template.bind({});
+DefaultVisualizationSTU3.args = {
+  fhirVersion: fhirVersions.STU3,
+  fhirResource: stu3Example1,
+  fhirIcons: fhirIcons,
 };
 
-export const Example1ofR4 = () => {
-  const fhirResource = object('Resource', r4Example1);
-  return (
-    <AdverseEvent fhirResource={fhirResource} fhirVersion={fhirVersions.R4} />
-  );
+export const Example1ofR4 = Template.bind({});
+Example1ofR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: r4Example1,
+  fhirIcons: false,
 };

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

@@ -1,12 +1,84 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 import AdverseEvent from './AdverseEvent';
 import fhirVersions from '../fhirResourceVersions';
 
 import stu3Example1 from '../../../fixtures/stu3/resources/adverseEvent/example1.json';
 import r4Example1 from '../../../fixtures/r4/resources/adverseEvent/example1.json';
+import fhirIcons from '../../../fixtures/example-icons';
 
 describe('should render component correctly', () => {
+  it('component without a fhirIcons props should render a default icon', () => {
+    const defaultProps = {
+      fhirVersion: fhirVersions.STU3,
+      fhirResource: stu3Example1,
+    };
+
+    const { getByAltText } = render(<AdverseEvent {...defaultProps} />);
+    const headerIcon = getByAltText('adverse event');
+
+    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(<AdverseEvent {...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/AdverseEvent/adverse-event.svg')}
+          alt="adverse event"
+        />
+      ),
+    };
+
+    const { getByAltText } = render(<AdverseEvent {...defaultProps} />);
+    const headerIcon = getByAltText('adverse event');
+
+    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(<AdverseEvent {...defaultProps} />);
+    const headerIcon = getByAltText('adverse event');
+
+    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(<AdverseEvent {...defaultProps} />);
+    const headerIcon = getByAltText('header icon');
+
+    expect(headerIcon.getAttribute('src')).toContain(avatarSrc);
+  });
+
   it('should render with STU3 source data', () => {
     const defaultProps = {
       fhirResource: stu3Example1,
@@ -18,7 +90,7 @@ describe('should render component correctly', () => {
 
     expect(getByTestId('date').textContent).toEqual('1/29/2017');
 
-    expect(getByTestId('type').textContent).toContain('304386008');
+    expect(getByTestId('event').textContent).toContain('304386008');
 
     expect(getByTestId('description').textContent).toContain(
       'This was a mild rash',
@@ -44,4 +116,39 @@ describe('should render component correctly', () => {
 
     expect(getByTestId('actuality').textContent).toEqual('actual');
   });
+
+  it('should fire custom onClick function', () => {
+    const defaultProps = {
+      fhirResource: r4Example1,
+      fhirVersion: fhirVersions.R4,
+    };
+
+    const onClick = jest.fn();
+    const { getByRole } = render(
+      <AdverseEvent {...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(
+      <AdverseEvent {...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/AllergyIntolerance/AllergyIntolerance.js

@@ -123,7 +123,13 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
 
-const AllergyIntolerance = ({ fhirResource, fhirVersion, fhirIcons }) => {
+const AllergyIntolerance = ({
+  fhirResource,
+  fhirVersion,
+  fhirIcons,
+  onClick,
+  rawOnClick,
+}) => {
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -231,6 +237,8 @@ const AllergyIntolerance = ({ fhirResource, fhirVersion, fhirIcons }) => {
           />
         }
         bodyContent={<Body tableData={tableData} />}
+        onClick={onClick}
+        rawOnClick={rawOnClick}
       />
     </Root>
   );

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { object } from '@storybook/addon-knobs';
+import { defaultArgTypes } from '../../defaultArgTypes';
 
 import AllergyIntolerance from './AllergyIntolerance';
 
@@ -14,88 +14,64 @@ import fhirIcons from '../../../fixtures/example-icons';
 import fhirVersions from '../fhirResourceVersions';
 import AllergyIntoleranceIcon from '../../../assets/containers/AllergyIntolerance/allergy-intolerance.svg';
 
-export default { title: 'AllergyIntolerance' };
+export default {
+  title: 'AllergyIntolerance',
+  component: AllergyIntolerance,
+  argTypes: {
+    ...defaultArgTypes,
+  },
+};
+
+const Template = args => <AllergyIntolerance {...args} />;
 
-export const DefaultVisualizationDSTU2 = () => {
-  const fhirResource = object('Resource', exampleAllergyIntoleranceDSTU2);
-  return (
-    <AllergyIntolerance
-      fhirVersion={fhirVersions.DSTU2}
-      fhirResource={fhirResource}
-      fhirIcons={require('../../../assets/containers/AllergyIntolerance/allergy-intolerance.svg')}
-    />
-  );
+export const DefaultVisualizationDSTU2 = Template.bind({});
+DefaultVisualizationDSTU2.args = {
+  fhirVersion: fhirVersions.DSTU2,
+  fhirResource: exampleAllergyIntoleranceDSTU2,
+  fhirIcons: require('../../../assets/containers/AllergyIntolerance/allergy-intolerance.svg'),
 };
 
-export const Example2ofDSTU2 = () => {
-  const fhirResource = object('Resource', example2AllergyIntoleranceDSTU2);
-  return (
-    <AllergyIntolerance
-      fhirVersion={fhirVersions.DSTU2}
-      fhirResource={fhirResource}
-      fhirIcons={AllergyIntoleranceIcon}
-    />
-  );
+export const Example2ofDSTU2 = Template.bind({});
+Example2ofDSTU2.args = {
+  fhirVersion: fhirVersions.DSTU2,
+  fhirResource: example2AllergyIntoleranceDSTU2,
+  fhirIcons: AllergyIntoleranceIcon,
 };
 
-export const ExampleDiagnosticReportSTU3 = () => {
-  const fhirResource = object('Resource', exampleAllergyIntoleranceSTU3);
-  return (
-    <AllergyIntolerance
-      fhirVersion={fhirVersions.STU3}
-      fhirResource={fhirResource}
-      fhirIcons={fhirIcons}
-    />
-  );
+export const ExampleDiagnosticReportSTU3 = Template.bind({});
+ExampleDiagnosticReportSTU3.args = {
+  fhirVersion: fhirVersions.STU3,
+  fhirResource: exampleAllergyIntoleranceSTU3,
+  fhirIcons: fhirIcons,
 };
 
-export const Example2DiagnosticReportSTU3 = () => {
-  const fhirResource = object('Resource', example2AllergyIntoleranceSTU3);
-  return (
-    <AllergyIntolerance
-      fhirVersion={fhirVersions.STU3}
-      fhirResource={fhirResource}
-      fhirIcons={false}
-    />
-  );
+export const Example2DiagnosticReportSTU3 = Template.bind({});
+Example2DiagnosticReportSTU3.args = {
+  fhirVersion: fhirVersions.STU3,
+  fhirResource: example2AllergyIntoleranceSTU3,
+  fhirIcons: false,
 };
 
-export const Example1R4 = () => {
-  const fhirResource = object('Resource', example1AllergyIntoleranceR4);
-  return (
-    <AllergyIntolerance
-      fhirVersion={fhirVersions.R4}
-      fhirResource={fhirResource}
-      fhirIcons={'random text'}
-    />
-  );
+export const Example1R4 = Template.bind({});
+Example1R4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: example1AllergyIntoleranceR4,
+  fhirIcons: 'random text',
 };
 
-export const Example2R4 = () => {
-  const fhirResource = object('Resource', example2AllergyIntoleranceR4);
-  return (
-    <AllergyIntolerance
-      fhirVersion={fhirVersions.R4}
-      fhirResource={fhirResource}
-      fhirIcons={fhirIcons}
-    />
-  );
+export const Example2R4 = Template.bind({});
+Example2R4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: example2AllergyIntoleranceR4,
 };
 
-export const Example3R4 = () => {
-  const fhirResource = object('Resource', example3AllergyIntoleranceR4);
-  return (
-    <AllergyIntolerance
-      fhirVersion={fhirVersions.R4}
-      fhirResource={fhirResource}
-      fhirIcons={fhirIcons}
-    />
-  );
+export const Example3R4 = Template.bind({});
+Example3R4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: example3AllergyIntoleranceR4,
 };
 
-export const ExampleWithoutFhirVersionProperty = () => {
-  const fhirResource = object('Resource', example2AllergyIntoleranceSTU3);
-  return (
-    <AllergyIntolerance fhirResource={fhirResource} fhirIcons={fhirIcons} />
-  );
+export const ExampleWithoutFhirVersionProperty = Template.bind({});
+ExampleWithoutFhirVersionProperty.args = {
+  fhirResource: example2AllergyIntoleranceSTU3,
 };

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 import AllergyIntolerance from './AllergyIntolerance';
 
 import exampleAllergyIntoleranceDSTU2 from '../../../fixtures/dstu2/resources/allergyIntolerance/example1.json';
@@ -201,4 +201,39 @@ describe('should render component correctly', () => {
 
     expect(queryByTestId('asserter')).toBeNull();
   });
+
+  it('should fire custom onClick function', () => {
+    const defaultProps = {
+      fhirResource: example2AllergyIntoleranceR4,
+      fhirVersion: fhirVersions.R4,
+    };
+
+    const onClick = jest.fn();
+    const { getByRole } = render(
+      <AllergyIntolerance {...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: example2AllergyIntoleranceR4,
+      fhirVersion: fhirVersions.R4,
+    };
+
+    const onClick = 'test';
+    const { getByRole } = render(
+      <AllergyIntolerance {...defaultProps} onClick={onClick} />,
+    );
+    const accordion = getByRole('button');
+    fireEvent.click(accordion);
+
+    const attribute = accordion.getAttribute('data-bs-toggle');
+    expect(attribute).toEqual('collapse');
+  });
 });