@ltht-react/flag-summary 2.0.189 → 2.0.191

package/README.md

@@ -1,21 +1,21 @@
-# Flag Summary
-
-### Import
-
-```js
-import FlagSummary from '@ltht-react/flag-summary'
-```
-
-### Usage
-
-```jsx
-<FlagSummary title="Alerts" flags={flags} clickHandler={handleClick} />
-```
-
-### Properties
-
-| Prop           | Required | Default      | Type     | Description                                              |
-| :------------- | :------- | :----------- | :------- | :------------------------------------------------------- |
-| `title`        | No       | Flag Summary | string   | Header text                                              |
-| `flags`        | Yes      |              | Flag[]   | Array of flags to display                                |
-| `clickHandler` | No       | undefined    | Function | Callback click handler containing the selected flag item |
+# Flag Summary
+
+### Import
+
+```js
+import FlagSummary from '@ltht-react/flag-summary'
+```
+
+### Usage
+
+```jsx
+<FlagSummary title="Alerts" flags={flags} clickHandler={handleClick} />
+```
+
+### Properties
+
+| Prop           | Required | Default      | Type     | Description                                              |
+| :------------- | :------- | :----------- | :------- | :------------------------------------------------------- |
+| `title`        | No       | Flag Summary | string   | Header text                                              |
+| `flags`        | Yes      |              | Flag[]   | Array of flags to display                                |
+| `clickHandler` | No       | undefined    | Function | Callback click handler containing the selected flag item |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ltht-react/flag-summary",
-  "version": "2.0.189",
+  "version": "2.0.191",
   "description": "> TODO: description",
   "author": "Jonny Smith <jonny.asmith@gmail.com>",
   "homepage": "",
@@ -25,13 +25,13 @@
   "dependencies": {
     "@emotion/react": "^11.0.0",
     "@emotion/styled": "^11.0.0",
-    "@ltht-react/icon": "^2.0.189",
-    "@ltht-react/list": "^2.0.189",
-    "@ltht-react/styles": "^2.0.189",
-    "@ltht-react/type-summary": "^2.0.189",
-    "@ltht-react/types": "^2.0.189",
-    "@ltht-react/utils": "^2.0.189",
+    "@ltht-react/icon": "^2.0.191",
+    "@ltht-react/list": "^2.0.191",
+    "@ltht-react/styles": "^2.0.191",
+    "@ltht-react/type-summary": "^2.0.191",
+    "@ltht-react/types": "^2.0.191",
+    "@ltht-react/utils": "^2.0.191",
     "react": "^18.2.0"
   },
-  "gitHead": "ef1aa76019b62345209fce83df6f93c51024ee55"
+  "gitHead": "c5113953a19f4ed9ae82b545f073b5feb7d5a20b"
 }

package/src/atoms/flag-description.tsx

@@ -1,30 +1,30 @@
-import { HTMLAttributes, FC } from 'react'
-import styled from '@emotion/styled'
-import { TEXT_COLOURS } from '@ltht-react/styles'
-import { Flag } from '@ltht-react/types'
-import { codeableConceptDisplaySummary, codeableConceptCodeSummary } from '@ltht-react/utils'
-
-const StyledFlagDescription = styled.div`
-  color: ${TEXT_COLOURS.SECONDARY.VALUE};
-  text-align: left;
-  font-size: smaller;
-  padding-top: 0.25rem;
-`
-
-const FlagDescription: FC<Props> = ({ flag: { code, category }, ...rest }) => {
-  const values = []
-
-  const codeSummary = codeableConceptCodeSummary(code)
-  if (codeSummary && codeSummary.length > 0) values.push(codeSummary)
-
-  const categorySummary = category && codeableConceptDisplaySummary(category)
-  if (categorySummary && categorySummary.length > 0) values.push(categorySummary)
-
-  return <StyledFlagDescription {...rest}>{values.join(' - ')}</StyledFlagDescription>
-}
-
-interface Props extends HTMLAttributes<HTMLDivElement> {
-  flag: Flag
-}
-
-export default FlagDescription
+import { HTMLAttributes, FC } from 'react'
+import styled from '@emotion/styled'
+import { TEXT_COLOURS } from '@ltht-react/styles'
+import { Flag } from '@ltht-react/types'
+import { codeableConceptDisplaySummary, codeableConceptCodeSummary } from '@ltht-react/utils'
+
+const StyledFlagDescription = styled.div`
+  color: ${TEXT_COLOURS.SECONDARY.VALUE};
+  text-align: left;
+  font-size: smaller;
+  padding-top: 0.25rem;
+`
+
+const FlagDescription: FC<Props> = ({ flag: { code, category }, ...rest }) => {
+  const values = []
+
+  const codeSummary = codeableConceptCodeSummary(code)
+  if (codeSummary && codeSummary.length > 0) values.push(codeSummary)
+
+  const categorySummary = category && codeableConceptDisplaySummary(category)
+  if (categorySummary && categorySummary.length > 0) values.push(categorySummary)
+
+  return <StyledFlagDescription {...rest}>{values.join(' - ')}</StyledFlagDescription>
+}
+
+interface Props extends HTMLAttributes<HTMLDivElement> {
+  flag: Flag
+}
+
+export default FlagDescription

