@linzjs/lui 11.3.0 → 11.3.1

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [11.3.1](https://github.com/linz/lui/compare/v11.3.0...v11.3.1) (2021-12-21)
+
+
+### Bug Fixes
+
+* Adds Styles for LuiRadioInput ([#500](https://github.com/linz/lui/issues/500)) ([038434e](https://github.com/linz/lui/commit/038434e19e449ae8946d6dc389bd5037b9be0f1f))
+
 # [11.3.0](https://github.com/linz/lui/compare/v11.2.2...v11.3.0) (2021-12-20)
 
 

package/dist/components/LuiFormElements/{RadioInput → LuiRadioInput}/LuiRadioInput.d.ts

@@ -1,12 +1,13 @@
 import { ChangeEventHandler, InputHTMLAttributes } from 'react';
-export interface LuiRadioInputProps {
-    legend?: JSX.Element | string;
-    onChange?: ChangeEventHandler<HTMLInputElement>;
+import './LuiRadioInput.scss';
+export interface LuiRadioProps {
+    onChange: ChangeEventHandler<HTMLInputElement>;
+    selectedValue: string;
     options: string[];
+    legend?: JSX.Element | string;
     error?: string;
-    selectedValue: string;
     isOptionDisabled?: (index: number) => boolean;
     inputProps?: InputHTMLAttributes<HTMLInputElement>;
     renderLabelFor?: (value: string) => JSX.Element;
 }
-export declare const LuiRadioInput: (props: LuiRadioInputProps) => JSX.Element;
+export declare const LuiRadioInput: (props: LuiRadioProps) => JSX.Element;

package/dist/components/LuiFormElements/{RadioInput → LuiRadioInput}/LuiRadioInput.stories.d.ts

@@ -2,7 +2,7 @@
 import { BADGE } from '@geometricpanda/storybook-addon-badges';
 declare const _default: {
     title: string;
-    component: (props: import("./LuiRadioInput").LuiRadioInputProps) => JSX.Element;
+    component: (props: import("./LuiRadioInput").LuiRadioProps) => JSX.Element;
     parameters: {
         badges: BADGE[];
     };

package/dist/components/LuiFormElements/{RadioInput → LuiRadioInput}/LuiRadioInputWithFormik.stories.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 declare const _default: {
     title: string;
-    component: (props: import("./LuiRadioInput").LuiRadioInputProps) => JSX.Element;
+    component: (props: import("./LuiRadioInput").LuiRadioProps) => JSX.Element;
 };
 export default _default;
 export declare const LuiRadioButtonInputWithFormikHooks: {

package/dist/index.d.ts

@@ -18,7 +18,7 @@ export { LuiFileInputBox } from './components/LuiFormElements/LuiFileInputBox/Lu
 export { LuiSelectInput } from './components/LuiFormElements/LuiSelectInput/LuiSelectInput';
 export { LuiTextAreaInput } from './components/LuiFormElements/LuiTextAreaInput/LuiTextAreaInput';
 export { LuiTextInput } from './components/LuiFormElements/LuiTextInput/LuiTextInput';
-export { LuiRadioInput } from './components/LuiFormElements/RadioInput/LuiRadioInput';
+export { LuiRadioInput } from './components/LuiFormElements/LuiRadioInput/LuiRadioInput';
 export { LuiFormikCheckbox } from './components/LuiFormikForms/LuiFormikCheckbox/LuiFormikCheckbox';
 export { LuiFormikTextInput } from './components/LuiFormikForms/LuiFormikTextInput/LuiFormikTextInput';
 export { LuiFormikFormLabel } from './components/LuiFormikForms/LuiFormikFormLabel/LuiFormikFormLabel';

package/dist/lui.cjs.development.js

@@ -1245,49 +1245,50 @@ var LuiTextAreaInput = function LuiTextAreaInput(props) {
   }), props.error));
 };
 
+var css$5 = ":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.LuiRadioInput_LuiRadioInputFieldset__c10e594c {\n  border: none;\n  padding: 0;\n}\n\n.LuiRadioInput_LuiRadioInputInput__c10e594c {\n  position: absolute !important;\n  width: 1px !important;\n  height: 1px !important;\n  margin: 0 !important;\n  padding: 0 !important;\n  overflow: hidden !important;\n  clip: rect(0 0 0 0) !important;\n  -webkit-clip-path: inset(50%) !important;\n  clip-path: inset(50%) !important;\n  border: 0 !important;\n  white-space: nowrap !important;\n}\n\n.LuiRadioInput_LuiRadioInputLegend__c10e594c {\n  font-family: \"Open Sans\", system-ui, sans-serif;\n  font-style: normal;\n  font-weight: 600;\n}\n\n.LuiRadioInput_LuiRadioInputLabel__c10e594c {\n  position: relative;\n  display: flex;\n  justify-content: flex-start;\n  align-items: flex-start;\n  cursor: pointer;\n  padding: 0.5rem 0 0.5rem 2rem;\n}\n.LuiRadioInput_LuiRadioInputLabel__c10e594c:before {\n  content: \"\";\n  height: 1.5rem;\n  min-width: 1.5rem;\n  width: 1.5rem;\n  border: 2px solid #007198;\n  border-radius: 50%;\n  background-color: transparent;\n  position: absolute;\n  left: 0;\n  top: 8px;\n  margin-right: 0.75rem;\n}\n.LuiRadioInput_LuiRadioInputLabel__c10e594c:after {\n  content: \"\";\n  position: absolute;\n  left: 5px;\n  top: 13px;\n  background-color: #007198;\n  height: 14px;\n  min-width: 14px;\n  width: 14px;\n  border-radius: 50%;\n  opacity: 0;\n  transition: opacity 0.3s ease-in-out;\n}\n.LuiRadioInput_LuiRadioInputLabel_IsSelected__c10e594c:after {\n  opacity: 1;\n}\n.LuiRadioInput_LuiRadioInputLabel_IsDisabled__c10e594c {\n  color: #989189;\n}\n.LuiRadioInput_LuiRadioInputLabel_IsDisabled__c10e594c:before {\n  background-color: #eaeaea;\n  border-color: #989189;\n}\n\n.LuiRadioInput_LuiRadioInput_HasError__c10e594c .LuiRadioInput_LuiRadioInputLabel__c10e594c:before {\n  border-color: #cc0000;\n}\n\n.LuiRadioInput_LuiRadioInputErrorMsg__c10e594c {\n  display: flex;\n  margin-top: 0.5rem;\n}\n.LuiRadioInput_LuiRadioInputErrorMsg__c10e594c .LuiRadioInput_LuiIcon_Error__c10e594c {\n  margin-right: 0.5rem;\n}\n.LuiRadioInput_LuiRadioInputErrorMsg__c10e594c p {\n  margin: 0;\n}";
+n(css$5,{});
+
 var LuiRadioInput = function LuiRadioInput(props) {
   var _props$inputProps;
 
   var id = useGenerateOrDefaultId((_props$inputProps = props.inputProps) == null ? void 0 : _props$inputProps.id);
-  return React__default.createElement("fieldset", {
-    className: 'LuiRadioInput'
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+    className: clsx('LuiRadioInput', {
+      'LuiRadioInput--hasError': props.error
+    })
+  }, React__default.createElement("fieldset", {
+    className: 'LuiRadioInput-fieldset'
   }, props.legend && React__default.createElement("legend", {
     className: "LuiRadioInput-legend"
   }, props.legend), props.options.map(function (option, index) {
     var radioId = id + "-" + index;
-    var isChecked = props.selectedValue === option;
+    var isSelected = props.selectedValue === option;
     var isDisabled = props.isOptionDisabled && props.isOptionDisabled(index);
-    return React__default.createElement("div", {
-      className: clsx('LuiRadioInput-option', {
-        isDisabled: isDisabled
-      }),
-      key: radioId
-    }, React__default.createElement("label", {
+    return React__default.createElement("label", {
       htmlFor: radioId,
-      className: "LuiRadioInput-option-label",
+      className: clsx('LuiRadioInput-label', {
+        'LuiRadioInput-label--isDisabled': isDisabled,
+        'LuiRadioInput-label--isSelected': isSelected
+      }),
       key: radioId
     }, React__default.createElement("input", Object.assign({
       disabled: isDisabled,
-      className: "LuiRadioInput-option-button",
+      className: "LuiRadioInput-input",
       type: "radio",
       id: radioId,
       name: option,
       value: option,
-      checked: isChecked,
+      checked: isSelected,
       onChange: props.onChange
-    }, props.inputProps)), React__default.createElement("span", {
-      className: clsx('LuiRadioInput-option-check', {
-        isChecked: isChecked
-      })
-    }), props.renderLabelFor ? props.renderLabelFor(option) : option));
-  }), props.error && React__default.createElement("div", {
-    className: "LuiRadioInput-error"
+    }, props.inputProps)), props.renderLabelFor ? props.renderLabelFor(option) : option);
+  })), props.error && React__default.createElement("div", {
+    className: "LuiRadioInput-errorMsg"
   }, React__default.createElement(LuiIcon, {
     alt: 'error',
     name: "ic_error",
-    size: "sm",
+    size: "md",
     status: "error"
-  }), React__default.createElement("span", null, props.error)));
+  }), React__default.createElement("p", null, props.error))));
 };
 
 function LuiFormikCheckbox(props) {
@@ -18115,9 +18116,9 @@ function isChromatic() {
   return !!((_window = window) != null && _window.navigator.userAgent.match(/Chromatic/) || (_window2 = window) != null && _window2.location.href.match(/chromatic=true/));
 }
 
-var css$5 = ":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 css$6 = ":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%)"};
-n(css$5,{});
+n(css$6,{});
 
 /**
  * A wrapper around React Select with Lui styling
@@ -18199,8 +18200,8 @@ function LuiComboSelectActual(givenProps, ref) {
   }));
 }
 
-var css$6 = ":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.LuiShadow_LuiShadow__a0705fc2 {\n  box-shadow: 0 0 1.5rem 1px rgba(0, 113, 152, 0.1);\n  border-radius: 5px;\n  padding: 1.5rem;\n  margin-top: 0.75rem;\n  background-color: #ffffff;\n}";
-n(css$6,{});
+var css$7 = ":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.LuiShadow_LuiShadow__a0705fc2 {\n  box-shadow: 0 0 1.5rem 1px rgba(0, 113, 152, 0.1);\n  border-radius: 5px;\n  padding: 1.5rem;\n  margin-top: 0.75rem;\n  background-color: #ffffff;\n}";
+n(css$7,{});
 
 var LuiShadow = function LuiShadow(props) {
   return React__default.createElement("div", {