@ltht-react/timeline 2.0.192 → 2.0.194

package/README.md

@@ -1,19 +1,19 @@
-# Timeline
-
-### Import
-
-```js
-import Timeline from '@ltht-react/timeline'
-```
-
-### Usage
-
-```jsx
-<Timeline auditTrail={auditTrail} />
-```
-
-### Properties
-
-| Prop         | Required | Default | Type                  | Description        |
-| :----------- | :------- | :------ | :-------------------- | :----------------- |
-| `auditTrail` | Yes      |         | `Maybe<AuditEvent>[]` | Timeline of events |
+# Timeline
+
+### Import
+
+```js
+import Timeline from '@ltht-react/timeline'
+```
+
+### Usage
+
+```jsx
+<Timeline auditTrail={auditTrail} />
+```
+
+### Properties
+
+| Prop         | Required | Default | Type                  | Description        |
+| :----------- | :------- | :------ | :-------------------- | :----------------- |
+| `auditTrail` | Yes      |         | `Maybe<AuditEvent>[]` | Timeline of events |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ltht-react/timeline",
-  "version": "2.0.192",
+  "version": "2.0.194",
   "description": "> TODO: description",
   "author": "Jonny Dyson",
   "homepage": "",
@@ -24,16 +24,16 @@
   },
   "dependencies": {
     "@emotion/styled": "^11.0.0",
-    "@ltht-react/banner": "^2.0.192",
-    "@ltht-react/button": "^2.0.192",
-    "@ltht-react/hooks": "^2.0.192",
-    "@ltht-react/icon": "^2.0.192",
-    "@ltht-react/select": "^2.0.192",
-    "@ltht-react/styles": "^2.0.192",
-    "@ltht-react/types": "^2.0.192",
-    "@ltht-react/utils": "^2.0.192",
+    "@ltht-react/banner": "^2.0.194",
+    "@ltht-react/button": "^2.0.194",
+    "@ltht-react/hooks": "^2.0.194",
+    "@ltht-react/icon": "^2.0.194",
+    "@ltht-react/select": "^2.0.194",
+    "@ltht-react/styles": "^2.0.194",
+    "@ltht-react/types": "^2.0.194",
+    "@ltht-react/utils": "^2.0.194",
     "html-react-parser": "^5.0.6",
     "react": "^18.2.0"
   },
-  "gitHead": "d97c241ba79c5e28edb4dec124e156cda6e9af66"
+  "gitHead": "2eb4b88fa2bc19baa1be9433dbe29fe1a947dc62"
 }

package/src/atoms/time-element.tsx

@@ -1,52 +1,52 @@
-import { FC } from 'react'
-import Icon from '@ltht-react/icon'
-import styled from '@emotion/styled'
-import { formatDateTime, formatTime } from '@ltht-react/utils'
-import { Button } from '@ltht-react/button'
-
-const StyledButton = styled(Button)`
-  width: auto;
-`
-
-const StyledTimelineTime = styled.div<OrientationProps>`
-  margin-top: -0.65rem;
-  display: flex;
-
-  ${(props) => (props.orientation === 'left' ? `justify-content: right` : `justify-content: left`)}
-`
-
-const TimeElement: FC<Props> = ({ date, orientation, pointInTimeClicked, ...rest }) => {
-  const time = formatTime(date)
-
-  if (!orientation || !pointInTimeClicked) {
-    return <>{time}</>
-  }
-
-  const buttonTitle = `Show the dashboard as it was at ${formatDateTime(date)}`
-
-  return (
-    <StyledTimelineTime orientation={orientation} {...rest}>
-      <StyledButton
-        title={buttonTitle}
-        styling={{ buttonStyle: 'clear' }}
-        iconColour="black"
-        icon={<Icon type="clock-rotate-left" size="medium" color="link-blue" />}
-        onClick={() => pointInTimeClicked(date)}
-        value={time}
-      />
-    </StyledTimelineTime>
-  )
-}
-
-export type Orientation = 'left' | 'right'
-
-interface OrientationProps {
-  orientation?: Orientation
-}
-
-interface Props extends OrientationProps {
-  date: Date
-  pointInTimeClicked?: (date: Date) => void
-}
-
-export default TimeElement
+import { FC } from 'react'
+import Icon from '@ltht-react/icon'
+import styled from '@emotion/styled'
+import { formatDateTime, formatTime } from '@ltht-react/utils'
+import { Button } from '@ltht-react/button'
+
+const StyledButton = styled(Button)`
+  width: auto;
+`
+
+const StyledTimelineTime = styled.div<OrientationProps>`
+  margin-top: -0.65rem;
+  display: flex;
+
+  ${(props) => (props.orientation === 'left' ? `justify-content: right` : `justify-content: left`)}
+`
+
+const TimeElement: FC<Props> = ({ date, orientation, pointInTimeClicked, ...rest }) => {
+  const time = formatTime(date)
+
+  if (!orientation || !pointInTimeClicked) {
+    return <>{time}</>
+  }
+
+  const buttonTitle = `Show the dashboard as it was at ${formatDateTime(date)}`
+
+  return (
+    <StyledTimelineTime orientation={orientation} {...rest}>
+      <StyledButton
+        title={buttonTitle}
+        styling={{ buttonStyle: 'clear' }}
+        iconColour="black"
+        icon={<Icon type="clock-rotate-left" size="medium" color="link-blue" />}
+        onClick={() => pointInTimeClicked(date)}
+        value={time}
+      />
+    </StyledTimelineTime>
+  )
+}
+
+export type Orientation = 'left' | 'right'
+
+interface OrientationProps {
+  orientation?: Orientation
+}
+
+interface Props extends OrientationProps {
+  date: Date
+  pointInTimeClicked?: (date: Date) => void
+}
+
+export default TimeElement

