@linzjs/lui 17.36.12 → 17.37.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [17.37.0](https://github.com/linz/lui/compare/v17.36.12...v17.37.0) (2023-03-06)
+
+
+### Features
+
+* added optional help button to modal header ([#872](https://github.com/linz/lui/issues/872)) ([07baded](https://github.com/linz/lui/commit/07baded35af9229f31a5eab65d5dbbc8a8eea63c))
+
 ## [17.36.12](https://github.com/linz/lui/compare/v17.36.11...v17.36.12) (2023-03-05)
 
 

package/dist/components/LuiModal/LuiModal.d.ts

@@ -6,6 +6,7 @@ interface ILuiModal {
     className?: string;
     maxWidth?: boolean;
     headingText?: string;
+    helpLink?: string;
     lowContrast?: boolean;
     preventAutoFocus?: boolean;
     appendToElement?: () => HTMLElement;
@@ -17,6 +18,7 @@ export declare const LuiAlertModal: React.FC<React.PropsWithChildren<{
 export declare const LuiAlertModalButtons: React.FC<React.PropsWithChildren<unknown>>;
 interface IModalHeader {
     headingText?: string;
+    helpLink?: string;
     onClose?: () => void;
 }
 export declare const LuiModalHeader: React.FC<React.PropsWithChildren<IModalHeader>>;

package/dist/index.js

@@ -42418,7 +42418,7 @@ var LuiModal = function (props) {
         parentSelector: props.appendToElement
     })),
         React__default["default"].createElement("div", { ref: node, className: clsx$1('lui-modal lui-box-shadow', props.maxWidth && 'lui-max-width', props.headingText && 'lui-modal-no-padding', props.className) },
-            props.headingText && (React__default["default"].createElement(LuiModalHeader, { headingText: props.headingText, onClose: props.onClose })),
+            props.headingText && (React__default["default"].createElement(LuiModalHeader, { headingText: props.headingText, helpLink: props.helpLink, onClose: props.onClose })),
             React__default["default"].createElement("div", { className: clsx$1(props.headingText && 'lui-modal-container'), ref: function (element) {
                     if (!props.preventAutoFocus &&
                         element &&
@@ -42440,8 +42440,11 @@ var LuiAlertModalButtons = function (props) {
 var LuiModalHeader = function (props) {
     return (React__default["default"].createElement("header", { className: "lui-modal-header" }, props.headingText && (React__default["default"].createElement("div", { className: "lui-modal-header-title" },
         React__default["default"].createElement("h1", null, props.headingText),
-        props.onClose && (React__default["default"].createElement("button", { className: "lui-modal-header-close-btn", onClick: props.onClose },
-            React__default["default"].createElement("i", { className: "material-icons-round lui-modal-header-btn-size" }, "close")))))));
+        React__default["default"].createElement("div", { className: "lui-modal-header-buttons" },
+            props.helpLink && (React__default["default"].createElement("button", { className: "lui-modal-header-help-btn", onClick: function () { return window.open(props.helpLink); } },
+                React__default["default"].createElement("i", { className: "material-icons-round lui-modal-header-btn-size" }, "help_outline"))),
+            props.onClose && (React__default["default"].createElement("button", { className: "lui-modal-header-close-btn", onClick: props.onClose },
+                React__default["default"].createElement("i", { className: "material-icons-round lui-modal-header-btn-size" }, "close"))))))));
 };
 
 var css_248z$6 = "@keyframes react-loading-skeleton {\n    100% {\n        transform: translateX(100%);\n    }\n}\n\n.react-loading-skeleton {\n    --base-color: #ebebeb;\n    --highlight-color: #f5f5f5;\n    --animation-duration: 1.5s;\n    --animation-direction: normal;\n    --pseudo-element-display: block; /* Enable animation */\n\n    background-color: var(--base-color);\n\n    width: 100%;\n    border-radius: 0.25rem;\n    display: inline-flex;\n    line-height: 1;\n\n    position: relative;\n    overflow: hidden;\n    z-index: 1; /* Necessary for overflow: hidden to work correctly in Safari */\n}\n\n.react-loading-skeleton::after {\n    content: ' ';\n    display: var(--pseudo-element-display);\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    height: 100%;\n    background-repeat: no-repeat;\n    background-image: linear-gradient(\n        90deg,\n        var(--base-color),\n        var(--highlight-color),\n        var(--base-color)\n    );\n    transform: translateX(-100%);\n\n    animation-name: react-loading-skeleton;\n    animation-direction: var(--animation-direction);\n    animation-duration: var(--animation-duration);\n    animation-timing-function: ease-in-out;\n    animation-iteration-count: infinite;\n}\n";