@hortiview/shared-components 2.0.0 → 2.2.0

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

@@ -95,4 +95,8 @@ export type ListElement = Omit<BaseListElement, 'component'> & {
      * a custom class name for the list item
      */
     listItemClassName?: string;
+    /**
+     * data-testid for testing
+     */
+    'data-testid'?: string;
 };

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.2.0",
   "type": "module",
   "repository": "https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared",
   "author": "Falk Menge <falk.menge.ext@bayer.com>",