Skip to content

Commit 17285c2

Browse files
dlabajdlabaj
authored
Updated example with new i18n feedback (#33)
* (fix): Added fix for callback functions. (fix): Added code to fix callback function. * fix(documentation): Added i18n example.
1 parent 2f1c6af commit 17285c2

4 files changed

Lines changed: 90 additions & 4 deletions

File tree

‎packages/module/patternfly-docs/content/examples/basic.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,4 +27,10 @@ import feedbackImage from '@patternfly/react-user-feedback/dist/esm/images/rh_fe
2727

2828
```js file="./Advanced.tsx"
2929

30+
```
31+
32+
### i18n
33+
34+
```js file="./i18n.tsx"
35+
3036
```

‎packages/module/patternfly-docs/content/examples/i18n.tsx‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
const i18nExample = {
2+
getSupport: 'Lorem ipsum dolor sit amet support',
3+
back: 'Lorem ipsum dolor sit amet back',
4+
bugReported: 'Lorem ipsum dolor sit amet Bug Reported',
5+
cancel: 'Cancel',
6+
close: 'Close',
7+
describeBug:
8+
'Lorem ipsum dolor sit amet Describe the bug you encountered. For urgent issues, open a support case instead.',
9+
describeBugUrgentCases:
10+
'Lorem ipsum dolor sit amet Describe the bug you encountered. For urgent issues, open a support case instead.',
11+
describeReportBug:
12+
'Lorem ipsum dolor sit amet Describe the bug you encountered. Include where it is located and what action caused it. If this issue is urgent or blocking your workflow,',
13+
directInfluence:
14+
'Lorem ipsum dolor sit amet your feedback will directly influence the future of Red Hat’s products. Opt in below to hear about future research opportunities via email.',
15+
email: 'Lorem ipsum dolor sit amet Email',
16+
enterFeedback: 'Lorem ipsum dolor sit amet Enter your feedback',
17+
feedback: 'Lorem ipsum dolor sit amet Feedback',
18+
feedbackSent: 'Lorem ipsum dolor sit amet Feedback Sent',
19+
helpUsImproveHCC: 'Lorem ipsum dolor sit amet Help us improve the Red Hat OpenShift.',
20+
howIsConsoleExperience: 'Lorem ipsum dolor sit amet What has your experience been like so far?',
21+
joinMailingList: 'Lorem ipsum dolor sit ametJoin mailing list',
22+
informDirectionDescription:
23+
'Lorem ipsum dolor sit ametBy participating in feedback sessions, usability tests, and interviews with our',
24+
informRedhatDirection: 'Lorem ipsum dolor sit ametInform the direction of Red Hat',
25+
learnAboutResearchOpportunities: 'Lorem ipsum dolor sit ametLearn about opportunities to share your feedback with our User Research Team.',
26+
openSupportCase: 'Lorem ipsum dolor sit amet Support Case',
27+
problemProcessingRequest:
28+
'Lorem ipsum dolor sit ametThere was a problem processing the request. Try reloading the page. If the problem persists, contact',
29+
redHatSupport: 'Lorem ipsum dolor sit ametRed Hat support',
30+
reportABug: 'Lorem ipsum dolor sit ametReport a bug',
31+
responseSent: 'Lorem ipsum dolor sit ametResponse sent',
32+
researchOpportunities: 'Lorem ipsum dolor sit ametYes, I would like to hear about research opportunities',
33+
shareFeedback: 'Lorem ipsum dolor sit ametShare feedback',
34+
shareYourFeedback: 'Lorem ipsum dolor sit ametShare your feedback with us!',
35+
somethingWentWrong: 'Lorem ipsum dolor sit ametSomething went wrong',
36+
submitFeedback: 'Submit feedback',
37+
teamWillReviewBug: 'Lorem ipsum dolor sit ametWe appreciate your feedback and our team will review your report shortly',
38+
tellAboutExperience: 'Lorem ipsum dolor sit ametTell us about your experience',
39+
thankYouForFeedback: 'Lorem ipsum dolor sit ametThank you, we appreciate your feedback.',
40+
thankYouForInterest:
41+
'Lorem ipsum dolor sit ametThank you for your interest in user research. You have been added to our mailing list.',
42+
userResearchTeam: 'Lorem ipsum dolor sit ametUser Research Team',
43+
weNeverSharePersonalInformation:
44+
'Lorem ipsum dolor sit ametWe never share your personal information, and you can opt out at any time.',
45+
};
46+
47+
48+
/* eslint-disable no-debugger */
49+
import React from 'react';
50+
import { FeedbackModal} from '@patternfly/react-user-feedback';
51+
import { Button } from '@patternfly/react-core';
52+
53+
export const AdvancedExample: React.FunctionComponent = () => {
54+
const [isOpen, setIsOpen] = React.useState<boolean>(false);
55+
const handleButtonClicked = () => {setIsOpen(true)};
56+
return <>
57+
<Button onClick={handleButtonClicked}>Show Modal</Button>
58+
<FeedbackModal
59+
feedbackLocale={i18nExample}
60+
email= "test@redhat.com"
61+
onShareFeedback={()=>
62+
// Example of a successful callback
63+
true
64+
}
65+
onJoinMailingList={()=>
66+
true
67+
}
68+
onOpenSupportCase='http://www.redhat.com'
69+
onReportABug={()=>true}
70+
isOpen={isOpen}
71+
onClose={()=>setIsOpen(false)}/>
72+
</>
73+
}

‎packages/module/patternfly-docs/generated/extensions/react-user-feedback/react.js‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,9 @@ const pageData = {
6969
],
7070
"examples": [
7171
"Basic",
72-
"Advanced"
72+
73+
"Advanced",
74+
"i18n"
7375
]
7476
};
7577
pageData.liveContext = {
@@ -86,7 +88,11 @@ pageData.examples = {
8688
</Example>,
8789
'Advanced': props =>
8890
<Example {...pageData} {...props} {...{"code":"/* eslint-disable no-debugger */\nimport React from 'react';\nimport { FeedbackModal} from '@patternfly/react-user-feedback';\nimport { Button } from '@patternfly/react-core';\nimport feedbackImage from '@patternfly/react-user-feedback/dist/esm/images/rh_feedback.svg';\n\nexport const AdvancedExample: React.FunctionComponent = () => {\n const [isOpen, setIsOpen] = React.useState<boolean>(false);\n const handleButtonClicked = () => {setIsOpen(true)}; \n return <>\n <Button onClick={handleButtonClicked}>Show Modal</Button>\n <FeedbackModal \n email= \"test@redhat.com\" \n onShareFeedback={()=>\n // Example of a successful callback\n true\n }\n onJoinMailingList={()=>\n // Example of am unsuccessful callback\n false\n }\n onOpenSupportCase='http://www.redhat.com'\n feedbackImg={feedbackImage}\n isOpen={isOpen}\n onClose={()=>setIsOpen(false)}/>\n </>\n}","title":"Advanced","lang":"js"}}>
89-
91+
92+
</Example>,
93+
'i18n': props =>
94+
<Example {...pageData} {...props} {...{"code":"const i18nExample = {\n getSupport: 'Lorem ipsum dolor sit amet support',\n back: 'Lorem ipsum dolor sit amet back',\n bugReported: 'Lorem ipsum dolor sit amet Bug Reported',\n cancel: 'Cancel',\n close: 'Close',\n describeBug: \n 'Lorem ipsum dolor sit amet Describe the bug you encountered. For urgent issues, open a support case instead.',\n describeBugUrgentCases: \n 'Lorem ipsum dolor sit amet Describe the bug you encountered. For urgent issues, open a support case instead.',\n describeReportBug: \n 'Lorem ipsum dolor sit amet Describe the bug you encountered. Include where it is located and what action caused it. If this issue is urgent or blocking your workflow,',\n directInfluence:\n 'Lorem ipsum dolor sit amet your feedback will directly influence the future of Red Hat’s products. Opt in below to hear about future research opportunities via email.',\n email: 'Lorem ipsum dolor sit amet Email',\n enterFeedback: 'Lorem ipsum dolor sit amet Enter your feedback',\n feedback: 'Lorem ipsum dolor sit amet Feedback',\n feedbackSent: 'Lorem ipsum dolor sit amet Feedback Sent',\n helpUsImproveHCC: 'Lorem ipsum dolor sit amet Help us improve the Red Hat OpenShift.',\n howIsConsoleExperience: 'Lorem ipsum dolor sit amet What has your experience been like so far?',\n joinMailingList: 'Lorem ipsum dolor sit ametJoin mailing list',\n informDirectionDescription: \n 'Lorem ipsum dolor sit ametBy participating in feedback sessions, usability tests, and interviews with our',\n informRedhatDirection: 'Lorem ipsum dolor sit ametInform the direction of Red Hat',\n learnAboutResearchOpportunities: 'Lorem ipsum dolor sit ametLearn about opportunities to share your feedback with our User Research Team.',\n openSupportCase: 'Lorem ipsum dolor sit amet Support Case',\n problemProcessingRequest: \n 'Lorem ipsum dolor sit ametThere was a problem processing the request. Try reloading the page. If the problem persists, contact',\n redHatSupport: 'Lorem ipsum dolor sit ametRed Hat support',\n reportABug: 'Lorem ipsum dolor sit ametReport a bug',\n responseSent: 'Lorem ipsum dolor sit ametResponse sent',\n researchOpportunities: 'Lorem ipsum dolor sit ametYes, I would like to hear about research opportunities',\n shareFeedback: 'Lorem ipsum dolor sit ametShare feedback',\n shareYourFeedback: 'Lorem ipsum dolor sit ametShare your feedback with us!',\n somethingWentWrong: 'Lorem ipsum dolor sit ametSomething went wrong',\n submitFeedback: 'Submit feedback',\n teamWillReviewBug: 'Lorem ipsum dolor sit ametWe appreciate your feedback and our team will review your report shortly',\n tellAboutExperience: 'Lorem ipsum dolor sit ametTell us about your experience',\n thankYouForFeedback: 'Lorem ipsum dolor sit ametThank you, we appreciate your feedback.',\n thankYouForInterest: \n 'Lorem ipsum dolor sit ametThank you for your interest in user research. You have been added to our mailing list.',\n userResearchTeam: 'Lorem ipsum dolor sit ametUser Research Team',\n weNeverSharePersonalInformation: \n 'Lorem ipsum dolor sit ametWe never share your personal information, and you can opt out at any time.',\n };\n\n\n /* eslint-disable no-debugger */\nimport React from 'react';\nimport { FeedbackModal} from '@patternfly/react-user-feedback';\nimport { Button } from '@patternfly/react-core';\n\nexport const AdvancedExample: React.FunctionComponent = () => {\n const [isOpen, setIsOpen] = React.useState<boolean>(false);\n const handleButtonClicked = () => {setIsOpen(true)}; \n return <>\n <Button onClick={handleButtonClicked}>Show Modal</Button>\n <FeedbackModal \n feedbackLocale={i18nExample}\n email= \"test@redhat.com\" \n onShareFeedback={()=>\n // Example of a successful callback\n true\n }\n onJoinMailingList={()=>\n true\n }\n onOpenSupportCase='http://www.redhat.com'\n onReportABug={()=>true}\n isOpen={isOpen}\n onClose={()=>setIsOpen(false)}/>\n </>\n}","title":"i18n","lang":"js"}}>
95+
9096
</Example>
9197
};
9298

@@ -97,6 +103,7 @@ const Component = () => (
97103
</AutoLinkHeader>
98104
{React.createElement(pageData.examples["Basic"])}
99105
{React.createElement(pageData.examples["Advanced"])}
106+
{React.createElement(pageData.examples["i18n"])}
100107
</React.Fragment>
101108
);
102109
Component.displayName = 'ExtensionsReactUserFeedbackReactDocs';

‎packages/module/patternfly-docs/generated/index.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@ module.exports = {
1212
'/extensions/react-user-feedback/react': {
1313
id: "react-user-feedback",
1414
title: "react-user-feedback",
15-
toc: [{"text":"Examples"},[{"text":"Basic"},{"text":"Advanced"}]],
16-
examples: ["Basic","Advanced"],
15+
toc: [{"text":"Examples"},[{"text":"Basic"},{"text":"Advanced"},{"text":"i18n"}]],
16+
examples: ["Basic","Advanced","i18n"],
1717
section: "extensions",
1818
subsection: "",
1919
source: "react",

0 commit comments

Comments
 (0)