Release 0.3.9 (#354)

* Update version number * Fix components on mobile view (#353) * Fix styles for mobile * Fix padding * Fix paddings, fix font size * Fix alignment * Add conditions because empty space is showing on mobile * Add item alignment center * [PATIENTAPP-139] Move the 'Raw' data button to inside the patient card (#355) * Add raw button styles, move raw button inside accordion if possible, add rawOnClick to components * Add example of always visible raw button to resourceContainer * Clean up imports * Change component RecourceContainer to function
1uphealth · Apr 12, 2022 · f30f375 · f30f375
1 parent 127811b
commit f30f375
Showing 49 changed files with 318 additions and 92 deletions.
diff --git a/README.md b/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-8/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-9/index.html)
 
 # fhir-react
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "fhir-react",
-  "version": "0.3.8",
+  "version": "0.3.9",
   "description": "React component library for displaying FHIR Resources ",
   "main": "build/index.js",
   "peerDependencies": {

diff --git a/src/components/containers/Accordion/Accordion.js b/src/components/containers/Accordion/Accordion.js
@@ -6,7 +6,7 @@ const CHEVRON_DOWN_COLOR = '#6f83a9';
 const CHEVRON_UP_COLOR = '#2a6fd7';
 
 const Accordion = props => {
-  const { headerContent, bodyContent, onClick } = props;
+  const { headerContent, bodyContent, onClick, rawOnClick } = props;
   const [rotate, setRotate] = useState(false);
   const handleAccordionClick = () => setRotate(!rotate);
   const accordionId = uniqueId(
@@ -43,8 +43,28 @@ const Accordion = props => {
       </div>
     );
 
+  const isRawInAccordion =
+    isAccordionOpenable() && typeof onClick !== 'function';
+
+  const rawButton = (
+    <div
+      className={`fhir-container__ResourceContainer__json-button-wrapper${
+        isRawInAccordion ? '-accordion' : ''
+      }`}
+    >
+      <button
+        type="button"
+        className="fhir-container__ResourceContainer__json-button"
+        onClick={rawOnClick}
+      >
+        RAW
+      </button>
+    </div>
+  );
+
   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
@@ -82,6 +102,9 @@ const Accordion = props => {
           >
             <div className="fhir-container__Accordion__data-text accordion-body ps-4 pt-3 pe-4 border-top">
               {bodyContent}
+              {typeof rawOnClick === 'function' &&
+                isRawInAccordion &&
+                rawButton}
             </div>
           </div>
         </div>

diff --git a/src/components/containers/ResourceContainer/ResourceContainer.css b/src/components/containers/ResourceContainer/ResourceContainer.css
@@ -20,6 +20,10 @@
   top: 0.5rem;
 }
 
+.fhir-container__ResourceContainer__json-button-wrapper-accordion {
+  margin-top: 10px;
+}
+
 .fhir-container__ResourceContainer__json--visible {
   display: block;
   padding-top: 10px;

diff --git a/src/components/containers/ResourceContainer/ResourceContainer.js b/src/components/containers/ResourceContainer/ResourceContainer.js
@@ -1,45 +1,36 @@
-import React from 'react';
+import React, { Children, cloneElement, useState } from 'react';
 import CodeBlock from '../CodeBlock';
 import './ResourceContainer.css';
 
-class ResourceContainer extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      jsonOpen:
-        typeof this.props.jsonOpen === 'undefined'
-          ? false
-          : this.props.jsonOpen,
-    };
-  }
+const ResourceContainer = ({ fhirResource, children, jsonOpen }) => {
+  const [openJson, setOpenJson] = useState(jsonOpen ?? false);
 
-  render() {
-    return (
-      <div className="fhir-container__ResourceContainer__card">
-        <div className="fhir-container__ResourceContainer__card-body">
-          <div className="fhir-container__ResourceContainer__json-button-wrapper">
-            <button
-              type="button"
-              className="fhir-container__ResourceContainer__json-button"
-              onClick={() => this.setState({ jsonOpen: !this.state.jsonOpen })}
-            >
-              RAW
-            </button>
-          </div>
-          {this.props.children}
-          <div
-            className={
-              this.state.jsonOpen
-                ? 'fhir-container__ResourceContainer__json--visible'
-                : 'fhir-container__ResourceContainer__json--hidden'
-            }
-          >
-            <CodeBlock code={this.props.fhirResource} />
-          </div>
+  return (
+    <div className="fhir-container__ResourceContainer__card">
+      <div className="fhir-container__ResourceContainer__card-body">
+        {Children.map(children, child => {
+          return cloneElement(
+            child,
+            {
+              rawOnClick: () => {
+                setOpenJson(!openJson);
+              },
+            },
+            null,
+          );
+        })}
+        <div
+          className={
+            openJson
+              ? 'fhir-container__ResourceContainer__json--visible'
+              : 'fhir-container__ResourceContainer__json--hidden'
+          }
+        >
+          <CodeBlock code={fhirResource} />
         </div>
       </div>
-    );
-  }
-}
+    </div>
+  );
+};
 
 export default ResourceContainer;
diff --git a/src/components/containers/ResourceContainer/ResourceContainer.stories.js b/src/components/containers/ResourceContainer/ResourceContainer.stories.js
@@ -3,6 +3,7 @@ import { object } from '@storybook/addon-knobs';
 
 import ResourceContainer from './ResourceContainer';
 import Encounter from '../../../components/resources/Encounter';
+import Generic from '../../resources/Generic';
 
 import example1 from '../../../fixtures/dstu2/resources/encounter/example.json';
 import fhirVersions from '../../../components/resources/fhirResourceVersions';
@@ -11,7 +12,7 @@ export default {
   title: 'ResourceContainer',
 };
 
-export const DefaultVisualization = () => {
+export const DefaultVisualizationWithRawButtonHiddenInsideAccordion = () => {
   const fhirResource = object('Resource', example1);
   const props = {
     fhirVersion: fhirVersions.DSTU2,
@@ -24,6 +25,27 @@ export const DefaultVisualization = () => {
   );
 };
 
+export const DefaultVisualizationWithRawButtonVisibleOutsideAccordion = () => {
+  const exampleResource = {
+    resourceType: 'UnknownResource',
+    id: '12345',
+    code: {
+      text: 'Resource code text',
+    },
+  };
+
+  const fhirResource = object('Resource', exampleResource);
+  const props = {
+    fhirResource: fhirResource,
+  };
+
+  return (
+    <ResourceContainer {...props}>
+      <Generic {...props} />
+    </ResourceContainer>
+  );
+};
+
 export const VisualizationWithoutFhirVersion = () => {
   const fhirResource = object('Resource', example1);
   const props = {

diff --git a/src/components/resources/AdverseEvent/AdverseEvent.js b/src/components/resources/AdverseEvent/AdverseEvent.js
@@ -71,7 +71,13 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
 
-const AdverseEvent = ({ fhirResource, fhirVersion, fhirIcons, onClick }) => {
+const AdverseEvent = ({
+  fhirResource,
+  fhirVersion,
+  fhirIcons,
+  onClick,
+  rawOnClick,
+}) => {
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -165,6 +171,7 @@ const AdverseEvent = ({ fhirResource, fhirVersion, fhirIcons, onClick }) => {
           </Body>
         }
         onClick={onClick}
+        rawOnClick={rawOnClick}
       />
     </Root>
   );

diff --git a/src/components/resources/AllergyIntolerance/AllergyIntolerance.js b/src/components/resources/AllergyIntolerance/AllergyIntolerance.js
@@ -128,6 +128,7 @@ const AllergyIntolerance = ({
   fhirVersion,
   fhirIcons,
   onClick,
+  rawOnClick,
 }) => {
   let fhirResourceData = {};
   try {
@@ -237,6 +238,7 @@ const AllergyIntolerance = ({
         }
         bodyContent={<Body tableData={tableData} />}
         onClick={onClick}
+        rawOnClick={rawOnClick}
       />
     </Root>
   );

diff --git a/src/components/resources/Appointment/Appointment.js b/src/components/resources/Appointment/Appointment.js
@@ -144,7 +144,13 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
 
-const Appointment = ({ fhirResource, fhirVersion, fhirIcons, onClick }) => {
+const Appointment = ({
+  fhirResource,
+  fhirVersion,
+  fhirIcons,
+  onClick,
+  rawOnClick,
+}) => {
   const {
     description,
     status,
@@ -254,6 +260,7 @@ const Appointment = ({ fhirResource, fhirVersion, fhirIcons, onClick }) => {
           </Body>
         }
         onClick={onClick}
+        rawOnClick={rawOnClick}
       />
     </Root>
   );

diff --git a/src/components/resources/Binary/Binary.js b/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 } = props;
+  const { fhirResource, fhirIcons, rawOnClick } = props;
 
   const loadBinaryFile = () => {
     switch (fhirResource.contentType) {
@@ -37,6 +37,7 @@ const Binary = props => {
           />
         }
         bodyContent={<Body>{loadBinaryFile()}</Body>}
+        rawOnClick={rawOnClick}
       />
     </div>
   );

diff --git a/src/components/resources/CarePlan/CarePlan.js b/src/components/resources/CarePlan/CarePlan.js
@@ -162,7 +162,13 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
 
-const CarePlan = ({ fhirResource, fhirVersion, fhirIcons, onClick }) => {
+const CarePlan = ({
+  fhirResource,
+  fhirVersion,
+  fhirIcons,
+  onClick,
+  rawOnClick,
+}) => {
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -305,6 +311,7 @@ const CarePlan = ({ fhirResource, fhirVersion, fhirIcons, onClick }) => {
           </Body>
         }
         onClick={onClick}
+        rawOnClick={rawOnClick}
       />
     </Root>
   );

diff --git a/src/components/resources/CareTeam/CareTeam.js b/src/components/resources/CareTeam/CareTeam.js
@@ -83,7 +83,13 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
 
-const CareTeam = ({ fhirResource, fhirVersion, fhirIcons, onClick }) => {
+const CareTeam = ({
+  fhirResource,
+  fhirVersion,
+  fhirIcons,
+  onClick,
+  rawOnClick,
+}) => {
   const {
     name,
     status,
@@ -167,6 +173,7 @@ const CareTeam = ({ fhirResource, fhirVersion, fhirIcons, onClick }) => {
           </Body>
         }
         onClick={onClick}
+        rawOnClick={rawOnClick}
       />
     </Root>
   );

diff --git a/src/components/resources/Claim/Claim.js b/src/components/resources/Claim/Claim.js
@@ -298,7 +298,13 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
 
-const Claim = ({ fhirResource, fhirVersion, fhirIcons, onClick }) => {
+const Claim = ({
+  fhirResource,
+  fhirVersion,
+  fhirIcons,
+  onClick,
+  rawOnClick,
+}) => {
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -482,6 +488,7 @@ const Claim = ({ fhirResource, fhirVersion, fhirIcons, onClick }) => {
           </Body>
         }
         onClick={onClick}
+        rawOnClick={rawOnClick}
       />
     </Root>
   );

diff --git a/src/components/resources/ClaimResponse/ClaimResponse.js b/src/components/resources/ClaimResponse/ClaimResponse.js
@@ -285,7 +285,13 @@ const hasPaymentInfo = payment => {
   return Object.values(payment).filter(item => item).length > 0;
 };
 
-const ClaimResponse = ({ fhirVersion, fhirResource, fhirIcons, onClick }) => {
+const ClaimResponse = ({
+  fhirVersion,
+  fhirResource,
+  fhirIcons,
+  onClick,
+  rawOnClick,
+}) => {
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -449,6 +455,7 @@ const ClaimResponse = ({ fhirVersion, fhirResource, fhirIcons, onClick }) => {
           </Body>
         }
         onClick={onClick}
+        rawOnClick={rawOnClick}
       />
     </Root>
   );

diff --git a/src/components/resources/Condition/Condition.js b/src/components/resources/Condition/Condition.js
@@ -87,7 +87,13 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
 
-const Condition = ({ fhirResource, fhirVersion, fhirIcons, onClick }) => {
+const Condition = ({
+  fhirResource,
+  fhirVersion,
+  fhirIcons,
+  onClick,
+  rawOnClick,
+}) => {
   const {
     codeText,
     severityText,
@@ -157,6 +163,7 @@ const Condition = ({ fhirResource, fhirVersion, fhirIcons, onClick }) => {
         }
         bodyContent={<Body tableData={tableData} />}
         onClick={onClick}
+        rawOnClick={rawOnClick}
       />
     </Root>
   );

diff --git a/src/components/resources/Coverage/Coverage.js b/src/components/resources/Coverage/Coverage.js
@@ -114,7 +114,13 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
 
-const Coverage = ({ fhirResource, fhirVersion, fhirIcons, onClick }) => {
+const Coverage = ({
+  fhirResource,
+  fhirVersion,
+  fhirIcons,
+  onClick,
+  rawOnClick,
+}) => {
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -233,6 +239,7 @@ const Coverage = ({ fhirResource, fhirVersion, fhirIcons, onClick }) => {
         }
         bodyContent={<Body tableData={tableData} />}
         onClick={onClick}
+        rawOnClick={rawOnClick}
       />
     </Root>
   );

diff --git a/src/components/resources/Device/Device.js b/src/components/resources/Device/Device.js
@@ -102,7 +102,13 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
 
-const Device = ({ fhirResource, fhirVersion, fhirIcons, onClick }) => {
+const Device = ({
+  fhirResource,
+  fhirVersion,
+  fhirIcons,
+  onClick,
+  rawOnClick,
+}) => {
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -179,6 +185,7 @@ const Device = ({ fhirResource, fhirVersion, fhirIcons, onClick }) => {
           </Body>
         }
         onClick={onClick}
+        rawOnClick={rawOnClick}
       />
     </Root>
   );

diff --git a/src/components/resources/DiagnosticReport/DiagnosticReport.js b/src/components/resources/DiagnosticReport/DiagnosticReport.js
@@ -98,6 +98,7 @@ const DiagnosticReport = ({
   fhirVersion,
   fhirIcons,
   onClick,
+  rawOnClick,
 }) => {
   let fhirResourceData = {};
   try {
@@ -170,6 +171,7 @@ const DiagnosticReport = ({
         }
         bodyContent={<Body tableData={tableData} />}
         onClick={onClick}
+        rawOnClick={rawOnClick}
       />
     </Root>
   );

diff --git a/src/components/resources/DocumentReference/DocumentReference.js b/src/components/resources/DocumentReference/DocumentReference.js
@@ -221,6 +221,7 @@ const DocumentReference = ({
   fhirResource,
   fhirIcons,
   onClick,
+  rawOnClick,
 }) => {
   let fhirResourceData = {};
   try {
@@ -342,6 +343,7 @@ const DocumentReference = ({
           </Body>
         }
         onClick={onClick}
+        rawOnClick={rawOnClick}
       />
     </Root>
   );

diff --git a/src/components/resources/Encounter/Encounter.js b/src/components/resources/Encounter/Encounter.js
@@ -160,7 +160,13 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
 
-const Encounter = ({ fhirResource, fhirVersion, fhirIcons, onClick }) => {
+const Encounter = ({
+  fhirResource,
+  fhirVersion,
+  fhirIcons,
+  onClick,
+  rawOnClick,
+}) => {
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -230,6 +236,7 @@ const Encounter = ({ fhirResource, fhirVersion, fhirIcons, onClick }) => {
           </Body>
         }
         onClick={onClick}
+        rawOnClick={rawOnClick}
       />
     </Root>
   );

diff --git a/src/components/resources/ExplanationOfBenefit/ExplanationOfBenefit.js b/src/components/resources/ExplanationOfBenefit/ExplanationOfBenefit.js
@@ -234,6 +234,7 @@ const ExplanationOfBenefit = ({
   withCarinBBProfile = false,
   fhirIcons,
   onClick,
+  rawOnClick,
 }) => {
   let fhirResourceData = {};
   try {
@@ -548,6 +549,7 @@ const ExplanationOfBenefit = ({
           </Body>
         }
         onClick={onClick}
+        rawOnClick={rawOnClick}
       />
     </Root>
   );

diff --git a/src/components/resources/FamilyMemberHistory/FamilyMemberHistory.js b/src/components/resources/FamilyMemberHistory/FamilyMemberHistory.js
@@ -75,6 +75,7 @@ const FamilyMemberHistory = ({
   fhirVersion,
   fhirIcons,
   onClick,
+  rawOnClick,
 }) => {
   let fhirResourceData = {};
   try {
@@ -140,6 +141,7 @@ const FamilyMemberHistory = ({
         }
         bodyContent={<Body tableData={tableData} />}
         onClick={onClick}
+        rawOnClick={rawOnClick}
       />
     </Root>
   );

diff --git a/src/components/resources/Generic/Generic.js b/src/components/resources/Generic/Generic.js
@@ -4,7 +4,7 @@ import _get from 'lodash/get';
 import { Root, Header } from '../../ui';
 import Accordion from '../../containers/Accordion';
 
-const Generic = ({ fhirResource, fhirIcons, onClick }) => {
+const Generic = ({ fhirResource, fhirIcons, onClick, rawOnClick }) => {
   const title = fhirResource
     ? `${fhirResource.resourceType}/${fhirResource.id}`
     : `Unknown Resource`;
@@ -30,6 +30,7 @@ const Generic = ({ fhirResource, fhirIcons, onClick }) => {
           />
         }
         onClick={onClick}
+        rawOnClick={rawOnClick}
       />
     </Root>
   );

diff --git a/src/components/resources/Goal/Goal.js b/src/components/resources/Goal/Goal.js
@@ -99,7 +99,13 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
 
-const Goal = ({ fhirResource, fhirVersion, fhirIcons, onClick }) => {
+const Goal = ({
+  fhirResource,
+  fhirVersion,
+  fhirIcons,
+  onClick,
+  rawOnClick,
+}) => {
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -228,6 +234,7 @@ const Goal = ({ fhirResource, fhirVersion, fhirIcons, onClick }) => {
         }
         bodyContent={<Body tableData={tableData} />}
         onClick={onClick}
+        rawOnClick={rawOnClick}
       />
     </Root>
   );

diff --git a/src/components/resources/Immunization/Immunization.js b/src/components/resources/Immunization/Immunization.js
@@ -103,7 +103,13 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
 
-const Immunization = ({ fhirVersion, fhirResource, fhirIcons, onClick }) => {
+const Immunization = ({
+  fhirVersion,
+  fhirResource,
+  fhirIcons,
+  onClick,
+  rawOnClick,
+}) => {
   const {
     title,
     status,
@@ -241,6 +247,7 @@ const Immunization = ({ fhirVersion, fhirResource, fhirIcons, onClick }) => {
         }
         bodyContent={<Body tableData={tableData} />}
         onClick={onClick}
+        rawOnClick={rawOnClick}
       />
     </Root>
   );

diff --git a/src/components/resources/List/List.js b/src/components/resources/List/List.js
@@ -131,6 +131,7 @@ const List = ({
   withDaVinciPDex = false,
   fhirIcons,
   onClick,
+  rawOnClick,
 }) => {
   let fhirResourceData = {};
   try {
@@ -291,6 +292,7 @@ const List = ({
           </Body>
         }
         onClick={onClick}
+        rawOnClick={rawOnClick}
       />
     </Root>
   );

diff --git a/src/components/resources/Location/Location.js b/src/components/resources/Location/Location.js
@@ -9,7 +9,7 @@ import CodeableConcept from '../../datatypes/CodeableConcept';
 import Reference from '../../datatypes/Reference';
 import Accordion from '../../containers/Accordion';
 
-const Location = ({ fhirResource, fhirIcons, onClick }) => {
+const Location = ({ fhirResource, fhirIcons, onClick, rawOnClick }) => {
   const name = _get(fhirResource, 'name');
   const status = _get(fhirResource, 'status');
   const description = _get(fhirResource, 'description');
@@ -82,6 +82,7 @@ const Location = ({ fhirResource, fhirIcons, onClick }) => {
         }
         bodyContent={<Body tableData={tableData} />}
         onClick={onClick}
+        rawOnClick={rawOnClick}
       />
     </Root>
   );

diff --git a/src/components/resources/Medication/Medication.js b/src/components/resources/Medication/Medication.js
@@ -162,7 +162,13 @@ const Ingredient = props => {
   );
 };
 
-const Medication = ({ fhirResource, fhirVersion, fhirIcons, onClick }) => {
+const Medication = ({
+  fhirResource,
+  fhirVersion,
+  fhirIcons,
+  onClick,
+  rawOnClick,
+}) => {
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -274,6 +280,7 @@ const Medication = ({ fhirResource, fhirVersion, fhirIcons, onClick }) => {
           </Body>
         }
         onClick={onClick}
+        rawOnClick={rawOnClick}
       />
     </Root>
   );

diff --git a/src/components/resources/MedicationAdministration/MedicationAdministration.js b/src/components/resources/MedicationAdministration/MedicationAdministration.js
@@ -115,6 +115,7 @@ const MedicationAdministration = ({
   fhirVersion,
   fhirIcons,
   onClick,
+  rawOnClick,
 }) => {
   let fhirResourceData = {};
   try {
@@ -213,6 +214,7 @@ const MedicationAdministration = ({
           </Body>
         }
         onClick={onClick}
+        rawOnClick={rawOnClick}
       />
     </Root>
   );

diff --git a/src/components/resources/MedicationDispense/MedicationDispense.js b/src/components/resources/MedicationDispense/MedicationDispense.js
@@ -164,6 +164,7 @@ const MedicationDispense = ({
   fhirVersion,
   fhirIcons,
   onClick,
+  rawOnClick,
 }) => {
   let fhirResourceData = {};
   try {
@@ -243,6 +244,7 @@ const MedicationDispense = ({
           </Body>
         }
         onClick={onClick}
+        rawOnClick={rawOnClick}
       />
     </Root>
   );

diff --git a/src/components/resources/MedicationKnowledge/MedicationKnowledge.js b/src/components/resources/MedicationKnowledge/MedicationKnowledge.js
@@ -109,6 +109,7 @@ const MedicationKnowledge = ({
   withDaVinciPDex = false,
   fhirIcons,
   onClick,
+  rawOnClick,
 }) => {
   let fhirResourceData = {};
   try {
@@ -252,6 +253,7 @@ const MedicationKnowledge = ({
           </Body>
         }
         onClick={onClick}
+        rawOnClick={rawOnClick}
       />
     </Root>
   );

diff --git a/src/components/resources/MedicationOrder/MedicationOrder.js b/src/components/resources/MedicationOrder/MedicationOrder.js
@@ -8,7 +8,7 @@ import Coding from '../../datatypes/Coding';
 
 import { Root, Header, Body } from '../../ui';
 
-const MedicationOrder = ({ fhirResource, fhirIcons, onClick }) => {
+const MedicationOrder = ({ fhirResource, fhirIcons, onClick, rawOnClick }) => {
   const medicationReference = _get(fhirResource, 'medicationReference');
   const medicationCodeableConcept = _get(
     fhirResource,
@@ -65,6 +65,7 @@ const MedicationOrder = ({ fhirResource, fhirIcons, onClick }) => {
         }
         bodyContent={<Body tableData={tableData} />}
         onClick={onClick}
+        rawOnClick={rawOnClick}
       />
     </Root>
   );

diff --git a/src/components/resources/MedicationRequest/MedicationRequest.js b/src/components/resources/MedicationRequest/MedicationRequest.js
@@ -9,7 +9,12 @@ import Date from '../../datatypes/Date';
 
 import { Root, Header, Body } from '../../ui';
 
-const MedicationRequest = ({ fhirResource, fhirIcons, onClick }) => {
+const MedicationRequest = ({
+  fhirResource,
+  fhirIcons,
+  onClick,
+  rawOnClick,
+}) => {
   const medicationReference = _get(fhirResource, 'medicationReference');
   const medicationCodeableConcept = _get(
     fhirResource,
@@ -88,6 +93,7 @@ const MedicationRequest = ({ fhirResource, fhirIcons, onClick }) => {
         }
         bodyContent={<Body tableData={tableData} />}
         onClick={onClick}
+        rawOnClick={rawOnClick}
       />
     </Root>
   );

diff --git a/src/components/resources/MedicationStatement/MedicationStatement.js b/src/components/resources/MedicationStatement/MedicationStatement.js
@@ -112,6 +112,7 @@ const MedicationStatement = ({
   fhirVersion,
   fhirIcons,
   onClick,
+  rawOnClick,
 }) => {
   let fhirResourceData = {};
   try {
@@ -205,6 +206,7 @@ const MedicationStatement = ({
           </Body>
         }
         onClick={onClick}
+        rawOnClick={rawOnClick}
       />
     </Root>
   );

diff --git a/src/components/resources/Observation/Observation.js b/src/components/resources/Observation/Observation.js
@@ -18,7 +18,7 @@ import {
 } from '../../ui';
 import Reference from '../../datatypes/Reference';
 
-const Observation = ({ fhirResource, fhirIcons, onClick }) => {
+const Observation = ({ fhirResource, fhirIcons, onClick, rawOnClick }) => {
   const effectiveDate = _get(fhirResource, 'effectiveDateTime');
   const codeCodingDisplay = _get(fhirResource, 'code.coding.0.display');
   const codeText = _get(fhirResource, 'code.text', '');
@@ -115,6 +115,7 @@ const Observation = ({ fhirResource, fhirIcons, onClick }) => {
           </Body>
         }
         onClick={onClick}
+        rawOnClick={rawOnClick}
       />
     </Root>
   );

diff --git a/src/components/resources/Observation/ObservationGraph.js b/src/components/resources/Observation/ObservationGraph.js
@@ -44,7 +44,7 @@ const observationValuePoint = (actualValue, unit, small) => {
     >
       {!small && (
         <span
-          className={`position-absolute top-0 translate-middle ps-2 ${
+          className={`position-absolute top-0 translate-middle ps-sm-2 ps-0 pe-4 pe-sm-0 ${
             small ? 'pb-4 fs-1' : 'pb-5 fs-4'
           } w-max-content`}
           data-testid="valuePoint"

diff --git a/src/components/resources/Organization/Organization.js b/src/components/resources/Organization/Organization.js
@@ -55,7 +55,13 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
 
-const Organization = ({ fhirResource, fhirVersion, fhirIcons, onClick }) => {
+const Organization = ({
+  fhirResource,
+  fhirVersion,
+  fhirIcons,
+  onClick,
+  rawOnClick,
+}) => {
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -128,6 +134,7 @@ const Organization = ({ fhirResource, fhirVersion, fhirIcons, onClick }) => {
         }
         bodyContent={<Body tableData={tableData} />}
         onClick={onClick}
+        rawOnClick={rawOnClick}
       />
     </Root>
   );

diff --git a/src/components/resources/Patient/Patient.js b/src/components/resources/Patient/Patient.js
@@ -47,6 +47,7 @@ function Patient(props) {
     patientSimple,
     fhirIcons,
     onClick,
+    rawOnClick,
   } = props;
 
   const id = getId(fhirResource);
@@ -148,6 +149,7 @@ function Patient(props) {
         }
         bodyContent={<Body tableData={tableData} />}
         onClick={onClick}
+        rawOnClick={rawOnClick}
       />
     </Root>
   );

diff --git a/src/components/resources/Practitioner/Practitioner.js b/src/components/resources/Practitioner/Practitioner.js
@@ -82,7 +82,13 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
 
-const Practitioner = ({ fhirResource, fhirVersion, fhirIcons, onClick }) => {
+const Practitioner = ({
+  fhirResource,
+  fhirVersion,
+  fhirIcons,
+  onClick,
+  rawOnClick,
+}) => {
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -161,6 +167,7 @@ const Practitioner = ({ fhirResource, fhirVersion, fhirIcons, onClick }) => {
         }
         bodyContent={<Body tableData={tableData} />}
         onClick={onClick}
+        rawOnClick={rawOnClick}
       />
     </Root>
   );

diff --git a/src/components/resources/PractitionerRole/PractitionerRole.js b/src/components/resources/PractitionerRole/PractitionerRole.js
@@ -48,6 +48,7 @@ const PractitionerRole = ({
   fhirVersion,
   fhirIcons,
   onClick,
+  rawOnClick,
 }) => {
   let fhirResourceData = {};
   try {
@@ -106,6 +107,7 @@ const PractitionerRole = ({
         }
         bodyContent={<Body tableData={tableData} />}
         onClick={onClick}
+        rawOnClick={rawOnClick}
       />
     </Root>
   );

diff --git a/src/components/resources/Procedure/Procedure.js b/src/components/resources/Procedure/Procedure.js
@@ -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>
   );

diff --git a/src/components/resources/Questionnaire/Questionnaire.js b/src/components/resources/Questionnaire/Questionnaire.js
@@ -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>
   );

diff --git a/src/components/resources/QuestionnaireResponse/QuestionnaireResponse.js b/src/components/resources/QuestionnaireResponse/QuestionnaireResponse.js
@@ -76,6 +76,7 @@ const QuestionnaireResponse = ({
   fhirVersion,
   fhirIcons,
   onClick,
+  rawOnClick,
 }) => {
   let fhirResourceData = {};
 
@@ -139,6 +140,7 @@ const QuestionnaireResponse = ({
           </Body>
         }
         onClick={onClick}
+        rawOnClick={rawOnClick}
       />
     </Root>
   );

diff --git a/src/components/resources/ReferralRequest/ReferralRequest.js b/src/components/resources/ReferralRequest/ReferralRequest.js
@@ -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>
   );

diff --git a/src/components/resources/RelatedPerson/RelatedPerson.js b/src/components/resources/RelatedPerson/RelatedPerson.js
@@ -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>
   );

diff --git a/src/components/resources/ResearchStudy/ResearchStudy.js b/src/components/resources/ResearchStudy/ResearchStudy.js
@@ -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>
   );

diff --git a/src/components/resources/ResourceCategory/ResourceCategory.js b/src/components/resources/ResourceCategory/ResourceCategory.js
@@ -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

diff --git a/src/components/ui/index.js b/src/components/ui/index.js
@@ -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']}

diff --git a/src/style.scss b/src/style.scss
@@ -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 {