package/src/atoms/timeline-author.tsx

@@ -1,88 +1,88 @@
-import { FC, HTMLAttributes } from 'react'
-import Icon from '@ltht-react/icon'
-import styled from '@emotion/styled'
-
-import {
-  AuditEvent,
-  DocumentReference,
-  Maybe,
-  QuestionnaireResponse,
-  TimelineDomainResourceType,
-} from '@ltht-react/types'
-import PRIMARY_AUTHOR from '../constants'
-
-const StyledTimelineItemLeft = styled.div`
-  flex-grow: 1;
-`
-
-const TimelineAuthor: FC<Props> = ({ domainResource, domainResourceType, ...rest }) => {
-  if (!domainResource) return <></>
-
-  switch (domainResourceType) {
-    case TimelineDomainResourceType.QuestionnaireResponse: {
-      const qr = domainResource as QuestionnaireResponse
-      if (!qr?.author) {
-        return <></>
-      }
-      return (
-        <StyledTimelineItemLeft {...rest}>
-          <Icon type="user" size="medium" color="grey" /> by {qr?.author?.display}
-        </StyledTimelineItemLeft>
-      )
-    }
-    case TimelineDomainResourceType.DocumentReference: {
-      const docRef = domainResource as DocumentReference
-      const authorList: string[] = []
-
-      if (docRef?.author == null) {
-        return <></>
-      }
-
-      docRef.author.forEach((auth) => {
-        if (auth) {
-          authorList.push(auth.specialty ? `${auth.fullName} (${auth.specialty})` : `${auth.fullName}`)
-        }
-      })
-
-      if (authorList.length === 0) {
-        return <></>
-      }
-
-      return (
-        <StyledTimelineItemLeft {...rest}>
-          <Icon type="user" size="medium" color="grey" /> by {authorList.join(', ')}
-        </StyledTimelineItemLeft>
-      )
-    }
-    case TimelineDomainResourceType.AuditEvent: {
-      const audit = domainResource as AuditEvent
-      let authorName = ''
-
-      audit.agent.forEach((agent) => {
-        agent?.role?.forEach((role) => {
-          const isPrimaryAuthor = !!role?.coding?.find((x) => x?.code === PRIMARY_AUTHOR)
-          !authorName && isPrimaryAuthor && (authorName = agent.who?.display || '')
-        })
-      })
-
-      if (!authorName) {
-        return <></>
-      }
-
-      return (
-        <StyledTimelineItemLeft {...rest}>
-          <Icon type="user" size="medium" color="grey" /> by {authorName}
-        </StyledTimelineItemLeft>
-      )
-    }
-  }
-
-  return <></>
-}
-
-interface Props extends HTMLAttributes<HTMLDivElement> {
-  domainResource?: Maybe<AuditEvent | QuestionnaireResponse | DocumentReference>
-  domainResourceType: TimelineDomainResourceType
-}
-
-export default TimelineAuthor
+import { FC, HTMLAttributes } from 'react'
+import Icon from '@ltht-react/icon'
+import styled from '@emotion/styled'
+
+import {
+  AuditEvent,
+  DocumentReference,
+  Maybe,
+  QuestionnaireResponse,
+  TimelineDomainResourceType,
+} from '@ltht-react/types'
+import PRIMARY_AUTHOR from '../constants'
+
+const StyledTimelineItemLeft = styled.div`
+  flex-grow: 1;
+`
+
+const TimelineAuthor: FC<Props> = ({ domainResource, domainResourceType, ...rest }) => {
+  if (!domainResource) return <></>
+
+  switch (domainResourceType) {
+    case TimelineDomainResourceType.QuestionnaireResponse: {
+      const qr = domainResource as QuestionnaireResponse
+      if (!qr?.author) {
+        return <></>
+      }
+      return (
+        <StyledTimelineItemLeft {...rest}>
+          <Icon type="user" size="medium" color="grey" /> by {qr?.author?.display}
+        </StyledTimelineItemLeft>
+      )
+    }
+    case TimelineDomainResourceType.DocumentReference: {
+      const docRef = domainResource as DocumentReference
+      const authorList: string[] = []
+
+      if (docRef?.author == null) {
+        return <></>
+      }
+
+      docRef.author.forEach((auth) => {
+        if (auth) {
+          authorList.push(auth.specialty ? `${auth.fullName} (${auth.specialty})` : `${auth.fullName}`)
+        }
+      })
+
+      if (authorList.length === 0) {
+        return <></>
+      }
+
+      return (
+        <StyledTimelineItemLeft {...rest}>
+          <Icon type="user" size="medium" color="grey" /> by {authorList.join(', ')}
+        </StyledTimelineItemLeft>
+      )
+    }
+    case TimelineDomainResourceType.AuditEvent: {
+      const audit = domainResource as AuditEvent
+      let authorName = ''
+
+      audit.agent.forEach((agent) => {
+        agent?.role?.forEach((role) => {
+          const isPrimaryAuthor = !!role?.coding?.find((x) => x?.code === PRIMARY_AUTHOR)
+          !authorName && isPrimaryAuthor && (authorName = agent.who?.display || '')
+        })
+      })
+
+      if (!authorName) {
+        return <></>
+      }
+
+      return (
+        <StyledTimelineItemLeft {...rest}>
+          <Icon type="user" size="medium" color="grey" /> by {authorName}
+        </StyledTimelineItemLeft>
+      )
+    }
+  }
+
+  return <></>
+}
+
+interface Props extends HTMLAttributes<HTMLDivElement> {
+  domainResource?: Maybe<AuditEvent | QuestionnaireResponse | DocumentReference>
+  domainResourceType: TimelineDomainResourceType
+}
+
+export default TimelineAuthor

