@ltht-react/care-plan-summary 2.0.3 → 2.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ltht-react/care-plan-summary",
-  "version": "2.0.3",
+  "version": "2.0.5",
   "description": "ltht-react clinical CarePlanSummary component.",
   "author": "LTHT",
   "homepage": "",
@@ -8,7 +8,8 @@
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
   "files": [
-    "lib"
+    "lib",
+    "src"
   ],
   "directories": {
     "lib": "lib"
@@ -23,12 +24,12 @@
   "dependencies": {
     "@emotion/react": "^11.0.0",
     "@emotion/styled": "^11.0.0",
-    "@ltht-react/list": "^2.0.3",
-    "@ltht-react/styles": "^2.0.3",
-    "@ltht-react/type-summary": "^2.0.3",
-    "@ltht-react/types": "^2.0.3",
-    "@ltht-react/utils": "^2.0.3",
+    "@ltht-react/list": "^2.0.5",
+    "@ltht-react/styles": "^2.0.5",
+    "@ltht-react/type-summary": "^2.0.5",
+    "@ltht-react/types": "^2.0.5",
+    "@ltht-react/utils": "^2.0.5",
     "react": "^18.2.0"
   },
-  "gitHead": "6f18742bbf2f44123b6478257e52fbbdd291a25b"
+  "gitHead": "5d14d78829abb529afe382226925f4793a2c8257"
 }

package/src/atoms/care-plan-description.tsx

@@ -0,0 +1,31 @@
+import { FC, HTMLAttributes } from 'react'
+import styled from '@emotion/styled'
+
+import { TEXT_COLOURS } from '@ltht-react/styles'
+import { CarePlan } from '@ltht-react/types'
+import { resourceReferenceDisplaySummary } from '@ltht-react/utils'
+
+const StyledCarePlanDescription = styled.div`
+  color: ${TEXT_COLOURS.SECONDARY.VALUE};
+  text-align: left;
+  font-size: smaller;
+  padding-top: 0.25rem;
+`
+
+const CarePlanDescription: FC<Props> = ({ carePlan, ...rest }) => {
+  const values = []
+
+  const author = carePlan.author && resourceReferenceDisplaySummary(carePlan.author)
+  if (author && author.length > 0) values.push(author)
+
+  const careTeam = carePlan.careTeam && resourceReferenceDisplaySummary(carePlan.careTeam)
+  if (careTeam && careTeam.length > 0) values.push(careTeam)
+
+  return <StyledCarePlanDescription {...rest}>{values.join(' - ')}</StyledCarePlanDescription>
+}
+
+interface Props extends HTMLAttributes<HTMLDivElement> {
+  carePlan: CarePlan
+}
+
+export default CarePlanDescription

package/src/atoms/care-plan-status.tsx

@@ -0,0 +1,28 @@
+import { FC, HTMLAttributes } from 'react'
+import styled from '@emotion/styled'
+
+import { TEXT_COLOURS } from '@ltht-react/styles'
+import { CarePlan } from '@ltht-react/types'
+import { titleCase } from '@ltht-react/utils'
+
+const StyledCarePlanStatus = styled.div`
+  color: ${TEXT_COLOURS.SECONDARY.VALUE};
+  text-align: right;
+  font-size: smaller;
+  padding-top: 0.25rem;
+`
+
+const CarePlanStatus: FC<Props> = ({ carePlan, ...rest }) => {
+  const values = []
+
+  if (carePlan.intent) values.push(titleCase(carePlan.intent))
+  if (carePlan.status) values.push(titleCase(carePlan.status))
+
+  return <StyledCarePlanStatus {...rest}>{values.join(' - ')}</StyledCarePlanStatus>
+}
+
+interface Props extends HTMLAttributes<HTMLDivElement> {
+  carePlan: CarePlan
+}
+
+export default CarePlanStatus

package/src/atoms/care-plan-title.tsx

@@ -0,0 +1,20 @@
+import { FC, HTMLAttributes } from 'react'
+import styled from '@emotion/styled'
+
+import { TEXT_COLOURS } from '@ltht-react/styles'
+import { CarePlan } from '@ltht-react/types'
+
+const StyledCarePlanTitle = styled.div`
+  color: ${TEXT_COLOURS.PRIMARY};
+  text-align: left;
+`
+
+const CarePlanTitle: FC<Props> = ({ carePlan, ...rest }) => (
+  <StyledCarePlanTitle {...rest}>{carePlan.title}</StyledCarePlanTitle>
+)
+
+interface Props extends HTMLAttributes<HTMLDivElement> {
+  carePlan: CarePlan
+}
+
+export default CarePlanTitle

package/src/index.tsx

@@ -0,0 +1,3 @@
+import CarePlanSummary from './organisms/care-plan-summary'
+
+export default CarePlanSummary

package/src/molecules/care-plan-redacted.tsx

@@ -0,0 +1,31 @@
+import { FC } from 'react'
+import styled from '@emotion/styled'
+
+import { CarePlan } from '@ltht-react/types'
+import { RedactedDescription, PeriodSummary } from '@ltht-react/type-summary'
+
+const StyledRedactedDescription = styled.div`
+  flex-grow: 1;
+  text-align: left;
+`
+
+const StyledPeriodSummary = styled.div`
+  text-align: right;
+`
+
+const CarePlanRedacted: FC<Props> = ({ carePlan }) => (
+  <>
+    <StyledRedactedDescription>
+      <RedactedDescription />
+    </StyledRedactedDescription>
+    <StyledPeriodSummary>
+      <PeriodSummary period={carePlan.period} />
+    </StyledPeriodSummary>
+  </>
+)
+
+interface Props {
+  carePlan: CarePlan
+}
+
+export default CarePlanRedacted

package/src/organisms/care-plan-summary.tsx

@@ -0,0 +1,50 @@
+import { FC, HTMLAttributes } from 'react'
+import styled from '@emotion/styled'
+
+import { CarePlan } from '@ltht-react/types'
+import { PeriodSummary } from '@ltht-react/type-summary'
+
+import Description from '../atoms/care-plan-description'
+import Status from '../atoms/care-plan-status'
+import Title from '../atoms/care-plan-title'
+import Redacted from '../molecules/care-plan-redacted'
+
+const StyledSummary = styled.div`
+  display: flex;
+  justify-content: center;
+`
+const StyledDescription = styled.div`
+  flex-grow: 1;
+`
+const StyledDate = styled.div`
+  text-align: right;
+`
+
+const CarePlanSummary: FC<Props> = ({ carePlan, ...rest }) => {
+  if (carePlan.metadata.isRedacted) {
+    return (
+      <StyledSummary {...rest}>
+        <Redacted carePlan={carePlan} />
+      </StyledSummary>
+    )
+  }
+
+  return (
+    <StyledSummary {...rest}>
+      <StyledDescription>
+        <Title carePlan={carePlan} />
+        <Description carePlan={carePlan} />
+      </StyledDescription>
+      <StyledDate>
+        <PeriodSummary period={carePlan.period} />
+        <Status carePlan={carePlan} />
+      </StyledDate>
+    </StyledSummary>
+  )
+}
+
+interface Props extends HTMLAttributes<HTMLDivElement> {
+  carePlan: CarePlan
+}
+
+export default CarePlanSummary