@ltht-react/timeline 1.0.84 → 1.0.85

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 1.0.85 (2022-08-02)
+
+**Note:** Version bump only for package @ltht-react/timeline
+
+
+
+
+
 ## 1.0.84 (2022-07-18)
 
 **Note:** Version bump only for package @ltht-react/timeline

package/lib/atoms/timeline-author.d.ts

@@ -1,7 +1,7 @@
-import { FC, HTMLAttributes } from 'react';
-import { AuditEvent, Maybe } from '@ltht-react/types';
-declare const TimelineAuthor: FC<Props>;
-interface Props extends HTMLAttributes<HTMLDivElement> {
-    audit: Maybe<AuditEvent>;
-}
-export default TimelineAuthor;
+import { FC, HTMLAttributes } from 'react';
+import { AuditEvent, Maybe } from '@ltht-react/types';
+declare const TimelineAuthor: FC<Props>;
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    audit: Maybe<AuditEvent>;
+}
+export default TimelineAuthor;

package/lib/atoms/timeline-author.js

@@ -1,35 +1,35 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var icon_1 = require("@ltht-react/icon");
-var styled_1 = __importDefault(require("@emotion/styled"));
-var StyledTimelineItemLeft = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  flex-grow: 1;\n"], ["\n  flex-grow: 1;\n"])));
-var PRIMARY_AUTHOR = 'PRIMAUTH';
-var TimelineAuthor = function (_a) {
-    var audit = _a.audit;
-    if (!audit)
-        return jsx_runtime_1.jsx(jsx_runtime_1.Fragment, {}, void 0);
-    var authorName = '';
-    audit.agent.forEach(function (agent) {
-        var _a;
-        (_a = agent === null || agent === void 0 ? void 0 : agent.role) === null || _a === void 0 ? void 0 : _a.forEach(function (role) {
-            var _a, _b;
-            var isPrimaryAuthor = !!((_a = role === null || role === void 0 ? void 0 : role.coding) === null || _a === void 0 ? void 0 : _a.find(function (x) { return (x === null || x === void 0 ? void 0 : x.code) === PRIMARY_AUTHOR; }));
-            !authorName && isPrimaryAuthor && (authorName = ((_b = agent.who) === null || _b === void 0 ? void 0 : _b.display) || '');
-        });
-    });
-    if (!authorName) {
-        return jsx_runtime_1.jsx(jsx_runtime_1.Fragment, {}, void 0);
-    }
-    return (jsx_runtime_1.jsxs(StyledTimelineItemLeft, { children: [jsx_runtime_1.jsx(icon_1.UserIcon, { size: "medium" }, void 0), " by ", authorName] }, void 0));
-};
-exports.default = TimelineAuthor;
-var templateObject_1;
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var icon_1 = require("@ltht-react/icon");
+var styled_1 = __importDefault(require("@emotion/styled"));
+var StyledTimelineItemLeft = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  flex-grow: 1;\n"], ["\n  flex-grow: 1;\n"])));
+var PRIMARY_AUTHOR = 'PRIMAUTH';
+var TimelineAuthor = function (_a) {
+    var audit = _a.audit;
+    if (!audit)
+        return jsx_runtime_1.jsx(jsx_runtime_1.Fragment, {}, void 0);
+    var authorName = '';
+    audit.agent.forEach(function (agent) {
+        var _a;
+        (_a = agent === null || agent === void 0 ? void 0 : agent.role) === null || _a === void 0 ? void 0 : _a.forEach(function (role) {
+            var _a, _b;
+            var isPrimaryAuthor = !!((_a = role === null || role === void 0 ? void 0 : role.coding) === null || _a === void 0 ? void 0 : _a.find(function (x) { return (x === null || x === void 0 ? void 0 : x.code) === PRIMARY_AUTHOR; }));
+            !authorName && isPrimaryAuthor && (authorName = ((_b = agent.who) === null || _b === void 0 ? void 0 : _b.display) || '');
+        });
+    });
+    if (!authorName) {
+        return jsx_runtime_1.jsx(jsx_runtime_1.Fragment, {}, void 0);
+    }
+    return (jsx_runtime_1.jsxs(StyledTimelineItemLeft, { children: [jsx_runtime_1.jsx(icon_1.UserIcon, { size: "medium" }, void 0), " by ", authorName] }, void 0));
+};
+exports.default = TimelineAuthor;
+var templateObject_1;
 //# sourceMappingURL=timeline-author.js.map

package/lib/atoms/timeline-description.d.ts

@@ -1,7 +1,7 @@
-import { FC, HTMLAttributes } from 'react';
-import { Maybe } from '@ltht-react/types';
-declare const TimelineDescription: FC<Props>;
-interface Props extends HTMLAttributes<HTMLDivElement> {
-    outcomeDesc?: Maybe<string>;
-}
-export default TimelineDescription;
+import { FC, HTMLAttributes } from 'react';
+import { Maybe } from '@ltht-react/types';
+declare const TimelineDescription: FC<Props>;
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    outcomeDesc?: Maybe<string>;
+}
+export default TimelineDescription;

package/lib/atoms/timeline-description.js

@@ -1,22 +1,22 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_html_parser_1 = __importDefault(require("react-html-parser"));
-var styled_1 = __importDefault(require("@emotion/styled"));
-var StyledDescription = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  p {\n    margin: 0 0.2rem;\n    display: inline;\n  }\n"], ["\n  p {\n    margin: 0 0.2rem;\n    display: inline;\n  }\n"])));
-var TimelineDescription = function (props) {
-    if (!props.outcomeDesc) {
-        return jsx_runtime_1.jsx(jsx_runtime_1.Fragment, {}, void 0);
-    }
-    return jsx_runtime_1.jsx(StyledDescription, { children: react_html_parser_1.default(props.outcomeDesc) }, void 0);
-};
-exports.default = TimelineDescription;
-var templateObject_1;
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_html_parser_1 = __importDefault(require("react-html-parser"));
+var styled_1 = __importDefault(require("@emotion/styled"));
+var StyledDescription = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  p {\n    margin: 0 0.2rem;\n    display: inline;\n  }\n"], ["\n  p {\n    margin: 0 0.2rem;\n    display: inline;\n  }\n"])));
+var TimelineDescription = function (props) {
+    if (!props.outcomeDesc) {
+        return jsx_runtime_1.jsx(jsx_runtime_1.Fragment, {}, void 0);
+    }
+    return jsx_runtime_1.jsx(StyledDescription, { children: react_html_parser_1.default(props.outcomeDesc) }, void 0);
+};
+exports.default = TimelineDescription;
+var templateObject_1;
 //# sourceMappingURL=timeline-description.js.map

