feat(facet): FLUI-144 add category icon in toggle facet

Author: GaelleA

packages/ui/Release.md

@@ -1,5 +1,8 @@
+### 10.13.2 2024-11-13
+- feat: FLUI-144 Add category icon in toggle facet
+
 ### 10.13.1 2024-11-12
-- feat: SJIP-281 Add category icon in facet and quick filter
+- feat: SJIP-281 Add category icon in checkbox facet and quick filter
 
 ### 10.13.0 2024-11-06
 - feat: CLIN-2923 Improve Pro Label by adding tooltip option

packages/ui/package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@ferlab/ui",
-    "version": "10.13.1",
+    "version": "10.13.2",
     "description": "Core components for scientific research data portals",
     "publishConfig": {
         "access": "public"

packages/ui/package.json

@@ -1,5 +1,4 @@
 import React, { Fragment, useEffect, useState } from 'react';
-import { FileImageOutlined } from '@ant-design/icons';
 import { Button, Checkbox, Divider, Dropdown, Input, Space, Switch, Tag, Typography } from 'antd';
 import cx from 'classnames';
 import get from 'lodash/get';

packages/ui/src/components/filters/CheckboxFilter/CheckboxFilter.tsx

@@ -1,44 +1,50 @@
 .radioGroup {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
 }
 .radioGroup :global(.ant-radio-wrapper):last-child {
-  margin-bottom: 0;
+    margin-bottom: 0;
 }
 .radioGroup > * {
-  margin-bottom: 0.8rem;
-  width: 100%;
+    margin-bottom: 0.8rem;
+    width: 100%;
 }
 .radioGroup > label {
-  display: flex;
+    display: flex;
 }
 .radioGroup > label > span:last-child {
-  display: flex;
-  justify-content: space-between;
-  width: 100%;
-  padding-right: 0px;
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    padding-right: 0px;
 }
 
 .clearButton {
-  padding: 0 7px;
-  height: auto;
-  color: var(--toggle-filter-sc-button-color);
+    padding: 0 7px;
+    height: auto;
+    color: var(--toggle-filter-sc-button-color);
 }
 
 .actions {
-  border-top: 1px solid var(--filter-actions-border-color);
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 17px;
-  padding-top: 13px;
+    border-top: 1px solid var(--filter-actions-border-color);
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 17px;
+    padding-top: 13px;
 }
 
 .noResultsText {
-  background: var(--filter-no-results-text-background-color);
-  color: var(--filter-no-results-text-color);
-  font-size: 14px;
-  line-height: 22px;
-  padding: 8px 16px;
-  width: 100%;
+    background: var(--filter-no-results-text-background-color);
+    color: var(--filter-no-results-text-color);
+    font-size: 14px;
+    line-height: 22px;
+    padding: 8px 16px;
+    width: 100%;
+}
+
+.categoryIcon {
+    display: flex;
+    justify-content: flex-end;
+    margin: -8px 0 8px;
 }

packages/ui/src/components/filters/ToggleFilter.module.css

@@ -3,6 +3,7 @@ import { Button, Radio, Space, Tag } from 'antd';
 import { isEmpty } from 'lodash';
 import get from 'lodash/get';
 
+import StackLayout from '../../layout/StackLayout';
 import { numberFormat } from '../../utils/numberUtils';
 import { removeUnderscoreAndCapitalize } from '../../utils/stringUtils';
 
@@ -48,12 +49,20 @@ const ToggleFilter = ({
         };
     });
 
+    const showCategoryIcon = filterGroup.config?.categoryIcon;
+
     return isEmpty(options) ? (
         <Space className={styles.noResultsText} direction="vertical">
             {get(dictionary, 'messages.errorNoData', 'No values found for this request')}
         </Space>
     ) : (
         <>
+            {showCategoryIcon && (
+                <StackLayout className={styles.categoryIcon}>
+                    <Space>{showCategoryIcon}</Space>
+                </StackLayout>
+            )}
+
             <Radio.Group
                 className={styles.radioGroup}
                 onChange={(e) => {