New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

@refinitiv-ui/elements

Package Overview
Dependencies
Maintainers
1
Versions
226
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@refinitiv-ui/elements

Element Framework Elements

  • 5.1.0
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
56
decreased by-86.44%
Maintainers
1
Weekly downloads
 
Created
Source

Element Framework

Element Framework (EF) is a collection of elements that includes theming capability within the Refinitiv's design system. The elements are a set of web components which is a standard web technology and can be utilized across all browsers.

Usage

EF elements are published under single package.

npm install @refinitiv-ui/elements

The elements are required theme to instantiate itself in the app. Refinitiv's design system is called Halo theme and you can install it from npm command.

npm install @refinitiv-ui/halo-theme

Finally, import both elements that you want to use and its themes into your application and it is ready to go. To follow Refinitiv design system, it is required styles of some native elements e.g. typography.


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


// import native styles for typography, css variables, etc.
import '@refinitiv-ui/halo-theme/dark/imports/native-elements';

// import element and its Halo dark theme
import '@refinitiv-ui/elements/lib/button';
import '@refinitiv-ui/elements/lib/panel';
import '@refinitiv-ui/elements/lib/button/themes/halo/dark';
import '@refinitiv-ui/elements/lib/panel/themes/halo/dark';

Now, you can use the elements in your app.

.content {
    width:100%;
    height: 500px;
}
<ef-panel class="content" spacing>
    <h2>Hello EF!</h2>
    <ef-button cta>OK</ef-button>
</ef-panel>

Command Overview

CommandTargetDescriptionExample
npm start<element>Build and serve an element.npm start button
npm run test<element> | allRun unit tests.npm run test button
npm run test:watch<element>Run test server.npm run test:watch button
npm run test:snapshots<element> | allUpdate and prune snapshots.npm run test:watch button
npm run lint<element> | allRun linting tools.npm run lint button
npm run lint:fix<element> | allFix linting errors.npm run lint:fix button

Documentation

See list of elements, demo and more tutorial by visiting EF Documentation.

License

Apache License 2.0. However, Halo theme shall only be used within Refinitiv products or services due to license of the font "Proxima Nova Fin".

FAQs

Package last updated on 30 Jul 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc