fhir-react 0.2.2 → 0.3.1

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

@@ -11,34 +11,36 @@ import r4Example1 from '../../../fixtures/r4/resources/procedure/example1.json';
 import r4Example2 from '../../../fixtures/r4/resources/procedure/example2.json';
 import r4Example3 from '../../../fixtures/r4/resources/procedure/example3.json';
 
+import fhirIcons from '../../../fixtures/example-icons';
+
 export default { title: 'Procedure' };
 
 export const DefaultVisualizationDSTU2 = () => {
   const fhirResource = object('Resource', example1);
-  return <Procedure fhirResource={fhirResource} />;
+  return <Procedure fhirResource={fhirResource} fhirIcons={fhirIcons} />;
 };
 
 export const ExampleOfSTU3 = () => {
   const fhirResource = object('Resource', stu3Example1);
-  return <Procedure fhirResource={fhirResource} />;
+  return <Procedure fhirResource={fhirResource} fhirIcons={fhirIcons} />;
 };
 
 export const Example2OfSTU3 = () => {
   const fhirResource = object('Resource', stu3Example2);
-  return <Procedure fhirResource={fhirResource} />;
+  return <Procedure fhirResource={fhirResource} fhirIcons={fhirIcons} />;
 };
 
 export const Example1OfR4 = () => {
   const fhirResource = object('Resource', r4Example1);
-  return <Procedure fhirResource={fhirResource} />;
+  return <Procedure fhirResource={fhirResource} fhirIcons={fhirIcons} />;
 };
 
 export const Example2OfR4 = () => {
   const fhirResource = object('Resource', r4Example2);
-  return <Procedure fhirResource={fhirResource} />;
+  return <Procedure fhirResource={fhirResource} fhirIcons={fhirIcons} />;
 };
 
 export const Example3OfR4 = () => {
   const fhirResource = object('Resource', r4Example3);
-  return <Procedure fhirResource={fhirResource} />;
+  return <Procedure fhirResource={fhirResource} fhirIcons={fhirIcons} />;
 };

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

@@ -1,17 +1,18 @@
-import React from 'react';
-import { render } from '@testing-library/react';
 import Procedure from './Procedure';
-
+import React from 'react';
 import dstu2Example1 from '../../../fixtures/dstu2/resources/procedure/example1.json';
