feat(Feedback): Add a feedback button with qualtrics form (#4755)

Author: nicolethoen

packages/documentation-framework/app.js

@@ -11,6 +11,7 @@ import './components/cssVariables/cssVariables.css';
 import './components/tableOfContents/tableOfContents.css';
 import './components/example/example.css';
 import './components/footer/footer.css';
+import './components/feedbackButton/feedbackButton.css';
 import './layouts/sideNavLayout/sideNavLayout.css';
 
 const AppRoute = ({ child, title, path }) => {

packages/documentation-framework/components/feedbackButton/feedbackButton.css

@@ -0,0 +1,48 @@
+.ws-feedback-button-container {
+  position: fixed;
+  right: 0;
+  top: 50vh;
+  transform: translateY(-50%);
+  transform: rotate(-90deg);
+  z-index: 9999;
+  pointer-events: auto;
+}
+
+.ws-feedback-button {
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+}
+
+/* Ensure the button is visible on all screen sizes */
+@media (max-width: 768px) {
+  .ws-feedback-button-container {
+    right: -20px;
+  }
+}
+
+/* Ensure the button doesn't interfere with other elements */
+.ws-feedback-button-container .pf-v6-c-button {
+  min-width: auto;
+}
+
+/* Make the feedback modal taller */
+.ws-feedback-modal {
+  max-height: 90vh !important;
+}
+
+.ws-feedback-modal .pf-v6-c-modal-box {
+  max-height: 90vh !important;
+  height: 90vh !important;
+}
+
+.ws-feedback-modal .pf-v6-c-modal-box__body {
+  height: calc(90vh - 120px) !important;
+  overflow-y: auto;
+}
+
+/* Make the iframe fill the modal body */
+.ws-feedback-iframe {
+  width: 100% !important;
+  height: 100% !important;
+  border: none;
+  display: block;
+}

packages/documentation-framework/components/feedbackButton/feedbackButton.js

@@ -0,0 +1,44 @@
+import React, { useState } from 'react';
+import {
+  Button,
+  Modal,
+  ModalBody,
+  ModalHeader,
+  ModalFooter,
+  ModalVariant,
+  Label
+} from '@patternfly/react-core';
+import './feedbackButton.css';
+
+export const FeedbackButton = () => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const handleModalToggle = () => {
+    setIsModalOpen(!isModalOpen);
+  };
+
+  return (
+    <>
+      <div className="ws-feedback-button-container">
+        <Button variant="primary" size="sm" className="ws-feedback-button" onClick={handleModalToggle}>Give feedback</Button>
+      </div>
+
+      <Modal
+        variant={ModalVariant.large}
+        isOpen={isModalOpen}
+        onClose={handleModalToggle}
+        aria-label="PatternFly feedback modal"
+        aria-describedby="feedback-modal-description"
+        className="ws-feedback-modal"
+      >
+        <ModalBody tabIndex="0" id="feedback-modal-description">
+          <iframe 
+            src="https://www.feedback.redhat.com/jfe/form/SV_9MKBjq8H7muINMy" 
+            title="Give PatternFly feedback"
+            className="ws-feedback-iframe"
+          ></iframe>
+        </ModalBody>
+      </Modal>
+    </>
+  );
+};

packages/documentation-framework/components/index.js

@@ -10,4 +10,5 @@ export * from './topNav/topNav';
 export * from './link/link';
 export * from './tableOfContents/tableOfContents';
 export * from './inlineAlert/inlineAlert';
-export * from './themeSelector/themeSelector';
+export * from './themeSelector/themeSelector';
+export * from './feedbackButton/feedbackButton';

packages/documentation-framework/scripts/webpack/webpack.base.config.js

@@ -15,6 +15,7 @@ module.exports = (_env, argv) => {
     hasThemeSwitcher = false,
     hasHighContrastSwitcher = false,
     hasRTLSwitcher = false,
+    hasFeedbackButton = false,
     componentsData = {},
     sideNavItems = [],
     topNavItems = [],
@@ -145,6 +146,7 @@ module.exports = (_env, argv) => {
         'process.env.hasThemeSwitcher': JSON.stringify(hasThemeSwitcher),
         'process.env.hasHighContrastSwitcher': JSON.stringify(hasHighContrastSwitcher),
         'process.env.hasRTLSwitcher': JSON.stringify(hasRTLSwitcher),
+        'process.env.hasFeedbackButton': JSON.stringify(hasFeedbackButton),
         'process.env.componentsData': JSON.stringify(componentsData),
         'process.env.sideNavItems': JSON.stringify(sideNavItems),
         'process.env.topNavItems': JSON.stringify(topNavItems),

packages/documentation-framework/templates/mdx.js

@@ -18,7 +18,7 @@ import {
 import { css } from '@patternfly/react-styles';
 import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';
 import { Router, useLocation } from '@reach/router';
-import { CSSVariables, PropsTable, TableOfContents, Link, AutoLinkHeader, InlineAlert } from '../components';
+import { CSSVariables, PropsTable, TableOfContents, Link, AutoLinkHeader, InlineAlert, FeedbackButton } from '../components';
 import { capitalize, getTitle, slugger, trackEvent } from '../helpers';
 import './mdx.css';
 import { convertToReactComponent } from '@patternfly/ast-helpers';
@@ -167,6 +167,7 @@ const MDXChildTemplate = ({ Component, source, toc = [], index = 0, id }) => {
 };
 
 export const MDXTemplate = ({ title, sources = [], path, id, componentsData }) => {
+  const hasFeedbackButton = process.env.hasFeedbackButton;
   const isDeprecated =
     sources.some((source) => source.source === 'react-deprecated' || source.source === 'html-deprecated') &&
     !sources.some((source) => source.source === 'react' || source.source === 'html');
@@ -339,6 +340,7 @@ export const MDXTemplate = ({ title, sources = [], path, id, componentsData }) =
           )}
         </PageSection>
         <BackToTop className="ws-back-to-top" scrollableSelector="#ws-page-main" />
+        {hasFeedbackButton && <FeedbackButton />}
       </PageGroup>
     </React.Fragment>
   );

packages/documentation-site/patternfly-docs/pages/home.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Link } from '@patternfly/documentation-framework/components';
+import { Link, FeedbackButton } from '@patternfly/documentation-framework/components';
 import {
   Banner,
   Button,
@@ -289,6 +289,7 @@ const HomePage = () => (
     <PageSection isWidthLimited className="v6-stay-informed-cards">
       <AggregateCards />
     </PageSection>
+    <FeedbackButton />
   </React.Fragment>
 );
 

packages/documentation-site/patternfly-docs/patternfly-docs.config.js

@@ -9,6 +9,7 @@ if (process.env.EXTENSIONS_ONLY === 'true') {
     hasThemeSwitcher: true,
     hasHighContrastSwitcher: false,
     hasRTLSwitcher: false,
+    hasFeedbackButton: true,
     sideNavItems: [
       { section: 'extensions' }
     ],
@@ -29,6 +30,7 @@ if (process.env.EXTENSIONS_ONLY === 'true') {
     hasVersionSwitcher: true,
     hasDesignGuidelines: true,
     hasThemeSwitcher: true,
+    hasFeedbackButton: true,
     hasHighContrastSwitcher: false,
     componentsData,
     sideNavItems: [