@linzjs/lui 15.1.1 → 15.1.4

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+## [15.1.4](https://github.com/linz/lui/compare/v15.1.3...v15.1.4) (2022-03-04)
+
+
+### Bug Fixes
+
+* **LuiButtonGroup:** Support single child ([#561](https://github.com/linz/lui/issues/561)) ([#602](https://github.com/linz/lui/issues/602)) ([50162d3](https://github.com/linz/lui/commit/50162d38e00469a3b32879874fd79a998115bee2))
+
+## [15.1.3](https://github.com/linz/lui/compare/v15.1.2...v15.1.3) (2022-03-03)
+
+
+### Bug Fixes
+
+* added Hot Pink to the colour palette ([#600](https://github.com/linz/lui/issues/600)) ([a09285e](https://github.com/linz/lui/commit/a09285e1d5bdc80771beb1fecbc9232e289267f4))
+
+## [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/components/LuiButton/LuiButton.d.ts

@@ -24,6 +24,19 @@ export declare const PlainButton: React.ForwardRefExoticComponent<Pick<PlainButt
     size: string;
 }, "type" | "disabled" | "style" | "onClick" | "name" | "title" | "data-testid" | "className" | "buttonProps" | "children" | "level" | "size"> & React.RefAttributes<HTMLButtonElement>>;
 export declare const LuiButton: React.ForwardRefExoticComponent<Pick<React.PropsWithChildren<LuiButtonProps>, "type" | "disabled" | "style" | "onClick" | "name" | "title" | "data-testid" | "className" | "buttonProps" | "children" | "level" | "size" | "href" | "openInNewTab"> & React.RefAttributes<HTMLButtonElement>>;
-export declare const LuiButtonGroup: React.FC<{
-    children: any;
-}>;
+interface LuiButtonGroupProps {
+    /**
+     * LuiButton component(s) to render in series.
+     *
+     * While a single child element is technically supported, we recommend using
+     * disabled styling for unavailable operations in order to communicate
+     * possible actions. Please consult with the UX team before breaking this
+     * style guideline.
+     */
+    children: ReactNode;
+}
+/**
+ * A series of Lui buttons together.
+ */
+export declare const LuiButtonGroup: (props: LuiButtonGroupProps) => JSX.Element;
+export {};

package/dist/hooks/useDeprecatedWarning.d.ts

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

package/dist/index.js

@@ -207,8 +207,14 @@ var LuiButton = React__default["default"].forwardRef(function (props, ref) {
     }
     return (React__default["default"].createElement(PlainButton, { type: props.type, title: props.title, disabled: props.disabled, name: props.name, onClick: props.onClick, level: _level, size: size, "data-testid": props['data-testid'], style: props.style, className: props.className, buttonProps: props.buttonProps, ref: ref }, props.children));
 });
+/**
+ * A series of Lui buttons together.
+ */
 var LuiButtonGroup = function (props) {
-    return (React__default["default"].createElement("div", { className: "lui-button-group", "data-testid": 'button-group' }, props.children.map(function (child, i) {
+    var children = Array.isArray(props.children)
+        ? props.children
+        : [props.children];
+    return (React__default["default"].createElement("div", { className: "lui-button-group", "data-testid": 'button-group' }, children.map(function (child, i) {
         return (React__default["default"].createElement("div", { key: i, className: 'lui-button-wrapper' }, child));
     })));
 };
@@ -468,7 +474,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 +1039,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 +1054,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 +1105,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 +1254,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 +1270,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;