Dopt sponsorship

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.
 
+<a href="https://dopt.com/?source=react-tooltip">
+  <img alt="Dopt" style="height: 250px" src="docs/static/img/sponsors/dopt.png" />
+</a>
+
+[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.

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 (
     <div className="fixed">
-      <BannerFrigade />
-      <AdsContainerElement />
+      <BannerSponsor sponsorKey="frigade" />
+      <BannerSponsor sponsorKey="dopt" />
+      {/* <AdsContainerElement /> */}
     </div>
   )
 }

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 (
+    <div className="sponsor-banner">
+      <a
+        href={`${sponsor.href}?source=react-tooltip`}
+        title={sponsor.title}
+        target="_blank"
+        rel="noreferrer"
+        onClick={onClickSponsorBannerEventHandler}
+      >
+        <img src={sponsor.logo} alt={sponsor.title} />
+      </a>
+    </div>
+  )
+}
+
+export default BannerSponsor

docs/src/components/BannerFrigade/styles.css → 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;
 }

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,15 +77,15 @@ export default function HomepageSponsored(): JSX.Element {
         <div className="row">
           {SponsorList.map(({ link, title, src, eventTitle }, idx) => (
             // eslint-disable-next-line react/no-array-index-key
-            <div key={idx} className={clsx('col col--12')}>
+            <div key={idx} className={clsx(`col col--${12 / SponsorList.length}`)}>
               <div className="text--center">
                 <a
                   href={link}
                   title={title}
                   target="_blank"
                   rel="noreferrer"
                   onClick={() => {
-                    onClickFrigadeBannerEventHandler(eventTitle)
+                    onClickSponsorBannerEventHandler(eventTitle)
                   }}
                 >
                   <img src={src} alt={title} width={480} />