### Minimal Setup

Source: https://github.com/patternfly/react-user-feedback/blob/main/_autodocs/integration-guide.md

A basic example of how to integrate the FeedbackModal component into your application.

```typescript
import React, { useState } from 'react';
import { FeedbackModal } from '@patternfly/react-user-feedback';

export function App() {
  const [isFeedbackOpen, setIsFeedbackOpen] = useState(false);

  return (
    <>
      <button onClick={() => setIsFeedbackOpen(true)}>
        Send Feedback
      </button>

      <FeedbackModal
        isOpen={isFeedbackOpen}
        onClose={() => setIsFeedbackOpen(false)}
        onShareFeedback="https://example.com/feedback"
      />
    </>
  );
}
```

--------------------------------

### Installation

Source: https://github.com/patternfly/react-user-feedback/blob/main/_autodocs/integration-guide.md

Install the necessary packages for @patternfly/react-user-feedback.

```bash
npm install @patternfly/react-user-feedback @patternfly/react-core @patternfly/react-icons
npm install react react-dom
```

--------------------------------

### CSS File Size Example

Source: https://github.com/patternfly/react-user-feedback/blob/main/_autodocs/styling-and-theming.md

Example of efficient CSS targeting for the feedback component.

```css
/* Good: Direct class targeting */
.chr-c-feedback-text-area {
  min-height: 150px;
}

/* Avoid: Complex selectors */
.chr-c-feedback-content .pf-c-form .pf-c-form__group .pf-c-form__label {
  /* Too specific */
}
```

--------------------------------

### Using the development server

Source: https://github.com/patternfly/react-user-feedback/blob/main/README.md

The development server runs and develops user feedback, and also contains documentation and working examples. To start the development server, use the `yarn start` terminal command.

```bash
yarn start 

```

--------------------------------

### Example 2: Customize Form Layout

Source: https://github.com/patternfly/react-user-feedback/blob/main/_autodocs/styling-and-theming.md

Example of CSS customizations for form elements like textarea and email input, and the footer.

```css
.chr-c-feedback-text-area {
  min-height: 200px;
  font-size: 14px;
  padding: 12px;
  border-radius: 4px;
}

.chr-c-feedback-email {
  font-weight: 600;
  margin-bottom: 8px;
}

.chr-c-feedback-footer {
  gap: 16px;
  margin-top: 24px;
}
```

--------------------------------

### Testing Custom Styles

Source: https://github.com/patternfly/react-user-feedback/blob/main/_autodocs/styling-and-theming.md

React testing example to verify custom CSS variables are applied to the feedback modal.

```typescript
import { render, screen } from '@testing-library/react';
import { FeedbackModal } from '@patternfly/react-user-feedback';

describe('Custom Feedback Styles', () => {
  it('applies custom CSS variables', () => {
    const { container } = render(
      <div style={{ '--pf-global--palette--primary': '#custom-color' } as React.CSSProperties}>
        <FeedbackModal
          isOpen={true}
          onClose={() => {}}
          onShareFeedback={async () => true}
        />
      </div>
    );

    const modal = container.querySelector('.chr-c-feedback-modal');
    const computedStyle = window.getComputedStyle(modal!);
    // Assert color is applied
  });
});
```

--------------------------------

### Critical CSS Example

Source: https://github.com/patternfly/react-user-feedback/blob/main/_autodocs/styling-and-theming.md

Example of inlining critical CSS for the modal to improve first-paint performance.

```typescript
const criticalStyles = `
  .chr-c-feedback-modal {
    display: none;
  }

  .chr-c-feedback-modal.pf-m-open {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
  }
`;

// Inline in head
<style>{criticalStyles}</style>
```

--------------------------------

### Backend Integration with Error Handling

Source: https://github.com/patternfly/react-user-feedback/blob/main/_autodocs/integration-guide.md

An advanced example demonstrating how to integrate the FeedbackModal with backend API calls, including error handling.

```typescript
import React, { useState } from 'react';
import { FeedbackModal } from '@patternfly/react-user-feedback';

export function AppWithBackend() {
  const [isFeedbackOpen, setIsFeedbackOpen] = useState(false);
  const [feedbackError, setFeedbackError] = useState<string | null>(null);

  const handleShareFeedback = async (
    email: string,
    feedback: string
  ): Promise<boolean> => {
    try {
      setFeedbackError(null);

      const response = await fetch('/api/feedback', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-CSRF-Token': getCsrfToken()
        },
        body: JSON.stringify({
          email,
          feedback,
          timestamp: new Date().toISOString(),
          userAgent: navigator.userAgent,
          url: window.location.href
        })
      });

      if (!response.ok) {
        const error = await response.json();
        setFeedbackError(error.message || 'Failed to submit feedback');
        return false;
      }

      return true;
    } catch (error) {
      console.error('Feedback submission error:', error);
      setFeedbackError(
        error instanceof Error ? error.message : 'Network error'
      );
      return false;
    }
  };

  const handleReportBug = async (
    email: string,
    bug: string
  ): Promise<boolean> => {
    try {
      const response = await fetch('/api/bugs', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          email,
          bug,
          timestamp: new Date().toISOString(),
          userAgent: navigator.userAgent,
          errorStack: getErrorStack()
        })
      });

      return response.ok;
    } catch (error) {
      console.error('Bug report error:', error);
      return false;
    }
  };

  const handleJoinMailingList = async (email: string): Promise<boolean> => {
    try {
      const response = await fetch('/api/mailing-list/subscribe', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          email,
          interests: ['product-research', 'user-testing']
        })
      });

      return response.ok;
    } catch (error) {
      console.error('Mailing list subscription error:', error);
      return false;
    }
  };

  return (
    <>
      {feedbackError && (
        <div className="error-banner">{feedbackError}</div>
      )}

      <button onClick={() => setIsFeedbackOpen(true)}>
        Help us improve
      </button>

      <FeedbackModal
        isOpen={isFeedbackOpen}
        onClose={() => setIsFeedbackOpen(false)}
        onShareFeedback={handleShareFeedback}
        onReportABug={handleReportBug}
        onJoinMailingList={handleJoinMailingList}
        onOpenSupportCase="https://support.example.com"
      />
    </>
  );
}

function getCsrfToken(): string {
  const token = document.querySelector('meta[name="csrf-token"]');
  return token ? token.getAttribute('content') || '' : '';
}

function getErrorStack(): string {
  try {
    throw new Error('Stack trace');
  } catch (error) {
    return error instanceof Error ? error.stack || '' : '';
  }
}
```

