🔀 Show filter chips with true or false in Sieve component

🩹 show chips with true or false
equinor · Jun 23, 2023 · 91fbabe · 91fbabe
2 parents cdf1af2 + f24a30f
commit 91fbabe
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 14 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@equinor/amplify-components",
-  "version": "3.8.11",
+  "version": "3.8.12",
   "description": "Frontend Typescript components for the Amplify team",
   "main": "dist/index.js",
   "types": "dist/types/index.d.ts",

diff --git a/src/components/Inputs/Sieve/Sieve.stories.tsx b/src/components/Inputs/Sieve/Sieve.stories.tsx
@@ -16,6 +16,7 @@ export default {
       control: 'array',
     },
     onUpdate: { action: 'Ran on update' },
+    showChips: { actions: 'boolean' },
   },
   args: {
     searchPlaceholder: 'Write to search for...',
@@ -57,6 +58,7 @@ export default {
         ],
       },
     ],
+    showChips: true,
   },
 };
 

diff --git a/src/components/Inputs/Sieve/Sieve.test.tsx b/src/components/Inputs/Sieve/Sieve.test.tsx
@@ -426,3 +426,61 @@ test('Users can remove all filters', async () => {
     sortValue: props.sortOptions?.at(0),
   });
 });
+
+test('Do not show filter chips when showChips is set to false', async () => {
+  const props = fakeProps();
+  const user = userEvent.setup();
+  render(<Sieve {...props} showChips={false} />);
+
+  const filterByButton = screen.getByRole('button', {
+    name: /filter by/i,
+  });
+
+  await user.click(filterByButton);
+
+  for (const option of props?.filterOptions ?? []) {
+    expect(screen.getByText(option.label)).toBeInTheDocument();
+  }
+
+  const randomFilterGroup = faker.datatype.number({
+    min: 0,
+    max: (props.filterOptions?.length ?? 0) - 1,
+  });
+
+  await user.click(
+    screen.getByRole('menuitem', {
+      name: props.filterOptions?.[randomFilterGroup].label,
+    })
+  );
+
+  for (const option of props.filterOptions?.[randomFilterGroup].options ?? []) {
+    expect(screen.getByText(option.label)).toBeInTheDocument();
+  }
+
+  const randomIndex = faker.datatype.number({
+    min: 0,
+    max: (props.filterOptions?.[randomFilterGroup].options.length ?? 0) - 1,
+  });
+  await user.click(
+    screen.getByText(
+      props.filterOptions?.[randomFilterGroup]?.options[randomIndex]?.label ??
+        'not-found'
+    )
+  );
+
+  expect(props.onUpdate).toHaveBeenCalledWith({
+    filterValues: [
+      props.filterOptions?.[randomFilterGroup].options[randomIndex],
+    ],
+    sortValue: props.sortOptions?.at(0),
+  });
+
+  await user.click(filterByButton);
+
+  const filterChips = screen.queryByText(
+    props.filterOptions?.[randomFilterGroup]?.options[randomIndex]?.label ??
+      'not-found'
+  );
+
+  expect(filterChips).not.toBeInTheDocument();
+});
diff --git a/src/components/Inputs/Sieve/Sieve.tsx b/src/components/Inputs/Sieve/Sieve.tsx
@@ -50,13 +50,15 @@ export interface SieveProps {
   sortOptions?: Option[];
   filterOptions?: FilterOption[];
   onUpdate: (value: SieveValue) => void;
+  showChips?: boolean;
 }
 
 const Sieve: FC<SieveProps> = ({
   searchPlaceholder,
   sortOptions,
   filterOptions,
   onUpdate,
+  showChips = true,
 }) => {
   const sieveValue = useRef<SieveValue>({
     searchValue: undefined,
@@ -128,19 +130,21 @@ const Sieve: FC<SieveProps> = ({
           />
         )}
       </Container>
-      <Container>
-        {filterValues?.map((filter) => (
-          <FilterChip
-            key={`filter-chip-${filter.value}`}
-            onDelete={() => handleRemoveFilter(filter)}
-          >
-            {filter.label}
-          </FilterChip>
-        ))}
-        {filterValues.length > 1 && (
-          <FilterChip onDelete={handleRemoveAll}>Remove all</FilterChip>
-        )}
-      </Container>
+      {showChips && (
+        <Container>
+          {filterValues?.map((filter) => (
+            <FilterChip
+              key={`filter-chip-${filter.value}`}
+              onDelete={() => handleRemoveFilter(filter)}
+            >
+              {filter.label}
+            </FilterChip>
+          ))}
+          {filterValues.length > 1 && (
+            <FilterChip onDelete={handleRemoveAll}>Remove all</FilterChip>
+          )}
+        </Container>
+      )}
     </Wrapper>
   );
 };