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

Bitbucket link

http://git.dbb.dexwired.net:7990/projects/GEWY/repos/belfius.gewy.client.ui-components/browse/button

Issues link(s)

• http://jira.dg.dexwired.net/browse/PRJ00177095-55?filter=-1

Technical Design link

N.A.

Styleguide link

https://company-52798.frontify.com/document/86788#/input/buttons

Impact Analysis link

N.A.

DIAML Developer Docs link

N.A.

Version link

N.A.