@widergy/energy-ui 3.158.1 → 3.159.0

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

@@ -0,0 +1,133 @@
+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, { Fragment, useEffect } from 'react';
+import { func, string, bool, number, shape, oneOfType, element, object, node, objectOf } from 'prop-types';
+import Checkbox from '@material-ui/core/Checkbox';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import { shouldShowErrors } from '@widergy/web-utils/lib/form';
+import { useMutableState } from '@widergy/energy-hooks';
+import { inputPropTypes, metaPropTypes } from '../../../../types/formTypes';
+import { mergeClasses } from '../../../../utils/classesUtils';
+import UTLabel from '../../../UTLabel';
+import UTTooltip from '../../../UTTooltip';
+import WithTheme from '../../../WithTheme';
+var Checked = function Checked(props) {
+  return /*#__PURE__*/React.createElement("svg", props, /*#__PURE__*/React.createElement("path", {
+    d: "M10 14Zm0 3-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9Z"
+  }));
+};
+Checked.defaultProps = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "5 6.58 14 10.42"
+};
+import { retrieveStyle, retrieveMuiTheme } from './theme';
+import { tippyProps } from './constants';
+import styles from './styles.module.scss';
+const UTCheckbox = _ref => {
+  let {
+    classes: themeClasses = {},
+    classNames,
+    color = 'primary',
+    checkboxDataTestId,
+    CustomCheckedIcon = Checked,
+    customRowLabel: CustomRowLabel,
+    CustomUncheckedIcon = _ref2 => {
+      let {
+        className
+      } = _ref2;
+      return /*#__PURE__*/React.createElement("div", {
+        className: className
+      });
+    },
+    disabled,
+    disableRipple,
+    input,
+    item,
+    label,
+    labelDataTestId,
+    labelProps = {},
+    meta,
+    onChange,
+    showError,
+    tooltipContent,
+    useCustomIcons,
+    value
+  } = _ref;
+  const [checkedRef, setChecked] = useMutableState(value);
+  const handleChange = event => {
+    if (onChange) onChange(value);
+    if (input !== null && input !== void 0 && input.onChange) input.onChange(event.target.checked);
+  };
+  useEffect(() => {
+    setChecked(value || (input === null || input === void 0 ? void 0 : input.value));
+  }, [input === null || input === void 0 ? void 0 : input.value, value]);
+  const classes = mergeClasses(themeClasses, classNames);
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(FormControlLabel, {
+    disabled: disabled,
+    control: /*#__PURE__*/React.createElement(UTTooltip, {
+      content: tooltipContent,
+      stringContentClassName: styles.disableSelectionTooltip,
+      tippyProps: tippyProps
+    }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Checkbox, {
+      classes: {
+        colorPrimary: classes.checkboxColorPrimary,
+        colorSecondary: classes.checkboxColorSecondary
+      },
+      checkedIcon: useCustomIcons && /*#__PURE__*/React.createElement(CustomCheckedIcon, {
+        className: classes.checkedIcon
+      }),
+      inputProps: {
+        'data-testid': checkboxDataTestId
+      },
+      icon: useCustomIcons && /*#__PURE__*/React.createElement(CustomUncheckedIcon, {
+        className: classes.uncheckedIcon
+      }),
+      checked: checkedRef.current || false,
+      onChange: handleChange,
+      value: (input === null || input === void 0 ? void 0 : input.value) || value,
+      color: color,
+      disableRipple: disableRipple,
+      disabled: disabled
+    }))),
+    label: CustomRowLabel ? /*#__PURE__*/React.createElement(CustomRowLabel, {
+      item: item
+    }) : /*#__PURE__*/React.createElement(UTLabel, _extends({
+      className: classes.label,
+      dataTestId: labelDataTestId,
+      variant: "small",
+      withMarkdown: true
+    }, labelProps), label),
+    classes: classes && {
+      root: classes.root,
+      label: classes.label
+    }
+  }), showError && shouldShowErrors(meta) && /*#__PURE__*/React.createElement(UTLabel, {
+    colorTheme: "error",
+    variant: "small"
+  }, meta.error));
+};
+UTCheckbox.propTypes = {
+  classes: shape({
+    checkboxColorPrimary: string,
+    checkboxColorSecondary: string
+  }),
+  classNames: objectOf(string),
+  color: string,
+  checkboxDataTestId: string,
+  CustomCheckedIcon: node,
+  customRowLabel: oneOfType([func, element, string]),
+  CustomUncheckedIcon: node,
+  disabled: bool,
+  disableRipple: bool,
+  input: inputPropTypes,
+  item: oneOfType([string, object]),
+  label: oneOfType([number, string]),
+  labelDataTestId: string,
+  labelProps: object,
+  meta: metaPropTypes,
+  onChange: func,
+  showError: bool,
+  tooltipContent: element,
+  useCustomIcons: bool,
+  value: oneOfType([bool, string])
+};
+export default WithTheme(retrieveStyle, retrieveMuiTheme)(UTCheckbox);

