@hortiview/shared-components 2.0.0 → 2.1.0

package/CHANGELOG.md

@@ -1,3 +1,14 @@
+## [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

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/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/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();
+  });
+});

package/dist/index.es-Dvj_qpAp.js

@@ -0,0 +1,268 @@
+import { c as G, _ as b, P as e } from "./identity-DLWZln-X.js";
+import y, { forwardRef as C, useMemo as f, useRef as T, useImperativeHandle as R, createContext as $, useContext as O } from "react";
+import { d as k } from "./index.es-da0cf7oE.js";
+const x = /* @__PURE__ */ $({}), W = {
+  /**
+   * @deprecated _Use `variant`='airy' instead._
+   *
+   * Applies extra padding to each column.
+   *
+   * Defaults to **undefined**.
+   */
+  airy: k(e.bool, "Grid", 'Use `variant`="airy" instead.'),
+  /**
+   * Accepts GridCol or GridRow.
+   *
+   * Defaults to **null**.
+   */
+  children: e.node.isRequired,
+  /**
+   * The css class name to be passed through to the component markup.
+   *
+   * Defaults to **undefined**.
+   */
+  className: e.string,
+  /**
+   * Sets the column gap for the grid.
+   *
+   * Defaults to **'16px'**.
+   */
+  columnGap: e.oneOfType([e.string, e.number]),
+  /**
+   * Applies 100% height to the grid and direct children rows. Useful when creating a page layout. Be aware all direct children rows will have a 100% height.
+   *
+   * Defaults to **null**.
+   */
+  fullHeight: e.bool,
+  /**
+   * Applies 100% width to the grid and direct children rows. Useful to maintain full width in a flex container.
+   *
+   * Defaults to **null**.
+   */
+  fullWidth: e.bool,
+  /**
+   * Alignment of entire grid: left and right.
+   *
+   * Defaults to **'center'**.
+   */
+  gridAlign: e.oneOf(["center", "left", "right"]),
+  /**
+   * Sets the row gap for the grid.
+   *
+   * Defaults to **'16px'**.
+   */
+  rowGap: e.oneOfType([e.string, e.number]),
+  /**
+   * Styles for the grid.
+   *
+   * Defaults to **undefined**.
+   */
+  style: e.object,
+  /**
+   * If true the grid will have a max width according to your theme's breakpoints.
+   *
+   * Defaults to **false**.
+   */
+  useMaxWidth: e.bool,
+  /**
+   * Select `airy` or `standard` padding.
+   *
+   * Defaults to **'standard'**.
+   */
+  variant: e.oneOf(["standard", "airy", "none"])
+}, H = {
+  airy: void 0,
+  children: null,
+  className: void 0,
+  columnGap: "16px",
+  fullHeight: null,
+  fullWidth: null,
+  gridAlign: "center",
+  rowGap: "16px",
+  style: void 0,
+  useMaxWidth: !1,
+  variant: "standard"
+}, z = {
+  /**
+   * Alignment of cell within the row: top, middle, bottom. If omitted the col will stretch to the height of the row.
+   *
+   * Defaults to **undefined**.
+   */
+  align: e.oneOf(["", "top", "middle", "bottom"]),
+  /**
+   * Content to be rendered inside the GridCol. Accepts any valid markup.
+   *
+   * Defaults to **null**.
+   */
+  children: e.node,
+  /**
+   * The css class name to be passed through to the component markup.
+   *
+   * Defaults to **undefined**.
+   */
+  className: e.string,
+  /**
+   * Specifies the number of columns the cell spans.
+   *
+   * Defaults to **null**.
+   */
+  desktopCol: e.number,
+  /**
+   * Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. Set to any valid `grid-column-start`.
+   *
+   * Defaults to **null**.
+   */
+  gridColStart: e.oneOfType([e.string, e.number]),
+  /**
+   * Horizontal alignment of the cell contents of cell content: top, middle, bottom.
+   *
+   * Defaults to **'left'**.
+   */
+  horizontalAlign: e.oneOf(["left", "center", "right"]),
+  /**
+   * Specifies the order of the cell.
+   *
+   * Defaults to **null**.
+   */
+  order: e.number,
+  /**
+   * Specifies the number of columns the cell spans on a phone.
+   *
+   * Defaults to **null**.
+   */
+  phoneCol: e.number,
+  /**
+   * Specifies the number of columns the cell spans on a tablet.
+   *
+   * Defaults to **null**.
+   */
+  tabletCol: e.number,
+  /**
+   * Vertical alignment of cell content: top, middle, bottom.
+   *
+   * Defaults to **'top'**.
+   */
+  verticalAlign: e.oneOf(["top", "middle", "bottom"])
+}, E = {
+  align: void 0,
+  children: null,
+  className: void 0,
+  desktopCol: null,
+  gridColStart: null,
+  horizontalAlign: "left",
+  order: null,
+  phoneCol: null,
+  tabletCol: null,
+  verticalAlign: "top"
+}, M = {
+  /**
+   * Content to be rendered inside the GridRow. Accepts any valid markup.
+   *
+   * Defaults to **null**.
+   */
+  children: e.node.isRequired,
+  /**
+   * The css class name to be passed through to the component markup.
+   *
+   * Defaults to **undefined**.
+   */
+  className: e.string
+}, S = {
+  children: null,
+  className: void 0
+}, w = /* @__PURE__ */ C((c, u) => {
+  const {
+    airy: t,
+    children: p,
+    className: a,
+    columnGap: r,
+    fullHeight: l,
+    fullWidth: n,
+    gridAlign: i,
+    rowGap: d,
+    style: o,
+    useMaxWidth: m,
+    variant: s,
+    ...h
+  } = c, g = t ? "airy" : s, _ = f(() => ({
+    fullHeight: l,
+    rowGap: d,
+    columnGap: r
+  }), [r, l, d]), N = T();
+  R(u, () => N.current, []);
+  const A = f(() => G("lmnt", "mdc-layout-grid", "lmnt-layout-grid", `mdc-layout-grid mdc-layout-grid--align-${i}`, (g === "airy" || t) && "mdc-grid-cell-wrapper-airy-tablet mdc-grid-cell-wrapper-airy-desktop", s === "none" && "mdc-grid-cell-wrapper-none-tablet mdc-grid-cell-wrapper-none-desktop mdc-grid-cell-wrapper-none-phone ", n && "lmnt-layout-grid--full-width", l && "lmnt-layout-grid--full-height", m && "lmnt-layout-grid--with-max-width", a), [t, a, g, l, n, i, m, s]);
+  return /* @__PURE__ */ y.createElement(x.Provider, {
+    value: _
+  }, /* @__PURE__ */ y.createElement("div", b({
+    ref: N,
+    className: A
+  }, h), p));
+});
+w.displayName = "Grid";
+w.propTypes = W;
+w.defaultProps = H;
+const P = /* @__PURE__ */ C((c, u) => {
+  const {
+    align: t,
+    children: p,
+    className: a,
+    columns: r,
+    desktopCol: l,
+    gridColStart: n,
+    horizontalAlign: i,
+    order: d,
+    phoneCol: o,
+    style: m,
+    tabletCol: s,
+    verticalAlign: h,
+    ...g
+  } = c, _ = f(() => ({
+    ...m,
+    gridColumnStart: n
+  }), [n, m]);
+  return /* @__PURE__ */ y.createElement("div", b({
+    ref: u,
+    style: _,
+    className: G("lmnt", `lmnt-layout-grid__cell--vertical-align-${h}`, `lmnt-layout-grid__cell--horizontal-align-${i}`, "mdc-layout-grid__cell", !r && !o && !s && !l && ["mdc-layout-grid__cell"], d && `mdc-layout-grid__cell--order-${d}`, t && `mdc-layout-grid__cell--align-${t}`, r && [`mdc-layout-grid__cell--span-${r}`], o && [`mdc-layout-grid__cell--span-${o}-phone`], s && [`mdc-layout-grid__cell--span-${s}-tablet`], l && [`mdc-layout-grid__cell--span-${l}-desktop`], "lmnt-layout-grid__cell", a)
+  }, g), p);
+});
+P.displayName = "GridCol";
+P.propTypes = z;
+P.defaultProps = E;
+const v = /* @__PURE__ */ C((c, u) => {
+  const {
+    children: t,
+    className: p,
+    style: a,
+    ...r
+  } = c, {
+    fullHeight: l,
+    rowGap: n,
+    columnGap: i
+  } = O(x), d = f(() => {
+    let o = {
+      rowGap: n,
+      columnGap: i
+    };
+    return l && (o = {
+      ...o,
+      height: "100%"
+    }), {
+      ...a,
+      ...o
+    };
+  }, [a, l, n, i]);
+  return /* @__PURE__ */ y.createElement("div", b({
+    ref: u,
+    className: G("lmnt", "mdc-layout-grid__inner", "lmnt-layout-grid__inner", p),
+    style: d
+  }, r), t);
+});
+v.displayName = "GridRow";
+v.propTypes = M;
+v.defaultProps = S;
+export {
+  w as G,
+  v as a,
+  P as b
+};

