poc: add Panel styles (#6589)

* poc: add `Panel` styles

* poc: add `Panel` footer

* fix: conditional footer

* fix: make header optional

Author: FabienMotte

examples/react/css/src/App.tsx

@@ -45,7 +45,7 @@ export function App() {
       </header>
       <div className="container two-columns">
         <div className="left-column">
-          <Panel header="categories">
+          <Panel header="categories" footer="This is a footer">
             <HierarchicalMenu
               attributes={[
                 'hierarchicalCategories.lvl0',

examples/react/css/src/Panel.tsx

@@ -1,16 +1,20 @@
 import React from 'react';
 
 type PanelProps = React.PropsWithChildren<{
-  header: string;
+  header?: React.ReactNode;
+  footer?: React.ReactNode;
 }>;
 
-export function Panel({ header, children }: PanelProps) {
+export function Panel({ header, children, footer }: PanelProps) {
   return (
     <div className="ais-Panel">
-      <div className="ais-Panel-header">
-        <span>{header}</span>
-      </div>
+      {Boolean(header) && (
+        <div className="ais-Panel-header">
+          <span>{header}</span>
+        </div>
+      )}
       <div className="ais-Panel-body">{children}</div>
+      {Boolean(footer) && <div className="ais-Panel-footer">{footer}</div>}
     </div>
   );
 }

examples/react/css/src/algolia.css

@@ -7,3 +7,4 @@
 @import url('searchbox.css');
 @import url('hierarchical-menu.css');
 @import url('refinement-list.css');
+@import url('panel.css');

examples/react/css/src/panel.css

@@ -0,0 +1,15 @@
+.ais-Panel-header {
+  display: flex;
+  align-items: center;
+  padding: var(--ais-spacing);
+  border-bottom: 1px solid
+    rgba(var(--ais-border-color-rgb), var(--ais-border-color-alpha));
+  margin-bottom: var(--ais-spacing);
+  font-weight: var(--ais-font-weight-medium);
+  text-transform: capitalize;
+}
+
+.ais-Panel-footer {
+  margin-top: calc(var(--ais-spacing) * 0.5);
+  font-size: 0.9em;
+}