fhir-react 0.3.10 → 0.3.13

package/build/style.css

@@ -28,4 +28,4 @@
 .fhir-resource__Questionnaire-list{list-style:none;padding:2px;margin:2px}.fhir-resource__Questionnaire-list-title{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{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{border-bottom:none}.fhir-resource__Questionnaire-questions-list-item-details{font-size:80%}.fhir-resource__Questionnaire-questions-list-item-details-el{display:inline-block;margin-right:15px}
 .fhir-resource__QuestionnaireResponse-list{list-style:none;padding:0;margin:0}.fhir-resource__QuestionnaireResponse-list:first-of-type{padding-top:20px}.fhir-resource__QuestionnaireResponse-list-title{padding:2px 2px 8px 2px;font-weight:bold}.fhir-resource__QuestionnaireResponse-list-title-question{background:#f8f9fa;align-items:center;margin-bottom:56px;padding-left:16px;border-radius:4px;color:#adb5bd}.fhir-resource__QuestionnaireResponse-questions-list{list-style:none;padding-left:0;display:block;color:#adb5bd}.fhir-resource__QuestionnaireResponse-questions-list li{display:block;margin-bottom:56px}.fhir-resource__QuestionnaireResponse-questions-list-element{background:#f8f9fa;border-radius:4px;width:100%;padding-left:16px;margin-bottom:56px}.fhir-resource__QuestionnaireResponse-questions-list li:last-child{border-bottom:none}.fhir-resource__QuestionnaireResponse-questions-list-item-details{margin:-30px 0}.fhir-resource__QuestionnaireResponse-questions-list-item-details-el{display:inline-block;color:#000;margin-right:15px;margin-left:20px}
 .fhir-container__CodeBlock{padding:1.5rem;color:#f8f9fa;background-color:#343a40;border-radius:.25rem;word-break:break-word;font-family:monospace;font-size:16px;overflow-x:scroll}
-.fhir-container__ResourceContainer__card{border:0;position:relative;display:flex;flex-direction:column;min-width:0;word-wrap:break-word;background-clip:border-box;border-radius:.25rem}.fhir-container__ResourceContainer__card-body{flex:1 1 auto;padding:1.25rem}.fhir-container__ResourceContainer__json-button-wrapper{position:absolute;right:2rem;top:.5rem}.fhir-container__ResourceContainer__json-button-wrapper-accordion{margin-top:10px}.fhir-container__ResourceContainer__json--visible{display:block;padding-top:10px}.fhir-container__ResourceContainer__json--hidden{display:none}.fhir-container__ResourceContainer__json-button{color:#6c757d;border-color:#6c757d;cursor:pointer;padding:.15rem .5rem;font-size:.875rem;line-height:1rem;border-radius:.2rem;display:inline-block;font-weight:400;text-align:center;vertical-align:middle;user-select:none;border:1px solid #6c6c6c;transition:all .15s ease-in-out}.fhir-container__ResourceContainer__json-button:hover{color:#fff;background-color:#6c757d;border-color:#6c757d}
+.fhir-container__ResourceContainer__card{border:0;position:relative;display:flex;flex-direction:column;min-width:0;word-wrap:break-word;background-clip:border-box;border-radius:.25rem}.fhir-container__ResourceContainer__card-body{flex:1 1 auto;padding:1.25rem}.fhir-container__ResourceContainer__json-button-wrapper{padding-right:5px}.fhir-container__ResourceContainer__json-button-wrapper-accordion{margin-top:10px}.fhir-container__ResourceContainer__json--visible{display:block;padding-top:10px}.fhir-container__ResourceContainer__json--hidden{display:none}.fhir-container__ResourceContainer__json-button{color:#6c757d;border-color:#6c757d;cursor:pointer;padding:.15rem .5rem;font-size:.875rem;line-height:1rem;border-radius:.2rem;display:inline-block;font-weight:400;text-align:center;vertical-align:middle;user-select:none;border:1px solid #6c6c6c;transition:all .15s ease-in-out}.fhir-container__ResourceContainer__json-button:hover{color:#fff;background-color:#6c757d;border-color:#6c757d}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fhir-react",
-  "version": "0.3.10",
+  "version": "0.3.13",
   "description": "React component library for displaying FHIR Resources ",
   "main": "build/index.js",
   "peerDependencies": {

package/src/components/containers/Accordion/Accordion.js

@@ -6,12 +6,16 @@ const CHEVRON_DOWN_COLOR = '#6f83a9';
 const CHEVRON_UP_COLOR = '#2a6fd7';
 
 const Accordion = props => {
-  const { headerContent, bodyContent, onClick, rawOnClick } = props;
+  const { headerContent, bodyContent, onClick, rawOnClick, customId } = props;
   const [rotate, setRotate] = useState(false);
   const handleAccordionClick = () => setRotate(!rotate);
-  const accordionId = uniqueId(
-    `accordion-type-${headerContent.props.resourceName || 'default'}-`,
-  );
+
+  const accordionIdText = `accordion-type-${headerContent.props.resourceName ||
+    'default'}-`;
+  const accordionId =
+    typeof customId === 'number'
+      ? `${accordionIdText}${customId}`
+      : uniqueId(accordionIdText);
 
   const isAccordionOpenable = () => {
     if (bodyContent) {
@@ -64,7 +68,6 @@ const Accordion = props => {
 
   return (
     <div className="fhir-container__Accordion accordion">
-      {typeof rawOnClick === 'function' && !isRawInAccordion && rawButton}
       <div className="fhir-container__Accordion__body accordion-body">
         <div className="fhir-container__Accordion__body-data accordion-item border-1 shadow-sm">
           <div
@@ -72,9 +75,7 @@ const Accordion = props => {
             id="flush-headingOne"
           >
             <button
-              className={`fhir-container__Accordion__header-button w-100 p-0 border-0 rounded-1 collapsed text-dark bg-white shadow-none point ${
-                isAccordionOpenable() ? '' : 'pe-none'
-              }`}
+              className={`fhir-container__Accordion__header-button w-100 p-0 border-0 rounded-1 collapsed text-dark bg-white shadow-none point`}
               type="button"
               data-bs-target={`#${accordionId}`}
               data-bs-toggle={
@@ -91,6 +92,10 @@ const Accordion = props => {
               <div className="fhir-container__Accordion__header-text d-flex w-100 justify-content-start position-relative">
                 {React.cloneElement(headerContent, {
                   isAccordionOpenable: isAccordionOpenable(),
+                  rawButton:
+                    typeof rawOnClick === 'function' &&
+                    !isRawInAccordion &&
+                    rawButton,
                 })}
                 {typeof onClick !== 'function' && getChevron()}
               </div>

package/src/components/containers/ResourceContainer/ResourceContainer.css

@@ -15,9 +15,7 @@
 }
 
 .fhir-container__ResourceContainer__json-button-wrapper {
-  position: absolute;
-  right: 2rem;
-  top: 0.5rem;
+  padding-right: 5px;
 }
 
 .fhir-container__ResourceContainer__json-button-wrapper-accordion {

package/src/components/datatypes/Date/Date.js

@@ -7,6 +7,7 @@ const Date = ({ fhirData, isBlack, testId, className = '' }) => {
   }
   const locale = 'en-US';
   const dateValue = formatDate(String(fhirData).slice(0, 10), locale);
+
   return (
     <span
       data-testid={testId || 'providedDate'}

package/src/components/datatypes/DatePeriod/DatePeriod.js

@@ -20,13 +20,13 @@ const DatePeriod = props => {
   return (
     <div className="d-flex flex-column flex-sm-row align-items-start align-items-sm-start">
       {periodBeginDate && (
-        <div className="d-flex flex-wrap">
+        <div className="d-flex flex-wrap align-items-center">
           <SingleDateSpan label={periodBeginLabel} />
           <Date testId={periodBeginTestId} isBlack fhirData={periodBeginDate} />
         </div>
       )}
       {periodEndDate && (
-        <div className="ms-sm-4 d-flex flex-wrap">
+        <div className="ms-sm-4 d-flex flex-wrap align-items-center">
           <SingleDateSpan label={periodEndLabel} />
           <Date testId={periodEndTestId} isBlack fhirData={periodEndDate} />
         </div>

package/src/components/resources/AdverseEvent/AdverseEvent.js

@@ -77,6 +77,7 @@ const AdverseEvent = ({
   fhirIcons,
   onClick,
   rawOnClick,
+  customId,
 }) => {
   let fhirResourceData = {};
   try {
@@ -172,6 +173,7 @@ const AdverseEvent = ({
         }
         onClick={onClick}
         rawOnClick={rawOnClick}
+        customId={customId}
       />
     </Root>
   );

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

@@ -88,7 +88,7 @@ describe('should render component correctly', () => {
 
     expect(getByTestId('title').textContent).toContain('Patient');
 
-    expect(getByTestId('date').textContent).toEqual('1/29/2017');
+    expect(getByTestId('date').textContent).toEqual('01/29/2017');
 
     expect(getByTestId('event').textContent).toContain('304386008');
 
@@ -108,7 +108,7 @@ describe('should render component correctly', () => {
 
     expect(getByTestId('title').textContent).toContain('Patient');
 
-    expect(getByTestId('date').textContent).toEqual('1/29/2017');
+    expect(getByTestId('date').textContent).toEqual('01/29/2017');
 
     expect(getByTestId('hasSeriousness').textContent).toContain('Non-serious');
 

package/src/components/resources/AllergyIntolerance/AllergyIntolerance.js

@@ -13,6 +13,7 @@ import Annotation from '../../datatypes/Annotation';
 
 import { Root, Header, Badge, BadgeSecondary, Body } from '../../ui';
 import CodeableConcept from '../../datatypes/CodeableConcept';
+import { getResourceDate } from '../../../utils/getResourceDate';
 
 const commonDTO = fhirResource => {
   const hasReaction = _get(fhirResource, 'reaction.0.manifestation');
@@ -51,6 +52,7 @@ const dstu2DTO = fhirResource => {
     asserter,
   };
 };
+
 const stu3DTO = fhirResource => {
   const title = _get(fhirResource, 'code.coding.0.display');
   const status = _get(fhirResource, 'verificationStatus');
@@ -73,6 +75,7 @@ const stu3DTO = fhirResource => {
     hasNote,
   };
 };
+
 const r4DTO = fhirResource => {
   const title = _get(fhirResource, 'code.coding.0.display');
   const status = _get(fhirResource, 'verificationStatus.coding[0].display');
@@ -129,6 +132,7 @@ const AllergyIntolerance = ({
   fhirIcons,
   onClick,
   rawOnClick,
+  customId,
 }) => {
   let fhirResourceData = {};
   try {
@@ -218,6 +222,19 @@ const AllergyIntolerance = ({
     },
   ];
 
+  const allergyDatesPaths = [
+    'meta.lastUpdated',
+    'onsetPeriod.start',
+    'onset',
+    'reaction[0].onset',
+    'recordedDate',
+    'onsetDateTime',
+    'assertedDate',
+  ];
+
+  const headerDate =
+    getResourceDate(fhirResource, allergyDatesPaths) || recordedDate;
+
   return (
     <Root name="AllergyIntolerance">
       <Accordion
@@ -228,9 +245,10 @@ const AllergyIntolerance = ({
             title={title}
             icon={fhirIcons}
             rightAdditionalContent={
-              recordedDate && (
+              headerDate && (
                 <BadgeSecondary data-testid="recordedDate">
-                  recorded on <Date fhirData={recordedDate} />
+                  recorded on&nbsp;
+                  <Date fhirData={headerDate} />
                 </BadgeSecondary>
               )
             }
@@ -239,6 +257,7 @@ const AllergyIntolerance = ({
         bodyContent={<Body tableData={tableData} />}
         onClick={onClick}
         rawOnClick={rawOnClick}
+        customId={customId}
       />
     </Root>
   );

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

@@ -93,7 +93,7 @@ describe('should render component correctly', () => {
 
     expect(getByTestId('status').textContent).toContain('unconfirmed');
 
-    expect(getByTestId('recordedDate').textContent).toContain('3/1/2010');
+    expect(getByTestId('recordedDate').textContent).toContain('03/01/2010');
 
     expect(getByTestId('substance').textContent).toContain('PENICILLIN');
 
@@ -117,7 +117,9 @@ describe('should render component correctly', () => {
 
     expect(getByTestId('status').textContent).toContain('confirmed');
 
-    expect(getByTestId('recordedDate').textContent).toContain('10/9/2014');
+    expect(getByTestId('recordedDate').textContent).toContain(
+      'recorded on 06/12/2012',
+    );
 
     expect(getByTestId('substance').textContent).toContain(
       'allergenic extract',
@@ -149,7 +151,9 @@ describe('should render component correctly', () => {
 
     expect(getByTestId('status').textContent).toContain('Confirmed');
 
-    expect(getByTestId('recordedDate').textContent).toContain('10/9/2014');
+    expect(getByTestId('recordedDate').textContent).toContain(
+      'recorded on 06/12/2012',
+    );
 
     expect(getByTestId('substance').textContent).toContain(
       'allergenic extract',
@@ -185,7 +189,7 @@ describe('should render component correctly', () => {
 
     expect(getByTestId('status').textContent).toContain('Confirmed');
 
-    expect(getByTestId('recordedDate').textContent).toContain('8/6/2015');
+    expect(getByTestId('recordedDate').textContent).toContain('08/06/2015');
 
     expect(getByTestId('patient').textContent).toEqual('Patient/mom');
 

package/src/components/resources/Appointment/Appointment.js

@@ -150,6 +150,7 @@ const Appointment = ({
   fhirIcons,
   onClick,
   rawOnClick,
+  customId,
 }) => {
   const {
     description,
@@ -261,6 +262,7 @@ const Appointment = ({
         }
         onClick={onClick}
         rawOnClick={rawOnClick}
+        customId={customId}
       />
     </Root>
   );

package/src/components/resources/Binary/Binary.js

@@ -6,7 +6,7 @@ import Accordion from '../../containers/Accordion/Accordion';
 import { Body, Header } from '../../ui';
 
 const Binary = props => {
-  const { fhirResource, fhirIcons, rawOnClick } = props;
+  const { fhirResource, fhirIcons, rawOnClick, customId } = props;
 
   const loadBinaryFile = () => {
     switch (fhirResource.contentType) {
@@ -38,6 +38,7 @@ const Binary = props => {
         }
         bodyContent={<Body>{loadBinaryFile()}</Body>}
         rawOnClick={rawOnClick}
+        customId={customId}
       />
     </div>
   );

package/src/components/resources/CarePlan/CarePlan.js

@@ -75,6 +75,7 @@ const dstu2DTO = fhirResource => {
     hasActivity,
   };
 };
+
 const stu3DTO = fhirResource => {
   let activity = _get(fhirResource, 'activity');
   const hasActivity = Array.isArray(activity);
@@ -168,6 +169,7 @@ const CarePlan = ({
   fhirIcons,
   onClick,
   rawOnClick,
+  customId,
 }) => {
   let fhirResourceData = {};
   try {
@@ -312,6 +314,7 @@ const CarePlan = ({
         }
         onClick={onClick}
         rawOnClick={rawOnClick}
+        customId={customId}
       />
     </Root>
   );

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

@@ -115,7 +115,7 @@ describe('should render component correctly', () => {
       'Peter James Chalmers',
     );
     expect(getByTestId('author').textContent).toContain('Dr Adam Careful');
-    expect(getByTestId('periodEnd').textContent).toEqual('6/1/2017');
+    expect(getByTestId('periodEnd').textContent).toEqual('06/01/2017');
     expect(getByTestId('basedOn').textContent).toEqual(
       'Management of Type 2 Diabetes',
     );
@@ -141,7 +141,7 @@ describe('should render component correctly', () => {
       'Peter James Chalmers',
     );
     expect(getByTestId('author').textContent).toContain('Dr Adam Careful');
-    expect(getByTestId('periodEnd').textContent).toEqual('6/1/2017');
+    expect(getByTestId('periodEnd').textContent).toEqual('06/01/2017');
     expect(getByTestId('basedOn').textContent).toEqual(
       'Management of Type 2 Diabetes',
     );
@@ -162,8 +162,8 @@ describe('should render component correctly', () => {
     expect(getByTestId('intent').textContent).toEqual('plan');
     expect(getByTestId('goals').textContent).toEqual('#goal');
     expect(getByTestId('subject').textContent).toContain('Eve Everywoman');
-    expect(getByTestId('periodStart').textContent).toEqual('1/1/2013');
-    expect(getByTestId('periodEnd').textContent).toEqual('10/1/2013');
+    expect(getByTestId('periodStart').textContent).toEqual('01/01/2013');
+    expect(getByTestId('periodEnd').textContent).toEqual('10/01/2013');
   });
 
   it('should fire custom onClick function', () => {

package/src/components/resources/CareTeam/CareTeam.js

@@ -89,6 +89,7 @@ const CareTeam = ({
   fhirIcons,
   onClick,
   rawOnClick,
+  customId,
 }) => {
   const {
     name,
@@ -174,6 +175,7 @@ const CareTeam = ({
         }
         onClick={onClick}
         rawOnClick={rawOnClick}
+        customId={customId}
       />
     </Root>
   );

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

@@ -97,7 +97,7 @@ describe('should render the CareTeam component properly', () => {
     );
     expect(getByTestId('status').textContent).toEqual('active');
     expect(queryByTestId('periodStart')).toBeNull();
-    expect(getByTestId('periodEnd').textContent).toEqual('1/1/2013');
+    expect(getByTestId('periodEnd').textContent).toEqual('01/01/2013');
     expect(getByTestId('category').textContent.trim()).toEqual('(encounter)');
     expect(getByTestId('subject').textContent).toContain(
       'Peter James Chalmers',
@@ -126,7 +126,7 @@ describe('should render the CareTeam component properly', () => {
     const periodEnds = getAllByTestId('participant.periodEnd').map(
       n => n.textContent,
     );
-    expect(periodEnds).toEqual(['-', '1/1/2013']);
+    expect(periodEnds).toEqual(['-', '01/01/2013']);
   });
 
   it('should render participants with STU3 source data when structure source data of Participants Role is coding array', () => {
@@ -156,7 +156,7 @@ describe('should render the CareTeam component properly', () => {
     );
     expect(getByTestId('status').textContent).toEqual('active');
     expect(queryByTestId('periodStart')).toBeNull();
-    expect(getByTestId('periodEnd').textContent).toEqual('1/1/2013');
+    expect(getByTestId('periodEnd').textContent).toEqual('01/01/2013');
     expect(getByTestId('encounter').textContent).toEqual('Encounter/example');
     expect(getByTestId('category').textContent).toContain(
       'Encounter-focused care team',
@@ -188,7 +188,7 @@ describe('should render the CareTeam component properly', () => {
     const periodEnds = getAllByTestId('participant.periodEnd').map(
       n => n.textContent,
     );
-    expect(periodEnds).toEqual(['-', '1/1/2013']);
+    expect(periodEnds).toEqual(['-', '01/01/2013']);
   });
 
   it('should fire custom onClick function', () => {

package/src/components/resources/Claim/Claim.js

@@ -105,6 +105,7 @@ const dstu2DTO = fhirResource => {
     items,
   };
 };
+
 const stu3DTO = fhirResource => {
   const status = _get(fhirResource, 'status');
   const typeCoding = _get(fhirResource, 'type.coding[0]');
@@ -304,6 +305,7 @@ const Claim = ({
   fhirIcons,
   onClick,
   rawOnClick,
+  customId,
 }) => {
   let fhirResourceData = {};
   try {
@@ -489,6 +491,7 @@ const Claim = ({
         }
         onClick={onClick}
         rawOnClick={rawOnClick}
+        customId={customId}
       />
     </Root>
   );

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

@@ -15,7 +15,7 @@ import ClaimIcon from '../../../assets/containers/Claim/claim.svg';
 import fhirIcons from '../../../fixtures/example-icons';
 
 export default {
-  title: 'Claim',
+  title: 'ExplanationOfBenefit/Claim',
   component: Claim,
   argTypes: {
     ...defaultArgTypes,

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

@@ -95,7 +95,7 @@ describe('should render the Claim component properly', () => {
     expect(getByTestId('title').textContent).toEqual('Claim #100150');
     expect(getByTestId('use').textContent).toEqual('complete');
     expect(getByTestId('type').textContent).toContain('oral');
-    expect(getByTestId('created').textContent).toEqual('8/16/2014');
+    expect(getByTestId('created').textContent).toEqual('08/16/2014');
     expect(getByTestId('priority').textContent).toContain('normal');
     expect(getByTestId('insurer').textContent).toEqual('Organization/2');
     expect(getByTestId('payee.type').textContent).toContain('provider');
@@ -117,7 +117,7 @@ describe('should render the Claim component properly', () => {
     expect(getByTestId('title').textContent).toEqual('Claim #100150');
     expect(getByTestId('use').textContent).toEqual('complete');
     expect(getByTestId('type').textContent).toContain('oral');
-    expect(getByTestId('created').textContent).toEqual('8/16/2014');
+    expect(getByTestId('created').textContent).toEqual('08/16/2014');
     expect(getByTestId('priority').textContent).toContain('normal');
     expect(getByTestId('insurer').textContent).toEqual('Organization/2');
     expect(getByTestId('payee.type').textContent).toContain('provider');
@@ -184,7 +184,7 @@ describe('should render the Claim component properly', () => {
     };
     const { getByTestId } = render(<Claim {...defaultProps} />);
 
-    expect(getByTestId('accident.date').textContent).toEqual('7/9/2014');
+    expect(getByTestId('accident.date').textContent).toEqual('07/09/2014');
     expect(getByTestId('accident.type').textContent).toContain(
       'Sporting Accident',
     );
@@ -223,7 +223,7 @@ describe('should render the Claim component properly', () => {
     const { getByTestId } = render(<Claim {...defaultProps} />);
 
     expect(getByTestId('employmentImpacted').textContent).toEqual(
-      '8/16/2014 - 8/16/2014',
+      '08/16/2014 - 08/16/2014',
     );
   });
 
@@ -235,7 +235,7 @@ describe('should render the Claim component properly', () => {
     const { getByTestId } = render(<Claim {...defaultProps} />);
 
     expect(getByTestId('hospitalization').textContent).toEqual(
-      '8/15/2014 - 8/16/2014',
+      '08/15/2014 - 08/16/2014',
     );
   });
 
@@ -323,7 +323,7 @@ describe('should render the Claim component properly', () => {
     expect(getByTestId('title').textContent).toEqual('Claim #100150');
     expect(getByTestId('use').textContent).toEqual('claim');
     expect(getByTestId('type').textContent).toContain('oral');
-    expect(getByTestId('created').textContent).toEqual('8/16/2014');
+    expect(getByTestId('created').textContent).toEqual('08/16/2014');
     expect(getByTestId('priority').textContent).toContain('normal');
     expect(getByTestId('insurer').textContent).toEqual('Organization/2');
     expect(getByTestId('payee.type').textContent).toContain('provider');

package/src/components/resources/ClaimResponse/ClaimResponse.js

@@ -291,6 +291,7 @@ const ClaimResponse = ({
   fhirIcons,
   onClick,
   rawOnClick,
+  customId,
 }) => {
   let fhirResourceData = {};
   try {
@@ -456,6 +457,7 @@ const ClaimResponse = ({
         }
         onClick={onClick}
         rawOnClick={rawOnClick}
+        customId={customId}
       />
     </Root>
   );

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

@@ -14,7 +14,7 @@ import fhirIcons from '../../../fixtures/example-icons';
 import ClaimResponseIcon from '../../../assets/containers/ClaimResponse/claim-response.svg';
 
 export default {
-  title: 'ClaimResponse',
+  title: 'ExplanationOfBenefit/ClaimResponse',
   component: ClaimResponse,
   argTypes: {
     ...defaultArgTypes,

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

@@ -99,7 +99,7 @@ describe('should render the ClaimResponse component properly', () => {
 
     expect(getByTestId('title').textContent).toEqual('Claim response #R3500');
     expect(getByTestId('outcome').textContent).toEqual('complete');
-    expect(getByTestId('created').textContent).toEqual('8/16/2014');
+    expect(getByTestId('created').textContent).toEqual('08/16/2014');
     expect(getByTestId('disposition').textContent).toEqual(
       'Claim settled as per contract.',
     );
@@ -116,7 +116,7 @@ describe('should render the ClaimResponse component properly', () => {
     expect(
       getByTestId('payment.amount').textContent.replace(nbspRegex, ' '),
     ).toEqual('100.47 USD');
-    expect(getByTestId('payment.date').textContent).toEqual('8/31/2014');
+    expect(getByTestId('payment.date').textContent).toEqual('08/31/2014');
     expect(
       getByTestId('payment.ref').textContent.replace(nbspRegex, ' '),
     ).toEqual('Identifier: 201408-2-1569478');
@@ -152,7 +152,7 @@ describe('should render the ClaimResponse component properly', () => {
 
     expect(getByTestId('title').textContent).toEqual('Claim response #R3500');
     expect(getByTestId('outcome').textContent).toEqual('complete');
-    expect(getByTestId('created').textContent).toEqual('8/16/2014');
+    expect(getByTestId('created').textContent).toEqual('08/16/2014');
     expect(getByTestId('disposition').textContent).toEqual(
       'Claim settled as per contract.',
     );
@@ -169,7 +169,7 @@ describe('should render the ClaimResponse component properly', () => {
     expect(
       getByTestId('payment.amount').textContent.replace(nbspRegex, ' '),
     ).toEqual('100.47 USD');
-    expect(getByTestId('payment.date').textContent).toEqual('8/31/2014');
+    expect(getByTestId('payment.date').textContent).toEqual('08/31/2014');
     expect(
       getByTestId('payment.ref').textContent.replace(nbspRegex, ' '),
     ).toEqual('Identifier: 201408-2-1569478');
@@ -245,7 +245,7 @@ describe('should render the ClaimResponse component properly', () => {
     expect(getByTestId('title').textContent).toEqual('Claim response #R3500');
     expect(getByTestId('status').textContent).toEqual('active');
     expect(queryByTestId('outcome')).toBeNull();
-    expect(getByTestId('created').textContent).toEqual('8/16/2014');
+    expect(getByTestId('created').textContent).toEqual('08/16/2014');
     expect(getByTestId('disposition').textContent).toEqual(
       'Claim settled as per contract.',
     );
@@ -265,7 +265,7 @@ describe('should render the ClaimResponse component properly', () => {
     expect(
       getByTestId('payment.amount').textContent.replace(nbspRegex, ' '),
     ).toEqual('100.47 USD');
-    expect(getByTestId('payment.date').textContent).toEqual('8/31/2014');
+    expect(getByTestId('payment.date').textContent).toEqual('08/31/2014');
     expect(
       getByTestId('payment.ref').textContent.replace(nbspRegex, ' '),
     ).toEqual('Identifier: 201408-2-1569478');

package/src/components/resources/Condition/Condition.js

@@ -9,6 +9,7 @@ import Reference from '../../datatypes/Reference';
 import _get from 'lodash/get';
 import _has from 'lodash/has';
 import fhirVersions from '../fhirResourceVersions';
+import { getResourceDate } from '../../../utils/getResourceDate';
 
 const commonDTO = fhirResource => {
   const codeText =
@@ -93,11 +94,11 @@ const Condition = ({
   fhirIcons,
   onClick,
   rawOnClick,
+  customId,
 }) => {
   const {
     codeText,
     severityText,
-    onsetDateTime,
     hasAsserter,
     asserter,
     hasBodySite,
@@ -121,6 +122,28 @@ const Condition = ({
     },
   ];
 
+  const conditionStartDatesPaths = [
+    'meta.lastUpdated',
+    'onsetPeriod.start',
+    'onsetDateTime',
+    'recordedDate',
+    'dateRecorded',
+    'assertedDate',
+  ];
+
+  const conditionEndDatesPaths = [
+    'meta.lastUpdated',
+    'abatementPeriod.end',
+    'abatementDateTime',
+  ];
+
+  const headerStartDate = getResourceDate(
+    fhirResource,
+    conditionStartDatesPaths,
+  );
+  const headerEndDate =
+    getResourceDate(fhirResource, conditionEndDatesPaths) || dateRecorded;
+
   return (
     <Root name="condition">
       <Accordion
@@ -130,10 +153,10 @@ const Condition = ({
             additionalContent={
               <DatePeriod
                 periodBeginLabel="Onset Date"
-                periodBeginDate={onsetDateTime}
+                periodBeginDate={headerStartDate}
                 periodBeginTestId="onsetDate"
                 periodEndLabel="Date recorded"
-                periodEndDate={dateRecorded}
+                periodEndDate={headerEndDate}
                 periodEndTestId="dateRecorded"
               />
             }
@@ -164,6 +187,7 @@ const Condition = ({
         bodyContent={<Body tableData={tableData} />}
         onClick={onClick}
         rawOnClick={rawOnClick}
+        customId={customId}
       />
     </Root>
   );