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/Device/Device.js CHANGED Viewed

@@ -11,13 +11,12 @@ import UnhandledResourceDataStructure from '../UnhandledResourceDataStructure';
 import {
   Root,
   Header,
-  Title,
   Badge,
-  BadgeSecondary,
   Body,
-  Value,
   MissingValue,
+  ValueSectionItem,
 } from '../../ui';
+import Accordion from '../../containers/Accordion';
 const commonDTO = fhirResource => {
   const model = _get(fhirResource, 'model', 'Device');
@@ -103,8 +102,7 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
-const Device = props => {
-  const { fhirResource, fhirVersion } = props;
+const Device = ({ fhirResource, fhirVersion, fhirIcons }) => {
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -130,35 +128,57 @@ const Device = props => {
   const safetyArr = hasSafety && !Array.isArray(safety) ? [safety] : safety;
   return (
     <Root name="Device">
-      <Header>
-        {model && <Title>{model}</Title>}
-        {status && <Badge data-testid="status">{status}</Badge>}
-        {hasExpiry && (
-          <BadgeSecondary data-testid="expiry">
-            expires on <Date fhirData={getExpiry} />
-          </BadgeSecondary>
-        )}
-      </Header>
-      <Body>
-        {hasTypeCoding && (
-          <Value data-testid="typeCoding" label="Type">
-            {getTypeCoding.map((coding, i) => (
-              <Coding key={`item-${i}`} fhirData={coding} />
-            ))}
-          </Value>
-        )}
-        <Value label="Unique device identifier" data-testid="uniqueId">
-          {getUdi ? getUdi : <MissingValue />}
-        </Value>
-        {udiCarrierAIDC && <Value label="AIDC barcode">{udiCarrierAIDC}</Value>}
-        {udiCarrierHRF && <Value label="HRF barcode">{udiCarrierHRF}</Value>}
-        {hasSafety &&
-          safetyArr.map((item, i) => (
-            <Value label="HRF barcode" key={`safety-${i}`}>
-              <CodeableConcept fhirData={item} />
-            </Value>
-          ))}
-      </Body>
+      <Accordion
+        headerContent={
+          <Header
+            icon={fhirIcons}
+            resourceName="Device"
+            badges={status && <Badge data-testid="status">{status}</Badge>}
+            title={model}
+            additionalContent={
+              hasExpiry && (
+                <div data-testid="expiry">
+                  <span className="text-secondary">expires on</span>{' '}
+                  <Date fhirData={getExpiry} isBlack />
+                </div>
+              )
+            }
+          />
+        }
+        bodyContent={
+          <Body>
+            {hasTypeCoding && (
+              <ValueSectionItem data-testid="typeCoding" label="Type">
+                {getTypeCoding.map((coding, i) => (
+                  <Coding key={`item-${i}`} fhirData={coding} />
+                ))}
+              </ValueSectionItem>
+            )}
+            <ValueSectionItem
+              label="Unique device identifier"
+              data-testid="uniqueId"
+            >
+              {getUdi ? getUdi : <MissingValue />}
+            </ValueSectionItem>
+            {udiCarrierAIDC && (
+              <ValueSectionItem label="AIDC barcode">
+                {udiCarrierAIDC}
+              </ValueSectionItem>
+            )}
+            {udiCarrierHRF && (
+              <ValueSectionItem label="HRF barcode">
+                {udiCarrierHRF}
+              </ValueSectionItem>
+            )}
+            {hasSafety &&
+              safetyArr.map((item, i) => (
+                <ValueSectionItem label="HRF barcode" key={`safety-${i}`}>
+                  <CodeableConcept fhirData={item} />
+                </ValueSectionItem>
+              ))}
+          </Body>
+        }
+      />
     </Root>
   );
 };

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

@@ -10,6 +10,8 @@ import stu3Example2 from '../../../fixtures/stu3/resources/device/example2.json'
 import r4Example1 from '../../../fixtures/r4/resources/device/example1.json';
 import r4Example2 from '../../../fixtures/r4/resources/device/example2.json';
 import fhirVersions from '../fhirResourceVersions';
+import DeviceIcon from '../../../assets/containers/Device/device.svg';
+import fhirIcons from '../../../fixtures/example-icons';
 export default {
   title: 'Device',
@@ -18,29 +20,55 @@ export default {
 export const DefaultVisualizationDSTU2 = () => {
   const fhirResource = object('Resource', dstu2Example1);
   return (
-    <Device fhirResource={fhirResource} fhirVersion={fhirVersions.DSTU2} />
+    <Device
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.DSTU2}
+      fhirIcons={require('../../../assets/containers/Device/device.svg')}
+    />
   );
 };
 export const ExampleOfDSTU2 = () => {
   const fhirResource = object('Resource', dstu2Example2);
   return (
-    <Device fhirResource={fhirResource} fhirVersion={fhirVersions.DSTU2} />
+    <Device
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.DSTU2}
+      fhirIcons={DeviceIcon}
+    />
   );
 };
 export const Example1OfSTU3 = () => {
   const fhirResource = object('Resource', stu3Example1);
-  return <Device fhirResource={fhirResource} fhirVersion={fhirVersions.STU3} />;
+  return (
+    <Device
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.STU3}
+      fhirIcons={fhirIcons}
+    />
+  );
 };
 export const Example2OfSTU3 = () => {
   const fhirResource = object('Resource', stu3Example2);
-  return <Device fhirResource={fhirResource} fhirVersion={fhirVersions.STU3} />;
+  return (
+    <Device
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.STU3}
+      fhirIcons={false}
+    />
+  );
 };
 export const Example1OfR4 = () => {
   const fhirResource = object('Resource', r4Example1);
-  return <Device fhirResource={fhirResource} fhirVersion={fhirVersions.R4} />;
+  return (
+    <Device
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.R4}
+      fhirIcons={'random text'}
+    />
+  );
 };
 export const Example2OfR4 = () => {

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

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

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

@@ -7,16 +7,9 @@ import _get from 'lodash/get';
 import _has from 'lodash/has';
 import fhirVersions from '../fhirResourceVersions';
 import UnhandledResourceDataStructure from '../UnhandledResourceDataStructure';
+import Accordion from '../../containers/Accordion';
-import {
-  Root,
-  Header,
-  Title,
-  Badge,
-  BadgeSecondary,
-  Body,
-  Value,
-} from '../../ui';
+import { Root, Header, Badge, Body, Value } from '../../ui';
 const commonDTO = fhirResource => {
   const title =
@@ -101,7 +94,7 @@ const resourceDTO = (fhirVersion, fhirResource) => {
 };
 const DiagnosticReport = props => {
-  const { fhirResource, fhirVersion } = props;
+  const { fhirResource, fhirVersion, fhirIcons } = props;
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -121,41 +114,58 @@ const DiagnosticReport = props => {
     performer,
     issued,
   } = fhirResourceData;
+  const tableData = [
+    {
+      label: 'Issued',
+      testId: 'issued',
+      data: <Date fhirData={issued} isBlack />,
+      status: issued,
+    },
+    {
+      label: 'Category',
+      testId: 'categoryCoding',
+      data:
+        categoryCoding &&
+        categoryCoding.map((coding, i) => (
+          <Coding key={`item-${i}`} fhirData={coding} />
+        )),
+      status: hasCategoryCoding,
+    },
+    {
+      label: 'Performer',
+      testId: 'performer',
+      data: <Reference fhirData={performer} />,
+      status: hasPerformer,
+    },
+    {
+      label: 'Conclusion',
+      testId: 'conclusion',
+      data: conclusion,
+      status: conclusion,
+    },
+  ];
   return (
     <Root name="DiagnosticReport">
-      <Header>
-        <Title data-testid="title">{title}</Title>
-        {status && <Badge data-testid="status">{status}</Badge>}
-        {effectiveDateTime && (
-          <BadgeSecondary data-testid="effectiveDateTime">
-            <Date fhirData={effectiveDateTime} />
-          </BadgeSecondary>
-        )}
-      </Header>
-      <Body>
-        {issued && (
-          <Value label="Issued" data-testid="issued">
-            <Date fhirData={issued} />
-          </Value>
-        )}
-        {hasCategoryCoding && (
-          <Value label="Category" data-testid="categoryCoding">
-            {categoryCoding.map((coding, i) => (
-              <Coding key={`item-${i}`} fhirData={coding} />
-            ))}
-          </Value>
-        )}
-        {hasPerformer && (
-          <Value label="Performer" data-testid="performer">
-            <Reference fhirData={performer} />
-          </Value>
-        )}
-        {conclusion && (
-          <Value label="Conclusion" data-testid="conclusion">
-            {conclusion}
-          </Value>
-        )}
-      </Body>
+      <Accordion
+        headerContent={
+          <Header
+            icon={fhirIcons}
+            resourceName="DiagnosticReport"
+            badges={status && <Badge data-testid="status">{status}</Badge>}
+            title={title}
+            additionalContent={
+              effectiveDateTime && (
+                <Value label="On" data-testid="effectiveDateTime">
+                  <Date fhirData={effectiveDateTime} isBlack />
+                </Value>
+              )
+            }
+          />
+        }
+        bodyContent={<Body tableData={tableData} />}
+      />
     </Root>
   );
 };

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

@@ -9,6 +9,8 @@ import exampleDiagnosticReportSTU3 from '../../../fixtures/stu3/resources/diagno
 import exampleDiagnosticReportR4 from '../../../fixtures/r4/resources/diagnosticReport/example1.json';
 import example2DiagnosticReportR4 from '../../../fixtures/r4/resources/diagnosticReport/example2.json';
 import example3DiagnosticReportR4 from '../../../fixtures/r4/resources/diagnosticReport/example3.json';
+import fhirIcons from '../../../fixtures/example-icons';
+import DiagnosticReportIcon from '../../../assets/containers/DiagnosticReport/diagnostic-report.svg';
 export default { title: 'DiagnosticReport' };
@@ -18,6 +20,7 @@ export const DefaultVisualizationDSTU2 = () => {
     <DiagnosticReport
       fhirVersion={fhirVersions.DSTU2}
       fhirResource={fhirResource}
+      fhirIcons={require('../../../assets/containers/DiagnosticReport/diagnostic-report.svg')}
     />
   );
 };
@@ -28,6 +31,7 @@ export const ExampleDiagnosticReportSTU3 = () => {
     <DiagnosticReport
       fhirVersion={fhirVersions.STU3}
       fhirResource={fhirResource}
+      fhirIcons={DiagnosticReportIcon}
     />
   );
 };
