@hortiview/shared-components 0.0.7315 → 0.0.7369

package/README.md

@@ -31,6 +31,7 @@ Additionally the library provides form components using [react-hook-form](https:
 1. [DeleteModal](#deletemodal)
 1. [Disclaimer](#disclaimer)
 1. [EmptyView](#emptyview)
+1. [Filter](#filter)
 1. [FormComponents](#formcomponents)
    1. [FormCheckBox](#formcheckbox)
    1. [FormDatePicker](#formdatepicker)
@@ -45,6 +46,7 @@ Additionally the library provides form components using [react-hook-form](https:
 1. [Iconify](#iconify)
 1. [ListArea](#listarea)
 1. [LoadingSpinner](#loadingspinner)
+1. [OverflowTooltip](#overflowtooltip)
 1. [ScrollBar](#scrollbar)
 1. [SearchBar](#searchbar)
 1. [VerticalDivider](#verticaldivider)
@@ -209,6 +211,70 @@ import { EmptyView } from '@hortiview/shared-components';
 <EmptyView title='No Content' subtitle='nothing' icon='grass' />;
 ```
 
+### Filter
+
+A filter component, which provides a well designed filter experience. It contains a filter button and a modal for different select inputs.
+You need to provide some filter options in a `FilterData` array and handle the current filter selections.
+
+```jsx
+import { Filter } from '@hortiview/shared-components';
+import { useState } from 'react';
+
+const MyComponent = () => {
+  const [selectedFilters, setSelectedFilters] = useState([]);
+
+  const options = [
+    {
+      id: 'cars',
+      title: 'Cars',
+      availableOptions: [
+        {
+          id: 'bmw';
+          text: 'BMW';
+          icon: 'car';
+        },
+        {
+          id: 'vw';
+          text: 'Volkswagen';
+          icon: 'car';
+        }
+      ],
+    },
+    {
+      id: 'food',
+      title: 'Food',
+      availableOptions: [
+        {
+          id: 'icecream';
+          text: 'Icecream';
+          icon: 'food';
+        },
+        {
+          id: 'burger';
+          text: 'Burger';
+          icon: 'food';
+        }
+      ],
+    },
+  ];
+
+  return (
+    <Filter
+      modalCancelButtonText={'cancel'}
+      modalConfirmButtonText={'useFilter'}
+      clearFilterText={'clearFilter'}
+      closeCallback={filter => setSelectedFilters(filter)}
+      currentFilter={selectedFilters}
+      filterButtonText={'filterButton'}
+      filterModalTitle={'filterResults'}
+      filters={options}
+    />
+  );
+};
+
+export default MyComponent;
+```
+
 ### FormComponents
 
 The library provides some form components based on [react-hook-form](https://react-hook-form.com/). The components can only be use within a form provided by react-hook-form.
@@ -393,7 +459,7 @@ const { handleSubmit } = formMethods;
 
 ### GenericTable
 
-A dynamic table, that renders a table based on a type and an array of data (of the specified type)
+A dynamic table, that renders a table based on a type and an array of data (of the specified type). It renders a card list if your are in mobile or tablet mode.
 
 ```jsx
 import { GenericTable, CellTemplateProps, CellTemplate } from '@hortiview/shared-components';
@@ -621,6 +687,22 @@ return <>
 </>
 ```
 
+### OverflowTooltip
+
+Provides a tooltip and overflow behavior of a given text value.
+
+```jsx
+import { OverflowTooltip } from '@hortiview/shared-components';
+import { TypoBody } from '@element/react-components';
+
+const longText =
+  'This is a very long text that needs to be truncated and shown with a tooltip when it overflows.';
+
+<OverflowTooltip text={longText}>
+  <TypoBody>{longText}</TypoBody>
+</OverflowTooltip>;
+```
+
 ### ScrollBar
 
 Provides a scrollbar in hortiview styling. Add it a classname on your component.

package/dist/assets/contextMenu.css

@@ -1 +1 @@
-._menu_1rfel_1{width:15.875rem}
+._menu_1jlla_1{width:15.875rem}._icon_1jlla_5{color:var(--lmnt-theme-on-secondary-inactive)}

package/dist/assets/genericCard.css

@@ -0,0 +1 @@
+._cardTitle_1738q_1{padding:.5rem!important}._cardBody_1738q_5{padding:.25rem .5rem!important;overflow:hidden!important}._cardContent_1738q_10{border-radius:.5rem}._row_1738q_14{padding:.25rem 0}._font_1738q_18{max-width:125px;font-weight:400;overflow:hidden;text-overflow:ellipsis;text-wrap:nowrap}._title_1738q_26{display:inline-block;width:65vw;overflow:hidden;text-overflow:ellipsis;text-wrap:nowrap}