;
# SwatchButtonGroup
-
-
```
import { SwatchButtonGroup } from '../SwatchButtonGroup'
```
diff --git a/src/containers/App.tsx b/src/containers/App.tsx
index ed66e1b..88ffd14 100644
--- a/src/containers/App.tsx
+++ b/src/containers/App.tsx
@@ -9,15 +9,18 @@ it.
import { FunctionComponent } from 'preact';
import { useContext, useState } from 'preact/hooks';
+import FilterButton from 'src/components/FilterButton';
+import Loading from 'src/components/Loading';
-import { FilterButton, Loading } from '../components';
import { CategoryFilters } from '../components/CategoryFilters';
-import { useProducts, useSensor, useStore } from '../context';
+import { SelectedFilters } from '../components/Facets';
+import { useProducts, useSearch, useSensor, useStore } from '../context';
import { TranslationContext } from '../context/translation';
import { ProductsContainer } from './ProductsContainer';
import { ProductsHeader } from './ProductsHeader';
export const App: FunctionComponent = () => {
+ const searchCtx = useSearch();
const productsCtx = useProducts();
const { screenSize } = useSensor();
const { displayMode } = useStore().config;
@@ -46,7 +49,9 @@ export const App: FunctionComponent = () => {
totalCount={productsCtx.totalCount}
categoryName={productsCtx.categoryName ?? ''}
phrase={productsCtx.variables.phrase ?? ''}
+ showFilters={showFilters}
setShowFilters={setShowFilters}
+ filterCount={searchCtx.filterCount}
/>
{
totalCount={productsCtx.totalCount}
screenSize={screenSize}
/>
+
{productsCtx.loading ? (
) : (
@@ -86,15 +92,22 @@ export const App: FunctionComponent = () => {
- {!screenSize.mobile && (
-
- setShowFilters(true)}
- type="desktop"
- title={translation.Filter.showTitle}
- />
-
- )}
+ {!screenSize.mobile &&
+ !productsCtx.loading &&
+ productsCtx.facets.length &&
+ productsCtx.totalCount > 0 && (
+
+ setShowFilters(true)}
+ type="desktop"
+ title={`${translation.Filter.showTitle}${
+ searchCtx.filterCount > 0
+ ? ` (${searchCtx.filterCount})`
+ : ''
+ }`}
+ />
+
+ )}
+
{productsCtx.loading ? (
) : (
diff --git a/src/context/search.tsx b/src/context/search.tsx
index 0c4b151..c6d7bbe 100644
--- a/src/context/search.tsx
+++ b/src/context/search.tsx
@@ -9,6 +9,7 @@ it.
import { createContext, FunctionComponent, useContext } from 'preact/compat';
import { useState } from 'preact/hooks';
+import { useEffect } from 'react';
import {
FacetFilter,
@@ -35,6 +36,7 @@ interface SearchContextProps {
setFilters: any;
setSort: any;
setCategoryNames: any;
+ filterCount: number;
categoryNames: { name: string; value: string; attribute: string }[];
createFilter: (filter: FacetFilter) => void;
updateFilter: (filter: FacetFilter) => void;
@@ -63,6 +65,7 @@ const SearchProvider: FunctionComponent = ({ children }) => {
{ name: string; value: string; attribute: string }[]
>([]);
const [sort, setSort] = useState
(sortDefault);
+ const [filterCount, setFilterCount] = useState(0);
const createFilter = (filter: SearchClauseInput) => {
const newFilters = [...filters, filter];
@@ -112,12 +115,30 @@ const SearchProvider: FunctionComponent = ({ children }) => {
}
};
+ const getFilterCount = (filters: SearchClauseInput[]) => {
+ let count = 0;
+ filters.forEach((filter) => {
+ if (filter.in) {
+ count += filter.in.length;
+ } else {
+ count += 1;
+ }
+ });
+ return count;
+ };
+
+ useEffect(() => {
+ const count = getFilterCount(filters);
+ setFilterCount(count);
+ }, [filters]);
+
const context: SearchContextProps = {
phrase,
categoryPath,
filters,
sort,
categoryNames,
+ filterCount,
setPhrase,
setCategoryPath,
setFilters,
diff --git a/src/examples/inputGroupTitleSlot/InputGroupTitleSlot.stories.mdx b/src/examples/inputGroupTitleSlot/InputGroupTitleSlot.stories.mdx
new file mode 100644
index 0000000..25fb879
--- /dev/null
+++ b/src/examples/inputGroupTitleSlot/InputGroupTitleSlot.stories.mdx
@@ -0,0 +1,38 @@
+import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
+import { InputButtonGroup } from '../../components/InputButtonGroup'
+import { TextWithTooltip } from "./TextWithTooltip";
+
+
+
+export const Template = args => ;
+
+# Filter
+
+
diff --git a/src/examples/inputGroupTitleSlot/TextWithTooltip.tsx b/src/examples/inputGroupTitleSlot/TextWithTooltip.tsx
new file mode 100644
index 0000000..df5a03f
--- /dev/null
+++ b/src/examples/inputGroupTitleSlot/TextWithTooltip.tsx
@@ -0,0 +1,22 @@
+import { FunctionComponent } from 'preact';
+
+import TooltipIcon from '../../icons/info.svg';
+
+export const TextWithTooltip: FunctionComponent<{
+ text: string;
+ tooltipText: string;
+}> = ({ text, tooltipText }) => {
+ return (
+
+
+
+
+ {tooltipText}
+
+
+ );
+};
diff --git a/src/styles/index.css b/src/styles/index.css
index dd77be0..5519827 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -604,6 +604,10 @@ video {
z-index: 20;
}
+.m-4 {
+ margin: 1rem;
+}
+
.m-auto {
margin: auto;
}
@@ -654,10 +658,6 @@ video {
margin-bottom: var(--spacing-md);
}
-.ml-0 {
- margin-left: 0px;
-}
-
.ml-1 {
margin-left: 0.25rem;
}
@@ -710,6 +710,10 @@ video {
margin-top: 1rem;
}
+.mt-8 {
+ margin-top: 2rem;
+}
+
.mt-md {
margin-top: var(--spacing-md);
}
@@ -754,6 +758,10 @@ video {
height: 1.25rem;
}
+.h-\[10px\] {
+ height: 10px;
+}
+
.h-\[12px\] {
height: 12px;
}
@@ -794,6 +802,10 @@ video {
width: 1.25rem;
}
+.w-\[10px\] {
+ width: 10px;
+}
+
.w-\[12px\] {
width: 12px;
}
@@ -941,10 +953,6 @@ video {
justify-content: space-between;
}
-.gap-3 {
- gap: 0.75rem;
-}
-
.gap-x-2xl {
-moz-column-gap: var(--spacing-2xl);
column-gap: var(--spacing-2xl);
@@ -1109,6 +1117,11 @@ video {
padding: var(--spacing-xs);
}
+.px-1 {
+ padding-left: 0.25rem;
+ padding-right: 0.25rem;
+}
+
.px-2 {
padding-left: 0.5rem;
padding-right: 0.5rem;
@@ -1144,11 +1157,6 @@ video {
padding-bottom: 0.5rem;
}
-.py-md {
- padding-top: var(--spacing-md);
- padding-bottom: var(--spacing-md);
-}
-
.py-sm {
padding-top: var(--spacing-sm);
padding-bottom: var(--spacing-sm);
@@ -1203,10 +1211,6 @@ video {
text-align: center;
}
-.align-middle {
- vertical-align: middle;
-}
-
.text-2xl {
font-size: var(--font-2xl);
line-height: var(--leading-loose);
@@ -1443,6 +1447,12 @@ video {
transition-duration: 150ms;
}
+.transition-opacity {
+ transition-property: opacity;
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+ transition-duration: 150ms;
+}
+
.duration-100 {
transition-duration: 100ms;
}
@@ -1655,6 +1665,10 @@ video {
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
+.group:hover .group-hover\:opacity-100 {
+ opacity: 1;
+}
+
@media (min-width: 640px) {
.sm\:flex {
display: flex;