@linzjs/lui 17.36.12 → 17.38.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [17.38.0](https://github.com/linz/lui/compare/v17.37.0...v17.38.0) (2023-03-06)
+
+
+### Features
+
+* Colour updates/lint ([#873](https://github.com/linz/lui/issues/873)) ([1e73817](https://github.com/linz/lui/commit/1e738178151647f2a272ae7f4960c0d53c1ea636))
+
+# [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

@@ -39986,7 +39986,7 @@ function isChromatic() {
         (window === null || window === void 0 ? void 0 : window.location.href.match(/chromatic=true/)));
 }
 
-var css_248z$7 = ":export {\n  charcoal: #2a292c;\n  fuscous: #6b6966;\n  gray: #989189;\n  silver: #beb9b4;\n  lily: #eaeaea;\n  hint: #f9f9f9;\n  snow: #ffffff;\n  white: #ffffff;\n  teal: #00425d;\n  sea: #007198;\n  electric: #0096cc;\n  spray: #73c8e1;\n  polar: #e2f3f7;\n  sherpa: #004b50;\n  surfie: #017a76;\n  persian: #00a599;\n  downy: #73cdc8;\n  iceberg: #dcf5f0;\n  sacramento: #004e32;\n  salem: #08814d;\n  pigment: #0aa245;\n  granny: #9bd79b;\n  panache: #e9fae7;\n  brand-primary: #004b50;\n  brand-secondary: #017a76;\n  error: #cc0000;\n  error-bg: #f5cccc;\n  error-focus: #5a0000;\n  warning: #ea6a2e;\n  warning-bg: #fbdfd2;\n  warning-focus: #b33a01;\n  success: #0aa245;\n  success-bg: #e9fae7;\n  info: #3a7cdf;\n  info-bg: #d8e5f9;\n  visited: #00425d;\n  green-hover: #107c3a;\n  green-active: #094a22;\n  green-btn: #0aa245;\n  txt-link: #0096cc;\n  primary-hover-btn: #005678;\n  selection: #c7e9f3;\n  heading-color: #017a76;\n  heading-color--secondary: #2a292c;\n  base-type-color: #2a292c;\n  input-text: #2a292c;\n  input-placeholder: #6b6966;\n  input-placeholder-when-disabled: #989189;\n  base-icon-color: #007198;\n  disabled-color: #989189;\n  disabled-color-dark: #6b6966;\n  linz-color-primary: #023d48;\n  linz-color-primary-hover: #01818a;\n  linz-color-tertiary: #e1e44a;\n  linz-color-tertiary-hover: #cdcf59;\n  color-test-pink: #f09;\n  linz-linear-gradient-blue: linear-gradient(70deg, #00425d 12%, #007198 100%);\n  linz-linear-gradient-teal: linear-gradient(270deg, #00a599 1%, #73cdc8 100%);\n}";
+var css_248z$7 = ":export {\n  charcoal: #2a292c;\n  fuscous: #6b6966;\n  gray: #989189;\n  silver: #beb9b4;\n  lily: #eaeaea;\n  dew: #DAD7D6;\n  hint: #f9f9f9;\n  snow: #ffffff;\n  white: #ffffff;\n  teal: #00425d;\n  sea: #007198;\n  electric: #0096cc;\n  spray: #73c8e1;\n  polar: #e2f3f7;\n  memesia: #1F69C3;\n  sherpa: #004b50;\n  surfie: #017a76;\n  persian: #00a599;\n  downy: #73cdc8;\n  iceberg: #dcf5f0;\n  sacramento: #004e32;\n  salem: #08814d;\n  pigment: #0aa245;\n  granny: #9bd79b;\n  panache: #e9fae7;\n  brand-primary: #004b50;\n  brand-secondary: #017a76;\n  engine: #cc0000;\n  carrot: #EA6A2E;\n  kendall: #F5CCCC;\n  elizabeth: #FBDED0;\n  andrea: #3A7CDF;\n  celestial: #D7E5F9;\n  golf: #0AA345;\n  error: #cc0000;\n  error-bg: #F5CCCC;\n  error-focus: #5a0000;\n  warning: #EA6A2E;\n  warning-bg: #fbdfd2;\n  warning-focus: #b33a01;\n  success: #0aa245;\n  success-bg: #e9fae7;\n  info: #3A7CDF;\n  info-bg: #d8e5f9;\n  visited: #00425d;\n  green-hover: #107c3a;\n  green-active: #094a22;\n  green-btn: #0aa245;\n  txt-link: #0096cc;\n  primary-hover-btn: #005678;\n  selection: #c7e9f3;\n  heading-color: #017a76;\n  heading-color--secondary: #2a292c;\n  base-type-color: #2a292c;\n  input-text: #2a292c;\n  input-placeholder: #6b6966;\n  input-placeholder-when-disabled: #989189;\n  base-icon-color: #007198;\n  disabled-color: #989189;\n  disabled-color-dark: #6b6966;\n  linz-color-primary: #023d48;\n  linz-color-primary-hover: #01818a;\n  linz-color-tertiary: #e1e44a;\n  linz-color-tertiary-hover: #cdcf59;\n  color-test-pink: #f09;\n  linz-linear-gradient-blue: linear-gradient(70deg, #00425d 12%, #007198 100%);\n  linz-linear-gradient-teal: linear-gradient(270deg, #00a599 1%, #73cdc8 100%);\n}";
 styleInject(css_248z$7);
 
 var _excluded = ["allowCreateWhileLoading", "createOptionPosition", "formatCreateLabel", "isValidNewOption", "getNewOptionData", "onCreateOption", "options", "onChange"];
@@ -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";