Feedback Component follows the One Platform design system and can be used as a popup to collect feedback from the end-users.
The opc-feedback
component is partially dependent on the Patternfly library for styles. So to avoid any missing styles, add the patternfly.css
file before the component script tag. ion-icons
has used for rendering icons in the opc-feedback component this also should be included for displaying icons.
<link type="text/css" rel="stylesheet" href="https://unpkg.com/@patternfly/patternfly@4.224.5/patternfly.min.css" crossorigin="anonymous" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/@patternfly/patternfly@4.224.5/patternfly-addons.css" crossorigin="anonymous" />
<script type="module" src="https://cdnjs.cloudflare.com/ajax/libs/ionicons/5.5.0/ionicons/ionicons.esm.js"></script>
<script nomodule="" src="https://cdnjs.cloudflare.com/ajax/libs/ionicons/5.2.3/ionicons/ionicons.js"></script>
npm install --save @one-platform/opc-feedback
- Import component
import '@one-platform/opc-feedback/dist/opc-feedback';
- In your app.module include the
CUSTOM_ELEMENTS_SCHEMA
and import the component
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import '@one-platform/opc-feedback/dist/opc-feedback';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
- Add component in any component html template
- Import the component in App.js
import '@one-platform/opc-feedback/dist/opc-feedback';
<opc-feedback id="opc-feedback"> </opc-feedback>
Theme Name | Example |
---|---|
red (default and fallback color) | <opc-feedback theme="red"></opc-feedback> |
blue | <opc-feedback theme="blue"></opc-feedback> |
dark | <opc-feedback theme="dark"></opc-feedback> |
Color | hex (default-fallback) |
---|---|
--opc-feedback--BackgroundColor | #a30000 |
--opc-feedback--TextColor | #fff |
--opc-feedback__submit--BackgroundColor | #a30000 |
--opc-feedback__submit--TextColor | #fff |
Name | value |
---|---|
spa |
String value is expected, View Feedback link is hidden by default. |
docs |
String value is expected, it is undefined by default. |
summaryLimit |
Number value is expected, it is Infinite by default. |
app |
Object value is expected { name: 'one platform', url: '/' } is the default fallback url for docs |
theme |
Refer themes section. |
target |
String value is expected, it is _self by default. Specifies where to open the linked document Url |
beetleIcon |
String value is expected, it is show by default. Specifies to show or hide the parent beetle icon on the button |
When opc-feedback
is launched it is loaded with the following the default template in ui.
{
feedbackFAB: 'Send Feedback',
dialogTitle: 'Share your thoughts with us',
bugReportTitle: 'Report Bug',
feedbackReportTitle: 'Send Feedback',
documentationTitle: 'Documentation',
spaRedirectTitle: 'View Feedback',
errorTitle: 'What is wrong?',
bugSubmissionNote: 'Note: By submitting a bug it will open an issue in jira',
feedbackTitle: 'How was your overall experience?',
feedbackSubtitle: 'It will help us to improve platform',
summary: 'Summary',
summaryPlaceholder: 'How can we do better?',
confirmationTitle: 'Thanks for your feedback. Your experience is important to us!',
confirmationSubTitle: 'Each time a friend submits a experience, it creates a task for our developer team to resolve it with priority.',
confirmationEventMessage: 'Submitted the feedback',
experienceList: [{
name: 'Excellent',
assetUrl: './assets/happy.svg',
},
{
name: 'Good',
assetUrl: './assets/good.svg',
},
{
name: 'Needs Improvement',
assetUrl: './assets/improvement.svg'
}],
errorList: [{
name: 'Slow Loading'
},
{
name: 'Not Responsive'
},
{
name: 'Navigation'
},
{
name: 'UI Issues'
},
{
name: 'Other'
}]
}
We can override the data with the default template with custom template by passing the custom properties in the following format as per defined structure of default json.
- Use the feedbackTemplate setter function to set the template ui.
document.querySelector('opc-feedback').feedbackTemplate = {
feedbackFAB: 'Share Feedback',
};
Template Properties | Datatype |
---|---|
feedbackFAB | String |
dialogTitle | String |
bugReportTitle | String |
feedbackReportTitle | String |
documentationTitle | String |
spaRedirectTitle | String |
errorTitle | String |
bugSubmissionNote | String |
feedbackTitle | String |
feedbackSubtitle | String |
summary | String |
summaryPlaceholder | String |
confirmationTitle | String |
confirmationSubtitle | String |
experienceList | Array |
errorList | Array |
document.querySelector('opc-feedback').toggle();
- You can use the data for sending it to backend.
document
.querySelector('opc-feedback')
.addEventListener('opc-feedback:submit', (event) =>
console.log(event.detail.data)
);
- You can set
onSubmit()
fucntion on opc-feedback component
function callbackFn(event) {
console.log(event.detail.data);
}
document.querySelector('opc-feedback').onSubmit = callbackFn;
-
NodeJS >= 8
-
IDE (VSCode/Atom)
-
Browser (Mozilla Firefox/Google Chrome)
npm run dev opc-feedback
npm run build opc-feedback
npm run test
👤 Rigin Oommen
👤 Sumeet Ingole
👤 Akhil Mohan
👤 Shamsuddin