package/src/atoms/flag-icon.tsx

@@ -1,28 +1,28 @@
-import { FC, HTMLAttributes } from 'react'
-import styled from '@emotion/styled'
-import Icon from '@ltht-react/icon'
-import { getStringExtension } from '@ltht-react/utils'
-import { Flag } from '@ltht-react/types'
-
-const StyledFlagIcon = styled.div`
-  margin-bottom: 0px;
-`
-
-const FlagIcon: FC<Props> = ({ flag: { extension, ...rest } }) => {
-  const ext = getStringExtension(extension, 'https://leedsth.nhs.uk/alert/priority')
-  if (ext === 'High') {
-    return (
-      <StyledFlagIcon {...rest}>
-        <Icon type="exclamation" color="red" size="medium" />
-      </StyledFlagIcon>
-    )
-  }
-
-  return <></>
-}
-
-interface Props extends HTMLAttributes<HTMLDivElement> {
-  flag: Flag
-}
-
-export default FlagIcon
+import { FC, HTMLAttributes } from 'react'
+import styled from '@emotion/styled'
+import Icon from '@ltht-react/icon'
+import { getStringExtension } from '@ltht-react/utils'
+import { Flag } from '@ltht-react/types'
+
+const StyledFlagIcon = styled.div`
+  margin-bottom: 0px;
+`
+
+const FlagIcon: FC<Props> = ({ flag: { extension, ...rest } }) => {
+  const ext = getStringExtension(extension, 'https://leedsth.nhs.uk/alert/priority')
+  if (ext === 'High') {
+    return (
+      <StyledFlagIcon {...rest}>
+        <Icon type="exclamation" color="red" size="medium" />
+      </StyledFlagIcon>
+    )
+  }
+
+  return <></>
+}
+
+interface Props extends HTMLAttributes<HTMLDivElement> {
+  flag: Flag
+}
+
+export default FlagIcon

package/src/atoms/flag-source.tsx

@@ -1,20 +1,20 @@
-import { HTMLAttributes, FC } from 'react'
-import styled from '@emotion/styled'
-import { TEXT_COLOURS } from '@ltht-react/styles'
-import { Flag } from '@ltht-react/types'
-import { metadataSourceSummaryText } from '@ltht-react/utils'
-
-const StyledFlagSource = styled.div`
-  color: ${TEXT_COLOURS.SECONDARY};
-  text-align: right;
-`
-
-const FlagSource: FC<Props> = ({ flag: { metadata }, ...rest }) => (
-  <StyledFlagSource {...rest}>{metadataSourceSummaryText(metadata)}</StyledFlagSource>
-)
-
-interface Props extends HTMLAttributes<HTMLDivElement> {
-  flag: Flag
-}
-
-export default FlagSource
+import { HTMLAttributes, FC } from 'react'
+import styled from '@emotion/styled'
+import { TEXT_COLOURS } from '@ltht-react/styles'
+import { Flag } from '@ltht-react/types'
+import { metadataSourceSummaryText } from '@ltht-react/utils'
+
+const StyledFlagSource = styled.div`
+  color: ${TEXT_COLOURS.SECONDARY};
+  text-align: right;
+`
+
+const FlagSource: FC<Props> = ({ flag: { metadata }, ...rest }) => (
+  <StyledFlagSource {...rest}>{metadataSourceSummaryText(metadata)}</StyledFlagSource>
+)
+
+interface Props extends HTMLAttributes<HTMLDivElement> {
+  flag: Flag
+}
+
+export default FlagSource

