fhir-react 0.3.6 → 0.3.9

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

@@ -0,0 +1,45 @@
+import fhirVersions from '../fhirResourceVersions';
+import _get from 'lodash/get';
+import PropTypes from 'prop-types';
+import React from 'react';
+import Group from './Group';
+
+const Items = ({ fhirVersion, data }) => {
+  if (fhirVersion === fhirVersions.DSTU2) {
+    const prepareItems = item => ({
+      ...item,
+      item: _get(item, 'question') || _get(item, 'group') || [],
+      isGroup: !!_get(item, 'group'),
+    });
+    return <Group data={data} prepareItems={prepareItems} />;
+  }
+
+  if (fhirVersion === fhirVersions.STU3) {
+    const prepareItems = item => ({
+      ...item,
+      isGroup: _get(item, 'type') === 'group',
+    });
+    return <Group data={data} prepareItems={prepareItems} />;
+  }
+
+  if (fhirVersion === fhirVersions.R4) {
+    const prepareItems = item => ({
+      ...item,
+      isGroup: _get(item, 'type') === 'group',
+    });
+    return <Group data={data} prepareItems={prepareItems} />;
+  }
+
+  return null;
+};
+
+Items.propTypes = {
+  data: PropTypes.array,
+  fhirVersion: PropTypes.oneOf([
+    fhirVersions.DSTU2,
+    fhirVersions.STU3,
+    fhirVersions.R4,
+  ]).isRequired,
+};
+
+export default Items;

package/src/components/resources/Questionnaire/Questionnaire.css

