@hortiview/shared-components 0.0.5024 → 0.0.5053

package/README.md

@@ -27,6 +27,7 @@ Additionally the library provides form components using [react-hook-form](https:
 
 ## Available packages:
 
+1. [AlertBanner](#alertbanner)
 1. [BaseView](#baseview)
 1. [BasicHeading](#basicheading)
 1. [BlockView](#blockview)
@@ -50,6 +51,20 @@ Additionally the library provides form components using [react-hook-form](https:
 1. [SearchBar](#searchbar)
 1. [VerticalDivider](#verticaldivider)
 
+### AlertBanner
+
+Presents an Banner containing important messages. Can used in different colors and you can add an optional action.
+
+```typescript
+import { AlertBanner } from '@hortiview/shared-components';
+
+<AlertBanner 
+    text='My Alert' 
+    color='danger' // | 'info' | 'success' 
+    action={<MyButton />} 
+/>;
+```
+
 ### BaseView
 
 Can used to show a kind off main and detail view. On the left side you will have a list of elements and on the right a detail section of the element selected.
@@ -437,6 +452,7 @@ const fields: FieldItem[] = [
 ```
 
 You can also render a multiline section, that receives an array if FieldItem-Arrays instead of a single FieldItem-Array
+
 ```typescript
 import { InfoGroup } from '@hortiview/shared-components';
 
@@ -453,7 +469,7 @@ const multiLineFields: FieldItem[][] = [
     { label: 'FieldTitle2', value: 'Value2' },
     { label: 'FieldTitle3', value: 'Value3' },
     { label: 'FieldTitle4', value: 'Value4' },
-  ]  
+  ]
 ]
 
 <InfoGroup fields={multiLineFields} />

package/dist/assets/AlertBanner.css

@@ -0,0 +1 @@
+._messageContainer_92aoe_1{border-radius:.25rem;padding:.5rem 1rem;width:-moz-available;width:-webkit-fill-available;width:stretch}._message_92aoe_1{color:var(--lmnt-theme-on-surface-active);font-weight:700}._info_92aoe_13{border:1px solid var(--lmnt-theme-on-secondary-stroke);background:var(--lmnt-theme-secondary-50)}._danger_92aoe_18{border:1px solid var(--lmnt-theme-on-danger-stroke);background:var(--lmnt-theme-danger-50)}._success_92aoe_23{border:1px solid var(--lmnt-theme-on-success-stroke);background:var(--lmnt-theme-success-50)}

package/dist/components/AlertBanner/AlertBanner.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+type AlertBannerProps = {
+    text: string | JSX.Element;
+    color?: 'danger' | 'info' | 'success';
+    isOpen?: boolean;
+    action?: JSX.Element;
+};
+export declare const AlertBanner: ({ text, color, isOpen, action }: AlertBannerProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/AlertBanner/AlertBanner.js

@@ -0,0 +1,20 @@
+import "../../assets/AlertBanner.css";
+import { jsx as e, Fragment as t, jsxs as c } from "react/jsx-runtime";
+import { Group as m, TypoBody as g } from "@element/react-components";
+import { a as _ } from "../../useBreakpoint-DROHPVxO.js";
+const l = "_messageContainer_92aoe_1", d = "_message_92aoe_1", p = "_info_92aoe_13", f = "_danger_92aoe_18", u = "_success_92aoe_23", n = {
+  messageContainer: l,
+  message: d,
+  info: p,
+  danger: f,
+  success: u
+}, A = ({ text: s, color: o = "info", isOpen: r = !0, action: a }) => {
+  const { isLg: i } = _();
+  return r ? /* @__PURE__ */ e("div", { className: `${n.messageContainer} ${n[o]}`, children: /* @__PURE__ */ c(m, { direction: i ? "horizontal" : "vertical", primaryAlign: "space-between", secondaryAlign: "center", children: [
+    typeof s == "string" ? /* @__PURE__ */ e(g, { bold: !0, level: 2, children: s }) : /* @__PURE__ */ e("div", { children: s }),
+    a
+  ] }) }) : /* @__PURE__ */ e(t, {});
+};
+export {
+  A as AlertBanner
+};

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

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

package/dist/components/AlertBanner/AlertBanner.test.js

@@ -0,0 +1,36 @@
+import { jsx as e, Fragment as m } from "react/jsx-runtime";
+import { r as t, s } from "../../react.esm-C0LtovhP.js";
+import { u as i } from "../../useBreakpoint-DROHPVxO.js";
+import { AlertBanner as n } from "./AlertBanner.js";
+import { d as c, b as u, t as r, g as l, v as a } from "../../vi.JYQecGiw-BbUbJcT8.js";
+c("AlertBanner Test", () => {
+  u(() => {
+    a.spyOn(i, "useBreakpoints").mockReturnValue({
+      isXs: !1,
+      isSm: !1,
+      isMd: !1,
+      isLg: !0,
+      isXlg: !0,
+      active: "lg"
+    });
+  }), r("render AlertBanner with text", () => {
+    t(/* @__PURE__ */ e(n, { text: "Test" })), l(s.getByText("Test")).toBeInTheDocument();
+  }), r("render AlertBanner with element", () => {
+    t(/* @__PURE__ */ e(n, { text: /* @__PURE__ */ e(m, { children: "Element" }) })), l(s.getByText("Element")).toBeInTheDocument();
+  }), r("renders AlertBanner with vertical style (flex-direction: column) when screen is small", () => {
+    a.spyOn(i, "useBreakpoints").mockReturnValue({
+      isXs: !1,
+      isSm: !0,
+      isMd: !1,
+      isLg: !1,
+      isXlg: !1,
+      active: "sm"
+    }), t(/* @__PURE__ */ e(n, { text: "Test" }));
+    const o = s.getByText("Test").closest(".lmnt.lmnt-group");
+    l(o).toHaveStyle(
+      "display: flex; flex-direction: column; justify-content: space-between; align-items: center; gap: 16px;"
+    );
+  }), r("renders nothing when isOpen is false", () => {
+    t(/* @__PURE__ */ e(n, { text: "Test", isOpen: !1 })), l(s.queryByText("Test")).not.toBeInTheDocument();
+  });
+});

package/dist/components/ListArea/ListAreaService.d.ts

@@ -22,15 +22,15 @@ export declare const getGroupedItems: (items: ListElement[], pathname: string, i
  */
 export declare const getListedItems: (items: ListElement[], pathname: string, itemClassName: string, routerLinkElement: undefined | React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>) => {
     select: boolean;
-    primaryText: import("react/jsx-runtime").JSX.Element;
+    primaryText: JSX.Element;
     secondaryText: import("react/jsx-runtime").JSX.Element | undefined;
     overlineText: string | undefined;
-    trailingBlock: string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<import("react").ReactNode>;
-    leadingBlock: string | import("react/jsx-runtime").JSX.Element | undefined;
+    trailingBlock: string | number | boolean | JSX.Element | Iterable<import("react").ReactNode>;
+    leadingBlock: string | JSX.Element | undefined;
     value: string | undefined;
     componentProps: {
-        leadingBlockType: "icon" | "checkbox" | "radio" | "switch" | "avatar" | "badge" | "image" | "lgImage" | "meta" | "thumbnail";
-        trailingBlockType: "icon" | "checkbox" | "radio" | "switch" | "avatar" | "badge" | "image" | "lgImage" | "meta" | "thumbnail";
+        leadingBlockType: "icon" | "badge" | "image" | "meta" | "checkbox" | "radio" | "switch" | "avatar" | "lgImage" | "thumbnail";
+        trailingBlockType: "icon" | "badge" | "image" | "meta" | "checkbox" | "radio" | "switch" | "avatar" | "lgImage" | "thumbnail";
         className: string;
         onClick: (_: ChangeEvent, value: string) => void | undefined;
         tag: string | import("react").ForwardRefExoticComponent<LinkProps & import("react").RefAttributes<HTMLAnchorElement>> | undefined;
@@ -48,15 +48,15 @@ export declare const getListedItems: (items: ListElement[], pathname: string, it
  */
 export declare const mapListElement: (element: ListElement, pathname: string | undefined, itemClassName: string | undefined, isGrouped: boolean, routerLinkElement: undefined | React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>) => {
     select: boolean;
-    primaryText: import("react/jsx-runtime").JSX.Element;
+    primaryText: JSX.Element;
     secondaryText: import("react/jsx-runtime").JSX.Element | undefined;
     overlineText: string | undefined;
-    trailingBlock: string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<import("react").ReactNode>;
-    leadingBlock: string | import("react/jsx-runtime").JSX.Element | undefined;
+    trailingBlock: string | number | boolean | JSX.Element | Iterable<import("react").ReactNode>;
+    leadingBlock: string | JSX.Element | undefined;
     value: string | undefined;
     componentProps: {
-        leadingBlockType: "icon" | "checkbox" | "radio" | "switch" | "avatar" | "badge" | "image" | "lgImage" | "meta" | "thumbnail";
-        trailingBlockType: "icon" | "checkbox" | "radio" | "switch" | "avatar" | "badge" | "image" | "lgImage" | "meta" | "thumbnail";
+        leadingBlockType: "icon" | "badge" | "image" | "meta" | "checkbox" | "radio" | "switch" | "avatar" | "lgImage" | "thumbnail";
+        trailingBlockType: "icon" | "badge" | "image" | "meta" | "checkbox" | "radio" | "switch" | "avatar" | "lgImage" | "thumbnail";
         className: string;
         onClick: (_: ChangeEvent, value: string) => void | undefined;
         tag: string | import("react").ForwardRefExoticComponent<LinkProps & import("react").RefAttributes<HTMLAnchorElement>> | undefined;

package/dist/main.d.ts

@@ -1,4 +1,5 @@
 import './styles/main.css';
+export { AlertBanner } from './components/AlertBanner/AlertBanner';
 export { BaseView } from './components/BaseView/BaseView';
 export { BasicHeading } from './components/BasicHeading/BasicHeading';
 export { BlockView } from './components/BlockView/BlockView';

package/dist/main.js

@@ -1,52 +1,54 @@
 import "./assets/main.css";
-import { BaseView as t } from "./components/BaseView/BaseView.js";
-import { BasicHeading as p } from "./components/BasicHeading/BasicHeading.js";
-import { BlockView as f } from "./components/BlockView/BlockView.js";
-import { ContextMenu as i } from "./components/ContextMenu/ContextMenu.js";
-import { DeleteModal as c } from "./components/DeleteModal/DeleteModal.js";
-import { Disclaimer as F } from "./components/Disclaimer/Disclaimer.js";
-import { EmptyView as d } from "./components/EmptyView/EmptyView.js";
-import { HashTabView as S } from "./components/HashTabView/HashTabView.js";
-import { HeaderFilter as b } from "./components/HeaderFilter/HeaderFilter.js";
-import { Iconify as u } from "./components/Iconify/Iconify.js";
-import { InfoGroup as D } from "./components/InfoGroup/InfoGroup.js";
-import { ListArea as C } from "./components/ListArea/ListArea.js";
-import { ScrollbarX as I, ScrollbarY as v } from "./components/Scrollbar/Scrollbar.js";
-import { SearchBar as A } from "./components/SearchBar/SearchBar.js";
-import { VerticalDivider as M } from "./components/VerticalDivider/VerticalDivider.js";
-import { FormCheckBox as g } from "./components/FormComponents/FormCheckBox/FormCheckBox.js";
-import { FormDatePicker as E } from "./components/FormComponents/FormDatePicker/FormDatePicker.js";
-import { FormRadio as P } from "./components/FormComponents/FormRadio/FormRadio.js";
-import { FormSelect as X } from "./components/FormComponents/FormSelect/FormSelect.js";
-import { FormSlider as j } from "./components/FormComponents/FormSlider/FormSlider.js";
-import { FormText as J } from "./components/FormComponents/FormText/FormText.js";
-import { AvailableCustomIcons as N } from "./enums/AvailableCustomIcons.js";
-import { a as Q } from "./useBreakpoint-DROHPVxO.js";
-import { capitalizeFirstLetters as W } from "./services/UtilService.js";
+import { AlertBanner as t } from "./components/AlertBanner/AlertBanner.js";
+import { BaseView as p } from "./components/BaseView/BaseView.js";
+import { BasicHeading as f } from "./components/BasicHeading/BasicHeading.js";
+import { BlockView as i } from "./components/BlockView/BlockView.js";
+import { ContextMenu as c } from "./components/ContextMenu/ContextMenu.js";
+import { DeleteModal as n } from "./components/DeleteModal/DeleteModal.js";
+import { Disclaimer as B } from "./components/Disclaimer/Disclaimer.js";
+import { EmptyView as S } from "./components/EmptyView/EmptyView.js";
+import { HashTabView as b } from "./components/HashTabView/HashTabView.js";
+import { HeaderFilter as u } from "./components/HeaderFilter/HeaderFilter.js";
+import { Iconify as D } from "./components/Iconify/Iconify.js";
+import { InfoGroup as A } from "./components/InfoGroup/InfoGroup.js";
+import { ListArea as H } from "./components/ListArea/ListArea.js";
+import { ScrollbarX as v, ScrollbarY as y } from "./components/Scrollbar/Scrollbar.js";
+import { SearchBar as M } from "./components/SearchBar/SearchBar.js";
+import { VerticalDivider as g } from "./components/VerticalDivider/VerticalDivider.js";
+import { FormCheckBox as E } from "./components/FormComponents/FormCheckBox/FormCheckBox.js";
+import { FormDatePicker as P } from "./components/FormComponents/FormDatePicker/FormDatePicker.js";
+import { FormRadio as X } from "./components/FormComponents/FormRadio/FormRadio.js";
+import { FormSelect as j } from "./components/FormComponents/FormSelect/FormSelect.js";
+import { FormSlider as J } from "./components/FormComponents/FormSlider/FormSlider.js";
+import { FormText as N } from "./components/FormComponents/FormText/FormText.js";
+import { AvailableCustomIcons as Q } from "./enums/AvailableCustomIcons.js";
+import { a as W } from "./useBreakpoint-DROHPVxO.js";
+import { capitalizeFirstLetters as _ } from "./services/UtilService.js";
 export {
-  N as AvailableCustomIcons,
-  t as BaseView,
-  p as BasicHeading,
-  f as BlockView,
-  i as ContextMenu,
-  c as DeleteModal,
-  F as Disclaimer,
-  d as EmptyView,
-  g as FormCheckBox,
-  E as FormDatePicker,
-  P as FormRadio,
-  X as FormSelect,
-  j as FormSlider,
-  J as FormText,
-  S as HashTabView,
-  b as HeaderFilter,
-  u as Iconify,
-  D as InfoGroup,
-  C as ListArea,
-  I as ScrollbarX,
-  v as ScrollbarY,
-  A as SearchBar,
-  M as VerticalDivider,
-  W as capitalizeFirstLetters,
-  Q as useBreakpoints
+  t as AlertBanner,
+  Q as AvailableCustomIcons,
+  p as BaseView,
+  f as BasicHeading,
+  i as BlockView,
+  c as ContextMenu,
+  n as DeleteModal,
+  B as Disclaimer,
+  S as EmptyView,
+  E as FormCheckBox,
+  P as FormDatePicker,
+  X as FormRadio,
+  j as FormSelect,
+  J as FormSlider,
+  N as FormText,
+  b as HashTabView,
+  u as HeaderFilter,
+  D as Iconify,
+  A as InfoGroup,
+  H as ListArea,
+  v as ScrollbarX,
+  y as ScrollbarY,
+  M as SearchBar,
+  g as VerticalDivider,
+  _ as capitalizeFirstLetters,
+  W 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": "0.0.5024",
+  "version": "0.0.5053",
   "type": "module",
   "repository": "https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared",
   "author": "Falk Menge <falk.menge.ext@bayer.com>",