ids-enterprise-wc

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, patterns and layouts
• Touch-friendly interactions
• SVG-based iconography for high DPI screens and scaling
• Built-in, extendible localization system
• Built-in mitigation of XSS exploits
• 85-100% Functional Test Coverage
• Passes all code security scans and is fully CSP compliant
• 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
• 100+ Components
• Includes Visual Code and standard schemas

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 [e-mail]:infor-design/enterprise-wc.git .
npm i
npm run start

Documentation

• For each component see the .md file in the relevant component folder
• See the Change Log for info on breaking changes as well more info in each individual component
• See the Examples in popular frameworks for examples and notes on using these in several frameworks

Usage for 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.

1. As per above, install with npm install --save ids-enterprise-wc@latest
2. Create a folder called .vscode at the root of your project
3. Create a file inside that folder called settings.json
4. 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.

Contributing

• Articles about Web Components
• Things to consider for each component
• How to Make a new Component
• Info on which linters we use
• Info on Running and Debugging Tests
• Use Github Issues to report all requests, bugs, questions, and feature requests
• Review source code changes
• Roadmap and Sprint Board