fhir-react 0.3.1 → 0.3.5

package/src/components/supportedFhirResourceList.js

@@ -37,6 +37,7 @@ import Questionnaire from './resources/Questionnaire';
 import QuestionnaireResponse from './resources/QuestionnaireResponse';
 import ReferralRequest from './resources/ReferralRequest';
 import ResearchStudy from './resources/ResearchStudy';
+import ResourceCategory from './resources/ResourceCategory';
 
 export {
   Appointment,
@@ -78,4 +79,5 @@ export {
   QuestionnaireResponse,
   ReferralRequest,
   ResearchStudy,
+  ResourceCategory,
 };

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

package/src/fixtures/example-icons.jsx

@@ -1,169 +1,214 @@
 import React from 'react';
 
 export default {
+  Binary: (
+    <img
+      className="header-icon__image"
+      src={require('../assets/containers/Binary/binary.svg')}
+      alt="binary"
+    />
+  ),
   Condition: (
     <img
+      className="header-icon__image"
       src={require('../assets/containers/Condition/condition.svg')}
-      alt="germ"
+      alt="condition"
     />
   ),
   Immunization: (
     <img
+      className="header-icon__image"
       src={require('../assets/containers/Immunization/immunization.svg')}
-      alt="syringe"
+      alt="immunization"
     />
   ),
   Procedure: (
     <img
+      className="header-icon__image"
       src={require('../assets/containers/Procedure/procedure.svg')}
-      alt="block diagram"
+      alt="procedure"
     />
   ),
   Practitioner: (
     <img
+      className="header-icon__image"
       src={require('../assets/containers/Practitioner/practitioner.svg')}
-      alt="doctor avatar"
+      alt="practitioner"
     />
   ),
   AllergyIntolerance: (
     <img
+      className="header-icon__image"
       src={require('../assets/containers/AllergyIntolerance/allergy-intolerance.svg')}
       alt="sneezing emoji"
     />
   ),
   Appointment: (
     <img
+      className="header-icon__image"
       src={require('../assets/containers/Appointment/appointment.svg')}
-      alt="calendar"
+      alt="appointment"
     />
   ),
   CarePlan: (
     <img
+      className="header-icon__image"
       src={require('../assets/containers/CarePlan/care-plan.svg')}
       alt="note with a heart"
     />
   ),
   CareTeam: (
     <img
+      className="header-icon__image"
       src={require('../assets/containers/CareTeam/care-team.svg')}
       alt="group of people"
     />
   ),
   Claim: (
     <img
+      className="header-icon__image"
       src={require('../assets/containers/Claim/claim.svg')}
       alt="clipboard with a symmetrical cross"
     />
   ),
   ClaimResponse: (
     <img
+      className="header-icon__image"
       src={require('../assets/containers/ClaimResponse/claim-response.svg')}
       alt="clipboard with a symmetrical cross and a return arrow"
     />
   ),
   Device: (
     <img
+      className="header-icon__image"
       src={require('../assets/containers/Device/device.svg')}
       alt="computer rack"
     />
   ),
   DiagnosticReport: (
     <img
+      className="header-icon__image"
       src={require('../assets/containers/DiagnosticReport/diagnostic-report.svg')}
       alt="note with shapes"
     />
   ),
   DocumentReference: (
     <img
+      className="header-icon__image"
       src={require('../assets/containers/DocumentReference/document-reference.svg')}
       alt="hand holding a note"
     />
   ),
   Encounter: (
     <img
+      className="header-icon__image"
       src={require('../assets/containers/Encounter/encounter.svg')}
-      alt="conversation between two individuals"
+      alt="encounter"
     />
   ),
   ExplanationOfBenefit: (
     <img
+      className="header-icon__image"
       src={require('../assets/containers/ExplanationOfBenefit/explanation-of-benefit.svg')}
-      alt="percentage sign"
+      alt="explanation of benefit"
     />
   ),
   FamilyMemberHistory: (
     <img
+      className="header-icon__image"
       src={require('../assets/containers/FamilyMemberHistory/family-member-history.svg')}
       alt="parent and child"
     />
   ),
   Goal: (
     <img
+      className="header-icon__image"
       src={require('../assets/containers/Goal/goal.svg')}
       alt="arrow hits bullseye"
     />
   ),
   List: (
-    <img src={require('../assets/containers/List/list.svg')} alt="checklist" />
+    <img
+      className="header-icon__image"
+      src={require('../assets/containers/List/list.svg')}
+      alt="checklist"
+    />
   ),
   Location: (
     <img
+      className="header-icon__image"
       src={require('../assets/containers/Location/location.svg')}
       alt="location marker"
     />
   ),
   Medication: (
     <img
+      className="header-icon__image"
       src={require('../assets/containers/Medication/medication.svg')}
       alt="some pills"
     />
   ),
   MedicationAdministration: (
     <img
+      className="header-icon__image"
       src={require('../assets/containers/MedicationAdministration/medication-administration.svg')}
       alt="pill gets swallowed"
     />
   ),
   MedicationKnowledge: (
     <img
+      className="header-icon__image"
       src={require('../assets/containers/MedicationKnowledge/medication-knowledge.svg')}
       alt="pill database"
     />
   ),
   MedicationStatement: (
     <img
+      className="header-icon__image"
       src={require('../assets/containers/MedicationStatement/medication-statement.svg')}
       alt="note with symmetrical cross"
     />
   ),
   Observation: (
     <img
+      className="header-icon__image"
       src={require('../assets/containers/Observation/observation.svg')}
-      alt="hospital bed"
+      alt="observation"
     />
   ),
   Questionnaire: (
     <img
+      className="header-icon__image"
       src={require('../assets/containers/Questionnaire/questionnaire.svg')}
       alt="clipboard and pen"
     />
   ),
   QuestionnaireResponse: (
     <img
+      className="header-icon__image"
       src={require('../assets/containers/QuestionnaireResponse/questionnaire-response.svg')}
       alt="clipboard and return arrow"
     />
   ),
   ResearchStudy: (
     <img
+      className="header-icon__image"
       src={require('../assets/containers/ResearchStudy/research-study.svg')}
       alt="finger pointing something in a book"
     />
   ),
-  ResourceCategoryPlaceholder: (
+  ResourceCategory: (
     <img
+      className="header-icon__image"
       src={require('../assets/containers/ResourceCategory/resource-placeholder.svg')}
       alt="header icon"
     />
   ),
+  Patient: (
+    <img
+      className="header-icon__image"
+      src={require('../assets/containers/Patient/patient.svg')}
+      alt="patient"
+    />
+  ),
 };

package/src/fixtures/r4/resources/explanationOfBenefit/c4bbExample.json

@@ -148,13 +148,29 @@
       "category": {
         "coding": [
           {
+            "code": "clmrecvddate",
             "system": "http://hl7.org/fhir/us/carin-bb/CodeSystem/C4BBSupportingInfoType",
-            "code": "clmrecvddate"
+            "display": "Claim Received Date"
           }
         ]
       },
       "timingDate": "2017-01-05"
-    }
+    },
+    {
+      "sequence": 2,
+      "category": {
+          "coding": [
+              {
+                  "code": "dayssupply",
+                  "system": "http://hl7.org/fhir/us/carin-bb/CodeSystem/C4BBSupportingInfoType",
+                  "display": "Days Supply"
+              }
+          ]
+      },
+      "valueQuantity": {
+          "value": 30
+      }
+  }
   ],
   "diagnosis": [
     {

package/src/index.js

@@ -1,5 +1,6 @@
 import 'bootstrap/dist/css/bootstrap.min.css';
 import './style.css';
+import './style.scss';
 
 import FhirResource from './components/containers/FhirResource';
 import fhirVersions from './components/resources/fhirResourceVersions';

package/src/style.scss

@@ -86,6 +86,7 @@ $enable-negative-margins: true;
   width: auto;
   @include media-breakpoint-up(sm) {
     width: 130px;
+    min-width: 130px;
   }
 }
 

package/src/utils/convertCamelCaseToSentence.js

@@ -0,0 +1,9 @@
+import _trim from 'lodash/trim';
+
+export const convertCamelCaseToSentence = word => {
+  const result = word && word.replace(/([A-Z])/g, ' $1');
+  return (
+    result &&
+    _trim(result.charAt(0).toUpperCase() + result.slice(1)).toLowerCase()
+  );
+};

package/src/utils/convertCamelCaseToSentence.test.js

@@ -0,0 +1,9 @@
+import { convertCamelCaseToSentence } from './convertCamelCaseToSentence';
+
+describe('convertCamelCaseToSentence function ', () => {
+  it('should return sentence', () => {
+    expect(convertCamelCaseToSentence('CamelCaseToSentence')).toEqual(
+      'camel case to sentence',
+    );
+  });
+});

package/src/utils/formatDate.js

@@ -1,7 +1,6 @@
 export const formatDate = (date, locale) => {
   const rawDate = new Date(date);
-  const usDate = rawDate.toLocaleDateString(locale, whichOptions(date));
-  return usDate;
+  return rawDate.toLocaleDateString(locale, whichOptions(date));
 };
 
 const whichOptions = date => {
@@ -9,13 +8,16 @@ const whichOptions = date => {
   const YEAR_MONTH_FORMAT = 'YYYY-MM';
 
   if (date.length === YEAR_FORMAT.length) {
-    return { year: 'numeric' };
+    return { year: 'numeric', timeZone: 'UTC' };
   }
   if (date.length <= YEAR_MONTH_FORMAT.length) {
     return {
       year: 'numeric',
       month: 'long',
+      timeZone: 'UTC',
     };
   }
-  return;
+  return {
+    timeZone: 'UTC',
+  };
 };

package/webpack.config.js

@@ -25,7 +25,7 @@ module.exports = {
         },
       },
       {
-        test: /\.css$/,
+        test: /\.(css|scss)$/,
         exclude: path.resolve(
           __dirname,
           'src/components/ui/bootstrap-reboot.min.css',
@@ -35,6 +35,15 @@ module.exports = {
             loader: MiniCssExtractPlugin.loader,
           },
           'css-loader',
+          'sass-loader',
+        ],
+      },
+      {
+        test: /\.svg$/,
+        use: [
+          {
+            loader: 'svg-url-loader',
+          },
         ],
       },
     ],

package/src/components/resources/AllergyIntolerance/AllergyIntolerance.css

@@ -1,4 +0,0 @@
-.fhir-resource__AllergyIntolerance__grouping {
-  display: flex;
-  align-items: center;
-}

package/src/components/resources/CarePlan/CarePlan.css

@@ -1,7 +0,0 @@
-.fhir-resource__CarePlan__activity {
-  margin-bottom: 0.5rem;
-}
-
-.fhir-resource__CarePlan__activity-title {
-  font-weight: bold;
-}