Joomla UI custom elements

Build Status

SauceLabs tests	GreenKeeper	Webcomponents.org

Sauce Labs

UI components using modern technologies

This is a collection of all the components that Joomla is using. They are developed with the new W3C standard: custom elements. Each component is using plain and optimized javascript for performance. Also the HTML markup (wherever possible) is reduced to offer a great benefit for front end developers).

Using the NPM power

You can install this package by using NPM:

$ npm i joomla-ui-custom-elements

Configuration

The prefix of all the elements is configuarable. To do so duplicate the file settings.yaml and name the new file as settings-custom.yaml. Open the file in your editor and change the prefix to your taste. (It needs to be one word - check the W3C speifications for valid custom element naming). Build your custom elements by executing:

$ grunt

The folder named dist contains all your elements.

Usage

For each component that you need to have available in your page you need to add the custom element in the head of the document:

<script src="joomla-alert.min.js"></script>

Tests

Once again we are using the great tools from the polymer team here! You will need wct (web component tester) installed globally. To do so just run npm install web-component-tester -g. You might need to run that command as sudo! After that, in the root folder of this project just run wct and see the status of the tests...

The default setup is based on MacOS system and looking for Chrome, Firefox and Safari browsers, you can change this by editing line 5 of https://github.com/joomla-projects/custom-elements/blob/master/wct.conf.json#L5

Browser support

Although all the major browsers are committed to support custom elements some of the all green browsers do need a polyfill. The polyfills can be found in the dist folder and are created by the Polymer team (Polymer is a Google project). The repo for the actual polyfill is: https://github.com/webcomponents/webcomponentsjs

Documentation

Fully documented here

License

The library is released under the GPL license

Changelog

All notable changes to this project will be documented in this file.

The format is based on Keep a Changelog, and this project adheres to Semantic Versioning.

[Unreleased]

• Various build tool and github workflow version bumps
  • Update all npm packages
  • Fix scss lint issues
  • Fix javascript lint issues

0.2.0

• Refactor of the tabs element
  • Logic rewritten so the tabs won't be reappended (no more moving elements)
  • Added breakpoint attribute for controling the transition from tabs/accordion
  • Added tests

0.1.0

• Rewrote the scss to use CSS custom properties than preprocessed SCSS variables
• Added animations for entry/exit of the element

0.0.43/0.0.44

Note 0.0.43 was released with the dist folder still from 0.0.42. Please do not use the release and instead use 0.0.44

• Refactor build tools to rollup from Grunt
• Refactor tests to use karma from WCT Tester
• Add type="button" to the alert close button
• Refactor of the alert element
  • Removed acknowledge attribute
  • Removed href attribute
  • Added close-text attribute. This should be used to load the close button with multilingual text

0.0.41/0.0.42

Note 0.0.41 was released with the dist folder still from 0.0.40. Please do not use the release and instead use 0.0.42

• Moved tests from Travis to GitHub Actions
• Moved last dependencies to be devDependencies
• Documentation cleanup/improvements
• Remove dependencies on Bower
• No longer ship with Web Component Polyfills in the dist folder. These were a clone of existing polyfills that can be found here and we recommend you pick a version of the polyfills appropriate for your minimum browser requirements and load it async using the loader tool.
• Optimise SCSS
• Fix wrong event target in tabs when child is a HTML tag

0.0.40

0.0.39 still had the compiled assets from 0.0.38. This fixes that distribution issue.

0.0.39

• Add support for prefers-reduced-motion in alerts
• Allow toggling accordion on click in the tab custom element
• Dependency updates