@widergy/energy-ui 3.158.1 → 3.159.0

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

@@ -0,0 +1,213 @@
+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, { useEffect, useRef, useState, useMemo } from 'react';
+import { object, arrayOf, bool, func, number, objectOf, shape, string } from 'prop-types';
+import WithTheme from '../WithTheme';
+import UTMenu from '../UTMenu';
+import UTButton from '../UTButton';
+import UTLabel from '../UTLabel';
+import UTTooltip from '../UTTooltip';
+import { mergeClasses } from '../../utils/classesUtils';
+import { TEST_IDS } from '../../constants/testIds';
+import { COLOR_THEMES, COLOR_THEMES_MAPPER, COMPONENTS_THEME_PROPS, DEFAULT_ELIPSIS, DEFAULT_SEPARATOR, DEFAULT_ELIPSIS_WIDTH_ESTIMATE } from './constants';
+import { retrieveStyle } from './theme';
+import styles from './styles.module.scss';
+const {
+  breadcrumbs: breadcrumbsIds
+} = TEST_IDS;
+const UTBreadcrumbs = _ref => {
+  let {
+    breadcrumbs,
+    classes: themeClasses,
+    classNames,
+    colorTheme = COLOR_THEMES.DARK,
+    disableMenu = false,
+    elipsis = DEFAULT_ELIPSIS,
+    elipsisWidthEstimate = DEFAULT_ELIPSIS_WIDTH_ESTIMATE,
+    firstItemOverflow = false,
+    menuProps = {},
+    onRedirect,
+    onSetAction,
+    separator = DEFAULT_SEPARATOR
+  } = _ref;
+  const classes = useMemo(() => mergeClasses(themeClasses, classNames), [classNames]);
+  const containerRef = useRef();
+  const [content, setContent] = useState(breadcrumbs);
+  const [menu, setMenu] = useState({
+    anchor: null,
+    items: []
+  });
+  const getSectionsTotalWidth = ref => [...ref.current.children].reduce((total, currentChildren) => total + currentChildren.offsetWidth, 0);
+  const getItemsBeforeCollapse = ref => {
+    const sections = [...ref.current.children];
+    const {
+      offsetWidth: containerWidth
+    } = ref.current;
+    let itemsBeforeCollapse = 1;
+    let accumulatedWidth = 0;
+    const firstItemWidth = sections[0].offsetWidth;
+    const lastItemWidth = sections[sections.length - 2].offsetWidth;
+    const availableWidth = containerWidth - firstItemWidth - lastItemWidth - elipsisWidthEstimate;
+    sections.slice(1).forEach(section => {
+      accumulatedWidth += section.offsetWidth;
+      if (accumulatedWidth <= availableWidth) itemsBeforeCollapse += 1;
+    });
+    return itemsBeforeCollapse;
+  };
+  const truncate = () => {
+    if (!containerRef.current) return;
+    const {
+      offsetWidth: containerWidth
+    } = containerRef.current;
+    const childrenTotalWidth = getSectionsTotalWidth(containerRef);
+    if (childrenTotalWidth > containerWidth) {
+      setContent(prevContent => {
+        const isCollapsed = prevContent.some(_ref2 => {
+          let {
+            label
+          } = _ref2;
+          return label === elipsis;
+        });
+        if (isCollapsed) return prevContent;
+        if (prevContent.length <= 2) return prevContent;
+        const itemsBeforeCollapse = getItemsBeforeCollapse(containerRef);
+        return [...prevContent.slice(0, itemsBeforeCollapse), {
+          label: elipsis,
+          menuItems: prevContent.slice(itemsBeforeCollapse, prevContent.length - 1)
+        }, prevContent[prevContent.length - 1]];
+      });
+    }
+  };
+  useEffect(() => {
+    setContent(breadcrumbs);
+  }, [breadcrumbs]);
+  useEffect(() => {
+    if (containerRef.current) window.requestAnimationFrame(() => truncate());
+  }, [content]);
+  useEffect(() => {
+    window.addEventListener('resize', truncate);
+    return () => window.removeEventListener('resize', truncate);
+  }, []);
+  const handleCloseMenu = () => setMenu({
+    anchor: null,
+    items: []
+  });
+  const handleClickOptions = (options, route, id) => {
+    const indexOfCurrentBreadcrumb = breadcrumbs.findIndex(breadcrumb => breadcrumb.id === id);
+    if (indexOfCurrentBreadcrumb !== breadcrumbs.length - 1) {
+      if (options.setAction) {
+        onSetAction(options.setAction, options.params);
+      }
+      if (options.updatedBreadcrumbs) {
+        options.updatedBreadcrumbs(breadcrumbs.slice(0, indexOfCurrentBreadcrumb + 1));
+      }
+      onRedirect(route);
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.breadcrumbs,
+    ref: containerRef
+  }, content.map((_ref3, index) => {
+    let {
+      buttonColorTheme,
+      dataTestId,
+      itemClassName,
+      label,
+      menuItems,
+      route,
+      options = {},
+      id = crypto.randomUUID(),
+      showTooltip = false,
+      tooltipLabel = label
+    } = _ref3;
+    const handleClick = event => {
+      if (menuItems) setMenu({
+        anchor: event.currentTarget,
+        items: menuItems.map(_ref4 => {
+          let {
+            label: menuItemLabel,
+            route: menuItemRoute,
+            options: menuItemOptions,
+            id: menuItemId
+          } = _ref4;
+          return {
+            label: menuItemLabel,
+            onClick: () => {
+              setContent(breadcrumbs);
+              handleCloseMenu();
+              handleClickOptions(menuItemOptions, menuItemRoute, menuItemId);
+            }
+          };
+        })
+      });else handleClickOptions(options, route, id);
+    };
+    const isLast = index === content.length - 1;
+    const overflowControl = index === 0 && firstItemOverflow;
+    const colorThemesDefinition = buttonColorTheme ? COMPONENTS_THEME_PROPS[COLOR_THEMES_MAPPER[buttonColorTheme]] : COMPONENTS_THEME_PROPS[colorTheme];
+    return /*#__PURE__*/React.createElement("div", {
+      className: "".concat(styles.section, " ").concat(overflowControl && styles.firstItem),
+      key: "".concat(route, "-").concat(label)
+    }, !route && !menuItems || disableMenu ? /*#__PURE__*/React.createElement(UTLabel, _extends({
+      className: styles.label,
+      dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(index) : "".concat(breadcrumbsIds.item, ".").concat(index),
+      variant: "small",
+      weight: "medium"
+    }, colorThemesDefinition.label), label) : showTooltip ? /*#__PURE__*/React.createElement(UTTooltip, {
+      content: tooltipLabel,
+      interactive: false,
+      tippyProps: {
+        appendTo: () => document.body,
+        trigger: 'mouseenter',
+        hideOnClick: false
+      }
+    }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(UTButton, _extends({
+      classNames: {
+        root: itemClassName,
+        childrenContainer: overflowControl ? styles.buttonContainer : null,
+        text: overflowControl ? styles.ellipsis : isLast && content.length > 1 ? styles.lastBreadcrumb : null
+      },
+      dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(index) : "".concat(breadcrumbsIds.item, ".").concat(index),
+      onClick: handleClick,
+      size: "small",
+      variant: "text"
+    }, colorThemesDefinition.button), "".concat(label)))) : /*#__PURE__*/React.createElement(UTButton, _extends({
+      classNames: {
+        root: itemClassName,
+        childrenContainer: overflowControl ? styles.buttonContainer : null,
+        text: overflowControl ? styles.ellipsis : isLast && content.length > 1 ? styles.lastBreadcrumb : null
+      },
+      dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(index) : "".concat(breadcrumbsIds.item, ".").concat(index),
+      onClick: handleClick,
+      size: "small",
+      variant: "text"
+    }, colorThemesDefinition.button), "".concat(label)), !isLast && /*#__PURE__*/React.createElement(UTLabel, _extends({
+      className: classes.separator,
+      variant: "small",
+      weight: "medium"
+    }, colorThemesDefinition.label), separator));
+  }), !disableMenu && /*#__PURE__*/React.createElement(UTMenu, _extends({
+    anchor: menu.anchor,
+    items: menu.items
+  }, menuProps, {
+    onClose: handleCloseMenu
+  })));
+};
+UTBreadcrumbs.propTypes = {
+  breadcrumbs: arrayOf(shape({
+    label: string,
+    route: string,
+    showTooltip: bool,
+    tooltipLabel: string
+  })),
+  classes: objectOf(string),
+  classNames: objectOf(string),
+  colorTheme: string,
+  disableMenu: bool,
+  elipsis: string,
+  elipsisWidthEstimate: number,
+  firstItemOverflow: bool,
+  onRedirect: func,
+  onSetAction: func,
+  menuProps: object,
+  separator: string
+};
+export default WithTheme(retrieveStyle)(UTBreadcrumbs);