package/lib/atoms/timeline-status.d.ts

@@ -1,3 +1,3 @@
-import { FC } from 'react';
-declare const TimelineStatus: FC;
-export default TimelineStatus;
+import { FC } from 'react';
+declare const TimelineStatus: FC;
+export default TimelineStatus;

package/lib/atoms/timeline-status.js

@@ -1,6 +1,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var TimelineStatus = function () { return jsx_runtime_1.jsx(jsx_runtime_1.Fragment, {}, void 0); };
-exports.default = TimelineStatus;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var TimelineStatus = function () { return jsx_runtime_1.jsx(jsx_runtime_1.Fragment, {}, void 0); };
+exports.default = TimelineStatus;
 //# sourceMappingURL=timeline-status.js.map

package/lib/atoms/timeline-time.d.ts

@@ -1,7 +1,7 @@
-import { FC, HTMLAttributes } from 'react';
-import { AuditEvent, Maybe } from '@ltht-react/types';
-declare const TimelineTime: FC<Props>;
-interface Props extends HTMLAttributes<HTMLDivElement> {
-    audit: Maybe<AuditEvent>;
-}
-export default TimelineTime;
+import { FC, HTMLAttributes } from 'react';
+import { AuditEvent, Maybe } from '@ltht-react/types';
+declare const TimelineTime: FC<Props>;
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    audit: Maybe<AuditEvent>;
+}
+export default TimelineTime;

package/lib/atoms/timeline-time.js

@@ -1,15 +1,15 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var utils_1 = require("@ltht-react/utils");
-var TimelineTime = function (_a) {
-    var _b, _c;
-    var audit = _a.audit;
-    if (!((_c = (_b = audit === null || audit === void 0 ? void 0 : audit.period) === null || _b === void 0 ? void 0 : _b.start) === null || _c === void 0 ? void 0 : _c.value)) {
-        return jsx_runtime_1.jsx(jsx_runtime_1.Fragment, {}, void 0);
-    }
-    var time = utils_1.formatTime(new Date(audit.period.start.value));
-    return jsx_runtime_1.jsx(jsx_runtime_1.Fragment, { children: time }, void 0);
-};
-exports.default = TimelineTime;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var utils_1 = require("@ltht-react/utils");
+var TimelineTime = function (_a) {
+    var _b, _c;
+    var audit = _a.audit;
+    if (!((_c = (_b = audit === null || audit === void 0 ? void 0 : audit.period) === null || _b === void 0 ? void 0 : _b.start) === null || _c === void 0 ? void 0 : _c.value)) {
+        return jsx_runtime_1.jsx(jsx_runtime_1.Fragment, {}, void 0);
+    }
+    var time = utils_1.formatTime(new Date(audit.period.start.value));
+    return jsx_runtime_1.jsx(jsx_runtime_1.Fragment, { children: time }, void 0);
+};
+exports.default = TimelineTime;
 //# sourceMappingURL=timeline-time.js.map

package/lib/atoms/timeline-title.d.ts

@@ -1,7 +1,7 @@
-import { FC, HTMLAttributes } from 'react';
-import { AuditEvent, Maybe } from '@ltht-react/types';
-declare const TimelineTitle: FC<Props>;
-interface Props extends HTMLAttributes<HTMLDivElement> {
-    audit: Maybe<AuditEvent>;
-}
-export default TimelineTitle;
+import { FC, HTMLAttributes } from 'react';
+import { AuditEvent, Maybe } from '@ltht-react/types';
+declare const TimelineTitle: FC<Props>;
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    audit: Maybe<AuditEvent>;
+}
+export default TimelineTitle;

package/lib/atoms/timeline-title.js

@@ -1,13 +1,13 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var TimelineTitle = function (_a) {
-    var _b;
-    var audit = _a.audit;
-    if (!audit)
-        return jsx_runtime_1.jsx(jsx_runtime_1.Fragment, {}, void 0);
-    var title = audit.metadata.isRedacted ? 'Insufficient privileges' : (_b = audit.text) === null || _b === void 0 ? void 0 : _b.text;
-    return jsx_runtime_1.jsx(jsx_runtime_1.Fragment, { children: title }, void 0);
-};
-exports.default = TimelineTitle;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var TimelineTitle = function (_a) {
+    var _b;
+    var audit = _a.audit;
+    if (!audit)
+        return jsx_runtime_1.jsx(jsx_runtime_1.Fragment, {}, void 0);
+    var title = audit.metadata.isRedacted ? 'Insufficient privileges' : (_b = audit.text) === null || _b === void 0 ? void 0 : _b.text;
+    return jsx_runtime_1.jsx(jsx_runtime_1.Fragment, { children: title }, void 0);
+};
+exports.default = TimelineTitle;
 //# sourceMappingURL=timeline-title.js.map

package/lib/index.d.ts

@@ -1,4 +1,4 @@
-import Timeline from './organisms/timeline';
-import { ITimelineItem } from './molecules/timeline-item';
-export default Timeline;
-export { ITimelineItem };
+import Timeline from './organisms/timeline';
+import { ITimelineItem } from './molecules/timeline-item';
+export default Timeline;
+export { ITimelineItem };

package/lib/index.js

@@ -1,8 +1,8 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var timeline_1 = __importDefault(require("./organisms/timeline"));
-exports.default = timeline_1.default;
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var timeline_1 = __importDefault(require("./organisms/timeline"));
+exports.default = timeline_1.default;
 //# sourceMappingURL=index.js.map

package/lib/molecules/timeline-item.d.ts

@@ -1,14 +1,14 @@
-import { FC } from 'react';
-import { AuditEvent, Maybe } from '@ltht-react/types';
-declare const TimelineItem: FC<IProps>;
-interface IProps {
-    timelineItem: Maybe<ITimelineItem>;
-}
-export interface ITimelineItem {
-    auditEvent: Maybe<AuditEvent>;
-    clickHandler?(): void;
-    clickPrompt?: string;
-    isSelected: boolean;
-    deselectPrompt?: string;
-}
-export default TimelineItem;
+import { FC } from 'react';
+import { AuditEvent, Maybe } from '@ltht-react/types';
+declare const TimelineItem: FC<IProps>;
+interface IProps {
+    timelineItem: Maybe<ITimelineItem>;
+}
+export interface ITimelineItem {
+    auditEvent: Maybe<AuditEvent>;
+    clickHandler?(): void;
+    clickPrompt?: string;
+    isSelected: boolean;
+    deselectPrompt?: string;
+}
+export default TimelineItem;