package/dist/esm/components/UTCheckbox/versions/V0/styles.module.scss

@@ -0,0 +1,3 @@
+.disableSelectionTooltip {
+  text-align: center;
+}

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

@@ -0,0 +1,78 @@
+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 {
+    checkedIcon: {
+      width: getIn(theme, ['UTCheckbox', 'icon', 'checked', 'width']),
+      height: getIn(theme, ['UTCheckbox', 'icon', 'checked', 'height']),
+      margin: getIn(theme, ['UTCheckbox', 'icon', 'checked', 'margin']),
+      padding: getIn(theme, ['UTCheckbox', 'icon', 'checked', 'padding']),
+      borderRadius: getIn(theme, ['UTCheckbox', 'icon', 'checked', 'borderRadius']),
+      backgroundColor: getIn(theme, ['UTCheckbox', 'icon', 'checked', 'backgroundColor']),
+      fill: getIn(theme, ['UTCheckbox', 'icon', 'checked', 'fill']),
+      border: getIn(theme, ['UTCheckbox', 'icon', 'checked', 'border'])
+    },
+    uncheckedIcon: {
+      width: getIn(theme, ['UTCheckbox', 'icon', 'unchecked', 'width']),
+      height: getIn(theme, ['UTCheckbox', 'icon', 'unchecked', 'height']),
+      margin: getIn(theme, ['UTCheckbox', 'icon', 'unchecked', 'margin']),
+      padding: getIn(theme, ['UTCheckbox', 'icon', 'unchecked', 'padding']),
+      borderRadius: getIn(theme, ['UTCheckbox', 'icon', 'unchecked', 'borderRadius']),
+      backgroundColor: getIn(theme, ['UTCheckbox', 'icon', 'unchecked', 'backgroundColor']),
+      fill: getIn(theme, ['UTCheckbox', 'icon', 'unchecked', 'fill']),
+      border: getIn(theme, ['UTCheckbox', 'icon', 'unchecked', 'border'])
+    }
+  };
+};
+export const retrieveMuiTheme = theme => createTheme({
+  typography: {
+    fontFamily: getIn(theme, ['Fonts', 'fontFamily'])
+  },
+  overrides: {
+    MuiFormControlLabel: {
+      label: {
+        fontSize: getIn(theme, ['UTCheckbox', 'label', 'fontSize'], 14),
+        color: getIn(theme, ['UTCheckbox', 'label', 'color'], Colors.primary),
+        '& span': {
+          fontSize: getIn(theme, ['UTCheckbox', 'label', 'fontSize'], 14),
+          color: getIn(theme, ['UTCheckbox', 'label', 'color'], Colors.primary),
+          '& a': {
+            color: getIn(theme, ['UTCheckbox', 'linkLabel', 'color'], Colors.primary)
+          }
+        }
+      }
+    },
+    MuiFormHelperText: {
+      root: {
+        fontSize: getIn(theme, ['UTCheckbox', 'helperText', 'fontSize'], 14),
+        color: getIn(theme, ['UTCheckbox', 'helperText', 'color'], Colors.primary),
+        '&$error': {
+          color: theme.Palette.error['05']
+        }
+      }
+    },
+    MuiCheckbox: {
+      root: {
+        color: getIn(theme, ['UTCheckbox', 'checkbox', 'color'], Colors.gray)
+      },
+      colorPrimary: {
+        color: getIn(theme, ['UTCheckbox', 'checkbox', 'color'], Colors.gray),
+        '&$checked': {
+          color: getIn(theme, ['UTCheckbox', 'checkbox', 'checkedColor'], Colors.inputPrimary)
+        },
+        '&$disabled': {
+          color: getIn(theme, ['UTCheckbox', 'checkbox', 'disabledColor'], Colors.gray),
+          opacity: 0.5
+        },
+        '&$checked$disabled': {
+          color: getIn(theme, ['UTCheckbox', 'checkbox', 'checkedColor'], Colors.inputPrimary),
+          opacity: 0.5
+        }
+      }
+    }
+  }
+});

