@widergy/energy-ui 3.172.3 → 3.173.0

package/dist/esm/components/UTRadioGroup/versions/V0/index.js

@@ -1 +1,125 @@
-function _extends(){return _extends=Object.assign?Object.assign.bind():function(n){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var r in t)({}).hasOwnProperty.call(t,r)&&(n[r]=t[r])}return n},_extends.apply(null,arguments)}function _defineProperty(e,r,t){return(r=_toPropertyKey(r))in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==typeof i?i:i+""}function _toPrimitive(t,r){if("object"!=typeof t||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=typeof i)return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===r?String:Number)(t)}import React,{Fragment,PureComponent}from"react";import FormControlLabel from"@material-ui/core/FormControlLabel";import Radio from"@material-ui/core/Radio";import RadioGroup from"@material-ui/core/RadioGroup";import{string,arrayOf,func,objectOf,bool,object,oneOfType,element}from"prop-types";import{buttonTypes}from"../../../../types/buttonTypes";import{fieldType,inputPropTypes}from"../../../../types/formTypes";import WithTheme from"../../../WithTheme";import UTFieldLabel from"../../../UTFieldLabel";import{mergeClasses}from"../../../../utils/classesUtils";import{retrieveStyle,retrieveMuiTheme}from"./theme";class UTRadioGroup extends PureComponent{constructor(){super(...arguments),_defineProperty(this,"handleChange",(_,value)=>this.props.input.onChange(value)),_defineProperty(this,"renderRadioItem",_ref=>{let{classes:classes,index:index,option:option}=_ref;const{className:className,customRadioLabel:CustomRadioLabel,disabled:disabled,disableRipple:disableRipple=!1,input:input,labelKey:labelKey,valueKey:valueKey}=this.props,isChecked=input.value===option[valueKey],{dataTestId:dataTestId}=option;return React.createElement(FormControlLabel,{key:option[valueKey],value:option[valueKey],checked:isChecked,classes:{root:"\n            ".concat(classes.root,"\n            ").concat(isChecked&&classes.checkedRoot,"\n            ").concat(option.disabled&&classes.disabledRoot,"\n          "),label:classes.label},"data-testid":dataTestId,disabled:disabled||option.disabled,label:CustomRadioLabel?React.createElement(CustomRadioLabel,{option:option,checked:isChecked}):option[labelKey],control:React.createElement(Radio,{disableRipple:disableRipple,classes:{root:classes.iconRoot,checked:"".concat(classes.checked," ").concat(classes.checkedIconRoot)},inputProps:{"data-testid":dataTestId?"".concat(dataTestId,".input.").concat(index):null}}),className:"".concat(classes.formControlLabel," \n              ").concat(this.props.divider&&0===index&&classes.topDivider," \n              ").concat(this.props.divider&&classes.divider,"\n              ").concat(className)})})}render(){var _field$configuration;const{actions:actions,classNames:classNames={},classes:themeClasses,containerClassName:containerClassName,field:field,hideLabels:hideLabels,input:input,options:options,titleProps:titleProps,withUpperTitle:withUpperTitle}=this.props,shouldShowUpperTitle=((null==field||null===(_field$configuration=field.configuration)||void 0===_field$configuration?void 0:_field$configuration.ignore_title)||hideLabels)&&withUpperTitle&&(null==field?void 0:field.title),classes=mergeClasses(themeClasses,classNames);return React.createElement(React.Fragment,null,shouldShowUpperTitle&&React.createElement(UTFieldLabel,_extends({actions:actions,className:classes.title,readOnly:field.read_only,required:field.required},titleProps),null==field?void 0:field.title),React.createElement(RadioGroup,{name:input.name,value:input.value||"",className:containerClassName,onChange:this.handleChange},options.map((option,index)=>this.renderRadioItem({classes:classes,index:index,option:option}))))}}UTRadioGroup.defaultProps={classes:{},labelKey:"name",valueKey:"value"},UTRadioGroup.propTypes={actions:arrayOf(buttonTypes),classes:objectOf(string),className:string,classNames:objectOf(string),containerClassName:string,customRadioLabel:oneOfType([element,func]),dataTestId:string,disabled:bool,disableRipple:bool,divider:bool,field:fieldType,hideLabels:bool,input:inputPropTypes,labelKey:string,options:arrayOf(object),titleProps:object,valueKey:string,withUpperTitle:bool};export default WithTheme(retrieveStyle,retrieveMuiTheme)(UTRadioGroup);
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React, { Fragment, PureComponent } from 'react';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Radio from '@material-ui/core/Radio';
+import RadioGroup from '@material-ui/core/RadioGroup';
+import { string, arrayOf, func, objectOf, bool, object, oneOfType, element } from 'prop-types';
+import { buttonTypes } from '../../../../types/buttonTypes';
+import { fieldType, inputPropTypes } from '../../../../types/formTypes';
+import WithTheme from '../../../WithTheme';
+import UTFieldLabel from '../../../UTFieldLabel';
+import { mergeClasses } from '../../../../utils/classesUtils';
+import { retrieveStyle, retrieveMuiTheme } from './theme';
+class UTRadioGroup extends PureComponent {
+  constructor() {
+    super(...arguments);
+    _defineProperty(this, "handleChange", (_, value) => this.props.input.onChange(value));
+    _defineProperty(this, "renderRadioItem", _ref => {
+      let {
+        classes,
+        index,
+        option
+      } = _ref;
+      const {
+        className,
+        customRadioLabel: CustomRadioLabel,
+        disabled,
+        disableRipple = false,
+        input,
+        labelKey,
+        valueKey
+      } = this.props;
+      const isChecked = input.value === option[valueKey];
+      const {
+        dataTestId
+      } = option;
+      return /*#__PURE__*/React.createElement(FormControlLabel, {
+        key: option[valueKey],
+        value: option[valueKey],
+        checked: isChecked,
+        classes: {
+          root: "\n            ".concat(classes.root, "\n            ").concat(isChecked && classes.checkedRoot, "\n            ").concat(option.disabled && classes.disabledRoot, "\n          "),
+          label: classes.label
+        },
+        "data-testid": dataTestId,
+        disabled: disabled || option.disabled,
+        label: CustomRadioLabel ? /*#__PURE__*/React.createElement(CustomRadioLabel, {
+          option: option,
+          checked: isChecked
+        }) : option[labelKey],
+        control: /*#__PURE__*/React.createElement(Radio, {
+          disableRipple: disableRipple,
+          classes: {
+            root: classes.iconRoot,
+            checked: "".concat(classes.checked, " ").concat(classes.checkedIconRoot)
+          },
+          inputProps: {
+            'data-testid': dataTestId ? "".concat(dataTestId, ".input.").concat(index) : null
+          }
+        }),
+        className: "".concat(classes.formControlLabel, " \n              ").concat(this.props.divider && index === 0 && classes.topDivider, " \n              ").concat(this.props.divider && classes.divider, "\n              ").concat(className)
+      });
+    });
+  }
+  render() {
+    var _field$configuration;
+    const {
+      actions,
+      classNames = {},
+      classes: themeClasses,
+      containerClassName,
+      field,
+      hideLabels,
+      input,
+      options,
+      titleProps,
+      withUpperTitle
+    } = this.props;
+    const shouldShowUpperTitle = ((field === null || field === void 0 || (_field$configuration = field.configuration) === null || _field$configuration === void 0 ? void 0 : _field$configuration.ignore_title) || hideLabels) && withUpperTitle && (field === null || field === void 0 ? void 0 : field.title);
+    const classes = mergeClasses(themeClasses, classNames);
+    return /*#__PURE__*/React.createElement(React.Fragment, null, shouldShowUpperTitle && /*#__PURE__*/React.createElement(UTFieldLabel, _extends({
+      actions: actions,
+      className: classes.title,
+      readOnly: field.read_only,
+      required: field.required
+    }, titleProps), field === null || field === void 0 ? void 0 : field.title), /*#__PURE__*/React.createElement(RadioGroup, {
+      name: input.name,
+      value: input.value || '',
+      className: containerClassName,
+      onChange: this.handleChange
+    }, options.map((option, index) => this.renderRadioItem({
+      classes,
+      index,
+      option
+    }))));
+  }
+}
+UTRadioGroup.defaultProps = {
+  classes: {},
+  labelKey: 'name',
+  valueKey: 'value'
+};
+UTRadioGroup.propTypes = {
+  actions: arrayOf(buttonTypes),
+  classes: objectOf(string),
+  className: string,
+  classNames: objectOf(string),
+  containerClassName: string,
+  customRadioLabel: oneOfType([element, func]),
+  dataTestId: string,
+  disabled: bool,
+  disableRipple: bool,
+  divider: bool,
+  field: fieldType,
+  hideLabels: bool,
+  input: inputPropTypes,
+  labelKey: string,
+  options: arrayOf(object),
+  titleProps: object,
+  valueKey: string,
+  withUpperTitle: bool
+};
+export default WithTheme(retrieveStyle, retrieveMuiTheme)(UTRadioGroup);

