@ltht-react/care-plan-summary 2.0.174 → 2.0.177
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +21 -21
- package/package.json +7 -7
- package/src/atoms/care-plan-description.tsx +31 -31
- package/src/atoms/care-plan-status.tsx +28 -28
- package/src/atoms/care-plan-title.tsx +20 -20
- package/src/index.tsx +3 -3
- package/src/molecules/care-plan-redacted.tsx +31 -31
- package/src/organisms/care-plan-summary.tsx +50 -50
package/README.md
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
# Care Plan Summary
|
|
2
|
-
|
|
3
|
-
### Import
|
|
4
|
-
|
|
5
|
-
```js
|
|
6
|
-
import CarePlanSummary from '@ltht-react/care-plan-summary'
|
|
7
|
-
```
|
|
8
|
-
|
|
9
|
-
### Usage
|
|
10
|
-
|
|
11
|
-
```jsx
|
|
12
|
-
<CarePlanSummary title="Care Plans" carePlans={carePlans} clickHandler={handleClick} />
|
|
13
|
-
```
|
|
14
|
-
|
|
15
|
-
### Properties
|
|
16
|
-
|
|
17
|
-
| Prop | Required | Default | Type | Description |
|
|
18
|
-
| :------------- | :------- | :--------- | :--------- | :------------------------------------------------------------ |
|
|
19
|
-
| `title` | No | Care Plans | string | Header text |
|
|
20
|
-
| `carePlans` | Yes | | CarePlan[] | Array of care plans to display |
|
|
21
|
-
| `clickHandler` | No | undefined | Function | Callback click handler containing the selected care plan item |
|
|
1
|
+
# Care Plan Summary
|
|
2
|
+
|
|
3
|
+
### Import
|
|
4
|
+
|
|
5
|
+
```js
|
|
6
|
+
import CarePlanSummary from '@ltht-react/care-plan-summary'
|
|
7
|
+
```
|
|
8
|
+
|
|
9
|
+
### Usage
|
|
10
|
+
|
|
11
|
+
```jsx
|
|
12
|
+
<CarePlanSummary title="Care Plans" carePlans={carePlans} clickHandler={handleClick} />
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
### Properties
|
|
16
|
+
|
|
17
|
+
| Prop | Required | Default | Type | Description |
|
|
18
|
+
| :------------- | :------- | :--------- | :--------- | :------------------------------------------------------------ |
|
|
19
|
+
| `title` | No | Care Plans | string | Header text |
|
|
20
|
+
| `carePlans` | Yes | | CarePlan[] | Array of care plans to display |
|
|
21
|
+
| `clickHandler` | No | undefined | Function | Callback click handler containing the selected care plan item |
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ltht-react/care-plan-summary",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.177",
|
|
4
4
|
"description": "ltht-react clinical CarePlanSummary component.",
|
|
5
5
|
"author": "LTHT",
|
|
6
6
|
"homepage": "",
|
|
@@ -24,12 +24,12 @@
|
|
|
24
24
|
"dependencies": {
|
|
25
25
|
"@emotion/react": "^11.0.0",
|
|
26
26
|
"@emotion/styled": "^11.0.0",
|
|
27
|
-
"@ltht-react/list": "^2.0.
|
|
28
|
-
"@ltht-react/styles": "^2.0.
|
|
29
|
-
"@ltht-react/type-summary": "^2.0.
|
|
30
|
-
"@ltht-react/types": "^2.0.
|
|
31
|
-
"@ltht-react/utils": "^2.0.
|
|
27
|
+
"@ltht-react/list": "^2.0.177",
|
|
28
|
+
"@ltht-react/styles": "^2.0.177",
|
|
29
|
+
"@ltht-react/type-summary": "^2.0.177",
|
|
30
|
+
"@ltht-react/types": "^2.0.177",
|
|
31
|
+
"@ltht-react/utils": "^2.0.177",
|
|
32
32
|
"react": "^18.2.0"
|
|
33
33
|
},
|
|
34
|
-
"gitHead": "
|
|
34
|
+
"gitHead": "767ea98cfcefe4d93d604a52c8819e282373f90e"
|
|
35
35
|
}
|
|
@@ -1,31 +1,31 @@
|
|
|
1
|
-
import { FC, HTMLAttributes } from 'react'
|
|
2
|
-
import styled from '@emotion/styled'
|
|
3
|
-
|
|
4
|
-
import { TEXT_COLOURS } from '@ltht-react/styles'
|
|
5
|
-
import { CarePlan } from '@ltht-react/types'
|
|
6
|
-
import { resourceReferenceDisplaySummary } from '@ltht-react/utils'
|
|
7
|
-
|
|
8
|
-
const StyledCarePlanDescription = styled.div`
|
|
9
|
-
color: ${TEXT_COLOURS.SECONDARY.VALUE};
|
|
10
|
-
text-align: left;
|
|
11
|
-
font-size: smaller;
|
|
12
|
-
padding-top: 0.25rem;
|
|
13
|
-
`
|
|
14
|
-
|
|
15
|
-
const CarePlanDescription: FC<Props> = ({ carePlan, ...rest }) => {
|
|
16
|
-
const values = []
|
|
17
|
-
|
|
18
|
-
const author = carePlan.author && resourceReferenceDisplaySummary(carePlan.author)
|
|
19
|
-
if (author && author.length > 0) values.push(author)
|
|
20
|
-
|
|
21
|
-
const careTeam = carePlan.careTeam && resourceReferenceDisplaySummary(carePlan.careTeam)
|
|
22
|
-
if (careTeam && careTeam.length > 0) values.push(careTeam)
|
|
23
|
-
|
|
24
|
-
return <StyledCarePlanDescription {...rest}>{values.join(' - ')}</StyledCarePlanDescription>
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
interface Props extends HTMLAttributes<HTMLDivElement> {
|
|
28
|
-
carePlan: CarePlan
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
export default CarePlanDescription
|
|
1
|
+
import { FC, HTMLAttributes } from 'react'
|
|
2
|
+
import styled from '@emotion/styled'
|
|
3
|
+
|
|
4
|
+
import { TEXT_COLOURS } from '@ltht-react/styles'
|
|
5
|
+
import { CarePlan } from '@ltht-react/types'
|
|
6
|
+
import { resourceReferenceDisplaySummary } from '@ltht-react/utils'
|
|
7
|
+
|
|
8
|
+
const StyledCarePlanDescription = styled.div`
|
|
9
|
+
color: ${TEXT_COLOURS.SECONDARY.VALUE};
|
|
10
|
+
text-align: left;
|
|
11
|
+
font-size: smaller;
|
|
12
|
+
padding-top: 0.25rem;
|
|
13
|
+
`
|
|
14
|
+
|
|
15
|
+
const CarePlanDescription: FC<Props> = ({ carePlan, ...rest }) => {
|
|
16
|
+
const values = []
|
|
17
|
+
|
|
18
|
+
const author = carePlan.author && resourceReferenceDisplaySummary(carePlan.author)
|
|
19
|
+
if (author && author.length > 0) values.push(author)
|
|
20
|
+
|
|
21
|
+
const careTeam = carePlan.careTeam && resourceReferenceDisplaySummary(carePlan.careTeam)
|
|
22
|
+
if (careTeam && careTeam.length > 0) values.push(careTeam)
|
|
23
|
+
|
|
24
|
+
return <StyledCarePlanDescription {...rest}>{values.join(' - ')}</StyledCarePlanDescription>
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
interface Props extends HTMLAttributes<HTMLDivElement> {
|
|
28
|
+
carePlan: CarePlan
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
export default CarePlanDescription
|
|
@@ -1,28 +1,28 @@
|
|
|
1
|
-
import { FC, HTMLAttributes } from 'react'
|
|
2
|
-
import styled from '@emotion/styled'
|
|
3
|
-
|
|
4
|
-
import { TEXT_COLOURS } from '@ltht-react/styles'
|
|
5
|
-
import { CarePlan } from '@ltht-react/types'
|
|
6
|
-
import { titleCase } from '@ltht-react/utils'
|
|
7
|
-
|
|
8
|
-
const StyledCarePlanStatus = styled.div`
|
|
9
|
-
color: ${TEXT_COLOURS.SECONDARY.VALUE};
|
|
10
|
-
text-align: right;
|
|
11
|
-
font-size: smaller;
|
|
12
|
-
padding-top: 0.25rem;
|
|
13
|
-
`
|
|
14
|
-
|
|
15
|
-
const CarePlanStatus: FC<Props> = ({ carePlan, ...rest }) => {
|
|
16
|
-
const values = []
|
|
17
|
-
|
|
18
|
-
if (carePlan.intent) values.push(titleCase(carePlan.intent))
|
|
19
|
-
if (carePlan.status) values.push(titleCase(carePlan.status))
|
|
20
|
-
|
|
21
|
-
return <StyledCarePlanStatus {...rest}>{values.join(' - ')}</StyledCarePlanStatus>
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
interface Props extends HTMLAttributes<HTMLDivElement> {
|
|
25
|
-
carePlan: CarePlan
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
export default CarePlanStatus
|
|
1
|
+
import { FC, HTMLAttributes } from 'react'
|
|
2
|
+
import styled from '@emotion/styled'
|
|
3
|
+
|
|
4
|
+
import { TEXT_COLOURS } from '@ltht-react/styles'
|
|
5
|
+
import { CarePlan } from '@ltht-react/types'
|
|
6
|
+
import { titleCase } from '@ltht-react/utils'
|
|
7
|
+
|
|
8
|
+
const StyledCarePlanStatus = styled.div`
|
|
9
|
+
color: ${TEXT_COLOURS.SECONDARY.VALUE};
|
|
10
|
+
text-align: right;
|
|
11
|
+
font-size: smaller;
|
|
12
|
+
padding-top: 0.25rem;
|
|
13
|
+
`
|
|
14
|
+
|
|
15
|
+
const CarePlanStatus: FC<Props> = ({ carePlan, ...rest }) => {
|
|
16
|
+
const values = []
|
|
17
|
+
|
|
18
|
+
if (carePlan.intent) values.push(titleCase(carePlan.intent))
|
|
19
|
+
if (carePlan.status) values.push(titleCase(carePlan.status))
|
|
20
|
+
|
|
21
|
+
return <StyledCarePlanStatus {...rest}>{values.join(' - ')}</StyledCarePlanStatus>
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
interface Props extends HTMLAttributes<HTMLDivElement> {
|
|
25
|
+
carePlan: CarePlan
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
export default CarePlanStatus
|
|
@@ -1,20 +1,20 @@
|
|
|
1
|
-
import { FC, HTMLAttributes } from 'react'
|
|
2
|
-
import styled from '@emotion/styled'
|
|
3
|
-
|
|
4
|
-
import { TEXT_COLOURS } from '@ltht-react/styles'
|
|
5
|
-
import { CarePlan } from '@ltht-react/types'
|
|
6
|
-
|
|
7
|
-
const StyledCarePlanTitle = styled.div`
|
|
8
|
-
color: ${TEXT_COLOURS.PRIMARY};
|
|
9
|
-
text-align: left;
|
|
10
|
-
`
|
|
11
|
-
|
|
12
|
-
const CarePlanTitle: FC<Props> = ({ carePlan, ...rest }) => (
|
|
13
|
-
<StyledCarePlanTitle {...rest}>{carePlan.title}</StyledCarePlanTitle>
|
|
14
|
-
)
|
|
15
|
-
|
|
16
|
-
interface Props extends HTMLAttributes<HTMLDivElement> {
|
|
17
|
-
carePlan: CarePlan
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
export default CarePlanTitle
|
|
1
|
+
import { FC, HTMLAttributes } from 'react'
|
|
2
|
+
import styled from '@emotion/styled'
|
|
3
|
+
|
|
4
|
+
import { TEXT_COLOURS } from '@ltht-react/styles'
|
|
5
|
+
import { CarePlan } from '@ltht-react/types'
|
|
6
|
+
|
|
7
|
+
const StyledCarePlanTitle = styled.div`
|
|
8
|
+
color: ${TEXT_COLOURS.PRIMARY};
|
|
9
|
+
text-align: left;
|
|
10
|
+
`
|
|
11
|
+
|
|
12
|
+
const CarePlanTitle: FC<Props> = ({ carePlan, ...rest }) => (
|
|
13
|
+
<StyledCarePlanTitle {...rest}>{carePlan.title}</StyledCarePlanTitle>
|
|
14
|
+
)
|
|
15
|
+
|
|
16
|
+
interface Props extends HTMLAttributes<HTMLDivElement> {
|
|
17
|
+
carePlan: CarePlan
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
export default CarePlanTitle
|
package/src/index.tsx
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import CarePlanSummary from './organisms/care-plan-summary'
|
|
2
|
-
|
|
3
|
-
export default CarePlanSummary
|
|
1
|
+
import CarePlanSummary from './organisms/care-plan-summary'
|
|
2
|
+
|
|
3
|
+
export default CarePlanSummary
|
|
@@ -1,31 +1,31 @@
|
|
|
1
|
-
import { FC } from 'react'
|
|
2
|
-
import styled from '@emotion/styled'
|
|
3
|
-
|
|
4
|
-
import { CarePlan } from '@ltht-react/types'
|
|
5
|
-
import { RedactedDescription, PeriodSummary } from '@ltht-react/type-summary'
|
|
6
|
-
|
|
7
|
-
const StyledRedactedDescription = styled.div`
|
|
8
|
-
flex-grow: 1;
|
|
9
|
-
text-align: left;
|
|
10
|
-
`
|
|
11
|
-
|
|
12
|
-
const StyledPeriodSummary = styled.div`
|
|
13
|
-
text-align: right;
|
|
14
|
-
`
|
|
15
|
-
|
|
16
|
-
const CarePlanRedacted: FC<Props> = ({ carePlan }) => (
|
|
17
|
-
<>
|
|
18
|
-
<StyledRedactedDescription>
|
|
19
|
-
<RedactedDescription />
|
|
20
|
-
</StyledRedactedDescription>
|
|
21
|
-
<StyledPeriodSummary>
|
|
22
|
-
<PeriodSummary period={carePlan.period} />
|
|
23
|
-
</StyledPeriodSummary>
|
|
24
|
-
</>
|
|
25
|
-
)
|
|
26
|
-
|
|
27
|
-
interface Props {
|
|
28
|
-
carePlan: CarePlan
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
export default CarePlanRedacted
|
|
1
|
+
import { FC } from 'react'
|
|
2
|
+
import styled from '@emotion/styled'
|
|
3
|
+
|
|
4
|
+
import { CarePlan } from '@ltht-react/types'
|
|
5
|
+
import { RedactedDescription, PeriodSummary } from '@ltht-react/type-summary'
|
|
6
|
+
|
|
7
|
+
const StyledRedactedDescription = styled.div`
|
|
8
|
+
flex-grow: 1;
|
|
9
|
+
text-align: left;
|
|
10
|
+
`
|
|
11
|
+
|
|
12
|
+
const StyledPeriodSummary = styled.div`
|
|
13
|
+
text-align: right;
|
|
14
|
+
`
|
|
15
|
+
|
|
16
|
+
const CarePlanRedacted: FC<Props> = ({ carePlan }) => (
|
|
17
|
+
<>
|
|
18
|
+
<StyledRedactedDescription>
|
|
19
|
+
<RedactedDescription />
|
|
20
|
+
</StyledRedactedDescription>
|
|
21
|
+
<StyledPeriodSummary>
|
|
22
|
+
<PeriodSummary period={carePlan.period} />
|
|
23
|
+
</StyledPeriodSummary>
|
|
24
|
+
</>
|
|
25
|
+
)
|
|
26
|
+
|
|
27
|
+
interface Props {
|
|
28
|
+
carePlan: CarePlan
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
export default CarePlanRedacted
|
|
@@ -1,50 +1,50 @@
|
|
|
1
|
-
import { FC, HTMLAttributes } from 'react'
|
|
2
|
-
import styled from '@emotion/styled'
|
|
3
|
-
|
|
4
|
-
import { CarePlan } from '@ltht-react/types'
|
|
5
|
-
import { PeriodSummary } from '@ltht-react/type-summary'
|
|
6
|
-
|
|
7
|
-
import Description from '../atoms/care-plan-description'
|
|
8
|
-
import Status from '../atoms/care-plan-status'
|
|
9
|
-
import Title from '../atoms/care-plan-title'
|
|
10
|
-
import Redacted from '../molecules/care-plan-redacted'
|
|
11
|
-
|
|
12
|
-
const StyledSummary = styled.div`
|
|
13
|
-
display: flex;
|
|
14
|
-
justify-content: center;
|
|
15
|
-
`
|
|
16
|
-
const StyledDescription = styled.div`
|
|
17
|
-
flex-grow: 1;
|
|
18
|
-
`
|
|
19
|
-
const StyledDate = styled.div`
|
|
20
|
-
text-align: right;
|
|
21
|
-
`
|
|
22
|
-
|
|
23
|
-
const CarePlanSummary: FC<Props> = ({ carePlan, ...rest }) => {
|
|
24
|
-
if (carePlan.metadata.isRedacted) {
|
|
25
|
-
return (
|
|
26
|
-
<StyledSummary {...rest}>
|
|
27
|
-
<Redacted carePlan={carePlan} />
|
|
28
|
-
</StyledSummary>
|
|
29
|
-
)
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
return (
|
|
33
|
-
<StyledSummary {...rest}>
|
|
34
|
-
<StyledDescription>
|
|
35
|
-
<Title carePlan={carePlan} />
|
|
36
|
-
<Description carePlan={carePlan} />
|
|
37
|
-
</StyledDescription>
|
|
38
|
-
<StyledDate>
|
|
39
|
-
<PeriodSummary period={carePlan.period} />
|
|
40
|
-
<Status carePlan={carePlan} />
|
|
41
|
-
</StyledDate>
|
|
42
|
-
</StyledSummary>
|
|
43
|
-
)
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
interface Props extends HTMLAttributes<HTMLDivElement> {
|
|
47
|
-
carePlan: CarePlan
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
export default CarePlanSummary
|
|
1
|
+
import { FC, HTMLAttributes } from 'react'
|
|
2
|
+
import styled from '@emotion/styled'
|
|
3
|
+
|
|
4
|
+
import { CarePlan } from '@ltht-react/types'
|
|
5
|
+
import { PeriodSummary } from '@ltht-react/type-summary'
|
|
6
|
+
|
|
7
|
+
import Description from '../atoms/care-plan-description'
|
|
8
|
+
import Status from '../atoms/care-plan-status'
|
|
9
|
+
import Title from '../atoms/care-plan-title'
|
|
10
|
+
import Redacted from '../molecules/care-plan-redacted'
|
|
11
|
+
|
|
12
|
+
const StyledSummary = styled.div`
|
|
13
|
+
display: flex;
|
|
14
|
+
justify-content: center;
|
|
15
|
+
`
|
|
16
|
+
const StyledDescription = styled.div`
|
|
17
|
+
flex-grow: 1;
|
|
18
|
+
`
|
|
19
|
+
const StyledDate = styled.div`
|
|
20
|
+
text-align: right;
|
|
21
|
+
`
|
|
22
|
+
|
|
23
|
+
const CarePlanSummary: FC<Props> = ({ carePlan, ...rest }) => {
|
|
24
|
+
if (carePlan.metadata.isRedacted) {
|
|
25
|
+
return (
|
|
26
|
+
<StyledSummary {...rest}>
|
|
27
|
+
<Redacted carePlan={carePlan} />
|
|
28
|
+
</StyledSummary>
|
|
29
|
+
)
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
return (
|
|
33
|
+
<StyledSummary {...rest}>
|
|
34
|
+
<StyledDescription>
|
|
35
|
+
<Title carePlan={carePlan} />
|
|
36
|
+
<Description carePlan={carePlan} />
|
|
37
|
+
</StyledDescription>
|
|
38
|
+
<StyledDate>
|
|
39
|
+
<PeriodSummary period={carePlan.period} />
|
|
40
|
+
<Status carePlan={carePlan} />
|
|
41
|
+
</StyledDate>
|
|
42
|
+
</StyledSummary>
|
|
43
|
+
)
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
interface Props extends HTMLAttributes<HTMLDivElement> {
|
|
47
|
+
carePlan: CarePlan
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
export default CarePlanSummary
|