package/dist/main.d.ts

@@ -28,6 +28,7 @@ export { StepperHeader } from './components/Stepper/components/StepperHeader';
 export { StepperIndicator } from './components/Stepper/components/StepperIndicator';
 export { Stepper } from './components/Stepper/Stepper';
 export { VerticalDivider } from './components/VerticalDivider/VerticalDivider';
+export { OnboardingBanner } from './components/OnboardingBanner/OnboardingBanner';
 export { FormCheckBox } from './components/FormComponents/FormCheckBox/FormCheckBox';
 export { FormDatePicker } from './components/FormComponents/FormDatePicker/FormDatePicker';
 export { FormNumber } from './components/FormComponents/FormNumber/FormNumber';

package/dist/main.js

@@ -4,15 +4,15 @@ import { BasicHeading as f } from "./components/BasicHeading/BasicHeading.js";
 import { BlockView as a } from "./components/BlockView/BlockView.js";
 import { ChipCard as l } from "./components/ChipCard/ChipCard.js";
 import { ContextMenu as n } from "./components/ContextMenu/ContextMenu.js";
-import { DeleteModal as S } from "./components/DeleteModal/DeleteModal.js";
+import { DeleteModal as d } from "./components/DeleteModal/DeleteModal.js";
 import { DetailContentWrapper as L } from "./components/DetailContentWrapper/DetailContentWrapper.js";
 import { Disclaimer as G } from "./components/Disclaimer/Disclaimer.js";
 import { EmptyView as _ } from "./components/EmptyView/EmptyView.js";
 import { Filter as F } from "./components/Filter/Filter.js";
 import { FormattedNumberDisplay as D } from "./components/FormattedNumberDisplay/FormattedNumberDisplay.js";
 import { GenericTable as g } from "./components/GenericTable/GenericTable.js";