package/dist/esm/components/UTRadioGroup/versions/V0/theme.js

@@ -1 +1,101 @@
-import{getIn}from"seamless-immutable";import{createTheme}from"@material-ui/core/styles";import Colors from"../../../../scss/variables/colors.module.scss";export const retrieveStyle=_ref=>{let{theme:theme}=_ref;return{formControlLabel:{backgroundColor:getIn(theme,["UTRadioGroup","formControlLabel","backgroundColor"],"transparent"),color:getIn(theme,["UTRadioGroup","formControlLabel","color"],"".concat(Colors.gray)),height:getIn(theme,["UTRadioGroup","formControlLabel","height"],36),width:getIn(theme,["UTRadioGroup","formControlLabel","width"],"100%"),margin:getIn(theme,["UTRadioGroup","formControlLabel","margin"],"0px 0px 0px 0px")},topDivider:{borderTop:getIn(theme,["UTRadioGroup","topDivider","borderTop"],"solid 1px ".concat(Colors.dividerBase))},divider:{borderBottom:getIn(theme,["UTRadioGroup","divider","borderBottom"],"solid 1px ".concat(Colors.dividerBase))},root:{fontFamily:getIn(theme,["UTRadioGroup","root","fontFamiliy"],"Roboto, Helvetica, sans-serif"),backgroundColor:getIn(theme,["UTRadioGroup","root","backgroundColor"],"".concat(Colors.white)),height:getIn(theme,["UTRadioGroup","root","height"],38),margin:getIn(theme,["UTRadioGroup","root","margin"],"0px 0px 10px 0px"),width:getIn(theme,["UTRadioGroup","root","width"],"100%"),transition:getIn(theme,["UTRadioGroup","root","transition"],"all 350ms cubic-bezier(0.4, 0, 0.2, 1) 0ms"),willChange:"left, width","&:hover:not($checkedRoot)":{backgroundColor:getIn(theme,["UTRadioGroup","root","hover","backgroundColor"],"transparent"),transition:getIn(theme,["UTRadioGroup","root","hoverTransition","transition"],"background-color 0.75s ease")},"&$checkedRoot":{backgroundColor:getIn(theme,["UTRadioGroup","root","selectedColor","backgroundColor"],"transparent")}},disabledRoot:{opacity:getIn(theme,["UTRadioGroup","disabledRoot","opacity"])},textColorPrimary:{"&$checkedRoot":{color:getIn(theme,["UTRadioGroup","textColorPrimary","color"],"".concat(Colors.white))}},checkedRoot:getIn(theme,["UTRadioGroup","selected"],{})}};export const retrieveMuiTheme=theme=>createTheme({typography:{fontFamily:getIn(theme,["Fonts","fontFamily"])},overrides:{MuiTypography:{body1:{fontFamily:getIn(theme,["Fonts","fontFamily"],"Roboto"),fontSize:getIn(theme,["Fonts","fontSize"],"14px"),color:getIn(theme,["Fonts","color"],"currentColor"),width:getIn(theme,["UTRadioGroup","root","width"])}},MuiRadio:{colorSecondary:{color:getIn(theme,["UTRadioGroup","root","color"],"".concat(Colors.gray)),"&$checked":{color:getIn(theme,["UTRadioGroup","selected","color"],"".concat(Colors.inputPrimary))},"&$disabled":{color:getIn(theme,["UTRadioGroup","disabled","color"],"".concat(Colors.disabledGray))}}},MuiFormLabel:{root:{color:getIn(theme,["UTRadioGroup","formLabel","color"]),"&$error":{color:getIn(theme,["UTRadioGroup","formLabel","errorColor"],Colors.gray)},"&$focused":{color:getIn(theme,["UTRadioGroup","formLabel","focusedColor"],Colors.primary),"&$error":{color:theme.Palette.error["05"]}},fontFamily:getIn(theme,["Fonts","fontFamily"]),fontSize:getIn(theme,["UTRadioGroup","fontSize"],getIn(theme,["Fonts","medium"],14))}},MuiFormHelperText:{root:{fontSize:getIn(theme,["UTRadioGroup","helperText","fontSize"],12),color:theme.Palette.error["05"]}},MuiSvgIcon:{root:{fontSize:getIn(theme,["UTRadioGroup","radioButton","fontSize"],24)}}}});
+import { getIn } from 'seamless-immutable';
+import { createTheme } from '@material-ui/core/styles';
+import Colors from '../../../../scss/variables/colors.module.scss';
+export const retrieveStyle = _ref => {
+  let {
+    theme
+  } = _ref;
+  return {
+    formControlLabel: {
+      backgroundColor: getIn(theme, ['UTRadioGroup', 'formControlLabel', 'backgroundColor'], 'transparent'),
+      color: getIn(theme, ['UTRadioGroup', 'formControlLabel', 'color'], "".concat(Colors.gray)),
+      height: getIn(theme, ['UTRadioGroup', 'formControlLabel', 'height'], 36),
+      width: getIn(theme, ['UTRadioGroup', 'formControlLabel', 'width'], "100%"),
+      margin: getIn(theme, ['UTRadioGroup', 'formControlLabel', 'margin'], "0px 0px 0px 0px")
+    },
+    topDivider: {
+      borderTop: getIn(theme, ['UTRadioGroup', 'topDivider', 'borderTop'], "solid 1px ".concat(Colors.dividerBase))
+    },
+    divider: {
+      borderBottom: getIn(theme, ['UTRadioGroup', 'divider', 'borderBottom'], "solid 1px ".concat(Colors.dividerBase))
+    },
+    root: {
+      fontFamily: getIn(theme, ['UTRadioGroup', 'root', 'fontFamiliy'], "Roboto, Helvetica, sans-serif"),
+      backgroundColor: getIn(theme, ['UTRadioGroup', 'root', 'backgroundColor'], "".concat(Colors.white)),
+      height: getIn(theme, ['UTRadioGroup', 'root', 'height'], 38),
+      margin: getIn(theme, ['UTRadioGroup', 'root', 'margin'], "0px 0px 10px 0px"),
+      width: getIn(theme, ['UTRadioGroup', 'root', 'width'], '100%'),
+      transition: getIn(theme, ['UTRadioGroup', 'root', 'transition'], "all 350ms cubic-bezier(0.4, 0, 0.2, 1) 0ms"),
+      willChange: 'left, width',
+      '&:hover:not($checkedRoot)': {
+        backgroundColor: getIn(theme, ['UTRadioGroup', 'root', 'hover', 'backgroundColor'], "transparent"),
+        transition: getIn(theme, ['UTRadioGroup', 'root', 'hoverTransition', 'transition'], 'background-color 0.75s ease')
+      },
+      '&$checkedRoot': {
+        backgroundColor: getIn(theme, ['UTRadioGroup', 'root', 'selectedColor', 'backgroundColor'], "transparent")
+      }
+    },
+    disabledRoot: {
+      opacity: getIn(theme, ['UTRadioGroup', 'disabledRoot', 'opacity'])
+    },
+    textColorPrimary: {
+      '&$checkedRoot': {
+        color: getIn(theme, ['UTRadioGroup', 'textColorPrimary', 'color'], "".concat(Colors.white))
+      }
+    },
+    checkedRoot: getIn(theme, ['UTRadioGroup', 'selected'], {})
+  };
+};
+export const retrieveMuiTheme = theme => createTheme({
+  typography: {
+    fontFamily: getIn(theme, ['Fonts', 'fontFamily'])
+  },
+  overrides: {
+    MuiTypography: {
+      body1: {
+        fontFamily: getIn(theme, ['Fonts', 'fontFamily'], 'Roboto'),
+        fontSize: getIn(theme, ['Fonts', 'fontSize'], "14px"),
+        color: getIn(theme, ['Fonts', 'color'], "currentColor"),
+        width: getIn(theme, ['UTRadioGroup', 'root', 'width'])
+      }
+    },
+    MuiRadio: {
+      colorSecondary: {
+        color: getIn(theme, ['UTRadioGroup', 'root', 'color'], "".concat(Colors.gray)),
+        '&$checked': {
+          color: getIn(theme, ['UTRadioGroup', 'selected', 'color'], "".concat(Colors.inputPrimary))
+        },
+        '&$disabled': {
+          color: getIn(theme, ['UTRadioGroup', 'disabled', 'color'], "".concat(Colors.disabledGray))
+        }
+      }
+    },
+    MuiFormLabel: {
+      root: {
+        color: getIn(theme, ['UTRadioGroup', 'formLabel', 'color']),
+        '&$error': {
+          color: getIn(theme, ['UTRadioGroup', 'formLabel', 'errorColor'], Colors.gray)
+        },
+        '&$focused': {
+          color: getIn(theme, ['UTRadioGroup', 'formLabel', 'focusedColor'], Colors.primary),
+          '&$error': {
+            color: theme.Palette.error['05']
+          }
+        },
+        fontFamily: getIn(theme, ['Fonts', 'fontFamily']),
+        fontSize: getIn(theme, ['UTRadioGroup', 'fontSize'], getIn(theme, ['Fonts', 'medium'], 14))
+      }
+    },
+    MuiFormHelperText: {
+      root: {
+        fontSize: getIn(theme, ['UTRadioGroup', 'helperText', 'fontSize'], 12),
+        color: theme.Palette.error['05']
+      }
+    },
+    MuiSvgIcon: {
+      root: {
+        fontSize: getIn(theme, ['UTRadioGroup', 'radioButton', 'fontSize'], 24)
+      }
+    }
+  }
+});

