@linzjs/lui 11.2.2 → 11.3.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 +7 -0
- package/dist/components/LuiFormElements/LuiTextInput/LuiTextInput.d.ts +4 -0
- package/dist/components/LuiFormElements/LuiTextInput/LuiTextInput.stories.d.ts +4 -0
- package/dist/lui.cjs.development.js +4 -2
- package/dist/lui.cjs.development.js.map +1 -1
- package/dist/lui.cjs.production.min.js +1 -1
- package/dist/lui.cjs.production.min.js.map +1 -1
- package/dist/lui.esm.js +4 -2
- package/dist/lui.esm.js.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,10 @@
|
|
|
1
|
+
# [11.3.0](https://github.com/linz/lui/compare/v11.2.2...v11.3.0) (2021-12-20)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Features
|
|
5
|
+
|
|
6
|
+
* **LuiTextInput:** Added mandatory star ([#502](https://github.com/linz/lui/issues/502)) ([e6f6bde](https://github.com/linz/lui/commit/e6f6bde0a5dbff3de1f32a7f32820910a21eaed9))
|
|
7
|
+
|
|
1
8
|
## [11.2.2](https://github.com/linz/lui/compare/v11.2.1...v11.2.2) (2021-12-20)
|
|
2
9
|
|
|
3
10
|
|
|
@@ -6,6 +6,10 @@ export interface LuiTextInputProps {
|
|
|
6
6
|
error?: string;
|
|
7
7
|
hideLabel?: boolean;
|
|
8
8
|
label: JSX.Element | string;
|
|
9
|
+
/**
|
|
10
|
+
* A red star will be shown next to the label, no validation will be performed based on this prop.
|
|
11
|
+
*/
|
|
12
|
+
mandatory?: boolean;
|
|
9
13
|
value: string;
|
|
10
14
|
}
|
|
11
15
|
export declare function useGenerateOrDefaultId(idFromProps?: string): string;
|
|
@@ -969,7 +969,7 @@ var LuiError = function LuiError(_ref) {
|
|
|
969
969
|
}, error));
|
|
970
970
|
};
|
|
971
971
|
|
|
972
|
-
var css$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: #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/**\n @deprecated\n */\n/**\n @deprecated\n */\n/**\n @deprecated\n */\n.
|
|
972
|
+
var css$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: #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/**\n @deprecated\n */\n/**\n @deprecated\n */\n/**\n @deprecated\n */\n.LuiTextInput_LuiTextInput__7a248431 {\n margin-bottom: 24px;\n}\n.LuiTextInput_LuiTextInputLabel__7a248431 {\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\n.LuiTextInput_LuiTextInputInputWrapper__7a248431 {\n position: relative;\n display: block;\n box-shadow: -1px 0 0 0 transparent;\n border-radius: 4px;\n transition: box-shadow 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s, border-color 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s;\n}\n.LuiTextInput_hasError__7a248431 .LuiTextInput_LuiTextInputInputWrapper__7a248431 {\n box-shadow: -8px 0px 0 0 #cc0000;\n border-radius: 4px;\n}\n\n.LuiTextInput_LuiTextInputPasswordReveal__7a248431 {\n position: absolute;\n background: transparent;\n min-height: 0;\n min-width: 0;\n margin: 0;\n padding: 12px;\n top: 50%;\n right: 0;\n transform: translateY(-50%);\n}\n.LuiTextInput_LuiTextInputPasswordReveal__7a248431:hover {\n background: transparent;\n}\n\n.LuiTextInput_LuiTextInputInput__7a248431 {\n font-family: \"Open Sans\", system-ui, sans-serif;\n font-style: normal;\n font-weight: normal;\n margin-bottom: 0;\n border: 1px solid #b2b2b2;\n border-radius: 4px;\n height: 48px;\n color: #000000;\n caret-color: #000000;\n padding-top: 14px;\n padding-right: 32px;\n padding-bottom: 14px;\n padding-left: 16px;\n min-width: 300px;\n transition: all 0.15 ease-in-out;\n transition: border 0.2s ease;\n}\n.LuiTextInput_LuiTextInputInput__7a248431::placeholder {\n font-weight: normal;\n color: #6b6966;\n opacity: 1;\n}\n.LuiTextInput_isDisabled__7a248431 .LuiTextInput_LuiTextInputInput__7a248431::placeholder {\n color: #989189;\n}\n.LuiTextInput_LuiTextInputInput__7a248431:hover, .LuiTextInput_LuiTextInputInput__7a248431:active {\n border-color: #053d52;\n}\n.LuiTextInput_LuiTextInputInput__7a248431:focus {\n outline: none;\n border-color: #053d52;\n}\n.LuiTextInput_hasError__7a248431 .LuiTextInput_LuiTextInputInput__7a248431 {\n border-color: #cc0000 !important;\n}\n.LuiTextInput_isDisabled__7a248431 .LuiTextInput_LuiTextInputInput__7a248431 {\n border-color: #beb9b4;\n background-color: #eaeaea;\n cursor: not-allowed;\n}\n\n.LuiTextInput_LuiTextInputError__7a248431 {\n position: relative;\n display: flex;\n color: #cc0000;\n text-align: left;\n padding-left: 22px;\n font-size: 14px;\n line-height: 20px;\n margin-top: 2px;\n}\n\n.LuiTextInput_LuiTextInputErrorIcon__7a248431 {\n position: absolute;\n left: 0;\n top: 2px;\n}\n\n.LuiTextInput_LuiTextInputMandatory__7a248431 {\n display: inline-block;\n width: 10px;\n margin: 0 0 0 -10px;\n color: #cc0000;\n}\n\n.LuiTextInput_LuiFieldWrapper__7a248431 {\n position: relative;\n box-shadow: -1px 0 0 0 transparent;\n border-radius: 4px;\n transition: box-shadow 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s, border-color 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s;\n}\n.LuiTextInput_LuiFieldWrapper__7a248431 input {\n transition: border 0.2s ease;\n}\n.LuiTextInput_LuiFieldWrapper__7a248431.LuiTextInput_LuiFieldWrapper_Error__7a248431 {\n box-shadow: -12px 0px 0 0 #cc0000;\n border-radius: 4px;\n}\n.LuiTextInput_LuiFieldWrapper__7a248431.LuiTextInput_LuiFieldWrapper_Error__7a248431 input {\n border-color: #cc0000;\n}";
|
|
973
973
|
n(css$2,{});
|
|
974
974
|
|
|
975
975
|
function useGenerateOrDefaultId(idFromProps) {
|
|
@@ -987,7 +987,9 @@ var LuiTextInput = function LuiTextInput(props) {
|
|
|
987
987
|
}, React__default.createElement("label", {
|
|
988
988
|
className: 'LuiTextInput-label',
|
|
989
989
|
htmlFor: id
|
|
990
|
-
}, React__default.createElement("span", {
|
|
990
|
+
}, props.mandatory && React__default.createElement("span", {
|
|
991
|
+
className: "LuiTextInput-mandatory"
|
|
992
|
+
}, "*"), React__default.createElement("span", {
|
|
991
993
|
className: clsx(props.hideLabel ? 'LuiScreenReadersOnly' : '')
|
|
992
994
|
}, props.label), React__default.createElement("span", {
|
|
993
995
|
className: "LuiTextInput-inputWrapper"
|