@@ -1,21 +1,41 @@
 .fhir-resource__Questionnaire-list {
   list-style: none;
-  border: 1px solid #f0f0f0;
   padding: 2px;
   margin: 2px;
 }
 
 .fhir-resource__Questionnaire-list-title {
-  background-color: #f6f6f6;
-  padding: 2px 2px 4px 2px;
+  padding: 2px 2px 8px 2px;
+  font-weight: bold;
+}
+
+.fhir-resource__Questionnaire-list-title-question {
+  background: #f8f9fa;
+  align-items: center;
+  margin-bottom: 56px;
+  padding-left: 16px;
+  border-radius: 4px;
+  color: #adb5bd;
 }
 
 .fhir-resource__Questionnaire-questions-list {
   list-style: none;
+  padding-left: 0;
+  display: block;
+  color: #adb5bd;
 }
 
 .fhir-resource__Questionnaire-questions-list li {
-  border-bottom: 1px solid #f5f5f5;
+  display: block;
+  margin-bottom: 56px;
+}
+
+.fhir-resource__Questionnaire-questions-list-element {
+  background: #f8f9fa;
+  border-radius: 4px;
+  width: 100%;
+  padding-left: 16px;
+  margin-bottom: 56px;
 }
 
 .fhir-resource__Questionnaire-questions-list li:last-child {
@@ -24,7 +44,6 @@
 
 .fhir-resource__Questionnaire-questions-list-item-details {
   font-size: 80%;
-  color: #606060;
 }
 
 .fhir-resource__Questionnaire-questions-list-item-details-el {

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

@@ -2,164 +2,15 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import _get from 'lodash/get';
 
-import { Root, Header, Title, Badge, BadgeSecondary, Body } from '../../ui';
+import { Root, Header, Badge, Body, Value } from '../../ui';
 import Date from '../../datatypes/Date';
 import Coding from '../../datatypes/Coding';
 
 import './Questionnaire.css';
-import Reference from '../../datatypes/Reference/Reference';
 import fhirVersions from '../fhirResourceVersions';
 import UnhandledResourceDataStructure from '../UnhandledResourceDataStructure';
-
-const getQuestionText = item => {
-  let text = _get(item, 'text');
-  if (!text) {
-    // DSTU2
-    const groupConcept = _get(item, 'concept.0');
-    if (groupConcept) {
-      text = <Coding fhirData={groupConcept} />;
-    }
-    // STU3 & R4
-    const groupCode = _get(item, 'code.0');
-    if (!text && groupCode) {
-      text = <Coding fhirData={groupCode} />;
-    }
-  }
-  return text;
-};
-
-const Questions = props => {
-  const { questions, prepareItems } = props;
-  if (!Array.isArray(questions) || questions.length === 0) {
-    return null;
-  }
-
-  return (
-    <ul className="fhir-resource__Questionnaire-questions-list">
-      {questions.map((item, i) => {
-        const hasLinkId = item.linkId;
-        let type = _get(item, 'type');
-        if (type === 'group') {
-          type = '';
-        }
-        const options = _get(item, 'options');
-
-        const text = getQuestionText(item);
-        const hasDetails = type || options;
-        return (
-          <li key={`item-${i}`} data-testid={`linkId-${item.linkId}`}>
-            {hasLinkId && <Badge>{item.linkId}</Badge>}
-            {text}
-            {hasDetails && (
-              <div className="fhir-resource__Questionnaire-questions-list-item-details">
-                {type && (
-                  <div className="fhir-resource__Questionnaire-questions-list-item-details-el">
-                    Type: {type}
-                  </div>
-                )}
-                {options && (
-                  <div className="fhir-resource__Questionnaire-questions-list-item-details-el">
-                    Options: <Reference fhirData={options} />
-                  </div>
-                )}
-              </div>
-            )}
-            {item.item && (
-              <Group data={item.item} prepareItems={prepareItems} />
-            )}
-          </li>
-        );
-      })}
-    </ul>
-  );
-};
-
-Questions.propTypes = {
-  questions: PropTypes.array,
-  prepareItems: PropTypes.func.isRequired,
-};
-
-const Group = props => {
-  const { data, prepareItems } = props;
-  if (!Array.isArray(data) || data.length === 0) {
-    return null;
-  }
-
-  return data.map(prepareItems).map((item, i) => {
-    const linkId = _get(item, 'linkId', '');
-
-    const text = getQuestionText(item);
-    let nestedItems = _get(item, 'item', []);
-    nestedItems = nestedItems.map(prepareItems);
-    const isGroup = _get(item, 'isGroup');
-    return (
-      <ul key={`item-${i}`} className="fhir-resource__Questionnaire-list">
-        <li
-          className="fhir-resource__Questionnaire-list-title"
-          data-testid={`linkId-${item.linkId}`}
-        >
-          <Badge>{linkId}</Badge>
-          <span>{text}</span>
-        </li>
-        {!isGroup && (
-          <li>
-            {<Questions questions={nestedItems} prepareItems={prepareItems} />}
-          </li>
-        )}
-        {isGroup && (
-          <li>
-            <Group data={nestedItems} prepareItems={prepareItems} />
-          </li>
-        )}
-      </ul>
-    );
-  });
-};
-
-Group.propTypes = {
-  data: PropTypes.array,
-  prepareItems: PropTypes.func.isRequired,
-};
-
-const Items = props => {
-  const { fhirVersion, data } = props;
-
-  if (fhirVersion === fhirVersions.DSTU2) {
-    const prepareItems = item => ({
-      ...item,
-      item: _get(item, 'question') || _get(item, 'group') || [],
-      isGroup: !!_get(item, 'group'),
-    });
-    return <Group data={data} prepareItems={prepareItems} />;
-  }
-
-  if (fhirVersion === fhirVersions.STU3) {
-    const prepareItems = item => ({
-      ...item,
-      isGroup: _get(item, 'type') === 'group',
-    });
-    return <Group data={data} prepareItems={prepareItems} />;
-  }
-
-  if (fhirVersion === fhirVersions.R4) {
-    const prepareItems = item => ({
-      ...item,
-      isGroup: _get(item, 'type') === 'group',
-    });
-    return <Group data={data} prepareItems={prepareItems} />;
-  }
-
-  return null;
-};
-
-Items.propTypes = {
-  data: PropTypes.array,
-  fhirVersion: PropTypes.oneOf([
-    fhirVersions.DSTU2,
-    fhirVersions.STU3,
-    fhirVersions.R4,
-  ]).isRequired,
-};
+import Items from './Items';
+import Accordion from '../../containers/Accordion';
 
 const commonDTO = fhirResource => {
   const status = _get(fhirResource, 'status');
@@ -224,8 +75,13 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
 
-const Questionnaire = props => {
-  const { fhirResource, fhirVersion } = props;
+const Questionnaire = ({
+  fhirResource,
+  fhirVersion,
+  fhirIcons,
+  onClick,
+  rawOnClick,
+}) => {
   let fhirResourceData = {};
 
   try {
@@ -238,22 +94,34 @@ const Questionnaire = props => {
 
   return (
     <Root name="Questionnaire">
-      <Header>
-        <Title>{title}</Title>
-        {status && <Badge data-testid="status">{status}</Badge>}
-        {dateTime && (
-          <BadgeSecondary data-testid="dateTime">
-            <Date fhirData={dateTime} />
-          </BadgeSecondary>
-        )}
-      </Header>
-      <Body>
-        {rootItems && (
-          <div className="overflow-auto">
-            <Items fhirVersion={fhirVersion} data={rootItems} />
-          </div>
-        )}
-      </Body>
+      <Accordion
+        headerContent={
+          <Header
+            resourceName="Questionnaire"
+            title={title}
+            badges={status && <Badge data-testid="status">{status}</Badge>}
+            additionalContent={
+              dateTime && (
+                <Value label="On" data-testid="dateTime">
+                  <Date fhirData={dateTime} isBlack />
+                </Value>
+              )
+            }
+            icon={fhirIcons}
+          />
+        }
+        bodyContent={
+          <Body>
+            {rootItems && (
+              <div className="overflow-auto">
+                <Items fhirVersion={fhirVersion} data={rootItems} />
+              </div>
+            )}
+          </Body>
+        }
+        onClick={onClick}
+        rawOnClick={rawOnClick}
+      />
     </Root>
   );
 };

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

@@ -15,6 +15,9 @@ import r4Example1 from '../../../fixtures/r4/resources/questionnaire/example1.js
 import r4Example2 from '../../../fixtures/r4/resources/questionnaire/example2.json';
 import r4Example3 from '../../../fixtures/r4/resources/questionnaire/example3.json';
 
+import fhirIcons from '../../../fixtures/example-icons';
+import QuestionnaireIcon from '../../../assets/containers/Questionnaire/questionnaire.svg';
+
 export default { title: 'Questionnaire' };
 
 export const DefaultVisualizationDSTU2 = () => {
@@ -23,6 +26,7 @@ export const DefaultVisualizationDSTU2 = () => {
     <Questionnaire
       fhirResource={fhirResource}
       fhirVersion={fhirVersions.DSTU2}
+      fhirIcons={require('../../../assets/containers/Questionnaire/questionnaire.svg')}
     />
   );
 };
@@ -33,6 +37,7 @@ export const Example2OfDSTU2 = () => {
     <Questionnaire
       fhirResource={fhirResource}
       fhirVersion={fhirVersions.DSTU2}
+      fhirIcons={QuestionnaireIcon}
     />
   );
 };
@@ -43,6 +48,7 @@ export const Example3OfDSTU2 = () => {
     <Questionnaire
       fhirResource={fhirResource}
       fhirVersion={fhirVersions.DSTU2}
+      fhirIcons={fhirIcons}
     />
   );
 };
@@ -53,6 +59,7 @@ export const Example1OfSTU3 = () => {
     <Questionnaire
       fhirResource={fhirResource}
       fhirVersion={fhirVersions.STU3}
+      fhirIcons={false}
     />
   );
 };
@@ -63,6 +70,7 @@ export const Example2OfSTU3 = () => {
     <Questionnaire
       fhirResource={fhirResource}
       fhirVersion={fhirVersions.STU3}
+      fhirIcons={'random text'}
     />
   );
 };

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 
 import Questionnaire from './Questionnaire';
 import fhirVersions from '../fhirResourceVersions';
@@ -13,7 +13,151 @@ import stu3Example2 from '../../../fixtures/stu3/resources/questionnaire/example
 import r4Example1 from '../../../fixtures/r4/resources/questionnaire/example1.json';
 import r4Example2 from '../../../fixtures/r4/resources/questionnaire/example2.json';
 
+import fhirIcons from '../../../fixtures/example-icons';
+
 describe('Questionnaire 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(<Questionnaire {...defaultProps} />);
+    const headerIcon = getByAltText('questionnaire');
+
+    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(<Questionnaire {...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/Questionnaire/questionnaire.svg')}
+          alt="clipboard and pen"
+        />
+      ),
+    };
+
+    const { getByAltText } = render(<Questionnaire {...defaultProps} />);
+    const headerIcon = getByAltText('clipboard and pen');
+
+    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(<Questionnaire {...defaultProps} />);
+    const headerIcon = getByAltText('clipboard and pen');
+
+    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(<Questionnaire {...defaultProps} />);
+    const headerIcon = getByAltText('header icon');
+
+    expect(headerIcon.getAttribute('src')).toContain(avatarSrc);
+  });
+
+  it('component without a fhirIcons props should render a default icon', () => {
+    const defaultProps = {
+      fhirVersion: fhirVersions.DSTU2,
+      fhirResource: dstu2Example1,
+    };
+
+    const { getByAltText } = render(<Questionnaire {...defaultProps} />);
+    const headerIcon = getByAltText('questionnaire');
+
+    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(<Questionnaire {...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/Questionnaire/questionnaire.svg')}
+          alt="clipboard and pen"
+        />
+      ),
+    };
+
+    const { getByAltText } = render(<Questionnaire {...defaultProps} />);
+    const headerIcon = getByAltText('clipboard and pen');
+
+    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(<Questionnaire {...defaultProps} />);
+    const headerIcon = getByAltText('clipboard and pen');
+
+    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(<Questionnaire {...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,
@@ -34,16 +178,16 @@ describe('Questionnaire should render component correctly', () => {
 
     // contain id and test of questions of subgroup
     expect(String(getByTestId('linkId-2.1').textContent).trim()).toEqual(
-      '2.1What is your gender?',
+      'What is your gender?',
     );
     expect(String(getByTestId('linkId-2.2').textContent).trim()).toEqual(
-      '2.2What is your date of birth?',
+      'What is your date of birth?',
     );
     expect(String(getByTestId('linkId-2.3').textContent).trim()).toEqual(
-      '2.3What is your country of birth?',
+      'What is your country of birth?',
     );
     expect(String(getByTestId('linkId-2.4').textContent).trim()).toEqual(
-      '2.4What is your marital status?',
+      'What is your marital status?',
     );
   });
 
@@ -90,21 +234,21 @@ describe('Questionnaire should render component correctly', () => {
 
     // contain subgroup description
     expect(String(getByTestId('linkId-2').textContent).trim()).toContain(
-      '2General questions',
+      'General questions',
     );
 
     // contain id and test of questions of subgroup
     expect(String(getByTestId('linkId-2.1').textContent).trim()).toContain(
-      '2.1What is your gender?',
+      'What is your gender?',
     );
     expect(String(getByTestId('linkId-2.2').textContent).trim()).toEqual(
-      '2.2What is your date of birth?',
+      'What is your date of birth?',
     );
     expect(String(getByTestId('linkId-2.3').textContent).trim()).toEqual(
-      '2.3What is your country of birth?',
+      'What is your country of birth?',
     );
     expect(String(getByTestId('linkId-2.4').textContent).trim()).toEqual(
-      '2.4What is your marital status?',
+      'What is your marital status?',
     );
   });
 
@@ -151,21 +295,21 @@ describe('Questionnaire should render component correctly', () => {
 
     // contain subgroup description
     expect(String(getByTestId('linkId-2').textContent).trim()).toContain(
-      '2General questions',
+      'General questions',
     );
 
     // contain id and test of questions of subgroup
     expect(String(getByTestId('linkId-2.1').textContent).trim()).toContain(
-      '2.1What is your gender?',
+      'What is your gender?',
     );
     expect(String(getByTestId('linkId-2.2').textContent).trim()).toEqual(
-      '2.2What is your date of birth?',
+      'What is your date of birth?',
     );
     expect(String(getByTestId('linkId-2.3').textContent).trim()).toEqual(
-      '2.3What is your country of birth?',
+      'What is your country of birth?',
     );
     expect(String(getByTestId('linkId-2.4').textContent).trim()).toEqual(
-      '2.4What is your marital status?',
+      'What is your marital status?',
     );
   });
 
@@ -196,4 +340,39 @@ describe('Questionnaire should render component correctly', () => {
       String(getByTestId('linkId-1.1.1.1.1').textContent).trim(),
     ).toContain('Angina Pectoris');
   });
+
+  it('should fire custom onClick function', () => {
+    const defaultProps = {
+      fhirResource: r4Example1,
+      fhirVersion: fhirVersions.R4,
+    };
+
+    const onClick = jest.fn();
+    const { getByRole } = render(
+      <Questionnaire {...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(
+      <Questionnaire {...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/Questionnaire/Questions.js

@@ -0,0 +1,40 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Group from './Group';
+import { getQuestionText } from './getQuestionText';
+
+const Questions = ({ questions, prepareItems }) => {
+  if (!Array.isArray(questions) || questions.length === 0) {
+    return null;
+  }
+
+  return (
+    <ul className="fhir-resource__Questionnaire-questions-list">
+      {questions.map((item, i) => {
+        const text = getQuestionText(item);
+        return (
+          text && (
+            <li
+              key={`questionnaire-questions-item-${i}`}
+              data-testid={`linkId-${item.linkId}`}
+            >
+              <div className="fhir-resource__Questionnaire-questions-list-element">
+                {text}
+              </div>
+              {item.item && item.item.length > 0 && (
+                <Group data={item.item} prepareItems={prepareItems} isChild />
+              )}
+            </li>
+          )
+        );
+      })}
+    </ul>
+  );
+};
+
+Questions.propTypes = {
+  questions: PropTypes.array,
+  prepareItems: PropTypes.func.isRequired,
+};
+
+export default Questions;