@widergy/energy-ui 3.172.2 → 3.172.3

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

@@ -1,142 +1 @@
-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, { useCallback, useMemo } from 'react';
-import { bool, string, objectOf, elementType, object, oneOfType, element, arrayOf } from 'prop-types';
-import isEmpty from 'lodash/isEmpty';
-import UTLabel from '../UTLabel';
-import WithTheme from '../WithTheme';
-import Skeleton from '../UTSkeleton';
-import UTTooltip from '../UTTooltip';
-import { defaultIconMapper, getColorTheme, getLabelVariant, retrieveStyle, validateProps } from './theme';
-import { AREA_TYPES, COMPONENTS_MAPPER, DEFAULT_PROPS, TYPES } from './constants';
-import { getAdornmentsThemeProps, getIconProps, validateAdornments } from './utils';
-import styles from './styles.module.scss';
-const UTStatus = _ref => {
-  let {
-    adornments = [],
-    area = true,
-    areaType = DEFAULT_PROPS.areaType,
-    children,
-    classes,
-    className,
-    Icon,
-    labelDataTestId,
-    size = DEFAULT_PROPS.size,
-    title,
-    tooltip,
-    tooltipProps = {},
-    truncate,
-    type = DEFAULT_PROPS.type,
-    variant = DEFAULT_PROPS.variant,
-    weight = DEFAULT_PROPS.weight,
-    withoutIcon
-  } = _ref;
-  const StatusIcon = Icon !== null && Icon !== void 0 ? Icon : defaultIconMapper(variant);
-  const {
-    leftAdornments,
-    rightAdornments
-  } = useMemo(() => {
-    const left = [];
-    const right = [];
-    if (!validateAdornments(adornments)) return {
-      leftAdornments: left,
-      rightAdornments: right
-    };
-    adornments.forEach((item, index) => {
-      if (item.left || item.right) {
-        if (item.left) left.push({
-          ...item.left,
-          key: item.left.key || "".concat(item.left.name, "-left-").concat(index)
-        });
-        if (item.right) right.push({
-          ...item.right,
-          key: item.right.key || "".concat(item.right.name, "-right-").concat(index)
-        });
-      } else {
-        left.push({
-          ...item,
-          key: item.key || "".concat(item.name, "-").concat(index)
-        });
-      }
-    });
-    return {
-      leftAdornments: left,
-      rightAdornments: right
-    };
-  }, [adornments]);
-  const useValidAdornments = leftAdornments.length > 0 || rightAdornments.length > 0;
-  const {
-    IconComponent,
-    ...iconProps
-  } = useMemo(() => getIconProps(validateProps({
-    className: classes.icon,
-    Icon: StatusIcon,
-    type,
-    variant,
-    size
-  })), [StatusIcon, type, variant, size, classes.icon]);
-  const showTooltip = !isEmpty(tooltip);
-  const colorTheme = getColorTheme(validateProps({
-    type,
-    variant
-  }));
-  const renderAdornment = useCallback(adornment => {
-    const Component = COMPONENTS_MAPPER[adornment.name];
-    const themeProps = getAdornmentsThemeProps({
-      area,
-      classes,
-      size,
-      adornmentName: adornment.name
-    });
-    const adornmentProps = {
-      variant,
-      ...((adornment === null || adornment === void 0 ? void 0 : adornment.props) || {}),
-      ...themeProps
-    };
-    return Component ? /*#__PURE__*/React.createElement(Component, _extends({}, adornmentProps, {
-      key: (adornment === null || adornment === void 0 ? void 0 : adornment.key) || adornment.name
-    })) : null;
-  }, [adornments, size, variant]);
-  const StatusRender = /*#__PURE__*/React.createElement("div", {
-    className: "".concat(classes.root, " ").concat(truncate ? styles.truncated : '', " ").concat(className || '', " ").concat(area ? '' : classes.withoutArea, " ").concat(areaType === AREA_TYPES.SQUARE ? '' : classes.roundedArea),
-    title: title
-  }, useValidAdornments && leftAdornments.map(renderAdornment), withoutIcon || useValidAdornments ? null : /*#__PURE__*/React.createElement(IconComponent, iconProps), /*#__PURE__*/React.createElement(UTLabel, {
-    className: "".concat(classes.label, " ").concat(truncate ? styles.truncatedLabel : ''),
-    colorTheme: colorTheme,
-    shade: type !== TYPES.negative ? '05' : undefined,
-    dataTestId: labelDataTestId,
-    variant: getLabelVariant({
-      size
-    }),
-    weight: weight
-  }, children), useValidAdornments && rightAdornments.map(renderAdornment));
-  return /*#__PURE__*/React.createElement(Skeleton, null, showTooltip ? /*#__PURE__*/React.createElement(UTTooltip, {
-    content: tooltip,
-    tippyProps: {
-      appendTo: () => document.body,
-      interactive: false,
-      arrow: false,
-      ...tooltipProps
-    }
-  }, StatusRender) : StatusRender);
-};
-UTStatus.defaultProps = DEFAULT_PROPS;
-UTStatus.propTypes = {
-  adornments: arrayOf(object),
-  area: bool,
-  areaType: string,
-  classes: objectOf(string),
-  className: string,
-  Icon: elementType,
-  iconProps: object,
-  labelDataTestId: string,
-  size: string,
-  title: string,
-  tooltip: oneOfType([string, element]),
-  tooltipProps: object,
-  truncate: bool,
-  type: string,
-  variant: string,
-  weight: string,
-  withoutIcon: bool
-};
-export default WithTheme(retrieveStyle)(UTStatus);
+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,{useCallback,useMemo}from"react";import{bool,string,objectOf,elementType,object,oneOfType,element,arrayOf}from"prop-types";import isEmpty from"lodash/isEmpty";import UTLabel from"../UTLabel";import WithTheme from"../WithTheme";import Skeleton from"../UTSkeleton";import UTTooltip from"../UTTooltip";import{defaultIconMapper,getColorTheme,getLabelVariant,retrieveStyle,validateProps}from"./theme";import{AREA_TYPES,COMPONENTS_MAPPER,DEFAULT_PROPS,TYPES}from"./constants";import{getAdornmentsThemeProps,getIconProps,validateAdornments}from"./utils";import styles from"./styles.module.scss";const UTStatus=_ref=>{let{adornments:adornments=[],area:area=!0,areaType:areaType=DEFAULT_PROPS.areaType,children:children,classes:classes,className:className,Icon:Icon,labelDataTestId:labelDataTestId,size:size=DEFAULT_PROPS.size,title:title,tooltip:tooltip,tooltipProps:tooltipProps={},truncate:truncate,type:type=DEFAULT_PROPS.type,variant:variant=DEFAULT_PROPS.variant,weight:weight=DEFAULT_PROPS.weight,withoutIcon:withoutIcon}=_ref;const StatusIcon=null!=Icon?Icon:defaultIconMapper(variant),{leftAdornments:leftAdornments,rightAdornments:rightAdornments}=useMemo(()=>{const left=[],right=[];return validateAdornments(adornments)?(adornments.forEach((item,index)=>{item.left||item.right?(item.left&&left.push({...item.left,key:item.left.key||"".concat(item.left.name,"-left-").concat(index)}),item.right&&right.push({...item.right,key:item.right.key||"".concat(item.right.name,"-right-").concat(index)})):left.push({...item,key:item.key||"".concat(item.name,"-").concat(index)})}),{leftAdornments:left,rightAdornments:right}):{leftAdornments:left,rightAdornments:right}},[adornments]),useValidAdornments=leftAdornments.length>0||rightAdornments.length>0,{IconComponent:IconComponent,...iconProps}=useMemo(()=>getIconProps(validateProps({className:classes.icon,Icon:StatusIcon,type:type,variant:variant,size:size})),[StatusIcon,type,variant,size,classes.icon]),showTooltip=!isEmpty(tooltip),colorTheme=getColorTheme(validateProps({type:type,variant:variant})),renderAdornment=useCallback(adornment=>{const Component=COMPONENTS_MAPPER[adornment.name],themeProps=getAdornmentsThemeProps({area:area,classes:classes,size:size,adornmentName:adornment.name}),adornmentProps={variant:variant,...(null==adornment?void 0:adornment.props)||{},...themeProps};return Component?React.createElement(Component,_extends({},adornmentProps,{key:(null==adornment?void 0:adornment.key)||adornment.name})):null},[adornments,size,variant]),StatusRender=React.createElement("div",{className:"".concat(classes.root," ").concat(truncate?styles.truncated:""," ").concat(className||""," ").concat(area?"":classes.withoutArea," ").concat(areaType===AREA_TYPES.SQUARE?"":classes.roundedArea),title:title},useValidAdornments&&leftAdornments.map(renderAdornment),withoutIcon||useValidAdornments?null:React.createElement(IconComponent,iconProps),React.createElement(UTLabel,{className:"".concat(classes.label," ").concat(truncate?styles.truncatedLabel:""),colorTheme:colorTheme,shade:type!==TYPES.negative?"05":void 0,dataTestId:labelDataTestId,variant:getLabelVariant({size:size}),weight:weight},children),useValidAdornments&&rightAdornments.map(renderAdornment));return React.createElement(Skeleton,null,showTooltip?React.createElement(UTTooltip,{content:tooltip,tippyProps:{appendTo:()=>document.body,interactive:!1,arrow:!1,...tooltipProps}},StatusRender):StatusRender)};UTStatus.defaultProps=DEFAULT_PROPS,UTStatus.propTypes={adornments:arrayOf(object),area:bool,areaType:string,classes:objectOf(string),className:string,Icon:elementType,iconProps:object,labelDataTestId:string,size:string,title:string,tooltip:oneOfType([string,element]),tooltipProps:object,truncate:bool,type:string,variant:string,weight:string,withoutIcon:bool};export default WithTheme(retrieveStyle)(UTStatus);

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

