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

fhir-react 0.3.7 → 0.3.10

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

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

@@ -8,11 +8,10 @@ import { getExtension } from './utils';
 import {
   Root,
   Header,
-  Title,
-  Value,
   Body,
   ValueSection,
   Badge,
+  ValueSectionItem,
 } from '../../ui';
 import Date from '../../datatypes/Date';
 import Reference from '../../datatypes/Reference';
@@ -20,6 +19,7 @@ import Entries from './Entries';
 import Identifier from '../../datatypes/Identifier/Identifier';
 import CodeableConcept from '../../datatypes/CodeableConcept';
 import DrugTierDefinitionExtension from './DrugTierDefinitionExtension';
+import Accordion from '../../containers/Accordion';
 const commonDTO = fhirResource => {
   const id = _get(fhirResource, 'id');
@@ -125,8 +125,14 @@ const resourceDTO = (fhirVersion, fhirResource, withDaVinciPDex) => {
   }
 };
-const List = props => {
-  const { fhirResource, fhirVersion, withDaVinciPDex = false } = props;
+const List = ({
+  fhirResource,
+  fhirVersion,
+  withDaVinciPDex = false,
+  fhirIcons,
+  onClick,
+  rawOnClick,
+}) => {
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource, withDaVinciPDex);
@@ -156,95 +162,138 @@ const List = props => {
     usdfPlanIDType,
   } = fhirResourceData;
+  const tableData = [
+    {
+      label: 'Identifier',
+      testId: 'identifier',
+      data:
+        identifier &&
+        identifier.map((id, index) => (
+          <div key={`identifier-${index}`}>
+            <Identifier fhirData={id} />
+          </div>
+        )),
+      status: identifier,
+    },
+    {
+      label: 'Mode',
+      testId: 'mode',
+      data: mode,
+      status: mode,
+    },
+    {
+      label: 'code',
+      testId: 'code',
+      data: code && <CodeableConcept fhirData={code} />,
+      status: code,
+    },
+    {
+      label: 'Subject',
+      testId: 'subject',
+      data: subject && <Reference fhirData={subject} />,
+      status: subject,
+    },
+    {
+      label: 'Date',
+      testId: 'date',
+      data: date && <Date fhirData={date} isBlack />,
+      status: date,
+    },
+    {
+      label: 'Source',
+      testId: 'source',
+      data: source && <Reference fhirData={source} />,
+      status: source,
+    },
+  ];
+  const extensionData = [
+    {
+      label: 'Network',
+      testId: 'usdfNetwork',
+      data: usdfNetwork,
+      status: usdfNetwork,
+    },
+    {
+      label: 'Summary URL',
+      testId: 'usdfSummaryURL',
+      data: usdfSummaryURL,
+      status: usdfSummaryURL,
+    },
+    {
+      label: 'Formulary URL',
+      testId: 'usdfFormularyURL',
+      data: usdfFormularyURL,
+      status: usdfFormularyURL,
+    },
+    {
+      label: 'Email Plan Contact',
+      testId: 'usdfEmailPlanContact',
+      data: usdfEmailPlanContact,
+      status: usdfEmailPlanContact,
+    },
+    {
+      label: 'Marketing URL',
+      testId: 'usdfMarketingURL',
+      data: usdfMarketingURL,
+      status: usdfMarketingURL,
+    },
+    {
+      label: 'Plan ID Type',
+      testId: 'usdfPlanIDType',
+      data: usdfPlanIDType,
+      status: usdfPlanIDType,
+    },
+  ];
   return (
     <Root name="List">
-      <Header>
-        <Title>
-          {title || 'List'} {id && id}{' '}
-          {status && <Badge data-testid="status">{status}</Badge>}
-        </Title>
-      </Header>
-      <Body>
-        {identifier && (
-          <Value label="Identifier" data-testid="identifier">
-            {identifier.map((id, index) => (
-              <div key={`identifier-${index}`}>
-                <Identifier fhirData={id} />
-              </div>
-            ))}
-          </Value>
-        )}
-        {mode && (
-          <Value label="Mode" data-testid="mode">
-            {mode}
-          </Value>
-        )}
-        {code && (
-          <Value label="code" data-testid="code">
-            <CodeableConcept fhirData={code} />
-          </Value>
-        )}
-        {subject && (
-          <Value label="Subject" data-testid="subject">
-            <Reference fhirData={subject} />
-          </Value>
-        )}
-        {date && (
-          <Value label="Date" data-testid="date">
-            <Date fhirData={date} />
-          </Value>
-        )}
-        {source && (
-          <Value label="Source" data-testid="source">
-            <Reference fhirData={source} />
-          </Value>
-        )}
-        {entry && <Entries fhirData={entry} />}
+      <Accordion
+        headerContent={
+          <Header
+            resourceName="List"
+            title={`${title || 'List'} ${id && id} `}
+            badges={status && <Badge data-testid="status">{status}</Badge>}
+            icon={fhirIcons}
+          />
+        }
+        bodyContent={
+          <Body tableData={tableData}>
+            {entry && <Entries fhirData={entry} />}
-        {hasExtensions && (
-          <ValueSection label="USDF extensions" data-testid="usdfExtensions">
-            {usdfDrugTierDefinition && (
-              <DrugTierDefinitionExtension
-                drugTierDefinitionExtension={usdfDrugTierDefinition}
-                data-testid="usdfDrugTierDefinition"
-              />
-            )}
-            {usdfNetwork && (
-              <Value label="Network" data-testid="usdfNetwork">
-                {usdfNetwork}
-              </Value>
-            )}
-            {usdfSummaryURL && (
-              <Value label="Summary URL" data-testid="usdfSummaryURL">
-                {usdfSummaryURL}
-              </Value>
-            )}
-            {usdfFormularyURL && (
-              <Value label="Formulary URL" data-testid="usdfFormularyURL">
-                {usdfFormularyURL}
-              </Value>
-            )}
-            {usdfEmailPlanContact && (
-              <Value
-                label="Email Plan Contact"
-                data-testid="usdfEmailPlanContact"
+            {hasExtensions && (
+              <ValueSection
+                label="USDF extensions"
+                data-testid="usdfExtensions"
+                marginTop
               >
-                {usdfEmailPlanContact}
-              </Value>
-            )}
-            {usdfMarketingURL && (
-              <Value label="Marketing URL" data-testid="usdfMarketingURL">
-                {usdfMarketingURL}
-              </Value>
-            )}
-            {usdfPlanIDType && (
-              <Value label="Plan ID Type" data-testid="usdfPlanIDType">
-                {usdfPlanIDType}
-              </Value>
+                {usdfDrugTierDefinition && (
+                  <DrugTierDefinitionExtension
+                    drugTierDefinitionExtension={usdfDrugTierDefinition}
+                    data-testid="usdfDrugTierDefinition"
+                  />
+                )}
+                <ValueSection marginTop>
+                  {extensionData.map(
+                    (item, index) =>
+                      item.status && (
+                        <ValueSectionItem
+                          key={`extension-item-${index}`}
+                          label={item.label}
+                          data-testid={item.testId}
+                        >
+                          {item.data}
+                        </ValueSectionItem>
+                      ),
+                  )}
+                </ValueSection>
+              </ValueSection>
             )}
-          </ValueSection>
-        )}
-      </Body>
+          </Body>
+        }
+        onClick={onClick}
+        rawOnClick={rawOnClick}
+      />
     </Root>
   );
 };

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { object } from '@storybook/addon-knobs';
+import { defaultArgTypes } from '../../defaultArgTypes';
 import List from './List';
 import fhirVersions from '../fhirResourceVersions';
@@ -14,62 +14,91 @@ import example1R4 from '../../../fixtures/r4/resources/list/example1.json';
 import example2R4 from '../../../fixtures/r4/resources/list/example2.json';
 import example3R4 from '../../../fixtures/r4/resources/list/example3.json';
+import fhirIcons from '../../../fixtures/example-icons';
+import ListIcon from '../../../assets/containers/List/list.svg';
 export default {
   title: 'List',
+  component: List,
+  argTypes: {
+    ...defaultArgTypes,
+    withDaVinciPDex: {
+      table: {
+        disable: true,
+      },
+    },
+  },
 };
-export const DefaultVisualizationDSTU2 = () => {
-  const fhirResource = object('Resource', example1Dstu2);
-  return <List fhirVersion={fhirVersions.DSTU2} fhirResource={fhirResource} />;
+const Template = args => <List {...args} />;
+export const DefaultVisualizationDSTU2 = Template.bind({});
+DefaultVisualizationDSTU2.args = {
+  fhirVersion: fhirVersions.DSTU2,
+  fhirResource: example1Dstu2,
+  fhirIcons: require('../../../assets/containers/List/list.svg'),
 };
-export const Example2DSTU2 = () => {
-  const fhirResource = object('Resource', example2Dstu2);
-  return <List fhirVersion={fhirVersions.DSTU2} fhirResource={fhirResource} />;
+export const Example2DSTU2 = Template.bind({});
+Example2DSTU2.args = {
+  fhirVersion: fhirVersions.DSTU2,
+  fhirResource: example2Dstu2,
+  fhirIcons: ListIcon,
 };
-export const Example3DSTU2 = () => {
-  const fhirResource = object('Resource', example3Dstu2);
-  return <List fhirVersion={fhirVersions.DSTU2} fhirResource={fhirResource} />;
+export const Example3DSTU2 = Template.bind({});
+Example3DSTU2.args = {
+  fhirVersion: fhirVersions.DSTU2,
+  fhirResource: example3Dstu2,
+  fhirIcons: fhirIcons,
 };
-export const DefaultVisualizationSTU3 = () => {
-  const fhirResource = object('Resource', example1Stu3);
-  return <List fhirVersion={fhirVersions.STU3} fhirResource={fhirResource} />;
+export const DefaultVisualizationSTU3 = Template.bind({});
+DefaultVisualizationSTU3.args = {
+  fhirVersion: fhirVersions.STU3,
+  fhirResource: example1Stu3,
+  fhirIcons: false,
 };
-export const Example2STU3 = () => {
-  const fhirResource = object('Resource', example2Stu3);
-  return <List fhirVersion={fhirVersions.STU3} fhirResource={fhirResource} />;
+export const Example2STU3 = Template.bind({});
+Example2STU3.args = {
+  fhirVersion: fhirVersions.STU3,
+  fhirResource: example2Stu3,
+  fhirIcons: 'random text',
 };
-export const Example3STU3 = () => {
-  const fhirResource = object('Resource', example3Stu3);
-  return <List fhirVersion={fhirVersions.STU3} fhirResource={fhirResource} />;
+export const Example3STU3 = Template.bind({});
+Example3STU3.args = {
+  fhirVersion: fhirVersions.STU3,
+  fhirResource: example3Stu3,
 };
-export const DefaultVisualizationR4 = () => {
-  const fhirResource = object('Resource', example1R4);
-  return <List fhirVersion={fhirVersions.R4} fhirResource={fhirResource} />;
+export const DefaultVisualizationR4 = Template.bind({});
+DefaultVisualizationR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: example1R4,
 };
-export const ExampleR4WithoutDaVinciPDex = () => {
-  const fhirResource = object('Resource', example2R4);
-  return <List fhirVersion={fhirVersions.R4} fhirResource={fhirResource} />;
+export const ExampleR4WithoutDaVinciPDex = Template.bind({});
+ExampleR4WithoutDaVinciPDex.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: example2R4,
 };
-export const ExampleR4WithDaVinciPDex = () => {
-  const fhirResource = object('Resource', example2R4);
-  return (
-    <List
-      fhirVersion={fhirVersions.R4}
-      fhirResource={fhirResource}
-      withDaVinciPDex
-    />
-  );
+export const ExampleR4WithDaVinciPDex = Template.bind({});
+ExampleR4WithDaVinciPDex.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: example2R4,
+  withDaVinciPDex: true,
 };
-export const Example2R4 = () => {
-  const fhirResource = object('Resource', example3R4);
-  return <List fhirVersion={fhirVersions.R4} fhirResource={fhirResource} />;
+export const Example2R4 = Template.bind({});
+Example2R4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: example3R4,
 };
-export const ExampleWithoutFHIRVersionProperty = () => {
-  const fhirResource = object('Resource', example3R4);
-  return <List fhirResource={fhirResource} />;
+export const ExampleWithoutFHIRVersionProperty = Template.bind({});
+ExampleWithoutFHIRVersionProperty.args = {
+  fhirResource: example3R4,
 };

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 import { fhirVersions } from '../../../index';
@@ -7,8 +7,79 @@ import List from './List';
 import example1Dstu2 from '../../../fixtures/dstu2/resources/list/example1.json';
 import example2R4 from '../../../fixtures/r4/resources/list/example2.json';
+import fhirIcons from '../../../fixtures/example-icons';
 describe('should render List component properly', () => {
+  it('component without a fhirIcons props should render a default icon', () => {
+    const defaultProps = {
+      fhirVersion: fhirVersions.DSTU2,
+      fhirResource: example1Dstu2,
+    };
+    const { getByAltText } = render(<List {...defaultProps} />);
+    const headerIcon = getByAltText('list');
+    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: example1Dstu2,
+      fhirIcons: false,
+    };
+    const { getByTestId } = render(<List {...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: example1Dstu2,
+      fhirIcons: (
+        <img
+          src={require('../assets/containers/List/list.svg')}
+          alt="checklist"
+        />
+      ),
+    };
+    const { getByAltText } = render(<List {...defaultProps} />);
+    const headerIcon = getByAltText('checklist');
+    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: example1Dstu2,
+      fhirIcons: fhirIcons,
+    };
+    const { getByAltText } = render(<List {...defaultProps} />);
+    const headerIcon = getByAltText('checklist');
+    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: example1Dstu2,
+      fhirIcons: avatarSrc,
+    };
+    const { getByAltText } = render(<List {...defaultProps} />);
+    const headerIcon = getByAltText('header icon');
+    expect(headerIcon.getAttribute('src')).toContain(avatarSrc);
+  });
   it('should render with DSTU2 source data', () => {
     const defaultProps = {
       fhirResource: example1Dstu2,
@@ -92,4 +163,37 @@ describe('should render List component properly', () => {
     );
     expect(getByTestId('usdfPlanIDType').textContent).toContain('HIOS-PLAN-ID');
   });
+  it('should fire custom onClick function', () => {
+    const defaultProps = {
+      fhirResource: example2R4,
+      fhirVersion: fhirVersions.R4,
+      withDaVinciPDex: true,
+    };
+    const onClick = jest.fn();
+    const { getByRole } = render(<List {...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: example2R4,
+      fhirVersion: fhirVersions.R4,
+      withDaVinciPDex: true,
+    };
+    const onClick = 'test';
+    const { getByRole } = render(<List {...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/Location/Location.js CHANGED Viewed

@@ -2,14 +2,14 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import _get from 'lodash/get';
-import { Root, Header, Title, Badge, Body, Value } from '../../ui';
+import { Root, Header, Badge, Body } from '../../ui';
 import Address from '../../datatypes/Address';
 import Telecom from '../../datatypes/Telecom';
 import CodeableConcept from '../../datatypes/CodeableConcept';
 import Reference from '../../datatypes/Reference';
+import Accordion from '../../containers/Accordion';
-const Location = props => {
-  const { fhirResource } = props;
+const Location = ({ fhirResource, fhirIcons, onClick, rawOnClick }) => {
   const name = _get(fhirResource, 'name');
   const status = _get(fhirResource, 'status');
   const description = _get(fhirResource, 'description');
@@ -19,52 +19,71 @@ const Location = props => {
   const physicalType = _get(fhirResource, 'physicalType');
   const mode = _get(fhirResource, 'mode');
   const managingOrganization = _get(fhirResource, 'managingOrganization');
+  const tableData = [
+    {
+      label: 'Type',
+      testId: 'type',
+      data: type && <CodeableConcept fhirData={type} isCursive />,
+      status: type,
+    },
+    {
+      label: 'Physical type',
+      testId: 'physicalType',
+      data: physicalType && (
+        <CodeableConcept fhirData={physicalType} isCursive />
+      ),
+      status: physicalType,
+    },
+    {
+      label: 'Location mode',
+      testId: 'mode',
+      data: mode,
+      status: mode,
+    },
+    {
+      label: 'Description',
+      testId: 'description',
+      data: description,
+      status: description,
+    },
+    {
+      label: 'Address',
+      testId: 'address',
+      data: address && <Address fhirData={address} />,
+      status: address,
+    },
+    {
+      label: 'Telecom',
+      testId: 'telecom',
+      data: telecom && <Telecom fhirData={telecom} noSystemData />,
+      status: telecom,
+    },
+    {
+      label: 'Managing organization',
+      testId: 'managingOrganization',
+      data: managingOrganization && (
+        <Reference fhirData={managingOrganization} />
+      ),
+      status: managingOrganization,
+    },
+  ];
   return (
     <Root name="Location">
-      <Header>
-        {name && <Title>{name}</Title>}
-        {status && <Badge data-testid="status">{status}</Badge>}
-      </Header>
-      <Body>
-        {type && (
-          <Value label="Type" data-testid="type">
-            <CodeableConcept fhirData={type} />
-          </Value>
-        )}
-        {physicalType && (
-          <Value label="Physical type" data-testid="physicalType">
-            <CodeableConcept fhirData={physicalType} />
-          </Value>
-        )}
-        {mode && (
-          <Value label="Location mode" data-testid="mode">
-            {mode}
-          </Value>
-        )}
-        {description && (
-          <Value label="Description" data-testid="description">
-            {description}
-          </Value>
-        )}
-        {address && (
-          <Value label="Address" data-testid="address">
-            <Address fhirData={address} />
-          </Value>
-        )}
-        {telecom && (
-          <Value label="Telecom" data-testid="telecom">
-            <Telecom fhirData={telecom} />
-          </Value>
-        )}
-        {managingOrganization && (
-          <Value
-            label="Managing organization"
-            data-testid="managingOrganization"
-          >
-            <Reference fhirData={managingOrganization} />
-          </Value>
-        )}
-      </Body>
+      <Accordion
+        headerContent={
+          <Header
+            resourceName="Location"
+            title={name}
+            badges={status && <Badge data-testid="status">{status}</Badge>}
+            icon={fhirIcons}
+          />
+        }
+        bodyContent={<Body tableData={tableData} />}
+        onClick={onClick}
+        rawOnClick={rawOnClick}
+      />
     </Root>
   );
 };