Add new example for popover (#2470)

coingaming · Nov 8, 2023 · 2108e08 · 2108e08
1 parent 8973faf
commit 2108e08
Show file tree

Hide file tree

Showing 6 changed files with 392 additions and 51 deletions.
diff --git a/next-docs/pages/components/popover.tsx b/next-docs/pages/components/popover.tsx
@@ -7,6 +7,7 @@ import PropsTable from '../../components/PropsTable';
 import Default from '../../public/examples/popover/Default';
 import Position from '../../public/examples/popover/Position';
 import TooltipView from '../../public/examples/popover/TooltipView';
+import TooltipViewOpen from '../../public/examples/popover/TooltipViewOpen';
 import TriggerElements from '../../public/examples/popover/TriggerElements';
 import WithClose from '../../public/examples/popover/WithClose';
 import useComponent from '../../utils/useComponent';
@@ -73,6 +74,12 @@ const PagePopover = () => {
         code={examples ? examples.TooltipView : 'Loading'}
       />
 
+      <Preview
+        title="Tooltip view example with always open state"
+        preview={<TooltipViewOpen />}
+        code={examples ? examples.TooltipView : 'Loading'}
+      />
+
       <PropsTable
         title="Popover"
         data={[
@@ -110,6 +117,14 @@ const PagePopover = () => {
             default: '-',
             description: 'Tailwind classes for custom styles.',
           },
+          {
+            name: 'isStatic',
+            type: 'boolean',
+            required: false,
+            default: '-',
+            description:
+              'Whether the component should be always open and ignore the internally managed open/closed state.',
+          },
           {
             name: 'Render Props: ',
             type: '',

diff --git a/next-docs/public/examples/popover/TooltipViewOpen.tsx b/next-docs/public/examples/popover/TooltipViewOpen.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { Popover, Chip } from '@heathmont/moon-core-tw';
+
+const Example = () => {
+  return (
+    <Popover position="top">
+      <Popover.Trigger>
+        <Chip>Trigger</Chip>
+      </Popover.Trigger>
+      <Popover.Panel
+        isStatic
+        className="w-auto min-w-[12rem] overflow-y-visible p-3 rounded-moon-s-xs text-moon-12 text-bulma bg-goku"
+      >
+        This is the popover with arrow (tooltip)
+        <Popover.Arrow />
+      </Popover.Panel>
+    </Popover>
+  );
+};
+
+export default Example;