@@ -1,216 +1 @@
-import { COLOR_THEMES } from '../../constants/Palette';
-import { DEFAULT_PROPS, SIZES, TYPES, VARIANTS } from './constants';
-const getBackgroundColor = _ref => {
-  let {
-    theme,
-    type,
-    variant
-  } = _ref;
-  return variant !== VARIANTS.unassigned ? theme.Palette[variant][type === TYPES.negative ? '04' : '01'] : type === TYPES.negative ? theme.Palette.gray['04'] : theme.Palette.light['04'];
-};
-const getIconFill = _ref2 => {
-  let {
-    theme,
-    type,
-    variant
-  } = _ref2;
-  return {
-    [TYPES.default]: theme.Palette.dark['05'],
-    [TYPES.light]: theme.Palette[variant !== VARIANTS.unassigned ? variant : 'gray']['05'],
-    [TYPES.negative]: theme.Palette.light['01']
-  }[type];
-};
-const getGridGap = _ref3 => {
-  let {
-    size
-  } = _ref3;
-  return {
-    [SIZES.large]: 'var(--UT-status-gap-large, 0.5rem)',
-    [SIZES.medium]: 'var(--UT-status-gap-medium, 0.5rem)',
-    [SIZES.small]: 'var(--UT-status-gap-small, 0.25rem)',
-    [SIZES.xlarge]: 'var(--UT-status-gap-xlarge, 0.5rem)',
-    [SIZES.xsmall]: 'var(--UT-status-gap-xsmall, 0.25rem)'
-  }[size];
-};
-const getPadding = _ref4 => {
-  let {
-    size
-  } = _ref4;
-  return {
-    [SIZES.large]: 'var(--UT-status-padding-y-large, 0.25rem) var(--UT-status-padding-x-large, 0.5rem)',
-    [SIZES.medium]: 'var(--UT-status-padding-y-medium, 0.25rem) var(--UT-status-padding-x-medium, 0.5rem)',
-    [SIZES.small]: 'var(--UT-status-padding-y-small, 0.25rem) var(--UT-status-padding-x-small, 0.5rem)',
-    [SIZES.xlarge]: 'var(--UT-status-padding-y-xlarge, 0.5rem) var(--UT-status-padding-x-xlarge, 0.75rem)',
-    [SIZES.xsmall]: 'var(--UT-status-padding-y-xsmall, 0.125rem) var(--UT-status-padding-x-xsmall, 0.25rem)'
-  }[size];
-};
-export const getLabelVariant = _ref5 => {
-  let {
-    size
-  } = _ref5;
-  return {
-    [SIZES.large]: 'body',
-    [SIZES.medium]: 'small',
-    [SIZES.small]: 'xsmall',
-    [SIZES.xlarge]: 'body',
-    [SIZES.xsmall]: 'xsmall'
-  }[size];
-};
-export const getIconSize = _ref6 => {
-  let {
-    size
-  } = _ref6;
-  return {
-    [SIZES.large]: 'var(--UT-status-icon-size-xs, 1.25rem)',
-    [SIZES.medium]: 'var(--UT-status-icon-size-2xs, 1rem)',
-    [SIZES.small]: 'var(--UT-status-icon-size-3xs, 0.75rem)',
-    [SIZES.xlarge]: 'var(--UT-status-icon-size-xs, 1.25rem)',
-    [SIZES.xsmall]: 'var(--UT-status-icon-size-3xs, 0.75rem)'
-  }[size];
-};
-export const defaultIconMapper = variant => ({
-  [VARIANTS.accent]: 'IconCheck',
-  [VARIANTS.error]: 'IconX',
-  [VARIANTS.information]: 'IconInfoCircle',
-  [VARIANTS.success]: 'IconCheck',
-  [VARIANTS.unassigned]: 'IconArchive',
-  [VARIANTS.warning]: 'IconAlertTriangle'
-})[variant];
-export const validateProps = _ref7 => {
-  let {
-    type,
-    variant,
-    ...props
-  } = _ref7;
-  return {
-    type: TYPES[type] || TYPES[DEFAULT_PROPS.type],
-    variant: VARIANTS[variant] || VARIANTS[DEFAULT_PROPS.variant],
-    ...props
-  };
-};
-export const retrieveStyle = _ref8 => {
-  let {
-    theme,
-    size = DEFAULT_PROPS.size,
-    type = DEFAULT_PROPS.type,
-    uppercase,
-    variant = DEFAULT_PROPS.variant
-  } = _ref8;
-  return {
-    root: {
-      alignItems: 'center',
-      backgroundColor: getBackgroundColor({
-        theme,
-        ...validateProps({
-          type,
-          variant
-        })
-      }),
-      borderRadius: 'var(--UT-status-radius, 0.25rem)',
-      display: 'flex',
-      gridGap: getGridGap({
-        size
-      }),
-      height: 'fit-content',
-      padding: getPadding({
-        size
-      }),
-      width: 'fit-content',
-      '&:empty': {
-        display: 'none'
-      }
-    },
-    label: {
-      ...(uppercase ? {
-        textTransform: 'uppercase'
-      } : {})
-    },
-    icon: {
-      flexShrink: '0',
-      height: 'var(--UT-status-icon-size-xs, 1.25rem)',
-      width: 'var(--UT-status-icon-size-xs, 1.25rem)',
-      '& path': {
-        fill: getIconFill({
-          theme,
-          ...validateProps({
-            type,
-            variant
-          })
-        })
-      }
-    },
-    badge: {
-      backgroundColor: type === TYPES.negative ? "".concat(theme.Palette[variant !== VARIANTS.unassigned ? variant : COLOR_THEMES.gray]['03'], " !important") : "".concat(theme.Palette[variant !== VARIANTS.unassigned ? variant : COLOR_THEMES.gray][variant !== VARIANTS.error ? '03' : '04'], " !important")
-    },
-    adornmentIcon: {
-      flexShrink: '0',
-      '& path': {
-        stroke: getIconFill({
-          theme,
-          ...validateProps({
-            type,
-            variant
-          })
-        })
-      }
-    },
-    iconXsmall: {
-      height: 'var(--UT-status-icon-size-3xs, 0.75rem)',
-      width: 'var(--UT-status-icon-size-3xs, 0.75rem)'
-    },
-    iconSmall: {
-      height: 'var(--UT-status-icon-size-3xs, 0.75rem)',
-      width: 'var(--UT-status-icon-size-3xs, 0.75rem)'
-    },
-    iconMedium: {
-      height: 'var(--UT-status-icon-size-2xs, 1rem)',
-      width: 'var(--UT-status-icon-size-2xs, 1rem)'
-    },
-    iconLarge: {
-      height: 'var(--UT-status-icon-size-xs, 1.25rem)',
-      width: 'var(--UT-status-icon-size-xs, 1.25rem)'
-    },
-    badgeXsmall: {
-      height: '8px',
-      width: '8px'
-    },
-    iconXlarge: {
-      height: '20px',
-      width: '20px'
-    },
-    badgeSmall: {
-      height: '8px',
-      width: '8px'
-    },
-    badgeMedium: {
-      height: '10px',
-      width: '10px'
-    },
-    badgeLarge: {
-      height: '10px',
-      width: '10px'
-    },
-    badgeXlarge: {
-      height: '10px',
-      width: '10px'
-    },
-    withoutArea: {
-      backgroundColor: 'transparent !important'
-    },
-    roundedArea: {
-      borderRadius: 'var(--UT-status-radius-rounded, 9999px)'
-    }
-  };
-};
-export const getColorTheme = _ref9 => {
-  let {
-    type,
-    variant
-  } = _ref9;
-  return {
-    [TYPES.accent]: COLOR_THEMES.accent,
-    [TYPES.default]: COLOR_THEMES.dark,
-    [TYPES.light]: variant !== VARIANTS.unassigned ? variant : COLOR_THEMES.gray,
-    [TYPES.negative]: COLOR_THEMES.light
-  }[type];
-};
+import{COLOR_THEMES}from"../../constants/Palette";import{DEFAULT_PROPS,SIZES,TYPES,VARIANTS}from"./constants";const getBackgroundColor=_ref=>{let{theme:theme,type:type,variant:variant}=_ref;return variant!==VARIANTS.unassigned?theme.Palette[variant][type===TYPES.negative?"04":"01"]:type===TYPES.negative?theme.Palette.gray["04"]:theme.Palette.light["04"]},getIconFill=_ref2=>{let{theme:theme,type:type,variant:variant}=_ref2;return{[TYPES.default]:theme.Palette.dark["05"],[TYPES.light]:theme.Palette[variant!==VARIANTS.unassigned?variant:"gray"]["05"],[TYPES.negative]:theme.Palette.light["01"]}[type]},getGridGap=_ref3=>{let{size:size}=_ref3;return{[SIZES.large]:"var(--UT-status-gap-large, 0.5rem)",[SIZES.medium]:"var(--UT-status-gap-medium, 0.5rem)",[SIZES.small]:"var(--UT-status-gap-small, 0.25rem)",[SIZES.xlarge]:"var(--UT-status-gap-xlarge, 0.5rem)",[SIZES.xsmall]:"var(--UT-status-gap-xsmall, 0.25rem)"}[size]},getPadding=_ref4=>{let{size:size}=_ref4;return{[SIZES.large]:"var(--UT-status-padding-y-large, 0.25rem) var(--UT-status-padding-x-large, 0.5rem)",[SIZES.medium]:"var(--UT-status-padding-y-medium, 0.25rem) var(--UT-status-padding-x-medium, 0.5rem)",[SIZES.small]:"var(--UT-status-padding-y-small, 0.25rem) var(--UT-status-padding-x-small, 0.5rem)",[SIZES.xlarge]:"var(--UT-status-padding-y-xlarge, 0.5rem) var(--UT-status-padding-x-xlarge, 0.75rem)",[SIZES.xsmall]:"var(--UT-status-padding-y-xsmall, 0.125rem) var(--UT-status-padding-x-xsmall, 0.25rem)"}[size]};export const getLabelVariant=_ref5=>{let{size:size}=_ref5;return{[SIZES.large]:"body",[SIZES.medium]:"small",[SIZES.small]:"xsmall",[SIZES.xlarge]:"body",[SIZES.xsmall]:"xsmall"}[size]};export const getIconSize=_ref6=>{let{size:size}=_ref6;return{[SIZES.large]:"var(--UT-status-icon-size-xs, 1.25rem)",[SIZES.medium]:"var(--UT-status-icon-size-2xs, 1rem)",[SIZES.small]:"var(--UT-status-icon-size-3xs, 0.75rem)",[SIZES.xlarge]:"var(--UT-status-icon-size-xs, 1.25rem)",[SIZES.xsmall]:"var(--UT-status-icon-size-3xs, 0.75rem)"}[size]};export const defaultIconMapper=variant=>({[VARIANTS.accent]:"IconCheck",[VARIANTS.error]:"IconX",[VARIANTS.information]:"IconInfoCircle",[VARIANTS.success]:"IconCheck",[VARIANTS.unassigned]:"IconArchive",[VARIANTS.warning]:"IconAlertTriangle"}[variant]);export const validateProps=_ref7=>{let{type:type,variant:variant,...props}=_ref7;return{type:TYPES[type]||TYPES[DEFAULT_PROPS.type],variant:VARIANTS[variant]||VARIANTS[DEFAULT_PROPS.variant],...props}};export const retrieveStyle=_ref8=>{let{theme:theme,size:size=DEFAULT_PROPS.size,type:type=DEFAULT_PROPS.type,uppercase:uppercase,variant:variant=DEFAULT_PROPS.variant}=_ref8;return{root:{alignItems:"center",backgroundColor:getBackgroundColor({theme:theme,...validateProps({type:type,variant:variant})}),borderRadius:"var(--UT-status-radius, 0.25rem)",display:"flex",gridGap:getGridGap({size:size}),height:"fit-content",padding:getPadding({size:size}),width:"fit-content","&:empty":{display:"none"}},label:{...uppercase?{textTransform:"uppercase"}:{}},icon:{flexShrink:"0",height:"var(--UT-status-icon-size-xs, 1.25rem)",width:"var(--UT-status-icon-size-xs, 1.25rem)","& path":{fill:getIconFill({theme:theme,...validateProps({type:type,variant:variant})})}},badge:{backgroundColor:type===TYPES.negative?"".concat(theme.Palette[variant!==VARIANTS.unassigned?variant:COLOR_THEMES.gray]["03"]," !important"):"".concat(theme.Palette[variant!==VARIANTS.unassigned?variant:COLOR_THEMES.gray][variant!==VARIANTS.error?"03":"04"]," !important")},adornmentIcon:{flexShrink:"0","& path":{stroke:getIconFill({theme:theme,...validateProps({type:type,variant:variant})})}},iconXsmall:{height:"var(--UT-status-icon-size-3xs, 0.75rem)",width:"var(--UT-status-icon-size-3xs, 0.75rem)"},iconSmall:{height:"var(--UT-status-icon-size-3xs, 0.75rem)",width:"var(--UT-status-icon-size-3xs, 0.75rem)"},iconMedium:{height:"var(--UT-status-icon-size-2xs, 1rem)",width:"var(--UT-status-icon-size-2xs, 1rem)"},iconLarge:{height:"var(--UT-status-icon-size-xs, 1.25rem)",width:"var(--UT-status-icon-size-xs, 1.25rem)"},badgeXsmall:{height:"8px",width:"8px"},iconXlarge:{height:"20px",width:"20px"},badgeSmall:{height:"8px",width:"8px"},badgeMedium:{height:"10px",width:"10px"},badgeLarge:{height:"10px",width:"10px"},badgeXlarge:{height:"10px",width:"10px"},withoutArea:{backgroundColor:"transparent !important"},roundedArea:{borderRadius:"var(--UT-status-radius-rounded, 9999px)"}}};export const getColorTheme=_ref9=>{let{type:type,variant:variant}=_ref9;return{[TYPES.accent]:COLOR_THEMES.accent,[TYPES.default]:COLOR_THEMES.dark,[TYPES.light]:variant!==VARIANTS.unassigned?variant:COLOR_THEMES.gray,[TYPES.negative]:COLOR_THEMES.light}[type]};