package/dist/esm/components/UTBreadcrumbs/styles.module.scss

@@ -0,0 +1,37 @@
+.breadcrumbs {
+  align-items: center;
+  display: flex;
+  overflow: hidden;
+  white-space: nowrap;
+  width: 100%;
+}
+
+.section {
+  align-items: center;
+  display: flex;
+}
+
+.noPointer {
+  pointer-events: none;
+}
+
+.firstItem {
+  overflow: hidden;
+}
+
+.buttonContainer {
+  max-width: 100%;
+}
+
+.ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.label {
+  padding: 4px 8px;
+}
+
+.lastBreadcrumb {
+  color: var(--gray04);
+}

package/dist/esm/components/UTBreadcrumbs/theme.js

@@ -0,0 +1,12 @@
+import { withImportant } from '../../utils/classesUtils';
+export const retrieveStyle = _ref => {
+  var _theme$UTBreadcrumbs;
+  let {
+    theme
+  } = _ref;
+  return {
+    separator: {
+      margin: withImportant((theme === null || theme === void 0 || (_theme$UTBreadcrumbs = theme.UTBreadcrumbs) === null || _theme$UTBreadcrumbs === void 0 || (_theme$UTBreadcrumbs = _theme$UTBreadcrumbs.separator) === null || _theme$UTBreadcrumbs === void 0 ? void 0 : _theme$UTBreadcrumbs.margin) || '0 12px')
+    }
+  };
+};

