@ltht-react/diagnosis-summary 2.0.44 → 2.0.46

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/lib/organisms/diagnosis-summary.d.ts

@@ -1,11 +1,13 @@
 import { FC, HTMLAttributes } from 'react';
 import { Condition } from '@ltht-react/types';
+import { ButtonProps } from '@ltht-react/button';
 declare const DiagnosisSummary: FC<Props>;
 interface Props extends HTMLAttributes<HTMLDivElement> {
     condition: Condition;
     extendedTemplateDisplayName?: string | undefined;
     extensionTemplateDisplayName?: string | undefined;
     extensionClickHandler?(): void;
-    isReadOnly: boolean;
+    isReadOnly?: boolean;
+    controls?: ButtonProps[];
 }
 export default DiagnosisSummary;

package/lib/organisms/diagnosis-summary.js

@@ -44,17 +44,20 @@ var diagnosis_redacted_1 = __importDefault(require("../molecules/diagnosis-redac
 var StyledTitle = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-block;\n"], ["\n  display: inline-block;\n"])));
 var StyledSummary = styled_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n"], ["\n  display: flex;\n  justify-content: center;\n"])));
 var StyledDescription = styled_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  flex-grow: 1;\n"], ["\n  flex-grow: 1;\n"])));
-var StyledDate = styled_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  text-align: left;\n  width: 15%;\n"], ["\n  text-align: left;\n  width: 15%;\n"])));
-var IconButtonWrapper = (0, styled_1.default)(button_1.Button)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  -webkit-box-align: center;\n  align-items: center;\n  -webkit-box-pack: center;\n  justify-content: center;\n  margin-right: 0.5rem;\n  display: inline-block !important;\n  margin-left: 0.5rem;\n  width: auto;\n"], ["\n  -webkit-box-align: center;\n  align-items: center;\n  -webkit-box-pack: center;\n  justify-content: center;\n  margin-right: 0.5rem;\n  display: inline-block !important;\n  margin-left: 0.5rem;\n  width: auto;\n"])));
-var IconWrapper = styled_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  margin-left: 0.5rem;\n  display: inline-block;\n"], ["\n  margin-left: 0.5rem;\n  display: inline-block;\n"])));
+var StyledLeftContainer = styled_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  flex-grow: 1;\n  flex-direction: row;\n\n  ", " {\n    flex-direction: column;\n  }\n"], ["\n  display: flex;\n  flex-grow: 1;\n  flex-direction: row;\n\n  ", " {\n    flex-direction: column;\n  }\n"])), styles_1.MOBILE_MAXIMUM_MEDIA_QUERY);
+var StyledControlsContainer = styled_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  margin: auto 10px auto 10px;\n  flex-direction: column;\n\n  ", " {\n    margin: 10px 0 0 0;\n    flex-flow: row wrap;\n  }\n\n  ", " {\n    margin: 10px 5px 0 0;\n    flex-direction: column;\n  }\n"], ["\n  display: flex;\n  margin: auto 10px auto 10px;\n  flex-direction: column;\n\n  ", " {\n    margin: 10px 0 0 0;\n    flex-flow: row wrap;\n  }\n\n  ", " {\n    margin: 10px 5px 0 0;\n    flex-direction: column;\n  }\n"])), styles_1.MOBILE_MAXIMUM_MEDIA_QUERY, styles_1.SMALL_SCREEN_MAXIMUM_MEDIA_QUERY);
+var StyledButton = (0, styled_1.default)(button_1.Button)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  margin: 2px 0 2px 0;\n  font-size: 0.8em !important;\n  padding: 1px 5px;\n\n  ", " {\n    margin: 2px 5px 2px 0;\n    width: fit-content;\n  }\n\n  ", " {\n    margin: 2px 0 2px 0;\n    width: 100%;\n    max-width: 200px;\n  }\n"], ["\n  margin: 2px 0 2px 0;\n  font-size: 0.8em !important;\n  padding: 1px 5px;\n\n  ", " {\n    margin: 2px 5px 2px 0;\n    width: fit-content;\n  }\n\n  ", " {\n    margin: 2px 0 2px 0;\n    width: 100%;\n    max-width: 200px;\n  }\n"])), styles_1.MOBILE_MAXIMUM_MEDIA_QUERY, styles_1.SMALL_SCREEN_MAXIMUM_MEDIA_QUERY);
+var StyledDate = styled_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  text-align: left;\n  width: 15%;\n"], ["\n  text-align: left;\n  width: 15%;\n"])));
+var IconButtonWrapper = (0, styled_1.default)(button_1.Button)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  -webkit-box-align: center;\n  align-items: center;\n  -webkit-box-pack: center;\n  justify-content: center;\n  margin-right: 0.5rem;\n  display: inline-block !important;\n  margin-left: 0.5rem;\n  width: auto;\n"], ["\n  -webkit-box-align: center;\n  align-items: center;\n  -webkit-box-pack: center;\n  justify-content: center;\n  margin-right: 0.5rem;\n  display: inline-block !important;\n  margin-left: 0.5rem;\n  width: auto;\n"])));
+var IconWrapper = styled_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  margin-left: 0.5rem;\n  display: inline-block;\n"], ["\n  margin-left: 0.5rem;\n  display: inline-block;\n"])));
 var DiagnosisSummary = function (_a) {
-    var condition = _a.condition, extendedTemplateDisplayName = _a.extendedTemplateDisplayName, extensionTemplateDisplayName = _a.extensionTemplateDisplayName, extensionClickHandler = _a.extensionClickHandler, isReadOnly = _a.isReadOnly, rest = __rest(_a, ["condition", "extendedTemplateDisplayName", "extensionTemplateDisplayName", "extensionClickHandler", "isReadOnly"]);
+    var condition = _a.condition, extendedTemplateDisplayName = _a.extendedTemplateDisplayName, extensionTemplateDisplayName = _a.extensionTemplateDisplayName, extensionClickHandler = _a.extensionClickHandler, _b = _a.isReadOnly, isReadOnly = _b === void 0 ? false : _b, _c = _a.controls, controls = _c === void 0 ? [] : _c, rest = __rest(_a, ["condition", "extendedTemplateDisplayName", "extensionTemplateDisplayName", "extensionClickHandler", "isReadOnly", "controls"]);
     if (condition.metadata.isRedacted) {
         return ((0, jsx_runtime_1.jsx)(StyledSummary, __assign({}, rest, { children: (0, jsx_runtime_1.jsx)(diagnosis_redacted_1.default, { condition: condition }) })));
     }
     var enteredInError = condition.verificationStatus === types_1.ConditionVerificationStatus.EnteredInError;
-    return ((0, jsx_runtime_1.jsxs)(StyledSummary, __assign({}, rest, { children: [(0, jsx_runtime_1.jsxs)(StyledDescription, { children: [(0, jsx_runtime_1.jsx)(StyledTitle, { children: (0, jsx_runtime_1.jsx)(diagnosis_title_1.default, { enteredInError: enteredInError, condition: condition }) }), extensionTemplateDisplayName && !isReadOnly && !enteredInError && ((0, jsx_runtime_1.jsx)(IconButtonWrapper, { onClick: extensionClickHandler, type: "button", styling: { buttonStyle: 'clear' }, value: "", icon: (0, jsx_runtime_1.jsx)(icon_1.default, { type: "folder-plus", size: "medium" }), iconPlacement: "center", iconColour: styles_1.BTN_COLOURS.PRIMARY.VALUE, title: "This diagnosis can be extended further using form '".concat(extensionTemplateDisplayName, "' by clicking here") })), extendedTemplateDisplayName && ((0, jsx_runtime_1.jsx)(IconWrapper, { children: (0, jsx_runtime_1.jsx)(icon_1.default, { type: "comment", size: "medium", title: "This diagnosis has been extended beyond standard diagnosis with form '".concat(extendedTemplateDisplayName, "'.\n           To view these extra details, click into the full diagnosis detail or edit the existing form.") }) })), (0, jsx_runtime_1.jsx)(diagnosis_category_1.default, { enteredInError: enteredInError, condition: condition })] }), (0, jsx_runtime_1.jsxs)(StyledDate, { children: [(0, jsx_runtime_1.jsx)(type_summary_1.DateSummary, { enteredInError: enteredInError, datetime: condition === null || condition === void 0 ? void 0 : condition.assertedDate }), (0, jsx_runtime_1.jsx)(diagnosis_onset_estimated_1.default, { enteredInError: enteredInError, condition: condition }), (0, jsx_runtime_1.jsx)(diagnosis_status_1.default, { enteredInError: enteredInError, condition: condition })] })] })));
+    return ((0, jsx_runtime_1.jsxs)(StyledSummary, __assign({}, rest, { children: [(0, jsx_runtime_1.jsxs)(StyledLeftContainer, { children: [(0, jsx_runtime_1.jsxs)(StyledDescription, { children: [(0, jsx_runtime_1.jsx)(StyledTitle, { children: (0, jsx_runtime_1.jsx)(diagnosis_title_1.default, { enteredInError: enteredInError, condition: condition }) }), extensionTemplateDisplayName && !isReadOnly && !enteredInError && ((0, jsx_runtime_1.jsx)(IconButtonWrapper, { onClick: extensionClickHandler, type: "button", styling: { buttonStyle: 'clear' }, value: "", icon: (0, jsx_runtime_1.jsx)(icon_1.default, { type: "folder-plus", size: "medium" }), iconPlacement: "center", iconColour: styles_1.BTN_COLOURS.PRIMARY.VALUE, title: "This diagnosis can be extended further using form '".concat(extensionTemplateDisplayName, "' by clicking here") })), extendedTemplateDisplayName && ((0, jsx_runtime_1.jsx)(IconWrapper, { children: (0, jsx_runtime_1.jsx)(icon_1.default, { type: "comment", size: "medium", title: "This diagnosis has been extended beyond standard diagnosis with form '".concat(extendedTemplateDisplayName, "'.\n           To view these extra details, click into the full diagnosis detail or edit the existing form.") }) })), (0, jsx_runtime_1.jsx)(diagnosis_category_1.default, { enteredInError: enteredInError, condition: condition })] }), !isReadOnly && controls.length > 0 && ((0, jsx_runtime_1.jsx)(StyledControlsContainer, { children: controls.map(function (props) { return ((0, jsx_runtime_1.jsx)(StyledButton, __assign({}, props))); }) }))] }), (0, jsx_runtime_1.jsxs)(StyledDate, { children: [(0, jsx_runtime_1.jsx)(type_summary_1.DateSummary, { enteredInError: enteredInError, datetime: condition === null || condition === void 0 ? void 0 : condition.assertedDate }), (0, jsx_runtime_1.jsx)(diagnosis_onset_estimated_1.default, { enteredInError: enteredInError, condition: condition }), (0, jsx_runtime_1.jsx)(diagnosis_status_1.default, { enteredInError: enteredInError, condition: condition })] })] })));
 };
 exports.default = DiagnosisSummary;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
 //# sourceMappingURL=diagnosis-summary.js.map

package/lib/organisms/diagnosis-summary.js.map

@@ -1 +1 @@
-{"version":3,"file":"diagnosis-summary.js","sourceRoot":"","sources":["../../src/organisms/diagnosis-summary.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,2DAAoC;AAEpC,2CAA0E;AAC1E,yDAAsD;AACtD,0DAAmC;AACnC,6CAA2C;AAE3C,6CAAgD;AAChD,mFAAkD;AAClD,+EAA8C;AAC9C,6EAA4C;AAC5C,iGAAmE;AACnE,uFAAsD;AAEtD,IAAM,WAAW,GAAG,gBAAM,CAAC,GAAG,iGAAA,8BAE7B,IAAA,CAAA;AACD,IAAM,aAAa,GAAG,gBAAM,CAAC,GAAG,qHAAA,kDAG/B,IAAA,CAAA;AACD,IAAM,iBAAiB,GAAG,gBAAM,CAAC,GAAG,wFAAA,qBAEnC,IAAA,CAAA;AACD,IAAM,UAAU,GAAG,gBAAM,CAAC,GAAG,2GAAA,wCAG5B,IAAA,CAAA;AACD,IAAM,iBAAiB,GAAG,IAAA,gBAAM,EAAC,eAAM,CAAC,4RAAA,yNASvC,IAAA,CAAA;AACD,IAAM,WAAW,GAAG,gBAAM,CAAC,GAAG,yHAAA,sDAG7B,IAAA,CAAA;AAED,IAAM,gBAAgB,GAAc,UAAC,EAOpC;IANC,IAAA,SAAS,eAAA,EACT,2BAA2B,iCAAA,EAC3B,4BAA4B,kCAAA,EAC5B,qBAAqB,2BAAA,EACrB,UAAU,gBAAA,EACP,IAAI,cAN4B,mHAOpC,CADQ;IAEP,IAAI,SAAS,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;QAClC,OAAO,CACL,uBAAC,aAAa,eAAK,IAAI,cACrB,uBAAC,4BAAQ,IAAC,SAAS,EAAE,SAAS,GAAI,IACpB,CACjB,CAAA;IACH,CAAC;IAED,IAAM,cAAc,GAAG,SAAS,CAAC,kBAAkB,KAAK,mCAA2B,CAAC,cAAc,CAAA;IAElG,OAAO,CACL,wBAAC,aAAa,eAAK,IAAI,eACrB,wBAAC,iBAAiB,eAChB,uBAAC,WAAW,cACV,uBAAC,yBAAK,IAAC,cAAc,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,GAAI,GACnD,EACb,4BAA4B,IAAI,CAAC,UAAU,IAAI,CAAC,cAAc,IAAI,CACjE,uBAAC,iBAAiB,IAChB,OAAO,EAAE,qBAAqB,EAC9B,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,EACjC,KAAK,EAAC,EAAE,EACR,IAAI,EAAE,uBAAC,cAAI,IAAC,IAAI,EAAC,aAAa,EAAC,IAAI,EAAC,QAAQ,GAAG,EAC/C,aAAa,EAAC,QAAQ,EACtB,UAAU,EAAE,oBAAW,CAAC,OAAO,CAAC,KAAK,EACrC,KAAK,EAAE,6DAAsD,4BAA4B,uBAAoB,GAC7G,CACH,EACA,2BAA2B,IAAI,CAC9B,uBAAC,WAAW,cACV,uBAAC,cAAI,IACH,IAAI,EAAC,SAAS,EACd,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,gFAAyE,2BAA2B,gHACjB,GAC1F,GACU,CACf,EACD,uBAAC,4BAAQ,IAAC,cAAc,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,GAAI,IAChD,EAEpB,wBAAC,UAAU,eACT,uBAAC,0BAAW,IAAC,cAAc,EAAE,cAAc,EAAE,QAAQ,EAAE,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,YAAY,GAAI,EAClF,uBAAC,mCAAkB,IAAC,cAAc,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,GAAI,EAC5E,uBAAC,0BAAM,IAAC,cAAc,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,GAAI,IACrD,KACC,CACjB,CAAA;AACH,CAAC,CAAA;AAUD,kBAAe,gBAAgB,CAAA"}
+{"version":3,"file":"diagnosis-summary.js","sourceRoot":"","sources":["../../src/organisms/diagnosis-summary.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,2DAAoC;AAEpC,2CAA0E;AAC1E,yDAAsD;AACtD,0DAAmC;AACnC,6CAAwD;AAExD,6CAA8G;AAC9G,mFAAkD;AAClD,+EAA8C;AAC9C,6EAA4C;AAC5C,iGAAmE;AACnE,uFAAsD;AAEtD,IAAM,WAAW,GAAG,gBAAM,CAAC,GAAG,iGAAA,8BAE7B,IAAA,CAAA;AACD,IAAM,aAAa,GAAG,gBAAM,CAAC,GAAG,qHAAA,kDAG/B,IAAA,CAAA;AACD,IAAM,iBAAiB,GAAG,gBAAM,CAAC,GAAG,wFAAA,qBAEnC,IAAA,CAAA;AACD,IAAM,mBAAmB,GAAG,gBAAM,CAAC,GAAG,gLAAA,mEAKlC,EAA0B,wCAG7B,KAHG,mCAA0B,CAG7B,CAAA;AACD,IAAM,uBAAuB,GAAG,gBAAM,CAAC,GAAG,iSAAA,qFAKtC,EAA0B,kEAK1B,EAAgC,mEAInC,KATG,mCAA0B,EAK1B,yCAAgC,CAInC,CAAA;AACD,IAAM,YAAY,GAAG,IAAA,gBAAM,EAAC,eAAM,CAAC,8SAAA,qFAK/B,EAA0B,oEAK1B,EAAgC,8EAKnC,KAVG,mCAA0B,EAK1B,yCAAgC,CAKnC,CAAA;AAED,IAAM,UAAU,GAAG,gBAAM,CAAC,GAAG,2GAAA,wCAG5B,IAAA,CAAA;AACD,IAAM,iBAAiB,GAAG,IAAA,gBAAM,EAAC,eAAM,CAAC,4RAAA,yNASvC,IAAA,CAAA;AACD,IAAM,WAAW,GAAG,gBAAM,CAAC,GAAG,yHAAA,sDAG7B,IAAA,CAAA;AAED,IAAM,gBAAgB,GAAc,UAAC,EAQpC;IAPC,IAAA,SAAS,eAAA,EACT,2BAA2B,iCAAA,EAC3B,4BAA4B,kCAAA,EAC5B,qBAAqB,2BAAA,EACrB,kBAAkB,EAAlB,UAAU,mBAAG,KAAK,KAAA,EAClB,gBAAa,EAAb,QAAQ,mBAAG,EAAE,KAAA,EACV,IAAI,cAP4B,+HAQpC,CADQ;IAEP,IAAI,SAAS,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;QAClC,OAAO,CACL,uBAAC,aAAa,eAAK,IAAI,cACrB,uBAAC,4BAAQ,IAAC,SAAS,EAAE,SAAS,GAAI,IACpB,CACjB,CAAA;IACH,CAAC;IAED,IAAM,cAAc,GAAG,SAAS,CAAC,kBAAkB,KAAK,mCAA2B,CAAC,cAAc,CAAA;IAElG,OAAO,CACL,wBAAC,aAAa,eAAK,IAAI,eACrB,wBAAC,mBAAmB,eAClB,wBAAC,iBAAiB,eAChB,uBAAC,WAAW,cACV,uBAAC,yBAAK,IAAC,cAAc,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,GAAI,GACnD,EACb,4BAA4B,IAAI,CAAC,UAAU,IAAI,CAAC,cAAc,IAAI,CACjE,uBAAC,iBAAiB,IAChB,OAAO,EAAE,qBAAqB,EAC9B,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,EACjC,KAAK,EAAC,EAAE,EACR,IAAI,EAAE,uBAAC,cAAI,IAAC,IAAI,EAAC,aAAa,EAAC,IAAI,EAAC,QAAQ,GAAG,EAC/C,aAAa,EAAC,QAAQ,EACtB,UAAU,EAAE,oBAAW,CAAC,OAAO,CAAC,KAAK,EACrC,KAAK,EAAE,6DAAsD,4BAA4B,uBAAoB,GAC7G,CACH,EACA,2BAA2B,IAAI,CAC9B,uBAAC,WAAW,cACV,uBAAC,cAAI,IACH,IAAI,EAAC,SAAS,EACd,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,gFAAyE,2BAA2B,gHACnB,GACxF,GACU,CACf,EACD,uBAAC,4BAAQ,IAAC,cAAc,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,GAAI,IAChD,EAEnB,CAAC,UAAU,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,IAAI,CACrC,uBAAC,uBAAuB,cACrB,QAAQ,CAAC,GAAG,CAAC,UAAC,KAAK,IAAK,OAAA,CACvB,uBAAC,YAAY,eAAK,KAAK,EAAI,CAC5B,EAFwB,CAExB,CAAC,GACsB,CAC3B,IACmB,EACtB,wBAAC,UAAU,eACT,uBAAC,0BAAW,IAAC,cAAc,EAAE,cAAc,EAAE,QAAQ,EAAE,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,YAAY,GAAI,EAClF,uBAAC,mCAAkB,IAAC,cAAc,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,GAAI,EAC5E,uBAAC,0BAAM,IAAC,cAAc,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,GAAI,IACrD,KACC,CACjB,CAAA;AACH,CAAC,CAAA;AAWD,kBAAe,gBAAgB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ltht-react/diagnosis-summary",
-  "version": "2.0.44",
+  "version": "2.0.46",
   "description": "ltht-react clinical DiagnosisSummary component.",
   "author": "LTHT",
   "homepage": "",
@@ -28,15 +28,15 @@
   "dependencies": {
     "@emotion/react": "^11.0.0",
     "@emotion/styled": "^11.0.0",
-    "@ltht-react/button": "^2.0.44",
-    "@ltht-react/hooks": "^2.0.44",
-    "@ltht-react/icon": "^2.0.44",
-    "@ltht-react/list": "^2.0.44",
-    "@ltht-react/styles": "^2.0.44",
-    "@ltht-react/type-summary": "^2.0.44",
-    "@ltht-react/types": "^2.0.44",
-    "@ltht-react/utils": "^2.0.44",
+    "@ltht-react/button": "^2.0.46",
+    "@ltht-react/hooks": "^2.0.46",
+    "@ltht-react/icon": "^2.0.46",
+    "@ltht-react/list": "^2.0.46",
+    "@ltht-react/styles": "^2.0.46",
+    "@ltht-react/type-summary": "^2.0.46",
+    "@ltht-react/types": "^2.0.46",
+    "@ltht-react/utils": "^2.0.46",
     "react": "^18.2.0"
   },
-  "gitHead": "59265e8d5feeaad081a18a2d494f77815531e450"
+  "gitHead": "6b3f70524bb3175fc2a23cb90e549f5c6a8987bc"
 }

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-onset-estimated.tsx

@@ -1,39 +1,39 @@
-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-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-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-status.tsx

@@ -1,38 +1,38 @@
-import { FC, HTMLAttributes } from 'react'
-import styled from '@emotion/styled'
-
-import { TEXT_COLOURS } from '@ltht-react/styles'
-import { Condition } from '@ltht-react/types'
-import { titleCase } from '@ltht-react/utils'
-
-const StyledConditionStatus = 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 DiagnosisStatus: FC<Props> = ({ condition, enteredInError, ...rest }) => {
-  const values = []
-
-  if (condition.clinicalStatus) values.push(titleCase(condition.clinicalStatus))
-  if (condition.verificationStatus) values.push(titleCase(condition.verificationStatus))
-
-  return (
-    <StyledConditionStatus enteredInError={enteredInError} {...rest}>
-      {values.length > 0 ? values.join(' - ') : 'Insufficient data provided'}
-    </StyledConditionStatus>
-  )
-}
-
-interface Props extends HTMLAttributes<HTMLDivElement> {
-  condition: Condition
-  enteredInError: boolean
-}
-
-interface IStyledDescription {
-  enteredInError: boolean
-}
-
-export default DiagnosisStatus
+import { FC, HTMLAttributes } from 'react'
+import styled from '@emotion/styled'
+
+import { TEXT_COLOURS } from '@ltht-react/styles'
+import { Condition } from '@ltht-react/types'
+import { titleCase } from '@ltht-react/utils'
+
+const StyledConditionStatus = 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 DiagnosisStatus: FC<Props> = ({ condition, enteredInError, ...rest }) => {
+  const values = []
+
+  if (condition.clinicalStatus) values.push(titleCase(condition.clinicalStatus))
+  if (condition.verificationStatus) values.push(titleCase(condition.verificationStatus))
+
+  return (
+    <StyledConditionStatus enteredInError={enteredInError} {...rest}>
+      {values.length > 0 ? values.join(' - ') : 'Insufficient data provided'}
+    </StyledConditionStatus>
+  )
+}
+
+interface Props extends HTMLAttributes<HTMLDivElement> {
+  condition: Condition
+  enteredInError: boolean
+}
+
+interface IStyledDescription {
+  enteredInError: boolean
+}
+
+export default DiagnosisStatus

package/src/atoms/diagnosis-title.tsx

@@ -1,35 +1,35 @@
-import { FC, HTMLAttributes } from 'react'
-import styled from '@emotion/styled'
-
-import { TEXT_COLOURS } from '@ltht-react/styles'
-import { Condition } from '@ltht-react/types'
-import { codeableConceptTextSummary } from '@ltht-react/utils'
-
-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, ...rest }) => {
-  const codes = []
-
-  if (condition.code) codes.push(condition.code)
-
-  return (
-    <StyledConditionTitle enteredInError={enteredInError} {...rest}>
-      {codeableConceptTextSummary(codes)}
-    </StyledConditionTitle>
-  )
-}
-
-interface Props extends HTMLAttributes<HTMLDivElement> {
-  condition: Condition
-  enteredInError: boolean
-}
-
-interface IStyledDescription {
-  enteredInError: boolean
-}
-
-export default DiagnosisTitle
+import { FC, HTMLAttributes } from 'react'
+import styled from '@emotion/styled'
+
+import { TEXT_COLOURS } from '@ltht-react/styles'
+import { Condition } from '@ltht-react/types'
+import { codeableConceptTextSummary } from '@ltht-react/utils'
+
+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, ...rest }) => {
+  const codes = []
+
+  if (condition.code) codes.push(condition.code)
+
+  return (
+    <StyledConditionTitle enteredInError={enteredInError} {...rest}>
+      {codeableConceptTextSummary(codes)}
+    </StyledConditionTitle>
+  )
+}
+
+interface Props extends HTMLAttributes<HTMLDivElement> {
+  condition: Condition
+  enteredInError: boolean
+}
+
+interface IStyledDescription {
+  enteredInError: boolean
+}
+
+export default DiagnosisTitle

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,111 +1,163 @@
-import { FC, HTMLAttributes } 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 } from '@ltht-react/button'
-
-import { BTN_COLOURS } from '@ltht-react/styles'
-import Category from '../atoms/diagnosis-category'
-import Status from '../atoms/diagnosis-status'
-import Title from '../atoms/diagnosis-title'
-import OnsetDateEstimated from '../atoms/diagnosis-onset-estimated'
-import Redacted from '../molecules/diagnosis-redacted'
-
-const StyledTitle = styled.div`
-  display: inline-block;
-`
-const StyledSummary = styled.div`
-  display: flex;
-  justify-content: center;
-`
-const StyledDescription = styled.div`
-  flex-grow: 1;
-`
-const StyledDate = styled.div`
-  text-align: left;
-  width: 15%;
-`
-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;
-`
-const IconWrapper = styled.div`
-  margin-left: 0.5rem;
-  display: inline-block;
-`
-
-const DiagnosisSummary: FC<Props> = ({
-  condition,
-  extendedTemplateDisplayName,
-  extensionTemplateDisplayName,
-  extensionClickHandler,
-  isReadOnly,
-  ...rest
-}) => {
-  if (condition.metadata.isRedacted) {
-    return (
-      <StyledSummary {...rest}>
-        <Redacted condition={condition} />
-      </StyledSummary>
-    )
-  }
-
-  const enteredInError = condition.verificationStatus === ConditionVerificationStatus.EnteredInError
-
-  return (
-    <StyledSummary {...rest}>
-      <StyledDescription>
-        <StyledTitle>
-          <Title enteredInError={enteredInError} condition={condition} />
-        </StyledTitle>
-        {extensionTemplateDisplayName && !isReadOnly && !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>
-        )}
-        <Category enteredInError={enteredInError} condition={condition} />
-      </StyledDescription>
-
-      <StyledDate>
-        <DateSummary enteredInError={enteredInError} datetime={condition?.assertedDate} />
-        <OnsetDateEstimated enteredInError={enteredInError} condition={condition} />
-        <Status enteredInError={enteredInError} condition={condition} />
-      </StyledDate>
-    </StyledSummary>
-  )
-}
-
-interface Props extends HTMLAttributes<HTMLDivElement> {
-  condition: Condition
-  extendedTemplateDisplayName?: string | undefined
-  extensionTemplateDisplayName?: string | undefined
-  extensionClickHandler?(): void
-  isReadOnly: boolean
-}
-
-export default DiagnosisSummary
+import { FC, HTMLAttributes } 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, MOBILE_MAXIMUM_MEDIA_QUERY, SMALL_SCREEN_MAXIMUM_MEDIA_QUERY } from '@ltht-react/styles'
+import Category from '../atoms/diagnosis-category'
+import Status from '../atoms/diagnosis-status'
+import Title from '../atoms/diagnosis-title'
+import OnsetDateEstimated from '../atoms/diagnosis-onset-estimated'
+import Redacted from '../molecules/diagnosis-redacted'
+
+const StyledTitle = styled.div`
+  display: inline-block;
+`
+const StyledSummary = styled.div`
+  display: flex;
+  justify-content: center;
+`
+const StyledDescription = styled.div`
+  flex-grow: 1;
+`
+const StyledLeftContainer = styled.div`
+  display: flex;
+  flex-grow: 1;
+  flex-direction: row;
+
+  ${MOBILE_MAXIMUM_MEDIA_QUERY} {
+    flex-direction: column;
+  }
+`
+const StyledControlsContainer = styled.div`
+  display: flex;
+  margin: auto 10px auto 10px;
+  flex-direction: column;
+
+  ${MOBILE_MAXIMUM_MEDIA_QUERY} {
+    margin: 10px 0 0 0;
+    flex-flow: row wrap;
+  }
+
+  ${SMALL_SCREEN_MAXIMUM_MEDIA_QUERY} {
+    margin: 10px 5px 0 0;
+    flex-direction: column;
+  }
+`
+const StyledButton = styled(Button)`
+  margin: 2px 0 2px 0;
+  font-size: 0.8em !important;
+  padding: 1px 5px;
+
+  ${MOBILE_MAXIMUM_MEDIA_QUERY} {
+    margin: 2px 5px 2px 0;
+    width: fit-content;
+  }
+
+  ${SMALL_SCREEN_MAXIMUM_MEDIA_QUERY} {
+    margin: 2px 0 2px 0;
+    width: 100%;
+    max-width: 200px;
+  }
+`
+
+const StyledDate = styled.div`
+  text-align: left;
+  width: 15%;
+`
+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;
+`
+const IconWrapper = styled.div`
+  margin-left: 0.5rem;
+  display: inline-block;
+`
+
+const DiagnosisSummary: FC<Props> = ({
+  condition,
+  extendedTemplateDisplayName,
+  extensionTemplateDisplayName,
+  extensionClickHandler,
+  isReadOnly = false,
+  controls = [],
+  ...rest
+}) => {
+  if (condition.metadata.isRedacted) {
+    return (
+      <StyledSummary {...rest}>
+        <Redacted condition={condition} />
+      </StyledSummary>
+    )
+  }
+
+  const enteredInError = condition.verificationStatus === ConditionVerificationStatus.EnteredInError
+
+  return (
+    <StyledSummary {...rest}>
+      <StyledLeftContainer>
+        <StyledDescription>
+          <StyledTitle>
+            <Title enteredInError={enteredInError} condition={condition} />
+          </StyledTitle>
+          {extensionTemplateDisplayName && !isReadOnly && !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>
+          )}
+          <Category enteredInError={enteredInError} condition={condition} />
+        </StyledDescription>
+
+        {!isReadOnly && controls.length > 0 && (
+          <StyledControlsContainer>
+            {controls.map((props) => (
+              <StyledButton {...props} />
+            ))}
+          </StyledControlsContainer>
+        )}
+      </StyledLeftContainer>
+      <StyledDate>
+        <DateSummary enteredInError={enteredInError} datetime={condition?.assertedDate} />
+        <OnsetDateEstimated enteredInError={enteredInError} condition={condition} />
+        <Status enteredInError={enteredInError} condition={condition} />
+      </StyledDate>
+    </StyledSummary>
+  )
+}
+
+interface Props extends HTMLAttributes<HTMLDivElement> {
+  condition: Condition
+  extendedTemplateDisplayName?: string | undefined
+  extensionTemplateDisplayName?: string | undefined
+  extensionClickHandler?(): void
+  isReadOnly?: boolean
+  controls?: ButtonProps[]
+}
+
+export default DiagnosisSummary