package/lib/molecules/timeline-item.js

@@ -1,68 +1,68 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var styled_1 = __importDefault(require("@emotion/styled"));
-var banner_1 = __importDefault(require("@ltht-react/banner"));
-var icon_1 = require("@ltht-react/icon");
-var styles_1 = require("@ltht-react/styles");
-var hooks_1 = require("@ltht-react/hooks");
-var utils_1 = require("@ltht-react/utils");
-var timeline_description_1 = __importDefault(require("../atoms/timeline-description"));
-var timeline_author_1 = __importDefault(require("../atoms/timeline-author"));
-var timeline_status_1 = __importDefault(require("../atoms/timeline-status"));
-var timeline_title_1 = __importDefault(require("../atoms/timeline-title"));
-var timeline_time_1 = __importDefault(require("../atoms/timeline-time"));
-var StyledTimelineItem = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  padding: 0.5rem;\n"], ["\n  background-color: ", ";\n  padding: 0.5rem;\n"])), function (_a) {
-    var isSelected = _a.isSelected;
-    return (isSelected ? styles_1.HIGHLIGHT_GREEN.VALUE : styles_1.TRANSLUCENT_DARK_BLUE);
-});
-var StyledTimelineItemLeft = styled_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  flex-grow: 1;\n"], ["\n  flex-grow: 1;\n"])));
-var StyledTimelineItemRight = styled_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  text-align: right;\n"], ["\n  text-align: right;\n"])));
-var StyledTimelineTime = styled_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  color: black;\n"], ["\n  color: black;\n"])));
-var StyledTimelineItemTop = styled_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  color: black;\n  padding-bottom: 0.25rem;\n"], ["\n  display: flex;\n  color: black;\n  padding-bottom: 0.25rem;\n"])));
-var StyledTimelineItemMiddle = styled_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  color: black;\n  padding-bottom: 1rem;\n"], ["\n  color: black;\n  padding-bottom: 1rem;\n"])));
-var StyledTimelineItemBottom = styled_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  color: grey;\n  display: flex;\n"], ["\n  color: grey;\n  display: flex;\n"])));
-var StyledTitle = styled_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  flex-grow: 1;\n  color: black;\n  font-size: ", ";\n  font-weight: bold;\n"], ["\n  flex-grow: 1;\n  color: black;\n  font-size: ", ";\n  font-weight: bold;\n"])), function (_a) {
-    var isMobile = _a.isMobile;
-    return (isMobile ? 'medium' : 'large');
-});
-var StyledDescription = styled_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  color: black;\n  font-size: small;\n"], ["\n  color: black;\n  font-size: small;\n"])));
-var StyledStatus = styled_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  text-align: right;\n"], ["\n  text-align: right;\n"])));
-var StyledBanner = styled_1.default(banner_1.default)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  margin: -0.5rem;\n  margin-top: 0.5rem;\n"], ["\n  margin: -0.5rem;\n  margin-top: 0.5rem;\n"])));
-var StyledBannerContent = styled_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject([""], [""])));
-var TimelineItem = function (_a) {
-    var timelineItem = _a.timelineItem;
-    var width = hooks_1.useWindowSize().width;
-    var isMobile = utils_1.isMobileView(width);
-    if (!(timelineItem === null || timelineItem === void 0 ? void 0 : timelineItem.auditEvent)) {
-        return jsx_runtime_1.jsx(jsx_runtime_1.Fragment, {}, void 0);
-    }
-    return (jsx_runtime_1.jsx(jsx_runtime_1.Fragment, { children: jsx_runtime_1.jsxs(StyledTimelineItem, __assign({ isSelected: timelineItem.isSelected }, { children: [jsx_runtime_1.jsxs(StyledTimelineItemTop, { children: [jsx_runtime_1.jsx(StyledTitle, __assign({ isMobile: isMobile }, { children: jsx_runtime_1.jsx(timeline_title_1.default, { audit: timelineItem.auditEvent }, void 0) }), void 0),
-                        isMobile && (jsx_runtime_1.jsx(StyledTimelineTime, { children: jsx_runtime_1.jsx(timeline_time_1.default, { audit: timelineItem.auditEvent }, void 0) }, void 0))] }, void 0),
-                jsx_runtime_1.jsx(StyledTimelineItemMiddle, { children: jsx_runtime_1.jsx(StyledDescription, { children: jsx_runtime_1.jsx(timeline_description_1.default, { outcomeDesc: timelineItem.auditEvent.outcomeDesc }, void 0) }, void 0) }, void 0),
-                jsx_runtime_1.jsxs(StyledTimelineItemBottom, { children: [jsx_runtime_1.jsx(StyledTimelineItemLeft, { children: jsx_runtime_1.jsx(timeline_author_1.default, { audit: timelineItem.auditEvent }, void 0) }, void 0),
-                        jsx_runtime_1.jsx(StyledTimelineItemRight, { children: jsx_runtime_1.jsx(StyledStatus, { children: jsx_runtime_1.jsx(timeline_status_1.default, {}, void 0) }, void 0) }, void 0)] }, void 0),
-                timelineItem.clickHandler && !timelineItem.isSelected && (jsx_runtime_1.jsx(StyledBanner, __assign({ type: "info", onClick: timelineItem.clickHandler }, { children: timelineItem.clickPrompt && jsx_runtime_1.jsx(StyledBannerContent, { children: timelineItem.clickPrompt }, void 0) }), void 0)),
-                timelineItem.clickHandler && timelineItem.isSelected && (jsx_runtime_1.jsx(StyledBanner, __assign({ type: "highlight", icon: jsx_runtime_1.jsx(icon_1.InfoCircleIcon, { status: "info", size: "medium" }, void 0), onClick: timelineItem.clickHandler }, { children: timelineItem.deselectPrompt && jsx_runtime_1.jsx(StyledBannerContent, { children: timelineItem.deselectPrompt }, void 0) }), void 0))] }), void 0) }, void 0));
-};
-exports.default = TimelineItem;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12;
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styled_1 = __importDefault(require("@emotion/styled"));
+var banner_1 = __importDefault(require("@ltht-react/banner"));
+var icon_1 = require("@ltht-react/icon");
+var styles_1 = require("@ltht-react/styles");
+var hooks_1 = require("@ltht-react/hooks");
+var utils_1 = require("@ltht-react/utils");
+var timeline_description_1 = __importDefault(require("../atoms/timeline-description"));
+var timeline_author_1 = __importDefault(require("../atoms/timeline-author"));
+var timeline_status_1 = __importDefault(require("../atoms/timeline-status"));
+var timeline_title_1 = __importDefault(require("../atoms/timeline-title"));
+var timeline_time_1 = __importDefault(require("../atoms/timeline-time"));
+var StyledTimelineItem = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  padding: 0.5rem;\n"], ["\n  background-color: ", ";\n  padding: 0.5rem;\n"])), function (_a) {
+    var isSelected = _a.isSelected;
+    return (isSelected ? styles_1.HIGHLIGHT_GREEN.VALUE : styles_1.TRANSLUCENT_DARK_BLUE);
+});
+var StyledTimelineItemLeft = styled_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  flex-grow: 1;\n"], ["\n  flex-grow: 1;\n"])));
+var StyledTimelineItemRight = styled_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  text-align: right;\n"], ["\n  text-align: right;\n"])));
+var StyledTimelineTime = styled_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  color: black;\n"], ["\n  color: black;\n"])));
+var StyledTimelineItemTop = styled_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  color: black;\n  padding-bottom: 0.25rem;\n"], ["\n  display: flex;\n  color: black;\n  padding-bottom: 0.25rem;\n"])));
+var StyledTimelineItemMiddle = styled_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  color: black;\n  padding-bottom: 1rem;\n"], ["\n  color: black;\n  padding-bottom: 1rem;\n"])));
+var StyledTimelineItemBottom = styled_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  color: grey;\n  display: flex;\n"], ["\n  color: grey;\n  display: flex;\n"])));
+var StyledTitle = styled_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  flex-grow: 1;\n  color: black;\n  font-size: ", ";\n  font-weight: bold;\n"], ["\n  flex-grow: 1;\n  color: black;\n  font-size: ", ";\n  font-weight: bold;\n"])), function (_a) {
+    var isMobile = _a.isMobile;
+    return (isMobile ? 'medium' : 'large');
+});
+var StyledDescription = styled_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  color: black;\n  font-size: small;\n"], ["\n  color: black;\n  font-size: small;\n"])));
+var StyledStatus = styled_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  text-align: right;\n"], ["\n  text-align: right;\n"])));
+var StyledBanner = styled_1.default(banner_1.default)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  margin: -0.5rem;\n  margin-top: 0.5rem;\n"], ["\n  margin: -0.5rem;\n  margin-top: 0.5rem;\n"])));
+var StyledBannerContent = styled_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject([""], [""])));
+var TimelineItem = function (_a) {
+    var timelineItem = _a.timelineItem;
+    var width = hooks_1.useWindowSize().width;
+    var isMobile = utils_1.isMobileView(width);
+    if (!(timelineItem === null || timelineItem === void 0 ? void 0 : timelineItem.auditEvent)) {
+        return jsx_runtime_1.jsx(jsx_runtime_1.Fragment, {}, void 0);
+    }
+    return (jsx_runtime_1.jsx(jsx_runtime_1.Fragment, { children: jsx_runtime_1.jsxs(StyledTimelineItem, __assign({ isSelected: timelineItem.isSelected }, { children: [jsx_runtime_1.jsxs(StyledTimelineItemTop, { children: [jsx_runtime_1.jsx(StyledTitle, __assign({ isMobile: isMobile }, { children: jsx_runtime_1.jsx(timeline_title_1.default, { audit: timelineItem.auditEvent }, void 0) }), void 0),
+                        isMobile && (jsx_runtime_1.jsx(StyledTimelineTime, { children: jsx_runtime_1.jsx(timeline_time_1.default, { audit: timelineItem.auditEvent }, void 0) }, void 0))] }, void 0),
+                jsx_runtime_1.jsx(StyledTimelineItemMiddle, { children: jsx_runtime_1.jsx(StyledDescription, { children: jsx_runtime_1.jsx(timeline_description_1.default, { outcomeDesc: timelineItem.auditEvent.outcomeDesc }, void 0) }, void 0) }, void 0),
+                jsx_runtime_1.jsxs(StyledTimelineItemBottom, { children: [jsx_runtime_1.jsx(StyledTimelineItemLeft, { children: jsx_runtime_1.jsx(timeline_author_1.default, { audit: timelineItem.auditEvent }, void 0) }, void 0),
+                        jsx_runtime_1.jsx(StyledTimelineItemRight, { children: jsx_runtime_1.jsx(StyledStatus, { children: jsx_runtime_1.jsx(timeline_status_1.default, {}, void 0) }, void 0) }, void 0)] }, void 0),
+                timelineItem.clickHandler && !timelineItem.isSelected && (jsx_runtime_1.jsx(StyledBanner, __assign({ type: "info", onClick: timelineItem.clickHandler }, { children: timelineItem.clickPrompt && jsx_runtime_1.jsx(StyledBannerContent, { children: timelineItem.clickPrompt }, void 0) }), void 0)),
+                timelineItem.clickHandler && timelineItem.isSelected && (jsx_runtime_1.jsx(StyledBanner, __assign({ type: "highlight", icon: jsx_runtime_1.jsx(icon_1.InfoCircleIcon, { status: "info", size: "medium" }, void 0), onClick: timelineItem.clickHandler }, { children: timelineItem.deselectPrompt && jsx_runtime_1.jsx(StyledBannerContent, { children: timelineItem.deselectPrompt }, void 0) }), void 0))] }), void 0) }, void 0));
+};
+exports.default = TimelineItem;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12;
 //# sourceMappingURL=timeline-item.js.map

