Bfr-button NPM

Consumer documentation - TextButtonWC webcomponent

How to use this web component

There are some packages you need to install first to get started:

npm install --save @webcomponents/webcomponentsjs text-button-wc (package name can differ in the current state of our project)

After successful installation, you need to include the following items in your index.html:

<script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script src="node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
<script src="node_modules/text-button-wc/index.js"></script> (again, package path can differ in the current state of our project)

Use it in your HTML pages as a custom web component:

<text-button-wc data-theme="belfius" label="primary" type="primary"></text-button-wc>

Developer documentation - TextButtonWC webcomponent

Getting Started

The only thing you need to do before you can start, is to run the npm script npm run init-build and you're good to go.
This will install all necessary node_modules and will transpile/compile everything in the dist/ folder.
For the full overview, go to the package.json.

dev-win: run parallel serve-win, open-localhost, watch-file
dev-mac: run parallel serve-mac, open-localhost, watch-file
serve-win: runs a python web server on root-level on port 8000 (only for Windows)
serve-mac: runs a python web server on root-level on port 8000 (only for Mac)
open-localhost: open the localhost (port 8000) on which the http server is running
watch-file: init the file watcher in the src directory => will execute the update-build npm script when it detects a change in the src directory
init-build: install the necessary dependencies & compile/transpile/build for the first time (first command you should run before you start developing!!)
update-build: perform some pre-build cleanup & run the src-build npm script
src-build: compile the CSS of our ES6 component, transpile (babel-es5 + babel-es5-ie) our ES6 component to an ES5 version, perform some post-build cleanup
clean-dist: create dist folder if absent, and clean it if necessary
copy-index: copy the index.js from the src folder to the dist folder
copy-readme: copy the README.md file from the src folder to the dist folder
babel-es5: transpile our ES6 component to an ES5 version for packaging/serving
babel-es5-ie: transpile our ES6 component to an ES5 version, specific for IE, for packaging/serving
compile-css: Scan the CSS of our component for CSS variables, :host()- & :host-selectors, theming, ... will copy our ES6 component to the dist folder for further use
post-build-cleanup: remove the unnecessary ES6 file from the dist folder (we won't be using the ES6 version of our component for packaging/serving, we only need it for development)
pre-build-cleanup: remove the transpiled babel component files (-es5.js + -es5-ie.js) before (re)building
test: runs unit test via intern.js this will start a server, tests are at http://localhost:9000/__intern/
jsdoc: generate component documentation => output will be placed in the out folder
path-replace: replace the path (/dist/) in the index.js file with the node_modules path (/node_modules/package_name)
pre-package: update jsdocs, update dist folder with the latest changes of our component, copy contents of the dist folder to the package folder & replace the path in the index.js to the package path (node_modules/package_name)
init-package: Create package folder, run the pre-package script (the one above), init our npm package (will create a package.json in the packagefolder) and publish it to npm
patch-update-package: Run the pre-package script, increase our version (0.0.1 => 0.0.2) and publish it to npm
minor-update-package: Run the pre-package script, increase our version (0.1.1 => 0.2.0) and publish it to npm
major-update-package: Run the pre-package script, increase our version (0.0.1 => 1.0.0) and publish it to npm
update-package: Use one of our utils to update our package dynamically (combines all of the three npm scripts above) - will accept patch/minor/major as custom npm argument (npm run update-package -- patch, npm run update-package -- minor, ...)

After the init-build you can start the server with npm run dev-mac || npm run dev-win and you can start developing ;-)

Components Name

Classname: TextButtonWC
HTML element: text-button-wc

Screenshot

N.A.

Interactive example

N.A.

Framework Developer docs link

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)
type
- String value (optional)
- Possible values: primary/secondary/tertiary/quarternary
theme
- String value (optional)
- What theme do you want to put on the component? Belfius, DVV?

Component events

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

Component functions

getters & setters
- 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
- get theme() => return the value of "theme" attribute
- set theme() => set value of "theme" attribute
- get type() => return the value of "type" attribute
- set type() => set value of "type" 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)
private functions
- getStyling() => return the styling of the component in a string

Unit Testing

The unit testing will be running on the browser it uses mocha, chai and a BDD style of asserions with expect().
Run 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