package/dist/esm/components/UTRadioGroup/versions/V1/components/Radio/constants.js

@@ -1 +1,8 @@
-export const RADIO_VARIANTS={DEFAULT:"default",BUTTON:"button",CARD:"card"};export const ICON_SIZES={[RADIO_VARIANTS.CARD]:48};
+export const RADIO_VARIANTS = {
+  DEFAULT: 'default',
+  BUTTON: 'button',
+  CARD: 'card'
+};
+export const ICON_SIZES = {
+  [RADIO_VARIANTS.CARD]: 48
+};

package/dist/esm/components/UTRadioGroup/versions/V1/components/Radio/index.js

@@ -1 +1,80 @@
-function _extends(){return _extends=Object.assign?Object.assign.bind():function(n){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var r in t)({}).hasOwnProperty.call(t,r)&&(n[r]=t[r])}return n},_extends.apply(null,arguments)}import React from"react";import MaterialRadio from"@material-ui/core/Radio";import{object,bool,func,string}from"prop-types";import UTIcon from"../../../../../UTIcon";import UTLabel from"../../../../../UTLabel";import WithTheme from"../../../../../WithTheme";import{retrieveStyle,retrieveMuiTheme}from"./theme";import{RADIO_VARIANTS,ICON_SIZES}from"./constants";const Radio=_ref=>{let{classes:classes,description:description,descriptionProps:descriptionProps={},disabled:disabled,icon:icon,name:name,nameProps:nameProps={},onChange:onChange,prefix:prefix,selected:selected,suffix:suffix,variant:variant=RADIO_VARIANTS.DEFAULT}=_ref;return React.createElement("div",{className:classes.root,onClick:()=>!disabled&&onChange(),role:"button"},variant===RADIO_VARIANTS.DEFAULT&&React.createElement(MaterialRadio,{checked:selected,onChange:onChange,value:name,disabled:disabled}),React.createElement("div",{className:classes.content},icon&&React.createElement(UTIcon,{name:icon,colorTheme:selected?"accent":"dark",size:ICON_SIZES[variant]}),React.createElement("div",{className:classes.contentContainer},React.createElement("div",{className:classes.content},prefix&&React.createElement(UTLabel,{colorTheme:"gray"},prefix),name&&React.createElement(UTLabel,_extends({colorTheme:selected?"accent":"dark"},nameProps),name),suffix&&React.createElement(UTLabel,{colorTheme:"gray",variant:"small",weight:"medium"},suffix)),React.createElement(UTLabel,_extends({colorTheme:"gray",variant:"body"},descriptionProps),description))),selected&&[RADIO_VARIANTS.CARD,RADIO_VARIANTS.BUTTON].includes(variant)&&React.createElement(UTIcon,{name:"IconCheck",colorTheme:"accent"}))};Radio.propTypes={classes:object,description:string,descriptionProps:object,disabled:bool,icon:string,name:string,nameProps:object,onChange:func,prefix:string,selected:bool,suffix:string,variant:string};export default WithTheme(retrieveStyle,retrieveMuiTheme)(Radio);
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import MaterialRadio from '@material-ui/core/Radio';
+import { object, bool, func, string } from 'prop-types';
+import UTTouchableWithoutFeedback from '../../../../../UTTouchableWithoutFeedback';
+import UTIcon from '../../../../../UTIcon';
+import UTLabel from '../../../../../UTLabel';
+import WithTheme from '../../../../../WithTheme';
+import { retrieveStyle, retrieveMuiTheme } from './theme';
+import { RADIO_VARIANTS, ICON_SIZES } from './constants';
+const Radio = _ref => {
+  let {
+    classes,
+    description,
+    descriptionProps = {},
+    disabled,
+    icon,
+    iconProps = {},
+    iconSelectedProps = {},
+    name,
+    nameProps = {},
+    nameSelectedProps = {},
+    onChange,
+    prefix,
+    selected,
+    suffix,
+    variant = RADIO_VARIANTS.DEFAULT
+  } = _ref;
+  return /*#__PURE__*/React.createElement(UTTouchableWithoutFeedback, {
+    className: classes.root,
+    onClick: () => !disabled && onChange()
+  }, variant === RADIO_VARIANTS.DEFAULT && /*#__PURE__*/React.createElement(MaterialRadio, {
+    checked: selected,
+    onChange: onChange,
+    value: name,
+    disabled: disabled
+  }), /*#__PURE__*/React.createElement("div", {
+    className: classes.content
+  }, icon && /*#__PURE__*/React.createElement(UTIcon, _extends({
+    name: icon,
+    colorTheme: selected ? 'accent' : 'dark',
+    size: ICON_SIZES[variant]
+  }, iconProps, selected ? iconSelectedProps : {})), /*#__PURE__*/React.createElement("div", {
+    className: classes.contentContainer
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classes.content
+  }, prefix && /*#__PURE__*/React.createElement(UTLabel, {
+    colorTheme: "gray"
+  }, prefix), name && /*#__PURE__*/React.createElement(UTLabel, _extends({
+    colorTheme: selected ? 'accent' : 'dark'
+  }, nameProps, selected ? nameSelectedProps : {}), name), suffix && /*#__PURE__*/React.createElement(UTLabel, {
+    colorTheme: "gray",
+    variant: "small",
+    weight: "medium"
+  }, suffix)), /*#__PURE__*/React.createElement(UTLabel, _extends({
+    colorTheme: "gray",
+    variant: "body"
+  }, descriptionProps), description))), selected && [RADIO_VARIANTS.CARD, RADIO_VARIANTS.BUTTON].includes(variant) && /*#__PURE__*/React.createElement(UTIcon, {
+    name: "IconCheck",
+    colorTheme: "accent"
+  }));
+};
+Radio.propTypes = {
+  classes: object,
+  description: string,
+  descriptionProps: object,
+  disabled: bool,
+  icon: string,
+  iconProps: object,
+  iconSelectedProps: object,
+  name: string,
+  nameProps: object,
+  nameSelectedProps: object,
+  onChange: func,
+  prefix: string,
+  selected: bool,
+  suffix: string,
+  variant: string
+};
+export default WithTheme(retrieveStyle, retrieveMuiTheme)(Radio);