package/src/atoms/flag-status.tsx

@@ -1,22 +1,22 @@
-import { HTMLAttributes, FC } from 'react'
-import styled from '@emotion/styled'
-import { TEXT_COLOURS } from '@ltht-react/styles'
-import { Flag } from '@ltht-react/types'
-import { titleCase } from '@ltht-react/utils'
-
-const StyledFlagStatus = styled.div`
-  color: ${TEXT_COLOURS.SECONDARY.VALUE};
-  text-align: right;
-  font-size: smaller;
-  padding-top: 0.25rem;
-`
-
-const FlagStatus: FC<Props> = ({ flag: { status }, ...rest }) => (
-  <StyledFlagStatus {...rest}>{titleCase(status)}</StyledFlagStatus>
-)
-
-interface Props extends HTMLAttributes<HTMLDivElement> {
-  flag: Flag
-}
-
-export default FlagStatus
+import { HTMLAttributes, FC } from 'react'
+import styled from '@emotion/styled'
+import { TEXT_COLOURS } from '@ltht-react/styles'
+import { Flag } from '@ltht-react/types'
+import { titleCase } from '@ltht-react/utils'
+
+const StyledFlagStatus = styled.div`
+  color: ${TEXT_COLOURS.SECONDARY.VALUE};
+  text-align: right;
+  font-size: smaller;
+  padding-top: 0.25rem;
+`
+
+const FlagStatus: FC<Props> = ({ flag: { status }, ...rest }) => (
+  <StyledFlagStatus {...rest}>{titleCase(status)}</StyledFlagStatus>
+)
+
+interface Props extends HTMLAttributes<HTMLDivElement> {
+  flag: Flag
+}
+
+export default FlagStatus

package/src/atoms/flag-text.tsx

@@ -1,24 +1,24 @@
-import { HTMLAttributes, FC } from 'react'
-import styled from '@emotion/styled'
-import { TEXT_COLOURS } from '@ltht-react/styles'
-import { Flag } from '@ltht-react/types'
-import { NarrativeSummary } from '@ltht-react/type-summary'
-
-const StyledFlagText = styled.div`
-  color: ${TEXT_COLOURS.SECONDARY.VALUE};
-  text-align: left;
-  font-size: smaller;
-  padding-top: 0.25rem;
-`
-
-const FlagText: FC<Props> = ({ flag: { text }, ...rest }) => (
-  <StyledFlagText {...rest}>
-    <NarrativeSummary narrative={text} showIfEmpty={false} truncate />
-  </StyledFlagText>
-)
-
-interface Props extends HTMLAttributes<HTMLDivElement> {
-  flag: Flag
-}
-
-export default FlagText
+import { HTMLAttributes, FC } from 'react'
+import styled from '@emotion/styled'
+import { TEXT_COLOURS } from '@ltht-react/styles'
+import { Flag } from '@ltht-react/types'
+import { NarrativeSummary } from '@ltht-react/type-summary'
+
+const StyledFlagText = styled.div`
+  color: ${TEXT_COLOURS.SECONDARY.VALUE};
+  text-align: left;
+  font-size: smaller;
+  padding-top: 0.25rem;
+`
+
+const FlagText: FC<Props> = ({ flag: { text }, ...rest }) => (
+  <StyledFlagText {...rest}>
+    <NarrativeSummary narrative={text} showIfEmpty={false} truncate />
+  </StyledFlagText>
+)
+
+interface Props extends HTMLAttributes<HTMLDivElement> {
+  flag: Flag
+}
+
+export default FlagText