--------------------------------

### Installing dependencies

Source: https://github.com/patternfly/react-user-feedback/blob/main/README.md

To install dependencies for this project, use the `yarn install` terminal command.

```bash
yarn install 

```

--------------------------------

### Installation

Source: https://github.com/patternfly/react-user-feedback/blob/main/_autodocs/README.md

Install the @patternfly/react-user-feedback package using npm or yarn.

```bash
npm install @patternfly/react-user-feedback
# or
yarn add @patternfly/react-user-feedback
```

--------------------------------

### Example 3: Dark Mode Theme

Source: https://github.com/patternfly/react-user-feedback/blob/main/_autodocs/styling-and-theming.md

Example of CSS variables applied to achieve a dark mode theme for the feedback modal.

```typescript
const darkModeStyles = `
  .chr-c-feedback-modal {
    --pf-global--Color--100: #ffffff;
    --pf-global--BackgroundColor--100: #1a1a1a;
    --pf-global--BorderColor--100: #4a4a4a;
  }

  .chr-c-feedback-content {
    background-color: #1a1a1a;
    color: #ffffff;
  }

  .chr-c-feedback-content input,
  .chr-c-feedback-content textarea {
    background-color: #2a2a2a;
    color: #ffffff;
    border-color: #4a4a4a;
  }
`;
```

--------------------------------

### Styled Components Integration

Source: https://github.com/patternfly/react-user-feedback/blob/main/_autodocs/styling-and-theming.md

Example of using Styled Components to customize the feedback modal and text area, including dynamic theming.

```typescript
import styled from 'styled-components';
import { FeedbackModal } from '@patternfly/react-user-feedback';

const StyledModalWrapper = styled.div`
  .chr-c-feedback-modal {
    --pf-global--palette--primary: ${props => props.theme.primaryColor};
  }

  .chr-c-feedback-text-area {
    font-size: ${props => props.theme.fontSize}px;
    border-radius: ${props => props.theme.borderRadius}px;
  }

  .chr-c-feedback-footer {
    gap: ${props => props.theme.spacing}px;
  }
`;

export function App() {
  return (
    <StyledModalWrapper theme={myTheme}>
      <FeedbackModal {...props} />
    </StyledModalWrapper>
  );
}
```

--------------------------------

### Color Contrast for Accessibility

Source: https://github.com/patternfly/react-user-feedback/blob/main/_autodocs/styling-and-theming.md

CSS examples demonstrating good color contrast ratios for text and buttons to meet WCAG AA standards.

```css
/* Good: 4.5:1 contrast ratio */
.chr-c-feedback-content {
  color: #151515;           /* Dark text */
  background-color: #ffffff; /* Light background */
}

/* Ensure button text is readable */
.chr-c-feedback-footer button {
  color: #ffffff;
  background-color: #007bba;
}
```

--------------------------------

### Multi-Language Support Example

Source: https://github.com/patternfly/react-user-feedback/blob/main/_autodocs/integration-guide.md

This example demonstrates how to implement multi-language support for the FeedbackModal component by defining locale objects and using a React context to manage the current language. It includes a custom hook `useLanguage` and a provider `LanguageProvider` to manage language state. The `AppWithMultiLanguage` component shows how to use the `FeedbackModal` with the selected locale and how to submit feedback with the current language context.

