UX Framework
Developer Guide
Search the component library

Developer Guide

Components are being hosted on NPM under the @pearson-components organization. The majority will be available in public scope, but some will be privately scoped and require credentials to install.

Elements SDK

We offer an SDK which packages together a set of commonly used components together for easy installation and usage.

Elements SDK consists of pure CSS (precompiled from SCSS) and includes the core set of components for setting up a website with Elemental Design. This list includes components such as:

  • Buttons
  • Colors
  • Forms
  • Typography
  • Breakpoints
  • Icons
  • Inputs
  • Responsive-utilities

Elements SDK also provides a number of React (transpiled from ES6) based components that enhance the design specifications with certain functionalities that allow them to be dropped into an application. These components are based upon the React library, but are also designed to work within any application framework. These components assume that the CSS portion of the Element SDK is also being implemented.
The list of React components includes:

  • Calendar
  • Dropdown
  • Footer
  • StaticAlert
  • Tabs
  • loadingSpinner
  • Table
  • DatePicker
  • TimePicker
  • Buttons
  • Input fields (e.g. text input, radio/check group, select, etc.)

In addition to the compiled CSS, Elements also installs the source SCSS files (and assets) in case you want to integrate it more directly into your existing build process. This also allows you to access some of the SCSS features in your own styles, such as the predefined color variables. Read more on Github or in the developer documentation.

Consuming

For All Teams

Contributing

Read the Component Creation Guide to learn about the process of adding a new component to the library. The development standards are currently being determined, for now please follow the Origami principles. If you are contributing to the Elements SDK follow these guidelines as well.

Note: Specifically for adding icons to Elements SDK, first the icons must be approved by UXF (PDA) team members. After that, you may follow the instructions in the Elements SDK README.

Development specific requirements will eventually be added to the Library Membership Specification. In the meantime, one principle to keep in mind is that components should not do any data fetching themselves, rather they should expect data to be passed through eventing or properties.

QA Contribution

Ux-test-platform is the UX Test Framework for UXF components. Read the Contribute to UX Test Framework to learn about the process to contribute to the Test framework. Once your QA submits the PR, it will be reviewed, approved and merged by UXF (PDA) QA members.

Google group

Neo site

Help with React