@widergy/energy-ui 3.161.0 → 3.162.0

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

@@ -1,7 +1,151 @@
 .bannerContainer {
-    align-items: center;
-    display: flex;
-    flex-direction: row;
-    grid-gap: 16px;
-    padding: 16px;
+  align-items: flex-start;
+  border-radius: var(--UT-banner-radius, 8px);
+  display: flex;
+  flex-direction: row;
+}
+
+.contentContainer {
+  display: flex;
+  flex: 1;
+}
+
+.contentHorizontal {
+  align-items: flex-start;
+  flex-direction: row;
+}
+
+.contentVertical {
+  flex-direction: column;
+}
+
+.iconTextContainer {
+  display: flex;
+  grid-gap: var(--UT-banner-icon-gap, 12px);
+}
+
+.iconHorizontal {
+  align-items: flex-start;
+  flex-direction: row;
+}
+
+.iconVertical {
+  flex-direction: column;
+}
+
+.iconFlex {
+  flex: 1;
+}
+
+.textContainer {
+  display: flex;
+  flex-direction: column;
+  grid-gap: var(--UT-banner-text-gap, 8px);
+}
+
+.textFlex {
+  flex: 1;
+}
+
+.buttonsContainer {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  grid-gap: var(--UT-banner-buttons-gap, 8px);
+}
+
+.buttonsVertical {
+  align-self: flex-start;
+}
+
+.gapSmall {
+  grid-gap: var(--UT-banner-gap-sm, 8px);
+}
+
+.gapMedium {
+  grid-gap: var(--UT-banner-gap-md, 16px);
+}
+
+.gapLarge {
+  grid-gap: var(--UT-banner-gap-lg, 24px);
+}
+
+.paddingSmall {
+  padding: var(--UT-banner-padding-y-sm, 8px) var(--UT-banner-padding-x-sm, 12px);
+}
+
+.paddingMedium {
+  padding: var(--UT-banner-padding-md, 16px);
+}
+
+.paddingLarge {
+  padding: var(--UT-banner-padding-lg, 24px);
+}
+
+.errorLight {
+  background-color: var(--actionError01);
+}
+
+.errorDark {
+  background-color: var(--actionError04);
+}
+
+.grayLight {
+  background-color: var(--light02);
+}
+
+.grayDark {
+  background-color: var(--gray05);
+}
+
+.informationLight {
+  background-color: var(--semanticInformation01);
+}
+
+.informationDark {
+  background-color: var(--semanticInformation04);
+}
+
+.negativeLight {
+  background-color: var(--actionNegative02);
+}
+
+.negativeDark {
+  background-color: var(--actionNegative04);
+}
+
+.primaryLight {
+  background-color: var(--actionAccent01);
+}
+
+.primaryDark {
+  background-color: var(--actionAccent04);
+}
+
+.successLight {
+  background-color: var(--semanticSuccess01);
+}
+
+.successDark {
+  background-color: var(--semanticSuccess04);
+}
+
+.warningLight {
+  background-color: var(--semanticWarning01);
+}
+
+.warningDark {
+  background-color: var(--semanticWarning04);
+}
+
+.whiteLight {
+  background-color: var(--light01);
+}
+
+.whiteDark {
+  background-color: var(--dark04);
+}
+
+.uppercase {
+  text-transform: uppercase;
 }

package/dist/esm/components/UTBanner/types.js

@@ -0,0 +1,14 @@
+import { bool, func, node, oneOfType, shape, string } from 'prop-types';
+export const buttonType = shape({
+  colorTheme: string,
+  dataTestId: string,
+  disabled: bool,
+  Icon: oneOfType([string, func]),
+  iconPlacement: string,
+  loading: bool,
+  onClick: func,
+  size: string,
+  title: node,
+  type: string,
+  variant: string
+});

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