package/src/atoms/flag-title.tsx

@@ -1,31 +1,31 @@
-import { HTMLAttributes, FC } from 'react'
-import styled from '@emotion/styled'
-import { TEXT_COLOURS } from '@ltht-react/styles'
-import { Flag } from '@ltht-react/types'
-import { codeableConceptDisplaySummary, getStringExtension } from '@ltht-react/utils'
-
-const StyledFlagTitle = styled.div<IStyledFlagTitleProps>`
-  color: ${TEXT_COLOURS.PRIMARY};
-  text-align: left;
-  ${(props) =>
-    props.priority === 'High' &&
-    `
-    padding-left:2px;
-    color: ${TEXT_COLOURS.DANGER};
-`}
-`
-
-const FlagTitle: FC<Props> = ({ flag: { code, extension } }) => {
-  const ext = getStringExtension(extension, 'https://leedsth.nhs.uk/alert/priority') ?? ''
-  return <StyledFlagTitle priority={ext}>{codeableConceptDisplaySummary(code)}</StyledFlagTitle>
-}
-
-interface Props extends HTMLAttributes<HTMLDivElement> {
-  flag: Flag
-}
-
-interface IStyledFlagTitleProps {
-  priority: string
-}
-
-export default FlagTitle
+import { HTMLAttributes, FC } from 'react'
+import styled from '@emotion/styled'
+import { TEXT_COLOURS } from '@ltht-react/styles'
+import { Flag } from '@ltht-react/types'
+import { codeableConceptDisplaySummary, getStringExtension } from '@ltht-react/utils'
+
+const StyledFlagTitle = styled.div<IStyledFlagTitleProps>`
+  color: ${TEXT_COLOURS.PRIMARY};
+  text-align: left;
+  ${(props) =>
+    props.priority === 'High' &&
+    `
+    padding-left:2px;
+    color: ${TEXT_COLOURS.DANGER};
+`}
+`
+
+const FlagTitle: FC<Props> = ({ flag: { code, extension } }) => {
+  const ext = getStringExtension(extension, 'https://leedsth.nhs.uk/alert/priority') ?? ''
+  return <StyledFlagTitle priority={ext}>{codeableConceptDisplaySummary(code)}</StyledFlagTitle>
+}
+
+interface Props extends HTMLAttributes<HTMLDivElement> {
+  flag: Flag
+}
+
+interface IStyledFlagTitleProps {
+  priority: string
+}
+
+export default FlagTitle

package/src/index.tsx

@@ -1,3 +1,3 @@
-import FlagSummary from './organisms/flag-summary'
-
-export default FlagSummary
+import FlagSummary from './organisms/flag-summary'
+
+export default FlagSummary

package/src/molecules/flag-identifier.tsx

@@ -1,22 +1,22 @@
-import { HTMLAttributes, FC } from 'react'
-import styled from '@emotion/styled'
-import { Flag } from '@ltht-react/types'
-import Icon from '../atoms/flag-icon'
-import Title from '../atoms/flag-title'
-
-const StyledFlagIdentifier = styled.div`
-  flex-grow: 1;
-  display: inline-flex;
-`
-
-const FlagIdentifier: FC<Props> = ({ flag, ...rest }) => (
-  <StyledFlagIdentifier {...rest}>
-    <Icon flag={flag} />
-    <Title flag={flag} />
-  </StyledFlagIdentifier>
-)
-
-interface Props extends HTMLAttributes<HTMLDivElement> {
-  flag: Flag
-}
-export default FlagIdentifier
+import { HTMLAttributes, FC } from 'react'
+import styled from '@emotion/styled'
+import { Flag } from '@ltht-react/types'
+import Icon from '../atoms/flag-icon'
+import Title from '../atoms/flag-title'
+
+const StyledFlagIdentifier = styled.div`
+  flex-grow: 1;
+  display: inline-flex;
+`
+
+const FlagIdentifier: FC<Props> = ({ flag, ...rest }) => (
+  <StyledFlagIdentifier {...rest}>
+    <Icon flag={flag} />
+    <Title flag={flag} />
+  </StyledFlagIdentifier>
+)
+
+interface Props extends HTMLAttributes<HTMLDivElement> {
+  flag: Flag
+}
+export default FlagIdentifier

