diff --git a/README.md b/README.md
index 52c1568c..e4e58d09 100755
--- a/README.md
+++ b/README.md
@@ -64,6 +64,12 @@ yarn add react-tooltip
React Tooltip is proud to be sponsored by [Frigade](https://frigade.com/?source=react-tooltip), a developer tool for building better product onboarding: guided tours, getting started checklists, announcements, etc.
+
+ 
+
+
+[Dopt](https://dopt.com/?source=react-tooltip) gives developers UI components and SDKs to build seamless onboarding and education experiences in minutes.
+
## Usage
1 . Import the CSS file to set default styling.
diff --git a/docs/src/components/AdsContainer/index.tsx b/docs/src/components/AdsContainer/index.tsx
index b3cbb435..406e4d8b 100644
--- a/docs/src/components/AdsContainer/index.tsx
+++ b/docs/src/components/AdsContainer/index.tsx
@@ -1,14 +1,15 @@
/* eslint-disable import/no-unresolved */
import React from 'react'
-import AdsContainerElement from '@site/src/components/AdsContainerElement'
-import BannerFrigade from '@site/src/components/BannerFrigade'
+// import AdsContainerElement from '@site/src/components/AdsContainerElement'
+import BannerSponsor from '@site/src/components/BannerSponsor'
import './styles.css'
const AdsContainer = () => {
return (
)
}
diff --git a/docs/src/components/BannerFrigade/index.tsx b/docs/src/components/BannerFrigade/index.tsx
deleted file mode 100644
index e188c156..00000000
--- a/docs/src/components/BannerFrigade/index.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-/* eslint-disable import/no-unresolved */
-import React from 'react'
-// @ts-ignore
-import LogoFrigade from '@site/static/img/sponsors/frigade.png'
-import './styles.css'
-
-declare global {
- interface Window {
- dataLayer?: any
- }
-}
-
-const BannerFrigade = () => {
- const onClickFrigadeBannerEventHandler = () => {
- if (typeof window !== 'undefined') {
- window.dataLayer = window.dataLayer || []
-
- window.dataLayer.push({
- event: `click_frigade_banner`,
- place: 'sidebar',
- })
- }
-
- return true
- }
-
- return (
-
- )
-}
-
-export default BannerFrigade
diff --git a/docs/src/components/BannerSponsor/index.tsx b/docs/src/components/BannerSponsor/index.tsx
new file mode 100644
index 00000000..a816a249
--- /dev/null
+++ b/docs/src/components/BannerSponsor/index.tsx
@@ -0,0 +1,64 @@
+/* eslint-disable import/no-unresolved */
+import React from 'react'
+// @ts-ignore
+import LogoFrigade from '@site/static/img/sponsors/frigade.png'
+// @ts-ignore
+import LogoDopt from '@site/static/img/sponsors/dopt.png'
+import './styles.css'
+
+declare global {
+ interface Window {
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ dataLayer?: any
+ }
+}
+
+const SPONSORS = {
+ frigade: {
+ logo: LogoFrigade,
+ title: 'Frigade',
+ href: 'https://frigade.com/',
+ },
+ dopt: {
+ logo: LogoDopt,
+ title: 'Dopt',
+ href: 'https://dopt.com/',
+ },
+}
+
+interface BannerSponsorProps {
+ sponsorKey: keyof typeof SPONSORS
+}
+
+const BannerSponsor = ({ sponsorKey }: BannerSponsorProps) => {
+ const sponsor = SPONSORS[sponsorKey]
+
+ const onClickSponsorBannerEventHandler = () => {
+ if (typeof window !== 'undefined') {
+ window.dataLayer = window.dataLayer || []
+
+ window.dataLayer.push({
+ event: `click_${sponsorKey}_banner`,
+ place: 'sidebar',
+ })
+ }
+
+ return true
+ }
+
+ return (
+
+ )
+}
+
+export default BannerSponsor
diff --git a/docs/src/components/BannerFrigade/styles.css b/docs/src/components/BannerSponsor/styles.css
similarity index 53%
rename from docs/src/components/BannerFrigade/styles.css
rename to docs/src/components/BannerSponsor/styles.css
index 3dc87573..6e149bf0 100644
--- a/docs/src/components/BannerFrigade/styles.css
+++ b/docs/src/components/BannerSponsor/styles.css
@@ -1,9 +1,9 @@
-.sponsor-frigade {
+.sponsor-banner {
/* same as `--carbon-max-char` */
- --frigade-max-char: 20ch;
+ --sponsor-max-char: 20ch;
display: flex;
flex-direction: column;
min-inline-size: 130px;
- max-inline-size: calc(130px + var(--frigade-max-char) + 8ch);
+ max-inline-size: calc(130px + var(--sponsor-max-char) + 8ch);
max-width: 377px;
}
diff --git a/docs/src/components/HomepageSponsored/index.tsx b/docs/src/components/HomepageSponsored/index.tsx
index b5035089..7d81db6e 100644
--- a/docs/src/components/HomepageSponsored/index.tsx
+++ b/docs/src/components/HomepageSponsored/index.tsx
@@ -36,6 +36,12 @@ const SponsorList: FeatureItem[] = [
link: 'https://frigade.com/?source=react-tooltip',
eventTitle: 'frigade',
},
+ {
+ title: 'Dopt',
+ src: require('@site/static/img/sponsors/dopt.png').default,
+ link: 'https://dopt.com/?source=react-tooltip',
+ eventTitle: 'dopt',
+ },
]
function Feature({ title, Svg, link }: FeatureItem) {
@@ -51,7 +57,7 @@ function Feature({ title, Svg, link }: FeatureItem) {
}
export default function HomepageSponsored(): JSX.Element {
- const onClickFrigadeBannerEventHandler = (title: string) => {
+ const onClickSponsorBannerEventHandler = (title: string) => {
if (typeof window !== 'undefined') {
window.dataLayer = window.dataLayer || []
@@ -71,7 +77,7 @@ export default function HomepageSponsored(): JSX.Element {
{SponsorList.map(({ link, title, src, eventTitle }, idx) => (
// eslint-disable-next-line react/no-array-index-key
-