diff --git a/README.md b/README.md index cad7b152..051209e2 100644 --- 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-6/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-7/index.html) # fhir-react diff --git a/package-lock.json b/package-lock.json index 768ce269..3ff4acca 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "fhir-react", - "version": "0.3.4", + "version": "0.3.6", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "fhir-react", - "version": "0.3.4", + "version": "0.3.6", "license": "CC-BY-NC-SA-4.0", "dependencies": { "@nivo/core": "^0.74.0", @@ -11268,14 +11268,12 @@ }, "node_modules/fsevents/node_modules/abbrev": { "version": "1.1.1", - "dev": true, "inBundle": true, "license": "ISC", "optional": true }, "node_modules/fsevents/node_modules/ansi-regex": { "version": "2.1.1", - "dev": true, "inBundle": true, "license": "MIT", "optional": true, @@ -11285,14 +11283,12 @@ }, "node_modules/fsevents/node_modules/aproba": { "version": "1.2.0", - "dev": true, "inBundle": true, "license": "ISC", "optional": true }, "node_modules/fsevents/node_modules/are-we-there-yet": { "version": "1.1.5", - "dev": true, "inBundle": true, "license": "ISC", "optional": true, @@ -11303,14 +11299,12 @@ }, "node_modules/fsevents/node_modules/balanced-match": { "version": "1.0.0", - "dev": true, "inBundle": true, "license": "MIT", "optional": true }, "node_modules/fsevents/node_modules/brace-expansion": { "version": "1.1.11", - "dev": true, "inBundle": true, "license": "MIT", "optional": true, @@ -11321,14 +11315,12 @@ }, "node_modules/fsevents/node_modules/chownr": { "version": "1.1.1", - "dev": true, "inBundle": true, "license": "ISC", "optional": true }, "node_modules/fsevents/node_modules/code-point-at": { "version": "1.1.0", - "dev": true, "inBundle": true, "license": "MIT", "optional": true, @@ -11338,28 +11330,24 @@ }, "node_modules/fsevents/node_modules/concat-map": { "version": "0.0.1", - "dev": true, "inBundle": true, "license": "MIT", "optional": true }, "node_modules/fsevents/node_modules/console-control-strings": { "version": "1.1.0", - "dev": true, "inBundle": true, "license": "ISC", "optional": true }, "node_modules/fsevents/node_modules/core-util-is": { "version": "1.0.2", - "dev": true, "inBundle": true, "license": "MIT", "optional": true }, "node_modules/fsevents/node_modules/debug": { "version": "4.1.1", - "dev": true, "inBundle": true, "license": "MIT", "optional": true, @@ -11369,7 +11357,6 @@ }, "node_modules/fsevents/node_modules/deep-extend": { "version": "0.6.0", - "dev": true, "inBundle": true, "license": "MIT", "optional": true, @@ -11379,14 +11366,12 @@ }, "node_modules/fsevents/node_modules/delegates": { "version": "1.0.0", - "dev": true, "inBundle": true, "license": "MIT", "optional": true }, "node_modules/fsevents/node_modules/detect-libc": { "version": "1.0.3", - "dev": true, "inBundle": true, "license": "Apache-2.0", "optional": true, @@ -11399,7 +11384,6 @@ }, "node_modules/fsevents/node_modules/fs-minipass": { "version": "1.2.5", - "dev": true, "inBundle": true, "license": "ISC", "optional": true, @@ -11409,14 +11393,12 @@ }, "node_modules/fsevents/node_modules/fs.realpath": { "version": "1.0.0", - "dev": true, "inBundle": true, "license": "ISC", "optional": true }, "node_modules/fsevents/node_modules/gauge": { "version": "2.7.4", - "dev": true, "inBundle": true, "license": "ISC", "optional": true, @@ -11433,7 +11415,6 @@ }, "node_modules/fsevents/node_modules/glob": { "version": "7.1.3", - "dev": true, "inBundle": true, "license": "ISC", "optional": true, @@ -11451,14 +11432,12 @@ }, "node_modules/fsevents/node_modules/has-unicode": { "version": "2.0.1", - "dev": true, "inBundle": true, "license": "ISC", "optional": true }, "node_modules/fsevents/node_modules/iconv-lite": { "version": "0.4.24", - "dev": true, "inBundle": true, "license": "MIT", "optional": true, @@ -11471,7 +11450,6 @@ }, "node_modules/fsevents/node_modules/ignore-walk": { "version": "3.0.1", - "dev": true, "inBundle": true, "license": "ISC", "optional": true, @@ -11481,7 +11459,6 @@ }, "node_modules/fsevents/node_modules/inflight": { "version": "1.0.6", - "dev": true, "inBundle": true, "license": "ISC", "optional": true, @@ -11492,14 +11469,12 @@ }, "node_modules/fsevents/node_modules/inherits": { "version": "2.0.3", - "dev": true, "inBundle": true, "license": "ISC", "optional": true }, "node_modules/fsevents/node_modules/ini": { "version": "1.3.5", - "dev": true, "inBundle": true, "license": "ISC", "optional": true, @@ -11509,7 +11484,6 @@ }, "node_modules/fsevents/node_modules/is-fullwidth-code-point": { "version": "1.0.0", - "dev": true, "inBundle": true, "license": "MIT", "optional": true, @@ -11522,14 +11496,12 @@ }, "node_modules/fsevents/node_modules/isarray": { "version": "1.0.0", - "dev": true, "inBundle": true, "license": "MIT", "optional": true }, "node_modules/fsevents/node_modules/minimatch": { "version": "3.0.4", - "dev": true, "inBundle": true, "license": "ISC", "optional": true, @@ -11542,14 +11514,12 @@ }, "node_modules/fsevents/node_modules/minimist": { "version": "0.0.8", - "dev": true, "inBundle": true, "license": "MIT", "optional": true }, "node_modules/fsevents/node_modules/minipass": { "version": "2.3.5", - "dev": true, "inBundle": true, "license": "ISC", "optional": true, @@ -11560,7 +11530,6 @@ }, "node_modules/fsevents/node_modules/minizlib": { "version": "1.2.1", - "dev": true, "inBundle": true, "license": "MIT", "optional": true, @@ -11570,7 +11539,6 @@ }, "node_modules/fsevents/node_modules/mkdirp": { "version": "0.5.1", - "dev": true, "inBundle": true, "license": "MIT", "optional": true, @@ -11583,14 +11551,12 @@ }, "node_modules/fsevents/node_modules/ms": { "version": "2.1.1", - "dev": true, "inBundle": true, "license": "MIT", "optional": true }, "node_modules/fsevents/node_modules/needle": { "version": "2.3.0", - "dev": true, "inBundle": true, "license": "MIT", "optional": true, @@ -11608,7 +11574,6 @@ }, "node_modules/fsevents/node_modules/node-pre-gyp": { "version": "0.12.0", - "dev": true, "inBundle": true, "license": "BSD-3-Clause", "optional": true, @@ -11630,7 +11595,6 @@ }, "node_modules/fsevents/node_modules/nopt": { "version": "4.0.1", - "dev": true, "inBundle": true, "license": "ISC", "optional": true, @@ -11644,14 +11608,12 @@ }, "node_modules/fsevents/node_modules/npm-bundled": { "version": "1.0.6", - "dev": true, "inBundle": true, "license": "ISC", "optional": true }, "node_modules/fsevents/node_modules/npm-packlist": { "version": "1.4.1", - "dev": true, "inBundle": true, "license": "ISC", "optional": true, @@ -11662,7 +11624,6 @@ }, "node_modules/fsevents/node_modules/npmlog": { "version": "4.1.2", - "dev": true, "inBundle": true, "license": "ISC", "optional": true, @@ -11675,7 +11636,6 @@ }, "node_modules/fsevents/node_modules/number-is-nan": { "version": "1.0.1", - "dev": true, "inBundle": true, "license": "MIT", "optional": true, @@ -11685,7 +11645,6 @@ }, "node_modules/fsevents/node_modules/object-assign": { "version": "4.1.1", - "dev": true, "inBundle": true, "license": "MIT", "optional": true, @@ -11695,7 +11654,6 @@ }, "node_modules/fsevents/node_modules/once": { "version": "1.4.0", - "dev": true, "inBundle": true, "license": "ISC", "optional": true, @@ -11705,7 +11663,6 @@ }, "node_modules/fsevents/node_modules/os-homedir": { "version": "1.0.2", - "dev": true, "inBundle": true, "license": "MIT", "optional": true, @@ -11715,7 +11672,6 @@ }, "node_modules/fsevents/node_modules/os-tmpdir": { "version": "1.0.2", - "dev": true, "inBundle": true, "license": "MIT", "optional": true, @@ -11725,7 +11681,6 @@ }, "node_modules/fsevents/node_modules/osenv": { "version": "0.1.5", - "dev": true, "inBundle": true, "license": "ISC", "optional": true, @@ -11736,7 +11691,6 @@ }, "node_modules/fsevents/node_modules/path-is-absolute": { "version": "1.0.1", - "dev": true, "inBundle": true, "license": "MIT", "optional": true, @@ -11746,14 +11700,12 @@ }, "node_modules/fsevents/node_modules/process-nextick-args": { "version": "2.0.0", - "dev": true, "inBundle": true, "license": "MIT", "optional": true }, "node_modules/fsevents/node_modules/rc": { "version": "1.2.8", - "dev": true, "inBundle": true, "license": "(BSD-2-Clause OR MIT OR Apache-2.0)", "optional": true, @@ -11769,14 +11721,12 @@ }, "node_modules/fsevents/node_modules/rc/node_modules/minimist": { "version": "1.2.0", - "dev": true, "inBundle": true, "license": "MIT", "optional": true }, "node_modules/fsevents/node_modules/readable-stream": { "version": "2.3.6", - "dev": true, "inBundle": true, "license": "MIT", "optional": true, @@ -11792,7 +11742,6 @@ }, "node_modules/fsevents/node_modules/rimraf": { "version": "2.6.3", - "dev": true, "inBundle": true, "license": "ISC", "optional": true, @@ -11805,28 +11754,24 @@ }, "node_modules/fsevents/node_modules/safe-buffer": { "version": "5.1.2", - "dev": true, "inBundle": true, "license": "MIT", "optional": true }, "node_modules/fsevents/node_modules/safer-buffer": { "version": "2.1.2", - "dev": true, "inBundle": true, "license": "MIT", "optional": true }, "node_modules/fsevents/node_modules/sax": { "version": "1.2.4", - "dev": true, "inBundle": true, "license": "ISC", "optional": true }, "node_modules/fsevents/node_modules/semver": { "version": "5.7.0", - "dev": true, "inBundle": true, "license": "ISC", "optional": true, @@ -11836,21 +11781,18 @@ }, "node_modules/fsevents/node_modules/set-blocking": { "version": "2.0.0", - "dev": true, "inBundle": true, "license": "ISC", "optional": true }, "node_modules/fsevents/node_modules/signal-exit": { "version": "3.0.2", - "dev": true, "inBundle": true, "license": "ISC", "optional": true }, "node_modules/fsevents/node_modules/string_decoder": { "version": "1.1.1", - "dev": true, "inBundle": true, "license": "MIT", "optional": true, @@ -11860,7 +11802,6 @@ }, "node_modules/fsevents/node_modules/string-width": { "version": "1.0.2", - "dev": true, "inBundle": true, "license": "MIT", "optional": true, @@ -11875,7 +11816,6 @@ }, "node_modules/fsevents/node_modules/strip-ansi": { "version": "3.0.1", - "dev": true, "inBundle": true, "license": "MIT", "optional": true, @@ -11888,7 +11828,6 @@ }, "node_modules/fsevents/node_modules/strip-json-comments": { "version": "2.0.1", - "dev": true, "inBundle": true, "license": "MIT", "optional": true, @@ -11898,7 +11837,6 @@ }, "node_modules/fsevents/node_modules/tar": { "version": "4.4.8", - "dev": true, "inBundle": true, "license": "ISC", "optional": true, @@ -11917,14 +11855,12 @@ }, "node_modules/fsevents/node_modules/util-deprecate": { "version": "1.0.2", - "dev": true, "inBundle": true, "license": "MIT", "optional": true }, "node_modules/fsevents/node_modules/wide-align": { "version": "1.1.3", - "dev": true, "inBundle": true, "license": "ISC", "optional": true, @@ -11934,14 +11870,12 @@ }, "node_modules/fsevents/node_modules/wrappy": { "version": "1.0.2", - "dev": true, "inBundle": true, "license": "ISC", "optional": true }, "node_modules/fsevents/node_modules/yallist": { "version": "3.0.3", - "dev": true, "inBundle": true, "license": "ISC", "optional": true @@ -33218,25 +33152,21 @@ "abbrev": { "version": "1.1.1", "bundled": true, - "dev": true, "optional": true }, "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true, "optional": true }, "aproba": { "version": "1.2.0", "bundled": true, - "dev": true, "optional": true }, "are-we-there-yet": { "version": "1.1.5", "bundled": true, - "dev": true, "optional": true, "requires": { "delegates": "^1.0.0", @@ -33246,13 +33176,11 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true, "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, - "dev": true, "optional": true, "requires": { "balanced-match": "^1.0.0", @@ -33262,37 +33190,31 @@ "chownr": { "version": "1.1.1", "bundled": true, - "dev": true, "optional": true }, "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true, "optional": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true, "optional": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true, "optional": true }, "core-util-is": { "version": "1.0.2", "bundled": true, - "dev": true, "optional": true }, "debug": { "version": "4.1.1", "bundled": true, - "dev": true, "optional": true, "requires": { "ms": "^2.1.1" @@ -33301,25 +33223,21 @@ "deep-extend": { "version": "0.6.0", "bundled": true, - "dev": true, "optional": true }, "delegates": { "version": "1.0.0", "bundled": true, - "dev": true, "optional": true }, "detect-libc": { "version": "1.0.3", "bundled": true, - "dev": true, "optional": true }, "fs-minipass": { "version": "1.2.5", "bundled": true, - "dev": true, "optional": true, "requires": { "minipass": "^2.2.1" @@ -33328,13 +33246,11 @@ "fs.realpath": { "version": "1.0.0", "bundled": true, - "dev": true, "optional": true }, "gauge": { "version": "2.7.4", "bundled": true, - "dev": true, "optional": true, "requires": { "aproba": "^1.0.3", @@ -33350,7 +33266,6 @@ "glob": { "version": "7.1.3", "bundled": true, - "dev": true, "optional": true, "requires": { "fs.realpath": "^1.0.0", @@ -33364,13 +33279,11 @@ "has-unicode": { "version": "2.0.1", "bundled": true, - "dev": true, "optional": true }, "iconv-lite": { "version": "0.4.24", "bundled": true, - "dev": true, "optional": true, "requires": { "safer-buffer": ">= 2.1.2 < 3" @@ -33379,7 +33292,6 @@ "ignore-walk": { "version": "3.0.1", "bundled": true, - "dev": true, "optional": true, "requires": { "minimatch": "^3.0.4" @@ -33388,7 +33300,6 @@ "inflight": { "version": "1.0.6", "bundled": true, - "dev": true, "optional": true, "requires": { "once": "^1.3.0", @@ -33398,19 +33309,16 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true, "optional": true }, "ini": { "version": "1.3.5", "bundled": true, - "dev": true, "optional": true }, "is-fullwidth-code-point": { "version": "1.0.0", "bundled": true, - "dev": true, "optional": true, "requires": { "number-is-nan": "^1.0.0" @@ -33419,13 +33327,11 @@ "isarray": { "version": "1.0.0", "bundled": true, - "dev": true, "optional": true }, "minimatch": { "version": "3.0.4", "bundled": true, - "dev": true, "optional": true, "requires": { "brace-expansion": "^1.1.7" @@ -33434,13 +33340,11 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true, "optional": true }, "minipass": { "version": "2.3.5", "bundled": true, - "dev": true, "optional": true, "requires": { "safe-buffer": "^5.1.2", @@ -33450,7 +33354,6 @@ "minizlib": { "version": "1.2.1", "bundled": true, - "dev": true, "optional": true, "requires": { "minipass": "^2.2.1" @@ -33459,7 +33362,6 @@ "mkdirp": { "version": "0.5.1", "bundled": true, - "dev": true, "optional": true, "requires": { "minimist": "0.0.8" @@ -33468,13 +33370,11 @@ "ms": { "version": "2.1.1", "bundled": true, - "dev": true, "optional": true }, "needle": { "version": "2.3.0", "bundled": true, - "dev": true, "optional": true, "requires": { "debug": "^4.1.0", @@ -33485,7 +33385,6 @@ "node-pre-gyp": { "version": "0.12.0", "bundled": true, - "dev": true, "optional": true, "requires": { "detect-libc": "^1.0.2", @@ -33503,7 +33402,6 @@ "nopt": { "version": "4.0.1", "bundled": true, - "dev": true, "optional": true, "requires": { "abbrev": "1", @@ -33513,13 +33411,11 @@ "npm-bundled": { "version": "1.0.6", "bundled": true, - "dev": true, "optional": true }, "npm-packlist": { "version": "1.4.1", "bundled": true, - "dev": true, "optional": true, "requires": { "ignore-walk": "^3.0.1", @@ -33529,7 +33425,6 @@ "npmlog": { "version": "4.1.2", "bundled": true, - "dev": true, "optional": true, "requires": { "are-we-there-yet": "~1.1.2", @@ -33541,19 +33436,16 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true, "optional": true }, "object-assign": { "version": "4.1.1", "bundled": true, - "dev": true, "optional": true }, "once": { "version": "1.4.0", "bundled": true, - "dev": true, "optional": true, "requires": { "wrappy": "1" @@ -33562,19 +33454,16 @@ "os-homedir": { "version": "1.0.2", "bundled": true, - "dev": true, "optional": true }, "os-tmpdir": { "version": "1.0.2", "bundled": true, - "dev": true, "optional": true }, "osenv": { "version": "0.1.5", "bundled": true, - "dev": true, "optional": true, "requires": { "os-homedir": "^1.0.0", @@ -33584,19 +33473,16 @@ "path-is-absolute": { "version": "1.0.1", "bundled": true, - "dev": true, "optional": true }, "process-nextick-args": { "version": "2.0.0", "bundled": true, - "dev": true, "optional": true }, "rc": { "version": "1.2.8", "bundled": true, - "dev": true, "optional": true, "requires": { "deep-extend": "^0.6.0", @@ -33608,7 +33494,6 @@ "minimist": { "version": "1.2.0", "bundled": true, - "dev": true, "optional": true } } @@ -33616,7 +33501,6 @@ "readable-stream": { "version": "2.3.6", "bundled": true, - "dev": true, "optional": true, "requires": { "core-util-is": "~1.0.0", @@ -33631,7 +33515,6 @@ "rimraf": { "version": "2.6.3", "bundled": true, - "dev": true, "optional": true, "requires": { "glob": "^7.1.3" @@ -33640,43 +33523,36 @@ "safe-buffer": { "version": "5.1.2", "bundled": true, - "dev": true, "optional": true }, "safer-buffer": { "version": "2.1.2", "bundled": true, - "dev": true, "optional": true }, "sax": { "version": "1.2.4", "bundled": true, - "dev": true, "optional": true }, "semver": { "version": "5.7.0", "bundled": true, - "dev": true, "optional": true }, "set-blocking": { "version": "2.0.0", "bundled": true, - "dev": true, "optional": true }, "signal-exit": { "version": "3.0.2", "bundled": true, - "dev": true, "optional": true }, "string_decoder": { "version": "1.1.1", "bundled": true, - "dev": true, "optional": true, "requires": { "safe-buffer": "~5.1.0" @@ -33685,7 +33561,6 @@ "string-width": { "version": "1.0.2", "bundled": true, - "dev": true, "optional": true, "requires": { "code-point-at": "^1.0.0", @@ -33696,7 +33571,6 @@ "strip-ansi": { "version": "3.0.1", "bundled": true, - "dev": true, "optional": true, "requires": { "ansi-regex": "^2.0.0" @@ -33705,13 +33579,11 @@ "strip-json-comments": { "version": "2.0.1", "bundled": true, - "dev": true, "optional": true }, "tar": { "version": "4.4.8", "bundled": true, - "dev": true, "optional": true, "requires": { "chownr": "^1.1.1", @@ -33726,13 +33598,11 @@ "util-deprecate": { "version": "1.0.2", "bundled": true, - "dev": true, "optional": true }, "wide-align": { "version": "1.1.3", "bundled": true, - "dev": true, "optional": true, "requires": { "string-width": "^1.0.2 || 2" @@ -33741,13 +33611,11 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true, "optional": true }, "yallist": { "version": "3.0.3", "bundled": true, - "dev": true, "optional": true } } diff --git a/package.json b/package.json index 01c80096..254a0b5b 100755 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "fhir-react", - "version": "0.3.6", + "version": "0.3.7", "description": "React component library for displaying FHIR Resources ", "main": "build/index.js", "peerDependencies": { diff --git a/src/assets/containers/Coverage/coverage.svg b/src/assets/containers/Coverage/coverage.svg new file mode 100644 index 00000000..d53477a1 --- /dev/null +++ b/src/assets/containers/Coverage/coverage.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/containers/Medication/medication.svg b/src/assets/containers/Medication/medication.svg new file mode 100644 index 00000000..9e4d091a --- /dev/null +++ b/src/assets/containers/Medication/medication.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/containers/Organization/organization.svg b/src/assets/containers/Organization/organization.svg new file mode 100644 index 00000000..7b055aab --- /dev/null +++ b/src/assets/containers/Organization/organization.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/components/datatypes/Attachment/Attachment.css b/src/components/datatypes/Attachment/Attachment.css new file mode 100644 index 00000000..bb4d3876 --- /dev/null +++ b/src/components/datatypes/Attachment/Attachment.css @@ -0,0 +1,5 @@ +/* Attachment */ +.fhir-datatype__Attachment__img { + border-radius: 8px; + height: 80px; +} diff --git a/src/components/datatypes/Attachment/Attachment.js b/src/components/datatypes/Attachment/Attachment.js index b361f83e..125b752f 100644 --- a/src/components/datatypes/Attachment/Attachment.js +++ b/src/components/datatypes/Attachment/Attachment.js @@ -1,14 +1,19 @@ import React from 'react'; import PropTypes from 'prop-types'; import _get from 'lodash/get'; +import './Attachment.css'; const Attachment = props => { - const { fhirData } = props; + const { fhirData, isImage = false } = props; const title = _get(fhirData, 'title', 'Link'); const URL = _get(fhirData, 'url'); return ( - {title} + {isImage ? ( + {title} + ) : ( + title + )} ); }; diff --git a/src/components/datatypes/Identifier/Identifier.js b/src/components/datatypes/Identifier/Identifier.js index 94b40b20..b73090bb 100644 --- a/src/components/datatypes/Identifier/Identifier.js +++ b/src/components/datatypes/Identifier/Identifier.js @@ -6,7 +6,7 @@ import './Identifier.css'; import CodeableConcept from '../CodeableConcept'; const Identifier = props => { - const { fhirData } = props; + const { fhirData, valueOnly = false, noCursive = false } = props; const identifierArray = Array.isArray(fhirData) ? fhirData : [fhirData]; return identifierArray.map(identifier => { @@ -24,9 +24,13 @@ const Identifier = props => { ); return value ? ( -
+
- {displayIdentifierName} + {!valueOnly && displayIdentifierName} {value}
diff --git a/src/components/datatypes/Reference/Reference.js b/src/components/datatypes/Reference/Reference.js index 6e2a45b3..86349dca 100644 --- a/src/components/datatypes/Reference/Reference.js +++ b/src/components/datatypes/Reference/Reference.js @@ -13,7 +13,11 @@ const Reference = props => { data-testid={props['data-testid']} > {display && {display}} - {reference} + {reference.startsWith('http://') || reference.startsWith('https://') ? ( + {reference} + ) : ( + {reference} + )}
); }; diff --git a/src/components/resources/Claim/CareTeam.js b/src/components/resources/Claim/CareTeam.js new file mode 100644 index 00000000..6db9abf9 --- /dev/null +++ b/src/components/resources/Claim/CareTeam.js @@ -0,0 +1,55 @@ +import { + MissingValue, + Table, + TableCell, + TableHeader, + TableRow, + ValueSection, +} from '../../ui'; +import Reference from '../../datatypes/Reference'; +import Coding from '../../datatypes/Coding'; +import React from 'react'; + +const CareTeam = ({ careTeam }) => { + return ( + + + + + Provider + Role + Qualification + + + + {careTeam.map((member, idx) => ( + + + + + + {member.role ? ( + + ) : ( + + )} + + + {careTeam.qualification ? ( + + ) : ( + + )} + + + ))} + +
+ + ); +}; + +export default CareTeam; diff --git a/src/components/resources/Claim/Claim.css b/src/components/resources/Claim/Claim.css index bca7e827..d65efa7d 100644 --- a/src/components/resources/Claim/Claim.css +++ b/src/components/resources/Claim/Claim.css @@ -1,12 +1,3 @@ -.fhir-resource__Claim__item-level { - height: 100%; - height: 50px; - margin: -12px; - display: flex; -} - -.fhir-resource__Claim__item-level-fill { - width: 10px; - height: 100%; - background: #dee2e6; +.table-expandable-row { + --bs-table-striped-bg: #eef1f3; } diff --git a/src/components/resources/Claim/Claim.js b/src/components/resources/Claim/Claim.js index 142839c9..c2cbee80 100644 --- a/src/components/resources/Claim/Claim.js +++ b/src/components/resources/Claim/Claim.js @@ -14,18 +14,18 @@ import './Claim.css'; import { Root, Header, - Title, Badge, - BadgeSecondary, Body, MissingValue, Value, ValueSection, - Table, - TableCell, - TableHeader, - TableRow, + ValueSectionItem, } from '../../ui'; +import Accordion from '../../containers/Accordion'; +import CareTeam from './CareTeam'; +import Diagnosis from './Diagnosis'; +import Insurance from './Insurance'; +import Items from './Items'; const commonDTO = fhirResource => { const id = _get(fhirResource, 'id'); @@ -298,215 +298,7 @@ const resourceDTO = (fhirVersion, fhirResource) => { } }; -const CareTeam = props => { - const { careTeam } = props; - - return ( - - - - - Provider - Role - Qualification - - - - {careTeam.map((member, idx) => ( - - - - - - {member.role ? ( - - ) : ( - - )} - - - {careTeam.qualification ? ( - - ) : ( - - )} - - - ))} - -
- - ); -}; - -const Diagnosis = props => { - const { diagnosis } = props; - - return ( - - - - - Diagnosis - Type - Package code - - - - {diagnosis.map((diagnosis, idx) => ( - - - {diagnosis.coding ? ( - - ) : diagnosis.refrence ? ( - - ) : ( - - )} - - - {diagnosis.typeCoding ? ( - - ) : ( - - )} - - - {diagnosis.packageCodeCoding ? ( - - ) : ( - - )} - - - ))} - -
- - ); -}; - -const Insurance = props => { - const { insurance } = props; - - return ( - - - - - Coverage - Business Arrangement - Claim Response - - - - {insurance.map((insurance, idx) => ( - - - - {insurance.focal && ' (focal)'} - - - {insurance.businessArrangement ? ( - insurance.businessArrangement - ) : ( - - )} - - - {insurance.claimResponse ? ( - - ) : ( - - )} - - - ))} - -
- - ); -}; - -const Item = props => { - const { item, parentSequences, level } = props; - - const fill = Array(level) - .fill(null) - .map((_, idx) => ( -
- )); - - const itemSequences = [...parentSequences, item.sequence]; - const id = itemSequences.join('.'); - - return ( - <> - - -
{fill}
- - {id} - - - - - {item.unitPrice ? ( - - ) : ( - - )} - {item.factor != null ? ( -  × {item.factor} - ) : null} - - - {item.quantity != null ? item.quantity : } - - - {item.net ? : } - - - {item.subItems.map((subItem, idx) => ( - - ))} - - ); -}; - -const Items = props => { - const { items } = props; - - return ( - - - - - - ID - Service - Unit price - Quantity - Total - - - - {items.map((item, idx) => ( - - ))} - -
- - ); -}; - -const Claim = props => { - const { fhirResource, fhirVersion } = props; +const Claim = ({ fhirResource, fhirVersion, fhirIcons }) => { let fhirResourceData = {}; try { fhirResourceData = resourceDTO(fhirVersion, fhirResource); @@ -537,103 +329,159 @@ const Claim = props => { const hasDiagnosis = diagnosis.length > 0; const hasInsurance = insurance.length > 0; + const tableData1 = [ + { + label: 'Type', + testId: 'type', + data: , + status: true, + }, + { + label: 'Created at', + testId: 'created', + data: created && , + status: created, + }, + { + label: 'Accident', + testId: 'accident', + data: accident && ( + <> + {accident.date && ( + + + + )} + {accident.coding && ( + + + + )} + + ), + status: accident, + }, + { + label: 'Employment impacted', + testId: 'employmentImpacted', + data: employmentImpacted && ( + <> + {employmentImpacted.start ? ( + + ) : ( + + )} + {' - '} + {employmentImpacted.end ? ( + + ) : ( + + )} + + ), + status: employmentImpacted, + }, + { + label: 'Hospitalization', + testId: 'hospitalization', + data: hospitalization && ( + <> + {hospitalization.start ? ( + + ) : ( + + )} + {' - '} + {hospitalization.end ? ( + + ) : ( + + )} + + ), + status: hospitalization, + }, + ]; + + const tableData2 = [ + { + label: 'Insurer', + testId: 'insurer', + data: insurer && , + status: insurer, + }, + { + label: 'Organization', + testId: 'organization', + data: organization && , + status: organization, + }, + { + label: 'Payee', + testId: 'payee.type', + data: payee.coding && , + status: payee.coding, + }, + { + label: 'Payee party', + testId: 'payee.party', + data: payee.party && , + status: payee.party, + }, + { + label: 'Priority', + testId: 'priority', + data: priorityCoding && , + status: priorityCoding, + }, + ]; + return ( -
- Claim #{id} - {use && {use}} - {status && ( - {status} - )} -
- - - - - {created && ( - - - - )} - {accident && ( - - {accident.date && ( - - - - )} - {accident.coding && ( - - - - )} - - )} - {employmentImpacted && ( - - {employmentImpacted.start ? ( - - ) : ( - - )} - {' - '} - {employmentImpacted.end ? ( - - ) : ( - - )} - - )} - {hospitalization && ( - - {hospitalization.start ? ( - - ) : ( - - )} - {' - '} - {hospitalization.end ? ( - - ) : ( - + + {use && {use}} + {status && {status}} + + } + icon={fhirIcons} + /> + } + bodyContent={ + + {hasCareTeam && } + {hasDiagnosis && } + + {tableData2.map( + (item, index) => + item.status && ( + + {item.data} + + ), + )} + + {hasInsurance && } + {total && ( + + + + + )} - - )} - {hasCareTeam && } - {hasDiagnosis && } - {insurer && ( - - - - )} - {organization && ( - - - - )} - {payee.coding && ( - - - - )} - {payee.party && ( - - - - )} - {priorityCoding && ( - - - - )} - {hasInsurance && } - {total && ( - - - - )} - {items && } - + {items && } + + } + /> ); }; diff --git a/src/components/resources/Claim/Claim.stories.js b/src/components/resources/Claim/Claim.stories.js index 3e348ffb..2938e54a 100644 --- a/src/components/resources/Claim/Claim.stories.js +++ b/src/components/resources/Claim/Claim.stories.js @@ -11,6 +11,8 @@ import stu3Example3 from '../../../fixtures/stu3/resources/claim/example-3.json' import r4Example1 from '../../../fixtures/r4/resources/claim/example1.json'; import r4Example2 from '../../../fixtures/r4/resources/claim/example2.json'; +import ClaimIcon from '../../../assets/containers/Claim/claim.svg'; +import fhirIcons from '../../../fixtures/example-icons'; export default { title: 'Claim', @@ -18,27 +20,57 @@ export default { export const ExampleOfDSTU2 = () => { const fhirResource = object('Resource', dstu2Example1); - return ; + return ( + + ); }; export const ExampleOfSTU3 = () => { const fhirResource = object('Resource', stu3Example1); - return ; + return ( + + ); }; export const Example2OfSTU3 = () => { const fhirResource = object('Resource', stu3Example2); - return ; + return ( + + ); }; export const Example3OfSTU3 = () => { const fhirResource = object('Resource', stu3Example3); - return ; + return ( + + ); }; export const Example1OfR4 = () => { const fhirResource = object('Resource', r4Example1); - return ; + return ( + + ); }; export const Example2OfR4 = () => { diff --git a/src/components/resources/Claim/Claim.test.js b/src/components/resources/Claim/Claim.test.js index d7069669..8763a0b2 100644 --- a/src/components/resources/Claim/Claim.test.js +++ b/src/components/resources/Claim/Claim.test.js @@ -9,8 +9,80 @@ import stu3Example1 from '../../../fixtures/stu3/resources/claim/example-1.json' import stu3Example2 from '../../../fixtures/stu3/resources/claim/example-2.json'; import stu3Example3 from '../../../fixtures/stu3/resources/claim/example-3.json'; import r4Example1 from '../../../fixtures/r4/resources/claim/example1.json'; +import fhirIcons from '../../../fixtures/example-icons'; describe('should render the Claim component properly', () => { + it('component without a fhirIcons props should render a default icon', () => { + const defaultProps = { + fhirVersion: fhirVersions.DSTU2, + fhirResource: dstu2Example1, + }; + + const { getByAltText } = render(); + const headerIcon = getByAltText('claim'); + + expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK'); + }); + + it('component with a false as a fhirIcons props should render a placeholder', () => { + const defaultProps = { + fhirVersion: fhirVersions.DSTU2, + fhirResource: dstu2Example1, + fhirIcons: false, + }; + + const { getByTestId } = render(); + const headerIcon = getByTestId('placeholder'); + + expect(headerIcon).toBeTruthy(); + }); + + it('component with the img as a fhirIcons props should render an img', () => { + const defaultProps = { + fhirVersion: fhirVersions.DSTU2, + fhirResource: dstu2Example1, + fhirIcons: ( + claim + ), + }; + + const { getByAltText } = render(); + const headerIcon = getByAltText('claim'); + + expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK'); + }); + + it('component with the resources object as a fhirIcons props should render an img', () => { + const defaultProps = { + fhirVersion: fhirVersions.DSTU2, + fhirResource: dstu2Example1, + fhirIcons: fhirIcons, + }; + + const { getByAltText } = render(); + const headerIcon = getByAltText('clipboard with a symmetrical cross'); + + expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK'); + }); + + it('component with the url as a fhirIcons props should render an img', () => { + const avatarSrc = + 'https://www.gravatar.com/avatar/?s=50&r=any&default=identicon&forcedefault=1'; + const defaultProps = { + fhirVersion: fhirVersions.DSTU2, + fhirResource: dstu2Example1, + fhirIcons: avatarSrc, + }; + + const { getByAltText } = render(); + const headerIcon = getByAltText('header icon'); + + expect(headerIcon.getAttribute('src')).toContain(avatarSrc); + }); + it('with DSTU2 source data', () => { const defaultProps = { fhirResource: dstu2Example1, diff --git a/src/components/resources/Claim/Diagnosis.js b/src/components/resources/Claim/Diagnosis.js new file mode 100644 index 00000000..eee697a6 --- /dev/null +++ b/src/components/resources/Claim/Diagnosis.js @@ -0,0 +1,61 @@ +import { + MissingValue, + Table, + TableCell, + TableHeader, + TableRow, + ValueSection, +} from '../../ui'; +import Coding from '../../datatypes/Coding'; +import Reference from '../../datatypes/Reference'; +import React from 'react'; + +const Diagnosis = ({ diagnosis }) => { + return ( + + + + + Diagnosis + Type + Package code + + + + {diagnosis.map((diagnosis, idx) => ( + + + {diagnosis.coding ? ( + + ) : diagnosis.refrence ? ( + + ) : ( + + )} + + + {diagnosis.typeCoding ? ( + + ) : ( + + )} + + + {diagnosis.packageCodeCoding ? ( + + ) : ( + + )} + + + ))} + +
+ + ); +}; + +export default Diagnosis; diff --git a/src/components/resources/Claim/Insurance.js b/src/components/resources/Claim/Insurance.js new file mode 100644 index 00000000..f008946e --- /dev/null +++ b/src/components/resources/Claim/Insurance.js @@ -0,0 +1,58 @@ +import { + MissingValue, + Table, + TableCell, + TableHeader, + TableRow, + ValueSection, +} from '../../ui'; +import Reference from '../../datatypes/Reference'; +import React from 'react'; + +const Insurance = ({ insurance }) => { + return ( + + + + + Coverage + Business Arrangement + Claim Response + + + + {insurance.map((insurance, idx) => ( + + + + {insurance.focal && ' (focal)'} + + + {insurance.businessArrangement ? ( + insurance.businessArrangement + ) : ( + + )} + + + {insurance.claimResponse ? ( + + ) : ( + + )} + + + ))} + +
+ + ); +}; + +export default Insurance; diff --git a/src/components/resources/Claim/Item.js b/src/components/resources/Claim/Item.js new file mode 100644 index 00000000..659a29fa --- /dev/null +++ b/src/components/resources/Claim/Item.js @@ -0,0 +1,79 @@ +import React, { useState } from 'react'; +import { Chevron, MissingValue, TableCell, TableRow } from '../../ui'; +import Coding from '../../datatypes/Coding'; +import Money from '../../datatypes/Money'; + +const Item = ({ item, parentSequences, parentId, isCollapse = false }) => { + const itemSequences = [...parentSequences, item.sequence]; + const id = itemSequences.join('.'); + const collapseId = parentSequences.length ? parentId : item.sequence; + + const [rotate, setRotate] = useState(false); + const handleTableExpand = () => setRotate(!rotate); + + const isExpandable = + parentSequences.length === 0 && item.subItems.length !== 0; + + return ( + <> + + {item.subItems.map((subItem, idx) => ( + + ))} + + ); +}; + +export default Item; diff --git a/src/components/resources/Claim/Items.js b/src/components/resources/Claim/Items.js new file mode 100644 index 00000000..2b2dd4e6 --- /dev/null +++ b/src/components/resources/Claim/Items.js @@ -0,0 +1,29 @@ +import { Table, TableHeader, TableRow, ValueSection } from '../../ui'; +import React from 'react'; +import Item from './Item'; + +const Items = ({ items }) => { + return ( + + + + + ID + Service + Unit price + Quantity + Total + + + + + {items.map((item, idx) => ( + + ))} + +
+ + ); +}; + +export default Items; diff --git a/src/components/resources/Coverage/Coverage.js b/src/components/resources/Coverage/Coverage.js index eb47b1dd..09f051d3 100644 --- a/src/components/resources/Coverage/Coverage.js +++ b/src/components/resources/Coverage/Coverage.js @@ -6,8 +6,9 @@ import Reference from '../../datatypes/Reference'; import Coding from '../../datatypes/Coding'; import UnhandledResourceDataStructure from '../UnhandledResourceDataStructure'; import fhirVersions from '../fhirResourceVersions'; -import { Root, Header, Title, Body, Value } from '../../ui'; +import { Root, Header, Body, Value } from '../../ui'; import Identifier from '../../datatypes/Identifier'; +import Accordion from '../../containers/Accordion'; const commonDTO = fhirResource => { const identifier = _get(fhirResource, 'identifier.0'); @@ -113,8 +114,7 @@ const resourceDTO = (fhirVersion, fhirResource) => { } }; -const Coverage = props => { - const { fhirResource, fhirVersion } = props; +const Coverage = ({ fhirResource, fhirVersion, fhirIcons }) => { let fhirResourceData = {}; try { fhirResourceData = resourceDTO(fhirVersion, fhirResource); @@ -138,74 +138,101 @@ const Coverage = props => { } = fhirResourceData; const issuerReferenceType = _get(issuer, 'reference'); const issuerIdentifierType = _get(issuer, 'identifier'); + + const tableData = [ + { + label: 'Issuer', + testId: 'issuer', + data: issuerReferenceType && , + status: issuerReferenceType, + }, + { + label: 'Issuer', + testId: 'issuer', + data: issuerIdentifierType && , + status: issuerIdentifierType, + }, + { + label: 'PlanId', + testId: 'planId', + data: planId, + status: planId, + }, + { + label: 'Coverage', + testId: '', + data: period && ( + <> + {coverageFrom && ( + from: {coverageFrom} + )}{' '} + {coverageTo && to: {coverageTo}} + + ), + status: period, + }, + { + label: 'Type of coverage', + testId: 'type', + data: type && , + status: type, + }, + { + label: 'Details', + testId: 'details', + data: hasDetails && ( + <> + {details.planDescription} + {details.classDescription && ( + <> + {' | '} + {details.classDescription} + + )} + + ), + status: hasDetails, + }, + { + label: 'Extension', + testId: 'extensions', + data: + hasExtension && + extension.map((item, i) => { + const coding = Array.isArray(item.coding) ? item.coding : []; + + return ( + + {item.name && {item.name}} + {coding.map((code, j) => ( + + ))} + + ); + }), + status: hasExtension, + }, + ]; + return ( -
- {identifier && ( - - Coverage <Identifier fhirData={identifier} /> - - )} -
- - {issuerReferenceType && ( - - - - )} - {issuerIdentifierType && ( - - - - )} - {planId && ( - - {planId} - - )} - {period && ( - - {coverageFrom && ( - from: {coverageFrom} - )}{' '} - {coverageTo && ( - to: {coverageTo} - )} - - )} - {type && ( - - - - )} - {hasDetails && ( - - {details.planDescription} - {details.classDescription && ( - <> - {' | '} - {details.classDescription} - - )} - - )} - {hasExtension && ( - - {extension.map((item, i) => { - const coding = Array.isArray(item.coding) ? item.coding : []; - - return ( - - {item.name && {item.name}} - {coding.map((code, j) => ( - - ))} - - ); - })} - - )} - + + + + ) + } + title="Coverage" + icon={fhirIcons} + /> + } + bodyContent={} + /> ); }; diff --git a/src/components/resources/Coverage/Coverage.stories.js b/src/components/resources/Coverage/Coverage.stories.js index 5641b982..afa0a7da 100644 --- a/src/components/resources/Coverage/Coverage.stories.js +++ b/src/components/resources/Coverage/Coverage.stories.js @@ -9,38 +9,64 @@ import exampleCoverageStu3 from '../../../fixtures/stu3/resources/coverage/examp import example2CoverageStu3 from '../../../fixtures/stu3/resources/coverage/example2.json'; import exampleCoverageR4 from '../../../fixtures/r4/resources/coverage/example1.json'; import example2CoverageR4 from '../../../fixtures/r4/resources/coverage/example2.json'; +import fhirIcons from '../../../fixtures/example-icons'; +import CoverageIcon from '../../../assets/containers/Coverage/coverage.svg'; export default { title: 'Coverage' }; export const DefaultVisualizationDSTU2 = () => { const fhirResource = object('Resource', exampleCoverageDstu2); return ( - + ); }; export const ExampleOfSTU3 = () => { const fhirResource = object('Resource', exampleCoverageStu3); return ( - + ); }; export const Example2OfSTU3 = () => { const fhirResource = object('Resource', example2CoverageStu3); return ( - + ); }; export const ExampleOfR4 = () => { const fhirResource = object('Resource', exampleCoverageR4); - return ; + return ( + + ); }; export const Example2OfR4 = () => { const fhirResource = object('Resource', example2CoverageR4); - return ; + return ( + + ); }; export const ExampleWithoutFhirVersionProperty = () => { diff --git a/src/components/resources/Coverage/Coverage.test.js b/src/components/resources/Coverage/Coverage.test.js index 9004f9d6..2e53264f 100644 --- a/src/components/resources/Coverage/Coverage.test.js +++ b/src/components/resources/Coverage/Coverage.test.js @@ -8,8 +8,80 @@ import exampleCoverage from '../../../fixtures/dstu2/resources/coverage/example1 import exampleCoverageStu3 from '../../../fixtures/stu3/resources/coverage/example1.json'; import example2CoverageStu3 from '../../../fixtures/stu3/resources/coverage/example2.json'; import exampleCoverageR4 from '../../../fixtures/r4/resources/coverage/example1.json'; +import fhirIcons from '../../../fixtures/example-icons'; describe('should render component correctly', () => { + it('component without a fhirIcons props should render a default icon', () => { + const defaultProps = { + fhirVersion: fhirVersions.DSTU2, + fhirResource: exampleCoverage, + }; + + const { getByAltText } = render(); + const headerIcon = getByAltText('coverage'); + + expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK'); + }); + + it('component with a false as a fhirIcons props should render a placeholder', () => { + const defaultProps = { + fhirVersion: fhirVersions.DSTU2, + fhirResource: exampleCoverage, + fhirIcons: false, + }; + + const { getByTestId } = render(); + const headerIcon = getByTestId('placeholder'); + + expect(headerIcon).toBeTruthy(); + }); + + it('component with the img as a fhirIcons props should render an img', () => { + const defaultProps = { + fhirVersion: fhirVersions.DSTU2, + fhirResource: exampleCoverage, + fhirIcons: ( + coverage + ), + }; + + const { getByAltText } = render(); + const headerIcon = getByAltText('coverage'); + + expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK'); + }); + + it('component with the resources object as a fhirIcons props should render an img', () => { + const defaultProps = { + fhirVersion: fhirVersions.DSTU2, + fhirResource: exampleCoverage, + fhirIcons: fhirIcons, + }; + + const { getByAltText } = render(); + const headerIcon = getByAltText('coverage'); + + expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK'); + }); + + it('component with the url as a fhirIcons props should render an img', () => { + const avatarSrc = + 'https://www.gravatar.com/avatar/?s=50&r=any&default=identicon&forcedefault=1'; + const defaultProps = { + fhirVersion: fhirVersions.DSTU2, + fhirResource: exampleCoverage, + fhirIcons: avatarSrc, + }; + + const { getByAltText } = render(); + const headerIcon = getByAltText('header icon'); + + expect(headerIcon.getAttribute('src')).toContain(avatarSrc); + }); + it('should render with DSTU2 source data', () => { const defaultProps = { fhirResource: exampleCoverage, @@ -18,7 +90,7 @@ describe('should render component correctly', () => { const { getByTestId } = render(); expect(getByTestId('title').textContent.replace(nbspRegex, ' ')).toContain( - 'Coverage Identifier: 12345', + 'Coverage', ); expect(getByTestId('issuer').textContent).toContain('Organization/2'); expect(getByTestId('planId').textContent).toContain('CBI35'); @@ -35,7 +107,7 @@ describe('should render component correctly', () => { const { getByTestId } = render(); expect(getByTestId('title').textContent.replace(nbspRegex, ' ')).toContain( - 'Coverage Identifier: 12345', + 'Coverage', ); expect(getByTestId('issuer').textContent).toContain('Organization/2'); expect(getByTestId('planId').textContent).toContain('B37FC'); @@ -70,7 +142,7 @@ describe('should render component correctly', () => { ); expect(getByTestId('title').textContent.replace(nbspRegex, ' ')).toContain( - 'Coverage Identifier: 12345', + 'Coverage', ); expect(getByTestId('issuer').textContent).toContain('Organization/2'); expect(queryAllByTestId('planId').length).toEqual(0); diff --git a/src/components/resources/Medication/Medication.js b/src/components/resources/Medication/Medication.js index 271928eb..4f0e5827 100644 --- a/src/components/resources/Medication/Medication.js +++ b/src/components/resources/Medication/Medication.js @@ -5,18 +5,17 @@ import _get from 'lodash/get'; import { Root, Header, - Title, Badge, Body, ValueSection, - Value, - BadgeSecondary, + ValueSectionItem, } from '../../ui'; import Coding from '../../datatypes/Coding'; import Reference from '../../datatypes/Reference'; import fhirVersions from '../fhirResourceVersions'; import UnhandledResourceDataStructure from '../UnhandledResourceDataStructure'; import Attachment from '../../datatypes/Attachment'; +import Accordion from '../../containers/Accordion'; const commonDTO = fhirResource => { let title = _get(fhirResource, 'code.coding.0'); @@ -158,13 +157,12 @@ const Ingredient = props => { - {hasAmount && {amount}} + {hasAmount && , {amount}} ); }; -const Medication = props => { - const { fhirResource, fhirVersion } = props; +const Medication = ({ fhirResource, fhirVersion, fhirIcons }) => { let fhirResourceData = {}; try { fhirResourceData = resourceDTO(fhirVersion, fhirResource); @@ -187,54 +185,95 @@ const Medication = props => { status, } = fhirResourceData; + const tableData = [ + { + label: 'Manufacturer', + testId: 'manufacturer', + data: manufacturer && , + status: manufacturer, + }, + ]; + + const productData = [ + { + label: 'Form', + testId: 'product-form', + data: + productForm && + productForm.map((item, i) => ( + + )), + status: productForm, + }, + { + label: 'Ingredient', + testId: 'product-ingredient', + data: + hasProductIngredient && + productIngredient.map((item, i) => ( + + )), + status: hasProductIngredient, + }, + { + label: 'Package container', + testId: 'package-container', + data: + hasPackageCoding && + packageCoding.map((item, i) => ( + + )), + status: hasPackageCoding, + }, + { + label: 'Images', + testId: 'product-images', + data: + hasImages && + images.map((item, i) => ( + + )), + status: hasImages, + }, + ]; + return ( -
- - <Coding fhirData={title} /> - - {isBrand && Brand} - {status && {status}} -
- - {manufacturer && ( - - - - )} - {hasProduct && ( - - {productForm && ( - - {productForm.map((item, i) => ( - - ))} - - )} - {hasProductIngredient && ( - - {productIngredient.map((item, i) => ( - - ))} - - )} - {hasPackageCoding && ( - - {packageCoding.map((item, i) => ( - - ))} - - )} - {hasImages && ( - - {images.map((item, i) => ( - - ))} - + + {isBrand && Brand} + {status && {status}} + + } + title={} + icon={fhirIcons} + /> + } + bodyContent={ + + {hasProduct && ( + + {productData.map( + (item, index) => + item.status && ( + + {item.data} + + ), + )} + )} - - )} - + + } + /> ); }; diff --git a/src/components/resources/Medication/Medication.stories.js b/src/components/resources/Medication/Medication.stories.js index 8dc26fe2..e094138d 100644 --- a/src/components/resources/Medication/Medication.stories.js +++ b/src/components/resources/Medication/Medication.stories.js @@ -11,6 +11,8 @@ import stu3Example2 from '../../../fixtures/stu3/resources/medication/example2.j import r4Example1 from '../../../fixtures/r4/resources/medication/example1.json'; import r4Example2 from '../../../fixtures/r4/resources/medication/example2.json'; import r4Example3 from '../../../fixtures/r4/resources/medication/example3.json'; +import fhirIcons from '../../../fixtures/example-icons'; +import MedicationIcon from '../../../assets/containers/Medication/medication.svg'; export default { title: 'Medication', @@ -19,46 +21,74 @@ export default { export const DefaultVisualizationDSTU2 = () => { const fhirResource = object('Resource', dstu2Example1); return ( - + ); }; export const Example2OfDSTU2 = () => { const fhirResource = object('Resource', dstu2Example2); return ( - + ); }; export const Example1OfSTU3 = () => { const fhirResource = object('Resource', stu3Example1); return ( - + ); }; export const Example2OfSTU3 = () => { const fhirResource = object('Resource', stu3Example2); return ( - + ); }; export const Example1OfR4 = () => { const fhirResource = object('Resource', r4Example1); return ( - + ); }; export const Example2OfR4 = () => { const fhirResource = object('Resource', r4Example2); return ( - + ); }; export const Example3OfR4 = () => { const fhirResource = object('Resource', r4Example3); return ( - + ); }; diff --git a/src/components/resources/Medication/Medication.test.js b/src/components/resources/Medication/Medication.test.js index 41e767aa..5460a848 100644 --- a/src/components/resources/Medication/Medication.test.js +++ b/src/components/resources/Medication/Medication.test.js @@ -9,8 +9,80 @@ import stu3Example1 from '../../../fixtures/stu3/resources/medication/example1.j import stu3Example2 from '../../../fixtures/stu3/resources/medication/example2.json'; import r4Example1 from '../../../fixtures/r4/resources/medication/example1.json'; import r4Example2 from '../../../fixtures/r4/resources/medication/example2.json'; +import fhirIcons from '../../../fixtures/example-icons'; + +describe('should render Medication component properly', () => { + it('component without a fhirIcons props should render a default icon', () => { + const defaultProps = { + fhirVersion: fhirVersions.DSTU2, + fhirResource: dstu2Example1, + }; + + const { getByAltText } = render(); + const headerIcon = getByAltText('medication'); + + expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK'); + }); + + it('component with a false as a fhirIcons props should render a placeholder', () => { + const defaultProps = { + fhirVersion: fhirVersions.DSTU2, + fhirResource: dstu2Example1, + fhirIcons: false, + }; + + const { getByTestId } = render(); + const headerIcon = getByTestId('placeholder'); + + expect(headerIcon).toBeTruthy(); + }); + + it('component with the img as a fhirIcons props should render an img', () => { + const defaultProps = { + fhirVersion: fhirVersions.DSTU2, + fhirResource: dstu2Example1, + fhirIcons: ( + medication + ), + }; + + const { getByAltText } = render(); + const headerIcon = getByAltText('medication'); + + expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK'); + }); + + it('component with the resources object as a fhirIcons props should render an img', () => { + const defaultProps = { + fhirVersion: fhirVersions.DSTU2, + fhirResource: dstu2Example1, + fhirIcons: fhirIcons, + }; + + const { getByAltText } = render(); + const headerIcon = getByAltText('medication'); + + expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK'); + }); + + it('component with the url as a fhirIcons props should render an img', () => { + const avatarSrc = + 'https://www.gravatar.com/avatar/?s=50&r=any&default=identicon&forcedefault=1'; + const defaultProps = { + fhirVersion: fhirVersions.DSTU2, + fhirResource: dstu2Example1, + fhirIcons: avatarSrc, + }; + + const { getByAltText } = render(); + const headerIcon = getByAltText('header icon'); + + expect(headerIcon.getAttribute('src')).toContain(avatarSrc); + }); -describe('should render MedicationOrder component properly', () => { it('should render with DSTU2 source data', () => { const defaultProps = { fhirResource: dstu2Example1, @@ -41,7 +113,9 @@ describe('should render MedicationOrder component properly', () => { fhirVersion: fhirVersions.STU3, }; - const { container, getByTestId } = render(); + const { container, getByTestId, getByAltText } = render( + , + ); expect(container).not.toBeNull(); expect(getByTestId('title').textContent).toContain( @@ -56,8 +130,8 @@ describe('should render MedicationOrder component properly', () => { ); expect(getByTestId('package-container').textContent).toContain('Vial'); - expect(getByTestId('product-images').textContent).toContain( - 'Vancomycin Image', + expect(getByAltText('Vancomycin Image').src).toContain( + 'https://www.drugs.com/images/pills/fio/AKN07410.JPG', ); }); diff --git a/src/components/resources/Organization/Organization.js b/src/components/resources/Organization/Organization.js index c1414b03..7f9f8967 100644 --- a/src/components/resources/Organization/Organization.js +++ b/src/components/resources/Organization/Organization.js @@ -8,7 +8,8 @@ import Telecom from '../../datatypes/Telecom'; import Identifier from '../../datatypes/Identifier'; import UnhandledResourceDataStructure from '../UnhandledResourceDataStructure'; import fhirVersions from '../fhirResourceVersions'; -import { Root, Header, Title, Body, Value, NotEnoughData } from '../../ui'; +import { Root, Header, Body, NotEnoughData } from '../../ui'; +import Accordion from '../../containers/Accordion'; const commonDTO = fhirResource => { const identifier = _get(fhirResource, 'identifier', ''); @@ -54,8 +55,7 @@ const resourceDTO = (fhirVersion, fhirResource) => { } }; -const Organization = props => { - const { fhirResource, fhirVersion } = props; +const Organization = ({ fhirResource, fhirVersion, fhirIcons }) => { let fhirResourceData = {}; try { fhirResourceData = resourceDTO(fhirVersion, fhirResource); @@ -74,42 +74,60 @@ const Organization = props => { const hasTelecom = Array.isArray(telecom) && telecom.length > 0; const hasTypes = Array.isArray(typeCodings) && typeCodings.length > 0; const notEnoughData = !hasAddresses && !hasTelecom && !hasTypes; + + const tableData = [ + { + label: 'Identifiers', + testId: 'identifier', + data: identifier && , + status: identifier, + }, + { + label: 'Addresses', + testId: 'address', + data: + hasAddresses && + addresses.map((item, i) => ( +
+ )), + status: hasAddresses, + }, + { + label: 'Contacts', + testId: 'contact', + data: + hasTelecom && + telecom.map((item, i) => ), + status: hasTelecom, + }, + { + label: 'Type', + testId: 'type', + data: + hasTypes && + typeCodings.map((typeCoding, idx) => ( + + )), + status: hasTypes, + }, + { + label: '', + testId: '', + data: notEnoughData && , + status: notEnoughData, + }, + ]; + return ( - {name && ( -
- {name} -
- )} - - {identifier && ( - - - - )} - {hasAddresses && ( - - {addresses.map((item, i) => ( -
- ))} - - )} - {hasTelecom && ( - - {telecom.map((item, i) => ( - - ))} - - )} - {hasTypes && ( - - {typeCodings.map((typeCoding, idx) => ( - - ))} - - )} - {notEnoughData && } - + + ) + } + bodyContent={} + /> ); }; diff --git a/src/components/resources/Organization/Organization.stories.js b/src/components/resources/Organization/Organization.stories.js index c0600969..a08be42a 100644 --- a/src/components/resources/Organization/Organization.stories.js +++ b/src/components/resources/Organization/Organization.stories.js @@ -14,6 +14,9 @@ import r4Example1 from '../../../fixtures/r4/resources/organization/example1.jso import r4Example2 from '../../../fixtures/r4/resources/organization/example2.json'; import r4Example3 from '../../../fixtures/r4/resources/organization/example3.json'; +import fhirIcons from '../../../fixtures/example-icons'; +import OrganizationIcon from '../../../assets/containers/Organization/organization.svg'; + export default { title: 'Organization', }; @@ -24,6 +27,7 @@ export const DefaultVisualizationDSTU2 = () => { ); }; @@ -34,6 +38,7 @@ export const Example2OfDSTU2 = () => { ); }; @@ -41,14 +46,22 @@ export const Example2OfDSTU2 = () => { export const Example1OfSTU3 = () => { const fhirResource = object('Resource', stu3Example1); return ( - + ); }; export const Example2OfSTU3 = () => { const fhirResource = object('Resource', stu3Example2); return ( - + ); }; diff --git a/src/components/resources/Organization/Organization.test.js b/src/components/resources/Organization/Organization.test.js index 2428b8dd..559b8969 100644 --- a/src/components/resources/Organization/Organization.test.js +++ b/src/components/resources/Organization/Organization.test.js @@ -14,7 +14,80 @@ import r4Example1 from '../../../fixtures/r4/resources/organization/example1.jso import r4Example2 from '../../../fixtures/r4/resources/organization/example2.json'; import r4Example3 from '../../../fixtures/r4/resources/organization/example3.json'; +import fhirIcons from '../../../fixtures/example-icons'; + describe('should render Organization component properly', () => { + it('component without a fhirIcons props should render a default icon', () => { + const defaultProps = { + fhirVersion: fhirVersions.DSTU2, + fhirResource: dstu2Example1, + }; + + const { getByAltText } = render(); + const headerIcon = getByAltText('organization'); + + expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK'); + }); + + it('component with a false as a fhirIcons props should render a placeholder', () => { + const defaultProps = { + fhirVersion: fhirVersions.DSTU2, + fhirResource: dstu2Example1, + fhirIcons: false, + }; + + const { getByTestId } = render(); + const headerIcon = getByTestId('placeholder'); + + expect(headerIcon).toBeTruthy(); + }); + + it('component with the img as a fhirIcons props should render an img', () => { + const defaultProps = { + fhirVersion: fhirVersions.DSTU2, + fhirResource: dstu2Example1, + fhirIcons: ( + organization + ), + }; + + const { getByAltText } = render(); + const headerIcon = getByAltText('organization'); + + expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK'); + }); + + it('component with the resources object as a fhirIcons props should render an img', () => { + const defaultProps = { + fhirVersion: fhirVersions.DSTU2, + fhirResource: dstu2Example1, + fhirIcons: fhirIcons, + }; + + const { getByAltText } = render(); + const headerIcon = getByAltText('organization'); + + expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK'); + }); + + it('component with the url as a fhirIcons props should render an img', () => { + const avatarSrc = + 'https://www.gravatar.com/avatar/?s=50&r=any&default=identicon&forcedefault=1'; + const defaultProps = { + fhirVersion: fhirVersions.DSTU2, + fhirResource: dstu2Example1, + fhirIcons: avatarSrc, + }; + + const { getByAltText } = render(); + const headerIcon = getByAltText('header icon'); + + expect(headerIcon.getAttribute('src')).toContain(avatarSrc); + }); + it('should render with DSTU2 source data', () => { const defaultProps = { fhirResource: dstu2Example1, diff --git a/src/components/ui/index.js b/src/components/ui/index.js index 508c0f10..28dd4a2f 100644 --- a/src/components/ui/index.js +++ b/src/components/ui/index.js @@ -87,7 +87,7 @@ export const Title = props => ( export const Badge = props => { return ( ( export const Body = ({ tableData = [], reverseContent, children }) => (
{reverseContent ? children : null} -
+
{tableData.map( (value, index) => value.status && ( @@ -199,10 +199,17 @@ export const TableHeader = props => { ); }; -export const TableRow = props => {props.children}; +export const TableRow = props => { + const { children, ...rest } = props; + return {props.children}; +}; export const TableCell = props => ( - + {props.children} ); diff --git a/src/fixtures/example-icons.jsx b/src/fixtures/example-icons.jsx index 8601ea50..d44f6488 100644 --- a/src/fixtures/example-icons.jsx +++ b/src/fixtures/example-icons.jsx @@ -141,6 +141,13 @@ export default { alt="location marker" /> ), + Medication: ( + medication + ), MedicationOrder: ( observation ), + Organization: ( + organization + ), Questionnaire: ( patient ), + Coverage: ( + coverage + ), };