fhir-react 0.3.2 → 0.3.6

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

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

package/src/components/resources/Procedure/Procedure.js

@@ -37,7 +37,6 @@ const Procedure = props => {
   const note = _get(fhirResource, 'note', []);
   const outcome = _get(fhirResource, 'outcome');
 
-  const headerIcon = fhirIcons && fhirIcons[_get(fhirResource, 'resourceType')];
   const tableData = [
     {
       label: 'Identification',
@@ -121,7 +120,7 @@ const Procedure = props => {
               </>
             }
             badges={status && <Badge data-testid="status">{status}</Badge>}
-            icon={headerIcon}
+            icon={fhirIcons}
             title={display}
           />
         }

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

@@ -12,17 +12,23 @@ import r4Example2 from '../../../fixtures/r4/resources/procedure/example2.json';
 import r4Example3 from '../../../fixtures/r4/resources/procedure/example3.json';
 
 import fhirIcons from '../../../fixtures/example-icons';
+import ProcedureIcon from '../../../assets/containers/Procedure/procedure.svg';
 
 export default { title: 'Procedure' };
 
 export const DefaultVisualizationDSTU2 = () => {
   const fhirResource = object('Resource', example1);
-  return <Procedure fhirResource={fhirResource} fhirIcons={fhirIcons} />;
+  return (
+    <Procedure
+      fhirResource={fhirResource}
+      fhirIcons={require('../../../assets/containers/Procedure/procedure.svg')}
+    />
+  );
 };
 
 export const ExampleOfSTU3 = () => {
   const fhirResource = object('Resource', stu3Example1);
-  return <Procedure fhirResource={fhirResource} fhirIcons={fhirIcons} />;
+  return <Procedure fhirResource={fhirResource} fhirIcons={ProcedureIcon} />;
 };
 
 export const Example2OfSTU3 = () => {
@@ -32,15 +38,15 @@ export const Example2OfSTU3 = () => {
 
 export const Example1OfR4 = () => {
   const fhirResource = object('Resource', r4Example1);
-  return <Procedure fhirResource={fhirResource} fhirIcons={fhirIcons} />;
+  return <Procedure fhirResource={fhirResource} fhirIcons={false} />;
 };
 
 export const Example2OfR4 = () => {
   const fhirResource = object('Resource', r4Example2);
-  return <Procedure fhirResource={fhirResource} fhirIcons={fhirIcons} />;
+  return <Procedure fhirResource={fhirResource} fhirIcons={'random text'} />;
 };
 
 export const Example3OfR4 = () => {
   const fhirResource = object('Resource', r4Example3);
-  return <Procedure fhirResource={fhirResource} fhirIcons={fhirIcons} />;
+  return <Procedure fhirResource={fhirResource} />;
 };

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

@@ -5,10 +5,80 @@ import r4Example2 from '../../../fixtures/r4/resources/procedure/example2.json';
 import r4Example3 from '../../../fixtures/r4/resources/procedure/example3.json';
 import { render } from '@testing-library/react';
 import stu3Example1 from '../../../fixtures/stu3/resources/procedure/example1.json';
-
 import fhirIcons from '../../../fixtures/example-icons';
+import fhirVersions from '../fhirResourceVersions';
 
 describe('Procedure should render component correctly', () => {
+  it('component without a fhirIcons props should render a default icon', () => {
+    const defaultProps = {
+      fhirVersion: fhirVersions.DSTU2,
+      fhirResource: dstu2Example1,
+    };
+
+    const { getByAltText } = render(<Procedure {...defaultProps} />);
+    const headerIcon = getByAltText('procedure');
+
+    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(<Procedure {...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/Procedure/procedure.svg')}
+          alt="procedure"
+        />
+      ),
+    };
+
+    const { getByAltText } = render(<Procedure {...defaultProps} />);
+    const headerIcon = getByAltText('procedure');
+
+    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(<Procedure {...defaultProps} />);
+    const headerIcon = getByAltText('procedure');
+
+    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,
+      fhirIcons: avatarSrc,
+    };
+
+    const { getByAltText } = render(<Procedure {...defaultProps} />);
+    const headerIcon = getByAltText('header icon');
+
+    expect(headerIcon.getAttribute('src')).toContain(avatarSrc);
+  });
+
   it('should render component correctly with DSTU2 source data', () => {
     const defaultProps = {
       fhirResource: dstu2Example1,

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

@@ -1,18 +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';
 
-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 = fhirIcons && fhirIcons['ResourceCategory'];
   const parsedItemsCount = parseNumber(itemsCount);
 
   return (
@@ -22,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/components/ui/bootstrap-reboot.min.css

@@ -173,8 +173,14 @@ sup {
 .fhir-resource kbd,
 .fhir-resource pre,
 .fhir-resource samp {
-  font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
-    'Courier New', monospace;
+  font-family:
+    SFMono-Regular,
+    Menlo,
+    Monaco,
+    Consolas,
+    'Liberation Mono',
+    'Courier New',
+    monospace;
   font-size: 1em;
 }
 

package/src/components/ui/index.js

@@ -3,62 +3,70 @@ import React from 'react';
 import { getBadgeColor } from '../../utils/getBadgeColor';
 import HeaderIcon from '../datatypes/HeaderIcon';
 
-export const Header = props => {
+export const Header = ({
+  resourceName,
+  isAccordionOpenable,
+  icon,
+  titleTestID,
+  title,
+  prefixBadge,
+  badges,
+  additionalBadge,
+  additionalContent,
+  rightAdditionalContent,
+  children,
+}) => {
   const rightItemsClass = 'align-items-center flex-fill d-flex';
 
   return (
     <>
       {// This condition was left due to fact, that to much changes in Header will generate many errors in tests. This condition will be removed after all changes have been made.
-      props.children || (
+      children || (
         <div
-          className={`fhir-ui__${props.resourceName}-Header w-100 p-4 position-relative`}
+          className={`fhir-ui__${resourceName}-Header w-100 p-4 position-relative`}
         >
           <div
-            className={`fhir-ui__${props.resourceName}-Header__title-data ${
-              props.isAccordionOpenable ? 'header__title-row' : ''
+            className={`fhir-ui__${resourceName}-Header__title-data ${
+              isAccordionOpenable ? 'header__title-row' : ''
             } d-flex w-100 flex-column flex-sm-row`}
           >
             <div className="d-flex">
               <div
-                className={`fhir-ui__${props.resourceName}-Header__icon flex-shrink-1 m-half me-2`}
+                className={`fhir-ui__${resourceName}-Header__icon d-flex align-items-center flex-shrink-1 m-half me-2`}
               >
-                <HeaderIcon headerIcon={props.icon} />
+                <HeaderIcon headerIcon={icon} resourceName={resourceName} />
               </div>
               <div
-                className={`fhir-ui__${props.resourceName}-Header__title flex-fill text-start`}
+                className={`fhir-ui__${resourceName}-Header__title flex-fill text-start`}
               >
-                <Title data-testid={props.titleTestID || 'title'}>
-                  {props.title || ''}
+                <Title data-testid={titleTestID || 'title'}>
+                  {title || ''}
                 </Title>
               </div>
             </div>
 
             <div
-              className={`fhir-ui__${props.resourceName}-Header__badges ps-1 ps-sm-2 mt-3 mt-sm-0 badges-max-width-sm flex-wrap flex-sm-nowrap justify-content-between justify-content-sm-end ${rightItemsClass}`}
+              className={`fhir-ui__${resourceName}-Header__badges ps-1 ps-sm-2 mt-3 mt-sm-0 badges-max-width-sm flex-wrap flex-sm-nowrap justify-content-between justify-content-sm-end ${rightItemsClass}`}
             >
-              {props.prefixBadge && (
-                <div className="me-3">{props.prefixBadge}</div>
-              )}
+              {prefixBadge && <div className="me-3">{prefixBadge}</div>}
               <div className="d-flex">
-                {props.badges}
-                {props.additionalBadge && (
-                  <div className="ms-3">{props.additionalBadge}</div>
+                {badges}
+                {additionalBadge && (
+                  <div className="ms-3">{additionalBadge}</div>
                 )}
               </div>
             </div>
           </div>
           <div
-            className={`fhir-ui__${
-              props.resourceName
-            }-Header__additional-content w-100 justify-content-start d-flex  ${
-              props.additionalContent ? ' pt-2' : ''
+            className={`fhir-ui__${resourceName}-Header__additional-content w-100 justify-content-start d-flex  ${
+              additionalContent ? ' pt-2' : ''
             }`}
           >
-            {props.additionalContent}
+            {additionalContent}
             <div
-              className={`fhir-ui__${props.resourceName}-Header__rightAdditionalContent justify-content-end ${rightItemsClass}`}
+              className={`fhir-ui__${resourceName}-Header__rightAdditionalContent justify-content-end ${rightItemsClass}`}
             >
-              {props.rightAdditionalContent}
+              {rightAdditionalContent}
             </div>
           </div>
         </div>
@@ -213,10 +221,21 @@ export const ValueSection = props => (
   </div>
 );
 
-export const MissingValue = props => (
+export const MissingValue = () => (
   <span className="fhir-ui__MissingValue">-</span>
 );
 
+export const ValueSectionItem = props => {
+  return (
+    <div className="d-flex flex-column flex-sm-row my-2">
+      <div className="dataTable__value-label ps-0">
+        <Label>{props.label}</Label>
+      </div>
+      <Data data-testid={props['data-testid']}>{props.children}</Data>
+    </div>
+  );
+};
+
 export const NotEnoughData = props => (
   <div data-testid={props['data-testid']} className="fhir-ui__NotEnoughData">
     No additional data