@linzjs/lui 15.1.1 → 15.1.2

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [15.1.2](https://github.com/linz/lui/compare/v15.1.1...v15.1.2) (2022-03-03)
+
+
+### Bug Fixes
+
+* Deprecated Formik coupled inputs ([#586](https://github.com/linz/lui/issues/586)) ([d05916f](https://github.com/linz/lui/commit/d05916ff803d145310e82c494a9414cd01a2750d))
+
 ## [15.1.1](https://github.com/linz/lui/compare/v15.1.0...v15.1.1) (2022-03-02)
 
 

package/README.md

@@ -12,7 +12,7 @@
 
 ![https://en.wikipedia.org/wiki/Onychophora](lui-worm.png)
 
-> Lui _[Onychophora](https://en.wikipedia.org/wiki/Onychophora)_, the happy UI worm!
+> Lui _[Onychophora](https://en.wikipedia.org/wiki/Onychophora)_, the happy UI worm!!
 
 Nomenclature: Lui is a backronym for Linz User Interface. Lui the library, is named after Lui the worm.
 
@@ -31,15 +31,19 @@ and...
 
 ---
 
-_Lui_ is a collection of generic UI components that adhere to the new LINZ digital style guide, lead by STEP and welcoming contributions from across LINZ.
+_Lui_ is a collection of generic UI components that adhere to the new LINZ digital style guide, lead by STEP and
+welcoming contributions from across LINZ.
 
-It aims to solve the problem of consistent UI across LINZ while giving squads a bunch of base elements they can start using out of the box.
+It aims to solve the problem of consistent UI across LINZ while giving squads a bunch of base elements they can start
+using out of the box.
 
 We aim to make each component generic, extendable, accessible, and amazingly great.
 
-All styles are implemented in SASS and compiled to plain CSS. This means any team can use the CSS. A ReactJS wrapper over the CSS is part of this project.
+All styles are implemented in SASS and compiled to plain CSS. This means any team can use the CSS. A ReactJS wrapper
+over the CSS is part of this project.
 
-There is lots to do in this project, often things will be left until there is demand. Please join the Slack channel #cop-lui.
+There is lots to do in this project, often things will be left until there is demand. Please join the Slack channel
+#cop-lui.
 
 ## Documentation
 

package/dist/hooks/useDeprecatedWarning.d.ts

@@ -0,0 +1 @@
+export declare function useDeprecatedWarning(componentName: string): void;

package/dist/index.js

@@ -468,7 +468,16 @@ var LuiTabsPanelSwitch = function (props) {
         } }, props.children));
 };
 
+function useDeprecatedWarning(componentName) {
+    React.useEffect(function () {
+        if (window.location.hostname.includes('localhost')) {
+            console.warn(componentName + " will be deprecated in future versions of Lui. Please see the 'Current Deprecations' page in Lui docs.");
+        }
+    }, []);
+}
+
 function LuiFormikForm(props) {
+    useDeprecatedWarning('LuiFormikForm');
     // this spreads all keys, except className
     var _a = __assign({}, props); _a.className; var formikProps = __rest(_a, ["className"]);
     var classNames = clsx(props.className);
@@ -1024,6 +1033,7 @@ var LuiRadioInput = function (props) {
 };
 
 function LuiFormikCheckbox(props) {
+    useDeprecatedWarning('LuiFormikCheckbox');
     var ctx = formik.useFormikContext();
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement(formik.Field, { name: props.name }, function (_a) {
@@ -1038,18 +1048,22 @@ function LuiFormikCheckbox(props) {
         })));
 }
 
-var LuiFormikFormLabel = function (props) { return (React__default["default"].createElement("div", { className: clsx('LuiFormLabel-wrapper', props.className && "" + props.className) },
-    props.children,
-    React__default["default"].createElement("label", { className: "LuiFormLabel", htmlFor: props["for"] },
-        props.required && React__default["default"].createElement("span", { className: "lui-required-input-icon" }, "*"),
-        props.label),
-    props.tooltip && React__default["default"].createElement("i", { className: "material-icons-round" }, "help"))); };
+var LuiFormikFormLabel = function (props) {
+    useDeprecatedWarning('LuiFormikFormLabel');
+    return (React__default["default"].createElement("div", { className: clsx('LuiFormLabel-wrapper', props.className && "" + props.className) },
+        props.children,
+        React__default["default"].createElement("label", { className: "LuiFormLabel", htmlFor: props["for"] },
+            props.required && React__default["default"].createElement("span", { className: "lui-required-input-icon" }, "*"),
+            props.label),
+        props.tooltip && React__default["default"].createElement("i", { className: "material-icons-round" }, "help")));
+};
 
 var LuiFormikTextInput = formik.connect(function (props) {
     var error = formik.getIn(props.formik.errors, props.name);
     var touch = formik.getIn(props.formik.touched, props.name);
     var showError = touch && error;
     var setFieldValue = formik.useFormikContext().setFieldValue;
+    useDeprecatedWarning('LuiFormikTextInput');
     var multiLineToggle = function (field) {
         return !props.multiLine ? (React__default["default"].createElement("input", __assign({ id: props.name, "data-testid": props.name }, field, { type: "text" }, props.inputProps, { onChange: function (event) {
                 var _a;
@@ -1085,6 +1099,7 @@ var LuiFormikTextInput = formik.connect(function (props) {
 
 var LuiFormikRadioButton = function (props) {
     var _a = formik.useField(props), field = _a[0], meta = _a[1];
+    useDeprecatedWarning('LuiFormikRadioButton');
     return (React__default["default"].createElement("div", { className: props.className },
         meta.touched && meta.error && (React__default["default"].createElement("i", { className: "lui-form-status-icon material-icons-round" }, "error")),
         React__default["default"].createElement("div", { className: 'lui-radio-container' },
@@ -1233,6 +1248,7 @@ var LuiFormikRadioGroup = function (props) {
     var error = formik.getIn(ctx.errors, props.name);
     var touch = formik.getIn(ctx.touched, props.name);
     var showError = touch && error;
+    useDeprecatedWarning('LuiFormikRadioGroup');
     var describedby = props.hint && camelcase(props === null || props === void 0 ? void 0 : props.hint) + 'Id';
     var errorDescribedBy = error && camelcase(error) + 'Id';
     return (React__default["default"].createElement("div", { className: clsx('lui-fieldsetBlock-form-group', showError && 'lui-input-error') },
@@ -1248,10 +1264,12 @@ var LuiFormikRadioGroup = function (props) {
 };
 
 var LuiFormikFormSubmitButton = formik.connect(function (props) {
+    useDeprecatedWarning('LuiFormikFormSubmitButton');
     return (React__default["default"].createElement(LuiButton, { type: "submit", className: props.className, level: "primary", "data-testid": props['data-testid'], disabled: !!props.disabled }, props.children));
 });
 
 var LuiFormikSelect = formik.connect(function (props) {
+    useDeprecatedWarning('LuiFormikSelect');
     var error = formik.getIn(props.formik.errors, props.name);
     var touch = formik.getIn(props.formik.touched, props.name);
     var showError = touch && error;