package/dist/esm/components/UTButton/README.md

@@ -0,0 +1,42 @@
+# UTButton
+
+### Description
+
+Basic button component.
+
+### Variants
+
+These variants were defined by the UX team and are:
+
+- `filled`
+- `outlined`
+- `text`
+- `semitransparent`
+
+All these variants are defined in the component theme.
+
+### Color Themes
+
+The color themes are defined by the component consumer and will vary accordingly.They define a set of variables (colors and opacities) that then combined with the variant will change how the buttons looks.
+The components supports an infinite amount of color themes but requieres the consumer to pass at least a `primary` one that works as a default.
+
+### Icon
+
+The button can include an icon, which can be either from the Tabler Icons library or a custom SVG rendered as a React component. If using an icon from the Tabler Icons library, you should provide the name of the icon. Alternatively, a custom SVG can be passed directly to the component.
+
+### Props
+
+| Name                 | Type                                                  | Default   | Description                                                                    |
+| -------------------- | ----------------------------------------------------- | --------- | ------------------------------------------------------------------------------ |
+| variant              | 'filled' \| 'outlined' \| 'text' \| 'semitransparent' | 'filled'  | The variant to use.                                                            |
+| colorTheme           | string                                                | 'primary' | The color theme to use.                                                        |
+| size                 | 'small' \| 'medium' \| 'large'                        | 'medium'  | The size of the component.                                                     |
+| onClick              | func                                                  |           | Callback fired when the user clicks the component.                             |
+| loading              | bool                                                  | false     | If `true` a spinner is shown over the component.                               |
+| disabled             | bool                                                  | false     | If `true` the button is unclickable.                                           |
+| Icon                 | node \| string                                        |           | An Icon component that can be displayed within the button.                     |
+| iconPlacement        | 'left' \| 'right'                                     | 'left'    | Indicates where the icon is placed in relation with the contents of the button |
+| showTextOnResponsive | bool                                                  | false     | If `true` and Icon is not `null` the contents of the button are not displayed. |
+| type                 | 'string'                                              |           | HTML type attribute.                                                           |
+| classNames           | object                                                |           | Overrides the default button theme.                                            |
+| children             | node                                                  |           | The component contents.                                                        |

