From a9598970cb6b0963b86c4762dda8f706218ef2ec Mon Sep 17 00:00:00 2001
From: Daniel Sil <daniel.sil@kiwi.com>
Date: Fri, 12 Jan 2024 17:06:12 +0100
Subject: [PATCH] docs: fix Popover example
---
docs/src/__examples__/Popover/DEFAULT.tsx | 61 ++++++++++++---------
docs/src/__examples__/Popover/TRIGGER.tsx | 65 +++++++++++++----------
2 files changed, 72 insertions(+), 54 deletions(-)
diff --git a/docs/src/__examples__/Popover/DEFAULT.tsx b/docs/src/__examples__/Popover/DEFAULT.tsx
index 81ab67c77f..0cdf60be50 100644
--- 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
index 0115f5ffe7..fc45ddaec6 100644
--- 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>
),
};