opc-comment-input 👋
A standardized web component based on Lit Element for Red Hat One Platform to use as a comment input component.
Prerequisites
The opc-comment-input and opc-comment-list component is dependent on the Patternfly library for styling. So to avoid any missing styles, add the patternfly.css file before the component script tags.
Usage
Install opc-comment-input
npm install --save @one-platform/opc-comment-inputthe opc-comment-list is a subset of opc-comment-input component.
For VanillaJS
- Import component
import '@one-platform/opc-comment-input';- Add component in html
<opc-comment-input></opc-comment-input>- In js listen for
opc-comment-button:clickto get the comment text.
const myCommentInput = document.querySelector('opc-comment-input');
myCommentInput.addEventListener('opc-comment-button:click', e => {
console.log(e);
})- Add component in html
<opc-comment-list></opc-comment-list>- In js provide comments data via comments attribute/property.
const myCommentList = document.querySelector('opc-comment-list');
myCommentList.comments = [{
commenter: 'Dave Brown',
date: 'Friday, May 29, 2020 at 10:59 AM',
comment: 'Uneasy barton seeing remark happen his has. Am possible offering at contempt mr distance stronger an. Attachment excellence announcing or reasonable am on if indulgence.'},
{
commenter: 'Liam Webb',
date: 'Friday, May 29, 2020 at 10:59 AM',
comment: ' Exeter talked in agreed spirit no he unable do. Betrayed shutters in vicinity it unpacked in. In so impossible appearance considered mr. Mrs him left find are good.' },
];For Angular
- In your app.module include the
CUSTOM_ELEMENTS_SCHEMAand import the component
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import '@one-platform/opc-comment-input';
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }- Add component in any component html template
<opc-comment-input></opc-comment-input>
<opc-comment-list></opc-comment-list>For React
- Import the component in App.js
import '@one-platform/opc-comment-input';- Add component in any component html render
<opc-comment-input></opc-comment-input>
<opc-comment-list></opc-comment-list>Attributes
placeholder
- Default value is
Type your commentand can be changed by passing a text as shown in below example:
<opc-comment-input placeholder="Enter your comment">
</opc-comment-input>comments
- comments data is mandatory attribute to populate list
<opc-comment-list comments="commentsData"></opc-comment-list>Event Emitters
opc-comment-button:click
-
opc-comment-button:clickevent is fired when the comment is submitted via the button. Below snippet shows the event lister for component
const myCommentInput = document.querySelector('opc-comment-input');
myCommentInput.addEventListener('opc-comment-button:click', e => {
console.log(e);
});Development server
Run development server
npm run dev opc-comment-inputBuild
npm run build opc-comment-inputRun tests
npm run test