Text-button-wc NPM

TextButtonWC webcomponent

Getting Started

First we need to npm install and then build the project so the tests can run, the code is transpilled with babel and the documentation site is generated. Check package.json.

npm run build:mac || npm run build:win

There are some other scripts as well:

npm test: runs unit test via intern.js this will start a server, tests are at http://localhost:9000/__intern/
npm run serve:mac: build + runs a python web server in de root on port
npm run serve:win: build + runs a python web server in de root on port

After the build you can start the server with npm run serve:mac|| npm run serve:win. You can start developing ;-)

Components Name

Classname: TextButtonWC
HTML element: text-button-wc

Screenshot

N.A.

Interactive example

N.A.

Framework Developer docs link

Input/Output contract

Same as below?

Component properties/attributes

disabled
- Boolean value
- It's there or it's not there (when the attribute is missing, the button will be enabled)
- Changeable
label
- String value (required)

Component events

ButtonClick
- triggered when clicking on the button
- dispatched to whoever/whatever is listening

Component functions

set label() => set value of "label" attribute
get label() => return value of "label" attribute
get disabled() => return value of "disabled" attribute
set disabled() => set value of "disabled" attribute
static get observedAttributes() => whitelist all attributes that the component needs to watch for changes (disabled)
get template() => standard button HTML
connectedCallback() => attach event listener and set "disabled" attribute value
disconnectedCallback() => remove event listener
onButtonClick() => function that will execute on the button click event
attributeChangedCallback() => watch changes in the observed attributes (only disabled for now)

Unit Testing

The unit testing will be running on the browser it uses mocha, chai and a BDD style of asserions with expect()

npm run test|| npm test

Changelog

0.0.1 || 13/06/2018 || Task
- Initial commit (template, setup development, ...)
- Add "disabled" and "label" attributes
- Add necessary lifecycle hooks
- Comment lifecyle hooks and other component functions
- JIRA link: http://jira.dg.dexwired.net/browse/PRJ00177095-55?filter=-1