fix(docs): Updated development documentation. (#55)

chore(docs): updated examples with explainations. chore(docs): updated examples with explainations. chore(docs): Added async example. chore(docs): reverted yarn.lock file. chore(docs): Updated with fake forms. chore(docs): Updated with fake forms. chore(docs): Updated with review comments. Review updates. Fixed bad link.
patternfly · May 23, 2023 · 1a6af52 · 1a6af52
1 parent a701069
commit 1a6af52
Show file tree

Hide file tree

Showing 14 changed files with 361 additions and 64 deletions.
diff --git a/packages/module/patternfly-docs/content/examples/Advanced.tsx b/packages/module/patternfly-docs/content/examples/Advanced.tsx
@@ -20,7 +20,7 @@ export const AdvancedExample: React.FunctionComponent = () => {
             console.log (`Email Address: ${email}`);
             return false;
         }}
-        onOpenSupportCase='http://www.redhat.com'
+        onOpenSupportCase='https://pf-user-feedback-extension-form-demos.surge.sh/requestSupport.html'
         onReportABug={(email:string, bug:string)=>{
             console.log (`Email Address: ${email} Bug: ${bug}`)
             return true;}}

diff --git a/.../content/examples/AdvancedStaticEmail.tsx → ...cs/content/examples/AdvancedWithEmail.tsx b/.../content/examples/AdvancedStaticEmail.tsx → ...cs/content/examples/AdvancedWithEmail.tsx
@@ -21,7 +21,7 @@ export const AdvancedStaticEmailExample: React.FunctionComponent = () => {
             console.log (`Email Address: ${email}`);
             return false;
         }}
-        onOpenSupportCase='http://www.redhat.com'
+        onOpenSupportCase='https://pf-user-feedback-extension-form-demos.surge.sh/requestSupport.html'
         onReportABug={(email:string, bug:string)=>{
             console.log (`Email Address: ${email} Bug: ${bug}`)
             return true;}}

