feat: add autoPositionDisable prop [MDS-839] (#2506)

coingaming · Nov 28, 2023 · 084c752 · 084c752
1 parent 6d2c2a5
commit 084c752
Show file tree

Hide file tree

Showing 7 changed files with 6,775 additions and 221 deletions.
diff --git a/next-docs/pages/components/popover.tsx b/next-docs/pages/components/popover.tsx
@@ -4,6 +4,7 @@ import ComponentPageDescription from '../../components/ComponentPageDescription'
 import type { ComponentNames } from '../../components/getComponent';
 import Layout from '../../components/Layout';
 import PropsTable from '../../components/PropsTable';
+import AutoPositionDisable from '../../public/examples/popover/AutoPositionDisable';
 import Default from '../../public/examples/popover/Default';
 import Position from '../../public/examples/popover/Position';
 import TooltipView from '../../public/examples/popover/TooltipView';
@@ -80,6 +81,12 @@ const PagePopover = () => {
         code={examples ? examples.TooltipView : 'Loading'}
       />
 
+      <Preview
+        title="Disable flip on component"
+        preview={<AutoPositionDisable />}
+        code={examples ? examples.AutoPositionDisable : 'Loading'}
+      />
+
       <PropsTable
         title="Popover"
         data={[
@@ -90,6 +97,13 @@ const PagePopover = () => {
             default: 'bottom',
             description: 'Set placement for popover',
           },
+          {
+            name: 'autoPositionDisable',
+            type: 'boolean',
+            required: false,
+            default: 'false',
+            description: 'Disable flip on component',
+          },
           {
             name: 'Render Props: ',
             type: '',

diff --git a/next-docs/public/examples/popover/AutoPositionDisable.tsx b/next-docs/public/examples/popover/AutoPositionDisable.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import { Popover, Button, MenuItem } from '@heathmont/moon-core-tw';
+import { OtherFrame } from '@heathmont/moon-icons-tw';
+
+const Example = () => {
+  return (
+    <Popover autoPositionDisable={true}>
+      <Popover.Trigger>
+        <Button>Toggle Popover</Button>
+      </Popover.Trigger>
+      <Popover.Panel className="p-2 flex flex-col gap-1">
+        <Content />
+      </Popover.Panel>
+    </Popover>
+  );
+};
+
+const Content: React.FC = () => (
+  <>
+    <MenuItem>
+      <span className="flex w-11 h-11 bg-gohan items-center justify-center rounded-lg">
+        <OtherFrame className="text-bulma text-moon-24" />
+      </span>
+      <MenuItem.MultiTitle
+        title="Tournaments"
+        text={<span>Best tournaments with streamers</span>}
+      />
+    </MenuItem>
+    <MenuItem>
+      <span className="flex w-11 h-11 bg-gohan items-center justify-center">
+        <OtherFrame className="text-bulma text-moon-24" />
+      </span>
+      <MenuItem.MultiTitle
+        title="Promotions"
+        text={<span> Your favourite games</span>}
+      />
+    </MenuItem>
+    <MenuItem>
+      <span className="flex w-11 h-11 bg-gohan items-center justify-center">
+        <OtherFrame className="text-bulma text-moon-24" />
+      </span>
+      <MenuItem.MultiTitle
+        title="Providers"
+        text={<span> Your favourite games</span>}
+      />
+    </MenuItem>
+  </>
+);
+
+export default Example;