```typescript
import React, { useState } from 'react';
import { FeedbackModal, FeedbackLocale } from '@patternfly/react-user-feedback';

const locales = {
  en: {
    back: "Back",
    bugReported: "Bug Reported",
    cancel: "Cancel",
    close: "Close",
    describeBug: "Describe the bug...",
    describeBugUrgentCases: "Describe the bug...",
    describeReportBug: "Describe the bug...",
    directInfluence: "influence",
    email: "Email",
    enterFeedback: "Enter your feedback",
    feedback: "Feedback",
    feedbackSent: "Feedback Sent",
    support: "Support",
    helpUsImproveHCC: "Help us improve...",
    howIsConsoleExperience: "How is your experience?",
    joinMailingList: "Join mailing list",
    informDirection: "Inform direction",
    informDirectionDescription: "By participating...",
    learnAboutResearchOpportunities: "Learn about opportunities...",
    openSupportCase: "Open a support case",
    problemProcessingRequest: "There was a problem...",
    getSupport: "Get support",
    reportABug: "Report a bug",
    responseSent: "Response sent",
    researchOpportunities: "Yes, I want to hear about opportunities",
    shareFeedback: "Share feedback",
    shareYourFeedback: "Share your feedback!",
    somethingWentWrong: "Something went wrong",
    submitFeedback: "Submit feedback",
    tellAboutExperience: "Tell us about your experience",
    teamWillReviewBug: "Our team will review...",
    thankYouForFeedback: "Thank you for your feedback",
    thankYouForInterest: "Thank you for your interest...",
    userResearchTeam: "User Research Team",
    weNeverSharePersonalInformation: "We never share..."
  },
  de: {
    back: "Zurück",
    bugReported: "Fehler gemeldet",
    cancel: "Abbrechen",
    close: "Schließen",
    describeBug: "Beschreiben Sie den Fehler...",
    describeBugUrgentCases: "Beschreiben Sie den Fehler...",
    describeReportBug: "Beschreiben Sie den Fehler...",
    directInfluence: "Einfluss",
    email: "E-Mail",
    enterFeedback: "Geben Sie Ihr Feedback ein",
    feedback: "Feedback",
    feedbackSent: "Feedback gesendet",
    support: "Unterstützung",
    helpUsImproveHCC: "Helfen Sie uns zu verbessern...",
    howIsConsoleExperience: "Wie ist Ihre Erfahrung?",
    joinMailingList: "Der Mailingliste beitreten",
    informDirection: "Richtung beeinflussen",
    informDirectionDescription: "Durch Teilnahme...",
    learnAboutResearchOpportunities: "Lernen Sie von Möglichkeiten...",
    openSupportCase: "Support-Fall öffnen",
    problemProcessingRequest: "Es gab ein Problem...",
    getSupport: "Hilfe erhalten",
    reportABug: "Fehler melden",
    responseSent: "Antwort gesendet",
    researchOpportunities: "Ja, ich möchte über Möglichkeiten hören",
    shareFeedback: "Feedback teilen",
    shareYourFeedback: "Teilen Sie Ihr Feedback!",
    somethingWentWrong: "Etwas ist schief gelaufen",
    submitFeedback: "Feedback einreichen",
    tellAboutExperience: "Erzählen Sie uns von Ihrer Erfahrung",
    teamWillReviewBug: "Unser Team wird...",
    thankYouForFeedback: "Danke für Ihr Feedback",
    thankYouForInterest: "Danke für Ihr Interesse...",
    userResearchTeam: "User Research Team",
    weNeverSharePersonalInformation: "Wir teilen nie..."
  }
};

interface LanguageContextType {
  language: string;
  setLanguage: (lang: string) => void;
}

const LanguageContext = React.createContext<LanguageContextType | undefined>(
  undefined
);

export function LanguageProvider({ children }: { children: React.ReactNode }) {
  const [language, setLanguage] = useState('en');

  return (
    <LanguageContext.Provider value={{ language, setLanguage }}>
      {children}
    </LanguageContext.Provider>
  );
}

export function useLanguage(): LanguageContextType {
  const context = React.useContext(LanguageContext);
  if (!context) {
    throw new Error('useLanguage must be used within LanguageProvider');
  }
  return context;
}

export function AppWithMultiLanguage() {
  const [isFeedbackOpen, setIsFeedbackOpen] = useState(false);
  const { language } = useLanguage();

  const currentLocale = locales[language as keyof typeof locales] as FeedbackLocale || locales.en;

  return (
    <>
      <button onClick={() => setIsFeedbackOpen(true)}>
        {currentLocale.shareFeedback}
      </button>

      <FeedbackModal
        isOpen={isFeedbackOpen}
        onClose={() => setIsFeedbackOpen(false)}
        onShareFeedback={async (email, feedback) => {
          // Submit with language context
          const response = await fetch('/api/feedback', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ email, feedback, language })
          });
          return response.ok;
        }}
        feedbackLocale={currentLocale}
      />
    </>
  );
}

```

--------------------------------

### Installation

Source: https://github.com/patternfly/react-user-feedback/blob/main/_autodocs/00-START-HERE.txt

Install the react-user-feedback package using npm.

```bash
npm install @patternfly/react-user-feedback
```

--------------------------------

### Focus Indicators for Accessibility

Source: https://github.com/patternfly/react-user-feedback/blob/main/_autodocs/styling-and-theming.md

CSS examples showing how to provide visible focus indicators for interactive elements, avoiding the removal of default indicators.

```css
/* Good: visible focus indicator */
.chr-c-feedback-content input:focus,
.chr-c-feedback-content textarea:focus {
  outline: 2px solid #007bba;
  outline-offset: 2px;
}

/* Avoid: removed focus indicator */
.chr-c-feedback-content input:focus {
  outline: none; /* Bad for accessibility */
}
```

--------------------------------

### isOpen Prop Example

Source: https://github.com/patternfly/react-user-feedback/blob/main/_autodocs/configuration.md

Example demonstrating how to control the modal's visibility using the isOpen prop and a state variable.

```typescript
const [isModalOpen, setIsModalOpen] = useState(false);

<>
  <button onClick={() => setIsModalOpen(true)}>Send Feedback</button>
  <FeedbackModal
    isOpen={isModalOpen}
    onClose={() => setIsModalOpen(false)}
    // ... other props
  />
</>
```

--------------------------------

### Example 1: Change Primary Color

Source: https://github.com/patternfly/react-user-feedback/blob/main/_autodocs/styling-and-theming.md

Example of how to change the primary color of the modal and its primary button.

```typescript
const styles = `
  .chr-c-feedback-modal {
    --pf-global--palette--primary: #007bba;
  }

  .chr-c-feedback-modal button[variant="primary"] {
    background-color: var(--pf-global--palette--primary);
  }
`;

export function App() {
  return (
    <>
      <style>{styles}</style>
      <FeedbackModal {...props} />
    </>
  );
}
```

--------------------------------

### Example for onOpenSupportCase

Source: https://github.com/patternfly/react-user-feedback/blob/main/_autodocs/configuration.md

Provides a URL to open a support case in a new tab.

```typescript
<FeedbackModal
  onOpenSupportCase="https://support.example.com/new-case"
  // ... other props
/>
```

--------------------------------

### Unit Tests with Jest/React Testing Library

Source: https://github.com/patternfly/react-user-feedback/blob/main/_autodocs/integration-guide.md

Example of unit tests for the FeedbackModal component using Jest and React Testing Library, covering submission with email and research opt-in.

```typescript
import { render, screen, fireEvent } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { FeedbackModal } from '@patternfly/react-user-feedback';

describe('FeedbackModal', () => {
  it('submits feedback with email', async () => {
    const onClose = jest.fn();
    const onShareFeedback = jest.fn().mockResolvedValue(true);

    render(
      <FeedbackModal
        isOpen={true}
        onClose={onClose}
        onShareFeedback={onShareFeedback}
      />
    );

    // Find and click the feedback card
    const feedbackCard = screen.getByText('Share feedback');
    fireEvent.click(feedbackCard);

    // Enter feedback
    const textarea = screen.getByRole('textbox', { name: /feedback/i });
    await userEvent.type(textarea, 'Great product!');

    // Check research opt-in
    const checkbox = screen.getByRole('checkbox');
    await userEvent.click(checkbox);

    // Enter email
    const emailInput = screen.getByLabelText('Email');
    await userEvent.type(emailInput, 'user@example.com');

    // Submit
    const submitButton = screen.getByText('Submit');
    await userEvent.click(submitButton);

    expect(onShareFeedback).toHaveBeenCalledWith(
      'user@example.com',
      'Great product!'
    );
  });
});
```

