From b567f38a4f586b767eeff5013c6a20f1fe3d2371 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20Kry=C5=A1p=C3=ADn?= <crishpeen@gmail.com>
Date: Thu, 2 Nov 2023 10:33:57 +0100
Subject: [PATCH] Docs(web-react): Showcase Dropdown enhanced shadow Feature
 flag #DS-963

---
 .../Dropdown/demo/DropdownEnhancedShadow.tsx  | 24 +++++++++++++++++++
 .../src/components/Dropdown/demo/index.tsx    |  4 ++++
 2 files changed, 28 insertions(+)
 create mode 100644 packages/web-react/src/components/Dropdown/demo/DropdownEnhancedShadow.tsx

diff --git a/packages/web-react/src/components/Dropdown/demo/DropdownEnhancedShadow.tsx b/packages/web-react/src/components/Dropdown/demo/DropdownEnhancedShadow.tsx
new file mode 100644
index 0000000000..61789ffc5d
--- /dev/null
+++ b/packages/web-react/src/components/Dropdown/demo/DropdownEnhancedShadow.tsx
@@ -0,0 +1,24 @@
+import React, { Ref } from 'react';
+import { DropdownRenderProps } from '../../../types';
+import { Button } from '../../Button';
+import { Dropdown } from '..';
+import DropdownContentFactory from './DropdownContentFactory';
+import { dropdownContent } from './constants';
+
+const DropdownEnhancedShadow = () => {
+  const dropdownTrigger = ({ trigger: { className, ref, ...restOf } }: DropdownRenderProps) => (
+    <Button UNSAFE_className={className} ref={ref as Ref<HTMLButtonElement>} {...restOf}>
+      Finibus quis imperdiet, semper imperdiet aliquam
+    </Button>
+  );
+
+  return (
+    <div className="spirit-feature-enable-dropdown-enhanced-shadow">
+      <Dropdown renderTrigger={dropdownTrigger} placement="top-left">
+        <DropdownContentFactory content={dropdownContent} />
+      </Dropdown>
+    </div>
+  );
+};
+
+export default DropdownEnhancedShadow;
diff --git a/packages/web-react/src/components/Dropdown/demo/index.tsx b/packages/web-react/src/components/Dropdown/demo/index.tsx
index 8fcee9845d..53e070abf0 100644
--- a/packages/web-react/src/components/Dropdown/demo/index.tsx
+++ b/packages/web-react/src/components/Dropdown/demo/index.tsx
@@ -13,6 +13,7 @@ import DropdownDisabledAutoclose from './DropdownDisabledAutoclose';
 import DropdownLongerContent from './DropdownLongerContent';
 import DropdownFullwidthAll from './DropdownFullwidthAll';
 import DropdownFullwidthMobileOnly from './DropdownFullwidthMobileOnly';
+import DropdownEnhancedShadow from './DropdownEnhancedShadow';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
@@ -35,6 +36,9 @@ ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
       <DocsSection title="Full-width mode 'mobile-only'">
         <DropdownFullwidthMobileOnly />
       </DocsSection>
+      <DocsSection title="Feature Flag: Enhanced Shadow">
+        <DropdownEnhancedShadow />
+      </DocsSection>
     </IconsProvider>
   </React.StrictMode>,
 );