Docs(web,web-twig,web-react): Add interactive demo of Dropdown plac…

…ements #DS-1037
lmc-eu · Nov 14, 2023 · deb054c · deb054c
1 parent 87af0cd
commit deb054c
Show file tree

Hide file tree

Showing 12 changed files with 820 additions and 433 deletions.
diff --git a/packages/web-react/src/components/Dropdown/demo/DropdownDefault.tsx b/packages/web-react/src/components/Dropdown/demo/DropdownDefault.tsx
diff --git a/packages/web-react/src/components/Dropdown/demo/DropdownPlacements.tsx b/packages/web-react/src/components/Dropdown/demo/DropdownPlacements.tsx
@@ -0,0 +1,176 @@
+import React, { ChangeEvent, Ref, useState } from 'react';
+import { DropdownRenderProps, PlacementDictionaryType } from '../../../types';
+import { Button } from '../../Button';
+import { Grid, GridItem } from '../../Grid';
+import { Radio } from '../../Radio';
+import { Dropdown } from '..';
+
+const DropdownPlacements = () => {
+  const [placement, setPlacement] = useState<PlacementDictionaryType>('bottom-left');
+
+  const handlePlacementChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setPlacement(e.target.value as PlacementDictionaryType);
+  };
+
+  const dropdownTrigger = ({ trigger: { className, ref, ...restOf } }: DropdownRenderProps) => (
+    <Button UNSAFE_className={className} ref={ref as Ref<HTMLButtonElement>} {...restOf}>
+      <span style={{ whiteSpace: 'nowrap' }}>{placement}</span>
+    </Button>
+  );
+
+  return (
+    <form autoComplete="off">
+      <Grid
+        cols={3}
+        UNSAFE_className="mx-auto"
+        UNSAFE_style={{ alignItems: 'center', justifyItems: 'center', maxWidth: '40rem' }}
+      >
+        <GridItem columnStart={2} rowStart={1}>
+          <Radio
+            name="placement"
+            isChecked={placement === 'top-left'}
+            isLabelHidden
+            onChange={handlePlacementChange}
+            id="placement_top_left"
+            label="top-left"
+            value="top-left"
+          />{' '}
+          <Radio
+            name="placement"
+            isChecked={placement === 'top'}
+            isLabelHidden
+            onChange={handlePlacementChange}
+            id="placement_top"
+            label="top"
+            value="top"
+          />{' '}
+          <Radio
+            name="placement"
+            isChecked={placement === 'top-right'}
+            isLabelHidden
+            onChange={handlePlacementChange}
+            id="placement_top_right"
+            label="top-right"
+            value="top-right"
+          />
+        </GridItem>
+        <GridItem columnStart={2} rowStart={3}>
+          <Radio
+            name="placement"
+            isChecked={placement === 'bottom-left'}
+            isLabelHidden
+            onChange={handlePlacementChange}
+            id="placement_bottom_left"
+            label="bottom-left"
+            value="bottom-left"
+          />{' '}
+          <Radio
+            name="placement"
+            isChecked={placement === 'bottom'}
+            isLabelHidden
+            onChange={handlePlacementChange}
+            id="placement_bottom"
+            label="bottom"
+            value="bottom"
+          />{' '}
+          <Radio
+            name="placement"
+            isChecked={placement === 'bottom-right'}
+            isLabelHidden
+            onChange={handlePlacementChange}
+            id="placement_bottom_right"
+            label="bottom-right"
+            value="bottom-right"
+          />
+        </GridItem>
+        <GridItem
+          columnStart={1}
+          rowStart={2}
+          UNSAFE_style={{ display: 'flex', flexDirection: 'column', justifySelf: 'start' }}
+        >
+          <Radio
+            name="placement"
+            isChecked={placement === 'left-top'}
+            isLabelHidden
+            onChange={handlePlacementChange}
+            id="placement_left_top"
+            label="left-top"
+            value="left-top"
+          />
+          <Radio
+            name="placement"
+            isChecked={placement === 'left'}
+            isLabelHidden
+            onChange={handlePlacementChange}
+            id="placement_left"
+            label="left"
+            value="left"
+          />
+          <Radio
+            name="placement"
+            isChecked={placement === 'left-bottom'}
+            isLabelHidden
+            onChange={handlePlacementChange}
+            id="placement_left_bottom"
+            label="left-bottom"
+            value="left-bottom"
+          />
+        </GridItem>
+        <GridItem
+          columnStart={3}
+          rowStart={2}
+          UNSAFE_style={{ display: 'flex', flexDirection: 'column', justifySelf: 'end' }}
+        >
+          <Radio
+            name="placement"
+            isChecked={placement === 'right-top'}
+            isLabelHidden
+            onChange={handlePlacementChange}
+            id="placement_right_top"
+            label="right-top"
+            value="right-top"
+          />
+          <Radio
+            name="placement"
+            isChecked={placement === 'right'}
+            isLabelHidden
+            onChange={handlePlacementChange}
+            id="placement_right"
+            label="right"
+            value="right"
+          />
+          <Radio
+            name="placement"
+            isChecked={placement === 'right-bottom'}
+            isLabelHidden
+            onChange={handlePlacementChange}
+            id="placement_right_bottom"
+            label="right-bottom"
+            value="right-bottom"
+          />
+        </GridItem>
+        <GridItem columnStart={2} rowStart={2}>
+          <div style={{ margin: '8rem auto' }}>
+            <Dropdown
+              enableAutoClose={false}
+              placement={placement as PlacementDictionaryType}
+              renderTrigger={dropdownTrigger}
+            >
+              <a href="#" className="d-flex mb-400">
+                Action
+              </a>
+              <a href="#" className="d-flex mb-400">
+                Another action
+              </a>
+              <a href="#" className="d-flex">
+                Something else here
+              </a>
+            </Dropdown>
+          </div>
+        </GridItem>
+      </Grid>
+    </form>
+  );
+};
+
+export default DropdownPlacements;
diff --git a/packages/web-react/src/components/Dropdown/demo/index.tsx b/packages/web-react/src/components/Dropdown/demo/index.tsx
@@ -7,8 +7,7 @@ import ReactDOM from 'react-dom/client';
 import icons from '@lmc-eu/spirit-icons/dist/icons';
 import DocsSection from '../../../../docs/DocsSections';
 import { IconsProvider } from '../../../context';
-import DropdownDefault from './DropdownDefault';
-import DropdownTopRight from './DropdownTopRight';
+import DropdownPlacements from './DropdownPlacements';
 import DropdownDisabledAutoclose from './DropdownDisabledAutoclose';
 import DropdownLongerContent from './DropdownLongerContent';
 import DropdownFullwidthAll from './DropdownFullwidthAll';
@@ -18,11 +17,8 @@ import DropdownEnhancedShadow from './DropdownEnhancedShadow';
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
     <IconsProvider value={icons}>
-      <DocsSection title="Basic usage with default align">
-        <DropdownDefault />
-      </DocsSection>
-      <DocsSection title="Usage with align to top right">
-        <DropdownTopRight />
+      <DocsSection title="Placements" stackAlignment="stretch">
+        <DropdownPlacements />
       </DocsSection>
       <DocsSection title="Usage with disabled auto close">
         <DropdownDisabledAutoclose />

diff --git a/packages/web-react/src/components/DropdownModern/demo/DropdownModernDefault.tsx b/packages/web-react/src/components/DropdownModern/demo/DropdownModernDefault.tsx