fhir-react 0.3.0 → 0.3.4

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,7 +221,7 @@ export const ValueSection = props => (
   </div>
 );
 
-export const MissingValue = props => (
+export const MissingValue = () => (
   <span className="fhir-ui__MissingValue">-</span>
 );
 

package/src/fixtures/example-icons.jsx

@@ -3,167 +3,205 @@ import React from 'react';
 export default {
   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/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/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',
+          },
         ],
       },
     ],