@one-platform/opc-comment-input

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-input

the 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:click to 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_SCHEMA and 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 comment and 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:click event 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-input

Build

  npm run build opc-comment-input

Run tests

  npm run test

🤝 Contributors

👤 Sumeet Ingole