Added filter button

dist/components/filterButton/FilterButton.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ButtonProps } from 'react-bootstrap';
+interface FilterButtonProps extends ButtonProps {
+    filterExists: boolean;
+}
+declare const FilterButton: ({ variant, filterExists, className, ...rest }: FilterButtonProps) => React.JSX.Element;
+export default FilterButton;
+//# sourceMappingURL=FilterButton.d.ts.map

dist/index.d.ts

@@ -14,6 +14,7 @@ import Nav from 'components/nav/Nav';
 import Footer from 'components/footer/Footer';
 import SearchBar from 'components/searchBar/SearchBar';
 import Breadcrumb from 'components/breadcrumb/Breadcrumb';
+import FilterButton from 'components/filterButton/FilterButton';
 import '../scss/texmo-react-components.scss';
-export { Button, Table, Form, Title, Card, Chip, List, ProgressBar, SideNavbar, InfoTile, Header, UserProfile, Nav, Footer, SearchBar, Breadcrumb, };
+export { Button, Table, Form, Title, Card, Chip, List, ProgressBar, SideNavbar, InfoTile, Header, UserProfile, Nav, Footer, SearchBar, Breadcrumb, FilterButton, };
 //# sourceMappingURL=index.d.ts.map

dist/index.js

@@ -24429,10 +24429,19 @@ var Breadcrumb = function (_a) {
 };
 Breadcrumb.Item = BreadcrumbItem;
 
+var FilterButton = function (_a) {
+    var _b = _a.variant, variant = _b === void 0 ? 'secondary' : _b, filterExists = _a.filterExists, className = _a.className, rest = __rest(_a, ["variant", "filterExists", "className"]);
+    return (React.createElement(Button$2, __assign$1({ variant: variant, className: "".concat(className, " position-relative ms-2") }, rest),
+        React.createElement("i", { className: "bi bi-filter" }),
+        filterExists ? (React.createElement("span", { className: "position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle" },
+            React.createElement("span", { className: "visually-hidden" }, "Filter applied"))) : null));
+};
+
 exports.Breadcrumb = Breadcrumb;
 exports.Button = Button;
 exports.Card = Card;
 exports.Chip = Chip;
+exports.FilterButton = FilterButton;
 exports.Footer = Footer;
 exports.Form = Form$1;
 exports.Header = Header;

example/pages/ListPage.tsx

@@ -1,4 +1,4 @@
-import { Chip, List, ProgressBar, SearchBar, Title, Breadcrumb } from '@the-curve-consulting/texmo-react-components';
+import { Chip, List, ProgressBar, SearchBar, Title, Breadcrumb, FilterButton } from '@the-curve-consulting/texmo-react-components';
 import { Col, Row } from 'react-bootstrap';
 
 const ListPage = () => {
@@ -28,6 +28,8 @@ const ListPage = () => {
             <SearchBar.Input />
             <SearchBar.Button />
           </SearchBar>
+
+          <FilterButton filterExists/>
         </div>
       </Col>
     </Row>

src/components/filterButton/FilterButton.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Button, ButtonProps } from 'react-bootstrap';
+
+interface FilterButtonProps extends ButtonProps {
+  filterExists: boolean;
+}
+
+const FilterButton = ({
+  variant = 'secondary',
+  filterExists,
+  className,
+  ...rest
+}: FilterButtonProps) => {
+  return (
+    <Button
+      variant={variant}
+      className={`${className} position-relative ms-2`}
+      {...rest}
+    >
+      <i className="bi bi-filter"></i>
+      {filterExists ? (
+        <span className="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
+          <span className="visually-hidden">Filter applied</span>
+        </span>
+      ) : null}
+    </Button>
+  );
+};
+
+export default FilterButton;

src/index.ts

@@ -14,6 +14,7 @@ import Nav from 'components/nav/Nav';
 import Footer from 'components/footer/Footer';
 import SearchBar from 'components/searchBar/SearchBar';
 import Breadcrumb from 'components/breadcrumb/Breadcrumb';
+import FilterButton from 'components/filterButton/FilterButton';
 import '../scss/texmo-react-components.scss';
 
 export {
@@ -33,4 +34,5 @@ export {
   Footer,
   SearchBar,
   Breadcrumb,
+  FilterButton,
 };