@@ -0,0 +1,137 @@
+import { COLOR_THEMES, SIZES, VARIANTS } from './constants';
+
+/**
+ * Returns the default UTIcon colorTheme and shade for the banner icon based on the
+ * banner's colorTheme and variant. Matches the mobile implementation.
+ * @param {string} colorTheme - Banner color theme.
+ * @param {string} variant - Banner variant ('light' | 'dark').
+ * @returns {{ colorTheme: string, shade: string }}
+ */
+export const getDefaultIconTheme = (colorTheme, variant) => {
+  var _COLOR_THEMES$ERROR$C;
+  if (variant === VARIANTS.DARK) {
+    return colorTheme === COLOR_THEMES.NEGATIVE ? {
+      colorTheme: 'dark',
+      shade: '05'
+    } : {
+      colorTheme: 'light',
+      shade: '01'
+    };
+  }
+  return (_COLOR_THEMES$ERROR$C = {
+    [COLOR_THEMES.ERROR]: {
+      colorTheme: 'error',
+      shade: '04'
+    },
+    [COLOR_THEMES.GRAY]: {
+      colorTheme: 'accent',
+      shade: '04'
+    },
+    [COLOR_THEMES.INFORMATION]: {
+      colorTheme: 'information',
+      shade: '04'
+    },
+    [COLOR_THEMES.NEGATIVE]: {
+      colorTheme: 'light',
+      shade: '01'
+    },
+    [COLOR_THEMES.PRIMARY]: {
+      colorTheme: 'accent',
+      shade: '04'
+    },
+    [COLOR_THEMES.SUCCESS]: {
+      colorTheme: 'success',
+      shade: '04'
+    },
+    [COLOR_THEMES.WARNING]: {
+      colorTheme: 'warning',
+      shade: '04'
+    },
+    [COLOR_THEMES.WHITE]: {
+      colorTheme: 'accent',
+      shade: '04'
+    }
+  }[colorTheme]) !== null && _COLOR_THEMES$ERROR$C !== void 0 ? _COLOR_THEMES$ERROR$C : {
+    colorTheme: 'accent',
+    shade: '04'
+  };
+};
+
+/**
+ * Returns the default icon size in pixels based on the banner size.
+ * @param {string} size - One of SIZES values.
+ * @returns {number}
+ */
+export const getDefaultIconSize = size => size === SIZES.LARGE ? 24 : 20;
+
+/**
+ * Returns the default colorTheme for buttons and the close button based on the
+ * banner variant. Dark variant uses 'negative'; light variant uses standard colors.
+ * @param {string} variant - Banner variant ('light' | 'dark').
+ * @returns {{ button: string, onClose: string, secondaryButton: string }}
+ */
+export const getDefaultButtonColorTheme = variant => {
+  const isDark = variant === VARIANTS.DARK;
+  return {
+    button: isDark ? 'negative' : 'secondary',
+    onClose: isDark ? 'negative' : 'gray',
+    secondaryButton: isDark ? 'negative' : 'secondary'
+  };
+};
+
+/**
+ * Returns the UTLabel variant and weight for the main text (children) based on
+ * the banner size.
+ * @param {string} size - One of SIZES values.
+ * @returns {{ variant: string, weight: string }}
+ */
+export const getLabelStyles = size => {
+  var _SIZES$LARGE$SIZES$ME;
+  return (_SIZES$LARGE$SIZES$ME = {
+    [SIZES.LARGE]: {
+      titleVariant: 'title3',
+      descriptionVariant: 'body'
+    },
+    [SIZES.MEDIUM]: {
+      titleVariant: 'subtitle1',
+      descriptionVariant: 'small'
+    },
+    [SIZES.SMALL]: {
+      titleVariant: 'small',
+      descriptionVariant: 'small'
+    }
+  }[size]) !== null && _SIZES$LARGE$SIZES$ME !== void 0 ? _SIZES$LARGE$SIZES$ME : {
+    titleVariant: 'small',
+    descriptionVariant: 'small'
+  };
+};
+
+/**
+ * Returns the UTLabel colorTheme for the banner's main text content based on the
+ * banner's colorTheme and variant. Negative+light and any dark variant use light
+ * (white) text; all other combinations use dark text.
+ * @param {string} colorTheme - Banner color theme.
+ * @param {string} variant - Banner variant ('light' | 'dark').
+ * @returns {string} UTLabel colorTheme value.
+ */
+export const getLabelColorTheme = (colorTheme, variant) => {
+  if (colorTheme === COLOR_THEMES.NEGATIVE) {
+    return variant === VARIANTS.LIGHT ? 'light' : 'dark';
+  }
+  return variant === VARIANTS.LIGHT ? 'dark' : 'light';
+};
+
+/**
+ * Returns the UTLabel colorTheme for the banner's secondary text content based on the
+ * banner's colorTheme and variant. Negative+light and any dark variant use light
+ * (white) text; all other combinations use gray text.
+ * @param {string} colorTheme - Banner color theme.
+ * @param {string} variant - Banner variant ('light' | 'gray').
+ * @returns {string} UTLabel colorTheme value.
+ */
+export const getSecondaryLabelColorTheme = (colorTheme, variant) => {
+  if (colorTheme === COLOR_THEMES.NEGATIVE) {
+    return variant === VARIANTS.LIGHT ? 'light' : 'gray';
+  }
+  return variant === VARIANTS.LIGHT ? 'gray' : 'light';
+};

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