package/src/atoms/timeline-button.tsx

@@ -1,44 +1,44 @@
-import { ButtonBanner } from '@ltht-react/banner'
-import Icon from '@ltht-react/icon'
-import { FC, HTMLAttributes } from 'react'
-import { ITimelineItem } from '../molecules/timeline-item'
-
-const TimelineButton: FC<Props> = ({ timelineItem, className }) => {
-  const { itemClickHandler, buttonState, buttonText } = timelineItem
-
-  switch (buttonState) {
-    case 'no-button':
-      return <></>
-    case 'permission-denied-button':
-      return (
-        <ButtonBanner className={className} type="warning" disabled>
-          {buttonText ?? 'Insufficient privileges to view this item'}
-        </ButtonBanner>
-      )
-    case 'selectable-button':
-      return (
-        <ButtonBanner className={className} type="info" onClick={itemClickHandler}>
-          {buttonText ?? ''}
-        </ButtonBanner>
-      )
-    case 'selected-button':
-      return (
-        <ButtonBanner
-          className={className}
-          type="highlight"
-          icon={<Icon type="info-circle" color="info-blue" size="medium" />}
-          onClick={itemClickHandler}
-        >
-          {buttonText ?? ''}
-        </ButtonBanner>
-      )
-    default:
-      throw new Error('ButtonState must be a valid value.')
-  }
-}
-
-interface Props extends HTMLAttributes<HTMLDivElement> {
-  timelineItem: ITimelineItem
-}
-
-export default TimelineButton
+import { ButtonBanner } from '@ltht-react/banner'
+import Icon from '@ltht-react/icon'
+import { FC, HTMLAttributes } from 'react'
+import { ITimelineItem } from '../molecules/timeline-item'
+
+const TimelineButton: FC<Props> = ({ timelineItem, className }) => {
+  const { itemClickHandler, buttonState, buttonText } = timelineItem
+
+  switch (buttonState) {
+    case 'no-button':
+      return <></>
+    case 'permission-denied-button':
+      return (
+        <ButtonBanner className={className} type="warning" disabled>
+          {buttonText ?? 'Insufficient privileges to view this item'}
+        </ButtonBanner>
+      )
+    case 'selectable-button':
+      return (
+        <ButtonBanner className={className} type="info" onClick={itemClickHandler}>
+          {buttonText ?? ''}
+        </ButtonBanner>
+      )
+    case 'selected-button':
+      return (
+        <ButtonBanner
+          className={className}
+          type="highlight"
+          icon={<Icon type="info-circle" color="info-blue" size="medium" />}
+          onClick={itemClickHandler}
+        >
+          {buttonText ?? ''}
+        </ButtonBanner>
+      )
+    default:
+      throw new Error('ButtonState must be a valid value.')
+  }
+}
+
+interface Props extends HTMLAttributes<HTMLDivElement> {
+  timelineItem: ITimelineItem
+}
+
+export default TimelineButton

