Docs(web-react): Showcase Dropdown enhanced shadow Feature flag #DS-963

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-dropdown-enable-enhanced-shadow">
+      <Dropdown renderTrigger={dropdownTrigger} placement="top-left">
+        <DropdownContentFactory content={dropdownContent} />
+      </Dropdown>
+    </div>
+  );
+};
+
+export default DropdownEnhancedShadow;

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>,
 );