@ltht-react/diagnosis-summary 2.0.190 → 2.0.191

package/README.md

@@ -1,22 +1,22 @@
-# DiagnosisSummary
-
-<!-- STORY -->
-
-### Import
-
-```js
-import DiagnosisSummary from '@ltht-react/diagnosis-summary'
-```
-
-### Usage
-
-```jsx
-<DiagnosisSummary title="Conditions" conditions={conditions} clickHandler={handleCLick} />
-```
-
-### Properties
-
-| Prop           | Required | Default   | Type        | Description                                                   |
-| :------------- | :------- | :-------- | :---------- | :------------------------------------------------------------ |
-| `conditions`   | Yes      |           | Condition[] | Array of conditions to display                                |
-| `clickHandler` | No       | undefined | Function    | Callback click handler containing the selected condition item |
+# DiagnosisSummary
+
+<!-- STORY -->
+
+### Import
+
+```js
+import DiagnosisSummary from '@ltht-react/diagnosis-summary'
+```
+
+### Usage
+
+```jsx
+<DiagnosisSummary title="Conditions" conditions={conditions} clickHandler={handleCLick} />
+```
+
+### Properties
+
+| Prop           | Required | Default   | Type        | Description                                                   |
+| :------------- | :------- | :-------- | :---------- | :------------------------------------------------------------ |
+| `conditions`   | Yes      |           | Condition[] | Array of conditions to display                                |
+| `clickHandler` | No       | undefined | Function    | Callback click handler containing the selected condition item |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ltht-react/diagnosis-summary",
-  "version": "2.0.190",
+  "version": "2.0.191",
   "description": "ltht-react clinical DiagnosisSummary component.",
   "author": "LTHT",
   "homepage": "",
@@ -28,16 +28,16 @@
   "dependencies": {
     "@emotion/react": "^11.0.0",
     "@emotion/styled": "^11.0.0",
-    "@ltht-react/button": "^2.0.190",
-    "@ltht-react/hooks": "^2.0.190",
-    "@ltht-react/icon": "^2.0.190",
-    "@ltht-react/list": "^2.0.190",
-    "@ltht-react/styles": "^2.0.190",
-    "@ltht-react/type-summary": "^2.0.190",
-    "@ltht-react/types": "^2.0.190",
-    "@ltht-react/utils": "^2.0.190",
+    "@ltht-react/button": "^2.0.191",
+    "@ltht-react/hooks": "^2.0.191",
+    "@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",
     "html-react-parser": "^5.0.6",
     "react": "^18.2.0"
   },
-  "gitHead": "1773d375fb0701642bad343c40dd946a7637f2e0"
+  "gitHead": "c5113953a19f4ed9ae82b545f073b5feb7d5a20b"
 }

package/src/atoms/diagnosis-category.tsx

@@ -1,31 +1,31 @@
-import { FC, HTMLAttributes } from 'react'
-import styled from '@emotion/styled'
-
-import { TEXT_COLOURS } from '@ltht-react/styles'
-import { Condition } from '@ltht-react/types'
-import { codeableConceptDisplaySummary } from '@ltht-react/utils'
-
-const StyledConditionCategory = styled.div<IStyledDescription>`
-  color: ${TEXT_COLOURS.SECONDARY.VALUE};
-  text-align: left;
-  font-size: smaller;
-  padding-top: 0.25rem;
-  text-decoration: ${({ enteredInError }) => (enteredInError ? 'line-through' : 'none')};
-`
-
-const DiagnosisCategory: FC<Props> = ({ condition, enteredInError, ...rest }) => (
-  <StyledConditionCategory enteredInError={enteredInError} {...rest}>
-    {codeableConceptDisplaySummary(condition.severity)}
-  </StyledConditionCategory>
-)
-
-interface Props extends HTMLAttributes<HTMLDivElement> {
-  condition: Condition
-  enteredInError: boolean
-}
-
-interface IStyledDescription {
-  enteredInError: boolean
-}
-
-export default DiagnosisCategory
+import { FC, HTMLAttributes } from 'react'
+import styled from '@emotion/styled'
+
+import { TEXT_COLOURS } from '@ltht-react/styles'
+import { Condition } from '@ltht-react/types'
+import { codeableConceptDisplaySummary } from '@ltht-react/utils'
+
+const StyledConditionCategory = styled.div<IStyledDescription>`
+  color: ${TEXT_COLOURS.SECONDARY.VALUE};
+  text-align: left;
+  font-size: smaller;
+  padding-top: 0.25rem;
+  text-decoration: ${({ enteredInError }) => (enteredInError ? 'line-through' : 'none')};
+`
+
+const DiagnosisCategory: FC<Props> = ({ condition, enteredInError, ...rest }) => (
+  <StyledConditionCategory enteredInError={enteredInError} {...rest}>
+    {codeableConceptDisplaySummary(condition.severity)}
+  </StyledConditionCategory>
+)
+
+interface Props extends HTMLAttributes<HTMLDivElement> {
+  condition: Condition
+  enteredInError: boolean
+}
+
+interface IStyledDescription {
+  enteredInError: boolean
+}
+
+export default DiagnosisCategory