package/src/molecules/flag-redacted.tsx

@@ -1,30 +1,30 @@
-import { FC } from 'react'
-import styled from '@emotion/styled'
-import { Flag } 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 FlagRedacted: FC<Props> = ({ flag: { period } }) => (
-  <>
-    <StyledRedactedDescription>
-      <RedactedDescription />
-    </StyledRedactedDescription>
-    <StyledPeriodSummary>
-      <PeriodSummary period={period} />
-    </StyledPeriodSummary>
-  </>
-)
-
-interface Props {
-  flag: Flag
-}
-
-export default FlagRedacted
+import { FC } from 'react'
+import styled from '@emotion/styled'
+import { Flag } 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 FlagRedacted: FC<Props> = ({ flag: { period } }) => (
+  <>
+    <StyledRedactedDescription>
+      <RedactedDescription />
+    </StyledRedactedDescription>
+    <StyledPeriodSummary>
+      <PeriodSummary period={period} />
+    </StyledPeriodSummary>
+  </>
+)
+
+interface Props {
+  flag: Flag
+}
+
+export default FlagRedacted

package/src/organisms/flag-summary.tsx

@@ -1,49 +1,49 @@
-import { HTMLAttributes, FC } from 'react'
-import Styled from '@emotion/styled'
-
-import { Flag } from '@ltht-react/types'
-import { PeriodSummary } from '@ltht-react/type-summary'
-
-import Text from '../atoms/flag-text'
-import Identifier from '../molecules/flag-identifier'
-import Redacted from '../molecules/flag-redacted'
-
-const StyledSummary = Styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-`
-const StyledDate = Styled.div`
-  text-align: right;
-`
-const StyledText = Styled.div`
-  flex-basis: 100%;
-`
-
-const FlagSummary: FC<Props> = ({ flag, ...rest }) => {
-  if (flag.metadata.isRedacted) {
-    return (
-      <StyledSummary {...rest}>
-        <Redacted flag={flag} />
-      </StyledSummary>
-    )
-  }
-
-  return (
-    <StyledSummary {...rest}>
-      <Identifier flag={flag} />
-      <StyledDate>
-        <PeriodSummary period={flag.period} />
-      </StyledDate>
-      <StyledText>
-        <Text flag={flag} />
-      </StyledText>
-    </StyledSummary>
-  )
-}
-
-interface Props extends HTMLAttributes<HTMLDivElement> {
-  flag: Flag
-}
-
-export default FlagSummary
+import { HTMLAttributes, FC } from 'react'
+import Styled from '@emotion/styled'
+
+import { Flag } from '@ltht-react/types'
+import { PeriodSummary } from '@ltht-react/type-summary'
+
+import Text from '../atoms/flag-text'
+import Identifier from '../molecules/flag-identifier'
+import Redacted from '../molecules/flag-redacted'
+
+const StyledSummary = Styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+`
+const StyledDate = Styled.div`
+  text-align: right;
+`
+const StyledText = Styled.div`
+  flex-basis: 100%;
+`
+
+const FlagSummary: FC<Props> = ({ flag, ...rest }) => {
+  if (flag.metadata.isRedacted) {
+    return (
+      <StyledSummary {...rest}>
+        <Redacted flag={flag} />
+      </StyledSummary>
+    )
+  }
+
+  return (
+    <StyledSummary {...rest}>
+      <Identifier flag={flag} />
+      <StyledDate>
+        <PeriodSummary period={flag.period} />
+      </StyledDate>
+      <StyledText>
+        <Text flag={flag} />
+      </StyledText>
+    </StyledSummary>
+  )
+}
+
+interface Props extends HTMLAttributes<HTMLDivElement> {
+  flag: Flag
+}
+
+export default FlagSummary