package/dist/esm/components/UTButton/constants.js

@@ -0,0 +1,42 @@
+import { COLOR_THEMES } from '../../constants/Palette';
+export const VARIANTS_NAMES = {
+  filled: 'filled',
+  outlined: 'outlined',
+  semitransparent: 'semitransparent',
+  shadow: 'shadow',
+  text: 'text'
+};
+export const SIZES = {
+  small: 'small',
+  medium: 'medium',
+  large: 'large'
+};
+export const ICON_PLACEMENTS = {
+  left: 'left',
+  right: 'right'
+};
+export const DEFAULT_PROPS = {
+  colorTheme: 'secondary',
+  disabled: false,
+  hideTextOnResponsive: false,
+  iconPlacement: ICON_PLACEMENTS.left,
+  loading: false,
+  size: SIZES.medium,
+  variant: 'filled'
+};
+export const COLORS_MAPPER = {
+  error: COLOR_THEMES.error,
+  gray: COLOR_THEMES.gray,
+  negative: COLOR_THEMES.negative,
+  primary: COLOR_THEMES.accent,
+  secondary: COLOR_THEMES.neutral,
+  success: COLOR_THEMES.success,
+  light: COLOR_THEMES.light
+};
+export const SHADOW_MAPPER = {
+  [COLORS_MAPPER.error]: 'semanticError',
+  [COLORS_MAPPER.negative]: 'actionNeutral',
+  [COLORS_MAPPER.primary]: 'actionAccent',
+  [COLORS_MAPPER.secondary]: 'grayscale',
+  [COLORS_MAPPER.gray]: 'grayscale'
+};

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