-import { HashTabView as B } from "./components/HashTabView/HashTabView.js";
-import { HeaderFilter as b } from "./components/HeaderFilter/HeaderFilter.js";
+import { HashTabView as b } from "./components/HashTabView/HashTabView.js";
+import { HeaderFilter as T } from "./components/HeaderFilter/HeaderFilter.js";
 import { HealthCheckFailed as U } from "./components/HealthCheckFailed/HealthCheckFailed.js";
 import { Iconify as M } from "./components/Iconify/Iconify.js";
 import { InfoGroup as V } from "./components/InfoGroup/InfoGroup.js";
@@ -28,59 +28,61 @@ import { StepperHeader as or } from "./components/Stepper/components/StepperHead
 import { StepperIndicator as tr } from "./components/Stepper/components/StepperIndicator.js";
 import { Stepper as pr } from "./components/Stepper/Stepper.js";
 import { VerticalDivider as xr } from "./components/VerticalDivider/VerticalDivider.js";
-import { FormCheckBox as ir } from "./components/FormComponents/FormCheckBox/FormCheckBox.js";
-import { FormDatePicker as Ar } from "./components/FormComponents/FormDatePicker/FormDatePicker.js";
-import { FormNumber as cr } from "./components/FormComponents/FormNumber/FormNumber.js";
-import { FormRadio as dr } from "./components/FormComponents/FormRadio/FormRadio.js";
-import { FormSelect as Er } from "./components/FormComponents/FormSelect/FormSelect.js";
-import { FormSlider as sr } from "./components/FormComponents/FormSlider/FormSlider.js";
-import { FormText as Ir } from "./components/FormComponents/FormText/FormText.js";
-import { FormToggle as Nr } from "./components/FormComponents/FormToggle/FormToggle.js";
-import { AvailableCustomIcons as Cr } from "./enums/AvailableCustomIcons.js";
+import { OnboardingBanner as ir } from "./components/OnboardingBanner/OnboardingBanner.js";
+import { FormCheckBox as Ar } from "./components/FormComponents/FormCheckBox/FormCheckBox.js";
+import { FormDatePicker as cr } from "./components/FormComponents/FormDatePicker/FormDatePicker.js";
+import { FormNumber as Sr } from "./components/FormComponents/FormNumber/FormNumber.js";
+import { FormRadio as Er } from "./components/FormComponents/FormRadio/FormRadio.js";
+import { FormSelect as sr } from "./components/FormComponents/FormSelect/FormSelect.js";
+import { FormSlider as Ir } from "./components/FormComponents/FormSlider/FormSlider.js";
+import { FormText as Nr } from "./components/FormComponents/FormText/FormText.js";
+import { FormToggle as Cr } from "./components/FormComponents/FormToggle/FormToggle.js";
+import { AvailableCustomIcons as Br } from "./enums/AvailableCustomIcons.js";
 import { ThemeColor as ur } from "./enums/ThemeColor.js";
