@linzjs/lui 11.5.0 → 11.9.0

package/CHANGELOG.md

@@ -1,3 +1,31 @@
+# [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)
+
+
+### Features
+
+* Consistent placeholder style ([#507](https://github.com/linz/lui/issues/507)) ([f60ff44](https://github.com/linz/lui/commit/f60ff4494af9e1e6c73ba3493ebadf4c7643d3c7))
+
 # [11.5.0](https://github.com/linz/lui/compare/v11.4.0...v11.5.0) (2022-01-10)
 
 

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/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({
@@ -18102,7 +18102,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 +18155,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
@@ -18178,7 +18187,17 @@ function LuiComboSelectActual(givenProps, ref) {
       },
       placeholder: function placeholder(provided) {
         return _extends({}, provided, {
-          fontWeight: 400
+          /* please keep this in sync with FormVars.scss/mixin.formPlaceholder */
+          fontWeight: 'normal',
+          fontStyle: 'italic',
+          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']
         });
       }
     }