--------------------------------

### Debugging Styles Example

Source: https://github.com/patternfly/react-user-feedback/blob/main/_autodocs/styling-and-theming.md

JavaScript snippet to check computed CSS variable values in the browser console.

```javascript
// In console, check computed style
const modal = document.querySelector('.chr-c-feedback-modal');
const style = window.getComputedStyle(modal);
console.log(style.getPropertyValue('--pf-global--palette--primary'));
```

--------------------------------

### CSS Overrides for Styling Customization

Source: https://github.com/patternfly/react-user-feedback/blob/main/_autodocs/integration-guide.md

Provides an example of how to customize the styling of the FeedbackModal using CSS overrides, targeting specific classes to modify appearance.

```typescript
import '@patternfly/react-user-feedback/dist/esm/Feedback/Feedback.css';

const styles = `
  .chr-c-feedback-modal {
    --pf-global--palette--primary: #007bba;
  }

  .chr-c-feedback-footer-button {
    font-weight: 600;
  }

  .chr-c-feedback-text-area {
    min-height: 150px;
  }
`;

export function StyledApp() {
  return (
    <>
      <style>{styles}</style>
      {/* Your app content */}
    </>
  );
}
```

--------------------------------

### Emotion Integration

Source: https://github.com/patternfly/react-user-feedback/blob/main/_autodocs/styling-and-theming.md

Example of using Emotion to apply styles to the feedback modal and text area.

```typescript
import { css } from '@emotion/react';
import { FeedbackModal } from '@patternfly/react-user-feedback';

const feedbackStyles = css`
  .chr-c-feedback-modal {
    --pf-global--palette--primary: #007bba;
  }

  .chr-c-feedback-text-area {
    min-height: 150px;
    font-size: 14px;
  }
`;

export function App() {
  return (
    <div css={feedbackStyles}>
      <FeedbackModal {...props} />
    </div>
  );
}
```

--------------------------------

### Tailwind CSS Integration

Source: https://github.com/patternfly/react-user-feedback/blob/main/_autodocs/styling-and-theming.md

Example of integrating Tailwind CSS by importing PatternFly CSS and using standard CSS with Tailwind utilities for customization.

```typescript
import '@patternfly/react-user-feedback/dist/esm/Feedback/Feedback.css';
import '@patternfly/react-core/dist/styles/base.css';

const tailwindStyles = `
  @layer components {
    .chr-c-feedback-modal {
      @apply max-w-2xl mx-auto;
    }

    .chr-c-feedback-text-area {
      @apply p-3 border rounded;
    }
  }
`;

export function App() {
  return (
    <>
      <style>{tailwindStyles}</style>
      <FeedbackModal {...props} />
    </>
  );
}
```

--------------------------------

### Internationalization Example

Source: https://github.com/patternfly/react-user-feedback/blob/main/_autodocs/README.md

Shows how to provide custom locale strings for internationalization, using Spanish as an example.

```typescript
const spanishLocale: FeedbackLocale = {
  back: "Atrás",
  bugReported: "Fallo reportado",
  cancel: "Cancelar",
  // ... 34 more properties
};

<FeedbackModal
  feedbackLocale={spanishLocale}
  // ...
/>
```

--------------------------------

### Analytics Integration

Source: https://github.com/patternfly/react-user-feedback/blob/main/_autodocs/integration-guide.md

This example shows how to integrate analytics tracking with the FeedbackModal. It defines an AnalyticsService to track events like feedback submission and modal closure, and then uses these tracking methods within the modal's event handlers.

```typescript
import React, { useState } from 'react';
import { FeedbackModal } from '@patternfly/react-user-feedback';

interface AnalyticsEvent {
  eventName: string;
  properties: Record<string, unknown>;
}

class AnalyticsService {
  static track(event: AnalyticsEvent): void {
    console.log('Analytics:', event);
    // Send to analytics backend
    fetch('/api/analytics', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(event)
    }).catch(console.error);
  }
}

export function AppWithAnalytics() {
  const [isFeedbackOpen, setIsFeedbackOpen] = useState(false);

  const handleCloseFeedback = () => {
    setIsFeedbackOpen(false);
    AnalyticsService.track({
      eventName: 'feedback_modal_closed',
      properties: { timestamp: new Date().toISOString() }
    });
  };

  const handleShareFeedback = async (
    email: string,
    feedback: string
  ): Promise<boolean> => {
    AnalyticsService.track({
      eventName: 'feedback_submitted',
      properties: {
        hasEmail: !!email,
        feedbackLength: feedback.length,
        timestamp: new Date().toISOString()
      }
    });

    try {
      const response = await fetch('/api/feedback', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email, feedback })
      });

      if (!response.ok) {
        AnalyticsService.track({
          eventName: 'feedback_submission_failed',
          properties: { status: response.status }
        });
      }

      return response.ok;
    } catch (error) {
      AnalyticsService.track({
        eventName: 'feedback_submission_error',
        properties: {
          error: error instanceof Error ? error.message : 'Unknown error'
        }
      });
      return false;
    }
  };

  const handleReportBug = async (
    email: string,
    bug: string
  ): Promise<boolean> => {
    AnalyticsService.track({
      eventName: 'bug_reported',
      properties: {
        bugLength: bug.length,
        hasEmail: !!email
      }
    });

    try {
      const response = await fetch('/api/bugs', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email, bug })
      });
      return response.ok;
    } catch (error) {
      return false;
    }
  };

  return (
    <>
      <button onClick={() => setIsFeedbackOpen(true)}>
        Send Feedback
      </button>

      <FeedbackModal
        isOpen={isFeedbackOpen}
        onClose={handleCloseFeedback}
        onShareFeedback={handleShareFeedback}
        onReportABug={handleReportBug}
      />
    </>
  );
}

```

--------------------------------

### onClose Prop Example

Source: https://github.com/patternfly/react-user-feedback/blob/main/_autodocs/configuration.md

Example of the onClose prop, showing how to close the modal and log analytics.

```typescript
<FeedbackModal
  onClose={() => {
    setIsModalOpen(false);
    logAnalytics('feedback_modal_closed');
  }}
  // ... other props
/>
```