package/src/atoms/timeline-description.tsx

@@ -1,52 +1,52 @@
-import { FC, HTMLAttributes } from 'react'
-import {
-  AuditEvent,
-  DocumentReference,
-  Maybe,
-  QuestionnaireResponse,
-  TimelineDomainResourceType,
-} from '@ltht-react/types'
-import parseHtml from 'html-react-parser'
-import styled from '@emotion/styled'
-
-const StyledDescription = styled.div`
-  p {
-    margin: 0 0.2rem;
-    display: inline;
-  }
-`
-
-const TimelineDescription: FC<Props> = ({ domainResource, domainResourceType, ...rest }) => {
-  if (!domainResource) return <></>
-
-  switch (domainResourceType) {
-    case TimelineDomainResourceType.QuestionnaireResponse: {
-      const qr = domainResource as QuestionnaireResponse
-      if (!qr.questionnaire?.description) {
-        return <></>
-      }
-      return <StyledDescription {...rest}>{parseHtml(qr.questionnaire?.description)}</StyledDescription>
-    }
-    case TimelineDomainResourceType.DocumentReference: {
-      const docRef = domainResource as DocumentReference
-      return docRef.description ? <>{docRef.description}</> : <></>
-    }
-    case TimelineDomainResourceType.AuditEvent: {
-      const audit = domainResource as AuditEvent
-      if (!audit.outcomeDesc) {
-        return <></>
-      }
-
-      return <StyledDescription {...rest}>{parseHtml(audit.outcomeDesc)}</StyledDescription>
-    }
-    default:
-      return <></>
-  }
-}
-
-interface Props extends HTMLAttributes<HTMLDivElement> {
-  domainResource?: Maybe<AuditEvent | QuestionnaireResponse | DocumentReference>
-  domainResourceType: TimelineDomainResourceType
-}
-
-export default TimelineDescription
+import { FC, HTMLAttributes } from 'react'
+import {
+  AuditEvent,
+  DocumentReference,
+  Maybe,
+  QuestionnaireResponse,
+  TimelineDomainResourceType,
+} from '@ltht-react/types'
+import parseHtml from 'html-react-parser'
+import styled from '@emotion/styled'
+
+const StyledDescription = styled.div`
+  p {
+    margin: 0 0.2rem;
+    display: inline;
+  }
+`
+
+const TimelineDescription: FC<Props> = ({ domainResource, domainResourceType, ...rest }) => {
+  if (!domainResource) return <></>
+
+  switch (domainResourceType) {
+    case TimelineDomainResourceType.QuestionnaireResponse: {
+      const qr = domainResource as QuestionnaireResponse
+      if (!qr.questionnaire?.description) {
+        return <></>
+      }
+      return <StyledDescription {...rest}>{parseHtml(qr.questionnaire?.description)}</StyledDescription>
+    }
+    case TimelineDomainResourceType.DocumentReference: {
+      const docRef = domainResource as DocumentReference
+      return docRef.description ? <>{docRef.description}</> : <></>
+    }
+    case TimelineDomainResourceType.AuditEvent: {
+      const audit = domainResource as AuditEvent
+      if (!audit.outcomeDesc) {
+        return <></>
+      }
+
+      return <StyledDescription {...rest}>{parseHtml(audit.outcomeDesc)}</StyledDescription>
+    }
+    default:
+      return <></>
+  }
+}
+
+interface Props extends HTMLAttributes<HTMLDivElement> {
+  domainResource?: Maybe<AuditEvent | QuestionnaireResponse | DocumentReference>
+  domainResourceType: TimelineDomainResourceType
+}
+
+export default TimelineDescription