@@ -38,6 +42,7 @@ export const ExampleDiagnosticReportR4 = () => {
     <DiagnosticReport
       fhirVersion={fhirVersions.R4}
       fhirResource={fhirResource}
+      fhirIcons={fhirIcons}
     />
   );
 };
@@ -48,6 +53,7 @@ export const Example2DiagnosticReportR4 = () => {
     <DiagnosticReport
       fhirVersion={fhirVersions.R4}
       fhirResource={fhirResource}
+      fhirIcons={false}
     />
   );
 };
@@ -58,11 +64,12 @@ export const Example3DiagnosticReportR4 = () => {
     <DiagnosticReport
       fhirVersion={fhirVersions.R4}
       fhirResource={fhirResource}
+      fhirIcons={'random text'}
     />
   );
 };
 export const ExampleWithoutFhirVersionProperty = () => {
   const fhirResource = object('Resource', exampleDiagnosticReportSTU3);
-  return <DiagnosticReport fhirResource={fhirResource} />;
+  return <DiagnosticReport fhirResource={fhirResource} fhirIcons={fhirIcons} />;
 };

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

@@ -7,8 +7,79 @@ import exampleDiagnosticReportDSTU2 from '../../../fixtures/dstu2/resources/diag
 import exampleDiagnosticReportSTU3 from '../../../fixtures/stu3/resources/diagnosticReport/example1.json';
 import exampleDiagnosticReportR4 from '../../../fixtures/r4/resources/diagnosticReport/example1.json';
 import example2DiagnosticReportR4 from '../../../fixtures/r4/resources/diagnosticReport/example2.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 = {