package/dist/esm/components/UTCheckbox/versions/V1/README.md

@@ -0,0 +1,41 @@
+# UTCheckbox
+
+## Description
+
+`UTCheckbox` is a customizable checkbox component. It supports various states such as checked, indeterminate, and disabled. Additionally, it includes the option to display a title and supports markdown for advanced formatting.
+
+## Props
+
+| Name               | Type             | Default   | Description                                                                           |
+| ------------------ | ---------------- | --------- | ------------------------------------------------------------------------------------- |
+| actions            | object           |           | Actions to render within `UTFieldLabel`.                                              |
+| checkboxDataTestId | string           |           | Box `data-testid`.                                                                    |
+| classNames         | objectOf(string) |           | Additional class names to apply for further styling.                                  |
+| CustomComponent    | elementType      |           | Custom component to render data next to the checkbox                                  |
+| dataTestId         | string           |           | Whole component `data-testid`.                                                        |
+| disabled           | bool             | false     | Disables the checkbox, making it unclickable.                                         |
+| indeterminate      | bool             | false     | Indicates if the checkbox is in an indeterminate state.                               |
+| isSimple           | bool             | false     | **Deprecated**: Please avoid using this property in future implementations.           |
+| onChange           | func             |           | Function to call when the checkbox state changes.                                     |
+| required           | bool             | false     | Indicates if the checkbox is required.                                                |
+| spacing            | string           | 'medium'  | Defines the spacing between the checkbox and the label. Can be 'small' or 'medium'.   |
+| title              | string           |           | Title to display next to the checkbox. Supports markdown when `withMarkdown` is true. |
+| value              | bool             | false     | Indicates if the checkbox is checked.                                                 |
+| variant            | string           | 'default' | Defines the visual variant of the checkbox.                                           |
+
+## Usage
+
+### Basic Example
+
+```jsx
+import React from 'react';
+import UTCheckbox from './UTCheckbox';
+
+const Example = () => {
+  const [checked, setChecked] = React.useState(false);
+
+  return <UTCheckbox value={checked} title="Check me" onChange={() => setChecked(!checked)} />;
+};
+
+export default Example;
+```

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

@@ -0,0 +1,7 @@
+export const CHECKED_ICON = 'IconCheck';
+export const INDETERMINATE_ICON = 'IconMinus';
+export const SPACING = {
+  SMALL: 'small',
+  MEDIUM: 'medium'
+};
+export const BUTTON_VARIANT = 'button';

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