package/dist/esm/components/UTRadioGroup/versions/V1/components/Radio/theme.js

@@ -1 +1,152 @@
-import{createTheme}from"@material-ui/core/styles";import{getShadow}from"../../../../../../utils/shadowUtils";import{SPACING}from"../../constants";import{RADIO_VARIANTS}from"./constants";export const retrieveStyle=_ref=>{var _theme$Palette$action,_theme$Palette$action2,_theme$Palette$action3,_theme$Palette$shadow;let{theme:theme,variant:variant=RADIO_VARIANTS.DEFAULT,disabled:disabled,selected:selected,spacing:spacing=SPACING.MEDIUM,reversed:reversed}=_ref;const accent01=(null===(_theme$Palette$action=theme.Palette.actions)||void 0===_theme$Palette$action?void 0:_theme$Palette$action.accent["01"])||theme.Palette.accent["01"],accent02=(null===(_theme$Palette$action2=theme.Palette.actions)||void 0===_theme$Palette$action2?void 0:_theme$Palette$action2.accent["02"])||theme.Palette.accent["02"],accent05=(null===(_theme$Palette$action3=theme.Palette.actions)||void 0===_theme$Palette$action3?void 0:_theme$Palette$action3.accent["05"])||theme.Palette.accent["05"],baseTheme={[RADIO_VARIANTS.CARD]:{backgroundColor:theme.Palette.light["01"],boxShadow:getShadow({color:null===(_theme$Palette$shadow=theme.Palette.shadows)||void 0===_theme$Palette$shadow?void 0:_theme$Palette$shadow.grayscale,level:1}),outline:"2px solid transparent","&:hover":{backgroundColor:theme.Palette.light["03"],boxShadow:"none"},"&:active":{backgroundColor:theme.Palette.light["04"],boxShadow:"none","& $aditionalInfoDescription":{color:theme.Palette.gray["03"]}}},[RADIO_VARIANTS.BUTTON]:{backgroundColor:theme.Palette.light["01"],"&:hover":{backgroundColor:theme.Palette.light["03"]},"&:active":{backgroundColor:theme.Palette.light["04"]}},[RADIO_VARIANTS.DEFAULT]:{}}[variant],selectedTheme={[RADIO_VARIANTS.CARD]:{boxShadow:"none",outline:"2px solid ".concat(accent05),"& $titleText, & $description, & $aditionalInfoTitle, & $aditionalInfoDescription":{color:accent05},"& $icon path, & $infoIcon path, & $checkIcon path":{fill:accent05},"&:hover":{backgroundColor:accent01,outline:"2px solid ".concat(accent05)},"&:active":{backgroundColor:accent02,outline:"2px solid ".concat(accent05)}},[RADIO_VARIANTS.BUTTON]:{},[RADIO_VARIANTS.DEFAULT]:{}}[variant],disabledTheme={[RADIO_VARIANTS.CARD]:{backgroundColor:theme.Palette.light["03"],boxShadow:"none",outline:"2px solid transparent","& $titleText, & $description, & $aditionalInfoTitle, & $aditionalInfoDescription":{color:theme.Palette.gray["04"]},"& $icon path, & $infoIcon path, & $checkIcon path":{fill:theme.Palette.gray["04"]},"&:hover":{backgroundColor:theme.Palette.light["03"],outline:"2px solid transparent",pointerEvents:"none"}},[RADIO_VARIANTS.BUTTON]:{backgroundColor:theme.Palette.light["01"],opacity:.5},[RADIO_VARIANTS.DEFAULT]:{opacity:.5}}[variant];return{root:{alignItems:"center",borderRadius:"8px",display:"flex",flexDirection:"row",gap:{[SPACING.SMALL]:"8px",[SPACING.MEDIUM]:"16px"}[spacing],minHeight:"24px",overflow:"hidden",padding:"12px 16px",...disabled?disabledTheme:selected?selectedTheme:baseTheme},content:{alignItems:"center",display:"flex",flexDirection:reversed?"row-reverse":"row",gap:{[SPACING.SMALL]:"8px",[SPACING.MEDIUM]:"16px"}[spacing],marginRight:"auto"},name:{colorTheme:"accent"},contentContainer:{display:"flex",flexDirection:"column",gap:"4px"}}};export const retrieveMuiTheme=theme=>{var _theme$Palette$action4;const accent04=(null===(_theme$Palette$action4=theme.Palette.actions)||void 0===_theme$Palette$action4?void 0:_theme$Palette$action4.accent["04"])||theme.Palette.accent["04"];return createTheme({overrides:{MuiRadio:{colorSecondary:{color:accent04,"&$checked":{color:accent04},"&$disabled":{color:theme.Palette.gray["04"]}},root:{padding:0}}}})};
+import { createTheme } from '@material-ui/core/styles';
+import { getShadow } from '../../../../../../utils/shadowUtils';
+import { SPACING } from '../../constants';
+import { RADIO_VARIANTS } from './constants';
+export const retrieveStyle = _ref => {
+  var _theme$Palette$action, _theme$Palette$action2, _theme$Palette$action3, _theme$Palette$shadow;
+  let {
+    theme,
+    variant = RADIO_VARIANTS.DEFAULT,
+    disabled,
+    selected,
+    spacing = SPACING.MEDIUM,
+    reversed
+  } = _ref;
+  const accent01 = ((_theme$Palette$action = theme.Palette.actions) === null || _theme$Palette$action === void 0 ? void 0 : _theme$Palette$action.accent['01']) || theme.Palette.accent['01'];
+  const accent02 = ((_theme$Palette$action2 = theme.Palette.actions) === null || _theme$Palette$action2 === void 0 ? void 0 : _theme$Palette$action2.accent['02']) || theme.Palette.accent['02'];
+  const accent05 = ((_theme$Palette$action3 = theme.Palette.actions) === null || _theme$Palette$action3 === void 0 ? void 0 : _theme$Palette$action3.accent['05']) || theme.Palette.accent['05'];
+  const baseTheme = {
+    [RADIO_VARIANTS.CARD]: {
+      backgroundColor: theme.Palette.light['01'],
+      boxShadow: getShadow({
+        color: (_theme$Palette$shadow = theme.Palette.shadows) === null || _theme$Palette$shadow === void 0 ? void 0 : _theme$Palette$shadow.grayscale,
+        level: 1
+      }),
+      outline: "2px solid transparent",
+      '&:hover': {
+        backgroundColor: theme.Palette.light['03'],
+        boxShadow: 'none'
+      },
+      '&:active': {
+        backgroundColor: theme.Palette.light['04'],
+        boxShadow: 'none',
+        '& $aditionalInfoDescription': {
+          color: theme.Palette.gray['03']
+        }
+      }
+    },
+    [RADIO_VARIANTS.BUTTON]: {
+      backgroundColor: theme.Palette.light['01'],
+      '&:hover': {
+        backgroundColor: theme.Palette.light['03']
+      },
+      '&:active': {
+        backgroundColor: theme.Palette.light['04']
+      }
+    },
+    [RADIO_VARIANTS.DEFAULT]: {}
+  }[variant];
+  const selectedTheme = {
+    [RADIO_VARIANTS.CARD]: {
+      boxShadow: 'none',
+      outline: "2px solid ".concat(accent05),
+      '& $titleText, & $description, & $aditionalInfoTitle, & $aditionalInfoDescription': {
+        color: accent05
+      },
+      '& $icon path, & $infoIcon path, & $checkIcon path': {
+        fill: accent05
+      },
+      '&:hover': {
+        backgroundColor: accent01,
+        outline: "2px solid ".concat(accent05)
+      },
+      '&:active': {
+        backgroundColor: accent02,
+        outline: "2px solid ".concat(accent05)
+      }
+    },
+    [RADIO_VARIANTS.BUTTON]: {},
+    [RADIO_VARIANTS.DEFAULT]: {}
+  }[variant];
+  const disabledTheme = {
+    [RADIO_VARIANTS.CARD]: {
+      backgroundColor: theme.Palette.light['03'],
+      boxShadow: 'none',
+      outline: "2px solid transparent",
+      '& $titleText, & $description, & $aditionalInfoTitle, & $aditionalInfoDescription': {
+        color: theme.Palette.gray['04']
+      },
+      '& $icon path, & $infoIcon path, & $checkIcon path': {
+        fill: theme.Palette.gray['04']
+      },
+      '&:hover': {
+        backgroundColor: theme.Palette.light['03'],
+        outline: "2px solid transparent",
+        pointerEvents: 'none'
+      }
+    },
+    [RADIO_VARIANTS.BUTTON]: {
+      backgroundColor: theme.Palette.light['01'],
+      opacity: 0.5
+    },
+    [RADIO_VARIANTS.DEFAULT]: {
+      opacity: 0.5
+    }
+  }[variant];
+  return {
+    root: {
+      alignItems: 'center',
+      borderRadius: '8px',
+      display: 'flex',
+      flexDirection: 'row',
+      gap: {
+        [SPACING.SMALL]: '8px',
+        [SPACING.MEDIUM]: '16px'
+      }[spacing],
+      minHeight: '24px',
+      overflow: 'hidden',
+      padding: '12px 16px',
+      ...(disabled ? disabledTheme : selected ? selectedTheme : baseTheme)
+    },
+    content: {
+      alignItems: 'center',
+      display: 'flex',
+      flexDirection: reversed ? 'row-reverse' : 'row',
+      gap: {
+        [SPACING.SMALL]: '8px',
+        [SPACING.MEDIUM]: '16px'
+      }[spacing],
+      marginRight: 'auto'
+    },
+    name: {
+      colorTheme: 'accent'
+    },
+    contentContainer: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '4px'
+    }
+  };
+};
+export const retrieveMuiTheme = theme => {
+  var _theme$Palette$action4;
+  const accent04 = ((_theme$Palette$action4 = theme.Palette.actions) === null || _theme$Palette$action4 === void 0 ? void 0 : _theme$Palette$action4.accent['04']) || theme.Palette.accent['04'];
+  return createTheme({
+    overrides: {
+      MuiRadio: {
+        colorSecondary: {
+          color: accent04,
+          '&$checked': {
+            color: accent04
+          },
+          '&$disabled': {
+            color: theme.Palette.gray['04']
+          }
+        },
+        root: {
+          padding: 0
+        }
+      }
+    }
+  });
+};