--------------------------------

### email Prop Example

Source: https://github.com/patternfly/react-user-feedback/blob/main/_autodocs/configuration.md

Example of pre-populating the email field using the email prop.

```typescript
<FeedbackModal
  email="user@example.com"
  // ... other props
/>
```

--------------------------------

### URL Handler Example

Source: https://github.com/patternfly/react-user-feedback/blob/main/_autodocs/internal-architecture.md

Example of a URL handler.

```typescript
typeof onShareFeedback === 'string'
  ? window.open(onShareFeedback, '_blank')
  : setModalPage('feedbackOne');
```

--------------------------------

### Direct Usage Example

Source: https://github.com/patternfly/react-user-feedback/blob/main/_autodocs/api-reference-FeedbackForm.md

Example of importing and using FeedbackForm directly for custom implementations.

```typescript
import React, { useState } from 'react';
import { FeedbackForm } from '@patternfly/react-user-feedback/Feedback/FeedbackForm';

function CustomFeedbackForm() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const handleSubmit = (email: string, feedback: string, subscribed: boolean) => {
    console.log('Form submitted:', { email, feedback, subscribed });
  };

  return (
    <FeedbackForm
      email=""
      onCloseModal={() => setIsModalOpen(false)}
      onSubmit={handleSubmit}
      onClickBack={() => setIsModalOpen(false)}
      handleFeedbackError={() => console.error('Form error')}
      modalTitle="Share Your Feedback"
      modalDescription="Tell us what you think"
      textareaLabel="Describe your feedback"
      feedbackType="Feedback"
      checkboxDescription="I would like to hear about research opportunities"
      submitTitle="Submit"
    />
  );
}
```

--------------------------------

### Callback Handler Example

Source: https://github.com/patternfly/react-user-feedback/blob/main/_autodocs/internal-architecture.md

Example of a callback handler.

```typescript
typeof onShareFeedback === 'function'
  ? (results = onShareFeedback(email, textAreaValue))
  : (results = true);
```

--------------------------------

### Smooth Transitions

Source: https://github.com/patternfly/react-user-feedback/blob/main/_autodocs/styling-and-theming.md

CSS for smooth opacity transitions on the modal and a slide-in animation for the content.

```css
.chr-c-feedback-modal {
  transition: opacity 200ms ease-in-out;
}

.chr-c-feedback-content {
  animation: slideIn 300ms ease-out;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
```

--------------------------------

### Styling Issues

Source: https://github.com/patternfly/react-user-feedback/blob/main/_autodocs/integration-guide.md

Imports the necessary CSS files for styling the FeedbackModal and base PatternFly styles.

```typescript
import '@patternfly/react-user-feedback/dist/esm/Feedback/Feedback.css';
import '@patternfly/react-core/dist/styles/base.css';
```

--------------------------------

### Building the extension

Source: https://github.com/patternfly/react-user-feedback/blob/main/README.md

Once dependencies are installed, you can build user feedback locally using the `yard build` terminal command.

```bash
yarn build

```

--------------------------------

### Additional PatternFly Styles

Source: https://github.com/patternfly/react-user-feedback/blob/main/_autodocs/styling-and-theming.md

For complete styling, also import PatternFly base styles.

```typescript
import '@patternfly/react-core/dist/styles/base.css';
import '@patternfly/react-core/dist/styles/base.min.css';
```

--------------------------------

### Conditional Feature Display

Source: https://github.com/patternfly/react-user-feedback/blob/main/_autodocs/integration-guide.md

This example demonstrates how to conditionally render features of the FeedbackModal based on feature flags. It shows how to set up feature flags and use them to determine whether to enable options like bug reporting, research sign-up, or a support link.

```typescript
import React, { useState } from 'react';
import { FeedbackModal } from '@patternfly/react-user-feedback';

interface FeatureFlags {
  enableBugReporting: boolean;
  enableResearchSignup: boolean;
  enableSupportLink: boolean;
}

export function AppWithFeatureFlags() {
  const [isFeedbackOpen, setIsFeedbackOpen] = useState(false);

  // Load feature flags from server or config
  const flags: FeatureFlags = {
    enableBugReporting: true,
    enableResearchSignup: true,
    enableSupportLink: false
  };

  return (
    <>
      <button onClick={() => setIsFeedbackOpen(true)}>
        Feedback
      </button>

      <FeedbackModal
        isOpen={isFeedbackOpen}
        onClose={() => setIsFeedbackOpen(false)}
        onShareFeedback={async (email, feedback) => {
          // Always available
          return submitFeedback(email, feedback);
        }}
        onReportABug={
          flags.enableBugReporting
            ? async (email, bug) => submitBug(email, bug)
            : undefined
        }
        onJoinMailingList={
          flags.enableResearchSignup
            ? async (email) => subscribeToResearch(email)
            : undefined
        }
        onOpenSupportCase={
          flags.enableSupportLink
            ? 'https://support.example.com'
            : undefined
        }
      />
    </>
  );
}

async function submitFeedback(email: string, feedback: string): Promise<boolean> {
  const response = await fetch('/api/feedback', {
    method: 'POST',
    body: JSON.stringify({ email, feedback })
  });
  return response.ok;
}

async function submitBug(email: string, bug: string): Promise<boolean> {
  const response = await fetch('/api/bugs', {
    method: 'POST',
    body: JSON.stringify({ email, bug })
  });
  return response.ok;
}

async function subscribeToResearch(email: string): Promise<boolean> {
  const response = await fetch('/api/research/subscribe', {
    method: 'POST',
    body: JSON.stringify({ email })
  });
  return response.ok;
}

```

--------------------------------

### Image Sizing Styles

Source: https://github.com/patternfly/react-user-feedback/blob/main/_autodocs/styling-and-theming.md

CSS to control the sizing and display of images within the feedback component.

```css
.chr-c-feedback-image img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}
```

--------------------------------

### Multi-Language Support Example

Source: https://github.com/patternfly/react-user-feedback/blob/main/_autodocs/api-reference-LocaleContext.md