@@ -0,0 +1,117 @@
+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, { Fragment, useMemo } from 'react';
+import { arrayOf, bool, elementType, func, objectOf, string } from 'prop-types';
+import { shouldShowErrors } from '@widergy/web-utils/lib/form';
+import { mergeClasses } from '../../../../utils/classesUtils';
+import UTFieldLabel from '../../../UTFieldLabel';
+import UTIcon from '../../../UTIcon';
+import WithTheme from '../../../WithTheme';
+import UTTouchableWithoutFeedback from '../../../UTTouchableWithoutFeedback';
+import { buttonTypes } from '../../../../types/buttonTypes';
+import { metaPropTypes } from '../../../../types/formTypes';
+import { formatErrorToValidation } from '../../../UTValidation/utils';
+import UTValidation from '../../../UTValidation';
+import { BUTTON_VARIANT, CHECKED_ICON, INDETERMINATE_ICON } from './constants';
+import { retrieveStyle } from './theme';
+import styles from './styles.module.scss';
+const UTCheckbox = _ref => {
+  let {
+    actions,
+    checkboxDataTestId,
+    classes: theme,
+    classNames,
+    CustomComponent,
+    dataTestId,
+    disabled,
+    indeterminate,
+    isSimple = false,
+    meta,
+    onChange = () => {},
+    required,
+    icon,
+    title,
+    value = false,
+    variant = 'default',
+    withUpperTitle
+  } = _ref;
+  const classes = useMemo(() => mergeClasses(theme, classNames), [classNames, theme]);
+  const iconName = useMemo(() => indeterminate ? INDETERMINATE_ICON : value === true ? CHECKED_ICON : '', [indeterminate, value]);
+  const handlePress = () => {
+    if (!disabled && onChange) onChange(!value);
+  };
+  const shouldHighlightLabel = value === true && variant === BUTTON_VARIANT;
+  const touchableProps = {
+    onMouseDown: handlePress,
+    disabled
+  };
+  const RootComponent = variant === BUTTON_VARIANT ? UTTouchableWithoutFeedback : 'div';
+  const BoxContainerComponent = variant === BUTTON_VARIANT ? 'div' : UTTouchableWithoutFeedback;
+  const rootComponentProps = variant === BUTTON_VARIANT ? touchableProps : {};
+  const boxContainerProps = variant === BUTTON_VARIANT ? {} : touchableProps;
+  const error = meta && shouldShowErrors(meta) && meta.error || '';
+  const validationData = formatErrorToValidation(error);
+  return /*#__PURE__*/React.createElement(Fragment, null, withUpperTitle && /*#__PURE__*/React.createElement(UTFieldLabel, {
+    actions: actions,
+    required: required
+  }, title), /*#__PURE__*/React.createElement(RootComponent, _extends({
+    className: classes.container
+  }, variant === BUTTON_VARIANT ? {
+    dataTestId
+  } : {
+    'data-testid': dataTestId
+  }, rootComponentProps), /*#__PURE__*/React.createElement("div", {
+    className: classes.content
+  }, /*#__PURE__*/React.createElement(BoxContainerComponent, _extends({
+    className: classes.boxContainer
+  }, variant === BUTTON_VARIANT ? {
+    'data-testid': checkboxDataTestId
+  } : {
+    dataTestId: checkboxDataTestId
+  }, boxContainerProps), isSimple ? /*#__PURE__*/React.createElement(UTIcon, {
+    name: "IconCheck",
+    shade: "04",
+    colorTheme: "accent",
+    className: value ? undefined : styles.hidden
+  }) : /*#__PURE__*/React.createElement("div", {
+    className: classes.box
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classes.iconContainer
+  }, /*#__PURE__*/React.createElement(UTIcon, {
+    colorTheme: "light",
+    name: iconName,
+    size: 16
+  })))), CustomComponent || /*#__PURE__*/React.createElement(UTFieldLabel, {
+    className: classes.title,
+    highlighted: shouldHighlightLabel,
+    icon: icon,
+    required: required
+  }, title)), error && /*#__PURE__*/React.createElement(UTValidation, {
+    className: classes.validation,
+    validationData: validationData
+  })));
+};
+UTCheckbox.propTypes = {
+  actions: arrayOf(buttonTypes),
+  checkboxDataTestId: string,
+  classes: objectOf(string),
+  classNames: objectOf(string),
+  CustomComponent: elementType,
+  dataTestId: string,
+  disabled: bool,
+  indeterminate: bool,
+  /**
+   * @deprecated The "isSimple" prop is deprecated and will be removed in a future release. Please do not use it.
+   */
+  isSimple: bool,
+  meta: metaPropTypes.isRequired,
+  onChange: func,
+  required: bool,
+  icon: string,
+  reversed: bool,
+  spacing: string,
+  title: string,
+  value: bool,
+  variant: string,
+  withUpperTitle: bool
+};
+export default WithTheme(retrieveStyle)(UTCheckbox);

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

@@ -0,0 +1,3 @@
+.hidden {
+  display: none;
+}

package/dist/esm/components/UTCheckbox/versions/V1/theme.js

