IBX-9453: Product Picker category filter (#1434)

Author: tischsoic

src/bundle/Resources/public/scss/ui/modules/common/_popup.scss

@@ -1,4 +1,6 @@
 .c-popup {
+    $self: &;
+
     &__dialog {
         @include modal-main();
     }
@@ -53,6 +55,21 @@
         }
     }
 
+    &--has-subheader {
+        .modal-header {
+            border-bottom: 0;
+            padding-bottom: 0;
+        }
+
+        #{$self} {
+            &__subheader {
+                border-bottom: calculateRem(1px) solid $ibexa-color-light-500;
+                padding-bottom: calculateRem(16px);
+                color: $ibexa-color-dark-400;
+            }
+        }
+    }
+
     .ibexa-label--checkbox-radio {
         padding-left: calculateRem(4px);
     }

src/bundle/ui-dev/src/modules/common/popup/popup.component.js

@@ -36,6 +36,7 @@ const Popup = ({
     noCloseBtn,
     extraClasses,
     showTooltip,
+    subheader,
 }) => {
     const rootDOMElement = getRootDOMElement();
     const modalRef = useRef(null);
@@ -59,6 +60,7 @@ const Popup = ({
     const modalClasses = createCssClassNames({
         'c-popup modal fade': true,
         'c-popup--no-header': noHeader,
+        'c-popup--has-subheader': !noHeader && subheader,
         [extraClasses]: extraClasses,
     });
     const closeBtnLabel = Translator.trans(/*@Desc("Close")*/ 'popup.close.label', {}, 'ibexa_universal_discovery_widget');
@@ -114,13 +116,16 @@ const Popup = ({
                     {noHeader
                         ? renderCloseBtn()
                         : title && (
-                              <div className="modal-header c-popup__header">
-                                  <h3 className="modal-title c-popup__headline" title={showTooltip ? title : null}>
-                                      <span className="c-popup__title">{title}</span>
-                                      {subtitle && <span className="c-popup__subtitle">{subtitle}</span>}
-                                  </h3>
-                                  {renderCloseBtn()}
-                              </div>
+                              <>
+                                  <div className="modal-header c-popup__header">
+                                      <h3 className="modal-title c-popup__headline" title={showTooltip ? title : null}>
+                                          <span className="c-popup__title">{title}</span>
+                                          {subtitle && <span className="c-popup__subtitle">{subtitle}</span>}
+                                      </h3>
+                                      {renderCloseBtn()}
+                                  </div>
+                                  {subheader && <div className="c-popup__subheader">{subheader}</div>}
+                              </>
                           )}
                     <div className="modal-body c-popup__body">{children}</div>
                     {!noFooter && (
@@ -170,6 +175,7 @@ Popup.propTypes = {
     noKeyboard: PropTypes.bool,
     extraClasses: PropTypes.string,
     showTooltip: PropTypes.bool,
+    subheader: PropTypes.node,
 };
 
 Popup.defaultProps = {
@@ -184,6 +190,7 @@ Popup.defaultProps = {
     title: null,
     subtitle: null,
     showTooltip: true,
+    subheader: null,
 };
 
 export default Popup;