+      fhirResource: exampleDiagnosticReportDSTU2,
+      fhirVersion: fhirVersions.DSTU2,
+    };
+    const { getByAltText } = render(<DiagnosticReport {...defaultProps} />);
+    const headerIcon = getByAltText('diagnostic report');
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+  it('component with a false as a fhirIcons props should render a placeholder', () => {
+    const defaultProps = {
+      fhirResource: exampleDiagnosticReportDSTU2,
+      fhirVersion: fhirVersions.DSTU2,
+      fhirIcons: false,
+    };
+    const { getByTestId } = render(<DiagnosticReport {...defaultProps} />);
+    const headerIcon = getByTestId('placeholder');
+    expect(headerIcon).toBeTruthy();
+  });
+  it('component with the img as a fhirIcons props should render an img', () => {
+    const defaultProps = {
+      fhirResource: exampleDiagnosticReportDSTU2,
+      fhirVersion: fhirVersions.DSTU2,
+      fhirIcons: (
+        <img
+          src={require('../assets/containers/DiagnosticReport/diagnostic-report.svg')}
+          alt="diagnostic report"
+        />
+      ),
+    };
+    const { getByAltText } = render(<DiagnosticReport {...defaultProps} />);
+    const headerIcon = getByAltText('diagnostic report');
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+  it('component with the resources object as a fhirIcons props should render an img', () => {
+    const defaultProps = {
+      fhirResource: exampleDiagnosticReportDSTU2,
+      fhirVersion: fhirVersions.DSTU2,
+      fhirIcons: fhirIcons,
+    };
+    const { getByAltText } = render(<DiagnosticReport {...defaultProps} />);
+    const headerIcon = getByAltText('diagnostic report');
+    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: exampleDiagnosticReportDSTU2,
+      fhirVersion: fhirVersions.DSTU2,
+      fhirIcons: avatarSrc,
+    };
+    const { getByAltText } = render(<DiagnosticReport {...defaultProps} />);
+    const headerIcon = getByAltText('header icon');
+    expect(headerIcon.getAttribute('src')).toContain(avatarSrc);
+  });
   it('should render with DSTU2 source data', () => {
     const defaultProps = {
       fhirResource: exampleDiagnosticReportDSTU2,