From 4430fbbd6b869a9cb06f62abd2a2113ce69cd136 Mon Sep 17 00:00:00 2001
From: Adam Kudrna <adam.kudrna@lmc.eu>
Date: Tue, 14 Nov 2023 11:40:48 +0100
Subject: [PATCH] Docs(web-react): Add the missing demo of `DropdownModern`
 with enhanced shadow

---
 .../demo/DropdownModernEnhancedShadow.tsx     | 25 +++++++++++++++++++
 .../components/DropdownModern/demo/index.tsx  |  3 +++
 2 files changed, 28 insertions(+)
 create mode 100644 packages/web-react/src/components/DropdownModern/demo/DropdownModernEnhancedShadow.tsx

diff --git a/packages/web-react/src/components/DropdownModern/demo/DropdownModernEnhancedShadow.tsx b/packages/web-react/src/components/DropdownModern/demo/DropdownModernEnhancedShadow.tsx
new file mode 100644
index 0000000000..69bdfa1e77
--- /dev/null
+++ b/packages/web-react/src/components/DropdownModern/demo/DropdownModernEnhancedShadow.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import DropdownModern from '../../Dropdown/DropdownModern';
+import DropdownTrigger from '../../Dropdown/DropdownTrigger';
+import DropdownPopover from '../../Dropdown/DropdownPopover';
+import { Button } from '../../Button';
+import { dropdownContent } from './constants';
+import DropdownContentFactory from './DropdownContentFactory';
+
+const DropdownModernEnhancedShadow = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const onToggle = () => setIsOpen(!isOpen);
+
+  return (
+    <div className="spirit-feature-dropdown-enable-enhanced-shadow">
+      <DropdownModern id="DropdownModernEnhancedShadow" isOpen={isOpen} onToggle={onToggle} placement="top-left">
+        <DropdownTrigger elementType={Button}>Finibus quis imperdiet, semper imperdiet aliquam</DropdownTrigger>
+        <DropdownPopover>
+          <DropdownContentFactory content={dropdownContent} />
+        </DropdownPopover>
+      </DropdownModern>
+    </div>
+  );
+};
+
+export default DropdownModernEnhancedShadow;
diff --git a/packages/web-react/src/components/DropdownModern/demo/index.tsx b/packages/web-react/src/components/DropdownModern/demo/index.tsx
index 4fccf84705..c2386bebac 100644
--- a/packages/web-react/src/components/DropdownModern/demo/index.tsx
+++ b/packages/web-react/src/components/DropdownModern/demo/index.tsx
@@ -32,6 +32,9 @@ ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
       <DocsSection title="Full-width mode 'mobile-only'">
         <DropdownModernFullwidthMobileOnly />
       </DocsSection>
+      <DocsSection title="Feature Flag: Enhanced Shadow">
+        <DropdownModernEnhancedShadow />
+      </DocsSection>
     </IconsProvider>
   </React.StrictMode>,
 );