fhir-react 0.3.7 → 0.3.8

package/package.json

@@ -1,23 +1,23 @@
 {
   "name": "fhir-react",
-  "version": "0.3.7",
+  "version": "0.3.8",
   "description": "React component library for displaying FHIR Resources ",
   "main": "build/index.js",
   "peerDependencies": {
-    "react": "^17.0.1"
+    "react": "^17.0.2"
   },
   "dependencies": {
-    "@nivo/core": "^0.74.0",
-    "@nivo/pie": "^0.74.0",
-    "@popperjs/core": "^2.10.2",
-    "bootstrap": "^5.1.1",
-    "dompurify": "^2.0.7",
-    "lodash": "^4.17.15",
-    "marked": "^0.8.0",
-    "md5": "^2.2.1",
-    "pretty-bytes": "^5.3.0",
-    "prop-types": "^15.7.2",
-    "react": "^17.0.1",
+    "@nivo/core": "^0.78.0",
+    "@nivo/pie": "^0.78.0",
+    "@popperjs/core": "^2.11.2",
+    "bootstrap": "^5.1.3",
+    "dompurify": "^2.3.6",
+    "lodash": "^4.17.21",
+    "marked": "^3.0.8",
+    "md5": "^2.3.0",
+    "pretty-bytes": "^5.6.0",
+    "prop-types": "^15.8.1",
+    "react": "^17.0.2",
     "svg-url-loader": "^7.1.1"
   },
   "scripts": {
@@ -59,61 +59,62 @@
   ],
   "license": "CC-BY-NC-SA-4.0",
   "devDependencies": {
-    "@babel/cli": "^7.7.4",
-    "@babel/core": "^7.0.0",
-    "@babel/plugin-proposal-class-properties": "^7.0.0",
-    "@babel/plugin-proposal-decorators": "^7.0.0",
-    "@babel/plugin-proposal-do-expressions": "^7.0.0",
-    "@babel/plugin-proposal-export-default-from": "^7.0.0",
-    "@babel/plugin-proposal-export-namespace-from": "^7.0.0",
-    "@babel/plugin-proposal-function-bind": "^7.0.0",
-    "@babel/plugin-proposal-function-sent": "^7.0.0",
-    "@babel/plugin-proposal-json-strings": "^7.0.0",
-    "@babel/plugin-proposal-logical-assignment-operators": "^7.0.0",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.0.0",
-    "@babel/plugin-proposal-numeric-separator": "^7.0.0",
-    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
-    "@babel/plugin-proposal-optional-chaining": "^7.0.0",
-    "@babel/plugin-proposal-pipeline-operator": "^7.0.0",
-    "@babel/plugin-proposal-throw-expressions": "^7.0.0",
-    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
-    "@babel/plugin-syntax-import-meta": "^7.0.0",
-    "@babel/plugin-transform-react-jsx": "^7.0.0",
+    "@babel/cli": "^7.17.6",
+    "@babel/core": "^7.17.5",
+    "@babel/plugin-proposal-class-properties": "^7.16.7",
+    "@babel/plugin-proposal-decorators": "^7.17.2",
+    "@babel/plugin-proposal-do-expressions": "^7.16.7",
+    "@babel/plugin-proposal-export-default-from": "^7.16.7",
+    "@babel/plugin-proposal-export-namespace-from": "^7.16.7",
+    "@babel/plugin-proposal-function-bind": "^7.16.7",
+    "@babel/plugin-proposal-function-sent": "^7.16.7",
+    "@babel/plugin-proposal-json-strings": "^7.16.7",
+    "@babel/plugin-proposal-logical-assignment-operators": "^7.16.7",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.7",
+    "@babel/plugin-proposal-numeric-separator": "^7.16.7",
+    "@babel/plugin-proposal-object-rest-spread": "^7.17.3",
+    "@babel/plugin-proposal-optional-chaining": "^7.16.7",
+    "@babel/plugin-proposal-pipeline-operator": "^7.17.6",
+    "@babel/plugin-proposal-throw-expressions": "^7.16.7",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/plugin-syntax-import-meta": "^7.10.4",
+    "@babel/plugin-transform-react-jsx": "^7.17.3",
     "@babel/polyfill": "^7.0.0",
-    "@babel/preset-env": "^7.0.0",
-    "@babel/preset-react": "^7.7.4",
+    "@babel/preset-env": "^7.16.11",
+    "@babel/preset-react": "^7.16.7",
     "@storybook/addon-knobs": "^5.2.8",
     "@storybook/preset-scss": "^1.0.3",
     "@storybook/react": "^5.2.8",
     "@storybook/storybook-deployer": "^2.8.1",
-    "@testing-library/react": "^9.3.2",
-    "@typescript-eslint/eslint-plugin": "^2.10.0",
-    "@typescript-eslint/parser": "^2.10.0",
+    "@testing-library/react": "^12.1.4",
+    "@typescript-eslint/eslint-plugin": "^5.14.0",
+    "@typescript-eslint/parser": "^5.14.0",
     "babel-eslint": "^10.0.3",
     "babel-jest": "^24.9.0",
-    "babel-loader": "^8.0.6",
+    "babel-loader": "^8.2.3",
     "babel-plugin-transform-imports": "^2.0.0",
-    "copy-webpack-plugin": "^5.1.1",
+    "copy-webpack-plugin": "^5.1.2",
     "css-loader": "^3.6.0",
     "dedent": "^0.7.0",
-    "eslint": "^6.7.2",
-    "eslint-config-prettier": "^6.7.0",
-    "eslint-config-react-app": "^5.0.2",
-    "eslint-plugin-flowtype": "^3.13.0",
-    "eslint-plugin-import": "^2.18.2",
-    "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-prettier": "^3.1.1",
-    "eslint-plugin-react": "^7.17.0",
-    "eslint-plugin-react-hooks": "^1.7.0",
+    "eslint": "^8.10.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-config-react-app": "^7.0.0",
+    "eslint-plugin-flowtype": "^8.0.3",
+    "eslint-plugin-import": "^2.25.4",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.29.3",
+    "eslint-plugin-react-hooks": "^4.3.0",
     "jest": "^24.9.0",
-    "mini-css-extract-plugin": "^0.9.0",
+    "mini-css-extract-plugin": "^1.6.2",
+    "npm-check-updates": "^12.5.2",
     "prettier": "1.19.1",
-    "react-dom": "^16.12.0",
-    "sass": "^1.42.1",
+    "react-dom": "^17.0.2",
+    "sass": "^1.49.9",
     "sass-loader": "^10.2.0",
     "style-loader": "^2.0.0",
-    "stylelint": "^13.0.0",
-    "stylelint-config-standard": "^19.0.0",
+    "stylelint": "^14.5.3",
+    "stylelint-config-standard": "^25.0.0",
     "webpack": "^4.41.2",
     "webpack-cli": "^3.3.10"
   }

package/src/assets/containers/AdverseEvent/adverse-event.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 12C0 8.27247 0 6.4087 0.608964 4.93853C1.42092 2.97831 2.97831 1.42092 4.93853 0.608964C6.4087 0 8.27247 0 12 0C15.7275 0 17.5913 0 19.0615 0.608964C21.0217 1.42092 22.5791 2.97831 23.391 4.93853C24 6.4087 24 8.27247 24 12C24 15.7275 24 17.5913 23.391 19.0615C22.5791 21.0217 21.0217 22.5791 19.0615 23.391C17.5913 24 15.7275 24 12 24C8.27247 24 6.4087 24 4.93853 23.391C2.97831 22.5791 1.42092 21.0217 0.608964 19.0615C0 17.5913 0 15.7275 0 12Z" fill="#F8F9FA"/>
+<path d="M12 11C13.933 11 15.5 9.433 15.5 7.5C15.5 5.567 13.933 4 12 4C10.067 4 8.5 5.567 8.5 7.5C8.5 9.433 10.067 11 12 11Z" stroke="#3D8BFD" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.5 5C10.0015 5.63268 10.6029 6.13588 11.268 6.47953C11.9332 6.82317 12.6485 7.00019 13.3712 7C14.1033 7.00035 14.8277 6.81885 15.5 6.46662" stroke="#3D8BFD" stroke-linejoin="round"/>
+<path d="M4 20C4 18.1435 4.84285 16.363 6.34315 15.0503C7.84344 13.7375 9.87827 13 12 13C14.1217 13 16.1566 13.7375 17.6569 15.0503C19.1571 16.363 20 18.1435 20 20" stroke="#3D8BFD" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/containers/Generic/generic.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.9726 5.24759C15.9726 5.09345 15.9419 5.09345 15.8803 5.09345H9.23274C9.17119 5.09345 9.14041 5.06262 9.14041 5.00096V0.592486C9.14041 0.530829 9.10964 0.5 9.04809 0.5H6.95533C6.89378 0.5 6.863 0.530829 6.863 0.592486V11.8141C6.863 11.8757 6.89378 11.9066 6.95533 11.9066H9.04809C9.10964 11.9066 9.14041 11.8757 9.14041 11.8141V7.46724C9.14041 7.40559 9.17119 7.37476 9.23274 7.37476H13.6029C13.6645 7.37476 13.6952 7.40559 13.6952 7.46724V9.56358C13.6952 9.62524 13.6645 9.65607 13.6029 9.65607H11.5102C11.4486 9.65607 11.4178 9.6869 11.4178 9.74855V14.1262C11.4178 14.1879 11.387 14.2187 11.3255 14.2187H4.67792C4.61637 14.2187 4.5856 14.1879 4.5856 14.1262V5.18593C4.5856 5.12428 4.55482 5.09345 4.49327 5.09345L0 5.06262V7.34393H2.18508C2.24663 7.34393 2.27741 7.37476 2.27741 7.43642V16.4075C2.27741 16.4692 2.30819 16.5 2.36974 16.5H13.6029C13.6645 16.5 13.6952 16.4692 13.6952 16.4075V16.4383V12.0607C13.6952 11.9682 13.726 11.9374 13.7876 11.9374H15.8495C15.8495 11.9374 15.9111 11.9374 15.9726 11.8757C16.0342 11.8449 15.9726 5.24759 15.9726 5.24759Z" fill="#3D8BFD"/>
+</svg>

package/src/assets/containers/MedicationDispense/medication-dispense.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.52175 9.0435C7.01904 9.0435 9.0435 7.01904 9.0435 4.52175C9.0435 2.02446 7.01904 0 4.52175 0C2.02446 0 0 2.02446 0 4.52175C0 7.01904 2.02446 9.0435 4.52175 9.0435Z" fill="#FD7E14"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.6396 15.0832C11.0525 15.6702 10.2563 16.0001 9.42605 16.0001C8.5958 16.0001 7.79956 15.6702 7.21248 15.0832C6.62541 14.4961 6.29559 13.6998 6.29559 12.8696C6.29559 12.0394 6.62541 11.2431 7.21248 10.656L8.58067 9.28784L8.58071 9.28788L13.0078 13.715L11.6396 15.0832ZM10.656 7.21254L9.28778 8.58073L9.28782 8.58077L13.7149 13.0079L15.0831 11.6397C15.6702 11.0526 16 10.2564 16 9.42611C16 8.59587 15.6702 7.79962 15.0831 7.21254C14.496 6.62547 13.6998 6.29565 12.8695 6.29565C12.0393 6.29565 11.243 6.62547 10.656 7.21254ZM12.6279 8.21057C12.8683 8.16276 13.1175 8.18732 13.344 8.28116C13.5991 8.38687 13.8916 8.26576 13.9973 8.01065C14.103 7.75554 13.9819 7.46304 13.7268 7.35733C13.3176 7.18776 12.8672 7.14338 12.4328 7.22979C11.9984 7.3162 11.5993 7.52952 11.2861 7.84278C11.0909 8.03806 11.0909 8.35464 11.2862 8.54988C11.4815 8.74512 11.7981 8.74509 11.9933 8.5498C12.1666 8.37645 12.3875 8.25839 12.6279 8.21057Z" fill="#FEB272"/>
+<rect x="1" y="4" width="7" height="1" rx="0.5" fill="white"/>
+</svg>

package/src/assets/containers/PractitionerRole/practitioner-role.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.74782 12.3321C3.36587 12.5582 3.11111 12.9647 3.11111 13.4286C3.11111 14.1387 3.70804 14.7143 4.44444 14.7143C5.18084 14.7143 5.77778 14.1387 5.77778 13.4286C5.77778 12.7754 5.27271 12.236 4.61862 12.1537C4.60404 12.1034 4.58884 12.0454 4.57338 11.9803C4.52013 11.7559 4.46933 11.4714 4.43151 11.1791C4.3936 10.8862 4.37009 10.5959 4.36853 10.3589C4.36796 10.2721 4.3704 10.1964 4.37538 10.1329C4.54636 10.0856 4.71782 10.043 4.88889 10.0054C5.08502 9.96233 5.20111 10.1856 5.29516 10.3665C5.30827 10.3917 5.32093 10.416 5.33333 10.4387H7.13951C7.54653 10.4386 7.74773 10.4387 7.95124 10.4387C8.15004 10.4388 8.35138 10.4388 8.74893 10.4387H10.5552C10.6567 10.2529 10.8876 9.95633 11.1111 10.0054C11.3495 10.0578 11.5887 10.1199 11.8262 10.191L11.8247 10.1917C11.8242 10.1907 11.8242 10.1908 11.8248 10.1923C11.8268 10.1983 11.8366 10.2263 11.8463 10.2871C11.8574 10.3563 11.8651 10.4462 11.8682 10.5544C11.8745 10.7706 11.862 11.0333 11.8354 11.298C11.8088 11.5624 11.7694 11.8184 11.7249 12.0205C11.7151 12.0652 11.7053 12.106 11.6956 12.1429H11.1111C10.9428 12.1429 10.7889 12.2346 10.7136 12.3798L10.2692 13.2369C10.2383 13.2964 10.2222 13.3621 10.2222 13.4286V14.2857C10.2222 14.5224 10.4212 14.7143 10.6667 14.7143H11.5556V13.8571H11.1111V13.5298L11.3858 13H12.6142L12.8889 13.5298V13.8571H12.4444V14.7143H13.3333C13.5788 14.7143 13.7778 14.5224 13.7778 14.2857V13.4286C13.7778 13.3621 13.7617 13.2964 13.7308 13.2369L13.2864 12.3798C13.2111 12.2346 13.0572 12.1429 12.8889 12.1429H12.6064C12.6538 11.9146 12.6933 11.6478 12.7201 11.3806C12.7492 11.0917 12.7644 10.7919 12.7568 10.5304L12.7564 10.5186C14.5287 11.2407 16 12.4283 16 13.6728V16H0V13.6728C0 12.3733 1.60441 11.1357 3.48044 10.4256C3.48551 10.692 3.51169 10.9935 3.54942 11.2852C3.59018 11.6001 3.64573 11.9137 3.70693 12.1715C3.72004 12.2268 3.73369 12.2806 3.74782 12.3321ZM4.44444 13.8634C4.68373 13.8634 4.88889 13.6747 4.88889 13.4286C4.88889 13.1825 4.68373 12.9937 4.44444 12.9937C4.20516 12.9937 4 13.1825 4 13.4286C4 13.6747 4.20516 13.8634 4.44444 13.8634Z" fill="#0D6EFD"/>
+<circle cx="8" cy="4.5" r="4" fill="white" stroke="#0D6EFD"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.78711 0.580775C6.44054 0.211042 7.19561 0 7.99998 0C10.2885 0 12.178 1.70828 12.4628 3.91922C11.8094 4.28896 11.0543 4.5 10.25 4.5C7.96149 4.5 6.072 2.79172 5.78711 0.580775Z" fill="#0D6EFD"/>
+</svg>

package/src/assets/containers/ReferralRequest/referral-request.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="24" height="24" rx="4" fill="white"/>
+<rect x="4" y="4" width="12" height="16" rx="1" fill="#D63384"/>
+<path d="M6 7H14" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6 10H11" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6 13H10" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M17.7141 13.9H17.7143H18.8571C19.3009 13.9 19.7213 14.0853 20.0273 14.4066C20.3325 14.7271 20.5 15.1568 20.5 15.6C20.5 15.8841 20.3928 16.1611 20.1947 16.3691C20.1166 16.4511 20.0267 16.5198 19.9286 16.5729V17.4C19.9286 17.6841 19.8213 17.9611 19.6233 18.1691C19.4244 18.3779 19.1494 18.5 18.8571 18.5H13.1429C12.8506 18.5 12.5756 18.3779 12.3767 18.1691C12.1787 17.9611 12.0714 17.6841 12.0714 17.4V16.5729C11.9733 16.5198 11.8834 16.4511 11.8053 16.3691C11.6072 16.1611 11.5 15.8841 11.5 15.6C11.5 15.1568 11.6675 14.7271 11.9727 14.4066C12.2787 14.0853 12.6991 13.9 13.1429 13.9H14.2857H14.2859C14.4454 13.9001 14.6037 13.835 14.7256 13.7106C14.8481 13.5855 14.9235 13.4104 14.9287 13.221C14.9314 13.1048 14.9076 12.9905 14.8603 12.8877L15.3145 12.6787L14.8603 12.8877C14.813 12.785 14.7443 12.698 14.6616 12.6325C14.2906 12.3401 14.0203 11.9358 13.8844 11.4793C13.7486 11.0227 13.753 10.5334 13.8971 10.0795L14.3519 10.2239L13.8971 10.0795C14.0413 9.6254 14.3192 9.22616 14.6959 8.94107C15.073 8.65567 15.5293 8.5 16 8.5C16.4707 8.5 16.927 8.65567 17.3041 8.94107C17.6808 9.22616 17.9587 9.6254 18.1029 10.0795C18.247 10.5334 18.2514 11.0227 18.1156 11.4793C17.9797 11.936 17.7092 12.3405 17.3379 12.6328L17.3377 12.633C17.255 12.6981 17.1861 12.7848 17.1389 12.8875C17.0917 12.9902 17.0681 13.1045 17.0712 13.2206L17.7141 13.9ZM17.7141 13.9C17.5546 13.9001 17.3964 13.8351 17.2745 13.7107M17.7141 13.9L17.2745 13.7107M17.2745 13.7107C17.1519 13.5856 17.0764 13.4103 17.0712 13.2208L17.2745 13.7107Z" fill="#E685B5" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/containers/RelatedPerson/related-person.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 12C0 8.27247 0 6.4087 0.608964 4.93853C1.42092 2.97831 2.97831 1.42092 4.93853 0.608964C6.4087 0 8.27247 0 12 0C15.7275 0 17.5913 0 19.0615 0.608964C21.0217 1.42092 22.5791 2.97831 23.391 4.93853C24 6.4087 24 8.27247 24 12C24 15.7275 24 17.5913 23.391 19.0615C22.5791 21.0217 21.0217 22.5791 19.0615 23.391C17.5913 24 15.7275 24 12 24C8.27247 24 6.4087 24 4.93853 23.391C2.97831 22.5791 1.42092 21.0217 0.608964 19.0615C0 17.5913 0 15.7275 0 12Z" fill="#F8F9FA"/>
+<path d="M12 11C13.933 11 15.5 9.433 15.5 7.5C15.5 5.567 13.933 4 12 4C10.067 4 8.5 5.567 8.5 7.5C8.5 9.433 10.067 11 12 11Z" stroke="#3D8BFD" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.5 5C10.0015 5.63268 10.6029 6.13588 11.268 6.47953C11.9332 6.82317 12.6485 7.00019 13.3712 7C14.1033 7.00035 14.8277 6.81885 15.5 6.46662" stroke="#3D8BFD" stroke-linejoin="round"/>
+<path d="M4 20C4 18.1435 4.84285 16.363 6.34315 15.0503C7.84344 13.7375 9.87827 13 12 13C14.1217 13 16.1566 13.7375 17.6569 15.0503C19.1571 16.363 20 18.1435 20 20" stroke="#3D8BFD" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/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 } = props;
+  const { headerContent, bodyContent, onClick } = props;
   const [rotate, setRotate] = useState(false);
   const handleAccordionClick = () => setRotate(!rotate);
   const accordionId = uniqueId(
@@ -14,16 +14,18 @@ const Accordion = props => {
   );
 
   const isAccordionOpenable = () => {
-    const tableDataCondition =
-      bodyContent.props.tableData &&
-      bodyContent.props.tableData.filter(x => 'data' in x && x.data).length > 0;
-    const childrenCondition =
-      bodyContent.props.children &&
-      (bodyContent.props.children.length > 0 || bodyContent.props.children);
-    if (tableDataCondition || childrenCondition) {
-      return true;
+    if (bodyContent) {
+      const tableDataCondition =
+        bodyContent.props.tableData &&
+        bodyContent.props.tableData.filter(x => 'data' in x && x.data).length >
+          0;
+      const childrenCondition =
+        bodyContent.props.children &&
+        (bodyContent.props.children.length > 0 || bodyContent.props.children);
+      if (tableDataCondition || childrenCondition) {
+        return true;
+      }
     }
-
     return false;
   };
 
@@ -55,16 +57,22 @@ const Accordion = props => {
               }`}
               type="button"
               data-bs-target={`#${accordionId}`}
-              data-bs-toggle={isAccordionOpenable() ? 'collapse' : null}
+              data-bs-toggle={
+                isAccordionOpenable() && typeof onClick !== 'function'
+                  ? 'collapse'
+                  : null
+              }
               aria-controls={accordionId}
               aria-expanded="false"
-              onClick={handleAccordionClick}
+              onClick={
+                typeof onClick === 'function' ? onClick : handleAccordionClick
+              }
             >
               <div className="fhir-container__Accordion__header-text d-flex w-100 justify-content-start position-relative">
                 {React.cloneElement(headerContent, {
                   isAccordionOpenable: isAccordionOpenable(),
                 })}
-                {getChevron()}
+                {typeof onClick !== 'function' && getChevron()}
               </div>
             </button>
           </div>

package/src/components/datatypes/CodeableConcept/CodeableConcept.js

@@ -19,8 +19,7 @@ export const hasValue = data => {
   return false;
 };
 
-const CodeableConcept = props => {
-  const { fhirData } = props;
+const CodeableConcept = ({ fhirData, isCursive = false }) => {
   if (!_isObject(fhirData)) return null;
 
   const data = Array.isArray(fhirData) ? fhirData : [fhirData];
@@ -40,7 +39,11 @@ const CodeableConcept = props => {
               </span>
             )}
             {coding.map((codingData, j) => (
-              <Coding key={`codingData-${j}`} fhirData={codingData} />
+              <Coding
+                key={`codingData-${j}`}
+                fhirData={codingData}
+                isCursive={isCursive}
+              />
             ))}
           </div>
         );

package/src/components/datatypes/Coding/Coding.js

@@ -4,8 +4,7 @@ import _get from 'lodash/get';
 
 import './Coding.css';
 
-const Coding = props => {
-  const { fhirData } = props;
+const Coding = ({ fhirData, isCursive = false }) => {
   const display = _get(fhirData, 'display', '');
   const code = _get(fhirData, 'code', '');
   const system = _get(fhirData, 'system', '');
@@ -14,7 +13,12 @@ const Coding = props => {
     <div className="fhir-datatype__Coding">
       <span className="fhir-datatype__Coding__title">{display}</span>&nbsp;
       {hasAdditionalInfo && (
-        <span className="fhir-datatype__Coding__code" title={system}>
+        <span
+          className={`${
+            isCursive ? 'fst-italic' : ''
+          } fhir-datatype__Coding__code`}
+          title={system}
+        >
           ({code || '?'})
         </span>
       )}

package/src/components/datatypes/Reference/Reference.js

@@ -7,17 +7,19 @@ const Reference = props => {
   const { fhirData } = props;
   const display = _get(fhirData, 'display');
   const reference = _get(fhirData, 'reference', '');
+
   return (
     <div
       className="fhir-datatype__Reference d-inline-block"
       data-testid={props['data-testid']}
     >
       {display && <span className="mr-2 pe-1">{display}</span>}
-      {reference.startsWith('http://') || reference.startsWith('https://') ? (
-        <a href={reference}>{reference}</a>
-      ) : (
-        <span>{reference}</span>
-      )}
+      {!display &&
+        (reference.startsWith('http://') || reference.startsWith('https://') ? (
+          <a href={reference}>{reference}</a>
+        ) : (
+          <span>{reference}</span>
+        ))}
     </div>
   );
 };

package/src/components/datatypes/Telecom/Telecom.js

@@ -3,8 +3,7 @@ import _get from 'lodash/get';
 
 import './Telecom.css';
 
-const Telecom = props => {
-  const { fhirData } = props;
+const Telecom = ({ fhirData, noSystemData = false }) => {
   if (Array.isArray(fhirData)) {
     return (
       <div className="fhir-datatype__Telecom">
@@ -12,7 +11,7 @@ const Telecom = props => {
           const system = _get(item, 'system', '');
           return (
             <div className="fhir-datatype__Telecom__item" key={`phone-${i}`}>
-              {system && (
+              {!noSystemData && system && (
                 <span className="fhir-datatype__Telecom__item-label">
                   {system}
                 </span>

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

@@ -2,11 +2,19 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import _get from 'lodash/get';
 import fhirVersions from '../fhirResourceVersions';
-import { Root, Header, Title, Body, Value } from '../../ui';
+import {
+  Root,
+  Header,
+  Body,
+  ValueSection,
+  ValueSectionItem,
+  Value,
+} from '../../ui';
 import Reference from '../../datatypes/Reference';
 import Date from '../../datatypes/Date';
 import UnhandledResourceDataStructure from '../UnhandledResourceDataStructure';
 import CodeableConcept, { hasValue } from '../../datatypes/CodeableConcept';
+import Accordion from '../../containers/Accordion';
 
 const commonDTO = fhirResource => {
   const subject = _get(fhirResource, 'subject');
@@ -63,8 +71,7 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
 
-const AdverseEvent = props => {
-  const { fhirResource, fhirVersion } = props;
+const AdverseEvent = ({ fhirResource, fhirVersion, fhirIcons, onClick }) => {
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -86,47 +93,79 @@ const AdverseEvent = props => {
     hasEvent,
   } = fhirResourceData;
 
+  const tableData = [
+    {
+      label: 'Event',
+      testId: 'event',
+      data: hasEventType && <CodeableConcept fhirData={eventType} />,
+      status: hasEventType,
+    },
+    {
+      label: 'Event',
+      testId: 'event',
+      data: hasEvent && <CodeableConcept fhirData={event} />,
+      status: hasEvent,
+    },
+    {
+      label: 'Seriousness',
+      testId: 'hasSeriousness',
+      data: hasSeriousness && (
+        <CodeableConcept fhirData={seriousness} isCursive />
+      ),
+      status: hasSeriousness,
+    },
+    {
+      label: 'Actuality',
+      testId: 'actuality',
+      data: actuality,
+      status: actuality,
+    },
+  ];
+
   return (
     <Root name="AdverseEvent">
-      <Header>
-        {subject && (
-          <Title>
-            <Reference fhirData={subject} />
-          </Title>
-        )}
-      </Header>
-      <Body>
-        {date && (
-          <Value label="Date" data-testid="date">
-            <Date fhirData={date} />
-          </Value>
-        )}
-        {hasEventType && (
-          <Value label="Type" data-testid="type">
-            <CodeableConcept fhirData={eventType} />
-          </Value>
-        )}
-        {hasEvent && (
-          <Value label="Event" data-testid="event">
-            <CodeableConcept fhirData={event} />
-          </Value>
-        )}
-        {description && (
-          <Value label="Description" data-testid="description">
-            {description}
-          </Value>
-        )}
-        {hasSeriousness && (
-          <Value label="Seriousness" data-testid="hasSeriousness">
-            <CodeableConcept fhirData={seriousness} />
-          </Value>
-        )}
-        {actuality && (
-          <Value label="Actuality" data-testid="actuality">
-            {actuality}
-          </Value>
-        )}
-      </Body>
+      <Accordion
+        headerContent={
+          <Header
+            resourceName={'AdverseEvent'}
+            title={subject && <Reference fhirData={subject} />}
+            icon={fhirIcons}
+            additionalContent={
+              date && (
+                <Value label="Date" data-testid="date">
+                  <Date fhirData={date} isBlack />
+                </Value>
+              )
+            }
+          />
+        }
+        bodyContent={
+          <Body>
+            {description && (
+              <ValueSection
+                label="Comment"
+                data-testid="description"
+                marginBottom
+              >
+                <span className="text-secondary">{description}</span>
+              </ValueSection>
+            )}
+            {tableData.map(
+              (item, index) =>
+                item.status && (
+                  <ValueSectionItem
+                    key={`adverse-event-item-${index}`}
+                    label={item.label}
+                    data-testid={item.testId}
+                  >
+                    {item.data}
+                  </ValueSectionItem>
+                ),
+            )}
+          </Body>
+        }
+        onClick={onClick}
+      />
     </Root>
   );
 };

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

@@ -7,6 +7,8 @@ import fhirVersions from '../fhirResourceVersions';
 import stu3Example1 from '../../../fixtures/stu3/resources/adverseEvent/example1.json';
 import r4Example1 from '../../../fixtures/r4/resources/adverseEvent/example1.json';
 
+import fhirIcons from '../../../fixtures/example-icons';
+
 export default {
   title: 'AdverseEvent',
 };
@@ -14,13 +16,21 @@ export default {
 export const DefaultVisualizationSTU3 = () => {
   const fhirResource = object('Resource', stu3Example1);
   return (
-    <AdverseEvent fhirResource={fhirResource} fhirVersion={fhirVersions.STU3} />
+    <AdverseEvent
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.STU3}
+      fhirIcons={fhirIcons}
+    />
   );
 };
 
 export const Example1ofR4 = () => {
   const fhirResource = object('Resource', r4Example1);
   return (
-    <AdverseEvent fhirResource={fhirResource} fhirVersion={fhirVersions.R4} />
+    <AdverseEvent
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.R4}
+      fhirIcons={false}
+    />
   );
 };