This example demonstrates how to implement multi-language support for the FeedbackModal component by providing different locale objects based on the selected language.

```typescript
import React, { useState } from 'react';
import { FeedbackModal, FeedbackLocale } from '@patternfly/react-user-feedback';

const locales: Record<string, FeedbackLocale> = {
  en: {
    back: "Back",
    bugReported: "Bug Reported",
    cancel: "Cancel",
    close: "Close",
    describeBug: "Describe the bug...",
    describeBugUrgentCases: "Describe the bug...",
    describeReportBug: "Describe the bug...",
    directInfluence: "direct influence",
    email: "Email",
    enterFeedback: "Enter your feedback",
    feedback: "Feedback",
    feedbackSent: "Feedback Sent",
    support: "Support",
    helpUsImproveHCC: "Help us improve...",
    howIsConsoleExperience: "How is your experience?",
    joinMailingList: "Join mailing list",
    informDirection: "Inform the direction",
    informDirectionDescription: "By participating...",
    learnAboutResearchOpportunities: "Learn about opportunities...",
    openSupportCase: "Open a support case",
    problemProcessingRequest: "There was a problem...",
    getSupport: "Get help and support",
    reportABug: "Report a bug",
    responseSent: "Response sent",
    researchOpportunities: "Yes, I would like to hear...",
    shareFeedback: "Share feedback",
    shareYourFeedback: "Share your feedback!",
    somethingWentWrong: "Something went wrong",
    submitFeedback: "Submit feedback",
    tellAboutExperience: "Tell us about your experience",
    teamWillReviewBug: "Our team will review...",
    thankYouForFeedback: "Thank you for your feedback",
    thankYouForInterest: "Thank you for your interest...",
    userResearchTeam: "User Research Team",
    weNeverSharePersonalInformation: "We never share..."
  },
  es: {
    back: "Atrás",
    bugReported: "Fallo reportado",
    cancel: "Cancelar",
    close: "Cerrar",
    // ... Spanish translations
  },
  fr: {
    back: "Retour",
    bugReported: "Bogue signalé",
    cancel: "Annuler",
    close: "Fermer",
    // ... French translations
  }
};

function App() {
  const [language, setLanguage] = useState('en');
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <select value={language} onChange={(e) => setLanguage(e.target.value)}>
        <option value="en">English</option>
        <option value="es">Español</option>
        <option value="fr">Français</option>
      </select>

      <FeedbackModal
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        onShareFeedback={handleFeedback}
        feedbackLocale={locales[language]}
      />
    </div>
  );
}

```

--------------------------------

### Common Variables to Override

Source: https://github.com/patternfly/react-user-feedback/blob/main/_autodocs/styling-and-theming.md

Common CSS variables that can be overridden for theming.

```css
/* Primary color */
--pf-global--palette--primary: #007bba;

/* Success color */
--pf-global--success-color--100: #3f9c35;

/* Danger/Error color */
--pf-global--danger-color--100: #c9190b;

/* Text color */
--pf-global--Color--100: #151515;

/* Background color */
--pf-global--BackgroundColor--100: #ffffff;

/* Border color */
--pf-global--BorderColor--100: #d2d2d2;

/* Spacing unit */
--pf-global--spacer--md: 1rem;
--pf-global--spacer--lg: 1.5rem;
```

--------------------------------

### RTL Support

Source: https://github.com/patternfly/react-user-feedback/blob/main/_autodocs/styling-and-theming.md

CSS to customize layout for Right-to-Left (RTL) languages.

```css
[dir="rtl"] .chr-c-feedback-flex {
  flex-direction: row-reverse;
}

[dir="rtl"] .chr-c-feedback-footer {
  flex-direction: row-reverse;
}
```

--------------------------------

### Modal Not Appearing

Source: https://github.com/patternfly/react-user-feedback/blob/main/_autodocs/integration-guide.md

Ensures the isOpen prop is set to true for the FeedbackModal to appear.

```typescript
<FeedbackModal
  isOpen={isOpen}  // Must be true
  onClose={() => setIsOpen(false)}
  onShareFeedback={handler}
/>
```

--------------------------------

### Basic Usage

Source: https://github.com/patternfly/react-user-feedback/blob/main/_autodocs/00-START-HERE.txt

Example of how to use the FeedbackModal component with required props.

```javascript
import { FeedbackModal } from '@patternfly/react-user-feedback';

<FeedbackModal
  isOpen={isOpen}
  onClose={() => setIsOpen(false)}
  onShareFeedback={handleFeedback}
/>
```

--------------------------------

### Basic Usage

Source: https://github.com/patternfly/react-user-feedback/blob/main/_autodocs/README.md

Basic example of how to use the FeedbackModal component in a React application.

```typescript
import React, { useState } from 'react';
import { FeedbackModal } from '@patternfly/react-user-feedback';

function App() {
  const [isOpen, setIsOpen] = useState(false);

  const handleFeedback = async (email: string, feedback: string) => {
    const response = await fetch('/api/feedback', {
      method: 'POST',
      body: JSON.stringify({ email, feedback })
    });
    return response.ok;
  };

  return (
    <>
      <button onClick={() => setIsOpen(true)}>Send Feedback</button>
      <FeedbackModal
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        onShareFeedback={handleFeedback}
      />
    </>
  );
}
```

--------------------------------

### Example - Custom Locale (German) feedbackLocale

Source: https://github.com/patternfly/react-user-feedback/blob/main/_autodocs/configuration.md

Shows how to provide a custom locale object for the FeedbackModal component, using German strings as an example.