package/src/atoms/diagnosis-data-source.tsx

@@ -1,45 +1,45 @@
-import { FC, HTMLAttributes } from 'react'
-import styled from '@emotion/styled'
-
-import { TEXT_COLOURS } from '@ltht-react/styles'
-import { Condition } from '@ltht-react/types'
-
-const StyledConditionStatus = styled.div<IStyledDescription>`
-  color: ${TEXT_COLOURS.SECONDARY.VALUE};
-  text-align: left;
-  font-size: smaller;
-  text-decoration: ${({ enteredInError }) => (enteredInError ? 'line-through' : 'none')};
-`
-
-const extractDataSourceDisplayNames = (condition: Condition) => {
-  const dataSourceDisplayNames: string[] = []
-
-  condition?.metadata?.dataSources?.forEach((dataSource, _) => {
-    if (dataSource?.display) {
-      dataSourceDisplayNames.push(dataSource.display)
-    }
-  })
-
-  return dataSourceDisplayNames.join(', ')
-}
-
-const DiagnosisDataSource: FC<Props> = ({ condition, enteredInError, ...rest }) => {
-  const dataSourceDisplayNames = extractDataSourceDisplayNames(condition)
-
-  return (
-    <StyledConditionStatus enteredInError={enteredInError} {...rest}>
-      {dataSourceDisplayNames ? `Source: ${dataSourceDisplayNames}` : `Source: Unknown`}
-    </StyledConditionStatus>
-  )
-}
-
-interface Props extends HTMLAttributes<HTMLDivElement> {
-  condition: Condition
-  enteredInError: boolean
-}
-
-interface IStyledDescription {
-  enteredInError: boolean
-}
-
-export default DiagnosisDataSource
+import { FC, HTMLAttributes } from 'react'
+import styled from '@emotion/styled'
+
+import { TEXT_COLOURS } from '@ltht-react/styles'
+import { Condition } from '@ltht-react/types'
+
+const StyledConditionStatus = styled.div<IStyledDescription>`
+  color: ${TEXT_COLOURS.SECONDARY.VALUE};
+  text-align: left;
+  font-size: smaller;
+  text-decoration: ${({ enteredInError }) => (enteredInError ? 'line-through' : 'none')};
+`
+
+const extractDataSourceDisplayNames = (condition: Condition) => {
+  const dataSourceDisplayNames: string[] = []
+
+  condition?.metadata?.dataSources?.forEach((dataSource, _) => {
+    if (dataSource?.display) {
+      dataSourceDisplayNames.push(dataSource.display)
+    }
+  })
+
+  return dataSourceDisplayNames.join(', ')
+}
+
+const DiagnosisDataSource: FC<Props> = ({ condition, enteredInError, ...rest }) => {
+  const dataSourceDisplayNames = extractDataSourceDisplayNames(condition)
+
+  return (
+    <StyledConditionStatus enteredInError={enteredInError} {...rest}>
+      {dataSourceDisplayNames ? `Source: ${dataSourceDisplayNames}` : `Source: Unknown`}
+    </StyledConditionStatus>
+  )
+}
+
+interface Props extends HTMLAttributes<HTMLDivElement> {
+  condition: Condition
+  enteredInError: boolean
+}
+
+interface IStyledDescription {
+  enteredInError: boolean
+}
+
+export default DiagnosisDataSource

package/src/atoms/diagnosis-onset-estimated.tsx

