npm - fhir-react - Versions diffs - 0.3.8 → 0.3.9 - Mend

fhir-react 0.3.8 → 0.3.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (51) hide show

package/src/components/resources/Procedure/Procedure.js CHANGED Viewed

@@ -14,7 +14,7 @@ import _has from 'lodash/has';
 import { isNotEmptyArray } from '../../../utils';
 import { Value } from '../../ui';
-const Procedure = ({ fhirResource, fhirIcons, onClick }) => {
+const Procedure = ({ fhirResource, fhirIcons, onClick, rawOnClick }) => {
   const display =
     _get(fhirResource, 'code.coding[0].display') ||
     _get(fhirResource, 'code.text');
@@ -125,6 +125,7 @@ const Procedure = ({ fhirResource, fhirIcons, onClick }) => {
         }
         bodyContent={<Body tableData={tableData} />}
         onClick={onClick}
+        rawOnClick={rawOnClick}
       />
     </Root>
   );

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

@@ -75,7 +75,13 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
-const Questionnaire = ({ fhirResource, fhirVersion, fhirIcons, onClick }) => {
+const Questionnaire = ({
+  fhirResource,
+  fhirVersion,
+  fhirIcons,
+  onClick,
+  rawOnClick,
+}) => {
   let fhirResourceData = {};
   try {
@@ -114,6 +120,7 @@ const Questionnaire = ({ fhirResource, fhirVersion, fhirIcons, onClick }) => {
           </Body>
         }
         onClick={onClick}
+        rawOnClick={rawOnClick}
       />
     </Root>
   );

package/src/components/resources/QuestionnaireResponse/QuestionnaireResponse.js CHANGED Viewed

@@ -76,6 +76,7 @@ const QuestionnaireResponse = ({
   fhirVersion,
   fhirIcons,
   onClick,
+  rawOnClick,
 }) => {
   let fhirResourceData = {};
@@ -139,6 +140,7 @@ const QuestionnaireResponse = ({
           </Body>
         }
         onClick={onClick}
+        rawOnClick={rawOnClick}
       />
     </Root>
   );

package/src/components/resources/ReferralRequest/ReferralRequest.js CHANGED Viewed

@@ -70,7 +70,13 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
-const ReferralRequest = ({ fhirResource, fhirVersion, fhirIcons, onClick }) => {
+const ReferralRequest = ({
+  fhirResource,
+  fhirVersion,
+  fhirIcons,
+  onClick,
+  rawOnClick,
+}) => {
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -150,6 +156,7 @@ const ReferralRequest = ({ fhirResource, fhirVersion, fhirIcons, onClick }) => {
           </Body>
         }
         onClick={onClick}
+        rawOnClick={rawOnClick}
       />
     </Root>
   );

package/src/components/resources/RelatedPerson/RelatedPerson.js CHANGED Viewed

@@ -67,7 +67,13 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
-const RelatedPerson = ({ fhirResource, fhirVersion, fhirIcons, onClick }) => {
+const RelatedPerson = ({
+  fhirResource,
+  fhirVersion,
+  fhirIcons,
+  onClick,
+  rawOnClick,
+}) => {
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -139,6 +145,7 @@ const RelatedPerson = ({ fhirResource, fhirVersion, fhirIcons, onClick }) => {
         }
         bodyContent={<Body tableData={tableData} />}
         onClick={onClick}
+        rawOnClick={rawOnClick}
       />
     </Root>
   );

package/src/components/resources/ResearchStudy/ResearchStudy.js CHANGED Viewed

@@ -94,7 +94,13 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
-const ResearchStudy = ({ fhirResource, fhirVersion, fhirIcons, onClick }) => {
+const ResearchStudy = ({
+  fhirResource,
+  fhirVersion,
+  fhirIcons,
+  onClick,
+  rawOnClick,
+}) => {
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -289,6 +295,7 @@ const ResearchStudy = ({ fhirResource, fhirVersion, fhirIcons, onClick }) => {
         }
         bodyContent={<Body tableData={tableData} />}
         onClick={onClick}
+        rawOnClick={rawOnClick}
       />
     </Root>
   );

package/src/components/resources/ResourceCategory/ResourceCategory.js CHANGED Viewed

@@ -15,7 +15,7 @@ const ResourceCategory = ({ title, itemsCount, fhirIcons }) => {
     <Root name="ResourceCategory">
       <button
         type="button"
-        className="btn d-flex align-items-center justify-content-between w-100 py-4 px-4 bg-white"
+        className="btn d-flex align-items-center justify-content-between w-100 px-md-4 py-md-4 bg-white"
       >
         <div className="d-flex gap-2">
           <Header

package/src/components/ui/index.js CHANGED Viewed

@@ -32,7 +32,7 @@ export const Header = ({
               isAccordionOpenable ? 'header__title-row' : ''
             } d-flex w-100 flex-column flex-sm-row`}
           >
-            <div className="d-flex">
+            <div className="d-flex align-items-center">
               {!isNoIcon && (
                 <div
                   className={`fhir-ui__${resourceName}-Header__icon d-flex align-items-center flex-shrink-1 m-half me-2`}
@@ -52,30 +52,34 @@ export const Header = ({
               </div>
             </div>
-            <div
-              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}`}
-            >
-              {prefixBadge && <div className="me-3">{prefixBadge}</div>}
-              <div className="d-flex">
-                {badges}
-                {additionalBadge && (
-                  <div className="ms-3">{additionalBadge}</div>
-                )}
+            {(prefixBadge || badges || additionalBadge) && (
+              <div
+                className={`fhir-ui__${resourceName}-Header__badges 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}`}
+              >
+                {prefixBadge && <div className="me-3">{prefixBadge}</div>}
+                <div className="d-flex align-items-center">
+                  {badges}
+                  {additionalBadge && (
+                    <div className="ms-3">{additionalBadge}</div>
+                  )}
+                </div>
               </div>
-            </div>
+            )}
           </div>
-          <div
-            className={`fhir-ui__${resourceName}-Header__additional-content w-100 justify-content-start d-flex  ${
-              additionalContent ? ' pt-2' : ''
-            }`}
-          >
-            {additionalContent}
+          {(additionalContent || rightAdditionalContent) && (
             <div
-              className={`fhir-ui__${resourceName}-Header__rightAdditionalContent justify-content-end ${rightItemsClass}`}
+              className={`fhir-ui__${resourceName}-Header__additional-content w-100 justify-content-start d-flex ${
+                additionalContent ? ' pt-2' : ''
+              }`}
             >
-              {rightAdditionalContent}
+              {additionalContent}
+              <div
+                className={`fhir-ui__${resourceName}-Header__rightAdditionalContent justify-content-md-end mx-0 ${rightItemsClass}`}
+              >
+                {rightAdditionalContent}
+              </div>
             </div>
-          </div>
+          )}
         </div>
       )}
     </>
@@ -84,7 +88,7 @@ export const Header = ({
 export const Title = props => (
   <h4
-    className={`fhir-ui__Title fw-bold fs-4 lh-base mb-0 w-90 title-width-sm ${
+    className={`fhir-ui__Title fw-bold lh-base mb-0 text-break d-flex ${
       props.capitalize ? 'text-capitalize' : ''
     }`}
     data-testid={props['data-testid'] || 'title'}
@@ -96,7 +100,7 @@ export const Title = props => (
 export const Badge = props => {
   return (
     <small
-      className={`fhir-ui__Badge text-capitalize d-flex align-items-center mx-1 px-2 py-1 rounded-1 fw-bold ${getBadgeColor(
+      className={`fhir-ui__Badge text-capitalize d-flex align-items-center px-2 py-1 rounded-1 fw-bold ${getBadgeColor(
         props,
       )}`}
       data-testid={props['data-testid']}
@@ -108,7 +112,7 @@ export const Badge = props => {
 export const BadgeSecondary = props => (
   <small
-    className={`fhir-ui__BadgeSecondary px-2 py-1 rounded-1 fw-bold ${getBadgeColor(
+    className={`fhir-ui__BadgeSecondary px-2 py-1 rounded-1 fw-bold d-flex align-items-center ${getBadgeColor(
       props,
     )}`}
     data-testid={props['data-testid']}

package/src/style.scss CHANGED Viewed

@@ -106,6 +106,17 @@ $enable-negative-margins: true;
 .fhir-ui__Badge {
   width: fit-content;
+  margin: 0 4px;
+  @include media-breakpoint-down(sm) {
+    margin: 4px 0;
+  }
+}
+.fhir-ui__Title {
+  font-size: 1.125rem;
+  @include media-breakpoint-down(sm) {
+    font-size: 1rem !important;
+  }
 }
 .header__title-row {