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

Bitbucket link

• Inside Belfius => http://git.dbb.dexwired.net:7990/projects/GEWY/repos/belfius.gewy.client.ui-components/browse/button
• Outside Belfius => https://bitbucket.org/cuthulhu/text-button/src/develop/

Issues link(s)

• http://jira.dg.dexwired.net/browse/PRJ00177095-55?filter=-1
• http://jira.dg.dexwired.net/browse/PRJ00177095-71 - Refactor code text-button component
• http://jira.dg.dexwired.net/browse/PRJ00177095-72 - investigate & solve the prop/attr reflection issue
• http://jira.dg.dexwired.net/browse/PRJ00177095-75 - remove :host selectors
• http://jira.dg.dexwired.net/browse/PRJ00177095-196 - Remove the webcomponentsready event
• http://jira.dg.dexwired.net/browse/PRJ00177095-192 - create NPM publish scripts
• http://jira.dg.dexwired.net/browse/PRJ00177095-195 - Rewrite package.json
• http://jira.dg.dexwired.net/browse/PRJ00177095-194 - Split scan in separate functions/scripts
• http://jira.dg.dexwired.net/browse/PRJ00177095-193 - Update README

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.