@@ -1,40 +1,40 @@
-import { FC, HTMLAttributes } from 'react'
-import styled from '@emotion/styled'
-
-import { TEXT_COLOURS } from '@ltht-react/styles'
-import { Condition } from '@ltht-react/types'
-
-import { getBooleanExtension } from '@ltht-react/utils'
-
-const StyledOnsetEstimated = styled.div<IStyledDescription>`
-  color: ${TEXT_COLOURS.INFO};
-  font-size: x-small;
-  white-space: pre-wrap;
-  display: inline-block;
-  text-align: right;
-  text-decoration: ${({ enteredInError }) => (enteredInError ? 'line-through' : 'none')};
-`
-
-const DiagnosisOnsetEstimated: FC<Props> = ({ condition, enteredInError, ...rest }) => {
-  const onsetDateEstimated = getBooleanExtension(
-    condition.extension,
-    'https://fhir.leedsth.nhs.uk/ValueSet/diagnosis-onset-date-estimated-1'
-  )
-
-  return (
-    <StyledOnsetEstimated enteredInError={enteredInError} {...rest}>
-      {onsetDateEstimated ? '(estimated)' : ''}
-    </StyledOnsetEstimated>
-  )
-}
-
-interface Props extends HTMLAttributes<HTMLDivElement> {
-  condition: Condition
-  enteredInError: boolean
-}
-
-interface IStyledDescription {
-  enteredInError: boolean
-}
-
-export default DiagnosisOnsetEstimated
+import { FC, HTMLAttributes } from 'react'
+import styled from '@emotion/styled'
+
+import { TEXT_COLOURS } from '@ltht-react/styles'
+import { Condition } from '@ltht-react/types'
+
+import { getBooleanExtension } from '@ltht-react/utils'
+
+const StyledOnsetEstimated = styled.div<IStyledDescription>`
+  color: ${TEXT_COLOURS.INFO};
+  font-size: x-small;
+  white-space: pre-wrap;
+  display: inline-block;
+  text-align: right;
+  text-decoration: ${({ enteredInError }) => (enteredInError ? 'line-through' : 'none')};
+`
+
+const DiagnosisOnsetEstimated: FC<Props> = ({ condition, enteredInError, ...rest }) => {
+  const onsetDateEstimated = getBooleanExtension(
+    condition.extension,
+    'https://fhir.leedsth.nhs.uk/ValueSet/diagnosis-onset-date-estimated-1'
+  )
+
+  return (
+    <StyledOnsetEstimated enteredInError={enteredInError} {...rest}>
+      {onsetDateEstimated ? '(estimated)' : ''}
+    </StyledOnsetEstimated>
+  )
+}
+
+interface Props extends HTMLAttributes<HTMLDivElement> {
+  condition: Condition
+  enteredInError: boolean
+}
+
+interface IStyledDescription {
+  enteredInError: boolean
+}
+
+export default DiagnosisOnsetEstimated

package/src/atoms/diagnosis-title.tsx

