@linzjs/lui 15.1.14 → 16.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +26 -0
- package/README.md +2 -2
- package/dist/components/LuiFilterContainer/LuiFilterContainer.d.ts +1 -0
- package/dist/components/LuiFormElements/ClearableLuiTextInput/ClearableLuiTextInput.d.ts +14 -0
- package/dist/components/LuiFormElements/LuiTextInput/LuiTextInput.d.ts +1 -0
- package/dist/components/LuiIcon/LuiIcon.d.ts +2 -2
- package/dist/index.js +28 -7
- package/dist/index.js.map +1 -1
- package/dist/lui.css +122 -93
- package/dist/lui.css.map +1 -1
- package/dist/lui.esm.js +28 -7
- package/dist/lui.esm.js.map +1 -1
- package/dist/scss/Components/LuiFormElements/LuiTextInput/LuiTextInput.scss +10 -0
- package/dist/scss/Elements/Buttons/buttons.scss +67 -46
- package/dist/scss/Foundation/Variables/_LuiColors.scss +14 -4
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,29 @@
|
|
|
1
|
+
# [16.1.0](https://github.com/linz/lui/compare/v16.0.1...v16.1.0) (2022-03-22)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Features
|
|
5
|
+
|
|
6
|
+
* My whitespace feature ([#631](https://github.com/linz/lui/issues/631)) ([3e31760](https://github.com/linz/lui/commit/3e31760899b757480d2e31f5b98ca06a83011aff))
|
|
7
|
+
|
|
8
|
+
## [16.0.1](https://github.com/linz/lui/compare/v16.0.0...v16.0.1) (2022-03-21)
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
### Bug Fixes
|
|
12
|
+
|
|
13
|
+
* corrects test for global variable in LuiModal ([#628](https://github.com/linz/lui/issues/628)) ([8e7a8b0](https://github.com/linz/lui/commit/8e7a8b0db48cab84789b35bf17b9a9de289dc336))
|
|
14
|
+
|
|
15
|
+
# [16.0.0](https://github.com/linz/lui/compare/v15.1.14...v16.0.0) (2022-03-17)
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
### Features
|
|
19
|
+
|
|
20
|
+
* Style changes to align with FIGLUI ([16b85a5](https://github.com/linz/lui/commit/16b85a51d07fed0d413d1449b67dc70717630f67))
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
### BREAKING CHANGES
|
|
24
|
+
|
|
25
|
+
* button sizes and btn icon are now smaller
|
|
26
|
+
|
|
1
27
|
## [15.1.14](https://github.com/linz/lui/compare/v15.1.13...v15.1.14) (2022-03-17)
|
|
2
28
|
|
|
3
29
|
|
package/README.md
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
# Lui - Linz User Interface
|
|
1
|
+
# Lui - Linz User Interface!!
|
|
2
2
|
|
|
3
3
|
> It's written in CSS and a React wrapper!
|
|
4
4
|
>
|
|
@@ -37,7 +37,7 @@ welcoming contributions from across LINZ.
|
|
|
37
37
|
It aims to solve the problem of consistent UI across LINZ while giving squads a bunch of base elements they can start
|
|
38
38
|
using out of the box.
|
|
39
39
|
|
|
40
|
-
We aim to make each component generic, extendable, accessible, and
|
|
40
|
+
We aim to make each component generic, extendable, accessible, and amazing.
|
|
41
41
|
|
|
42
42
|
All styles are implemented in SASS and compiled to plain CSS. This means any team can use the CSS. A ReactJS wrapper
|
|
43
43
|
over the CSS is part of this project.
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { InputHTMLAttributes } from 'react';
|
|
2
|
+
export interface ClearableLuiTextInputProps {
|
|
3
|
+
inputProps?: InputHTMLAttributes<HTMLInputElement>;
|
|
4
|
+
error?: string;
|
|
5
|
+
hideLabel?: boolean;
|
|
6
|
+
label: JSX.Element | string;
|
|
7
|
+
/**
|
|
8
|
+
* A red star will be shown next to the label, no validation will be performed based on this prop.
|
|
9
|
+
*/
|
|
10
|
+
mandatory?: boolean;
|
|
11
|
+
value?: string;
|
|
12
|
+
onValueChange?: (value: string) => void;
|
|
13
|
+
}
|
|
14
|
+
export declare const ClearableLuiTextInput: (props: ClearableLuiTextInputProps) => JSX.Element;
|
|
@@ -14,6 +14,7 @@ export interface LuiTextInputProps {
|
|
|
14
14
|
*/
|
|
15
15
|
showPadlockIcon?: boolean;
|
|
16
16
|
value: string;
|
|
17
|
+
icon?: JSX.Element;
|
|
17
18
|
}
|
|
18
19
|
export declare function useGenerateOrDefaultId(idFromProps?: string): string;
|
|
19
20
|
export declare const LuiTextInput: (props: LuiTextInputProps) => JSX.Element;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
import { ICONS } from '../../assets/svg-content';
|
|
2
|
+
import { InputHTMLAttributes } from 'react';
|
|
3
3
|
export declare type IconSize = keyof typeof ICON_SIZES;
|
|
4
4
|
export declare type IconStatus = keyof typeof ICON_STATUS;
|
|
5
5
|
export declare type IconName = keyof typeof ICONS;
|
|
@@ -13,7 +13,7 @@ export interface LuiIconProps {
|
|
|
13
13
|
status?: IconStatus;
|
|
14
14
|
className?: string;
|
|
15
15
|
title?: string;
|
|
16
|
-
spanProps?:
|
|
16
|
+
spanProps?: InputHTMLAttributes<HTMLInputElement>;
|
|
17
17
|
}
|
|
18
18
|
export declare const ICON_SIZES: {
|
|
19
19
|
xs: string;
|
package/dist/index.js
CHANGED
|
@@ -780,7 +780,7 @@ function LuiFormikForm(props) {
|
|
|
780
780
|
" "))));
|
|
781
781
|
}
|
|
782
782
|
|
|
783
|
-
var css_248z$3 = "/**\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: #
|
|
783
|
+
var css_248z$3 = "/**\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: #107c3a;\n --color-green-active: #094A22;\n --green-btn: #0aa245;\n --txt-link: #0096cc;\n --color-primary-hover-btn: #005678;\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: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}\n\n.LuiError {\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-errorIcon {\n vertical-align: middle;\n display: inline-block;\n}\n.LuiError-errorText {\n margin-left: 0.5rem;\n}";
|
|
784
784
|
styleInject(css_248z$3);
|
|
785
785
|
|
|
786
786
|
var LuiError = function (_a) {
|
|
@@ -878,7 +878,8 @@ var LuiTextInput = function (props) {
|
|
|
878
878
|
clsx(props.hideLabel ? 'LuiScreenReadersOnly' : '') }, props.label),
|
|
879
879
|
React__default["default"].createElement("span", { className: "LuiTextInput-inputWrapper" },
|
|
880
880
|
React__default["default"].createElement("input", __assign({ type: 'text', className: (props.showPadlockIcon ? 'LuiTextInput-padlock-icon ' : '') +
|
|
881
|
-
clsx('LuiTextInput-input'), min: "0", value: props.value, onChange: props.onChange }, props.inputProps, { id: id }))
|
|
881
|
+
clsx('LuiTextInput-input'), min: "0", value: props.value, onChange: props.onChange }, props.inputProps, { id: id })),
|
|
882
|
+
props.icon),
|
|
882
883
|
props.error && (React__default["default"].createElement("span", { className: "LuiTextInput-error" },
|
|
883
884
|
React__default["default"].createElement(LuiIcon, { alt: "error", name: "ic_error", className: "LuiTextInput-error-icon", size: "sm", status: "error" }),
|
|
884
885
|
props.error)))));
|
|
@@ -52654,7 +52655,7 @@ function isChromatic() {
|
|
|
52654
52655
|
return !!((window === null || window === void 0 ? void 0 : window.navigator.userAgent.match(/Chromatic/)) || (window === null || window === void 0 ? void 0 : window.location.href.match(/chromatic=true/)));
|
|
52655
52656
|
}
|
|
52656
52657
|
|
|
52657
|
-
var css_248z$2 = ":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: #
|
|
52658
|
+
var css_248z$2 = ":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: #107c3a;\n --color-green-active: #094A22;\n --green-btn: #0aa245;\n --txt-link: #0096cc;\n --color-primary-hover-btn: #005678;\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: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}";
|
|
52658
52659
|
styleInject(css_248z$2);
|
|
52659
52660
|
|
|
52660
52661
|
var _excluded = ["allowCreateWhileLoading", "createOptionPosition", "formatCreateLabel", "isValidNewOption", "getNewOptionData", "onCreateOption", "options", "onChange"];
|
|
@@ -55632,7 +55633,7 @@ var LuiModal = function (props) {
|
|
|
55632
55633
|
}, [handleClickOutside]);
|
|
55633
55634
|
var isTest = false;
|
|
55634
55635
|
// this is here for the tests
|
|
55635
|
-
if (process !== undefined) {
|
|
55636
|
+
if (typeof process !== 'undefined') {
|
|
55636
55637
|
isTest = ((_a = process === null || process === void 0 ? void 0 : process.env) === null || _a === void 0 ? void 0 : _a.NODE_ENV) === 'test';
|
|
55637
55638
|
if (!isTest) {
|
|
55638
55639
|
Modal.setAppElement('#root');
|
|
@@ -55834,6 +55835,23 @@ function setSelectedFirmCache(firmId, firmName) {
|
|
|
55834
55835
|
}
|
|
55835
55836
|
}
|
|
55836
55837
|
|
|
55838
|
+
var ClearableLuiTextInput = function (props) {
|
|
55839
|
+
var _a = React.useState(props.value ? props.value : ''), currentValue = _a[0], setCurrentValue = _a[1];
|
|
55840
|
+
var clear = function () {
|
|
55841
|
+
setCurrentValue('');
|
|
55842
|
+
if (props.onValueChange) {
|
|
55843
|
+
props.onValueChange('');
|
|
55844
|
+
}
|
|
55845
|
+
};
|
|
55846
|
+
var cancelIcon = currentValue !== '' ? (React__default["default"].createElement(LuiIcon, { alt: "clear", name: "ic_cancel_clear", size: "lg", className: 'LuiTextInput-iconPosition', spanProps: { onClick: clear } })) : undefined;
|
|
55847
|
+
return (React__default["default"].createElement(LuiTextInput, __assign({}, props, { icon: cancelIcon, value: currentValue, onChange: function (e) {
|
|
55848
|
+
setCurrentValue(e.target.value);
|
|
55849
|
+
if (props.onValueChange) {
|
|
55850
|
+
props.onValueChange(e.target.value);
|
|
55851
|
+
}
|
|
55852
|
+
} })));
|
|
55853
|
+
};
|
|
55854
|
+
|
|
55837
55855
|
/**
|
|
55838
55856
|
* Filters options and forwards to internal render function.
|
|
55839
55857
|
* has option for minimum elements to filter
|
|
@@ -55841,11 +55859,14 @@ function setSelectedFirmCache(firmId, firmName) {
|
|
|
55841
55859
|
* @constructor
|
|
55842
55860
|
*/
|
|
55843
55861
|
var LuiFilterContainer = function (props) {
|
|
55844
|
-
var renderFunction = props.renderFunction, filterFunction = props.filterFunction, _a = props.showFilter, showFilter = _a === void 0 ? true : _a;
|
|
55845
|
-
var
|
|
55862
|
+
var renderFunction = props.renderFunction, filterFunction = props.filterFunction, _a = props.showFilter, showFilter = _a === void 0 ? true : _a, _b = props.isFilterClearable, isFilterClearable = _b === void 0 ? true : _b;
|
|
55863
|
+
var _c = React.useState(''), filter = _c[0], setFilter = _c[1];
|
|
55846
55864
|
return (React__default["default"].createElement("div", null,
|
|
55847
55865
|
showFilter && (React__default["default"].createElement("div", { className: 'LuiFilterContainer-filter-container LuiDeprecatedForms' },
|
|
55848
|
-
React__default["default"].createElement(
|
|
55866
|
+
isFilterClearable && (React__default["default"].createElement(ClearableLuiTextInput, { label: 'Filter', inputProps: {
|
|
55867
|
+
placeholder: 'Type to filter',
|
|
55868
|
+
}, onValueChange: function (value) { return setFilter(value); } })),
|
|
55869
|
+
!isFilterClearable && (React__default["default"].createElement("input", { type: "text", placeholder: "Type to filter", value: filter, onChange: function (e) { return setFilter(e.target.value); } })))),
|
|
55849
55870
|
renderFunction(filterFunction(filter))));
|
|
55850
55871
|
};
|
|
55851
55872
|
|