feat/quick-filter-label

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/amplify-component-lib",
-  "version": "9.7.2",
+  "version": "9.7.3",
   "description": "Frontend Typescript components for the Amplify team",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

src/organisms/Filter/QuickFilter.test.tsx

@@ -62,3 +62,31 @@ test('Sets active like expected', async () => {
 
   expect(onQuickFilter).toHaveBeenCalledWith(key, item);
 });
+
+test('Label works as expected', () => {
+  const label = faker.airline.airplane().name;
+  const items = {
+    [faker.lorem.word()]: new Array(faker.number.int({ min: 1, max: 5 }))
+      .fill(0)
+      .map(() => {
+        return {
+          value: faker.string.uuid(),
+          label: faker.string.uuid(),
+        };
+      }),
+  };
+  const key = Object.keys(items)[0];
+  const onQuickFilter = vi.fn();
+  render(
+    <QuickFilter
+      values={{
+        [key]: [items[key][0]],
+      }}
+      items={items}
+      label={label}
+      onQuickFilter={onQuickFilter}
+    />
+  );
+
+  expect(screen.getByRole('button', { name: label })).toBeInTheDocument();
+});

src/organisms/Filter/QuickFilter.tsx

@@ -11,12 +11,14 @@ interface QuickFilterProps<T extends string> {
   values: FilterProps<T>['values'];
   items: Record<T, SelectOptionRequired[]>;
   onQuickFilter: (key: T, value: SelectOptionRequired) => void;
+  label?: string;
 }
 
 export function QuickFilter<T extends string>({
   values,
   items,
   onQuickFilter,
+  label = 'Quick filter',
 }: QuickFilterProps<T>) {
   const [isOpen, setIsOpen] = useState(false);
 
@@ -38,7 +40,7 @@ export function QuickFilter<T extends string>({
       )}
     >
       <Typography as="span" variant="button" group="navigation">
-        Quick filter
+        {label}
       </Typography>
       <Icon data={isOpen ? arrow_drop_up : arrow_drop_down} />
     </ButtonWithMenu>