package/dist/esm/components/UTStatus/utils.js

@@ -1,84 +1 @@
-import { isUTIcon } from '../../utils/componentUtils';
-import UTIcon from '../UTIcon';
-import { COMPONENT_KEYS, COMPONENTS_MAPPER, SIZES } from './constants';
-import { getColorTheme, getIconSize } from './theme';
-export const getIconProps = _ref => {
-  let {
-    className,
-    Icon,
-    type,
-    variant,
-    size
-  } = _ref;
-  return {
-    IconComponent: isUTIcon(Icon) ? UTIcon : Icon,
-    ...(isUTIcon(Icon) ? {
-      colorTheme: getColorTheme({
-        type,
-        variant
-      }),
-      name: Icon,
-      size: getIconSize({
-        size
-      })
-    } : {
-      className
-    })
-  };
-};
-export const validateAdornments = adornments => adornments.every(adornment => {
-  if (adornment.left || adornment.right) {
-    return (!adornment.left || COMPONENTS_MAPPER[adornment.left.name]) && (!adornment.right || COMPONENTS_MAPPER[adornment.right.name]);
-  }
-  return COMPONENTS_MAPPER[adornment.name];
-});
-const interpreterSize = (size, classes) => {
-  const {
-    iconXsmall,
-    iconSmall,
-    iconMedium,
-    iconLarge,
-    iconXlarge,
-    badgeXsmall,
-    badgeSmall,
-    badgeMedium,
-    badgeLarge,
-    badgeXlarge
-  } = classes || {};
-  return {
-    [COMPONENT_KEYS.BADGE]: {
-      [SIZES.xsmall]: badgeXsmall,
-      [SIZES.small]: badgeSmall,
-      [SIZES.medium]: badgeMedium,
-      [SIZES.large]: badgeLarge,
-      [SIZES.xlarge]: badgeXlarge
-    }[size],
-    [COMPONENT_KEYS.ICON]: {
-      [SIZES.xsmall]: iconXsmall,
-      [SIZES.small]: iconSmall,
-      [SIZES.medium]: iconMedium,
-      [SIZES.large]: iconLarge,
-      [SIZES.xlarge]: iconXlarge
-    }[size]
-  };
-};
-export const getAdornmentsThemeProps = props => {
-  const {
-    adornmentName,
-    classes,
-    size = SIZES.medium
-  } = props || {};
-  const {
-    badge,
-    adornmentIcon
-  } = classes || {};
-  const recoverClassForSizeAndType = interpreterSize(size, classes)[adornmentName];
-  return {
-    [COMPONENT_KEYS.BADGE]: {
-      className: "".concat(badge, " ").concat(recoverClassForSizeAndType)
-    },
-    [COMPONENT_KEYS.ICON]: {
-      className: "".concat(adornmentIcon, " ").concat(recoverClassForSizeAndType)
-    }
-  }[adornmentName];
-};
+import{isUTIcon}from"../../utils/componentUtils";import UTIcon from"../UTIcon";import{COMPONENT_KEYS,COMPONENTS_MAPPER,SIZES}from"./constants";import{getColorTheme,getIconSize}from"./theme";export const getIconProps=_ref=>{let{className:className,Icon:Icon,type:type,variant:variant,size:size}=_ref;return{IconComponent:isUTIcon(Icon)?UTIcon:Icon,...isUTIcon(Icon)?{colorTheme:getColorTheme({type:type,variant:variant}),name:Icon,size:getIconSize({size:size})}:{className:className}}};export const validateAdornments=adornments=>adornments.every(adornment=>adornment.left||adornment.right?(!adornment.left||COMPONENTS_MAPPER[adornment.left.name])&&(!adornment.right||COMPONENTS_MAPPER[adornment.right.name]):COMPONENTS_MAPPER[adornment.name]);const interpreterSize=(size,classes)=>{const{iconXsmall:iconXsmall,iconSmall:iconSmall,iconMedium:iconMedium,iconLarge:iconLarge,iconXlarge:iconXlarge,badgeXsmall:badgeXsmall,badgeSmall:badgeSmall,badgeMedium:badgeMedium,badgeLarge:badgeLarge,badgeXlarge:badgeXlarge}=classes||{};return{[COMPONENT_KEYS.BADGE]:{[SIZES.xsmall]:badgeXsmall,[SIZES.small]:badgeSmall,[SIZES.medium]:badgeMedium,[SIZES.large]:badgeLarge,[SIZES.xlarge]:badgeXlarge}[size],[COMPONENT_KEYS.ICON]:{[SIZES.xsmall]:iconXsmall,[SIZES.small]:iconSmall,[SIZES.medium]:iconMedium,[SIZES.large]:iconLarge,[SIZES.xlarge]:iconXlarge}[size]}};export const getAdornmentsThemeProps=props=>{const{adornmentName:adornmentName,classes:classes,size:size=SIZES.medium}=props||{},{badge:badge,adornmentIcon:adornmentIcon}=classes||{},recoverClassForSizeAndType=interpreterSize(size,classes)[adornmentName];return{[COMPONENT_KEYS.BADGE]:{className:"".concat(badge," ").concat(recoverClassForSizeAndType)},[COMPONENT_KEYS.ICON]:{className:"".concat(adornmentIcon," ").concat(recoverClassForSizeAndType)}}[adornmentName]};

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