@@ -0,0 +1,92 @@
+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 { bool, func, elementType, objectOf, string, number } from 'prop-types';
+import Button from '@material-ui/core/Button';
+import CircularProgress from '@material-ui/core/CircularProgress';
+import { capitalize } from '../../utils/componentUtils';
+import { mergeClasses } from '../../utils/classesUtils';
+import UTBadge from '../UTBadge';
+import UTLabel from '../UTLabel';
+import WithTheme from '../WithTheme';
+import { getCounterColorTheme, getIconProps, getLabelProps } from './utils';
+import { ICON_PLACEMENTS, DEFAULT_PROPS } from './constants';
+import { retrieveStyle } from './theme';
+import styles from './styles.module.scss';
+const UTButton = _ref => {
+  let {
+    children,
+    classes: theme,
+    classNames,
+    colorTheme,
+    count,
+    dataTestId,
+    disabled,
+    hideTextOnResponsive,
+    Icon,
+    iconPlacement,
+    loading,
+    onClick,
+    size,
+    type,
+    variant
+  } = _ref;
+  const classes = useMemo(() => mergeClasses(theme, classNames), [classNames, theme]);
+  const {
+    childrenContainer,
+    circularProgress,
+    icon,
+    text: textClassName,
+    ...materialButtonClasses
+  } = classes;
+  const {
+    IconComponent,
+    ...iconProps
+  } = useMemo(() => getIconProps({
+    className: icon,
+    colorTheme,
+    hasContent: !!children,
+    hideTextOnResponsive,
+    Icon,
+    size,
+    variant
+  }), [colorTheme, children, hideTextOnResponsive, icon, Icon, size, variant]);
+  const IconToShow = IconComponent && /*#__PURE__*/React.createElement(IconComponent, iconProps);
+  const counterColorTheme = getCounterColorTheme(colorTheme, variant);
+  const labelProps = getLabelProps(colorTheme, variant, size);
+  const RenderedChildren = /*#__PURE__*/React.createElement("div", {
+    className: "".concat(childrenContainer, " ").concat(styles["".concat(size, "ChildrenContainer")])
+  }, count && /*#__PURE__*/React.createElement(UTBadge, {
+    colorTheme: counterColorTheme
+  }, count), iconPlacement === ICON_PLACEMENTS.left && IconToShow, children !== null && children !== undefined && children !== false && /*#__PURE__*/React.createElement(UTLabel, _extends({}, labelProps, {
+    className: "".concat(styles.textContainer, " ").concat(textClassName)
+  }), children), iconPlacement !== ICON_PLACEMENTS.left && IconToShow);
+  return /*#__PURE__*/React.createElement(Button, {
+    classes: materialButtonClasses,
+    className: "\n        ".concat(styles["padding".concat(capitalize(size))], "\n        ").concat(hideTextOnResponsive && styles.hideTextOnResponsive, "\n        ").concat(!hideTextOnResponsive && !children && styles.noChildren, "\n      "),
+    "data-testid": dataTestId,
+    disabled: disabled || loading,
+    onClick: onClick,
+    type: type
+  }, RenderedChildren, loading && /*#__PURE__*/React.createElement(CircularProgress, {
+    size: 24,
+    className: "".concat(styles.loading, " ").concat(circularProgress)
+  }));
+};
+UTButton.defaultProps = DEFAULT_PROPS;
+UTButton.propTypes = {
+  classes: objectOf(string),
+  classNames: objectOf(string),
+  colorTheme: string,
+  count: number,
+  dataTestId: string,
+  disabled: bool,
+  hideTextOnResponsive: bool,
+  Icon: elementType,
+  iconPlacement: string,
+  loading: bool,
+  onClick: func,
+  size: string,
+  type: string,
+  variant: string
+};
+export default WithTheme(retrieveStyle)(UTButton);

package/dist/esm/components/UTButton/stories/UTButton.mdx

@@ -0,0 +1,13 @@
+import { ArgTypes, Canvas, Description, Meta, Title } from '@storybook/blocks';
+
+import * as UTButtonStories from './UTButton.stories.js';
+
+<Meta of={UTButtonStories} />
+
+<Title>UTButton</Title>
+
+<Description of={UTButtonStories} />
+
+<Canvas of={UTButtonStories.Playground} withToolbar />
+
+<ArgTypes exclude={['classes']} />

package/dist/esm/components/UTButton/stories/UTButton.stories.js

@@ -0,0 +1,31 @@
+import UTButton from '..';
+import { COMMON_ARG_TYPES, COMMON_ARGS, COMMON_PARAMETERS } from './storiesConstants';
+export default {
+  title: 'Energy-UI/UTButton',
+  component: UTButton,
+  args: {
+    children: undefined,
+    classNames: undefined,
+    count: undefined,
+    Icon: undefined,
+    onClick: undefined,
+    ...COMMON_ARGS
+  },
+  argTypes: {
+    ...COMMON_ARG_TYPES
+  },
+  parameters: {
+    ...COMMON_PARAMETERS,
+    options: {
+      storySort: {
+        method: 'alphabetical'
+      }
+    }
+  }
+};
+export const Playground = {
+  args: {
+    children: 'Button'
+  },
+  name: 'Playground'
+};

package/dist/esm/components/UTButton/stories/UTButtonAdornments.stories.js