-import stu3Example1 from '../../../fixtures/stu3/resources/procedure/example1.json';
-
 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';
 
 describe('Procedure should render component correctly', () => {
   it('should render component correctly with DSTU2 source data', () => {
     const defaultProps = {
       fhirResource: dstu2Example1,
+      fhirIcons: fhirIcons,
     };
     const { getByTestId } = render(<Procedure {...defaultProps} />);
 
@@ -22,6 +23,7 @@ describe('Procedure should render component correctly', () => {
   it('should render component correctly with STU3 source data', () => {
     const defaultProps = {
       fhirResource: stu3Example1,
+      fhirIcons: fhirIcons,
     };
     const { getByTestId } = render(<Procedure {...defaultProps} />);
 
@@ -34,6 +36,7 @@ describe('Procedure should render component correctly', () => {
   it('should render component that contain extra fields based of STU3 source data', () => {
     const defaultProps = {
       fhirResource: stu3Example1,
+      fhirIcons: fhirIcons,
     };
     const { getByTestId } = render(<Procedure {...defaultProps} />);
 
@@ -48,6 +51,7 @@ describe('Procedure should render component correctly', () => {
   it('should render component correctly with R4 source data - example 1', () => {
     const defaultProps = {
       fhirResource: r4Example2,
+      fhirIcons: fhirIcons,
     };
     const { getByTestId, queryByTestId } = render(
       <Procedure {...defaultProps} />,
@@ -57,9 +61,7 @@ describe('Procedure should render component correctly', () => {
       'Insertion of intracardiac pacemaker (procedure)',
     );
     expect(getByTestId('status').textContent).toEqual('completed');
-    expect(getByTestId('performedDateTime').textContent).toEqual(
-      'on 2015-04-05',
-    );
+    expect(getByTestId('providedDate').textContent).toEqual('4/5/2015');
     expect(getByTestId('hasCoding').textContent).toContain(
       'Insertion of intracardiac',
     );
@@ -77,6 +79,7 @@ describe('Procedure should render component correctly', () => {
   it('should render component correctly with STU3 source data - example 2', () => {
     const defaultProps = {
       fhirResource: r4Example3,
+      fhirIcons: fhirIcons,
     };
     const { getByTestId, queryByTestId } = render(
       <Procedure {...defaultProps} />,

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

@@ -58,7 +58,7 @@ describe('Questionnaire should render component correctly', () => {
       'Cancer Quality Forum Questionnaire',
     );
     expect(getByTestId('status').textContent).toEqual('draft');
-    expect(getByTestId('dateTime').textContent).toEqual('2012-01');
+    expect(getByTestId('dateTime').textContent).toEqual('January 2012');
 
     // contain id and test of questions of subgroup
     expect(String(getByTestId('linkId-1.1').textContent).trim()).toContain(
@@ -119,7 +119,7 @@ describe('Questionnaire should render component correctly', () => {
       'Cancer Quality Forum Questionnaire',
     );
     expect(getByTestId('status').textContent).toEqual('draft');
-    expect(getByTestId('dateTime').textContent).toEqual('2012-01');
+    expect(getByTestId('dateTime').textContent).toEqual('January 2012');
 
     // contain id and test of questions of subgroup
     expect(String(getByTestId('linkId-1.1').textContent).trim()).toContain(
@@ -180,7 +180,7 @@ describe('Questionnaire should render component correctly', () => {
       'Cancer Quality Forum Questionnaire',
     );
     expect(getByTestId('status').textContent).toEqual('draft');
-    expect(getByTestId('dateTime').textContent).toEqual('2012-01');
+    expect(getByTestId('dateTime').textContent).toEqual('January 2012');
 
     // contain id and test of questions of subgroup
     expect(String(getByTestId('linkId-1.1').textContent).trim()).toContain(

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

@@ -23,7 +23,7 @@ describe('QuestionnaireResponse should render component correctly', () => {
       'Questionnaire Response',
     );
     expect(getByTestId('status').textContent).toEqual('completed');
-    expect(getByTestId('dateTime').textContent).toEqual('2013-06-18');
+    expect(getByTestId('dateTime').textContent).toEqual('6/18/2013');
     expect(getByTestId('subject').textContent).toEqual('RoelPatient/f201');
     expect(getByTestId('author').textContent).toEqual('Practitioner/f201');
 
@@ -34,7 +34,7 @@ describe('QuestionnaireResponse should render component correctly', () => {
       'What is your gender?Male ',
     );
     expect(getByTestId('linkId-2.2').textContent).toEqual(
-      'What is your date of birth?1960-03-13 ',
+      'What is your date of birth?3/13/1960 ',
     );
     expect(getByTestId('linkId-2.3').textContent).toEqual(
       'What is your country of birth?The Netherlands ',
@@ -56,7 +56,7 @@ describe('QuestionnaireResponse should render component correctly', () => {
       'Glasgow Coma Score',
     );
     expect(getByTestId('status').textContent).toEqual('completed');
-    expect(getByTestId('dateTime').textContent).toEqual('2014-12-11');
+    expect(getByTestId('dateTime').textContent).toEqual('12/11/2014');
 
     expect(getByTestId('linkId-1.1').textContent).toContain('(LA6560-2) ');
   });
@@ -72,7 +72,7 @@ describe('QuestionnaireResponse should render component correctly', () => {
       'Questionnaire Response',
     );
     expect(getByTestId('status').textContent).toEqual('completed');
-    expect(getByTestId('dateTime').textContent).toEqual('2013-02-19');
+    expect(getByTestId('dateTime').textContent).toEqual('2/19/2013');
 
     expect(getByTestId('answer-nameOfChild-0').textContent).toContain(
       'Cathy Jones',
@@ -90,7 +90,7 @@ describe('QuestionnaireResponse should render component correctly', () => {
       'Questionnaire Response',
     );
     expect(getByTestId('status').textContent).toEqual('completed');
-    expect(getByTestId('dateTime').textContent).toEqual('2013-06-18');
+    expect(getByTestId('dateTime').textContent).toEqual('6/18/2013');
     expect(getByTestId('subject').textContent).toEqual('RoelPatient/f201');
     expect(getByTestId('author').textContent).toEqual('Practitioner/f201');
 

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

@@ -21,7 +21,7 @@ describe('should render ReferralRequest component properly', () => {
     expect(getByTestId('typeCoding').textContent).toContain(
       'Referral for service',
     );
-    expect(getByTestId('dateSent').textContent).toContain('2014-02-14');
+    expect(getByTestId('dateSent').textContent).toContain('2/14/2014');
     expect(getByTestId('reason').textContent).toContain(
       'For consideration of Grommets',
     );
@@ -46,7 +46,7 @@ describe('should render ReferralRequest component properly', () => {
     expect(getByTestId('typeCoding').textContent).toContain(
       'Patient referral to specialist',
     );
-    expect(getByTestId('dateSent').textContent).toContain('2014-02-14');
+    expect(getByTestId('dateSent').textContent).toContain('2/14/2014');
     expect(getByTestId('reason').textContent).toContain(
       'For consideration of Grommets',
     );

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

@@ -48,7 +48,7 @@ describe('should render ResearchStudy component properly', () => {
 
     expect(title).toEqual('Example study');
     expect(status).toEqual('completed');
-    expect(period).toEqual('2015-02-01 - 2015-02-21');
+    expect(period).toEqual('2/1/2015 - 2/21/2015');
     expect(category).toEqual('Gene expression (GENE)');
     expect(focus).toEqual('Prostate cancer (PRC)');
     expect(protocol).toEqual('PlanDefinition/pdf1');

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

@@ -0,0 +1,56 @@
+import { Root, Title } from '../../ui';
+import ChevronRight from '../../../assets/common/chevron-right.svg';
+import HeaderIcon from '../../datatypes/HeaderIcon';
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const ResourceCategory = props => {
+  const { title, itemsCount, fhirIcons } = props;
+
+  const parseNumber = value =>
+    /^[1-9]+\d*$/.test(value) ? Number.parseInt(value) : null;
+
+  const getItemsCountLabel = () =>
+    `${parsedItemsCount} ${parsedItemsCount === 1 ? 'item' : 'items'}`;
+
+  const headerIcon = fhirIcons['ResourceCategoryPlaceholder'];
+  const parsedItemsCount = parseNumber(itemsCount);
+
+  return (
+    <Root name="ResourceCategory">
+      <button
+        type="button"
+        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>
+        </div>
+        <div className="d-flex gap-2 align-items-center">
+          {parsedItemsCount > 0 && (
+            <div
+              className="d-flex rounded-pill py-1 px-2 bg-gray-200"
+              data-testid="itemsCount"
+            >
+              <small className="fw-bold text-nowrap ">
+                {getItemsCountLabel()}
+              </small>
+            </div>
+          )}
+          <img
+            src={ChevronRight}
+            alt="chevron"
+            style={{ height: 28, width: 28 }}
+          />
+        </div>
+      </button>
+    </Root>
+  );
+};
+
+ResourceCategory.propTypes = {
+  title: PropTypes.string.isRequired,
+  itemsCount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+export default ResourceCategory;

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import ResourceCategory from './ResourceCategory';
+import fhirIcons from '../../../fixtures/example-icons';
+
+export default { title: 'ResourceCategory' };
+
+export const ExampleWithAllProperties = () => {
+  return (
+    <ResourceCategory
+      itemsCount={41}
+      title="Resource name"
+      fhirIcons={fhirIcons}
+    />
+  );
+};
+
+export const ExampleWith1Item = () => {
+  return (
+    <ResourceCategory
+      itemsCount={'1'}
+      title="Resource name"
+      fhirIcons={fhirIcons}
+    />
+  );
+};
+
+export const ExampleWithoutItemsCount = () => {
+  return <ResourceCategory title="Resource name" fhirIcons={fhirIcons} />;
+};

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

@@ -0,0 +1,101 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import fhirIcons from '../../../fixtures/example-icons';
+import ResourceCategory from './ResourceCategory';
+
+describe('should render ResourceCategory component properly', () => {
+  const placeholderResource = fhirIcons['ResourceCategoryPlaceholder'].props;
+
+  it('should render ResourceCategory component with icon and itemsCount > 1 correctly', () => {
+    const defaultProps = {
+      fhirIcons: fhirIcons,
+      itemsCount: '41',
+      title: 'Resource name',
+    };
+
+    const { container, getByTestId, getByAltText } = 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', () => {
+    const defaultProps = {
+      fhirIcons: fhirIcons,
+      itemsCount: 1,
+      title: 'Resource name',
+    };
+
+    const { container, getByTestId, getByAltText } = 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', () => {
+    const defaultProps = {
+      fhirIcons: fhirIcons,
+      itemsCount: -1,
+      title: 'Resource name',
+    };
+
+    const { container, getByTestId, getByAltText, 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 invalid string passed as itemsCount', () => {
+    const defaultProps = {
+      fhirIcons: fhirIcons,
+      itemsCount: 'asdf1',
+      title: 'Resource name',
+    };
+
+    const { container, getByTestId, getByAltText, 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', () => {
+    const defaultProps = {
+      fhirIcons: fhirIcons,
+      itemsCount: '0.5',
+      title: 'Resource name',
+    };
+
+    const { container, getByTestId, getByAltText, 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);
+  });
+});

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

@@ -0,0 +1,3 @@
+import ResourceCategory from './ResourceCategory';
+
+export default ResourceCategory;

package/src/components/ui/_header.scss

@@ -0,0 +1,3 @@
+.header-rotate {
+  transform: rotate(-180deg);
+}

package/src/components/ui/bootstrap-reboot.min.css

@@ -14,23 +14,9 @@
 }
 
 .fhir-resource {
-  font-family:
-    -apple-system,
-    BlinkMacSystemFont,
-    'Segoe UI',
-    Roboto,
-    'Helvetica Neue',
-    Arial,
-    'Noto Sans',
-    sans-serif,
-    'Apple Color Emoji',
-    'Segoe UI Emoji',
-    'Segoe UI Symbol',
-    'Noto Color Emoji';
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
-  color: #212529;
   background-color: #fff;
   -webkit-text-size-adjust: 100%;
   -webkit-tap-highlight-color: transparent;
@@ -187,14 +173,8 @@ 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;
 }