Element Framework is Refinitiv design system components that provides components and tooling with Refinitiv's design system to help product teams work faster and more efficiently.
Getting started and usage guide are available from this documentation.
License details can be found in the
LICENSE file. It's available in each package inside
./packages/ directory. Code is governed by the Apache License, Version 2.0 except following packages which has special license for font files.
The font "Proxima Nova Fin" shall only be used within Refinitiv products or services. The copyright owner must approve any use of such font outside of Refinitiv products or services, which may be subject to a fee. Please see https://www.fontspring.com/lic/fontspring/webfont#license_text
Font styles in Halo theme are only Regular, Semi Bold and Bold. Do not use 'Itatic' style due to the license on Proxima Nova Fin font.
For questions or issues, please refer to documentation (see Documentation section above and Q&A forum on Developer Community which supported by an active developer community.
We welcome and ❤ contribution in all forms: create issues, opening pull requests to make elements even better, or just being part of our development community.
Issues are important to make the Element Framework better. If you discover any issues with this project, please feel free to create an Issue. Please search through open and closed issues to see if a similar issue already exists. If not, open an issue and try to provide a minimal reproduction if you can.
In the event you have coding suggestions and you would like to create pull request to this repository, it is required that you read and sign the following:
Please email a signed and scanned copy to RefinitivUIDev@refinitiv.com. If you require that a signed agreement has to be physically mailed to us, please email the request for a mailing address and we will get back to you on where you can send the signed documents.
We will review issues and pull requests to determine any appropriate changes.
Element Framework is using monorepo. This repository has elements, supporting modules and tools. Each folder in
packages is one NPM package.
packages/configurations- Configuration file for element development e.g. eslint, typescript
packages/core- Core module of element e.g. base classes, element registration
packages/demo-block- Use in demo page of each element to demonstrate element's features
packages/elemental-theme- Base theme to extend to design system theme e.g. Halo Theme
packages/elements- All elements in Element Framework
packages/halo-theme- Refinitiv design system theme
packages/i18n- Wrappers and APIs of formatjs
packages/phrasebook- All messages (english and non-english) that use within elements
packages/polyfills- Curated polyfills for browsers that are not support web component natively
packages/solar-theme- Legacy theme
packages/test-helpers- Helpers function for unit testing of each elements
packages/theme-compiler- LESS compiler for generating theme package
packages/translate- Decorator for translations (i18n) in each element
packages/utils- Utilities and shared functions
Install npm@7 CLI:
npm install -g npm
git clone firstname.lastname@example.org:Refinitiv/refinitiv-ui.git cd refinitiv-ui npm install
Build all packages:
npm run build
The command-line interface tool that you can use to demo, develop, test, and maintain this repository. The command should be run at root level.
Run and serve the element or package:
npm run start button #or npm run start demo-block
Run the unit test in specific element or package:
npm run test button -- <options>
Run the unit test on all packages:
npm run test:all
Run linting tools in specific a element or package:
npm run lint button -- <options> #or npm run lint demo-block -- <options>
Run linting tools in all elements or packages:
npm run lint:all
|You can specific browser(s) to run the unit test. List of available browsers are following: |
You can check the list of available browsers by add option
|You can run test on BrowserStack with specific browser(s). List of available browsers are following: |
This command option required BrowserStack API Key you must setting the three environment variables
|Run test and watch file change. |
|Update and prune snapshots (|
|Run linting and fix the issues that can lead to bugs or inconsistencies with code health and style. |
Commit prefixes must be written in a correct pattern when committing code into EF repositories. It will be used to determine running version when release the package and for generating changelogs.
|MAJOR||Changes that breaking existing public API.|
BREAKING CHANGE(coral-button): cta attribute has been removed
|MINOR||A new feature.|
feat(coral-button): element sings a song every Sunday
|PATCH||A bug fix.|
fix(coral-button): auto-play issue (#39)
|PATCH||Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc).|
style(coral-button): removed trailing white space
|PATCH||Documentation only changes.|
docs(coral-button): included complex sample to README
|PATCH||A code change that neither fixes a bug nor adds a feature.|
refactor(coral-button): changed song picker algorithm
|PATCH||A code change that improves performance.|
performance(coral-button): lazy load internal DOM structure
|PATCH||Add missing tests.|
test(coral-button): increase code coverage to 85%
|PATCH||Changes to the build process, dependency updates and other maintenance-related commits.|
chore(coral-button): upgrade dependencies