Infor Design System Web Components Beta Library

Infor Design System Enterprise Web Components Library is a framework independent UI library consisting of CSS and JS that provides Infor product development teams, partners, and customers the tools to create user experiences that are approachable, focused, relevant, and perceptive.

Key Features

Three themes, including a WCAG 2.0 AAA compatible high-contrast theme and ability to theme anything
Responsive components
Touch-friendly interactions
SVG-based iconography for high DPI screens and scaling
Built-in, extendible localization system
Built-in mitigation of XSS exploits
Excellent test coverage
Well documented in .md format
Contains an extensive Change log which lists any and all breaking changes
Fully linted code
Follows WAI-ARIA authoring practices with a focus on accessibility
Fully namespaced with an ids- namespace
We follow the Gold standard for making web components
Includes types for typescript users
Every component has the CSS and DOM Encapsulation for css collision avoidance
100+ Components
Includes Visual Code intellisense with standard schemas
Typescript types
We now support Es Modules
Bundle size in npm is 33% smaller (with code splitting enabled)
Supports CSP including css and js CSP
The newest designs will be added here
Removed a lot of older less commonly used features and misused patterns
New scroll view component to replace circle pager
New chart components
Data Grid virtual DOM
Flexible Flex Grid and responsive grid

Browser Support

We support the latest release and the release previous to the latest (R-1) for browsers and OS versions:

IE Edge	Firefox	Chrome	Safari	iOS Safari
R-1	R-1	R-1	R-1	R-1

Installation

The components are available via npm/yarn:

npm install --save ids-enterprise-wc@latest

To Clone and Run this Repo locally (requires node 18 (16 or 17))

mkdir enterprise-wc
cd enterprise-wc
git clone git@github.com:infor-design/enterprise-wc.git .
npm i
npm run start

Also include the Source Sans Pro Font in your project and app pages.

Using Code Hinting

The npm package ships with a file called vscode.html-custom-data.json. The file describes the custom elements and their settings for use in Visual Studio Code to provide “IntelliSense”. To enable it, you just need to tell VS Code where the file is.

As per above, install with npm install --save ids-enterprise-wc@latest
Create a folder called .vscode at the root of your project
Create a file inside that folder called settings.json
Add the following setting to the file.

{
  "html.customData": ["./node_modules/ids-enterprise-wc/vscode.html-custom-data.json"]
}

You may need to restart VS Code for the changes to take affect.

Most popular editors support custom code completion with different configurations. Please submit a feature request and/or pull request if you want to add your editor.

Documentation

See the Documentation for each component in markdown format. In addition to this index you will see a .md file in each component folder if browsing the source and examples.
See the Migration Guide
See the Change Log for info and breaking changes by version
See the Examples in popular frameworks for examples and notes on using these in several frameworks

infor-design / enterprise-wc

readme