@@ -1,4 +1,4 @@
-import React, { Fragment, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import * as d3 from 'd3';
 import { array, object, objectOf, string } from 'prop-types';
 import { mergeMultipleClassNames } from '../../utils/classesUtils';
@@ -168,7 +168,7 @@ const UTGraph = _ref => {
       crossAxisLeft,
       crossAxisRight
     } = _ref2;
-    return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Bars, {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Bars, {
       crossAxisLeft: crossAxisLeft,
       crossAxisRight: crossAxisRight,
       dataset: dataset,

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

@@ -146,8 +146,9 @@ const UTHeader = _ref => {
       height: BANNER_ICON_SIZE,
       width: BANNER_ICON_SIZE
     },
-    Icon: banner.Icon
-  }, banner.text)));
+    Icon: banner.Icon,
+    title: banner.text
+  })));
 };
 UTHeader.propTypes = {
   actions: arrayOf(object),

package/dist/esm/constants/testIds.js

@@ -47,6 +47,7 @@ export const ID_CONSTANTS = {
   PINNED: 'pinned',
   POPPER: 'popper',
   SEARCH_BUTTON: 'searchButton',
+  SECONDARY_ACTION: 'secondaryAction',
   SEARCH_BUTTON_TOOLTIP: 'searchButtonTooltip',
   SEARCH_FIELD: 'searchField',
   SELECTION_COMPONENT: 'selectionComponent',
@@ -54,6 +55,7 @@ export const ID_CONSTANTS = {
   SIDEBAR_BUTTON: 'sidebarButton',
   STATUS_MESSAGE: 'statusMessage',
   TABLE: 'table',
+  TERTIARY_ACTION: 'tertiaryAction',
   TABLE_ROW: 'tableRow',
   TITLE: 'title',
   USER_FILTER: 'userFilter',

package/dist/esm/index.js

@@ -9,6 +9,7 @@ import AttachmentContainer from './deprecated/UTAttachment';
 import UTAutocomplete from './deprecated/UTAutocomplete';
 import UTAvatar from './components/UTAvatar';
 import UTBadge from './components/UTBadge';
+import UTBanner from './components/UTBanner';
 import UTBarChart from './deprecated/UTBarChart';
 import UTBreadcrumbs from './components/UTBreadcrumbs';
 import UTButton from './components/UTButton';
@@ -106,4 +107,4 @@ export { UTList };
 export { UTPieChart };
 /** @deprecated */
 export { UTToggle };
-export { AlertHandler, componentUtils, ThemeProvider as EnergyThemeProvider, keyboardUtils, stylesDeduplicationUtils, useCSSVariables, UTCalendar, UTActionCard, UTAlert, UTAttachmentList, UTAvatar, UTBadge, UTBreadcrumbs, UTButton, UTButtonGroup, UTCaptcha, UTCarousel, UTCBUInput, UTCheckbox, UTCheckList, UTChip, UTConsumptionBar, UTCreditCard, UTCuit, UTDataCategory, UTDataElement, UTDatePicker, UTDocumentWizard, UTDotMenu, UTEmojiPicker, UTExternalLink, UTFileInputContainer as UTFileInput, UTShortcutPanel, UTGoogleAutocomplete, UTGraph, UTIcon, UTImageRadio, UTKpi, UTLabel, UTLoading, UTMap, UTMenu, UTModal, UTOnboarding, UTPagination, UTPanel, UTPasswordField, UTPhoneInput, UTPopper, UTPopUp, UTProductItem, UTProgressBar, UTRadioGroup, UTRatingContainer as UTRating, UTSearchField, UTSelect, UTSelectableCard, UTSidebar, UTSignature, Skeleton as UTSkeleton, UTStatus, UTStatusMessage, UTSwitch, UTTable, UTTabs, UTTextArea, UTTextInput, UTThirdPartyCookieChecker, UTTooltip, UTTopbar, UTTouchableWithoutFeedback, UTTracker, UTValidation, UTVirtualizedList, UTVirtualKeyboard, UTWorkflowContainer, UTWrapperObservation, WithLoading, WithTouch, useScrollBasedMenu };
+export { AlertHandler, componentUtils, ThemeProvider as EnergyThemeProvider, keyboardUtils, stylesDeduplicationUtils, useCSSVariables, UTCalendar, UTActionCard, UTAlert, UTAttachmentList, UTAvatar, UTBadge, UTBanner, UTBreadcrumbs, UTButton, UTButtonGroup, UTCaptcha, UTCarousel, UTCBUInput, UTCheckbox, UTCheckList, UTChip, UTConsumptionBar, UTCreditCard, UTCuit, UTDataCategory, UTDataElement, UTDatePicker, UTDocumentWizard, UTDotMenu, UTEmojiPicker, UTExternalLink, UTFileInputContainer as UTFileInput, UTShortcutPanel, UTGoogleAutocomplete, UTGraph, UTIcon, UTImageRadio, UTKpi, UTLabel, UTLoading, UTMap, UTMenu, UTModal, UTOnboarding, UTPagination, UTPanel, UTPasswordField, UTPhoneInput, UTPopper, UTPopUp, UTProductItem, UTProgressBar, UTRadioGroup, UTRatingContainer as UTRating, UTSearchField, UTSelect, UTSelectableCard, UTSidebar, UTSignature, Skeleton as UTSkeleton, UTStatus, UTStatusMessage, UTSwitch, UTTable, UTTabs, UTTextArea, UTTextInput, UTThirdPartyCookieChecker, UTTooltip, UTTopbar, UTTouchableWithoutFeedback, UTTracker, UTValidation, UTVirtualizedList, UTVirtualKeyboard, UTWorkflowContainer, UTWrapperObservation, WithLoading, WithTouch, useScrollBasedMenu };

package/dist/esm/utils/hooks/useCSSVariables/constants.js

@@ -163,6 +163,19 @@ export const baseTokens = {
     'radius-xl': 'radius-500'
   },
   component: {
+    'UT-banner-buttons-gap': 'gap-sm',
+    'UT-banner-gap-lg': 'gap-xl',
+    'UT-banner-gap-md': 'gap-lg',
+    'UT-banner-gap-sm': 'gap-sm',
+    'UT-banner-icon-gap': 'gap-md',
+    'UT-banner-icon-size-lg': 'size-icon-md',
+    'UT-banner-icon-size-sm': 'size-icon-xs',
+    'UT-banner-padding-lg': 'padding-lg',
+    'UT-banner-padding-md': 'padding-md',
+    'UT-banner-padding-x-sm': 'padding-sm',
+    'UT-banner-padding-y-sm': 'padding-xs',
+    'UT-banner-radius': 'radius-md',
+    'UT-banner-text-gap': 'gap-sm',
     'UT-button-height-sm': 'size-control-sm',
     'UT-button-height-md': 'size-control-md',
     'UT-button-height-lg': 'size-control-lg',

package/dist/index.js

@@ -57,6 +57,12 @@ Object.defineProperty(exports, "UTBadge", {
     return _UTBadge.default;
   }
 });
+Object.defineProperty(exports, "UTBanner", {
+  enumerable: true,
+  get: function () {
+    return _UTBanner.default;
+  }
+});
 Object.defineProperty(exports, "UTBarChart", {
   enumerable: true,
   get: function () {
@@ -548,6 +554,7 @@ var _UTAttachment = _interopRequireDefault(require("./deprecated/UTAttachment"))
 var _UTAutocomplete = _interopRequireDefault(require("./deprecated/UTAutocomplete"));
 var _UTAvatar = _interopRequireDefault(require("./components/UTAvatar"));
 var _UTBadge = _interopRequireDefault(require("./components/UTBadge"));
+var _UTBanner = _interopRequireDefault(require("./components/UTBanner"));
 var _UTBarChart = _interopRequireDefault(require("./deprecated/UTBarChart"));
 var _UTBreadcrumbs = _interopRequireDefault(require("./components/UTBreadcrumbs"));
 var _UTButton = _interopRequireDefault(require("./components/UTButton"));

package/dist/utils/hooks/useCSSVariables/constants.js

@@ -169,6 +169,19 @@ const baseTokens = exports.baseTokens = {
     'radius-xl': 'radius-500'
   },
   component: {
+    'UT-banner-buttons-gap': 'gap-sm',
+    'UT-banner-gap-lg': 'gap-xl',
+    'UT-banner-gap-md': 'gap-lg',
+    'UT-banner-gap-sm': 'gap-sm',
+    'UT-banner-icon-gap': 'gap-md',
+    'UT-banner-icon-size-lg': 'size-icon-md',
+    'UT-banner-icon-size-sm': 'size-icon-xs',
+    'UT-banner-padding-lg': 'padding-lg',
+    'UT-banner-padding-md': 'padding-md',
+    'UT-banner-padding-x-sm': 'padding-sm',
+    'UT-banner-padding-y-sm': 'padding-xs',
+    'UT-banner-radius': 'radius-md',
+    'UT-banner-text-gap': 'gap-sm',
     'UT-button-height-sm': 'size-control-sm',
     'UT-button-height-md': 'size-control-md',
     'UT-button-height-lg': 'size-control-lg',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@widergy/energy-ui",
-  "version": "3.161.0",
+  "version": "3.162.0",
   "description": "Widergy Web Components",
   "author": "widergy",
   "license": "MIT",

package/dist/components/UTBanner/theme.js

@@ -1,18 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.retrieveStyle = void 0;
-const retrieveStyle = _ref => {
-  var _theme$Palette;
-  let {
-    theme
-  } = _ref;
-  return {
-    infoContainer: {
-      backgroundColor: (_theme$Palette = theme.Palette) === null || _theme$Palette === void 0 ? void 0 : _theme$Palette.light['03']
-    }
-  };
-};
-exports.retrieveStyle = retrieveStyle;

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

@@ -1,11 +0,0 @@
-export const retrieveStyle = _ref => {
-  var _theme$Palette;
-  let {
-    theme
-  } = _ref;
-  return {
-    infoContainer: {
-      backgroundColor: (_theme$Palette = theme.Palette) === null || _theme$Palette === void 0 ? void 0 : _theme$Palette.light['03']
-    }
-  };
-};