From 525583af88dc68296449da005bed439478657e86 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Leszczyk?= <michasko37@gmail.com>
Date: Fri, 15 Apr 2022 16:12:42 +0200
Subject: [PATCH] fix(dashboard-v2): allow passing additional classnames to
 Panels + ensure all slides are equal height

---
 packages/dashboard-v2/src/components/Panel/Panel.js   | 9 +++++++--
 packages/dashboard-v2/src/components/Slider/Slide.js  | 2 +-
 packages/dashboard-v2/src/components/Slider/Slider.js | 2 +-
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/dashboard-v2/src/components/Panel/Panel.js b/packages/dashboard-v2/src/components/Panel/Panel.js
index 27551ecd..fe50cc89 100644
--- a/packages/dashboard-v2/src/components/Panel/Panel.js
+++ b/packages/dashboard-v2/src/components/Panel/Panel.js
@@ -14,8 +14,8 @@ const PanelTitle = styled.h6.attrs({
  *
  * These additional props will be rendered onto the panel's body element.
  */
-export const Panel = ({ title, ...props }) => (
-  <div>
+export const Panel = ({ title, wrapperClassName, ...props }) => (
+  <div className={wrapperClassName}>
     {title && <PanelTitle>{title}</PanelTitle>}
     <PanelBody {...props} />
   </div>
@@ -26,8 +26,13 @@ Panel.propTypes = {
    * Label of the panel
    */
   title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  /**
+   * CSS class to be applied to the external container
+   */
+  wrapperClassName: PropTypes.string,
 };
 
 Panel.defaultProps = {
   title: "",
+  wrapperClassName: "",
 };
diff --git a/packages/dashboard-v2/src/components/Slider/Slide.js b/packages/dashboard-v2/src/components/Slider/Slide.js
index 42d354ff..eafbc563 100644
--- a/packages/dashboard-v2/src/components/Slider/Slide.js
+++ b/packages/dashboard-v2/src/components/Slider/Slide.js
@@ -2,7 +2,7 @@ import styled from "styled-components";
 import PropTypes from "prop-types";
 
 const Slide = styled.div.attrs(({ isVisible }) => ({
-  className: `slider-slide transition-opacity ${isVisible ? "" : "opacity-50 cursor-pointer select-none"}`,
+  className: `slider-slide transition-opacity h-full ${isVisible ? "" : "opacity-50 cursor-pointer select-none"}`,
 }))``;
 
 Slide.propTypes = {
diff --git a/packages/dashboard-v2/src/components/Slider/Slider.js b/packages/dashboard-v2/src/components/Slider/Slider.js
index 33c3bc2a..5b902c58 100644
--- a/packages/dashboard-v2/src/components/Slider/Slider.js
+++ b/packages/dashboard-v2/src/components/Slider/Slider.js
@@ -62,7 +62,7 @@ const Slider = ({ slides, breakpoints, scrollerClassName, className }) => {
           const isVisible = index >= activeIndex && index < activeIndex + visibleSlides;
 
           return (
-            <div key={`slide-${index}`}>
+            <div key={`slide-${index}`} className="h-full">
               <Slide
                 isVisible={isVisible || !scrollable}
                 onClickCapture={