```typescript
const germanLocale: FeedbackLocale = {
  back: "Zurück",
  bugReported: "Fehler gemeldet",
  cancel: "Abbrechen",
  close: "Schließen",
  describeBug: "Beschreiben Sie den Fehler...",
  describeBugUrgentCases: "Beschreiben Sie den Fehler...",
  describeReportBug: "Beschreiben Sie den Fehler...",
  directInfluence: "direkt beeinflussen",
  email: "E-Mail",
  enterFeedback: "Geben Sie Ihr Feedback ein",
  feedback: "Feedback",
  feedbackSent: "Feedback gesendet",
  support: "Unterstützung",
  helpUsImproveHCC: "Helfen Sie uns, unsere Produkte zu verbessern...",
  howIsConsoleExperience: "Wie war Ihre Erfahrung?",
  joinMailingList: "Zur Mailing-Liste hinzufügen",
  informDirection: "Richten Sie die Richtung der Produkte aus",
  informDirectionDescription: "Durch die Teilnahme...",
  learnAboutResearchOpportunities: "Erfahren Sie von Möglichkeiten...",
  openSupportCase: "Support-Fall öffnen",
  problemProcessingRequest: "Es gab ein Problem...",
  getSupport: "Hilfe und Unterstützung erhalten",
  reportABug: "Melden Sie einen Fehler",
  responseSent: "Antwort gesendet",
  researchOpportunities: "Ja, ich möchte von Forschungsmöglichkeiten erfahren",
  shareFeedback: "Feedback teilen",
  shareYourFeedback: "Teilen Sie Ihr Feedback mit uns!",
  somethingWentWrong: "Etwas ist schief gelaufen",
  submitFeedback: "Feedback einreichen",
  tellAboutExperience: "Erzählen Sie uns von Ihrer Erfahrung",
  teamWillReviewBug: "Unser Team wird Ihren Bericht überprüfen...",
  thankYouForFeedback: "Danke, wir schätzen Ihr Feedback.",
  thankYouForInterest: "Danke für Ihr Interesse an der Benutzerforschung...",
  userResearchTeam: "User Research Team",
  weNeverSharePersonalInformation: "Wir teilen Ihre persönlichen Informationen nie..."
};

<FeedbackModal
  feedbackLocale={germanLocale}
  // ... other props
/>
```

--------------------------------

### Modal Container

Source: https://github.com/patternfly/react-user-feedback/blob/main/_autodocs/styling-and-theming.md

Main modal wrapper. Controls overall modal dimensions and positioning.

```css
.chr-c-feedback-modal {
  /* Your customizations */
}
```

--------------------------------

### Example - English (default) feedbackLocale

Source: https://github.com/patternfly/react-user-feedback/blob/main/_autodocs/configuration.md

Demonstrates how to use the default English locale for the FeedbackModal component.

```typescript
<FeedbackModal
  feedbackLocale={undefined}  // Uses English defaults
  // ... other props
/>
```

--------------------------------

### Callbacks Not Being Called

Source: https://github.com/patternfly/react-user-feedback/blob/main/_autodocs/integration-guide.md

Verifies that callbacks are provided as functions or URLs, not as async functions without a return value.

```typescript
// ✓ Correct - function callback
onShareFeedback={async (email, feedback) => { ... }}

// ✓ Correct - URL
onShareFeedback="https://example.com/feedback"

// ✗ Wrong - async function without return
onShareFeedback={async (email, feedback) => { ... }} // Must return Promise<boolean>
```

--------------------------------

### Custom Styling

Source: https://github.com/patternfly/react-user-feedback/blob/main/_autodocs/README.md

Example of importing default CSS and overriding styles for the feedback modal using inline styles.

```typescript
import '@patternfly/react-user-feedback/dist/esm/Feedback/Feedback.css';

// Override with custom CSS
<style>{`
  .chr-c-feedback-modal {
    --pf-global--palette--primary: #your-color;
  }
`}</style>
```

--------------------------------

### Building and serving documentation for accessibility tests

Source: https://github.com/patternfly/react-user-feedback/blob/main/README.md

To run a11y tests, you must build and serve its documentation by using the `yarn build:docs` and `yarn serve:docs` terminal commands.

```bash
yarn build:docs
yarn serve:docs

```

--------------------------------

### Context Setup

Source: https://github.com/patternfly/react-user-feedback/blob/main/_autodocs/api-reference-LocaleContext.md

This code snippet shows how to set up the LocaleContext using React's createContext function and providing default feedback strings.

```typescript
import { createContext } from 'react';
import { FeedbackLocale } from '../Feedback';
import { defaultFeedback } from '../locales/Locale';

export const LocaleContext = createContext<FeedbackLocale>(defaultFeedback);
```

--------------------------------

### Essential Imports

Source: https://github.com/patternfly/react-user-feedback/blob/main/_autodocs/styling-and-theming.md

This imports: Custom component styles (`.chr-c-feedback-*` classes), Modal layout and structure, Form styling, Success/error screen styling.

```typescript
import '@patternfly/react-user-feedback/dist/esm/Feedback/Feedback.css';
```

--------------------------------

### Compact Layout Styles

Source: https://github.com/patternfly/react-user-feedback/blob/main/_autodocs/styling-and-theming.md

CSS for a more compact layout of the feedback modal, adjusting padding, font size, and spacing.

```css
.chr-c-feedback-modal {
  max-width: 600px;
}

.chr-c-feedback-content {
  padding: 12px;
}

.chr-c-feedback-text-area {
  min-height: 80px;
  font-size: 13px;
}

.chr-c-feedback-cards {
  gap: 8px;
}

.pf-u-mt-20 {
  margin-top: 12px;
}
```

--------------------------------

### Synchronous Flow Example

Source: https://github.com/patternfly/react-user-feedback/blob/main/_autodocs/internal-architecture.md

An example of a synchronous handleSubmit function that returns a boolean immediately. This is used when the submission logic does not require asynchronous operations.

```typescript
const handleSubmit = (email: string, feedback: string): boolean => {
  // Validate or store synchronously
  return true; // Shows success immediately
};

<FeedbackModal onShareFeedback={handleSubmit} />
```

--------------------------------

### Asynchronous Flow Example

Source: https://github.com/patternfly/react-user-feedback/blob/main/_autodocs/internal-architecture.md

An example of an asynchronous handleSubmit function that returns a Promise<boolean>. This is used when the submission logic involves network requests or other asynchronous operations.

```typescript
const handleSubmit = async (email: string, feedback: string): Promise<boolean> => {
  const response = await fetch('/api/feedback', { ... });
  return response.ok; // Shows success after network call
};

<FeedbackModal onShareFeedback={handleSubmit} />
```

--------------------------------

### Custom User Context

Source: https://github.com/patternfly/react-user-feedback/blob/main/_autodocs/integration-guide.md