@@ -1,72 +1,72 @@
-import { FC, HTMLAttributes } from 'react'
-import styled from '@emotion/styled'
-import { titleCase, codeableConceptDisplaySummary } from '@ltht-react/utils'
-import parseHtml from 'html-react-parser'
-
-import { TEXT_COLOURS } from '@ltht-react/styles'
-import { Condition } from '@ltht-react/types'
-import { SNIPPET_HOVER_TEXT } from '../constants'
-
-const StyledConditionTitle = styled.div<IStyledDescription>`
-  color: ${TEXT_COLOURS.PRIMARY};
-  text-align: left;
-  text-decoration: ${({ enteredInError }) => (enteredInError ? 'line-through' : 'none')};
-`
-
-const DiagnosisTitle: FC<Props> = ({ condition, enteredInError, systemExclusionsFilter, isRichText = false }) => {
-  const snippetTagText = extractSnippetTagDisplayValue(condition)
-
-  if (snippetTagText) {
-    return renderTitle(snippetTagText, enteredInError, isRichText)
-  }
-
-  const conditionText = extractConditionOrFallbackText(condition, systemExclusionsFilter)
-  const conditionStatusText = extractConditionStatusText(condition)
-  const title = conditionStatusText ? `${conditionText}, ${conditionStatusText}` : conditionText
-
-  return renderTitle(title, enteredInError, isRichText)
-}
-
-const extractConditionOrFallbackText = (condition: Condition, systemExclusionsFilter?: string[]): string => {
-  if (!condition?.code) {
-    return titleCase('Unknown Condition')
-  }
-
-  const diagnosisTitle = codeableConceptDisplaySummary(condition.code, systemExclusionsFilter)
-
-  return titleCase(diagnosisTitle || 'Unknown Condition')
-}
-
-const extractConditionStatusText = (condition: Condition): string => {
-  const statusParts: string[] = []
-
-  if (condition?.clinicalStatus) {
-    statusParts.push(condition?.clinicalStatus)
-  }
-
-  if (condition?.verificationStatus) {
-    statusParts.push(condition.verificationStatus)
-  }
-
-  return titleCase(statusParts.join(', '))
-}
-
-const extractSnippetTagDisplayValue = (condition: Condition) =>
-  condition?.metadata.tag?.find((coding) => coding?.system === SNIPPET_HOVER_TEXT)?.display
-
-const renderTitle = (title: string, enteredInError: boolean, isRichText?: boolean) => (
-  <StyledConditionTitle enteredInError={enteredInError}>{isRichText ? parseHtml(title) : title}</StyledConditionTitle>
-)
-
-interface Props extends HTMLAttributes<HTMLDivElement> {
-  condition: Condition
-  enteredInError: boolean
-  systemExclusionsFilter?: string[]
-  isRichText?: boolean
-}
-
-interface IStyledDescription {
-  enteredInError: boolean
-}
-
-export default DiagnosisTitle
+import { FC, HTMLAttributes } from 'react'
+import styled from '@emotion/styled'
+import { titleCase, codeableConceptDisplaySummary } from '@ltht-react/utils'
+import parseHtml from 'html-react-parser'
+
+import { TEXT_COLOURS } from '@ltht-react/styles'
+import { Condition } from '@ltht-react/types'
+import { SNIPPET_HOVER_TEXT } from '../constants'
+
+const StyledConditionTitle = styled.div<IStyledDescription>`
+  color: ${TEXT_COLOURS.PRIMARY};
+  text-align: left;
+  text-decoration: ${({ enteredInError }) => (enteredInError ? 'line-through' : 'none')};
+`
+
+const DiagnosisTitle: FC<Props> = ({ condition, enteredInError, systemExclusionsFilter, isRichText = false }) => {
+  const snippetTagText = extractSnippetTagDisplayValue(condition)
+
+  if (snippetTagText) {
+    return renderTitle(snippetTagText, enteredInError, isRichText)
+  }
+
+  const conditionText = extractConditionOrFallbackText(condition, systemExclusionsFilter)
+  const conditionStatusText = extractConditionStatusText(condition)
+  const title = conditionStatusText ? `${conditionText}, ${conditionStatusText}` : conditionText
+
+  return renderTitle(title, enteredInError, isRichText)
+}
+
+const extractConditionOrFallbackText = (condition: Condition, systemExclusionsFilter?: string[]): string => {
+  if (!condition?.code) {
+    return titleCase('Unknown Condition')
+  }
+
+  const diagnosisTitle = codeableConceptDisplaySummary(condition.code, systemExclusionsFilter)
+
+  return titleCase(diagnosisTitle || 'Unknown Condition')
+}
+
+const extractConditionStatusText = (condition: Condition): string => {
+  const statusParts: string[] = []
+
+  if (condition?.clinicalStatus) {
+    statusParts.push(condition?.clinicalStatus)
+  }
+
+  if (condition?.verificationStatus) {
+    statusParts.push(condition.verificationStatus)
+  }
+
+  return titleCase(statusParts.join(', '))
+}
+
+const extractSnippetTagDisplayValue = (condition: Condition) =>
+  condition?.metadata.tag?.find((coding) => coding?.system === SNIPPET_HOVER_TEXT)?.display
+
+const renderTitle = (title: string, enteredInError: boolean, isRichText?: boolean) => (
+  <StyledConditionTitle enteredInError={enteredInError}>{isRichText ? parseHtml(title) : title}</StyledConditionTitle>
+)
+
+interface Props extends HTMLAttributes<HTMLDivElement> {
+  condition: Condition
+  enteredInError: boolean
+  systemExclusionsFilter?: string[]
+  isRichText?: boolean
+}
+
+interface IStyledDescription {
+  enteredInError: boolean
+}
+
+export default DiagnosisTitle

package/src/constants.ts

@@ -1,5 +1,5 @@
-const SNIPPET_HOVER_TEXT = 'https://leedsth.nhs.uk/cds/snippet-hover-text'
-const EXTENSION_TEMPLATE_DISPLAY_NAME = 'https://leedsth.nhs.uk/cds/extension-template-display-name'
-const EXTENSION_TEMPLATE_VERSION = 'https://leedsth.nhs.uk/cds/extension-template-version'
-
-export { EXTENSION_TEMPLATE_DISPLAY_NAME, EXTENSION_TEMPLATE_VERSION, SNIPPET_HOVER_TEXT }
+const SNIPPET_HOVER_TEXT = 'https://leedsth.nhs.uk/cds/snippet-hover-text'
+const EXTENSION_TEMPLATE_DISPLAY_NAME = 'https://leedsth.nhs.uk/cds/extension-template-display-name'
+const EXTENSION_TEMPLATE_VERSION = 'https://leedsth.nhs.uk/cds/extension-template-version'
+
+export { EXTENSION_TEMPLATE_DISPLAY_NAME, EXTENSION_TEMPLATE_VERSION, SNIPPET_HOVER_TEXT }

