@hortiview/shared-components 1.12.0 → 2.1.0

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+## [2.1.0](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v2.0.0...v2.1.0) (2025-06-11)
+
+### Features
+
+* create OnboardingBanner component ([8cfeadf](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/8cfeadf8dde24b6d888de22533e506805b81c83c))
+* improve component API, update tests and docs ([12e6da4](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/12e6da4a40b66885dc2ccf56c8319e4baab5df4c))
+
+### Code Refactoring
+
+* change index to buttonProps.id ([0c9e4b6](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/0c9e4b661ef71bde4b82540a15d73a2d2e79552c))
+
+## [2.0.0](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v1.12.0...v2.0.0) (2025-06-06)
+
+### ⚠ BREAKING CHANGES
+
+* remove font call from main.ts but keep it for storybook
+
+### Features
+
+* remove font call from main.ts but keep it for storybook ([a5999c7](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/a5999c72ac274c4a23efd06d0e362f427e87f1c0))
+
 ## [1.12.0](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v1.11.0...v1.12.0) (2025-06-02)
 
 ### Features

package/README.md

@@ -51,6 +51,7 @@ Additionally the library provides form components using [react-hook-form](https:
 1. [LoadingSpinner](#loadingspinner)
 1. [Modal](#modal)
 1. [ModulePadding](#modulepadding)
+1. [OnboardingBanner](#onboardingbanner)
 1. [OverflowTooltip](#overflowtooltip)
 1. [ScrollBar](#scrollbar)
 1. [SearchBar](#searchbar)
@@ -887,6 +888,20 @@ import { ModulePadding } from '@hortiview/shared-components';
 </ModulePadding>;
 ```
 
+### OnboardingBanner
+
+A responsive onboarding banner that adapts its layout for desktop and mobile.
+
+- **Desktop:** Media content is displayed to the _right_ of the description  
+- **Mobile:** Media content appears _above_ the description
+
+```jsx
+import {OnboardingBanner} from '@hortiview/shared-components';
+
+<OnboardingBanner headline='Hello' />
+
+```
+
 ### OverflowTooltip
 
 Provides a tooltip and overflow behavior of a given text value.

package/dist/GenericCard-BFYKwkzI.js

@@ -0,0 +1,89 @@
+import { jsx as r, jsxs as d, Fragment as C } from "react/jsx-runtime";
+import { C as h, a as m, b as T, c as g, d as v } from "./index.es-6TJ1S8Jr.js";
+import { G as b, a as x, b as c } from "./index.es-Dvj_qpAp.js";
+import { d as f } from "./index.es-D54RuMc_.js";
+import { useMemo as w } from "react";
+import { OverflowTooltip as l } from "./components/OverflowTooltip/OverflowTooltip.js";
+import './assets/GenericCard.css';const u = "_cardTitle_ny9m0_1", B = "_cardBody_ny9m0_5", N = "_cardContent_ny9m0_10", $ = "_row_ny9m0_14", G = "_font_ny9m0_18", k = "_fontHeader_ny9m0_23", H = "_title_ny9m0_27", S = "_emptyContainer_ny9m0_33", A = "_empty_ny9m0_33", n = {
+  cardTitle: u,
+  cardBody: B,
+  cardContent: N,
+  row: $,
+  font: G,
+  fontHeader: k,
+  title: H,
+  emptyContainer: S,
+  empty: A
+}, _ = {
+  desktopCol: 6,
+  phoneCol: 2,
+  tabletCol: 4,
+  verticalAlign: "bottom"
+}, W = ({ item: e, columns: t, hiddenColumns: o }) => {
+  const i = t.find((a) => a.asCardTitle), y = t.find((a) => a.asCardSubtitle), p = w(
+    () => t.filter(
+      (a) => !a.asCardTitle && !a.asCardSubtitle && a.id !== "actions"
+    ),
+    [t]
+  );
+  return /* @__PURE__ */ r(
+    h,
+    {
+      variant: "raised",
+      "data-testid": `card${i ? "-" + e[i.accessor] : ""}`,
+      children: /* @__PURE__ */ d(m, { className: n.cardContent, "data-testid": "card-content", children: [
+        /* @__PURE__ */ r(j, { item: e, titleColumn: i, subTitleColumn: y }),
+        /* @__PURE__ */ r(T, { className: n.cardBody, "data-testid": "card-body", children: /* @__PURE__ */ r(b, { fullHeight: !0, fullWidth: !0, variant: "none", children: p.map((a) => o?.includes(a.id) ? null : /* @__PURE__ */ d(x, { className: n.row, "data-testid": "row", children: [
+          /* @__PURE__ */ r(c, { horizontalAlign: "right", ..._, children: /* @__PURE__ */ d(
+            f,
+            {
+              level: 2,
+              themeColor: "text-secondary-on-background",
+              className: `${n.font} ${n.fontHeader}`,
+              tag: "div",
+              children: [
+                a.header,
+                ":"
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ r(c, { horizontalAlign: "left", ..._, children: /* @__PURE__ */ r(s, { column: a, item: e }) })
+        ] }, a.id)) }) })
+      ] })
+    }
+  );
+}, j = ({ item: e, titleColumn: t, subTitleColumn: o }) => {
+  const i = e.actions;
+  return !t && !o && !i ? null : /* @__PURE__ */ d(C, { children: [
+    /* @__PURE__ */ r(
+      g,
+      {
+        "data-testid": "card-title",
+        className: n.cardTitle,
+        primaryText: t !== void 0 && /* @__PURE__ */ r(s, { column: t, item: e, isTitle: !0 }),
+        secondaryText: o !== void 0 && /* @__PURE__ */ r(s, { column: o, item: e, isTitle: !0 }),
+        trailingBlock: i,
+        trailingBlockType: i ? "title-actions" : void 0
+      }
+    ),
+    /* @__PURE__ */ r(v, {})
+  ] });
+}, s = ({ item: e, column: t, isTitle: o = !1 }) => t.cellTemplate ? t.cellTemplate({ row: { original: e } }) : o ? /* @__PURE__ */ r(
+  l,
+  {
+    id: `tip_${t.id}_${e[t.accessor]}`,
+    text: e[t.accessor],
+    children: /* @__PURE__ */ r("span", { className: n.title, children: e[t.accessor] })
+  }
+) : /* @__PURE__ */ r(
+  l,
+  {
+    id: `tip_${t.id}_${e[t.accessor]}`,
+    text: e[t.accessor],
+    children: /* @__PURE__ */ r(f, { level: 2, themeColor: "text-primary-on-background", className: n.font, children: e[t.accessor] })
+  }
+);
+export {
+  W as G,
+  n as s
+};

package/dist/assets/OnboardingBanner.css

@@ -0,0 +1 @@
+._elevation_5dfyt_1{background-color:var(--lmnt-theme-primary-50)}

package/dist/components/Filter/Filter.js

@@ -1,11 +1,10 @@
 import { jsx as e, jsxs as b, Fragment as D } from "react/jsx-runtime";
 import { N as F } from "../../index.es-fnFnw2P1.js";
-import { B as h } from "../../index.es-CiqbARoC.js";
+import { B as p } from "../../index.es-CiqbARoC.js";
 import { G as _ } from "../../index.es-DntoATwO.js";
 import { I as W } from "../../index.es-0lQcz8m1.js";
 import { S as j } from "../../index.es-8GOVkuo-.js";
 import { useState as v } from "react";
-import '../../assets/main.css';import '../../assets/Filter.css';/* empty css                  */
 import { Iconify as z } from "../Iconify/Iconify.js";
 import { u as k } from "../../useBreakpoints-MzTZ0tCT.js";
 import "../../react-tooltip.min-DSY6KDqS.js";
@@ -18,12 +17,12 @@ import "react-hook-form";
 import "../../get-DFv1gXfq.js";
 import "../../isArray-Dub1wGJM.js";
 import "../../isString-BW9UHONv.js";
-const K = "_filterButton_qtl7a_1", T = "_relativeParent_qtl7a_6", V = "_filterBadge_qtl7a_10", E = "_dense_qtl7a_17", u = {
+import '../../assets/Filter.css';const K = "_filterButton_qtl7a_1", T = "_relativeParent_qtl7a_6", V = "_filterBadge_qtl7a_10", E = "_dense_qtl7a_17", u = {
   filterButton: K,
   relativeParent: T,
   filterBadge: V,
   dense: E
-}, ct = ({
+}, mt = ({
   clearFilterText: m,
   closeCallback: s,
   currentFilter: i,
@@ -32,7 +31,7 @@ const K = "_filterButton_qtl7a_1", T = "_relativeParent_qtl7a_6", V = "_filterBa
   filterModalTitle: t,
   filters: f,
   modalCancelButtonText: g,
-  modalConfirmButtonText: p,
+  modalConfirmButtonText: h,
   useModal: o = !0,
   selectAllLabel: r,
   "data-testid": w
@@ -68,9 +67,9 @@ const K = "_filterButton_qtl7a_1", T = "_relativeParent_qtl7a_6", V = "_filterBa
         onClose: x,
         title: t,
         modalSize: A ? "small" : "fullscreen",
-        headerActions: /* @__PURE__ */ e(h, { "data-testid": "filter-clear-button", variant: "text", onClick: O, children: m }),
+        headerActions: /* @__PURE__ */ e(p, { "data-testid": "filter-clear-button", variant: "text", onClick: O, children: m }),
         dismissiveButton: /* @__PURE__ */ e(
-          h,
+          p,
           {
             "data-testid": "filter-cancel-button",
             variant: "outlined",
@@ -78,13 +77,13 @@ const K = "_filterButton_qtl7a_1", T = "_relativeParent_qtl7a_6", V = "_filterBa
             children: g
           }
         ),
-        primaryButton: /* @__PURE__ */ e(h, { "data-testid": "filter-confirm-button", variant: "filled", onClick: x, children: p }),
+        primaryButton: /* @__PURE__ */ e(p, { "data-testid": "filter-confirm-button", variant: "filled", onClick: x, children: h }),
         children: /* @__PURE__ */ e(_, { direction: "vertical", "data-testid": "filter-map-filters", children: N(f, c, S, r) })
       }
     )
   ] }) : /* @__PURE__ */ e(_, { secondaryAlign: "center", fullWidth: !0, children: N(f, c, S, r, !1) });
-}, N = (m, s, i, d, a = !0) => m.map(({ id: t, title: f, availableOptions: g, icon: p, type: o }) => /* @__PURE__ */ b(_, { fullWidth: !0, secondaryAlign: "center", "data-testid": `filter-${o}-group-${t}`, children: [
-  p ? /* @__PURE__ */ e(z, { icon: p, iconSize: "medium" }) : null,
+}, N = (m, s, i, d, a = !0) => m.map(({ id: t, title: f, availableOptions: g, icon: h, type: o }) => /* @__PURE__ */ b(_, { fullWidth: !0, secondaryAlign: "center", "data-testid": `filter-${o}-group-${t}`, children: [
+  h ? /* @__PURE__ */ e(z, { icon: h, iconSize: "medium" }) : null,
   o === "select" && /* @__PURE__ */ e(
     I,
     {
@@ -158,7 +157,7 @@ const K = "_filterButton_qtl7a_1", T = "_relativeParent_qtl7a_6", V = "_filterBa
       style: { height: "100%", width: t ? void 0 : "100%" },
       children: [
         /* @__PURE__ */ e(
-          h,
+          p,
           {
             "data-testid": "filter-button",
             variant: "outlined",
@@ -184,5 +183,5 @@ const K = "_filterButton_qtl7a_1", T = "_relativeParent_qtl7a_6", V = "_filterBa
   );
 };
 export {
-  ct as Filter
+  mt as Filter
 };

package/dist/components/GenericTable/GenericTable.js

@@ -21,7 +21,6 @@ import { b as vo, c as lo, d as yi, f as wl, g as Rl } from "../../tslib.es6-BDC
 import { M as bi, a as wi } from "../../component-neHBNHRu.js";
 import { c as Ga } from "../../component-DsB0poTj.js";
 import { a as Cl } from "../../util-DA21pZXj.js";
-import '../../assets/main.css';import '../../assets/GenericTable.css';/* empty css                  */
 import "../../isEmpty-B4GG2s-V.js";
 import { u as Sl } from "../../useBreakpoints-MzTZ0tCT.js";
 import "../../react-tooltip.min-DSY6KDqS.js";
@@ -32,7 +31,7 @@ import "../../isArray-Dub1wGJM.js";
 import "../../isString-BW9UHONv.js";
 import { useGenerateColumns as El, useGenerateTableData as xl } from "./GenericTableService.js";
 import { GenericCardList as Pl } from "./Mobile/GenericCardList.js";
-function Il(r, o) {
+import '../../assets/GenericTable.css';function Il(r, o) {
   r.prototype = Object.create(o.prototype), r.prototype.constructor = r, ml(r, o);
 }
 /**
@@ -10433,7 +10432,7 @@ const bd = "_topBar_1tmb3_1", wd = "_filterBar_1tmb3_5", Rd = "_start_1tmb3_10",
   elevation: Sd,
   table: Ed,
   noBorder: xd
-}, ic = ({
+}, ac = ({
   data: r = [],
   hiddenColumns: o = [],
   order: e = [],
@@ -10545,5 +10544,5 @@ const bd = "_topBar_1tmb3_1", wd = "_filterBar_1tmb3_5", Rd = "_start_1tmb3_10",
   ) });
 };
 export {
-  ic as GenericTable
+  ac as GenericTable
 };

package/dist/components/GenericTable/Mobile/GenericCard.js

@@ -1,9 +1,10 @@
 import "react/jsx-runtime";
 import "../../../index.es-6TJ1S8Jr.js";
-import { G as a } from "../../../GenericCard-DuNnB9Ve.js";
+import "../../../index.es-Dvj_qpAp.js";
 import "../../../index.es-D54RuMc_.js";
 import "react";
 import "../../OverflowTooltip/OverflowTooltip.js";
+import { G } from "../../../GenericCard-BFYKwkzI.js";
 export {
-  a as GenericCard
+  G as GenericCard
 };

package/dist/components/GenericTable/Mobile/GenericCard.test.js

@@ -1,6 +1,6 @@
 import { jsx as n } from "react/jsx-runtime";
 import { a as c, s as o } from "../../../react.esm-CX1WJ2Pp.js";
-import { G as i } from "../../../GenericCard-DuNnB9Ve.js";
+import { G as i } from "../../../GenericCard-BFYKwkzI.js";
 import { d as m, t as s, g as e } from "../../../vi.CjhMlMwf-CKxPQtd6.js";
 m("GenericCard", () => {
   const d = {

package/dist/components/GenericTable/Mobile/GenericCardList.js

@@ -2,7 +2,7 @@ import { jsx as r } from "react/jsx-runtime";
 import { G as c } from "../../../index.es-DntoATwO.js";
 import { P as l } from "../../../index.es-D-CKRzIB.js";
 import { a as o } from "../../../index.es-D54RuMc_.js";
-import { s as i, G as m } from "../../../GenericCard-DuNnB9Ve.js";
+import { s as i, G as m } from "../../../GenericCard-BFYKwkzI.js";
 const u = ({
   columns: n,
   data: e,

package/dist/components/ModulePadding/ModulePadding.js

@@ -1,9 +1,8 @@
 import { jsx as i } from "react/jsx-runtime";
 import { P as r } from "../../index.es-D-CKRzIB.js";
-import '../../assets/main.css';/* empty css                  */
 import "react";
 import "../../isEmpty-B4GG2s-V.js";
-import { u as m } from "../../useBreakpoints-MzTZ0tCT.js";
+import { u as d } from "../../useBreakpoints-MzTZ0tCT.js";
 import "../../react-tooltip.min-DSY6KDqS.js";
 import "../../orderBy-Bd48bw88.js";
 import "../../uniqueId-NU3-C36A.js";
@@ -11,8 +10,8 @@ import "react-hook-form";
 import "../../get-DFv1gXfq.js";
 import "../../isArray-Dub1wGJM.js";
 import "../../isString-BW9UHONv.js";
-const x = ({ children: o }) => {
-  const { isDesktop: t } = m();
+const k = ({ children: o }) => {
+  const { isDesktop: t } = d();
   return /* @__PURE__ */ i(
     r,
     {
@@ -24,5 +23,5 @@ const x = ({ children: o }) => {
   );
 };
 export {
-  x as ModulePadding
+  k as ModulePadding
 };

package/dist/components/OnboardingBanner/OnboardingBanner.d.ts

@@ -0,0 +1,30 @@
+import { ButtonProps } from '@element-public/react-button';
+
+type OnboardingBannerProps = {
+    headline: string;
+    description: string;
+    mediaContent?: React.ReactNode;
+    isVisible: boolean;
+    onClose: () => void;
+    buttons?: (ButtonProps & {
+        id: string;
+    })[];
+};
+/**
+ * A responsive onboarding banner that displays a headline, description, optional media content,
+ * and, if provided, one or more action buttons.
+ *
+ * @remarks
+ * On desktop, the mediaContent is shown to the right of the description;
+ * on mobile, it appears above the description.
+ *
+ * @param headline - The headline of the Onboarding Banner
+ * @param description - The description of the Onboarding Banner
+ * @param mediaContent  -  Optional React node (e.g. video or image) shown on the side
+ * @param isVisible - Whether the banner should be rendered
+ * @param onClose - Fired when the close icon is clicked
+ * @param buttons - An array of ButtonProps to render as action buttons below the description.
+ * @returns
+ */
+export declare const OnboardingBanner: ({ headline, description, mediaContent, isVisible, onClose, buttons, }: OnboardingBannerProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/OnboardingBanner/OnboardingBanner.js

@@ -0,0 +1,89 @@
+import { jsx as o, jsxs as r } from "react/jsx-runtime";
+import { G as a } from "../../index.es-DntoATwO.js";
+import { I as m } from "../../index.es-0lQcz8m1.js";
+import { B as b } from "../../index.es-CiqbARoC.js";
+import { b as h, T as u } from "../../index.es-D54RuMc_.js";
+import { E as g } from "../../index.es-h2lMdt7G.js";
+import { G as f, a as v, b as i } from "../../index.es-Dvj_qpAp.js";
+import { I as y } from "../../index.es-3043KTnb.js";
+import { u as C } from "../../useBreakpoints-MzTZ0tCT.js";
+import '../../assets/OnboardingBanner.css';const G = "_elevation_5dfyt_1", k = {
+  elevation: G
+}, D = ({
+  headline: l,
+  description: s,
+  mediaContent: n,
+  isVisible: c,
+  onClose: p,
+  buttons: e
+}) => {
+  const { isDesktop: d } = C();
+  return c ? /* @__PURE__ */ o(
+    g,
+    {
+      "data-testid": "onboarding-banner",
+      elevation: 3,
+      customPadding: "1rem 1.5rem",
+      rounded: !0,
+      className: k.elevation,
+      children: /* @__PURE__ */ o(f, { variant: "none", rowGap: "8px", columnGap: "8px", children: /* @__PURE__ */ r(v, { "data-testid": "onboarding-banner-content", children: [
+        /* @__PURE__ */ o(i, { desktopCol: 12, phoneCol: 4, tabletCol: 8, children: /* @__PURE__ */ r(
+          a,
+          {
+            "data-testid": "onboarding-banner-header-content",
+            primaryAlign: "space-between",
+            secondaryAlign: "center",
+            fullWidth: !0,
+            children: [
+              /* @__PURE__ */ o(h, { level: 6, children: l }),
+              /* @__PURE__ */ o(
+                m,
+                {
+                  "data-testid": "onboarding-banner-close-button",
+                  type: "button",
+                  onClick: p,
+                  icon: /* @__PURE__ */ o(y, { icon: "clear" })
+                }
+              )
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ o(
+          i,
+          {
+            desktopCol: n ? 10 : 12,
+            phoneCol: 4,
+            tabletCol: 8,
+            order: d ? 2 : 3,
+            children: /* @__PURE__ */ r(a, { direction: "vertical", gap: "dense", children: [
+              /* @__PURE__ */ o(u, { bold: !0, level: 2, children: s }),
+              e && e.length > 0 && /* @__PURE__ */ o(a, { "data-testid": "onboarding-banner-buttons", direction: "horizontal", children: e?.map((t) => /* @__PURE__ */ o(
+                b,
+                {
+                  "data-testid": `onboarding-banner-button-${t.id}`,
+                  ...t
+                },
+                t.id
+              )) })
+            ] })
+          }
+        ),
+        n && /* @__PURE__ */ o(
+          i,
+          {
+            horizontalAlign: "center",
+            "data-testid": "onboarding-banner-media-content",
+            desktopCol: 2,
+            phoneCol: 4,
+            tabletCol: 8,
+            order: d ? 3 : 2,
+            children: n
+          }
+        )
+      ] }) })
+    }
+  ) : null;
+};
+export {
+  D as OnboardingBanner
+};

package/dist/components/OnboardingBanner/OnboardingBanner.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/OnboardingBanner/OnboardingBanner.test.js

@@ -0,0 +1,72 @@
+import { jsx as n, Fragment as a } from "react/jsx-runtime";
+import { a as o, s as e } from "../../react.esm-CX1WJ2Pp.js";
+import { OnboardingBanner as s } from "./OnboardingBanner.js";
+import { d, t as i, a as r, g as t } from "../../vi.CjhMlMwf-CKxPQtd6.js";
+d("Onboarding Banner Test", () => {
+  i("render OnboardingBanner with headline & description text", () => {
+    o(
+      /* @__PURE__ */ n(
+        s,
+        {
+          headline: "test",
+          description: "test description",
+          isVisible: !0,
+          onClose: r.fn()
+        }
+      )
+    ), t(e.getByText("test")).toBeInTheDocument(), t(e.getByText("test description")).toBeInTheDocument();
+  }), i("render OnboardingBanner with media content", () => {
+    o(
+      /* @__PURE__ */ n(
+        s,
+        {
+          headline: "test",
+          description: "test description",
+          mediaContent: /* @__PURE__ */ n(a, { children: "Element" }),
+          isVisible: !0,
+          onClose: r.fn()
+        }
+      )
+    ), t(e.getByText("Element")).toBeInTheDocument();
+  }), i("render OnboardingBanner with buttons", () => {
+    o(
+      /* @__PURE__ */ n(
+        s,
+        {
+          headline: "test",
+          description: "test description",
+          isVisible: !0,
+          onClose: r.fn(),
+          buttons: [{ label: "button-1" }, { label: "button-2" }]
+        }
+      )
+    ), t(e.getByText("button-1")).toBeInTheDocument(), t(e.getByText("button-2")).toBeInTheDocument(), t(e.queryByText("button-3")).not.toBeInTheDocument();
+  }), i("calls onClose when close button is clicked", () => {
+    const l = r.fn();
+    o(
+      /* @__PURE__ */ n(
+        s,
+        {
+          headline: "test",
+          description: "test description",
+          isVisible: !0,
+          onClose: l,
+          buttons: [{ label: "button-1" }, { label: "button2" }]
+        }
+      )
+    ), e.getByTestId("onboarding-banner-close-button").click(), t(l).toHaveBeenCalledTimes(1);
+  }), i("renders nothing when isVisibility is false", () => {
+    o(
+      /* @__PURE__ */ n(
+        s,
+        {
+          headline: "test",
+          description: "test description",
+          isVisible: !1,
+          onClose: r.fn(),
+          buttons: [{ label: "button-1" }, { label: "button-2" }]
+        }
+      )
+    ), t(e.queryByText("test")).not.toBeInTheDocument();
+  });
+});