From bf1d8e03f14d444d15f2a3d94ab001f3142318bb Mon Sep 17 00:00:00 2001
From: Vlad Ifrim <ifrimvlad@gmail.com>
Date: Wed, 26 Jun 2024 15:09:04 +0300
Subject: [PATCH] fixes panel header styles when no theme is applied (#371)

---
 src/components/Panel/Panel.css |  6 ++++++
 src/components/Panel/Readme.md | 20 ++++++++++++++++++++
 2 files changed, 26 insertions(+)

diff --git a/src/components/Panel/Panel.css b/src/components/Panel/Panel.css
index 3039a2e9..c917fd16 100644
--- a/src/components/Panel/Panel.css
+++ b/src/components/Panel/Panel.css
@@ -33,7 +33,13 @@
     border: var(--general-border-width) solid var(--color-default-light);
     box-shadow: none;
   }
+}
 
+.tyk-panel--blank,
+.tyk-panel--primary,
+.tyk-panel--success,
+.tyk-panel--danger,
+.tyk-panel--warning {
   .tyk-panel__header {
     border: none;
     font-size: var(--lg-font-size);
diff --git a/src/components/Panel/Readme.md b/src/components/Panel/Readme.md
index ca8005f2..443f57fb 100644
--- a/src/components/Panel/Readme.md
+++ b/src/components/Panel/Readme.md
@@ -4,6 +4,26 @@
 ```js
 import Button from '../Button';
 <>
+<Panel>
+  <Panel.Header>Panel example (no theme)</Panel.Header>
+  <Panel.Body>
+    <label>label</label>
+    Panel body content
+  </Panel.Body>
+</Panel>
+<Panel collapsable theme="success" collapsibleIconPosition="left">
+  {
+    ({toggleCollapse}) => (
+      <>
+        <Panel.Header>Panel example</Panel.Header>
+        <Panel.Body>
+          <Button onClick={toggleCollapse} theme="primary">Collapse</Button>
+          Panel body content 222
+        </Panel.Body>
+      </>
+    )
+  }
+</Panel>
 <Panel theme="primary">
   <Panel.Header>Panel example</Panel.Header>
   <Panel.Body>