@widergy/energy-ui 3.158.1 → 3.160.0

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

@@ -0,0 +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
+  } = _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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,74 @@
+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,
+    description,
+    descriptionProps = {},
+    disabled,
+    icon,
+    name,
+    nameProps = {},
+    onChange,
+    prefix,
+    selected,
+    suffix,
+    variant = RADIO_VARIANTS.DEFAULT
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classes.root,
+    onClick: () => !disabled && onChange(),
+    role: "button"
+  }, 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, {
+    name: icon,
+    colorTheme: selected ? 'accent' : 'dark',
+    size: ICON_SIZES[variant]
+  }), /*#__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), 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,
+  name: string,
+  nameProps: 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

@@ -0,0 +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,
+    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

@@ -0,0 +1,5 @@
+export const SPACING = {
+  SMALL: 'small',
+  MEDIUM: 'medium'
+};
+export const NO_CATEGORY = 'No Category';

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

@@ -0,0 +1,111 @@
+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 Radio from './components/Radio';
+import styles from './styles.module.scss';
+import { NO_CATEGORY } from './constants';
+const UTRadioGroup = _ref => {
+  let {
+    actions,
+    classNames = {},
+    dataTestId,
+    disabled,
+    horizontalSpacing = 'medium',
+    itemDataTestId,
+    onChange = () => {},
+    options,
+    required,
+    reversed,
+    title,
+    value = null,
+    variant,
+    nameProps,
+    descriptionProps,
+    verticalSpacing = '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]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.container, "  ").concat(classNames.root),
+    "data-testid": dataTestId
+  }, 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,
+      key: item.value,
+      nameProps: nameProps,
+      onChange: () => onChange(item.value),
+      reversed: reversed,
+      selected: item.value === value,
+      spacing: horizontalSpacing,
+      variant: variant
+    }, (item === null || item === void 0 ? void 0 : item.configuration) || {}, item))));
+  })));
+};
+UTRadioGroup.propTypes = {
+  actions: arrayOf(buttonTypes),
+  classNames: objectOf(string),
+  dataTestId: string,
+  descriptionProps: object,
+  disabled: bool,
+  error: 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;

package/dist/esm/components/UTRadioGroup/versions/V1/styles.module.scss

@@ -0,0 +1,43 @@
+$spacing-medium: 16px;
+$spacing-small: 8px;
+
+%categoryContainer {
+  display: flex;
+  flex-direction: column;
+  grid-gap: $spacing-medium;
+}
+
+.mediumCategoryContainer {
+  @extend %categoryContainer;
+  grid-gap: $spacing-medium;
+}
+
+.smallCategoryContainer {
+  @extend %categoryContainer;
+  grid-gap: $spacing-small;
+}
+
+.categoryTitle {
+  padding: 8px 0;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  align-self: flex-start;
+  grid-gap: $spacing-medium;
+  width: 100%;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  grid-gap: $spacing-medium;
+}
+
+.headerContainer {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 8px;
+}
+

package/dist/esm/components/UTRating/index.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { string } from 'prop-types';
+import V0 from './versions/V0';
+import V1 from './versions/V1';
+const UTRating = _ref => {
+  let {
+    version = 'V0',
+    ...props
+  } = _ref;
+  const Component = {
+    V0,
+    V1
+  }[version];
+  return /*#__PURE__*/React.createElement(Component, props);
+};
+UTRating.propTypes = {
+  version: string
+};
+export default UTRating;

package/dist/esm/components/UTRating/versions/V0/components/Circle/index.js

@@ -0,0 +1,82 @@
+import React, { useState } from 'react';
+import Avatar from '@material-ui/core/Avatar';
+import IconButton from '@material-ui/core/IconButton';
+import { bool, func, number, string, shape, oneOfType } from 'prop-types';
+import UTLabel from '../../../../../UTLabel';
+import { BOTTOM_TEXT, SIDE_TEXT, NO_TEXT } from '../../constants';
+import styles from './styles.module.scss';
+const Circle = _ref => {
+  let {
+    selected,
+    onClick,
+    value,
+    order,
+    name,
+    isFirst,
+    isLast,
+    textVariant,
+    color,
+    classes
+  } = _ref;
+  const [isHovered, setIsHovered] = useState(false);
+  const handleClick = () => onClick(order, value);
+  const handleHover = () => setIsHovered(true);
+  const onMouseLeave = () => setIsHovered(false);
+  const onFocus = () => {};
+  const textVariants = {
+    [SIDE_TEXT]: {
+      containerClass: isFirst ? styles.first : isLast && styles.last,
+      labelClass: classes.label,
+      showLabel: isFirst || isLast
+    },
+    [BOTTOM_TEXT]: {
+      containerClass: "".concat(styles.withTextBottom, " ").concat(classes.circleWithTextBottom),
+      labelClass: "".concat(isFirst ? styles.labelBottomFirst : isLast && styles.labelBottomLast, " ").concat(classes.label, " ").concat(isFirst ? classes.labelBottomFirst : isLast && classes.labelBottomLast),
+      showLabel: isFirst || isLast
+    },
+    [NO_TEXT]: {
+      containerClass: '',
+      labelClass: '',
+      showLabel: false
+    }
+  };
+  const textVariantToUse = textVariants[textVariant] || textVariants[BOTTOM_TEXT];
+  const showPropColor = color && (isHovered || selected);
+  const avatarStyle = {
+    borderColor: color
+  };
+  const avatarSelectedStyle = {
+    backgroundColor: color,
+    borderColor: color
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.container, " ").concat(textVariantToUse.containerClass)
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    onFocus: onFocus,
+    onClick: handleClick,
+    onMouseOver: handleHover,
+    onMouseLeave: onMouseLeave,
+    className: styles.icon
+  }, /*#__PURE__*/React.createElement(Avatar, {
+    style: color && (showPropColor ? avatarSelectedStyle : avatarStyle),
+    className: "".concat(styles.avatar, " ").concat(classes.avatar, " ").concat(showPropColor && styles.selectedAvatar)
+  }, value)), textVariantToUse.showLabel && /*#__PURE__*/React.createElement(UTLabel, {
+    className: "".concat(styles.text, " ").concat(textVariantToUse.labelClass)
+  }, name));
+};
+Circle.propTypes = {
+  selected: bool,
+  onClick: func,
+  value: oneOfType([number, string]),
+  order: number,
+  name: string,
+  isFirst: bool,
+  isLast: bool,
+  textVariant: string,
+  color: string,
+  classes: shape({
+    label: string,
+    avatar: string
+  })
+};
+export default Circle;