@linzjs/lui 10.10.0 → 10.11.3

package/CHANGELOG.md

@@ -1,3 +1,31 @@
+## [10.11.3](https://github.com/linz/lui/compare/v10.11.2...v10.11.3) (2021-11-29)
+
+
+### Bug Fixes
+
+* make story book a dev dependency so its not force on lui's dependants ([#475](https://github.com/linz/lui/issues/475)) ([4e1d67d](https://github.com/linz/lui/commit/4e1d67db4c8e1ca62eeee29a6dc7c5aae88367d5))
+
+## [10.11.2](https://github.com/linz/lui/compare/v10.11.1...v10.11.2) (2021-11-19)
+
+
+### Bug Fixes
+
+* Adds LuiIcon Import scss ([#472](https://github.com/linz/lui/issues/472)) ([5e69e4b](https://github.com/linz/lui/commit/5e69e4b2365dfb68366d9ded8c490fdc89ee5661))
+
+## [10.11.1](https://github.com/linz/lui/compare/v10.11.0...v10.11.1) (2021-11-17)
+
+
+### Bug Fixes
+
+* LuiComboSelect now styled appropriately everywhere ([#471](https://github.com/linz/lui/issues/471)) ([17a36db](https://github.com/linz/lui/commit/17a36db7eff91e579efbf513db16f3404ce76f09))
+
+# [10.11.0](https://github.com/linz/lui/compare/v10.10.0...v10.11.0) (2021-11-15)
+
+
+### Features
+
+* Add FileUploadBox - Refactor scss into global scss forward ([#469](https://github.com/linz/lui/issues/469)) ([3b8e7d1](https://github.com/linz/lui/commit/3b8e7d11949a48c37c7a8d4f096c680f223af046))
+
 # [10.10.0](https://github.com/linz/lui/compare/v10.9.0...v10.10.0) (2021-11-14)
 
 

package/README.md

@@ -21,6 +21,7 @@ _It was foreseen in the stars that Lui was destined for greatness, a UI library
 - [🎨 Lui on Figma](https://www.figma.com/file/E7g3n5ziI7bR8MisISayia/LUI-components)
 - [🔁 Lui on Github](https://github.com/linz/Lui)
 - [🔎 Lui on Chromatic](https://www.chromatic.com/builds?appId=5eaf53c737a54a0022e6749c)
+- [📄 Lui on UX Confluence](https://confluence.linz.govt.nz/display/STEP/Lui+%28LINZ+User+Interface%29+Design+system)
 - [💬 Lui Community of Practice on LINZ Slack - #cop-lui](https://linz.slack.com/archives/CP807EN31)
 
 and...

package/dist/components/LuiFormElements/LuiFileInputBox/LuiFileInputBox.d.ts

@@ -1,4 +1,3 @@
-import './LuiFileInputBox.scss';
 export interface Props {
     fileDescription: string;
     acceptedExtensions: string[];

package/dist/components/LuiForms/LuiComboSelect/LuiComboSelect.stories.d.ts

@@ -1,37 +1,5 @@
 import React from 'react';
-import './LuiComboSelect.stories.scss';
-declare const _default: {
-    title: string;
-    component: React.ForwardRefExoticComponent<Partial<import("react-select").Props<import("./LuiComboSelect").LuiComboSelectOption, boolean, import("react-select").GroupBase<any>>> & React.RefAttributes<import("react-select").SelectInstance<import("./LuiComboSelect").LuiComboSelectOption, boolean, import("react-select").GroupBase<any>>>>;
-    argTypes: {
-        value: {
-            /** a list of simple values */
-            options: string[];
-            /** a map between the simple values for display in Storybook to OBJECTS for react-select */
-            mapping: {
-                [k: string]: {
-                    value: string;
-                    label: string;
-                    isDisabled?: undefined;
-                } | {
-                    value: string;
-                    label: string;
-                    isDisabled: boolean;
-                };
-            };
-            control: {
-                type: string;
-                /** a map from the simple value to the display string for storybook */
-                labels: {
-                    [k: string]: string;
-                };
-            };
-        };
-        onChange: {
-            action: string;
-        };
-    };
-};
+declare const _default: import("@storybook/react").Meta<Partial<import("react-select").Props<import("./LuiComboSelect").LuiComboSelectOption, boolean, import("react-select").GroupBase<any>>> & React.RefAttributes<import("react-select").SelectInstance<import("./LuiComboSelect").LuiComboSelectOption, boolean, import("react-select").GroupBase<any>>>>;
 export default _default;
 export declare const blank: import("@storybook/react").Story<Partial<import("react-select").Props<import("./LuiComboSelect").LuiComboSelectOption, boolean, import("react-select").GroupBase<any>>> & React.RefAttributes<import("react-select").SelectInstance<import("./LuiComboSelect").LuiComboSelectOption, boolean, import("react-select").GroupBase<any>>>>;
 export declare const focus: import("@storybook/react").Story<Partial<import("react-select").Props<import("./LuiComboSelect").LuiComboSelectOption, boolean, import("react-select").GroupBase<any>>> & React.RefAttributes<import("react-select").SelectInstance<import("./LuiComboSelect").LuiComboSelectOption, boolean, import("react-select").GroupBase<any>>>>;

package/dist/components/LuiIcon/LuiIcon.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import './LuiIcon.scss';
 export declare const ICONS: {
     ic_account_circle: JSX.Element;
     ic_add_circle_outline: JSX.Element;
@@ -68,6 +69,9 @@ export declare const ICON_STATUS: {
     none: string;
     error: string;
     warning: string;
+    success: string;
+    interactive: string;
+    disabled: string;
 };
 export declare const LuiIcon: ({ name, className, size, title, alt, status, spanProps, }: LuiIconProps) => JSX.Element | null;
 export {};

package/dist/lui.cjs.development.js

@@ -642,6 +642,19 @@ function LuiFormikCheckbox(props) {
   }));
 }
 
+var LuiFormikFormLabel = function LuiFormikFormLabel(props) {
+  return React__default.createElement("div", {
+    className: clsx('LuiFormLabel-wrapper', props.className && "" + props.className)
+  }, props.children, React__default.createElement("label", {
+    className: "LuiFormLabel",
+    htmlFor: props["for"]
+  }, props.required && React__default.createElement("span", {
+    className: "lui-required-input-icon"
+  }, "*"), props.label), props.tooltip && React__default.createElement("i", {
+    className: "material-icons-round"
+  }, "help"));
+};
+
 var LuiFormikTextInput = /*#__PURE__*/formik.connect(function (props) {
   var error = formik.getIn(props.formik.errors, props.name);
   var touch = formik.getIn(props.formik.touched, props.name);
@@ -719,19 +732,6 @@ var LuiFormikTextInput = /*#__PURE__*/formik.connect(function (props) {
   }));
 });
 
-var LuiFormikFormLabel = function LuiFormikFormLabel(props) {
-  return React__default.createElement("div", {
-    className: clsx('LuiFormLabel-wrapper', props.className && "" + props.className)
-  }, props.children, React__default.createElement("label", {
-    className: "LuiFormLabel",
-    htmlFor: props["for"]
-  }, props.required && React__default.createElement("span", {
-    className: "lui-required-input-icon"
-  }, "*"), props.label), props.tooltip && React__default.createElement("i", {
-    className: "material-icons-round"
-  }, "help"));
-};
-
 var LuiFormikRadioButton = function LuiFormikRadioButton(props) {
   var _useField = formik.useField(props),
       field = _useField[0],
@@ -825,6 +825,11 @@ var LuiFormikSelect = /*#__PURE__*/formik.connect(function (props) {
   })));
 });
 
+var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
+
+var css = ":root {\n  --color-grey-80: #414042;\n  --color-grey-60: #55504b;\n  --color-grey-30: #989189;\n  --color-grey-20: #beb9b4;\n  --color-grey-10: #eaeaea;\n  --color-grey-05: #f9f9f9;\n  --color-blue-100: #00425d;\n  --color-blue-75: #007198;\n  --color-blue-50: #0096cc;\n  --color-blue-25: #73c8e1;\n  --color-blue-05: #e2f3f7;\n  --color-teal-100: #004b50;\n  --color-teal-75: #017a76;\n  --color-teal-50: #00a599;\n  --color-teal-25: #73cdc8;\n  --color-teal-05: #dcf5f0;\n  --color-green-100: #004e32;\n  --color-green-75: #08814d;\n  --color-green-50: #0aa245;\n  --color-green-25: #9bd79b;\n  --color-green-05: #e9fae7;\n  --brand-primary: #00425d;\n  --brand-secondary: #017a76;\n  --color-success: #0aa245;\n  --color-success-bg: #e9fae7;\n  --color-info: #3a7cdf;\n  --color-info-bg: #d8e5f9;\n  --color-warning: #ea6a2e;\n  --color-warning-bg: #fbdfd2;\n  --color-error: #cc0000;\n  --color-error-focus: #5a0000;\n  --color-error-bg: #f5cccc;\n  --color-visited: #4c2c92;\n  --color-green-hover: #205f12;\n  --color-green-active: #16430c;\n  --color-green-btn: #2e881a;\n  --color-txt-link: #1f69c3;\n  --color-primary-hover-btn: #004e6a;\n  --color-selection: #c7e9f3;\n  --heading-color: #017a76;\n  --heading-color--secondary: #414042;\n  --base-type-color: #414042;\n  --base-icon-color: #007198;\n  --disabled-color: #989189;\n  --disabled-color-dark: #55504b;\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}\n\n/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n.LuiIcon_LuiIcon__d29af64c {\n  display: inline-block;\n  height: 100%;\n  width: 100%;\n}\n\n.LuiIcon_LuiIcon_Xl__d29af64c {\n  max-height: 64px;\n  max-width: 64px;\n}\n.LuiIcon_LuiIcon_Xl__d29af64c > svg {\n  height: 64px;\n  width: 64px;\n}\n\n.LuiIcon_LuiIcon_Lg__d29af64c {\n  max-height: 48px;\n  max-width: 48px;\n}\n.LuiIcon_LuiIcon_Lg__d29af64c > svg {\n  height: 48px;\n  width: 48px;\n}\n\n.LuiIcon_LuiIcon_Md__d29af64c {\n  height: 24px;\n  max-height: 24px;\n  max-width: 24px;\n  width: 24px;\n}\n.LuiIcon_LuiIcon_Md__d29af64c > svg {\n  height: 24px;\n  width: 24px;\n}\n\n.LuiIcon_LuiIcon_Sm__d29af64c {\n  max-height: 16px;\n  max-width: 16px;\n}\n.LuiIcon_LuiIcon_Sm__d29af64c > svg {\n  height: 16px;\n  width: 16px;\n}\n\n.LuiIcon_LuiIcon_Xs__d29af64c {\n  max-height: 12px;\n  max-width: 12px;\n}\n.LuiIcon_LuiIcon_Xs__d29af64c > svg {\n  height: 12px;\n  width: 12px;\n}\n\n.LuiIcon_LuiIcon_Warning__d29af64c {\n  fill: #ea6a2e;\n}\n\n.LuiIcon_LuiIcon_Error__d29af64c {\n  fill: #cc0000;\n}\n\n.LuiIcon_LuiIcon_Success__d29af64c {\n  fill: #0aa245;\n}\n\n.LuiIcon_LuiIcon_Interactive__d29af64c {\n  fill: #007198;\n}\n\n.LuiIcon_LuiIcon_Disabled__d29af64c {\n  fill: #989189;\n}";
+n(css,{});
+
 // NOTE: This is a generated file, nothing you do here matters
 
 var ic_account_circle = /*#__PURE__*/React__default.createElement("svg", {
@@ -1121,7 +1126,10 @@ var ICON_SIZES = {
 var ICON_STATUS = {
   none: '',
   error: 'LuiIcon--error',
-  warning: 'LuiIcon--warning'
+  warning: 'LuiIcon--warning',
+  success: 'LuiIcon--success',
+  interactive: 'LuiIcon--interactive',
+  disabled: 'LuiIcon--disabled'
 };
 var LuiIcon = function LuiIcon(_ref) {
   var name = _ref.name,
@@ -4647,11 +4655,9 @@ function isChromatic() {
   return !!(window.navigator.userAgent.match(/Chromatic/) || window.location.href.match(/chromatic=true/));
 }
 
-var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
-
-var css = ":root {\n  --color-grey-80: #414042;\n  --color-grey-60: #55504b;\n  --color-grey-30: #989189;\n  --color-grey-20: #beb9b4;\n  --color-grey-10: #eaeaea;\n  --color-grey-05: #f9f9f9;\n  --color-blue-100: #00425d;\n  --color-blue-75: #007198;\n  --color-blue-50: #0096cc;\n  --color-blue-25: #73c8e1;\n  --color-blue-05: #e2f3f7;\n  --color-teal-100: #004b50;\n  --color-teal-75: #017a76;\n  --color-teal-50: #00a599;\n  --color-teal-25: #73cdc8;\n  --color-teal-05: #dcf5f0;\n  --color-green-100: #004e32;\n  --color-green-75: #08814d;\n  --color-green-50: #0aa245;\n  --color-green-25: #9bd79b;\n  --color-green-05: #e9fae7;\n  --brand-primary: #00425d;\n  --brand-secondary: #017a76;\n  --color-success: #0aa245;\n  --color-success-bg: #e9fae7;\n  --color-info: #3a7cdf;\n  --color-info-bg: #d8e5f9;\n  --color-warning: #ea6a2e;\n  --color-warning-bg: #fbdfd2;\n  --color-error: #cc0000;\n  --color-error-focus: #5a0000;\n  --color-error-bg: #f5cccc;\n  --color-visited: #4c2c92;\n  --color-green-hover: #205f12;\n  --color-green-active: #16430c;\n  --color-green-btn: #2e881a;\n  --color-txt-link: #1f69c3;\n  --color-primary-hover-btn: #004e6a;\n  --color-selection: #c7e9f3;\n  --heading-color: #017a76;\n  --heading-color--secondary: #414042;\n  --base-type-color: #414042;\n  --base-icon-color: #007198;\n  --disabled-color: #989189;\n  --disabled-color-dark: #55504b;\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$1 = ":root {\n  --color-grey-80: #414042;\n  --color-grey-60: #55504b;\n  --color-grey-30: #989189;\n  --color-grey-20: #beb9b4;\n  --color-grey-10: #eaeaea;\n  --color-grey-05: #f9f9f9;\n  --color-blue-100: #00425d;\n  --color-blue-75: #007198;\n  --color-blue-50: #0096cc;\n  --color-blue-25: #73c8e1;\n  --color-blue-05: #e2f3f7;\n  --color-teal-100: #004b50;\n  --color-teal-75: #017a76;\n  --color-teal-50: #00a599;\n  --color-teal-25: #73cdc8;\n  --color-teal-05: #dcf5f0;\n  --color-green-100: #004e32;\n  --color-green-75: #08814d;\n  --color-green-50: #0aa245;\n  --color-green-25: #9bd79b;\n  --color-green-05: #e9fae7;\n  --brand-primary: #00425d;\n  --brand-secondary: #017a76;\n  --color-success: #0aa245;\n  --color-success-bg: #e9fae7;\n  --color-info: #3a7cdf;\n  --color-info-bg: #d8e5f9;\n  --color-warning: #ea6a2e;\n  --color-warning-bg: #fbdfd2;\n  --color-error: #cc0000;\n  --color-error-focus: #5a0000;\n  --color-error-bg: #f5cccc;\n  --color-visited: #4c2c92;\n  --color-green-hover: #205f12;\n  --color-green-active: #16430c;\n  --color-green-btn: #2e881a;\n  --color-txt-link: #1f69c3;\n  --color-primary-hover-btn: #004e6a;\n  --color-selection: #c7e9f3;\n  --heading-color: #017a76;\n  --heading-color--secondary: #414042;\n  --base-type-color: #414042;\n  --base-icon-color: #007198;\n  --disabled-color: #989189;\n  --disabled-color-dark: #55504b;\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 modules_5b17bb95 = {"color-grey-80":"#414042","color-grey-60":"#55504b","color-grey-30":"#989189","color-grey-20":"#beb9b4","color-grey-10":"#eaeaea","color-grey-05":"#f9f9f9","color-blue-100":"#00425d","color-blue-75":"#007198","color-blue-50":"#0096cc","color-blue-25":"#73c8e1","color-blue-05":"#e2f3f7","color-teal-100":"#004b50","color-teal-75":"#017a76","color-teal-50":"#00a599","color-teal-25":"#73cdc8","color-teal-05":"#dcf5f0","color-green-100":"#004e32","color-green-75":"#08814d","color-green-50":"#0aa245","color-green-25":"#9bd79b","color-green-05":"#e9fae7","brand-primary":"#00425d","brand-secondary":"#017a76","color-success":"#0aa245","color-success-bg":"#e9fae7","color-info":"#3a7cdf","color-info-bg":"#d8e5f9","color-warning":"#ea6a2e","color-warning-bg":"#fbdfd2","color-error":"#cc0000","color-error-focus":"#5a0000","color-error-bg":"#f5cccc","color-visited":"#4c2c92","color-green-hover":"#205f12","color-green-active":"#16430c","color-green-btn":"#2e881a","color-txt-link":"#1f69c3","color-primary-hover-btn":"#004e6a","color-selection":"#c7e9f3","heading-color":"#017a76","heading-color--secondary":"#414042","base-type-color":"#414042","base-icon-color":"#007198","disabled-color":"#989189","disabled-color-dark":"#55504b","linz-color-primary":"#023d48","linz-color-primary-hover":"#01818a","linz-color-tertiary":"#e1e44a","linz-color-tertiary-hover":"#cdcf59","color-test-pink":"#f09","linz-linear-gradient-blue":"linear-gradient(70deg, #00425d 12%, #007198 100%)","linz-linear-gradient-teal":"linear-gradient(270deg, #00a599 1%, #73cdc8 100%)"};
-n(css,{});
+n(css$1,{});
 
 /**
  * A wrapper around React Select with Lui styling
@@ -4711,29 +4717,22 @@ function LuiComboSelectActual(givenProps, ref) {
       input: function input(provided) {
         return _extends({}, provided, {
           height: '40px',
-          minHeight: '38px'
-        });
-      },
-      control: function control(provided) {
-        return _extends({}, provided, {
-          lineHeight: 2.8
+          minHeight: '40px',
+          fontWeight: 400,
+          input: {
+            height: '38px !important'
+          }
         });
       },
       singleValue: function singleValue(provided) {
         return _extends({}, provided, {
-          fontWeight: 400,
           color: '#414042',
-          position: 'fixed'
-        });
-      },
-      valueContainer: function valueContainer(provided) {
-        return _extends({}, provided, {
-          position: 'inherit'
+          fontWeight: 400
         });
       },
       placeholder: function placeholder(provided) {
         return _extends({}, provided, {
-          position: 'fixed'
+          fontWeight: 400
         });
       }
     }
@@ -6862,9 +6861,6 @@ var LuiTooltip = function LuiTooltip(props) {
   }, children);
 };
 
-var css$1 = ".LuiFileInputBox_LuiFileInputBoxUpload__b0615faf {\n  outline: 2px dashed #eaeaea;\n  color: dimgray;\n  cursor: pointer;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n}\n.LuiFileInputBox_LuiFileInputBoxUpload__b0615faf:hover {\n  background: #eef1f5;\n}\n\n.LuiFileInputBox_LuiFileInputBoxUploadInput__b0615faf {\n  opacity: 0;\n  cursor: pointer;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: block;\n}\n\n.LuiFileInputBox_LuiFileInputBoxUploadContainer__b0615faf {\n  text-align: center;\n  padding: 24px 20px;\n}\n\n.LuiFileInputBox_LuiFileInputBoxUploadError__b0615faf {\n  outline: 2px dashed #cc0000;\n}\n\n.LuiFileInputBox_LuiFileInputBoxUploadIconSuccess__b0615faf {\n  width: 120px;\n  fill: #0aa245;\n  margin-left: auto;\n  margin-right: auto;\n}\n\n.LuiFileInputBox_LuiFileInputBoxUploadIconUpload__b0615faf {\n  width: 120px;\n  fill: #007198;\n  margin-left: auto;\n  margin-right: auto;\n}\n\n.LuiFileInputBox_LuiFileInputBoxUploadIconError__b0615faf {\n  width: 168px;\n  fill: #cc0000;\n  margin-left: auto;\n  margin-right: auto;\n}\n\n.LuiFileInputBox_LuiFileInputBoxUploadText__b0615faf {\n  margin-top: 0;\n  padding-top: 8px;\n}\n.LuiFileInputBox_LuiFileInputBoxUploadText__b0615faf span {\n  color: #3a7cdf;\n  font-weight: 600;\n}\n\n.LuiFileInputBox_LuiFileInputBoxUploadTextNoPadding__b0615faf {\n  padding: 0;\n  font-size: 14px;\n}\n\n.LuiFileInputBox_LuiFileInputBoxUploadFileName__b0615faf {\n  margin-top: 0;\n  padding-bottom: 12px;\n  font-weight: 600;\n}";
-n(css$1,{});
-
 var LuiFileInputBox = function LuiFileInputBox(props) {
   var _useState = React.useState(),
       file = _useState[0],