package/dist/esm/components/UTRadioGroup/versions/V1/constants.js

@@ -1 +1,6 @@
-export const SPACING={SMALL:"small",MEDIUM:"medium"};export const NO_CATEGORY="No Category";
+export const SPACING = {
+  NONE: 'none',
+  SMALL: 'small',
+  MEDIUM: 'medium'
+};
+export const NO_CATEGORY = 'No Category';

package/dist/esm/components/UTRadioGroup/versions/V1/index.js

@@ -1 +1,136 @@
-function _extends(){return _extends=Object.assign?Object.assign.bind():function(n){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var r in t)({}).hasOwnProperty.call(t,r)&&(n[r]=t[r])}return n},_extends.apply(null,arguments)}import React,{useMemo}from"react";import{arrayOf,bool,func,objectOf,shape,string,object}from"prop-types";import RadioGroup from"@material-ui/core/RadioGroup";import{buttonTypes}from"../../../../types/buttonTypes";import UTFieldLabel from"../../../UTFieldLabel";import UTLabel from"../../../UTLabel";import{formatErrorToValidation}from"../../../UTValidation/utils";import UTValidation from"../../../UTValidation";import Radio from"./components/Radio";import styles from"./styles.module.scss";import{NO_CATEGORY}from"./constants";const UTRadioGroup=_ref=>{let{actions:actions,classNames:classNames={},dataTestId:dataTestId,descriptionProps:descriptionProps,disabled:disabled,error:error,errorDataTestId:errorDataTestId,horizontalSpacing:horizontalSpacing="medium",itemDataTestId:itemDataTestId,nameProps:nameProps,onChange:onChange=()=>{},options:options,required:required,reversed:reversed,title:title,value:value=null,variant:variant,verticalSpacing:verticalSpacing="medium"}=_ref;const categorizedOptions=useMemo(()=>{const optionsGrouped=options.reduce((groupedOptions,option)=>{const category=option.category||NO_CATEGORY;return groupedOptions[category]||(groupedOptions[category]=[]),groupedOptions[category].push(option),groupedOptions},{NO_CATEGORY:[]});return Object.entries(optionsGrouped).filter(_ref2=>{let[,categoryOptions]=_ref2;return categoryOptions.length>0}).sort((_ref3,_ref4)=>{let[categoryA]=_ref3,[categoryB]=_ref4;return categoryA===NO_CATEGORY?-1:categoryB===NO_CATEGORY?1:0})},[options]),validationData=useMemo(()=>error&&formatErrorToValidation(error),[error]);return React.createElement("div",{className:"".concat(styles.container,"  ").concat(classNames.root),"data-testid":dataTestId},title&&React.createElement("div",{className:"".concat(styles.headerContainer," ").concat(classNames.header)},title&&React.createElement(UTFieldLabel,{actions:actions,required:required},title)),React.createElement(RadioGroup,{value:value||"",className:styles.container},categorizedOptions.map((_ref5,catIndex)=>{let[category,categoryOptions]=_ref5;return React.createElement("div",{className:styles["".concat(verticalSpacing,"CategoryContainer")],key:category},category!==NO_CATEGORY&&React.createElement(UTLabel,{className:styles.categoryTitle,colorTheme:"gray",variant:"small",weight:"medium"},category.toUpperCase()),categoryOptions.map((item,index)=>React.createElement(Radio,_extends({dataTestId:itemDataTestId?"".concat(itemDataTestId,".category_").concat(catIndex,".").concat(index):null,descriptionProps:descriptionProps,disabled:item.disabled||disabled,key:item.value,nameProps:nameProps,onChange:()=>onChange(item.value),reversed:reversed,selected:item.value===value,spacing:horizontalSpacing,variant:variant},(null==item?void 0:item.configuration)||{},item))))})),validationData&&React.createElement(UTValidation,{dataTestId:errorDataTestId,validationData:validationData}))};UTRadioGroup.propTypes={actions:arrayOf(buttonTypes),classNames:objectOf(string),dataTestId:string,descriptionProps:object,disabled:bool,error:string,errorDataTestId:string,horizontalSpacing:string,itemDataTestId:string,nameProps:object,onChange:func,options:arrayOf(shape({category:string,checked:bool,disabled:bool,icon:string,name:string,value:string})),required:bool,reversed:bool,title:string,value:string,variant:string,verticalSpacing:string};export default UTRadioGroup;
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { useMemo } from 'react';
+import { arrayOf, bool, func, objectOf, oneOf, shape, string, object } from 'prop-types';
+import RadioGroup from '@material-ui/core/RadioGroup';
+import { buttonTypes } from '../../../../types/buttonTypes';
+import UTFieldLabel from '../../../UTFieldLabel';
+import UTLabel from '../../../UTLabel';
+import { formatErrorToValidation } from '../../../UTValidation/utils';
+import UTValidation from '../../../UTValidation';
+import Radio from './components/Radio';
+import styles from './styles.module.scss';
+import { getAreaStyle } from './utils';
+import { NO_CATEGORY, SPACING } from './constants';
+const UTRadioGroup = _ref => {
+  let {
+    actions,
+    area,
+    areaProps,
+    classNames = {},
+    dataTestId,
+    descriptionProps,
+    disabled,
+    error,
+    errorDataTestId,
+    horizontalSpacing = SPACING.MEDIUM,
+    iconProps,
+    iconSelectedProps,
+    itemDataTestId,
+    nameProps,
+    nameSelectedProps,
+    onChange = () => {},
+    options,
+    required,
+    reversed,
+    title,
+    value = null,
+    variant,
+    verticalSpacing = SPACING.MEDIUM
+  } = _ref;
+  const categorizedOptions = useMemo(() => {
+    const optionsGrouped = options.reduce((groupedOptions, option) => {
+      const category = option.category || NO_CATEGORY;
+      if (!groupedOptions[category]) {
+        groupedOptions[category] = [];
+      }
+      groupedOptions[category].push(option);
+      return groupedOptions;
+    }, {
+      NO_CATEGORY: []
+    });
+    return Object.entries(optionsGrouped).filter(_ref2 => {
+      let [, categoryOptions] = _ref2;
+      return categoryOptions.length > 0;
+    }).sort((_ref3, _ref4) => {
+      let [categoryA] = _ref3;
+      let [categoryB] = _ref4;
+      return categoryA === NO_CATEGORY ? -1 : categoryB === NO_CATEGORY ? 1 : 0;
+    });
+  }, [options]);
+  const validationData = useMemo(() => error && formatErrorToValidation(error), [error]);
+  const areaStyle = useMemo(() => getAreaStyle(area, areaProps), [area, areaProps]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.container, " ").concat(classNames.root || ''),
+    "data-testid": dataTestId,
+    style: areaStyle
+  }, title && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.headerContainer, " ").concat(classNames.header || '')
+  }, title && /*#__PURE__*/React.createElement(UTFieldLabel, {
+    actions: actions,
+    required: required
+  }, title)), /*#__PURE__*/React.createElement(RadioGroup, {
+    value: value || '',
+    className: styles.container
+  }, categorizedOptions.map((_ref5, catIndex) => {
+    let [category, categoryOptions] = _ref5;
+    return /*#__PURE__*/React.createElement("div", {
+      className: styles["".concat(verticalSpacing, "CategoryContainer")],
+      key: category
+    }, category !== NO_CATEGORY && /*#__PURE__*/React.createElement(UTLabel, {
+      className: styles.categoryTitle,
+      colorTheme: "gray",
+      variant: "small",
+      weight: "medium"
+    }, category.toUpperCase()), categoryOptions.map((item, index) => /*#__PURE__*/React.createElement(Radio, _extends({
+      dataTestId: itemDataTestId ? "".concat(itemDataTestId, ".category_").concat(catIndex, ".").concat(index) : null,
+      descriptionProps: descriptionProps,
+      disabled: item.disabled || disabled,
+      iconProps: iconProps,
+      iconSelectedProps: iconSelectedProps,
+      key: item.value,
+      nameProps: nameProps,
+      nameSelectedProps: nameSelectedProps,
+      onChange: () => onChange(item.value),
+      reversed: reversed,
+      selected: item.value === value,
+      spacing: horizontalSpacing,
+      variant: variant
+    }, (item === null || item === void 0 ? void 0 : item.configuration) || {}, item))));
+  })), validationData && /*#__PURE__*/React.createElement(UTValidation, {
+    dataTestId: errorDataTestId,
+    validationData: validationData
+  }));
+};
+UTRadioGroup.propTypes = {
+  actions: arrayOf(buttonTypes),
+  area: bool,
+  areaProps: object,
+  classNames: objectOf(string),
+  dataTestId: string,
+  descriptionProps: object,
+  disabled: bool,
+  error: string,
+  errorDataTestId: string,
+  horizontalSpacing: oneOf(Object.values(SPACING)),
+  iconProps: object,
+  iconSelectedProps: object,
+  itemDataTestId: string,
+  nameProps: object,
+  nameSelectedProps: object,
+  onChange: func,
+  options: arrayOf(shape({
+    category: string,
+    checked: bool,
+    disabled: bool,
+    icon: string,
+    name: string,
+    value: string
+  })),
+  required: bool,
+  reversed: bool,
+  title: string,
+  value: string,
+  variant: string,
+  verticalSpacing: oneOf(Object.values(SPACING))
+};
+export default UTRadioGroup;