Docs(web-react): Add Dropdown demo #DS-895

Container demo in web-react is now same as demo in web and web-twig

packages/web-react/src/components/Dropdown/demo/DropdownContentFactory.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Icon } from '../../Icon';
+
+type Props = {
+  content: Content[];
+};
+
+type Content = {
+  icon: string;
+  text: string;
+};
+
+const DropdownContentFactory = ({ content }: Props) => {
+  const lastRow = content.length - 1;
+
+  return (
+    <>
+      {content.map(({ icon, text }, index) => (
+        <a href={`#${icon}`} className={`d-flex ${index !== lastRow && 'mb-400'}`} key={icon}>
+          <Icon name={icon} UNSAFE_className="mr-400" />
+          <span>{text}</span>
+        </a>
+      ))}
+    </>
+  );
+};
+
+export default DropdownContentFactory;

packages/web-react/src/components/Dropdown/demo/DropdownDefault.tsx

@@ -0,0 +1,22 @@
+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 DropdownDefault = () => {
+  const dropdownTrigger = ({ trigger: { className, ref, ...restOf } }: DropdownRenderProps) => (
+    <Button UNSAFE_className={className} ref={ref as Ref<HTMLButtonElement>} {...restOf}>
+      Button as anchor
+    </Button>
+  );
+
+  return (
+    <Dropdown renderTrigger={dropdownTrigger}>
+      <DropdownContentFactory content={dropdownContent} />
+    </Dropdown>
+  );
+};
+
+export default DropdownDefault;

packages/web-react/src/components/Dropdown/demo/DropdownDisabledAutoclose.tsx

@@ -0,0 +1,22 @@
+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 DropdownDisabledAutoclose = () => {
+  const dropdownTrigger = ({ trigger: { className, ref, ...restOf } }: DropdownRenderProps) => (
+    <Button UNSAFE_className={className} ref={ref as Ref<HTMLButtonElement>} {...restOf}>
+      Button as anchor
+    </Button>
+  );
+
+  return (
+    <Dropdown renderTrigger={dropdownTrigger} enableAutoClose={false}>
+      <DropdownContentFactory content={dropdownContent} />
+    </Dropdown>
+  );
+};
+
+export default DropdownDisabledAutoclose;

packages/web-react/src/components/Dropdown/demo/DropdownFullwidthAll.tsx

@@ -0,0 +1,22 @@
+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 DropdownFullwidthAll = () => {
+  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 (
+    <Dropdown renderTrigger={dropdownTrigger} fullWidthMode="all" placement="top-left">
+      <DropdownContentFactory content={dropdownContent} />
+    </Dropdown>
+  );
+};
+
+export default DropdownFullwidthAll;

packages/web-react/src/components/Dropdown/demo/DropdownFullwidthMobileOnly.tsx

@@ -0,0 +1,22 @@
+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 DropdownFullwidthMobileOnly = () => {
+  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 (
+    <Dropdown renderTrigger={dropdownTrigger} fullWidthMode="mobile-only" placement="top-left">
+      <DropdownContentFactory content={dropdownContent} />
+    </Dropdown>
+  );
+};
+
+export default DropdownFullwidthMobileOnly;

packages/web-react/src/components/Dropdown/demo/DropdownLongerContent.tsx

@@ -0,0 +1,22 @@
+import React, { Ref } from 'react';
+import { DropdownRenderProps } from '../../../types';
+import { Button } from '../../Button';
+import { Dropdown } from '..';
+import DropdownContentFactory from './DropdownContentFactory';
+import { dropdownContentLonger } from './constants';
+
+const DropdownLongerContent = () => {
+  const dropdownTrigger = ({ trigger: { className, ref, ...restOf } }: DropdownRenderProps) => (
+    <Button UNSAFE_className={className} ref={ref as Ref<HTMLButtonElement>} {...restOf}>
+      Button as anchor
+    </Button>
+  );
+
+  return (
+    <Dropdown renderTrigger={dropdownTrigger}>
+      <DropdownContentFactory content={dropdownContentLonger} />
+    </Dropdown>
+  );
+};
+
+export default DropdownLongerContent;

