Release 0.3.13 (#365)

* Update version

* [PATIENTAPP-160] Patient Details - Birthday (#364)

* Use Date component for patient birthday

* Fix date to have leading 0

* Update tests to fit with new date format

* [PATIENTAPP-168] If productOrService is absent, populate revenue code as Service in Services section (#367)

* Change EOB Service to use revenue instead of productOrService

* Update tests

* Use productOrServise if revenue is falsly

* [PATIENTAPP-182] Update dates to fix date Filter by resource type (#369)

* Update header dates

* Fix invalid date in one resource, update tests

* Force space, update tests

* Fix tests

* Fix date alignment (#370)

* Patientapp 184 conditions raw json toggle (#372)

* Move the RAW button to the header if no accordion

* Remove unnecessary a RAW button

* Remove events lock on accordion

Co-authored-by: Jacek Sańko <[email protected]>

README.md

@@ -1,5 +1,5 @@
 [![CircleCI](https://circleci.com/gh/1uphealth/fhir-react/tree/master.svg?style=svg)](https://circleci.com/gh/1uphealth/fhir-react/tree/master)
-[![Storybook](https://github.com/storybookjs/brand/raw/master/badge/badge-storybook.svg?sanitize=true)](https://fhir-react-lib-test-storybook.s3.amazonaws.com/branch/release-0-3-12/index.html)
+[![Storybook](https://github.com/storybookjs/brand/raw/master/badge/badge-storybook.svg?sanitize=true)](https://fhir-react-lib-test-storybook.s3.amazonaws.com/branch/release-0-3-13/index.html)
 
 # fhir-react
 

package.json

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

src/components/containers/Accordion/Accordion.js

@@ -68,17 +68,14 @@ 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
             className="fhir-container__Accordion__header accordion-header"
             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={
@@ -95,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>

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 {

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'}

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>

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');
 

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');
@@ -221,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
@@ -231,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>
               )
             }

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');
 

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', () => {

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', () => {

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');

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');