diff --git a/packages/module/patternfly-docs/content/examples/Async.tsx b/packages/module/patternfly-docs/content/examples/Async.tsx
@@ -0,0 +1,35 @@
+/* eslint-disable no-console */
+import React from 'react';
+import { FeedbackModal} from '@patternfly/react-user-feedback';
+import { Button } from '@patternfly/react-core';
+
+export const AsyncExample: React.FunctionComponent = () => {
+   const  [isOpen, setIsOpen] = React.useState<boolean>(false);
+
+   const fakeNetworkCall = (email:string, feedback:string, bug:string) => new Promise<boolean>(resolve => {
+      setTimeout(() => {
+        console.log(`Email Address: ${email} Feedback: ${feedback} Bug: ${bug}`);
+        console.log('Network call complete successfully so return true');
+        resolve(true);
+      }, 2000);
+    })
+
+   const simulatedAsyncCall = async (email='', feedback='', bug='') => {
+        console.log('simulatedAsyncCall');
+        const result = await fakeNetworkCall(email, feedback, bug);
+        return result;
+      }
+
+
+   const handleButtonClicked = () => {setIsOpen(true)}; 
+   return <>
+    <Button onClick={handleButtonClicked}>Show Modal</Button>
+    <FeedbackModal 
+        onShareFeedback={(email:string, feedback:string)=>simulatedAsyncCall(email, feedback)}
+        onJoinMailingList={(email:string)=>simulatedAsyncCall(email)}
+        onOpenSupportCase='https://pf-user-feedback-extension-form-demos.surge.sh/requestSupport.html'
+        onReportABug={(email:string, bug:string)=>simulatedAsyncCall(email, '', bug)}
+        isOpen={isOpen}
+        onClose={()=>setIsOpen(false)}/>
+    </>
+}
diff --git a/packages/module/patternfly-docs/content/examples/Basic.tsx b/packages/module/patternfly-docs/content/examples/Basic.tsx
diff --git a/packages/module/patternfly-docs/content/examples/URL.tsx b/packages/module/patternfly-docs/content/examples/URL.tsx
@@ -9,10 +9,10 @@ export const URLExample: React.FunctionComponent = () => {
    return <>
     <Button onClick={handleButtonClicked}>Show Modal</Button>
     <FeedbackModal 
-        onShareFeedback='https://console.redhat.com/self-managed-feedback-form' 
-        onJoinMailingList='https://console.redhat.com/self-managed-research-form'
-        onOpenSupportCase='http://www.patternfly.org'
-        onReportABug='https://www.patternfly.org'
+        onShareFeedback='https://pf-user-feedback-extension-form-demos.surge.sh/submitFeedback.html' 
+        onJoinMailingList='https://pf-user-feedback-extension-form-demos.surge.sh/joinMailingList.html'
+        onOpenSupportCase='https://pf-user-feedback-extension-form-demos.surge.sh/requestSupport.html'
+        onReportABug='https://pf-user-feedback-extension-form-demos.surge.sh/reportBug.html'
         isOpen={isOpen}
         onClose={()=>setIsOpen(false)}/>
     </>

diff --git a/packages/module/patternfly-docs/content/examples/basic.md b/packages/module/patternfly-docs/content/examples/basic.md
@@ -15,33 +15,43 @@ propComponents: ['FeedbackModalProps']
 import { FeedbackModal } from "@patternfly/react-user-feedback";
 import feedbackImage from '@patternfly/react-user-feedback/dist/esm/images/rh_feedback.svg';
 
-## Examples
-### Basic Example
-
-```js file="./Basic.tsx"
+## About
+
+The user feedback extension is a PatternFly React based component used to collect user feedback. Examples of how to use this extension are documented below. This extensions allows users to submit feedback, report a bug, request support, as well as join a mailing list to stay updated on the latest news and research opportunities.
 
-```
+## Examples
 
-### URL Example
+### Basic modal
+To collect data, you can link modal items to external sources instead of a built in form. For example, you can link to a custom form, which will be opened in a new tab.
 
 ```js file="./URL.tsx"
 
 ```
 
-### Advanced feedback modal
+### Advanced modal
+User feedback offers additional modal items that support different types of feedback. To allow users to report a bug, use the `onReportABug` property. To allow users to join a mailing list, such as one dedicated to future research participation, use the `onJoinMailingList` property. To allow users to open a support case, use the `onOpenSupportCase` property and link users to your support team.
+
+The following example demonstrates each of these modal items. The "Share feedback", "Report a bug", and "Inform the direction of products" items all point to built-in forms.
 
 ```js file="./Advanced.tsx"
 
 ```
 
-### Advanced with email passed to modal
-
-```js file="./AdvancedStaticEmail.tsx"
+### Advanced that autofills an email address
+To automatically pass a user's email address into a feedback modal, use the email property. This allows you to pre-populate the modal's email field.
+```js file="./AdvancedWithEmail.tsx"
 
 ```
+### Modal with asynchronous call support
+User feedback supports the ability to make asynchronous calls to send data collected from the modal to a backend service. 
+
+The following example demonstrates how to use the `async` function to send data to a backend service.
+```js file="./Async.tsx"
 
-### i18n
+```
 
+### Modal with internationalization support
+To customize the content displayed in the feedback modal, pass in a custom `i18n` object with values for each property of`<FeedbackModal>`. This allows you to prepare a modal for different languages and requirements.
 ```js file="./i18n.tsx"
 
 ```
diff --git a/packages/module/patternfly-docs/content/examples/forms/joinMailingList.html b/packages/module/patternfly-docs/content/examples/forms/joinMailingList.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <link rel="stylesheet" href="https://unpkg.com/@patternfly/patternfly/patternfly.min.css">
+</head>
+
+<body style="margin: 4rem; height: 80vh;">
+    <div class="pf-l-stack pf-m-gutter">
+        <div class="pf-l-stack__item">
+            <div class="pf-c-title pf-m-2xl">Join Mailing List Example </div>
+        </div>
+        <div class="pf-l-stack__item">
+            <form class="pf-c-form pf-m-horizontal" novalidate>
+                <div class="pf-c-form__group">
+                    <div class="pf-c-form__group-label"><label class="pf-c-form__label" for="form-horizontal-name">
+                            <span class="pf-c-form__label-text">Email</span>&nbsp;<span class="pf-c-form__label-required"
+                                aria-hidden="true">&#42;</span></label>
+                    </div>
+                    <div class="pf-c-form__group-control">
+                        <input class="pf-c-form-control" type="text" id="form-horizontal-name"
+                            name="form-horizontal-name" required />
+                    </div>
+                </div>
+            </form>
+        </div>
+        <div class="pf-l-stack__item">
+            <button class="pf-c-button pf-m-primary" style="width: fit-content;" type="button">Submit</button>
+            <button class="pf-c-button pf-m-secondary" style="width: fit-content" type="button">Cancel</button>
+        </div>
+    </div>
+
+</html>
diff --git a/packages/module/patternfly-docs/content/examples/forms/reportBug.html b/packages/module/patternfly-docs/content/examples/forms/reportBug.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <link rel="stylesheet" href="https://unpkg.com/@patternfly/patternfly/patternfly.min.css">
+</head>
+
+<body style="margin: 4rem; height: 80vh;">
+    <div class="pf-l-stack pf-m-gutter">
+        <div class="pf-l-stack__item">
+            <div class="pf-c-title pf-m-2xl">Report A Bug Example </div>
+        </div>
+        <div class="pf-l-stack__item">
+            <form class="pf-c-form pf-m-horizontal" novalidate>
+                <div class="pf-c-form__group">
+                    <div class="pf-c-form__group-label"><label class="pf-c-form__label" for="form-horizontal-name">
+                            <span class="pf-c-form__label-text">Email</span>&nbsp;<span class="pf-c-form__label-required"
+                                aria-hidden="true">&#42;</span></label>
+                    </div>
+                    <div class="pf-c-form__group-control">
+                        <input class="pf-c-form-control" type="text" id="form-horizontal-name"
+                            name="form-horizontal-name" required />
+                    </div>
+                </div>
+                <div class="pf-c-form__group">
+                    <div class="pf-c-form__group-label"><label class="pf-c-form__label" for="form-horizontal-info">
+                            <span class="pf-c-form__label-text">Bug</span></label>&nbsp;<span
+                            class="pf-c-form__group-label-help" aria-label="More information for information field"
+                            aria-describedby="form-horizontal-info" role="button" type="button" tabindex="0"><i
+                                class="pficon pf-icon-help" aria-hidden="true"></i></span>
+                    </div>
+                    <div class="pf-c-form__group-control">
+                        <textarea class="pf-c-form-control" type="text" id="form-horizontal-info"
+                            name="form-horizontal-info" aria-label="Textarea example"></textarea>
+                    </div>
+                </div>
+            </form>
+        </div>
+        <div class="pf-l-stack__item">
+            <button class="pf-c-button pf-m-primary" style="width: fit-content;" type="button">Submit</button>
+            <button class="pf-c-button pf-m-secondary" style="width: fit-content" type="button">Cancel</button>
+        </div>
+    </div>
+
+</html>
diff --git a/packages/module/patternfly-docs/content/examples/forms/requestSupport.html b/packages/module/patternfly-docs/content/examples/forms/requestSupport.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <link rel="stylesheet" href="https://unpkg.com/@patternfly/patternfly/patternfly.min.css">
+</head>
+
+<body style="margin: 4rem; height: 80vh;">
+    <div class="pf-l-stack pf-m-gutter">
+        <div class="pf-l-stack__item">
+            <div class="pf-c-title pf-m-2xl">Request Support Example </div>
+        </div>
+        <div class="pf-l-stack__item">
+            <form class="pf-c-form pf-m-horizontal" novalidate>
+                <div class="pf-c-form__group">
+                    <div class="pf-c-form__group-label"><label class="pf-c-form__label" for="form-horizontal-name">
+                            <span class="pf-c-form__label-text">Email</span>&nbsp;<span class="pf-c-form__label-required"
+                                aria-hidden="true">&#42;</span></label>
+                    </div>
+                    <div class="pf-c-form__group-control">
+                        <input class="pf-c-form-control" type="text" id="form-horizontal-name"
+                            name="form-horizontal-name" required />
+                    </div>
+                </div>
+                <div class="pf-c-form__group">
+                    <div class="pf-c-form__group-label"><label class="pf-c-form__label" for="form-horizontal-info">
+                            <span class="pf-c-form__label-text">Issue</span></label>&nbsp;<span
+                            class="pf-c-form__group-label-help" aria-label="More information for information field"
+                            aria-describedby="form-horizontal-info" role="button" type="button" tabindex="0"><i
+                                class="pficon pf-icon-help" aria-hidden="true"></i></span>
+                    </div>
+                    <div class="pf-c-form__group-control">
+                        <textarea class="pf-c-form-control" type="text" id="form-horizontal-info"
+                            name="form-horizontal-info" aria-label="Textarea example"></textarea>
+                    </div>
+                </div>
+                <div class="pf-c-form__group" role="group" aria-labelledby="form-horizontal-checkbox-legend">
+                    <div class="pf-c-form__group-label pf-m-no-padding-top" id="form-horizontal-checkbox-legend"><span
+                            class="pf-c-form__label">
+                            <span class="pf-c-form__label-text">Department</span></span>&nbsp;<span
+                            class="pf-c-form__group-label-help" aria-label="More information for label field"
+                            aria-describedby="form-horizontal-checkbox-legend" role="button" type="button"
+                            tabindex="0"><i class="pficon pf-icon-help" aria-hidden="true"></i></span>
+                    </div>
+                    <div class="pf-c-form__group-control pf-m-stack">
+                        <div class="pf-c-check">
+                            <input class="pf-c-check__input" type="checkbox" id="form-horizontal-checkbox"
+                                name="form-horizontal-checkbox" />
+
+                            <label class="pf-c-check__label" for="form-horizontal-checkbox">Administration</label>
+                        </div>
+                        <div class="pf-c-check">
+                            <input class="pf-c-check__input" type="checkbox" id="form-horizontal-checkbox2"
+                                name="form-horizontal-checkbox2" />
+
+                            <label class="pf-c-check__label" for="form-horizontal-checkbox2">Engineering</label>
+                        </div>
+                        <div class="pf-c-check">
+                            <input class="pf-c-check__input" type="checkbox" id="form-horizontal-checkbox2"
+                                name="form-horizontal-checkbox2" />
+
+                            <label class="pf-c-check__label" for="form-horizontal-checkbox2">IT</label>
+                        </div>
+                        <div class="pf-c-check">
+                            <input class="pf-c-check__input" type="checkbox" id="form-horizontal-checkbox2"
+                                name="form-horizontal-checkbox2" />
+
+                            <label class="pf-c-check__label" for="form-horizontal-checkbox2">HR</label>
+                        </div>
+                        <div class="pf-c-check">
+                            <input class="pf-c-check__input" type="checkbox" id="form-horizontal-checkbox2"
+                                name="form-horizontal-checkbox2" />
+
+                            <label class="pf-c-check__label" for="form-horizontal-checkbox2">Security</label>
+                        </div>
+                    </div>
+                </div>
+            </form>
+        </div>
+        <div class="pf-l-stack__item">
+            <button class="pf-c-button pf-m-primary" style="width: fit-content;" type="button">Submit</button>
+            <button class="pf-c-button pf-m-secondary" style="width: fit-content" type="button">Cancel</button>
+        </div>
+    </div>
+
+</html>
diff --git a/packages/module/patternfly-docs/content/examples/forms/submitFeedback.html b/packages/module/patternfly-docs/content/examples/forms/submitFeedback.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <link rel="stylesheet" href="https://unpkg.com/@patternfly/patternfly/patternfly.min.css">
+</head>
+
+<body style="margin: 4rem; height: 80vh;">
+    <div class="pf-l-stack pf-m-gutter">
+        <div class="pf-l-stack__item">
+            <div class="pf-c-title pf-m-2xl">Submit Feedback Example </div>
+        </div>
+        <div class="pf-l-stack__item">
+            <form class="pf-c-form pf-m-horizontal" novalidate>
+                <div class="pf-c-form__group">
+                    <div class="pf-c-form__group-label"><label class="pf-c-form__label" for="form-horizontal-name">
+                            <span class="pf-c-form__label-text">Email</span>&nbsp;<span class="pf-c-form__label-required"
+                                aria-hidden="true">&#42;</span></label>
+                    </div>
+                    <div class="pf-c-form__group-control">
+                        <input class="pf-c-form-control" type="text" id="form-horizontal-name"
+                            name="form-horizontal-name" required />
+                    </div>
+                </div>
+                <div class="pf-c-form__group">
+                    <div class="pf-c-form__group-label"><label class="pf-c-form__label" for="form-horizontal-info">
+                            <span class="pf-c-form__label-text">Feedback</span></label>&nbsp;<span
+                            class="pf-c-form__group-label-help" aria-label="More information for information field"
+                            aria-describedby="form-horizontal-info" role="button" type="button" tabindex="0"><i
+                                class="pficon pf-icon-help" aria-hidden="true"></i></span>
+                    </div>
+                    <div class="pf-c-form__group-control">
+                        <textarea class="pf-c-form-control" type="text" id="form-horizontal-info"
+                            name="form-horizontal-info" aria-label="Textarea example"></textarea>
+                    </div>
+                </div>
+            </form>
+        </div>
+        <div class="pf-l-stack__item">
+            <button class="pf-c-button pf-m-primary" style="width: fit-content;" type="button">Submit</button>
+            <button class="pf-c-button pf-m-secondary" style="width: fit-content" type="button">Cancel</button>
+        </div>
+    </div>
+
+</html>
diff --git a/packages/module/patternfly-docs/content/examples/i18n.tsx b/packages/module/patternfly-docs/content/examples/i18n.tsx
@@ -65,7 +65,7 @@ export const AdvancedExample: React.FunctionComponent = () => {
         onJoinMailingList={()=>
              true
         }
-        onOpenSupportCase='http://www.redhat.com'
+        onOpenSupportCase='https://pf-user-feedback-extension-form-demos.surge.sh/requestSupport.html'
         onReportABug={()=>true}
         isOpen={isOpen}
         onClose={()=>setIsOpen(false)}/>