@@ -0,0 +1,45 @@
+import UTButton from '..';
+import { COMMON_ARG_TYPES, COMMON_ARGS, COMMON_PARAMETERS } from './storiesConstants';
+export default {
+  title: 'Energy-UI/UTButton/Adornments',
+  component: UTButton,
+  args: {
+    ...COMMON_ARGS
+  },
+  argTypes: {
+    ...COMMON_ARG_TYPES
+  },
+  parameters: {
+    ...COMMON_PARAMETERS
+  }
+};
+export const IconPlacementLeft = {
+  args: {
+    children: 'Icon Placement Left',
+    Icon: 'IconArrowLeft',
+    iconPlacement: 'left'
+  }
+};
+export const IconPlacementRight = {
+  args: {
+    children: 'Icon Placement Right',
+    Icon: 'IconArrowRight',
+    iconPlacement: 'right'
+  }
+};
+export const IconOnly = {
+  args: {
+    Icon: 'IconSearch'
+  }
+};
+export const CountAndIcon = {
+  args: {
+    count: 7,
+    Icon: 'IconBell'
+  }
+};
+export const CountOnly = {
+  args: {
+    count: 5
+  }
+};

package/dist/esm/components/UTButton/stories/UTButtonColorThemes.stories.js

@@ -0,0 +1,45 @@
+import UTButton from '..';
+import { COMMON_ARG_TYPES, COMMON_ARGS, COMMON_PARAMETERS } from './storiesConstants';
+export default {
+  title: 'Energy-UI/UTButton/Color Themes',
+  component: UTButton,
+  args: {
+    ...COMMON_ARGS
+  },
+  argTypes: {
+    ...COMMON_ARG_TYPES
+  },
+  parameters: {
+    ...COMMON_PARAMETERS
+  }
+};
+export const Error = {
+  args: {
+    children: 'Error Color Theme',
+    colorTheme: 'error'
+  }
+};
+export const Gray = {
+  args: {
+    children: 'Gray Color Theme',
+    colorTheme: 'gray'
+  }
+};
+export const Negative = {
+  args: {
+    children: 'Negative Color Theme',
+    colorTheme: 'negative'
+  }
+};
+export const Secondary = {
+  args: {
+    children: 'Secondary Color Theme',
+    colorTheme: 'secondary'
+  }
+};
+export const Success = {
+  args: {
+    children: 'Success Color Theme',
+    colorTheme: 'success'
+  }
+};

package/dist/esm/components/UTButton/stories/UTButtonSizes.stories.js

@@ -0,0 +1,33 @@
+import UTButton from '..';
+import { COMMON_ARG_TYPES, COMMON_ARGS, COMMON_PARAMETERS } from './storiesConstants';
+export default {
+  title: 'Energy-UI/UTButton/Sizes',
+  component: UTButton,
+  args: {
+    ...COMMON_ARGS
+  },
+  argTypes: {
+    ...COMMON_ARG_TYPES
+  },
+  parameters: {
+    ...COMMON_PARAMETERS
+  }
+};
+export const Small = {
+  args: {
+    children: 'Small Size',
+    size: 'small'
+  }
+};
+export const Medium = {
+  args: {
+    children: 'Medium Size',
+    size: 'medium'
+  }
+};
+export const Large = {
+  args: {
+    children: 'Large Size',
+    size: 'large'
+  }
+};

package/dist/esm/components/UTButton/stories/UTButtonStates.stories.js

@@ -0,0 +1,27 @@
+import UTButton from '..';
+import { COMMON_ARG_TYPES, COMMON_ARGS, COMMON_PARAMETERS } from './storiesConstants';
+export default {
+  title: 'Energy-UI/UTButton/States',
+  component: UTButton,
+  args: {
+    ...COMMON_ARGS
+  },
+  argTypes: {
+    ...COMMON_ARG_TYPES
+  },
+  parameters: {
+    ...COMMON_PARAMETERS
+  }
+};
+export const Disabled = {
+  args: {
+    children: 'Disabled',
+    disabled: true
+  }
+};
+export const Loading = {
+  args: {
+    children: 'Loading',
+    loading: true
+  }
+};