Demonstrates how to integrate the FeedbackModal with custom user context, passing user details like ID, email, name, organization, and subscription level to the feedback API.

```typescript
import React, { useState } from 'react';
import { FeedbackModal } from '@patternfly/react-user-feedback';

interface User {
  id: string;
  email: string;
  name: string;
  organization: string;
  subscriptionLevel: 'free' | 'pro' | 'enterprise';
}

export function AppWithUserContext() {
  const [isFeedbackOpen, setIsFeedbackOpen] = useState(false);
  const user: User = getCurrentUser(); // From your auth system

  const handleShareFeedback = async (
    email: string,
    feedback: string
  ): Promise<boolean> => {
    try {
      const response = await fetch('/api/feedback', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          feedback,
          email: email || user.email,
          userId: user.id,
          userName: user.name,
          organization: user.organization,
          subscriptionLevel: user.subscriptionLevel,
          timestamp: new Date().toISOString()
        })
      });
      return response.ok;
    } catch (error) {
      console.error('Feedback submission failed:', error);
      return false;
    }
  };

  return (
    <>
      <button onClick={() => setIsFeedbackOpen(true)}>
        Share Feedback
      </button>

      <FeedbackModal
        isOpen={isFeedbackOpen}
        onClose={() => setIsFeedbackOpen(false)}
        email={user.email}
        onShareFeedback={handleShareFeedback}
        onReportABug={async (email, bug) => {
          const response = await fetch('/api/bugs', {
            method: 'POST',
            body: JSON.stringify({
              bug,
              email: email || user.email,
              userId: user.id
            })
          });
          return response.ok;
        }}
      />
    </>
  );
}

function getCurrentUser(): User {
  // Get from your auth/context system
  return {
    id: '123',
    email: 'user@example.com',
    name: 'John Doe',
    organization: 'Example Corp',
    subscriptionLevel: 'pro'
  };
}
```

--------------------------------

### Responsive Adjustments for Mobile and Small Screens

Source: https://github.com/patternfly/react-user-feedback/blob/main/_autodocs/styling-and-theming.md

CSS rules to adjust the feedback component's layout and appearance for different screen sizes, from mobile devices to small screens.

```css
/* Mobile devices */
@media (max-width: 768px) {
  .chr-c-feedback-flex {
    flex-direction: column;
  }

  .chr-c-feedback-description {
    flex: 1;
    padding: 16px;
  }

  .chr-c-feedback-image {
    display: none;
  }

  .chr-c-feedback-text-area {
    min-height: 100px;
  }
}

/* Small screens */
@media (max-width: 480px) {
  .chr-c-feedback-heading {
    padding: 12px;
  }

  .chr-c-feedback-footer-button {
    width: 100%;
    margin-bottom: 8px;
  }
}
```

--------------------------------

### Callback Configuration for onJoinMailingList

Source: https://github.com/patternfly/react-user-feedback/blob/main/_autodocs/configuration.md

Configures the 'Inform the direction of products' / mailing list signup option using a callback function that handles subscription logic.

```typescript
<FeedbackModal
  onJoinMailingList={async (email: string) => {
    try {
      const response = await fetch('/api/subscribe', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email })
      });
      return response.ok;
    } catch (error) {
      return false;
    }
  }}
  // ... other props
/>
```

--------------------------------

### PatternFly CSS Variables

Source: https://github.com/patternfly/react-user-feedback/blob/main/_autodocs/styling-and-theming.md

The component uses PatternFly CSS variables for theming.

```typescript
// For success icon (FeedbackSuccess)
color="var(--pf-global--success-color--100)"

// For error icon (FeedbackError)
color="var(--pf-global--danger-color--100)"

// For general text
// Inherits from PatternFly theme
```

--------------------------------

### Track Analytics

Source: https://github.com/patternfly/react-user-feedback/blob/main/_autodocs/README.md

Example of tracking feedback modal events using an analytics service.

```typescript
<FeedbackModal
  onClose={() => {
    setIsOpen(false);
    analytics.track('feedback_modal_closed');
  }}
  onShareFeedback={async (email, feedback) => {
    analytics.track('feedback_submitted', { 
      hasEmail: !!email,
      feedbackLength: feedback.length 
    });
    // submit...
  }}
  // ...
/>
```

--------------------------------

### Internal Usage (via FeedbackModal)

Source: https://github.com/patternfly/react-user-feedback/blob/main/_autodocs/api-reference-FeedbackForm.md

Example of how FeedbackForm is used internally by FeedbackModal.

```typescript
Inside FeedbackModalInternal, for the feedback submission flow:
<FeedbackForm
  email={emailRef.current}
  onCloseModal={handleCloseModal}
  onSubmit={(email: string, textAreaValue: string) => {
    let results: boolean | Promise<boolean> = true;
    if (onShareFeedback && typeof onShareFeedback === 'function') {
      results = onShareFeedback(email, textAreaValue);
      updateEmail(email);
    }
    onSubmit('feedbackSuccess', results);
  }}
  onClickBack={() => setModalPage('feedbackHome')}
  handleFeedbackError={() => setModalPage('feedbackError')}
  modalTitle={intl.shareYourFeedback}
  textareaLabel={intl.enterFeedback}
  feedbackType="Feedback"
  checkboxDescription={intl.learnAboutResearchOpportunities}
  submitTitle={intl.submitFeedback}
/>
```

--------------------------------

### URL Configuration for onJoinMailingList

Source: https://github.com/patternfly/react-user-feedback/blob/main/_autodocs/configuration.md

Configures the 'Inform the direction of products' / mailing list signup option by providing a URL.

```typescript
<FeedbackModal
  onJoinMailingList="https://example.com/mailing-list"
  // ... other props
/>
```

--------------------------------

### Disable Animations

Source: https://github.com/patternfly/react-user-feedback/blob/main/_autodocs/styling-and-theming.md

CSS to disable animations and transitions for users who prefer reduced motion.

```css
@media (prefers-reduced-motion: reduce) {
  .chr-c-feedback-modal,
  .chr-c-feedback-content {
    animation: none;
    transition: none;
  }
}
```