package/src/index.tsx

@@ -1,3 +1,3 @@
-import DiagnosisSummary from './organisms/diagnosis-summary'
-
-export default DiagnosisSummary
+import DiagnosisSummary from './organisms/diagnosis-summary'
+
+export default DiagnosisSummary

package/src/molecules/diagnosis-redacted.tsx

@@ -1,31 +1,31 @@
-import { FC } from 'react'
-import styled from '@emotion/styled'
-
-import { Condition } from '@ltht-react/types'
-import { DateSummary, RedactedDescription } from '@ltht-react/type-summary'
-
-const StyledRedactedDescription = styled.div`
-  flex-grow: 1;
-  text-align: left;
-`
-
-const StyledDateSummary = styled.div`
-  text-align: right;
-`
-
-const DiagnosisRedacted: FC<Props> = ({ condition }) => (
-  <>
-    <StyledRedactedDescription>
-      <RedactedDescription />
-    </StyledRedactedDescription>
-    <StyledDateSummary>
-      <DateSummary datetime={condition?.onset?.dateTime} />
-    </StyledDateSummary>
-  </>
-)
-
-interface Props {
-  condition?: Condition | null
-}
-
-export default DiagnosisRedacted
+import { FC } from 'react'
+import styled from '@emotion/styled'
+
+import { Condition } from '@ltht-react/types'
+import { DateSummary, RedactedDescription } from '@ltht-react/type-summary'
+
+const StyledRedactedDescription = styled.div`
+  flex-grow: 1;
+  text-align: left;
+`
+
+const StyledDateSummary = styled.div`
+  text-align: right;
+`
+
+const DiagnosisRedacted: FC<Props> = ({ condition }) => (
+  <>
+    <StyledRedactedDescription>
+      <RedactedDescription />
+    </StyledRedactedDescription>
+    <StyledDateSummary>
+      <DateSummary datetime={condition?.onset?.dateTime} />
+    </StyledDateSummary>
+  </>
+)
+
+interface Props {
+  condition?: Condition | null
+}
+
+export default DiagnosisRedacted

package/src/organisms/diagnosis-summary.tsx

