Fintraffic Design System's Core UI Components. Work heavily in progress.
Work is being done at Fintraffic Raide to get some basic web components added to this repository in the near future. After we've achieved some good enough baseline, we'll revisit governing and contribution guidelines and processes for the Design System's technical implementation.
https://fintraffic-design.github.io/fds-coreui-components
npm i --save @fintraffic/fds-coreui-components
Import and register a specific component
import '@fintraffic/fds-coreui-components/dist/define/fds-button.js';
Import and register all components
import '@fintraffic/fds-coreui-components/dist/define/all.js';
Extend a component
import { FdsButton } from '@fintraffic/fds-coreui-components';
class MyButton extends FdsButton { /* ... */ }
customElements.define('my-button', MyButton);
Implementation should follow the component publishing guidelines from Open Web Components.
Web component code should be ordered as follows:
@property
, @state
)Reasoning: With this order we aim to have the most functionally essential logic of the component featured most prominently. For this reason, the CSS (static variable) has been moved to the end, contrary to common OOP-practices. Otherwise, it is generally desired to maintain the same order of structure in components, so that even unfamiliar code is a little easier to read when you know how it is structured.
Class properties that update the component's inner state, should have the private
access modifier, or protected
if there is a good reason for it.
Use the function
keyword when declaring functions.
Naming practises:
_
) for private and protected properties, e.g. @state() private _enabled = true
Prettier is used for code formatting.
.prettierc.json
.npx prettier -w src/
Always write and update the JSDocs!
Copyright © Fintraffic 2023 Source code of this program is licensed under the EUPL v1.2