docs: fix Popover example

kiwicom · Jan 12, 2024 · 168e55b · 168e55b
1 parent f32397a
commit 168e55b
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 54 deletions.
diff --git a/docs/src/__examples__/Popover/DEFAULT.tsx b/docs/src/__examples__/Popover/DEFAULT.tsx
@@ -1,34 +1,43 @@
 import React from "react";
-import { Popover, Button, ButtonLink, Stack } from "@kiwicom/orbit-components";
+import {
+  Popover,
+  Button,
+  ButtonLink,
+  Stack,
+  OrbitProvider,
+  defaultTheme,
+} from "@kiwicom/orbit-components";
 import { QuestionCircle } from "@kiwicom/orbit-components/icons";
 
 export default {
   Example: () => (
-    <Popover
-      renderInPortal={false}
-      content={
-        <Stack spacing="small">
-          <ButtonLink
-            external
-            type="secondary"
-            fullWidth
-            href="https://orbit.kiwi/components/popover/react/"
-          >
-            Reference
-          </ButtonLink>
-          <ButtonLink
-            external
-            type="secondary"
-            fullWidth
-            href="https://orbit.kiwi/components/popover/"
-          >
-            Guidelines
-          </ButtonLink>
-        </Stack>
-      }
-    >
-      <Button circled title="Help" iconLeft={<QuestionCircle />} />
-    </Popover>
+    <OrbitProvider theme={defaultTheme} useId={React.useId}>
+      <Popover
+        renderInPortal={false}
+        content={
+          <Stack spacing="small">
+            <ButtonLink
+              external
+              type="secondary"
+              fullWidth
+              href="https://orbit.kiwi/components/popover/react/"
+            >
+              Reference
+            </ButtonLink>
+            <ButtonLink
+              external
+              type="secondary"
+              fullWidth
+              href="https://orbit.kiwi/components/popover/"
+            >
+              Guidelines
+            </ButtonLink>
+          </Stack>
+        }
+      >
+        <Button circled title="Help" iconLeft={<QuestionCircle />} />
+      </Popover>
+    </OrbitProvider>
   ),
   exampleKnobs: [
     {

diff --git a/docs/src/__examples__/Popover/TRIGGER.tsx b/docs/src/__examples__/Popover/TRIGGER.tsx
@@ -1,35 +1,44 @@
 import React from "react";
-import { Popover, Button, ButtonLink, Stack } from "@kiwicom/orbit-components";
+import {
+  Popover,
+  Button,
+  ButtonLink,
+  Stack,
+  OrbitProvider,
+  defaultTheme,
+} from "@kiwicom/orbit-components";
 import { ChevronDown } from "@kiwicom/orbit-components/icons";
 
 export default {
   Example: () => (
-    <Popover
-      renderInPortal={false}
-      content={
-        <Stack spacing="small">
-          <ButtonLink
-            external
-            type="secondary"
-            fullWidth
-            href="https://orbit.kiwi/components/popover/react/"
-          >
-            Reference
-          </ButtonLink>
-          <ButtonLink
-            external
-            type="secondary"
-            fullWidth
-            href="https://orbit.kiwi/components/popover/"
-          >
-            Guidelines
-          </ButtonLink>
-        </Stack>
-      }
-    >
-      <Button iconRight={<ChevronDown />} type="secondary">
-        Learn more
-      </Button>
-    </Popover>
+    <OrbitProvider theme={defaultTheme} useId={React.useId}>
+      <Popover
+        renderInPortal={false}
+        content={
+          <Stack spacing="small">
+            <ButtonLink
+              external
+              type="secondary"
+              fullWidth
+              href="https://orbit.kiwi/components/popover/react/"
+            >
+              Reference
+            </ButtonLink>
+            <ButtonLink
+              external
+              type="secondary"
+              fullWidth
+              href="https://orbit.kiwi/components/popover/"
+            >
+              Guidelines
+            </ButtonLink>
+          </Stack>
+        }
+      >
+        <Button iconRight={<ChevronDown />} type="secondary">
+          Learn more
+        </Button>
+      </Popover>
+    </OrbitProvider>
   ),
 };