@hortiview/shared-components 2.8.1 → 2.8.2

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## [2.8.2](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v2.8.1...v2.8.2) (2025-11-07)
+
+### Code Refactoring
+
+* add new icon to healthCheck component + the possibility to render it fullHeight ([a129906](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/a129906860901343ced5af2260ad76ee437c0c35))
+* rename HealthCheckFailed to InfoCard ([656283b](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/656283b3ad71fd0214f41d038e7daa342a0d3181))
+* rename story file ([9809bcb](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/9809bcbc58f26ea19aed1baa909b8d284d010ac3))
+
 ## [2.8.1](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v2.8.0...v2.8.1) (2025-10-28)
 
 ### Code Refactoring

package/README.md

@@ -44,7 +44,7 @@ Additionally the library provides form components using [react-hook-form](https:
 1. [GenericTable](#generictable)
 1. [HashTabView](#hashtabview)
 1. [HeaderFilter](#headerfilter)
-1. [HealthCheckFailed](#healthcheckfailed)
+1. [InfoCard](#infocard)
 1. [InfoGroup](#infogroup)
 1. [Iconify](#iconify)
 1. [ListArea](#listarea)
@@ -647,16 +647,18 @@ const [filterValue, setFilterValue] = useState<string>();
 />
 ```
 
-### HealthCheckFailed
+### InfoCard
 
-A screen that shows a health check failed message. It can be used if the check for database health, iot health or HV platform health fails. Please use the following `title` and `subtitle` for each type to ensure a consistent user experience:
+A screen that can be used to inform the user about the status of a process. It can be used if the check for database health, iot health or HV platform health fails. Please use the following `title` and `subtitle` for each type to ensure a consistent user experience.
+
+Note: These specific titles have been included in the default components.
 
 ```jsx
-import { HealthCheckFailed } from '@hortiview/shared-components';
+import { InfoCard } from '@hortiview/shared-components';
 
 if (isPlatformHealthy === false) {
   return (
-    <HealthCheckFailed
+    <InfoCard
       title='The platform data used by this module cannot be retrieved currently.'
       subtitle='Please wait or come back later.'
       type='platform'
@@ -666,7 +668,7 @@ if (isPlatformHealthy === false) {
 
 if (isDbHealthy === false) {
   return (
-    <HealthCheckFailed
+    <InfoCard
       title='The data for this module is loading!'
       subtitle='Please wait or come back later.'
       type='database'
@@ -676,7 +678,7 @@ if (isDbHealthy === false) {
 
 if (isIotServiceHealthy === false) {
   return (
-    <HealthCheckFailed
+    <InfoCard
       title='The data of your devices cannot be retrieved currently.'
       subtitle='The problem is being addressed by our technical team. Please come back later.'
       type='iot'
@@ -689,7 +691,7 @@ Set the type to `other` to catch generic errors. Again, please use the `title` a
 
 ```jsx
 <ParentWithVisibleBorders>
-  <HealthCheckFailed
+  <InfoCard
     title='Sorry, something went wrong!'
     subtitle='The problem is being addressed by our technical team. Please come back later.'
     type='other'
@@ -701,7 +703,7 @@ You can also control if the card is outlined or not, depending on the position i
 
 ```jsx
 <ParentWithVisibleBorders>
-  <HealthCheckFailed
+  <InfoCard
     title='Sorry, something went wrong!'
     subtitle='The problem is being addressed by our technical team. Please come back later.'
     type='other'
@@ -712,7 +714,7 @@ You can also control if the card is outlined or not, depending on the position i
 
 ### InfoGroup
 
-Renders a section with several informations rendered next to each other (or below for mobile view)
+Renders a section with several information rendered next to each other (or below for mobile view)
 
 ```jsx
 import { InfoGroup } from '@hortiview/shared-components';

package/dist/assets/InfoCard.css

@@ -0,0 +1 @@
+._database_1lcgt_1{color:var(--lmnt-theme-secondary);animation:_spin_1lcgt_1 4s linear infinite}@keyframes _spin_1lcgt_1{0%{transform:rotate(0)}to{transform:rotate(-360deg)}}._done_1lcgt_16{color:var(--lmnt-theme-success)}._iot_1lcgt_20,._platform_1lcgt_21,._other_1lcgt_22{color:var(--lmnt-theme-danger)}._crossedOut_1lcgt_26{position:relative;display:inline-block}._crossedOut_1lcgt_26:after{content:"";position:absolute;width:3rem;height:.25rem;left:50%;top:50%;background:var(--lmnt-theme-danger-on-surface);box-shadow:0 0 0 .125rem var(--lmnt-theme-background);transform:translate(-50%,calc(-50% - .25rem)) rotate(45deg);transform-origin:center;z-index:2}._fullHeight_1lcgt_45{height:100%}

package/dist/components/{HealthCheckFailed/HealthCheckFailed.d.ts → InfoCard/InfoCard.d.ts}

@@ -1,4 +1,4 @@
-export type HealthCheckFailedProps = {
+export type InfoCardProps = {
     /**
      * Please check the shared components README for the correct title for each type.
      * Font size: 16px, font weight: 700
@@ -12,10 +12,14 @@ export type HealthCheckFailedProps = {
     /**
      * Type of the failed health check. Depending on the type, a different icon of 3rem size will be displayed.
      */
-    type: 'database' | 'iot' | 'platform' | 'other';
+    type: 'database' | 'iot' | 'platform' | 'done' | 'other';
     /**
      * The card has a default outline. For design consistency, this prop should only be set to 'false' if the card is embedded, e.g. in a table.
      */
     isOutlined?: boolean;
+    /**
+     * If true, the card will take the full height of its container.
+     */
+    isFullHeight?: boolean;
 };
-export declare const HealthCheckFailed: ({ title, subtitle, type, isOutlined, }: HealthCheckFailedProps) => import("react/jsx-runtime").JSX.Element;
+export declare const InfoCard: ({ title, subtitle, type, isOutlined, isFullHeight, }: InfoCardProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/InfoCard/InfoCard.js

@@ -0,0 +1,57 @@
+import { jsx as t, jsxs as i } from "react/jsx-runtime";
+import { C as d, a as h, b as _ } from "../../index.es-CDMu_yu0.js";
+import { G as m } from "../../index.es-Dw1eih7R.js";
+import { P as g } from "../../index.es-DFFyENnI.js";
+import { T as s } from "../../index.es-1zrFd4Te.js";
+import { Iconify as f } from "../Iconify/Iconify.js";
+import '../../assets/InfoCard.css';const u = "_database_1lcgt_1", p = "_spin_1lcgt_1", C = "_done_1lcgt_16", y = "_iot_1lcgt_20", b = "_platform_1lcgt_21", H = "_other_1lcgt_22", N = "_crossedOut_1lcgt_26", k = "_fullHeight_1lcgt_45", n = {
+  database: u,
+  spin: p,
+  done: C,
+  iot: y,
+  platform: b,
+  other: H,
+  crossedOut: N,
+  fullHeight: k
+}, G = ({
+  title: e,
+  subtitle: c,
+  type: a,
+  isOutlined: l = !0,
+  isFullHeight: r = !1
+}) => {
+  const o = r ? n.fullHeight : "";
+  return /* @__PURE__ */ t(
+    d,
+    {
+      variant: l ? "outlined" : "flat",
+      "data-testid": `${a}-health-check-failed-card`,
+      bodyAlignment: "centered",
+      height: r ? "100%" : "auto",
+      children: /* @__PURE__ */ t(h, { className: o, children: /* @__PURE__ */ t(g, { variant: "airy", className: o, children: /* @__PURE__ */ t(_, { className: o, children: /* @__PURE__ */ i(
+        m,
+        {
+          gap: "none",
+          primaryAlign: "center",
+          secondaryAlign: "center",
+          direction: "vertical",
+          fullWidth: !0,
+          children: [
+            /* @__PURE__ */ t(x, { type: a }),
+            /* @__PURE__ */ t(s, { level: 1, bold: !0, children: e }),
+            /* @__PURE__ */ t(s, { level: 2, themeColor: "text-secondary-on-background", children: c })
+          ]
+        }
+      ) }) }) })
+    }
+  );
+}, v = {
+  database: "sync",
+  iot: "settings_input_antenna",
+  platform: "engineering",
+  done: "sunny-check",
+  other: "error"
+}, x = ({ type: e }) => /* @__PURE__ */ t("span", { className: e === "iot" ? n.crossedOut : "", children: /* @__PURE__ */ t(f, { icon: v[e], className: n[e], iconSize: "xlarge" }) });
+export {
+  G as InfoCard
+};

package/dist/components/{HealthCheckFailed/HealthCheckFailed.test.js → InfoCard/InfoCard.test.js}

@@ -1,25 +1,25 @@
 import { jsx as a } from "react/jsx-runtime";
-import { a as s, s as e } from "../../react.esm-CX1WJ2Pp.js";
-import { HealthCheckFailed as r } from "./HealthCheckFailed.js";
+import { a as r, s as e } from "../../react.esm-CX1WJ2Pp.js";
+import { InfoCard as s } from "./InfoCard.js";
 import { d as h, t as i, g as t } from "../../vi.CjhMlMwf-CKxPQtd6.js";
 h("HealthCheckFailed Component", () => {
-  const c = "Test Title", n = "Test Subtitle";
+  const n = "Test Title", c = "Test Subtitle";
   i("displays the correct title and subtitle", () => {
-    s(/* @__PURE__ */ a(r, { title: c, subtitle: n, type: "database" })), t(e.getByText(c)).toBeInTheDocument(), t(e.getByText(n)).toBeInTheDocument();
+    r(/* @__PURE__ */ a(s, { title: n, subtitle: c, type: "database" })), t(e.getByText(n)).toBeInTheDocument(), t(e.getByText(c)).toBeInTheDocument();
   }), i('displays the correct icon for type "database"', () => {
-    s(/* @__PURE__ */ a(r, { title: c, subtitle: n, type: "database" }));
+    r(/* @__PURE__ */ a(s, { title: n, subtitle: c, type: "database" }));
     const o = e.getByText("sync");
     t(o).toBeInTheDocument(), t(e.getByTestId("database-health-check-failed-card")).toBeInTheDocument();
   }), i('displays the correct icon for type "iot"', () => {
-    s(/* @__PURE__ */ a(r, { title: c, subtitle: n, type: "iot" }));
+    r(/* @__PURE__ */ a(s, { title: n, subtitle: c, type: "iot" }));
     const o = e.getByText("settings_input_antenna");
     t(o).toBeInTheDocument(), t(e.getByTestId("iot-health-check-failed-card")).toBeInTheDocument();
   }), i('displays the correct icon for type "platform"', () => {
-    s(/* @__PURE__ */ a(r, { title: c, subtitle: n, type: "platform" }));
+    r(/* @__PURE__ */ a(s, { title: n, subtitle: c, type: "platform" }));
     const o = e.getByText("engineering");
     t(o).toBeInTheDocument(), t(e.getByTestId("platform-health-check-failed-card")).toBeInTheDocument();
   }), i('displays the correct icon for type "other"', () => {
-    s(/* @__PURE__ */ a(r, { title: c, subtitle: n, type: "other" }));
+    r(/* @__PURE__ */ a(s, { title: n, subtitle: c, type: "other" }));
     const o = e.getByText("error");
     t(o).toBeInTheDocument(), t(e.getByTestId("other-health-check-failed-card")).toBeInTheDocument();
   });

package/dist/main.d.ts

@@ -14,8 +14,8 @@ export { FormattedNumberDisplay } from './components/FormattedNumberDisplay/Form
 export { GenericTable } from './components/GenericTable/GenericTable';
 export { HashTabView } from './components/HashTabView/HashTabView';
 export { HeaderFilter } from './components/HeaderFilter/HeaderFilter';
-export { HealthCheckFailed } from './components/HealthCheckFailed/HealthCheckFailed';
 export { Iconify } from './components/Iconify/Iconify';
+export { InfoCard } from './components/InfoCard/InfoCard';
 export { InfoGroup } from './components/InfoGroup/InfoGroup';
 export { ListArea } from './components/ListArea/ListArea';
 export { LoadingSpinner } from './components/LoadingSpinner/Default/LoadingSpinner';
@@ -47,7 +47,7 @@ export { capitalizeFirstLetters, getFormattedDateTime, getNumberAsLocaleString,
 export type { ActionProps } from './components/ContextMenu/ContextMenu';
 export type { FormSelectOption, FormSelectProps, } from './components/FormComponents/FormSelect/FormSelect';
 export type { FormTextProps } from './components/FormComponents/FormText/FormText';
-export type { HealthCheckFailedProps } from './components/HealthCheckFailed/HealthCheckFailed';
+export type { InfoCardProps } from './components/InfoCard/InfoCard';
 export type { FieldItem } from './components/InfoGroup/InfoGroup';
 export type { LoadingSpinnerProps } from './components/LoadingSpinner/Default/LoadingSpinner';
 export type { Step, StepperBaseProps, StepperButtonProps, StepperProps, } from './components/Stepper/stepperTypes';

package/dist/main.js

@@ -5,19 +5,19 @@ import { BasicHeading as a } from "./components/BasicHeading/BasicHeading.js";
 import { BlockView as A } from "./components/BlockView/BlockView.js";
 import { ChipCard as n } from "./components/ChipCard/ChipCard.js";
 import { ContextMenu as E } from "./components/ContextMenu/ContextMenu.js";
-import { DeleteModal as c } from "./components/DeleteModal/DeleteModal.js";
-import { DetailContentWrapper as _ } from "./components/DetailContentWrapper/DetailContentWrapper.js";
-import { Disclaimer as s } from "./components/Disclaimer/Disclaimer.js";
-import { EmptyView as G } from "./components/EmptyView/EmptyView.js";
+import { DeleteModal as L } from "./components/DeleteModal/DeleteModal.js";
+import { DetailContentWrapper as c } from "./components/DetailContentWrapper/DetailContentWrapper.js";
+import { Disclaimer as F } from "./components/Disclaimer/Disclaimer.js";
+import { EmptyView as T } from "./components/EmptyView/EmptyView.js";
 import { Filter as D } from "./components/Filter/Filter.js";
 import { FormattedNumberDisplay as M } from "./components/FormattedNumberDisplay/FormattedNumberDisplay.js";
 import { GenericTable as B } from "./components/GenericTable/GenericTable.js";
 import { HashTabView as O } from "./components/HashTabView/HashTabView.js";
 import { HeaderFilter as u } from "./components/HeaderFilter/HeaderFilter.js";
-import { HealthCheckFailed as H } from "./components/HealthCheckFailed/HealthCheckFailed.js";
-import { Iconify as V } from "./components/Iconify/Iconify.js";
-import { InfoGroup as P } from "./components/InfoGroup/InfoGroup.js";
-import { ListArea as w } from "./components/ListArea/ListArea.js";
+import { Iconify as U } from "./components/Iconify/Iconify.js";
+import { InfoCard as H } from "./components/InfoCard/InfoCard.js";
+import { InfoGroup as w } from "./components/InfoGroup/InfoGroup.js";
+import { ListArea as k } from "./components/ListArea/ListArea.js";
 import { LoadingSpinner as y } from "./components/LoadingSpinner/Default/LoadingSpinner.js";
 import { Modal as K } from "./components/Modal/Modal.js";
 import { ModulePadding as W } from "./components/ModulePadding/ModulePadding.js";
@@ -32,18 +32,18 @@ import { StepperIndicator as ir } from "./components/Stepper/components/StepperI
 import { Stepper as lr } from "./components/Stepper/Stepper.js";
 import { VerticalDivider as dr } from "./components/VerticalDivider/VerticalDivider.js";
 import { FormCheckBox as Sr } from "./components/FormComponents/FormCheckBox/FormCheckBox.js";
-import { FormDatePicker as Lr } from "./components/FormComponents/FormDatePicker/FormDatePicker.js";
-import { FormNumber as Fr } from "./components/FormComponents/FormNumber/FormNumber.js";
-import { FormRadio as Tr } from "./components/FormComponents/FormRadio/FormRadio.js";
-import { FormSelect as Ir } from "./components/FormComponents/FormSelect/FormSelect.js";
+import { FormDatePicker as _r } from "./components/FormComponents/FormDatePicker/FormDatePicker.js";
+import { FormNumber as sr } from "./components/FormComponents/FormNumber/FormNumber.js";
+import { FormRadio as Ir } from "./components/FormComponents/FormRadio/FormRadio.js";
+import { FormSelect as Gr } from "./components/FormComponents/FormSelect/FormSelect.js";
 import { FormSlider as Nr } from "./components/FormComponents/FormSlider/FormSlider.js";
 import { FormText as gr } from "./components/FormComponents/FormText/FormText.js";
 import { FormToggle as Cr } from "./components/FormComponents/FormToggle/FormToggle.js";
 import { SafeForm as br } from "./components/SafeForm/SafeForm.js";
 import { AvailableCustomIcons as Rr } from "./enums/AvailableCustomIcons.js";
-import { ThemeColor as Ur } from "./enums/ThemeColor.js";
-import { u as hr } from "./useBreakpoints-MzTZ0tCT.js";
-import { capitalizeFirstLetters as kr, getFormattedDateTime as wr, getNumberAsLocaleString as vr, trimLeadingAndTrailingSpaces as yr } from "./services/UtilService.js";
+import { ThemeColor as Vr } from "./enums/ThemeColor.js";
+import { u as Pr } from "./useBreakpoints-MzTZ0tCT.js";
+import { capitalizeFirstLetters as hr, getFormattedDateTime as kr, getNumberAsLocaleString as vr, trimLeadingAndTrailingSpaces as yr } from "./services/UtilService.js";
 import { DATE_FORMAT as Kr, DATE_TIME_FORMAT as zr, TIME_FORMAT as Wr } from "./types/Time.js";
 import { AVAILABLE_COUNTRY_KEYS as jr, AVAILABLE_LOCALES as qr, ENGLISH_LANGUAGE_ID as Jr, GERMAN_LANGUAGE_ID as Qr, LANGUAGE_CODES_MAPPER as Zr, LANGUAGE_ID_MAPPER as $r, SPANISH_LANGUAGE_ID as ro, TURKISH_LANGUAGE_ID as oo } from "./types/Languages.js";
 export {
@@ -58,17 +58,17 @@ export {
   E as ContextMenu,
   Kr as DATE_FORMAT,
   zr as DATE_TIME_FORMAT,
-  c as DeleteModal,
-  _ as DetailContentWrapper,
-  s as Disclaimer,
+  L as DeleteModal,
+  c as DetailContentWrapper,
+  F as Disclaimer,
   Jr as ENGLISH_LANGUAGE_ID,
-  G as EmptyView,
+  T as EmptyView,
   D as Filter,
   Sr as FormCheckBox,
-  Lr as FormDatePicker,
-  Fr as FormNumber,
-  Tr as FormRadio,
-  Ir as FormSelect,
+  _r as FormDatePicker,
+  sr as FormNumber,
+  Ir as FormRadio,
+  Gr as FormSelect,
   Nr as FormSlider,
   gr as FormText,
   Cr as FormToggle,
@@ -77,13 +77,13 @@ export {
   B as GenericTable,
   O as HashTabView,
   u as HeaderFilter,
-  H as HealthCheckFailed,
-  V as Iconify,
-  P as InfoGroup,
+  U as Iconify,
+  H as InfoCard,
+  w as InfoGroup,
   Zr as LANGUAGE_CODES_MAPPER,
   $r as LANGUAGE_ID_MAPPER,
   m as LinkBanner,
-  w as ListArea,
+  k as ListArea,
   y as LoadingSpinner,
   K as Modal,
   W as ModulePadding,
@@ -101,11 +101,11 @@ export {
   ir as StepperIndicator,
   Wr as TIME_FORMAT,
   oo as TURKISH_LANGUAGE_ID,
-  Ur as ThemeColor,
+  Vr as ThemeColor,
   dr as VerticalDivider,
-  kr as capitalizeFirstLetters,
-  wr as getFormattedDateTime,
+  hr as capitalizeFirstLetters,
+  kr as getFormattedDateTime,
   vr as getNumberAsLocaleString,
   yr as trimLeadingAndTrailingSpaces,
-  hr as useBreakpoints
+  Pr 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.8.1",
+  "version": "2.8.2",
   "type": "module",
   "repository": "https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared",
   "author": "Falk Menge <falk.menge.ext@bayer.com>",

package/dist/assets/HealthCheckFailed.css

@@ -1 +0,0 @@
-._database_11ki8_1{color:var(--lmnt-theme-secondary);animation:_spin_11ki8_1 4s linear infinite}@keyframes _spin_11ki8_1{0%{transform:rotate(0)}to{transform:rotate(-360deg)}}._iot_11ki8_16,._platform_11ki8_17,._other_11ki8_18{color:var(--lmnt-theme-danger)}._crossedOut_11ki8_22{position:relative;display:inline-block}._crossedOut_11ki8_22:after{content:"";position:absolute;width:3rem;height:.25rem;left:50%;top:50%;background:var(--lmnt-theme-danger-on-surface);box-shadow:0 0 0 .125rem var(--lmnt-theme-background);transform:translate(-50%,calc(-50% - .25rem)) rotate(45deg);transform-origin:center;z-index:2}

package/dist/components/HealthCheckFailed/HealthCheckFailed.js

@@ -1,48 +0,0 @@
-import { jsx as e, jsxs as s } from "react/jsx-runtime";
-import { C as c, a as d, b as l } from "../../index.es-CDMu_yu0.js";
-import { G as h } from "../../index.es-Dw1eih7R.js";
-import { P as m } from "../../index.es-DFFyENnI.js";
-import { T as o } from "../../index.es-1zrFd4Te.js";
-import { Iconify as _ } from "../Iconify/Iconify.js";
-import '../../assets/HealthCheckFailed.css';const p = "_database_11ki8_1", f = "_spin_11ki8_1", u = "_iot_11ki8_16", k = "_platform_11ki8_17", g = "_other_11ki8_18", C = "_crossedOut_11ki8_22", a = {
-  database: p,
-  spin: f,
-  iot: u,
-  platform: k,
-  other: g,
-  crossedOut: C
-}, N = ({
-  title: t,
-  subtitle: n,
-  type: r,
-  isOutlined: i = !0
-}) => /* @__PURE__ */ e(
-  c,
-  {
-    variant: i ? "outlined" : "flat",
-    "data-testid": `${r}-health-check-failed-card`,
-    children: /* @__PURE__ */ e(d, { children: /* @__PURE__ */ e(m, { variant: "airy", children: /* @__PURE__ */ e(l, { children: /* @__PURE__ */ s(
-      h,
-      {
-        gap: "none",
-        primaryAlign: "center",
-        secondaryAlign: "center",
-        direction: "vertical",
-        fullWidth: !0,
-        children: [
-          /* @__PURE__ */ e(y, { type: r }),
-          /* @__PURE__ */ e(o, { level: 1, bold: !0, children: t }),
-          /* @__PURE__ */ e(o, { level: 2, themeColor: "text-secondary-on-background", children: n })
-        ]
-      }
-    ) }) }) })
-  }
-), b = {
-  database: "sync",
-  iot: "settings_input_antenna",
-  platform: "engineering",
-  other: "error"
-}, y = ({ type: t }) => /* @__PURE__ */ e("span", { className: t === "iot" ? a.crossedOut : "", children: /* @__PURE__ */ e(_, { icon: b[t], className: a[t], iconSize: "xlarge" }) });
-export {
-  N as HealthCheckFailed
-};