@hortiview/shared-components 2.21.0 → 2.22.0

package/CHANGELOG.md

@@ -1,3 +1,20 @@
+## [2.22.0](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v2.21.0...v2.22.0) (2026-04-13)
+
+### Features
+
+* add ErrorBanner component with styling and storybook integration ([22029ee](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/22029eeb746c4c4ad325d5ce5ace3c7ed0bb0a91))
+* add sentiment-very-dissatisfied icon and update related components ([4a12a29](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/4a12a293d210fc1391c4439665884f00a39693cd))
+* export ErrorBanner component in main module ([2372df8](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/2372df8227645fc5b5ff4755e231af024d54af20))
+* integrate ErrorBanner into Modal and add useContainerWidth hook for responsive design ([9e503e9](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/9e503e9f46ef0758dc63ede5330796e551cb03a5))
+
+### Bug Fixes
+
+* remove unused test ([b213a2e](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/b213a2e8f2940a27b028364ee2aee08e966c593d))
+
+### Code Refactoring
+
+* changes after review ([9a6b586](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/9a6b58619a2d4dba76e6d93b1d2cc452a5ab9bdd))
+
 ## [2.21.0](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v2.20.1...v2.21.0) (2026-04-13)
 
 ### Features

package/README.md

@@ -31,6 +31,7 @@ Additionally the library provides form components using [react-hook-form](https:
 1. [DeleteModal](#deletemodal)
 1. [Disclaimer](#disclaimer)
 1. [EmptyView](#emptyview)
+1. [ErrorBanner] (#errorbanner)
 1. [Filter](#filter)
 1. [FormattedNumberDisplay](#formattednumberdisplay)
 1. [FormComponents](#formcomponents)
@@ -258,6 +259,31 @@ import { EmptyView } from '@hortiview/shared-components';
 <EmptyView title='No Content' subtitle='nothing' icon='grass' />;
 ```
 
+### ErrorBanner
+
+Displays an error message with optional actions. Can be used below a header (default) or as a standalone banner (e.g., in a modal).
+
+```jsx
+import { ErrorBanner } from '@hortiview/shared-components';
+
+<ErrorBanner
+  title='Something went wrong'
+  description='An unexpected error occurred. Please try again or contact support.'
+  showBanner={true}
+  isOpen={true}
+  isStandalone={false} // set true for standalone usage
+  primaryActionLabel='Retry'
+  onPrimaryAction={() => alert('Retry clicked')}
+  secondaryActionLabel='Contact Support'
+  onSecondaryAction={() => alert('Support clicked')}
+/>;
+```
+
+**Usage notes:**
+
+- Use `isStandalone` for modal usage. Default style is for inline placement below a header.
+- Both action buttons are optional; omit their labels to hide them.
+
 ### Filter
 
 A filter component, which provides a well designed filter experience. It contains a filter button and a modal for different select inputs.

package/dist/assets/ErrorBanner.css

@@ -0,0 +1 @@
+._bannerPadding_1ka2b_1{width:100%;box-sizing:border-box;background-color:var(--lmnt-theme-secondary-50)}._bottomBorder_1ka2b_7{border-top:1px solid var(--lmnt-theme-secondary-100);border-bottom:1px solid var(--lmnt-theme-secondary-100)}._standaloneBorder_1ka2b_12{border-color:var(--lmnt-theme-secondary-100);border-width:1px;border-style:solid;border-radius:.5rem}

package/dist/assets/Modal.css

@@ -1 +1 @@
-._modal_mu9y6_1 div[class*=lmnt-modal__surface]{max-height:100svh!important;max-width:100svw!important}._modal_mu9y6_1 div:not([class*=mdc-dialog--fullscreen]) div[class*=lmnt-modal__surface]{border-radius:1rem!important}._modal_mu9y6_1 footer{margin-bottom:0!important}._gap_mu9y6_14{gap:4px!important}._title_mu9y6_18{header{display:flex;justify-content:start;padding-left:.5rem!important;>div{width:100%;margin-left:0!important}}}._titleWithoutCloseIcon_mu9y6_31{margin-left:1rem!important}._closeButton_mu9y6_35{color:var(--lmnt-theme-on-surface-inactive)}._closeButton_mu9y6_35:before{display:none!important}._closeButton_mu9y6_35:hover{background-color:var(--lmnt-theme-surface-variant)!important}
+._modal_1yn30_1 div[class*=lmnt-modal__surface]{max-height:100svh!important;max-width:100svw!important}._modal_1yn30_1 div:not([class*=mdc-dialog--fullscreen]) div[class*=lmnt-modal__surface]{border-radius:1rem!important}._modal_1yn30_1 footer{margin-bottom:0!important}._gap_1yn30_14{gap:4px!important}._title_1yn30_18{header{display:flex;justify-content:start;padding-left:.5rem!important;>div{width:100%;margin-left:0!important}}}._titleWithoutCloseIcon_1yn30_31{margin-left:1rem!important}._closeButton_1yn30_35{color:var(--lmnt-theme-on-surface-inactive)}._closeButton_1yn30_35:before{display:none!important}._closeButton_1yn30_35:hover{background-color:var(--lmnt-theme-surface-variant)!important}._errorBanner_1yn30_47{margin:-20px -24px 20px}

package/dist/components/ErrorBanner/ErrorBanner.d.ts

@@ -0,0 +1,25 @@
+export type ErrorBannerProps = {
+    title?: string;
+    description?: string;
+    isOpen?: boolean;
+    primaryActionLabel?: string;
+    onPrimaryAction?: () => void;
+    secondaryActionLabel?: string;
+    onSecondaryAction?: () => void;
+    isStandalone?: boolean;
+};
+/**
+ * Error banner component to display error messages with optional actions.
+ * Designed to be used below a header or as a standalone banner in a modal.
+ *
+ * @param {string} title - Title text displayed in the banner
+ * @param {string} description - Description text displayed below the title
+ * @param {boolean} isOpen - Controls the open/visible state of the banner
+ * @param {string} primaryActionLabel - Label for the primary action button. If not provided, button will not be rendered.
+ * @param {() => void} onPrimaryAction - Handler for the primary action button
+ * @param {string} secondaryActionLabel - Label for the secondary action button. If not provided, button will not be rendered.
+ * @param {() => void} onSecondaryAction - Handler for the secondary action button
+ * @param {boolean} isStandalone - When true, renders the banner with a rounded border instead of a bottom border
+ * @returns {JSX.Element|null} The rendered ErrorBanner component or null if not visible
+ */
+export declare const ErrorBanner: ({ title, description, isOpen, isStandalone, ...props }: ErrorBannerProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/ErrorBanner/ErrorBanner.js

@@ -0,0 +1,70 @@
+import { jsx as r, jsxs as o } from "react/jsx-runtime";
+import { B as c } from "../../index.es-B19PQgzU.js";
+import { G as t } from "../../index.es-Z0aF-7Cn.js";
+import { P as f } from "../../index.es-DgncYOqO.js";
+import { T as u, a as b } from "../../index.es-DUrjyxNI.js";
+import { c as h } from "../../index-Df2FYN-K.js";
+import { useContainerWidth as B } from "../../hooks/useContainerWidth.js";
+import { Iconify as g } from "../Iconify/Iconify.js";
+import '../../assets/ErrorBanner.css';const y = "_bannerPadding_1ka2b_1", _ = "_bottomBorder_1ka2b_7", P = "_standaloneBorder_1ka2b_12", s = {
+  bannerPadding: y,
+  bottomBorder: _,
+  standaloneBorder: P
+}, E = ({
+  title: n,
+  description: a,
+  isOpen: e,
+  isStandalone: i,
+  ...d
+}) => {
+  const { ref: m, isWide: l } = B(), p = h(
+    s.bannerPadding,
+    i ? s.standaloneBorder : s.bottomBorder
+  );
+  return e ? /* @__PURE__ */ r(f, { customPadding: "0.5rem 1rem", className: p, "data-testid": "error-banner", children: /* @__PURE__ */ o(
+    t,
+    {
+      ref: m,
+      fullWidth: !0,
+      direction: l ? "horizontal" : "vertical",
+      secondaryAlign: "center",
+      children: [
+        /* @__PURE__ */ o(t, { fullWidth: !0, primaryAlign: "space-between", secondaryAlign: l ? "center" : "start", children: [
+          /* @__PURE__ */ r(g, { icon: "sentiment-very-dissatisfied", iconSize: "large", variant: "color-primary" }),
+          /* @__PURE__ */ o(t, { direction: "vertical", fullWidth: !0, gap: "none", children: [
+            /* @__PURE__ */ r(u, { bold: !0, level: 2, themeColor: "primary", children: n }),
+            /* @__PURE__ */ r(b, { children: a })
+          ] })
+        ] }),
+        /* @__PURE__ */ r(v, { ...d, isWide: l })
+      ]
+    }
+  ) }) : null;
+}, v = ({
+  primaryActionLabel: n,
+  onPrimaryAction: a,
+  secondaryActionLabel: e,
+  onSecondaryAction: i,
+  isWide: d
+}) => /* @__PURE__ */ o(t, { fullWidth: !d, primaryAlign: "end", secondaryAlign: "center", children: [
+  n && /* @__PURE__ */ r(
+    c,
+    {
+      label: n,
+      onClick: a,
+      "data-testid": "error-banner-primary-action"
+    }
+  ),
+  e && /* @__PURE__ */ r(
+    c,
+    {
+      label: e,
+      variant: "outlined",
+      onClick: i,
+      "data-testid": "error-banner-secondary-action"
+    }
+  )
+] });
+export {
+  E as ErrorBanner
+};