@linzjs/lui 11.6.0 → 11.10.0

package/CHANGELOG.md

@@ -1,3 +1,31 @@
+# [11.10.0](https://github.com/linz/lui/compare/v11.9.0...v11.10.0) (2022-01-11)
+
+
+### Features
+
+* **LuiSelectInput & LuiTextAreaInput:** Added Mandatory star ([#506](https://github.com/linz/lui/issues/506)) ([cd296bf](https://github.com/linz/lui/commit/cd296bf67a686bccfd05b0c1d143da5298b7ee12))
+
+# [11.9.0](https://github.com/linz/lui/compare/v11.8.0...v11.9.0) (2022-01-11)
+
+
+### Features
+
+* **LuiComboSelect:** Change colors to match LuiTextInput ([#510](https://github.com/linz/lui/issues/510)) ([c9bc9ee](https://github.com/linz/lui/commit/c9bc9eebfbed6411cf332c530c27728085c6603e))
+
+# [11.8.0](https://github.com/linz/lui/compare/v11.7.0...v11.8.0) (2022-01-11)
+
+
+### Features
+
+* Badges component ([#505](https://github.com/linz/lui/issues/505)) ([eff22b7](https://github.com/linz/lui/commit/eff22b7aba29a7e82e59c3a46204e3953047800e))
+
+# [11.7.0](https://github.com/linz/lui/compare/v11.6.0...v11.7.0) (2022-01-11)
+
+
+### Features
+
+* **LuiTextInput:** Label font styling change ([#508](https://github.com/linz/lui/issues/508)) ([460a800](https://github.com/linz/lui/commit/460a80061933f2945fb5f8fb13fc976b581730bc))
+
 # [11.6.0](https://github.com/linz/lui/compare/v11.5.0...v11.6.0) (2022-01-11)
 
 

package/dist/components/LuiBadge/LuiBadge.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface ILuiBadge {
+    children: React.ReactNode;
+    size?: 'sm' | 'default' | 'lg';
+    backgroundFill?: boolean;
+    variation?: 'default' | 'warning';
+}
+export declare const LuiBadge: (props: ILuiBadge) => JSX.Element;

package/dist/components/LuiBadge/LuiBadge.stories.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import '../../scss/base.scss';
+import './LuiBadgeStory.scss';
+declare const _default: {
+    title: string;
+    component: (props: import("./LuiBadge").ILuiBadge) => JSX.Element;
+};
+export default _default;
+export declare const LuiBadgeStory: (args: any) => JSX.Element;

package/dist/components/LuiBadge/LuiBadge.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -9,6 +9,7 @@ export interface SelectProps {
     onChange?: ChangeEventHandler<HTMLSelectElement>;
     options: SelectOptions[];
     value: string;
+    mandatory?: boolean;
     hideLabel?: boolean;
     selectProps?: SelectHTMLAttributes<HTMLSelectElement>;
     label: JSX.Element | string;

package/dist/components/LuiFormElements/LuiSelectInput/LuiSelectInput.stories.d.ts

@@ -29,3 +29,7 @@ export declare const Error: {
     (): JSX.Element;
     storyName: string;
 };
+export declare const MandatoryStar: {
+    (): JSX.Element;
+    storyName: string;
+};

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

@@ -1,6 +1,7 @@
 import { ChangeEventHandler, InputHTMLAttributes } from 'react';
 export interface LuiTextAreaInputProps {
     label: JSX.Element | string;
+    mandatory?: boolean;
     inputProps?: InputHTMLAttributes<HTMLTextAreaElement>;
     onChange?: ChangeEventHandler<HTMLTextAreaElement>;
     value: string;

package/dist/components/LuiFormElements/LuiTextAreaInput/LuiTextAreaInput.stories.d.ts

@@ -24,3 +24,7 @@ export declare const Error: {
     (): JSX.Element;
     storyName: string;
 };
+export declare const Mandatory: {
+    (): JSX.Element;
+    storyName: string;
+};

package/dist/lui.cjs.development.js

@@ -947,7 +947,7 @@ var LuiIcon = function LuiIcon(_ref) {
 
 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 = "/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n:root {\n  --grey-80: #2a292c;\n  --grey-60: #6b6966;\n  --$gray: #989189;\n  --grey-20: #beb9b4;\n  --grey-10: #eaeaea;\n  --grey-05: #f9f9f9;\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  --success: #0aa245;\n  --success-bg: #e9fae7;\n  --info: #3a7cdf;\n  --info-bg: #d8e5f9;\n  --warning: #ea6a2e;\n  --warning-bg: #fbdfd2;\n  --error: #cc0000;\n  --error-focus: #5a0000;\n  --error-bg: #f5cccc;\n  --visited: #00425d;\n  --green-hover: #08814d;\n  --color-green-active: #004e32;\n  --green-btn: #0aa245;\n  --txt-link: #0096cc;\n  --color-primary-hover-btn: #007198;\n  --color-selection: #c7e9f3;\n  --heading-color: #017a76;\n  --heading-color--secondary: #2a292c;\n  --base-type-color: #2a292c;\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}\n\n.LuiError_LuiError__b4d4eed5 {\n  font-family: \"Open Sans\", system-ui, sans-serif;\n  font-style: normal;\n  font-weight: 600;\n  margin-bottom: 0.5rem;\n  font-size: 0.875rem;\n  line-height: 1.5rem;\n  color: #2a292c;\n}\n.LuiError_LuiErrorErrorIcon__b4d4eed5 {\n  vertical-align: middle;\n  display: inline-block;\n}\n.LuiError_LuiErrorErrorText__b4d4eed5 {\n  margin-left: 0.5rem;\n}";
+var css = "/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n:root {\n  --grey-80: #2a292c;\n  --grey-60: #6b6966;\n  --$gray: #989189;\n  --grey-20: #beb9b4;\n  --grey-10: #eaeaea;\n  --grey-05: #f9f9f9;\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  --success: #0aa245;\n  --success-bg: #e9fae7;\n  --info: #3a7cdf;\n  --info-bg: #d8e5f9;\n  --warning: #ea6a2e;\n  --warning-bg: #fbdfd2;\n  --error: #cc0000;\n  --error-focus: #5a0000;\n  --error-bg: #f5cccc;\n  --visited: #00425d;\n  --green-hover: #08814d;\n  --color-green-active: #004e32;\n  --green-btn: #0aa245;\n  --txt-link: #0096cc;\n  --color-primary-hover-btn: #007198;\n  --color-selection: #c7e9f3;\n  --heading-color: #017a76;\n  --heading-color--secondary: #2a292c;\n  --base-type-color: #2a292c;\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}\n\n.LuiError_LuiError__d1e63d50 {\n  font-family: \"Open Sans\", system-ui, sans-serif;\n  font-style: normal;\n  font-weight: 600;\n  margin-bottom: 0.5rem;\n  font-size: 0.875rem;\n  line-height: 1.5rem;\n  color: #2a292c;\n}\n.LuiError_LuiErrorErrorIcon__d1e63d50 {\n  vertical-align: middle;\n  display: inline-block;\n}\n.LuiError_LuiErrorErrorText__d1e63d50 {\n  margin-left: 0.5rem;\n}";
 n(css,{});
 
 var LuiError = function LuiError(_ref) {
@@ -984,7 +984,7 @@ var LuiTextInput = function LuiTextInput(props) {
   }, props.mandatory && React__default.createElement("span", {
     className: "LuiTextInput-mandatory"
   }, "*"), React__default.createElement("span", {
-    className: clsx(props.hideLabel ? 'LuiScreenReadersOnly' : '')
+    className: 'LuiTextInput-label-text ' + clsx(props.hideLabel ? 'LuiScreenReadersOnly' : '')
   }, props.label), React__default.createElement("span", {
     className: "LuiTextInput-inputWrapper"
   }, React__default.createElement("input", Object.assign({
@@ -1174,7 +1174,9 @@ var LuiSelectInput = function LuiSelectInput(props) {
   }, React__default.createElement("label", {
     htmlFor: id,
     className: "LuiSelect-label"
-  }, React__default.createElement("span", {
+  }, props.mandatory && React__default.createElement("span", {
+    className: "LuiSelect-mandatory"
+  }, "*"), React__default.createElement("span", {
     className: clsx('LuiSelect-label-text', props.hideLabel ? 'LuiScreenReadersOnly' : '')
   }, props.label), React__default.createElement("div", {
     className: "LuiSelect-wrapper"
@@ -1215,7 +1217,9 @@ var LuiTextAreaInput = function LuiTextAreaInput(props) {
     className: clsx('LuiTextAreaInput')
   }, React__default.createElement("label", {
     htmlFor: id
-  }, React__default.createElement("span", {
+  }, props.mandatory && React__default.createElement("span", {
+    className: "LuiTextAreaInput-mandatory"
+  }, "*"), React__default.createElement("span", {
     className: "LuiTextAreaInput-label"
   }, props.label), React__default.createElement("textarea", Object.assign({
     id: id,
@@ -18102,7 +18106,7 @@ function isChromatic() {
 }
 
 var css$1 = ":root {\n  --grey-80: #2a292c;\n  --grey-60: #6b6966;\n  --$gray: #989189;\n  --grey-20: #beb9b4;\n  --grey-10: #eaeaea;\n  --grey-05: #f9f9f9;\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  --success: #0aa245;\n  --success-bg: #e9fae7;\n  --info: #3a7cdf;\n  --info-bg: #d8e5f9;\n  --warning: #ea6a2e;\n  --warning-bg: #fbdfd2;\n  --error: #cc0000;\n  --error-focus: #5a0000;\n  --error-bg: #f5cccc;\n  --visited: #00425d;\n  --green-hover: #08814d;\n  --color-green-active: #004e32;\n  --green-btn: #0aa245;\n  --txt-link: #0096cc;\n  --color-primary-hover-btn: #007198;\n  --color-selection: #c7e9f3;\n  --heading-color: #017a76;\n  --heading-color--secondary: #2a292c;\n  --base-type-color: #2a292c;\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 modules_5b17bb95 = {"charcoal":"#2a292c","fuscous":"#6b6966","gray":"#989189","silver":"#beb9b4","lily":"#eaeaea","hint":"#f9f9f9","snow":"#ffffff","white":"#ffffff","teal":"#00425d","sea":"#007198","electric":"#0096cc","spray":"#73c8e1","polar":"#e2f3f7","sherpa":"#004b50","surfie":"#017a76","persian":"#00a599","downy":"#73cdc8","iceberg":"#dcf5f0","sacramento":"#004e32","salem":"#08814d","pigment":"#0aa245","granny":"#9bd79b","panache":"#e9fae7","brand-primary":"#004b50","brand-secondary":"#017a76","error":"#cc0000","error-bg":"#f5cccc","error-focus":"#5a0000","warning":"#ea6a2e","warning-bg":"#fbdfd2","warning-focus":"#b33a01","success":"#0aa245","success-bg":"#e9fae7","info":"#3a7cdf","info-bg":"#d8e5f9","visited":"#00425d","green-hover":"#08814d","green-active":"#004e32","green-btn":"#0aa245","txt-link":"#0096cc","primary-hover-btn":"#007198","selection":"#c7e9f3","heading-color":"#017a76","heading-color--secondary":"#2a292c","base-type-color":"#2a292c","base-icon-color":"#007198","disabled-color":"#989189","disabled-color-dark":"#6b6966","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%)"};
+var modules_5b17bb95 = {"charcoal":"#2a292c","fuscous":"#6b6966","gray":"#989189","silver":"#beb9b4","lily":"#eaeaea","hint":"#f9f9f9","snow":"#ffffff","white":"#ffffff","teal":"#00425d","sea":"#007198","electric":"#0096cc","spray":"#73c8e1","polar":"#e2f3f7","sherpa":"#004b50","surfie":"#017a76","persian":"#00a599","downy":"#73cdc8","iceberg":"#dcf5f0","sacramento":"#004e32","salem":"#08814d","pigment":"#0aa245","granny":"#9bd79b","panache":"#e9fae7","brand-primary":"#004b50","brand-secondary":"#017a76","error":"#cc0000","error-bg":"#f5cccc","error-focus":"#5a0000","warning":"#ea6a2e","warning-bg":"#fbdfd2","warning-focus":"#b33a01","success":"#0aa245","success-bg":"#e9fae7","info":"#3a7cdf","info-bg":"#d8e5f9","visited":"#00425d","green-hover":"#08814d","green-active":"#004e32","green-btn":"#0aa245","txt-link":"#0096cc","primary-hover-btn":"#007198","selection":"#c7e9f3","heading-color":"#017a76","heading-color--secondary":"#2a292c","base-type-color":"#2a292c","input-text":"#2a292c","input-placeholder":"#6b6966","input-placeholder-when-disabled":"#989189","base-icon-color":"#007198","disabled-color":"#989189","disabled-color-dark":"#6b6966","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$1,{});
 
 /**
@@ -18155,6 +18159,15 @@ function LuiComboSelectActual(givenProps, ref) {
       });
     },
     styles: {
+      control: function control(provided, state) {
+        return _extends({}, provided, {
+          /* matches style of .LuiTextInput-input */
+          border: state.isFocused ? '1px solid #053d52' : '1px solid #b2b2b2',
+          '&:hover, &:active': {
+            borderColor: '#053d52'
+          }
+        });
+      },
       indicatorSeparator: function indicatorSeparator(provided) {
         return _extends({}, provided, {
           width: 0
@@ -18181,9 +18194,14 @@ function LuiComboSelectActual(givenProps, ref) {
           /* please keep this in sync with FormVars.scss/mixin.formPlaceholder */
           fontWeight: 'normal',
           fontStyle: 'italic',
-          color: '#6b6966'
-          /* same as _LuiColors.scss $input-placeholder */
-
+          color: modules_5b17bb95['input-placeholder']
+        });
+      },
+      option: function option(provided, _ref) {
+        var isSelected = _ref.isSelected;
+        return _extends({}, provided, {
+          color: modules_5b17bb95['input-text'],
+          backgroundColor: isSelected ? modules_5b17bb95['selection'] : modules_5b17bb95['white']
         });
       }
     }