@@ -1,30 +1 @@
-export const COLOR_THEMES = {
-  ACCENT: 'accent',
-  DEFAULT: 'default',
-  ERROR: 'error',
-  GRADIENT: 'gradient',
-  GRAY: 'gray',
-  IDENTITY_1: 'identity1',
-  IDENTITY_2: 'identity2',
-  IDENTITY_3: 'identity3',
-  IDENTITY_4: 'identity4',
-  INFO: 'info',
-  NEGATIVE: 'negative',
-  SUCCESS: 'success',
-  WARNING: 'warning'
-};
-export const ICON_COLOR_THEMES = {
-  [COLOR_THEMES.ACCENT]: 'accent',
-  [COLOR_THEMES.DEFAULT]: 'dark',
-  [COLOR_THEMES.ERROR]: 'error',
-  [COLOR_THEMES.GRADIENT]: 'light',
-  [COLOR_THEMES.GRAY]: 'gray',
-  [COLOR_THEMES.IDENTITY_1]: 'light',
-  [COLOR_THEMES.IDENTITY_2]: 'light',
-  [COLOR_THEMES.IDENTITY_3]: 'light',
-  [COLOR_THEMES.IDENTITY_4]: 'light',
-  [COLOR_THEMES.INFO]: 'information',
-  [COLOR_THEMES.NEGATIVE]: 'dark',
-  [COLOR_THEMES.SUCCESS]: 'success',
-  [COLOR_THEMES.WARNING]: 'warning'
-};
+export const COLOR_THEMES={ACCENT:"accent",DEFAULT:"default",ERROR:"error",GRADIENT:"gradient",GRAY:"gray",IDENTITY_1:"identity1",IDENTITY_2:"identity2",IDENTITY_3:"identity3",IDENTITY_4:"identity4",INFO:"info",NEGATIVE:"negative",SUCCESS:"success",WARNING:"warning"};export const ICON_COLOR_THEMES={[COLOR_THEMES.ACCENT]:"accent",[COLOR_THEMES.DEFAULT]:"dark",[COLOR_THEMES.ERROR]:"error",[COLOR_THEMES.GRADIENT]:"light",[COLOR_THEMES.GRAY]:"gray",[COLOR_THEMES.IDENTITY_1]:"light",[COLOR_THEMES.IDENTITY_2]:"light",[COLOR_THEMES.IDENTITY_3]:"light",[COLOR_THEMES.IDENTITY_4]:"light",[COLOR_THEMES.INFO]:"information",[COLOR_THEMES.NEGATIVE]:"dark",[COLOR_THEMES.SUCCESS]:"success",[COLOR_THEMES.WARNING]:"warning"};

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