@@ -1,252 +1,252 @@
-import { cloneElement, FC, HTMLAttributes, ReactElement } from 'react'
-import styled from '@emotion/styled'
-
-import { Condition, ConditionVerificationStatus } from '@ltht-react/types'
-import { DateSummary } from '@ltht-react/type-summary'
-import Icon from '@ltht-react/icon'
-import { Button, ButtonProps } from '@ltht-react/button'
-
-import { BTN_COLOURS, SMALL_SCREEN_MAXIMUM_MEDIA_QUERY, TABLET_MINIMUM_MEDIA_QUERY } from '@ltht-react/styles'
-import Title from '../atoms/diagnosis-title'
-import OnsetDateEstimated from '../atoms/diagnosis-onset-estimated'
-import Redacted from '../molecules/diagnosis-redacted'
-import DiagnosisDataSource from '../atoms/diagnosis-data-source'
-
-const StyledTitle = styled.div`
-  display: flex;
-`
-
-const StyledSummary = styled.div`
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-`
-
-const StyledDescription = styled.div`
-  flex-grow: 1;
-`
-
-const StyledTitleAndDateContainer = styled.div`
-  display: flex;
-  flex-grow: 1;
-  flex-direction: row;
-  gap: 5px;
-
-  ${SMALL_SCREEN_MAXIMUM_MEDIA_QUERY} {
-    flex-flow: column nowrap;
-    align-items: flex-start;
-    div {
-      text-align: left;
-    }
-  }
-`
-
-const StyledButtonAndTagContainer = styled.div`
-  display: flex;
-  flex-grow: 1;
-  flex-direction: row;
-  gap: 5px;
-  margin-top: 5px;
-
-  ${SMALL_SCREEN_MAXIMUM_MEDIA_QUERY} {
-    flex-direction: row;
-    justify-content: space-between;
-  }
-`
-
-const StyledResponsiveButtonContainer = styled.div`
-  display: flex;
-  margin-right: auto;
-  flex-flow: row wrap;
-  gap: 5px;
-  height: fit-content;
-  flex-grow: 1;
-
-  & > * {
-    height: 1.2rem;
-    padding: 0 5px;
-
-    ${TABLET_MINIMUM_MEDIA_QUERY} {
-      font-size: 0.8rem !important;
-    }
-  }
-
-  ${SMALL_SCREEN_MAXIMUM_MEDIA_QUERY} {
-    margin: 0;
-    flex-direction: column;
-
-    span {
-      width: 100%;
-      max-width: 10rem;
-    }
-  }
-`
-
-const StyledResponsiveTagContainer = styled.div`
-  display: flex;
-  margin-left: auto;
-  flex-flow: row wrap;
-  gap: 5px;
-  height: fit-content;
-  justify-content: flex-end;
-  flex-grow: 1;
-
-  & > * {
-    display: flex;
-    align-items: center;
-    height: 1.2rem;
-    margin: 0 !important;
-    font-size: 0.8rem !important;
-    padding: 0 10px;
-    justify-content: center;
-
-    ${TABLET_MINIMUM_MEDIA_QUERY} {
-      font-size: 0.8rem !important;
-    }
-  }
-
-  ${SMALL_SCREEN_MAXIMUM_MEDIA_QUERY} {
-    flex-direction: column;
-    margin: 0;
-
-    & > * {
-      margin: 0;
-      width: 100%;
-      max-width: 10rem;
-      padding: 0 10px;
-    }
-  }
-`
-
-const StyledButton = styled(Button)`
-  padding: 0 5px;
-  width: fit-content;
-
-  ${SMALL_SCREEN_MAXIMUM_MEDIA_QUERY} {
-    width: 100%;
-    max-width: 10rem;
-  }
-`
-const StyledDate = styled.div`
-  display: flex;
-  flex-flow: column nowrap;
-  text-align: right;
-  min-width: 6rem;
-  justify-content: start;
-`
-const IconButtonWrapper = styled(Button)`
-  -webkit-box-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  justify-content: center;
-  margin-right: 0.5rem;
-  display: inline-block !important;
-  margin-left: 0.5rem;
-  width: auto;
-  padding: 0 5px;
-`
-const IconWrapper = styled.div`
-  margin-left: 0.5rem;
-  display: inline-block;
-`
-
-const DiagnosisSummary: FC<Props> = ({
-  condition,
-  extendedTemplateDisplayName,
-  extensionTemplateDisplayName,
-  extensionClickHandler,
-  isReadOnly = false,
-  dateOnlyView = false,
-  canExtendDiagnosis = false,
-  displaySource = false,
-  controls = [],
-  tags = [],
-  systemExclusionsFilter = [],
-  isRichText = false,
-  ...rest
-}) => {
-  if (condition.metadata.isRedacted) {
-    return (
-      <StyledSummary {...rest}>
-        <Redacted condition={condition} />
-      </StyledSummary>
-    )
-  }
-
-  const enteredInError = condition.verificationStatus === ConditionVerificationStatus.EnteredInError
-
-  return (
-    <StyledSummary {...rest}>
-      <StyledTitleAndDateContainer>
-        <StyledDescription>
-          <StyledTitle>
-            <Title
-              enteredInError={enteredInError}
-              condition={condition}
-              systemExclusionsFilter={systemExclusionsFilter}
-              isRichText={isRichText}
-            />
-            {extensionTemplateDisplayName && !isReadOnly && canExtendDiagnosis && !enteredInError && (
-              <IconButtonWrapper
-                onClick={extensionClickHandler}
-                type="button"
-                styling={{ buttonStyle: 'clear' }}
-                value=""
-                icon={<Icon type="folder-plus" size="medium" />}
-                iconPlacement="center"
-                iconColour={BTN_COLOURS.PRIMARY.VALUE}
-                title={`This diagnosis can be extended further using form '${extensionTemplateDisplayName}' by clicking here`}
-              />
-            )}
-            {extendedTemplateDisplayName && (
-              <IconWrapper>
-                <Icon
-                  type="comment"
-                  size="medium"
-                  title={`This diagnosis has been extended beyond standard diagnosis with form '${extendedTemplateDisplayName}'.
-           To view these extra details, click into the full diagnosis detail or edit the existing form.`}
-                />
-              </IconWrapper>
-            )}
-          </StyledTitle>
-          {displaySource && <DiagnosisDataSource condition={condition} enteredInError={enteredInError} />}
-        </StyledDescription>
-        <StyledDate>
-          <DateSummary enteredInError={enteredInError} datetime={condition?.assertedDate} dateOnlyView={dateOnlyView} />
-          <OnsetDateEstimated enteredInError={enteredInError} condition={condition} />
-        </StyledDate>
-      </StyledTitleAndDateContainer>
-
-      {!isReadOnly && (controls.length > 0 || tags.length > 0) && (
-        <StyledButtonAndTagContainer>
-          <StyledResponsiveButtonContainer>
-            {controls.map((props, index) => (
-              <StyledButton key={index} {...props} />
-            ))}
-          </StyledResponsiveButtonContainer>
-
-          <StyledResponsiveTagContainer>
-            {tags?.map((tag, index) => (tag.key ? tag : cloneElement(tag, { key: index })))}
-          </StyledResponsiveTagContainer>
-        </StyledButtonAndTagContainer>
-      )}
-    </StyledSummary>
-  )
-}
-
-interface Props extends HTMLAttributes<HTMLDivElement> {
-  condition: Condition
-  extendedTemplateDisplayName?: string
-  extensionTemplateDisplayName?: string
-  isReadOnly?: boolean
-  dateOnlyView?: boolean
-  displaySource?: boolean
-  controls?: ButtonProps[]
-  tags?: ReactElement[]
-  canExtendDiagnosis?: boolean
-  extensionClickHandler?(): void
-  systemExclusionsFilter?: string[]
-  isRichText?: boolean
-}
-
-export default DiagnosisSummary
+import { cloneElement, FC, HTMLAttributes, ReactElement } from 'react'
+import styled from '@emotion/styled'
+
+import { Condition, ConditionVerificationStatus } from '@ltht-react/types'
+import { DateSummary } from '@ltht-react/type-summary'
+import Icon from '@ltht-react/icon'
+import { Button, ButtonProps } from '@ltht-react/button'
+
+import { BTN_COLOURS, SMALL_SCREEN_MAXIMUM_MEDIA_QUERY, TABLET_MINIMUM_MEDIA_QUERY } from '@ltht-react/styles'
+import Title from '../atoms/diagnosis-title'
+import OnsetDateEstimated from '../atoms/diagnosis-onset-estimated'
+import Redacted from '../molecules/diagnosis-redacted'
+import DiagnosisDataSource from '../atoms/diagnosis-data-source'
+
+const StyledTitle = styled.div`
+  display: flex;
+`
+
+const StyledSummary = styled.div`
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+`
+
+const StyledDescription = styled.div`
+  flex-grow: 1;
+`
+
+const StyledTitleAndDateContainer = styled.div`
+  display: flex;
+  flex-grow: 1;
+  flex-direction: row;
+  gap: 5px;
+
+  ${SMALL_SCREEN_MAXIMUM_MEDIA_QUERY} {
+    flex-flow: column nowrap;
+    align-items: flex-start;
+    div {
+      text-align: left;
+    }
+  }
+`
+
+const StyledButtonAndTagContainer = styled.div`
+  display: flex;
+  flex-grow: 1;
+  flex-direction: row;
+  gap: 5px;
+  margin-top: 5px;
+
+  ${SMALL_SCREEN_MAXIMUM_MEDIA_QUERY} {
+    flex-direction: row;
+    justify-content: space-between;
+  }
+`
+
+const StyledResponsiveButtonContainer = styled.div`
+  display: flex;
+  margin-right: auto;
+  flex-flow: row wrap;
+  gap: 5px;
+  height: fit-content;
+  flex-grow: 1;
+
+  & > * {
+    height: 1.2rem;
+    padding: 0 5px;
+
+    ${TABLET_MINIMUM_MEDIA_QUERY} {
+      font-size: 0.8rem !important;
+    }
+  }
+
+  ${SMALL_SCREEN_MAXIMUM_MEDIA_QUERY} {
+    margin: 0;
+    flex-direction: column;
+
+    span {
+      width: 100%;
+      max-width: 10rem;
+    }
+  }
+`
+
+const StyledResponsiveTagContainer = styled.div`
+  display: flex;
+  margin-left: auto;
+  flex-flow: row wrap;
+  gap: 5px;
+  height: fit-content;
+  justify-content: flex-end;
+  flex-grow: 1;
+
+  & > * {
+    display: flex;
+    align-items: center;
+    height: 1.2rem;
+    margin: 0 !important;
+    font-size: 0.8rem !important;
+    padding: 0 10px;
+    justify-content: center;
+
+    ${TABLET_MINIMUM_MEDIA_QUERY} {
+      font-size: 0.8rem !important;
+    }
+  }
+
+  ${SMALL_SCREEN_MAXIMUM_MEDIA_QUERY} {
+    flex-direction: column;
+    margin: 0;
+
+    & > * {
+      margin: 0;
+      width: 100%;
+      max-width: 10rem;
+      padding: 0 10px;
+    }
+  }
+`
+
+const StyledButton = styled(Button)`
+  padding: 0 5px;
+  width: fit-content;
+
+  ${SMALL_SCREEN_MAXIMUM_MEDIA_QUERY} {
+    width: 100%;
+    max-width: 10rem;
+  }
+`
+const StyledDate = styled.div`
+  display: flex;
+  flex-flow: column nowrap;
+  text-align: right;
+  min-width: 6rem;
+  justify-content: start;
+`
+const IconButtonWrapper = styled(Button)`
+  -webkit-box-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  justify-content: center;
+  margin-right: 0.5rem;
+  display: inline-block !important;
+  margin-left: 0.5rem;
+  width: auto;
+  padding: 0 5px;
+`
+const IconWrapper = styled.div`
+  margin-left: 0.5rem;
+  display: inline-block;
+`
+
+const DiagnosisSummary: FC<Props> = ({
+  condition,
+  extendedTemplateDisplayName,
+  extensionTemplateDisplayName,
+  extensionClickHandler,
+  isReadOnly = false,
+  dateOnlyView = false,
+  canExtendDiagnosis = false,
+  displaySource = false,
+  controls = [],
+  tags = [],
+  systemExclusionsFilter = [],
+  isRichText = false,
+  ...rest
+}) => {
+  if (condition.metadata.isRedacted) {
+    return (
+      <StyledSummary {...rest}>
+        <Redacted condition={condition} />
+      </StyledSummary>
+    )
+  }
+
+  const enteredInError = condition.verificationStatus === ConditionVerificationStatus.EnteredInError
+
+  return (
+    <StyledSummary {...rest}>
+      <StyledTitleAndDateContainer>
+        <StyledDescription>
+          <StyledTitle>
+            <Title
+              enteredInError={enteredInError}
+              condition={condition}
+              systemExclusionsFilter={systemExclusionsFilter}
+              isRichText={isRichText}
+            />
+            {extensionTemplateDisplayName && !isReadOnly && canExtendDiagnosis && !enteredInError && (
+              <IconButtonWrapper
+                onClick={extensionClickHandler}
+                type="button"
+                styling={{ buttonStyle: 'clear' }}
+                value=""
+                icon={<Icon type="folder-plus" size="medium" />}
+                iconPlacement="center"
+                iconColour={BTN_COLOURS.PRIMARY.VALUE}
+                title={`This diagnosis can be extended further using form '${extensionTemplateDisplayName}' by clicking here`}
+              />
+            )}
+            {extendedTemplateDisplayName && (
+              <IconWrapper>
+                <Icon
+                  type="comment"
+                  size="medium"
+                  title={`This diagnosis has been extended beyond standard diagnosis with form '${extendedTemplateDisplayName}'.
+           To view these extra details, click into the full diagnosis detail or edit the existing form.`}
+                />
+              </IconWrapper>
+            )}
+          </StyledTitle>
+          {displaySource && <DiagnosisDataSource condition={condition} enteredInError={enteredInError} />}
+        </StyledDescription>
+        <StyledDate>
+          <DateSummary enteredInError={enteredInError} datetime={condition?.assertedDate} dateOnlyView={dateOnlyView} />
+          <OnsetDateEstimated enteredInError={enteredInError} condition={condition} />
+        </StyledDate>
+      </StyledTitleAndDateContainer>
+
+      {!isReadOnly && (controls.length > 0 || tags.length > 0) && (
+        <StyledButtonAndTagContainer>
+          <StyledResponsiveButtonContainer>
+            {controls.map((props, index) => (
+              <StyledButton key={index} {...props} />
+            ))}
+          </StyledResponsiveButtonContainer>
+
+          <StyledResponsiveTagContainer>
+            {tags?.map((tag, index) => (tag.key ? tag : cloneElement(tag, { key: index })))}
+          </StyledResponsiveTagContainer>
+        </StyledButtonAndTagContainer>
+      )}
+    </StyledSummary>
+  )
+}
+
+interface Props extends HTMLAttributes<HTMLDivElement> {
+  condition: Condition
+  extendedTemplateDisplayName?: string
+  extensionTemplateDisplayName?: string
+  isReadOnly?: boolean
+  dateOnlyView?: boolean
+  displaySource?: boolean
+  controls?: ButtonProps[]
+  tags?: ReactElement[]
+  canExtendDiagnosis?: boolean
+  extensionClickHandler?(): void
+  systemExclusionsFilter?: string[]
+  isRichText?: boolean
+}
+
+export default DiagnosisSummary