From 8bc26957f370041eb054a536d6b2c42443105d60 Mon Sep 17 00:00:00 2001
From: Obed Vega <30850480+ObedVega@users.noreply.github.com>
Date: Tue, 10 Sep 2024 08:58:34 -0700
Subject: [PATCH] add feedback buttons (#128)

---------

Co-authored-by: Vega <obed.vega@teradata.com>
---
 src/components/Feedback/index.js          | 36 +++++++++++++++++++++++
 src/components/Feedback/styles.module.css | 33 +++++++++++++++++++++
 src/theme/DocItem/index.tsx               | 18 ++++++++++++
 3 files changed, 87 insertions(+)
 create mode 100644 src/components/Feedback/index.js
 create mode 100644 src/components/Feedback/styles.module.css
 create mode 100644 src/theme/DocItem/index.tsx

diff --git a/src/components/Feedback/index.js b/src/components/Feedback/index.js
new file mode 100644
index 0000000000..543a676c54
--- /dev/null
+++ b/src/components/Feedback/index.js
@@ -0,0 +1,36 @@
+import clsx from 'clsx';
+import styles from './styles.module.css';
+import BrowserOnly from '@docusaurus/BrowserOnly';
+import { useLocation } from 'react-router-dom';
+
+export default function FeedbackComponent() {
+    const location = useLocation();
+    const handleFeedback = (feedback) => {
+      const articleUrl = location.pathname;
+      if (typeof window !== 'undefined' && window.gtag) {
+        window.gtag('event', 'feedback_click', {
+          event_category: 'Feedback',
+          event_label: `Feedback Type: ${feedback}`, 
+          event_value: articleUrl, 
+        });
+      }
+    };
+
+    return (
+      <BrowserOnly>
+      {() => {
+        const Feedback = require('@teradata-web/react-components')?.Feedback;
+
+        return (
+          <div className={clsx(styles.feedbackContainer)}>
+            <Feedback 
+              label="Did this page help?"
+              labelForFeedback="Thank you for your feedback!"
+              onFeedBack={handleFeedback}  
+            />       
+          </div>
+        );
+      }}
+    </BrowserOnly>
+    );
+}
diff --git a/src/components/Feedback/styles.module.css b/src/components/Feedback/styles.module.css
new file mode 100644
index 0000000000..9aa9b4620a
--- /dev/null
+++ b/src/components/Feedback/styles.module.css
@@ -0,0 +1,33 @@
+.feedbackContainer {
+  width: 100%;          
+  max-width: 664px;       
+  padding: 10px 0;       
+  box-sizing: border-box;  
+}
+
+@media screen and (min-width: 997px) and (max-width: 1454px) {
+  .feedbackContainer {
+    width: 80%;
+  }
+}
+
+@media screen and (max-width: 1000px) {
+  .feedbackContainer {
+    max-width: 100%;      
+    padding: 10px 0 10px 0;  
+  }
+}
+
+
+@media screen and (max-width: 664px) {
+  .feedbackContainer {
+    padding: 0 15px 10px 15px;  
+  }
+}
+
+@media screen and (max-width: 663px) {
+  .feedbackContainer {
+    padding: 10px 0px;
+  }
+}
+ 
\ No newline at end of file
diff --git a/src/theme/DocItem/index.tsx b/src/theme/DocItem/index.tsx
new file mode 100644
index 0000000000..adc66c5da1
--- /dev/null
+++ b/src/theme/DocItem/index.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import DocItem from '@theme-original/DocItem';
+import type DocItemType from '@theme/DocItem';
+import type {WrapperProps} from '@docusaurus/types';
+import FeedbackComponent from '../../components/Feedback';
+
+type Props = WrapperProps<typeof DocItemType>;
+
+export default function DocItemWrapper(props: Props): JSX.Element {
+  return (
+    <>
+      <DocItem {...props} />
+      <FeedbackComponent />
+    </>
+  );
+}
+
+