@@ -1,107 +1 @@
-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 { bool, element, func, object, string } from 'prop-types';
-import React from 'react';
-import UTButton from '../UTButton';
-import UTIcon from '../UTIcon';
-import UTLabel from '../UTLabel';
-import UTLoading from '../UTLoading';
-import WithTheme from '../WithTheme';
-import { TEST_IDS } from '../../constants/testIds';
-import { ICON_COLOR_THEMES, COLOR_THEMES } from './constants';
-import { retrieveStyle } from './theme';
-import styles from './styles.module.scss';
-const {
-  statusMessage
-} = TEST_IDS;
-const UTStatusMessage = _ref => {
-  let {
-    children,
-    classes,
-    colorTheme = COLOR_THEMES.DEFAULT,
-    description,
-    descriptionProps,
-    HeaderComponent,
-    helpText,
-    helpTextProps,
-    icon = 'IconInfoCircle',
-    iconProps = {
-      size: 40
-    },
-    loading,
-    primaryAction,
-    primaryActionProps,
-    primaryActionText,
-    secondaryAction,
-    secondaryActionProps,
-    secondaryActionText,
-    showHeader = true,
-    title,
-    titleProps
-  } = _ref;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "".concat(styles.container, " ").concat(classes.container)
-  }, loading ? /*#__PURE__*/React.createElement(UTLoading, {
-    loading: true,
-    text: null
-  }) : showHeader ? /*#__PURE__*/React.createElement("div", {
-    className: classes.banner
-  }, HeaderComponent ? /*#__PURE__*/React.createElement(HeaderComponent, null) : /*#__PURE__*/React.createElement("div", {
-    className: classes.iconContainer
-  }, /*#__PURE__*/React.createElement(UTIcon, _extends({
-    name: icon,
-    colorTheme: ICON_COLOR_THEMES[colorTheme],
-    dataTestId: statusMessage.icon
-  }, iconProps)))) : null, /*#__PURE__*/React.createElement("div", {
-    className: "".concat(styles.content, " ").concat(classes.content)
-  }, (title || description || helpText) && /*#__PURE__*/React.createElement("div", {
-    className: styles.section
-  }, title && /*#__PURE__*/React.createElement(UTLabel, _extends({
-    className: styles.label,
-    dataTestId: statusMessage.title,
-    variant: "title3",
-    weight: "medium"
-  }, titleProps), title), description && /*#__PURE__*/React.createElement(UTLabel, _extends({
-    className: styles.label,
-    colorTheme: "gray",
-    dataTestId: statusMessage.description,
-    withMarkdown: true,
-    variant: "body"
-  }, descriptionProps), description), helpText && /*#__PURE__*/React.createElement(UTLabel, _extends({
-    className: styles.label,
-    colorTheme: "gray",
-    dataTestId: statusMessage.helperText,
-    variant: "small"
-  }, helpTextProps), helpText)), children, (primaryAction || secondaryAction) && /*#__PURE__*/React.createElement("div", {
-    className: styles.section
-  }, primaryAction && /*#__PURE__*/React.createElement(UTButton, _extends({
-    onClick: primaryAction
-  }, primaryActionProps), primaryActionText), secondaryAction && /*#__PURE__*/React.createElement(UTButton, _extends({
-    onClick: secondaryAction,
-    variant: "text"
-  }, secondaryActionProps), secondaryActionText))));
-};
-UTStatusMessage.propTypes = {
-  children: element,
-  classes: object,
-  colorTheme: string,
-  description: string,
-  descriptionProps: object,
-  HeaderComponent: element,
-  helpText: string,
-  helpTextProps: object,
-  icon: string,
-  iconProps: object,
-  loading: bool,
-  primaryAction: func,
-  primaryActionProps: object,
-  primaryActionText: string,
-  secondaryAction: func,
-  secondaryActionProps: object,
-  secondaryActionText: string,
-  showHeader: bool,
-  title: string,
-  titleProps: object
-};
-const UTStatusMessageWithTheme = WithTheme(retrieveStyle)(UTStatusMessage);
-UTStatusMessageWithTheme.displayName = 'UTStatusMessage';
-export default UTStatusMessageWithTheme;
+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{bool,element,func,object,string}from"prop-types";import React from"react";import UTButton from"../UTButton";import UTIcon from"../UTIcon";import UTLabel from"../UTLabel";import UTLoading from"../UTLoading";import WithTheme from"../WithTheme";import{TEST_IDS}from"../../constants/testIds";import{ICON_COLOR_THEMES,COLOR_THEMES}from"./constants";import{retrieveStyle}from"./theme";import styles from"./styles.module.scss";const{statusMessage:statusMessage}=TEST_IDS,UTStatusMessage=_ref=>{let{children:children,classes:classes,colorTheme:colorTheme=COLOR_THEMES.DEFAULT,description:description,descriptionProps:descriptionProps,HeaderComponent:HeaderComponent,helpText:helpText,helpTextProps:helpTextProps,icon:icon="IconInfoCircle",iconProps:iconProps={size:40},loading:loading,primaryAction:primaryAction,primaryActionProps:primaryActionProps,primaryActionText:primaryActionText,secondaryAction:secondaryAction,secondaryActionProps:secondaryActionProps,secondaryActionText:secondaryActionText,showHeader:showHeader=!0,title:title,titleProps:titleProps}=_ref;return React.createElement("div",{className:"".concat(styles.container," ").concat(classes.container)},loading?React.createElement(UTLoading,{loading:!0,text:null}):showHeader?React.createElement("div",{className:classes.banner},HeaderComponent?React.createElement(HeaderComponent,null):React.createElement("div",{className:classes.iconContainer},React.createElement(UTIcon,_extends({name:icon,colorTheme:ICON_COLOR_THEMES[colorTheme],dataTestId:statusMessage.icon},iconProps)))):null,React.createElement("div",{className:"".concat(styles.content," ").concat(classes.content)},(title||description||helpText)&&React.createElement("div",{className:styles.section},title&&React.createElement(UTLabel,_extends({className:styles.label,dataTestId:statusMessage.title,variant:"title3",weight:"medium"},titleProps),title),description&&React.createElement(UTLabel,_extends({className:styles.label,colorTheme:"gray",dataTestId:statusMessage.description,withMarkdown:!0,variant:"body"},descriptionProps),description),helpText&&React.createElement(UTLabel,_extends({className:styles.label,colorTheme:"gray",dataTestId:statusMessage.helperText,variant:"small"},helpTextProps),helpText)),children,(primaryAction||secondaryAction)&&React.createElement("div",{className:styles.section},primaryAction&&React.createElement(UTButton,_extends({onClick:primaryAction},primaryActionProps),primaryActionText),secondaryAction&&React.createElement(UTButton,_extends({onClick:secondaryAction,variant:"text"},secondaryActionProps),secondaryActionText))))};UTStatusMessage.propTypes={children:element,classes:object,colorTheme:string,description:string,descriptionProps:object,HeaderComponent:element,helpText:string,helpTextProps:object,icon:string,iconProps:object,loading:bool,primaryAction:func,primaryActionProps:object,primaryActionText:string,secondaryAction:func,secondaryActionProps:object,secondaryActionText:string,showHeader:bool,title:string,titleProps:object};const UTStatusMessageWithTheme=WithTheme(retrieveStyle)(UTStatusMessage);UTStatusMessageWithTheme.displayName="UTStatusMessage";export default UTStatusMessageWithTheme;