@@ -0,0 +1,167 @@
+import { shouldShowErrors } from '@widergy/web-utils/lib/form';
+import { BUTTON_VARIANT, SPACING } from './constants';
+const MEDIUM_SPACING = 16;
+const SMALL_SPACING = 8;
+const baseCheckBoxTheme = theme => ({
+  container: {
+    alignItems: 'center !important',
+    display: 'flex',
+    flexWrap: 'wrap',
+    gap: '0px'
+  },
+  content: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  iconContainer: {
+    border: "2px solid ".concat(theme.Palette.gray['04']),
+    borderRadius: 5,
+    display: 'flex',
+    height: 20,
+    placeContent: 'center',
+    placeItems: 'center',
+    width: 20
+  },
+  box: {
+    borderRadius: 25,
+    overflow: 'hidden',
+    padding: 6
+  },
+  validation: {
+    flexBasis: '100%'
+  }
+});
+const conditionalStyles = _ref => {
+  var _theme$Palette$action, _theme$Palette$action2, _theme$Palette$action3, _theme$Palette$action4, _theme$Palette$action5;
+  let {
+    value,
+    indeterminate,
+    reversed,
+    spacing,
+    variant,
+    theme,
+    disabled,
+    error
+  } = _ref;
+  const spacingValue = spacing === SPACING.SMALL ? SMALL_SPACING : MEDIUM_SPACING;
+  return {
+    container: {
+      ...(reversed && {
+        flexDirection: 'row-reverse',
+        justifyContent: 'space-between'
+      }),
+      ...(disabled && {
+        opacity: 0.5
+      }),
+      ...(variant === BUTTON_VARIANT && {
+        borderRadius: '8px',
+        padding: spacing === 'small' ? '8px 12px' : '12px 16px',
+        backgroundColor: error ? theme.Palette.error['01'] : 'transparent',
+        '&:active, &:hover': {
+          transition: 'background-color 0.1s ease-in-out'
+        },
+        '&:active': {
+          backgroundColor: error ? theme.Palette.error['02'] : theme.Palette.light['04']
+        },
+        '&:hover': {
+          backgroundColor: error ? theme.Palette.error['02'] : theme.Palette.light['03']
+        }
+      })
+    },
+    content: {
+      ...(reversed && {
+        flexDirection: 'row-reverse',
+        justifyContent: 'space-between'
+      })
+    },
+    iconContainer: {
+      ...(error && {
+        borderColor: theme.Palette.error['04']
+      }),
+      ...((value === true || indeterminate) && {
+        backgroundColor: ((_theme$Palette$action = theme.Palette.actions) === null || _theme$Palette$action === void 0 ? void 0 : _theme$Palette$action.accent['04']) || theme.Palette.accent['04'],
+        borderColor: ((_theme$Palette$action2 = theme.Palette.actions) === null || _theme$Palette$action2 === void 0 ? void 0 : _theme$Palette$action2.accent['04']) || theme.Palette.accent['04']
+      })
+    },
+    boxContainer: {
+      ...(reversed ? {
+        marginLeft: spacingValue,
+        marginRight: 0
+      } : {
+        marginRight: spacingValue
+      }),
+      ...(variant !== BUTTON_VARIANT && {
+        '&:active, &:hover': {
+          '& $box': {
+            borderColor: error ? theme.Palette.error['03'] : ((_theme$Palette$action3 = theme.Palette.actions) === null || _theme$Palette$action3 === void 0 ? void 0 : _theme$Palette$action3.accent['03']) || theme.Palette.accent['03'],
+            borderWidth: 1,
+            overflow: 'hidden',
+            transition: 'background-color 0.1s ease-in-out'
+          }
+        },
+        '&:active': {
+          '& $box': {
+            backgroundColor: error ? theme.Palette.error['02'] : ((_theme$Palette$action4 = theme.Palette.actions) === null || _theme$Palette$action4 === void 0 ? void 0 : _theme$Palette$action4.accent['02']) || theme.Palette.accent['02']
+          }
+        },
+        '&:hover': {
+          '& $box': {
+            backgroundColor: error ? theme.Palette.error['01'] : ((_theme$Palette$action5 = theme.Palette.actions) === null || _theme$Palette$action5 === void 0 ? void 0 : _theme$Palette$action5.accent['01']) || theme.Palette.accent['01']
+          }
+        }
+      })
+    },
+    title: variant === BUTTON_VARIANT && {
+      userSelect: 'none'
+    }
+  };
+};
+export const retrieveStyle = _ref2 => {
+  let {
+    value,
+    disabled,
+    indeterminate,
+    reversed,
+    spacing,
+    theme,
+    variant,
+    meta
+  } = _ref2;
+  const baseThemeStyles = baseCheckBoxTheme(theme);
+  const error = meta && shouldShowErrors(meta);
+  const {
+    container,
+    content,
+    iconContainer,
+    boxContainer,
+    title
+  } = conditionalStyles({
+    value,
+    disabled,
+    indeterminate,
+    reversed,
+    spacing,
+    variant,
+    theme,
+    error
+  });
+  return {
+    box: baseThemeStyles.box,
+    content: {
+      ...baseThemeStyles.content,
+      ...content
+    },
+    container: {
+      ...baseThemeStyles.container,
+      ...container
+    },
+    iconContainer: {
+      ...baseThemeStyles.iconContainer,
+      ...iconContainer
+    },
+    boxContainer,
+    title,
+    validation: baseThemeStyles.validation
+  };
+};