package/lib/organisms/timeline.d.ts

@@ -1,8 +1,8 @@
-import { FC } from 'react';
-import { Maybe } from '@ltht-react/types';
-import { ITimelineItem } from '../molecules/timeline-item';
-declare const Timeline: FC<IProps>;
-interface IProps {
-    timelineItems: Maybe<ITimelineItem>[];
-}
-export default Timeline;
+import { FC } from 'react';
+import { Maybe } from '@ltht-react/types';
+import { ITimelineItem } from '../molecules/timeline-item';
+declare const Timeline: FC<IProps>;
+interface IProps {
+    timelineItems: Maybe<ITimelineItem>[];
+}
+export default Timeline;

package/lib/organisms/timeline.js

@@ -1,118 +1,118 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var styled_1 = __importDefault(require("@emotion/styled"));
-var icon_1 = require("@ltht-react/icon");
-var styles_1 = require("@ltht-react/styles");
-var utils_1 = require("@ltht-react/utils");
-var hooks_1 = require("@ltht-react/hooks");
-var timeline_time_1 = __importDefault(require("../atoms/timeline-time"));
-var timeline_item_1 = __importDefault(require("../molecules/timeline-item"));
-var StyledTimeline = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin: -0.75rem;\n"], ["\n  margin: -0.75rem;\n"])));
-var StyledTimelineDayBody = styled_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: white;\n  position: relative;\n\n  &:before {\n    content: '';\n    position: absolute;\n    z-index: 1;\n    height: ", ";\n    left: calc(50% - 1px);\n    border-width: 0 0 0 2px;\n    border-color: ", ";\n    border-style: solid;\n  }\n"], ["\n  background-color: white;\n  position: relative;\n\n  &:before {\n    content: '';\n    position: absolute;\n    z-index: 1;\n    height: ", ";\n    left: calc(50% - 1px);\n    border-width: 0 0 0 2px;\n    border-color: ", ";\n    border-style: solid;\n  }\n"])), function (_a) {
-    var isMobile = _a.isMobile;
-    return (isMobile ? '0%' : '100%');
-}, styles_1.TEXT_COLOURS.INFO);
-var StyledTimelineDayHeader = styled_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n  padding: 0.5rem;\n  text-align: center;\n  font-weight: bold;\n"], ["\n  background-color: ", ";\n  padding: 0.5rem;\n  text-align: center;\n  font-weight: bold;\n"])), styles_1.BANNER_COLOURS.DEFAULT.BACKGROUND);
-var StyledTimelineDayItem = styled_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: inline-block;\n  width: 100%;\n  justify-content: center;\n  padding: ", ";\n  margin: ", ";\n"], ["\n  display: inline-block;\n  width: 100%;\n  justify-content: center;\n  padding: ", ";\n  margin: ", ";\n"])), function (_a) {
-    var isMobile = _a.isMobile;
-    return (isMobile ? '' : '0 0.5rem');
-}, function (_a) {
-    var isMobile = _a.isMobile;
-    return (isMobile ? '0.5rem 0' : '1rem 0');
-});
-var StyledTimelineDayContent = styled_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  width: ", ";\n  padding: 0 0.5rem;\n  display: inline-block;\n  vertical-align: top;\n"], ["\n  width: ", ";\n  padding: 0 0.5rem;\n  display: inline-block;\n  vertical-align: top;\n"])), function (_a) {
-    var isMobile = _a.isMobile;
-    return (isMobile ? '100%' : '49%');
-});
-var StyledTimelineDayLine = styled_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  width: 2%;\n  vertical-align: top;\n  margin-top: 0.125rem;\n  display: inline-block;\n  text-align: center;\n  position: relative;\n  height: 100%;\n"], ["\n  width: 2%;\n  vertical-align: top;\n  margin-top: 0.125rem;\n  display: inline-block;\n  text-align: center;\n  position: relative;\n  height: 100%;\n"])));
-var StyledTimelineDayTimeLeft = styled_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  width: 49%;\n  padding: 0 0.5rem;\n  display: inline-block;\n  vertical-align: top;\n  text-align: right;\n  font-weight: bold;\n"], ["\n  width: 49%;\n  padding: 0 0.5rem;\n  display: inline-block;\n  vertical-align: top;\n  text-align: right;\n  font-weight: bold;\n"])));
-var StyledTimelineDayTimeRight = styled_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  width: 49%;\n  padding: 0 0.5rem;\n  display: inline-block;\n  vertical-align: top;\n  text-align: left;\n  font-weight: bold;\n"], ["\n  width: 49%;\n  padding: 0 0.5rem;\n  display: inline-block;\n  vertical-align: top;\n  text-align: left;\n  font-weight: bold;\n"])));
-var StyledOuterCircle = styled_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  .icon__circle {\n    position: absolute;\n    z-index: 1;\n    transform: translate(-50%);\n    -webkit-transform: translate(-50%);\n    -ms-transform: translate(-50%);\n    left: 50%;\n    color: ", ";\n    font-size: 0.75rem;\n  }\n"], ["\n  .icon__circle {\n    position: absolute;\n    z-index: 1;\n    transform: translate(-50%);\n    -webkit-transform: translate(-50%);\n    -ms-transform: translate(-50%);\n    left: 50%;\n    color: ", ";\n    font-size: 0.75rem;\n  }\n"])), styles_1.TEXT_COLOURS.INFO);
-var StyledInnerCircle = styled_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  .icon__circle {\n    position: absolute;\n    z-index: 2;\n    top: 0.125rem;\n    transform: translate(-50%);\n    -webkit-transform: translate(-50%);\n    -ms-transform: translate(-50%);\n    left: 50%;\n    color: white;\n    font-size: 0.5rem;\n  }\n"], ["\n  .icon__circle {\n    position: absolute;\n    z-index: 2;\n    top: 0.125rem;\n    transform: translate(-50%);\n    -webkit-transform: translate(-50%);\n    -ms-transform: translate(-50%);\n    left: 50%;\n    color: white;\n    font-size: 0.5rem;\n  }\n"])));
-var Timeline = function (props) {
-    var _a;
-    var rest = [];
-    for (var _i = 1; _i < arguments.length; _i++) {
-        rest[_i - 1] = arguments[_i];
-    }
-    var width = hooks_1.useWindowSize().width;
-    var isMobile = utils_1.isMobileView(width);
-    var audit = props.timelineItems.map(function (i) { return i === null || i === void 0 ? void 0 : i.auditEvent; });
-    var timelineDates = {};
-    (_a = props.timelineItems) === null || _a === void 0 ? void 0 : _a.forEach(function (timelineItem) {
-        var _a, _b, _c, _d, _e, _f;
-        if (!((_c = (_b = (_a = timelineItem === null || timelineItem === void 0 ? void 0 : timelineItem.auditEvent) === null || _a === void 0 ? void 0 : _a.period) === null || _b === void 0 ? void 0 : _b.start) === null || _c === void 0 ? void 0 : _c.value)) {
-            return;
-        }
-        var date = utils_1.formatDateExplicitMonth(new Date((_f = (_e = (_d = timelineItem.auditEvent) === null || _d === void 0 ? void 0 : _d.period) === null || _e === void 0 ? void 0 : _e.start) === null || _f === void 0 ? void 0 : _f.value));
-        var lookup = timelineDates[date];
-        if (!lookup) {
-            timelineDates[date] = [timelineItem];
-        }
-        else {
-            lookup.push(timelineItem);
-            timelineDates[date] = lookup;
-        }
-    });
-    var position = 0;
-    return (jsx_runtime_1.jsx(jsx_runtime_1.Fragment, { children: jsx_runtime_1.jsx(StyledTimeline, __assign({}, rest, { children: Object.entries(timelineDates).map(function (_a) {
-                var key = _a[0], value = _a[1];
-                position += 1;
-                if (isMobile) {
-                    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [jsx_runtime_1.jsx(StyledTimelineDayHeader, { children: key }, void 0),
-                            jsx_runtime_1.jsx(StyledTimelineDayBody, __assign({ isMobile: isMobile }, { children: value === null || value === void 0 ? void 0 : value.map(function (timelineItem) { return (jsx_runtime_1.jsx(StyledTimelineDayItem, __assign({ isMobile: isMobile }, { children: jsx_runtime_1.jsx(StyledTimelineDayContent, __assign({ isMobile: isMobile }, { children: jsx_runtime_1.jsx(timeline_item_1.default, { timelineItem: timelineItem }, void 0) }), void 0) }), void 0)); }) }), void 0)] }, void 0));
-                }
-                return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [jsx_runtime_1.jsx(StyledTimelineDayHeader, { children: key }, void 0),
-                        jsx_runtime_1.jsx(StyledTimelineDayBody, __assign({ isMobile: isMobile }, { children: value === null || value === void 0 ? void 0 : value.map(function (timelineItem, idx) {
-                                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-                                if (!((_c = (_b = (_a = timelineItem === null || timelineItem === void 0 ? void 0 : timelineItem.auditEvent) === null || _a === void 0 ? void 0 : _a.period) === null || _b === void 0 ? void 0 : _b.start) === null || _c === void 0 ? void 0 : _c.value)) {
-                                    return jsx_runtime_1.jsx(jsx_runtime_1.Fragment, {}, void 0);
-                                }
-                                var currentTime = utils_1.formatTime(new Date((_f = (_e = (_d = timelineItem.auditEvent) === null || _d === void 0 ? void 0 : _d.period) === null || _e === void 0 ? void 0 : _e.start) === null || _f === void 0 ? void 0 : _f.value));
-                                var previousTime = currentTime;
-                                if (idx > 0) {
-                                    var previousItem = audit[idx - 1];
-                                    if (!((_h = (_g = previousItem === null || previousItem === void 0 ? void 0 : previousItem.period) === null || _g === void 0 ? void 0 : _g.start) === null || _h === void 0 ? void 0 : _h.value)) {
-                                        return jsx_runtime_1.jsx(jsx_runtime_1.Fragment, {}, void 0);
-                                    }
-                                    previousTime = utils_1.formatTime(new Date((_k = (_j = previousItem === null || previousItem === void 0 ? void 0 : previousItem.period) === null || _j === void 0 ? void 0 : _j.start) === null || _k === void 0 ? void 0 : _k.value));
-                                }
-                                if (currentTime !== previousTime) {
-                                    position += 1;
-                                }
-                                var key = currentTime + "_" + idx;
-                                if (position % 2 === 1) {
-                                    return (jsx_runtime_1.jsxs(StyledTimelineDayItem, __assign({ isMobile: isMobile }, { children: [jsx_runtime_1.jsx(StyledTimelineDayContent, __assign({ isMobile: isMobile }, { children: jsx_runtime_1.jsx(timeline_item_1.default, { timelineItem: timelineItem }, void 0) }), void 0),
-                                            jsx_runtime_1.jsxs(StyledTimelineDayLine, { children: [jsx_runtime_1.jsx(StyledOuterCircle, { children: jsx_runtime_1.jsx(icon_1.CircleIcon, { status: "info", size: "medium" }, void 0) }, void 0),
-                                                    jsx_runtime_1.jsx(StyledInnerCircle, { children: jsx_runtime_1.jsx(icon_1.CircleIcon, { status: "info", size: "medium" }, void 0) }, void 0)] }, void 0),
-                                            jsx_runtime_1.jsx(StyledTimelineDayTimeRight, { children: jsx_runtime_1.jsx(timeline_time_1.default, { audit: timelineItem === null || timelineItem === void 0 ? void 0 : timelineItem.auditEvent }, void 0) }, void 0)] }), key));
-                                }
-                                return (jsx_runtime_1.jsxs(StyledTimelineDayItem, __assign({ isMobile: isMobile }, { children: [jsx_runtime_1.jsx(StyledTimelineDayTimeLeft, { children: jsx_runtime_1.jsx(timeline_time_1.default, { audit: timelineItem === null || timelineItem === void 0 ? void 0 : timelineItem.auditEvent }, void 0) }, void 0),
-                                        jsx_runtime_1.jsxs(StyledTimelineDayLine, { children: [jsx_runtime_1.jsx(StyledOuterCircle, { children: jsx_runtime_1.jsx(icon_1.CircleIcon, { status: "info", size: "medium" }, void 0) }, void 0),
-                                                jsx_runtime_1.jsx(StyledInnerCircle, { children: jsx_runtime_1.jsx(icon_1.CircleIcon, { status: "info", size: "medium" }, void 0) }, void 0)] }, void 0),
-                                        jsx_runtime_1.jsx(StyledTimelineDayContent, __assign({ isMobile: isMobile }, { children: jsx_runtime_1.jsx(timeline_item_1.default, { timelineItem: timelineItem }, void 0) }), void 0)] }), key));
-                            }) }), void 0)] }, void 0));
-            }) }), void 0) }, void 0));
-};
-exports.default = Timeline;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styled_1 = __importDefault(require("@emotion/styled"));
+var icon_1 = require("@ltht-react/icon");
+var styles_1 = require("@ltht-react/styles");
+var utils_1 = require("@ltht-react/utils");
+var hooks_1 = require("@ltht-react/hooks");
+var timeline_time_1 = __importDefault(require("../atoms/timeline-time"));
+var timeline_item_1 = __importDefault(require("../molecules/timeline-item"));
+var StyledTimeline = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin: -0.75rem;\n"], ["\n  margin: -0.75rem;\n"])));
+var StyledTimelineDayBody = styled_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: white;\n  position: relative;\n\n  &:before {\n    content: '';\n    position: absolute;\n    z-index: 1;\n    height: ", ";\n    left: calc(50% - 1px);\n    border-width: 0 0 0 2px;\n    border-color: ", ";\n    border-style: solid;\n  }\n"], ["\n  background-color: white;\n  position: relative;\n\n  &:before {\n    content: '';\n    position: absolute;\n    z-index: 1;\n    height: ", ";\n    left: calc(50% - 1px);\n    border-width: 0 0 0 2px;\n    border-color: ", ";\n    border-style: solid;\n  }\n"])), function (_a) {
+    var isMobile = _a.isMobile;
+    return (isMobile ? '0%' : '100%');
+}, styles_1.TEXT_COLOURS.INFO);
+var StyledTimelineDayHeader = styled_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n  padding: 0.5rem;\n  text-align: center;\n  font-weight: bold;\n"], ["\n  background-color: ", ";\n  padding: 0.5rem;\n  text-align: center;\n  font-weight: bold;\n"])), styles_1.BANNER_COLOURS.DEFAULT.BACKGROUND);
+var StyledTimelineDayItem = styled_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: inline-block;\n  width: 100%;\n  justify-content: center;\n  padding: ", ";\n  margin: ", ";\n"], ["\n  display: inline-block;\n  width: 100%;\n  justify-content: center;\n  padding: ", ";\n  margin: ", ";\n"])), function (_a) {
+    var isMobile = _a.isMobile;
+    return (isMobile ? '' : '0 0.5rem');
+}, function (_a) {
+    var isMobile = _a.isMobile;
+    return (isMobile ? '0.5rem 0' : '1rem 0');
+});
+var StyledTimelineDayContent = styled_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  width: ", ";\n  padding: 0 0.5rem;\n  display: inline-block;\n  vertical-align: top;\n"], ["\n  width: ", ";\n  padding: 0 0.5rem;\n  display: inline-block;\n  vertical-align: top;\n"])), function (_a) {
+    var isMobile = _a.isMobile;
+    return (isMobile ? '100%' : '49%');
+});
+var StyledTimelineDayLine = styled_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  width: 2%;\n  vertical-align: top;\n  margin-top: 0.125rem;\n  display: inline-block;\n  text-align: center;\n  position: relative;\n  height: 100%;\n"], ["\n  width: 2%;\n  vertical-align: top;\n  margin-top: 0.125rem;\n  display: inline-block;\n  text-align: center;\n  position: relative;\n  height: 100%;\n"])));
+var StyledTimelineDayTimeLeft = styled_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  width: 49%;\n  padding: 0 0.5rem;\n  display: inline-block;\n  vertical-align: top;\n  text-align: right;\n  font-weight: bold;\n"], ["\n  width: 49%;\n  padding: 0 0.5rem;\n  display: inline-block;\n  vertical-align: top;\n  text-align: right;\n  font-weight: bold;\n"])));
+var StyledTimelineDayTimeRight = styled_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  width: 49%;\n  padding: 0 0.5rem;\n  display: inline-block;\n  vertical-align: top;\n  text-align: left;\n  font-weight: bold;\n"], ["\n  width: 49%;\n  padding: 0 0.5rem;\n  display: inline-block;\n  vertical-align: top;\n  text-align: left;\n  font-weight: bold;\n"])));
+var StyledOuterCircle = styled_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  .icon__circle {\n    position: absolute;\n    z-index: 1;\n    transform: translate(-50%);\n    -webkit-transform: translate(-50%);\n    -ms-transform: translate(-50%);\n    left: 50%;\n    color: ", ";\n    font-size: 0.75rem;\n  }\n"], ["\n  .icon__circle {\n    position: absolute;\n    z-index: 1;\n    transform: translate(-50%);\n    -webkit-transform: translate(-50%);\n    -ms-transform: translate(-50%);\n    left: 50%;\n    color: ", ";\n    font-size: 0.75rem;\n  }\n"])), styles_1.TEXT_COLOURS.INFO);
+var StyledInnerCircle = styled_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  .icon__circle {\n    position: absolute;\n    z-index: 2;\n    top: 0.125rem;\n    transform: translate(-50%);\n    -webkit-transform: translate(-50%);\n    -ms-transform: translate(-50%);\n    left: 50%;\n    color: white;\n    font-size: 0.5rem;\n  }\n"], ["\n  .icon__circle {\n    position: absolute;\n    z-index: 2;\n    top: 0.125rem;\n    transform: translate(-50%);\n    -webkit-transform: translate(-50%);\n    -ms-transform: translate(-50%);\n    left: 50%;\n    color: white;\n    font-size: 0.5rem;\n  }\n"])));
+var Timeline = function (props) {
+    var _a;
+    var rest = [];
+    for (var _i = 1; _i < arguments.length; _i++) {
+        rest[_i - 1] = arguments[_i];
+    }
+    var width = hooks_1.useWindowSize().width;
+    var isMobile = utils_1.isMobileView(width);
+    var audit = props.timelineItems.map(function (i) { return i === null || i === void 0 ? void 0 : i.auditEvent; });
+    var timelineDates = {};
+    (_a = props.timelineItems) === null || _a === void 0 ? void 0 : _a.forEach(function (timelineItem) {
+        var _a, _b, _c, _d, _e, _f;
+        if (!((_c = (_b = (_a = timelineItem === null || timelineItem === void 0 ? void 0 : timelineItem.auditEvent) === null || _a === void 0 ? void 0 : _a.period) === null || _b === void 0 ? void 0 : _b.start) === null || _c === void 0 ? void 0 : _c.value)) {
+            return;
+        }
+        var date = utils_1.formatDateExplicitMonth(new Date((_f = (_e = (_d = timelineItem.auditEvent) === null || _d === void 0 ? void 0 : _d.period) === null || _e === void 0 ? void 0 : _e.start) === null || _f === void 0 ? void 0 : _f.value));
+        var lookup = timelineDates[date];
+        if (!lookup) {
+            timelineDates[date] = [timelineItem];
+        }
+        else {
+            lookup.push(timelineItem);
+            timelineDates[date] = lookup;
+        }
+    });
+    var position = 0;
+    return (jsx_runtime_1.jsx(jsx_runtime_1.Fragment, { children: jsx_runtime_1.jsx(StyledTimeline, __assign({}, rest, { children: Object.entries(timelineDates).map(function (_a) {
+                var key = _a[0], value = _a[1];
+                position += 1;
+                if (isMobile) {
+                    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [jsx_runtime_1.jsx(StyledTimelineDayHeader, { children: key }, void 0),
+                            jsx_runtime_1.jsx(StyledTimelineDayBody, __assign({ isMobile: isMobile }, { children: value === null || value === void 0 ? void 0 : value.map(function (timelineItem) { return (jsx_runtime_1.jsx(StyledTimelineDayItem, __assign({ isMobile: isMobile }, { children: jsx_runtime_1.jsx(StyledTimelineDayContent, __assign({ isMobile: isMobile }, { children: jsx_runtime_1.jsx(timeline_item_1.default, { timelineItem: timelineItem }, void 0) }), void 0) }), void 0)); }) }), void 0)] }, void 0));
+                }
+                return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [jsx_runtime_1.jsx(StyledTimelineDayHeader, { children: key }, void 0),
+                        jsx_runtime_1.jsx(StyledTimelineDayBody, __assign({ isMobile: isMobile }, { children: value === null || value === void 0 ? void 0 : value.map(function (timelineItem, idx) {
+                                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+                                if (!((_c = (_b = (_a = timelineItem === null || timelineItem === void 0 ? void 0 : timelineItem.auditEvent) === null || _a === void 0 ? void 0 : _a.period) === null || _b === void 0 ? void 0 : _b.start) === null || _c === void 0 ? void 0 : _c.value)) {
+                                    return jsx_runtime_1.jsx(jsx_runtime_1.Fragment, {}, void 0);
+                                }
+                                var currentTime = utils_1.formatTime(new Date((_f = (_e = (_d = timelineItem.auditEvent) === null || _d === void 0 ? void 0 : _d.period) === null || _e === void 0 ? void 0 : _e.start) === null || _f === void 0 ? void 0 : _f.value));
+                                var previousTime = currentTime;
+                                if (idx > 0) {
+                                    var previousItem = audit[idx - 1];
+                                    if (!((_h = (_g = previousItem === null || previousItem === void 0 ? void 0 : previousItem.period) === null || _g === void 0 ? void 0 : _g.start) === null || _h === void 0 ? void 0 : _h.value)) {
+                                        return jsx_runtime_1.jsx(jsx_runtime_1.Fragment, {}, void 0);
+                                    }
+                                    previousTime = utils_1.formatTime(new Date((_k = (_j = previousItem === null || previousItem === void 0 ? void 0 : previousItem.period) === null || _j === void 0 ? void 0 : _j.start) === null || _k === void 0 ? void 0 : _k.value));
+                                }
+                                if (currentTime !== previousTime) {
+                                    position += 1;
+                                }
+                                var key = currentTime + "_" + idx;
+                                if (position % 2 === 1) {
+                                    return (jsx_runtime_1.jsxs(StyledTimelineDayItem, __assign({ isMobile: isMobile }, { children: [jsx_runtime_1.jsx(StyledTimelineDayContent, __assign({ isMobile: isMobile }, { children: jsx_runtime_1.jsx(timeline_item_1.default, { timelineItem: timelineItem }, void 0) }), void 0),
+                                            jsx_runtime_1.jsxs(StyledTimelineDayLine, { children: [jsx_runtime_1.jsx(StyledOuterCircle, { children: jsx_runtime_1.jsx(icon_1.CircleIcon, { status: "info", size: "medium" }, void 0) }, void 0),
+                                                    jsx_runtime_1.jsx(StyledInnerCircle, { children: jsx_runtime_1.jsx(icon_1.CircleIcon, { status: "info", size: "medium" }, void 0) }, void 0)] }, void 0),
+                                            jsx_runtime_1.jsx(StyledTimelineDayTimeRight, { children: jsx_runtime_1.jsx(timeline_time_1.default, { audit: timelineItem === null || timelineItem === void 0 ? void 0 : timelineItem.auditEvent }, void 0) }, void 0)] }), key));
+                                }
+                                return (jsx_runtime_1.jsxs(StyledTimelineDayItem, __assign({ isMobile: isMobile }, { children: [jsx_runtime_1.jsx(StyledTimelineDayTimeLeft, { children: jsx_runtime_1.jsx(timeline_time_1.default, { audit: timelineItem === null || timelineItem === void 0 ? void 0 : timelineItem.auditEvent }, void 0) }, void 0),
+                                        jsx_runtime_1.jsxs(StyledTimelineDayLine, { children: [jsx_runtime_1.jsx(StyledOuterCircle, { children: jsx_runtime_1.jsx(icon_1.CircleIcon, { status: "info", size: "medium" }, void 0) }, void 0),
+                                                jsx_runtime_1.jsx(StyledInnerCircle, { children: jsx_runtime_1.jsx(icon_1.CircleIcon, { status: "info", size: "medium" }, void 0) }, void 0)] }, void 0),
+                                        jsx_runtime_1.jsx(StyledTimelineDayContent, __assign({ isMobile: isMobile }, { children: jsx_runtime_1.jsx(timeline_item_1.default, { timelineItem: timelineItem }, void 0) }), void 0)] }), key));
+                            }) }), void 0)] }, void 0));
+            }) }), void 0) }, void 0));
+};
+exports.default = Timeline;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
 //# sourceMappingURL=timeline.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ltht-react/timeline",
-  "version": "1.0.84",
+  "version": "1.0.85",
   "description": "> TODO: description",
   "author": "Jonny Dyson",
   "homepage": "",
@@ -23,14 +23,14 @@
   },
   "dependencies": {
     "@emotion/styled": "^11.0.0",
-    "@ltht-react/banner": "^1.0.69",
-    "@ltht-react/hooks": "^1.0.86",
-    "@ltht-react/icon": "^1.3.96",
-    "@ltht-react/styles": "^1.3.88",
-    "@ltht-react/types": "^1.0.92",
-    "@ltht-react/utils": "^1.1.94",
+    "@ltht-react/banner": "^1.0.70",
+    "@ltht-react/hooks": "^1.0.87",
+    "@ltht-react/icon": "^1.3.97",
+    "@ltht-react/styles": "^1.3.89",
+    "@ltht-react/types": "^1.0.93",
+    "@ltht-react/utils": "^1.1.95",
     "react": "^17.0.0",
     "react-html-parser": "^2.0.2"
   },
-  "gitHead": "38d0f44e0e5dbd8453c5ef2ab169b12317219457"
+  "gitHead": "4007295972361bf9b74d594c439a0d7908ec1bda"
 }