packages/web-react/src/components/Dropdown/demo/DropdownTopRight.tsx

@@ -0,0 +1,22 @@
+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 DropdownTopRight = () => {
+  const dropdownTrigger = ({ trigger: { className, ref, ...restOf } }: DropdownRenderProps) => (
+    <Button UNSAFE_className={className} ref={ref as Ref<HTMLButtonElement>} {...restOf}>
+      Button as anchor
+    </Button>
+  );
+
+  return (
+    <Dropdown renderTrigger={dropdownTrigger} placement="top-right">
+      <DropdownContentFactory content={dropdownContent} />
+    </Dropdown>
+  );
+};
+
+export default DropdownTopRight;

packages/web-react/src/components/Dropdown/demo/constants.ts

@@ -0,0 +1,13 @@
+export const dropdownContent = [
+  { icon: 'info', text: 'Information' },
+  { icon: 'link', text: 'Bibendum aliquam, fusce integer sit amet congue non nulla aliquet enim' },
+  { icon: 'profile', text: 'Profile' },
+  { icon: 'help', text: 'Help' },
+];
+
+export const dropdownContentLonger = [
+  { icon: 'info', text: 'Bibendum aliquam, fusce integer sit amet congue non nulla aliquet enim' },
+  { icon: 'link', text: 'Nulla condimentum, purus commodo cursus non nulla rhoncus' },
+  { icon: 'profile', text: 'Mauris nunc, elementum enim in lacinia vitae quam placerat sem, euismod accumsan' },
+  { icon: 'help', text: 'Donec dui, nunc dui vel varius libero molestie nibh nunc' },
+];

packages/web-react/src/components/Dropdown/demo/index.tsx

@@ -5,27 +5,35 @@ import ReactDOM from 'react-dom/client';
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment, import/extensions, import/no-unresolved
 // @ts-ignore: No declaration file
 import icons from '@lmc-eu/spirit-icons/dist/icons';
-import { IconsProvider } from '../../../context';
 import DocsSection from '../../../../docs/DocsSections';
-import Dropdown from './Dropdown';
-import DropdownDisableAutoClose from './DropdownDisableAutoClose';
-import DropdownPlacements from './DropdownPlacements';
-import DropdownFullWidthMode from './DropdownFullWidthMode';
+import { IconsProvider } from '../../../context';
+import DropdownDefault from './DropdownDefault';
+import DropdownTopRight from './DropdownTopRight';
+import DropdownDisabledAutoclose from './DropdownDisabledAutoclose';
+import DropdownLongerContent from './DropdownLongerContent';
+import DropdownFullwidthAll from './DropdownFullwidthAll';
+import DropdownFullwidthMobileOnly from './DropdownFullwidthMobileOnly';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
     <IconsProvider value={icons}>
-      <DocsSection title="Default">
-        <Dropdown {...Dropdown.args} />
+      <DocsSection title="Basic usage with default align">
+        <DropdownDefault />
+      </DocsSection>
+      <DocsSection title="Usage with align to top right">
+        <DropdownTopRight />
+      </DocsSection>
+      <DocsSection title="Usage with disabled auto close">
+        <DropdownDisabledAutoclose />
       </DocsSection>
-      <DocsSection title="Disable Auto Close">
-        <DropdownDisableAutoClose />
+      <DocsSection title="Longer content">
+        <DropdownLongerContent />
       </DocsSection>
-      <DocsSection title="Placements">
-        <DropdownPlacements />
+      <DocsSection title="Full-width mode 'all'">
+        <DropdownFullwidthAll />
       </DocsSection>
-      <DocsSection title="Full Width Mode">
-        <DropdownFullWidthMode />
+      <DocsSection title="Full-width mode 'mobile-only'">
+        <DropdownFullwidthMobileOnly />
       </DocsSection>
     </IconsProvider>
   </React.StrictMode>,