-import { u as Tr } from "./useBreakpoints-MzTZ0tCT.js";
-import { capitalizeFirstLetters as Hr, getNumberAsLocaleString as Ur, trimLeadingAndTrailingSpaces as hr } from "./services/UtilService.js";
-import { AVAILABLE_COUNTRY_KEYS as Pr, AVAILABLE_LOCALES as Vr, ENGLISH_LANGUAGE_ID as Rr, GERMAN_LANGUAGE_ID as kr, LANGUAGE_CODES_MAPPER as wr, LANGUAGE_ID_MAPPER as Or, SPANISH_LANGUAGE_ID as vr, TURKISH_LANGUAGE_ID as yr } from "./types/Languages.js";
+import { u as Hr } from "./useBreakpoints-MzTZ0tCT.js";
+import { capitalizeFirstLetters as hr, getNumberAsLocaleString as Mr, trimLeadingAndTrailingSpaces as Pr } from "./services/UtilService.js";
+import { AVAILABLE_COUNTRY_KEYS as Rr, AVAILABLE_LOCALES as kr, ENGLISH_LANGUAGE_ID as wr, GERMAN_LANGUAGE_ID as Or, LANGUAGE_CODES_MAPPER as vr, LANGUAGE_ID_MAPPER as yr, SPANISH_LANGUAGE_ID as Yr, TURKISH_LANGUAGE_ID as Kr } from "./types/Languages.js";
 export {
-  Pr as AVAILABLE_COUNTRY_KEYS,
-  Vr as AVAILABLE_LOCALES,
+  Rr as AVAILABLE_COUNTRY_KEYS,
+  kr as AVAILABLE_LOCALES,
   e as AlertBanner,
-  Cr as AvailableCustomIcons,
+  Br as AvailableCustomIcons,
   m as BaseView,
   f as BasicHeading,
   a as BlockView,
   l as ChipCard,
   n as ContextMenu,
-  S as DeleteModal,
+  d as DeleteModal,
   L as DetailContentWrapper,
   G as Disclaimer,
-  Rr as ENGLISH_LANGUAGE_ID,
+  wr as ENGLISH_LANGUAGE_ID,
   _ as EmptyView,
   F as Filter,
-  ir as FormCheckBox,
-  Ar as FormDatePicker,
-  cr as FormNumber,
-  dr as FormRadio,
-  Er as FormSelect,
-  sr as FormSlider,
-  Ir as FormText,
-  Nr as FormToggle,
+  Ar as FormCheckBox,
+  cr as FormDatePicker,
+  Sr as FormNumber,
+  Er as FormRadio,
+  sr as FormSelect,
+  Ir as FormSlider,
+  Nr as FormText,
+  Cr as FormToggle,
   D as FormattedNumberDisplay,
-  kr as GERMAN_LANGUAGE_ID,
+  Or as GERMAN_LANGUAGE_ID,
   g as GenericTable,
-  B as HashTabView,
-  b as HeaderFilter,
+  b as HashTabView,
+  T as HeaderFilter,
   U as HealthCheckFailed,
   M as Iconify,
   V as InfoGroup,
-  wr as LANGUAGE_CODES_MAPPER,
-  Or as LANGUAGE_ID_MAPPER,
+  vr as LANGUAGE_CODES_MAPPER,
+  yr as LANGUAGE_ID_MAPPER,
   k as ListArea,
   O as LoadingSpinner,
   y as Modal,
   K as ModulePadding,
+  ir as OnboardingBanner,
   W as OverflowTooltip,
-  vr as SPANISH_LANGUAGE_ID,
+  Yr as SPANISH_LANGUAGE_ID,
   j as ScrollbarX,
   q as ScrollbarY,
   Q as SearchBar,
@@ -88,11 +90,11 @@ export {
   pr as Stepper,
   or as StepperHeader,
   tr as StepperIndicator,
-  yr as TURKISH_LANGUAGE_ID,
+  Kr as TURKISH_LANGUAGE_ID,
   ur as ThemeColor,
   xr as VerticalDivider,
-  Hr as capitalizeFirstLetters,
-  Ur as getNumberAsLocaleString,
-  hr as trimLeadingAndTrailingSpaces,
-  Tr as useBreakpoints
+  hr as capitalizeFirstLetters,
+  Mr as getNumberAsLocaleString,
+  Pr as trimLeadingAndTrailingSpaces,
+  Hr as useBreakpoints
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hortiview/shared-components",
   "description": "This is a shared component library. It should used in the HortiView platform and its modules.",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "type": "module",
   "repository": "https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared",
   "author": "Falk Menge <falk.menge.ext@bayer.com>",

package/dist/GenericCard-DuNnB9Ve.js

@@ -1,350 +0,0 @@
-import { jsx as n, jsxs as C, Fragment as B } from "react/jsx-runtime";
-import { C as W, a as z, b as D, c as E, d as M } from "./index.es-6TJ1S8Jr.js";
-import { c as x, _ as P, P as e } from "./identity-DLWZln-X.js";
-import b, { forwardRef as $, useMemo as f, useRef as j, useImperativeHandle as q, createContext as F, useContext as I } from "react";
-import { d as U } from "./index.es-da0cf7oE.js";
-import { d as O } from "./index.es-D54RuMc_.js";
-import { OverflowTooltip as k } from "./components/OverflowTooltip/OverflowTooltip.js";
-import './assets/GenericCard.css';const R = /* @__PURE__ */ F({}), V = {
-  /**
-   * @deprecated _Use `variant`='airy' instead._
-   *
-   * Applies extra padding to each column.
-   *
-   * Defaults to **undefined**.
-   */
-  airy: U(e.bool, "Grid", 'Use `variant`="airy" instead.'),
-  /**
-   * Accepts GridCol or GridRow.
-   *
-   * Defaults to **null**.
-   */
-  children: e.node.isRequired,
-  /**
-   * The css class name to be passed through to the component markup.
-   *
-   * Defaults to **undefined**.
-   */
-  className: e.string,
-  /**
-   * Sets the column gap for the grid.
-   *
-   * Defaults to **'16px'**.
-   */
-  columnGap: e.oneOfType([e.string, e.number]),
-  /**
-   * Applies 100% height to the grid and direct children rows. Useful when creating a page layout. Be aware all direct children rows will have a 100% height.
-   *
-   * Defaults to **null**.
-   */
-  fullHeight: e.bool,
-  /**
-   * Applies 100% width to the grid and direct children rows. Useful to maintain full width in a flex container.
-   *
-   * Defaults to **null**.
-   */
-  fullWidth: e.bool,
-  /**
-   * Alignment of entire grid: left and right.
-   *
-   * Defaults to **'center'**.
-   */
-  gridAlign: e.oneOf(["center", "left", "right"]),
-  /**
-   * Sets the row gap for the grid.
-   *
-   * Defaults to **'16px'**.
-   */
-  rowGap: e.oneOfType([e.string, e.number]),
-  /**
-   * Styles for the grid.
-   *
-   * Defaults to **undefined**.
-   */
-  style: e.object,
-  /**
-   * If true the grid will have a max width according to your theme's breakpoints.
-   *
-   * Defaults to **false**.
-   */
-  useMaxWidth: e.bool,
-  /**
-   * Select `airy` or `standard` padding.
-   *
-   * Defaults to **'standard'**.
-   */
-  variant: e.oneOf(["standard", "airy", "none"])
-}, J = {
-  airy: void 0,
-  children: null,
-  className: void 0,
-  columnGap: "16px",
-  fullHeight: null,
-  fullWidth: null,
-  gridAlign: "center",
-  rowGap: "16px",
-  style: void 0,
-  useMaxWidth: !1,
-  variant: "standard"
-}, K = {
-  /**
-   * Alignment of cell within the row: top, middle, bottom. If omitted the col will stretch to the height of the row.
-   *
-   * Defaults to **undefined**.
-   */
-  align: e.oneOf(["", "top", "middle", "bottom"]),
-  /**
-   * Content to be rendered inside the GridCol. Accepts any valid markup.
-   *
-   * Defaults to **null**.
-   */
-  children: e.node,
-  /**
-   * The css class name to be passed through to the component markup.
-   *
-   * Defaults to **undefined**.
-   */
-  className: e.string,
-  /**
-   * Specifies the number of columns the cell spans.
-   *
-   * Defaults to **null**.
-   */
-  desktopCol: e.number,
-  /**
-   * Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. Set to any valid `grid-column-start`.
-   *
-   * Defaults to **null**.
-   */
-  gridColStart: e.oneOfType([e.string, e.number]),
-  /**
-   * Horizontal alignment of the cell contents of cell content: top, middle, bottom.
-   *
-   * Defaults to **'left'**.
-   */
-  horizontalAlign: e.oneOf(["left", "center", "right"]),
-  /**
-   * Specifies the order of the cell.
-   *
-   * Defaults to **null**.
-   */
-  order: e.number,
-  /**
-   * Specifies the number of columns the cell spans on a phone.
-   *
-   * Defaults to **null**.
-   */
-  phoneCol: e.number,
-  /**
-   * Specifies the number of columns the cell spans on a tablet.
-   *
-   * Defaults to **null**.
-   */
-  tabletCol: e.number,
-  /**
-   * Vertical alignment of cell content: top, middle, bottom.
-   *
-   * Defaults to **'top'**.
-   */
-  verticalAlign: e.oneOf(["top", "middle", "bottom"])
-}, L = {
-  align: void 0,
-  children: null,
-  className: void 0,
-  desktopCol: null,
-  gridColStart: null,
-  horizontalAlign: "left",
-  order: null,
-  phoneCol: null,
-  tabletCol: null,
-  verticalAlign: "top"
-}, Q = {
-  /**
-   * Content to be rendered inside the GridRow. Accepts any valid markup.
-   *
-   * Defaults to **null**.
-   */
-  children: e.node.isRequired,
-  /**
-   * The css class name to be passed through to the component markup.
-   *
-   * Defaults to **undefined**.
-   */
-  className: e.string
-}, X = {
-  children: null,
-  className: void 0
-}, v = /* @__PURE__ */ $((l, t) => {
-  const {
-    airy: a,
-    children: o,
-    className: d,
-    columnGap: i,
-    fullHeight: r,
-    fullWidth: s,
-    gridAlign: u,
-    rowGap: m,
-    style: c,
-    useMaxWidth: g,
-    variant: y,
-    ...w
-  } = l, h = a ? "airy" : y, G = f(() => ({
-    fullHeight: r,
-    rowGap: m,
-    columnGap: i
-  }), [i, r, m]), A = j();
-  q(t, () => A.current, []);
-  const S = f(() => x("lmnt", "mdc-layout-grid", "lmnt-layout-grid", `mdc-layout-grid mdc-layout-grid--align-${u}`, (h === "airy" || a) && "mdc-grid-cell-wrapper-airy-tablet mdc-grid-cell-wrapper-airy-desktop", y === "none" && "mdc-grid-cell-wrapper-none-tablet mdc-grid-cell-wrapper-none-desktop mdc-grid-cell-wrapper-none-phone ", s && "lmnt-layout-grid--full-width", r && "lmnt-layout-grid--full-height", g && "lmnt-layout-grid--with-max-width", d), [a, d, h, r, s, u, g, y]);
-  return /* @__PURE__ */ b.createElement(R.Provider, {
-    value: G
-  }, /* @__PURE__ */ b.createElement("div", P({
-    ref: A,
-    className: S
-  }, w), o));
-});
-v.displayName = "Grid";
-v.propTypes = V;
-v.defaultProps = J;
-const _ = /* @__PURE__ */ $((l, t) => {
-  const {
-    align: a,
-    children: o,
-    className: d,
-    columns: i,
-    desktopCol: r,
-    gridColStart: s,
-    horizontalAlign: u,
-    order: m,
-    phoneCol: c,
-    style: g,
-    tabletCol: y,
-    verticalAlign: w,
-    ...h
-  } = l, G = f(() => ({
-    ...g,
-    gridColumnStart: s
-  }), [s, g]);
-  return /* @__PURE__ */ b.createElement("div", P({
-    ref: t,
-    style: G,
-    className: x("lmnt", `lmnt-layout-grid__cell--vertical-align-${w}`, `lmnt-layout-grid__cell--horizontal-align-${u}`, "mdc-layout-grid__cell", !i && !c && !y && !r && ["mdc-layout-grid__cell"], m && `mdc-layout-grid__cell--order-${m}`, a && `mdc-layout-grid__cell--align-${a}`, i && [`mdc-layout-grid__cell--span-${i}`], c && [`mdc-layout-grid__cell--span-${c}-phone`], y && [`mdc-layout-grid__cell--span-${y}-tablet`], r && [`mdc-layout-grid__cell--span-${r}-desktop`], "lmnt-layout-grid__cell", d)
-  }, h), o);
-});
-_.displayName = "GridCol";
-_.propTypes = K;
-_.defaultProps = L;
-const T = /* @__PURE__ */ $((l, t) => {
-  const {
-    children: a,
-    className: o,
-    style: d,
-    ...i
-  } = l, {
-    fullHeight: r,
-    rowGap: s,
-    columnGap: u
-  } = I(R), m = f(() => {
-    let c = {
-      rowGap: s,
-      columnGap: u
-    };
-    return r && (c = {
-      ...c,
-      height: "100%"
-    }), {
-      ...d,
-      ...c
-    };
-  }, [d, r, s, u]);
-  return /* @__PURE__ */ b.createElement("div", P({
-    ref: t,
-    className: x("lmnt", "mdc-layout-grid__inner", "lmnt-layout-grid__inner", o),
-    style: m
-  }, i), a);
-});
-T.displayName = "GridRow";
-T.propTypes = Q;
-T.defaultProps = X;
-const Y = "_cardTitle_ny9m0_1", Z = "_cardBody_ny9m0_5", ee = "_cardContent_ny9m0_10", te = "_row_ny9m0_14", re = "_font_ny9m0_18", le = "_fontHeader_ny9m0_23", ae = "_title_ny9m0_27", ne = "_emptyContainer_ny9m0_33", oe = "_empty_ny9m0_33", p = {
-  cardTitle: Y,
-  cardBody: Z,
-  cardContent: ee,
-  row: te,
-  font: re,
-  fontHeader: le,
-  title: ae,
-  emptyContainer: ne,
-  empty: oe
-}, H = {
-  desktopCol: 6,
-  phoneCol: 2,
-  tabletCol: 4,
-  verticalAlign: "bottom"
-}, ge = ({ item: l, columns: t, hiddenColumns: a }) => {
-  const o = t.find((r) => r.asCardTitle), d = t.find((r) => r.asCardSubtitle), i = f(
-    () => t.filter(
-      (r) => !r.asCardTitle && !r.asCardSubtitle && r.id !== "actions"
-    ),
-    [t]
-  );
-  return /* @__PURE__ */ n(
-    W,
-    {
-      variant: "raised",
-      "data-testid": `card${o ? "-" + l[o.accessor] : ""}`,
-      children: /* @__PURE__ */ C(z, { className: p.cardContent, "data-testid": "card-content", children: [
-        /* @__PURE__ */ n(ie, { item: l, titleColumn: o, subTitleColumn: d }),
-        /* @__PURE__ */ n(D, { className: p.cardBody, "data-testid": "card-body", children: /* @__PURE__ */ n(v, { fullHeight: !0, fullWidth: !0, variant: "none", children: i.map((r) => a?.includes(r.id) ? null : /* @__PURE__ */ C(T, { className: p.row, "data-testid": "row", children: [
-          /* @__PURE__ */ n(_, { horizontalAlign: "right", ...H, children: /* @__PURE__ */ C(
-            O,
-            {
-              level: 2,
-              themeColor: "text-secondary-on-background",
-              className: `${p.font} ${p.fontHeader}`,
-              tag: "div",
-              children: [
-                r.header,
-                ":"
-              ]
-            }
-          ) }),
-          /* @__PURE__ */ n(_, { horizontalAlign: "left", ...H, children: /* @__PURE__ */ n(N, { column: r, item: l }) })
-        ] }, r.id)) }) })
-      ] })
-    }
-  );
-}, ie = ({ item: l, titleColumn: t, subTitleColumn: a }) => {
-  const o = l.actions;
-  return !t && !a && !o ? null : /* @__PURE__ */ C(B, { children: [
-    /* @__PURE__ */ n(
-      E,
-      {
-        "data-testid": "card-title",
-        className: p.cardTitle,
-        primaryText: t !== void 0 && /* @__PURE__ */ n(N, { column: t, item: l, isTitle: !0 }),
-        secondaryText: a !== void 0 && /* @__PURE__ */ n(N, { column: a, item: l, isTitle: !0 }),
-        trailingBlock: o,
-        trailingBlockType: o ? "title-actions" : void 0
-      }
-    ),
-    /* @__PURE__ */ n(M, {})
-  ] });
-}, N = ({ item: l, column: t, isTitle: a = !1 }) => t.cellTemplate ? t.cellTemplate({ row: { original: l } }) : a ? /* @__PURE__ */ n(
-  k,
-  {
-    id: `tip_${t.id}_${l[t.accessor]}`,
-    text: l[t.accessor],
-    children: /* @__PURE__ */ n("span", { className: p.title, children: l[t.accessor] })
-  }
-) : /* @__PURE__ */ n(
-  k,
-  {
-    id: `tip_${t.id}_${l[t.accessor]}`,
-    text: l[t.accessor],
-    children: /* @__PURE__ */ n(O, { level: 2, themeColor: "text-primary-on-background", className: p.font, children: l[t.accessor] })
-  }
-);
-export {
-  ge as G,
-  p as s
-};