Developer Guide Questions or Comments?

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
  • Typography
  • Breakpoints
  • Icons

Elements SDK also provides a number of JavaScript (transpiled from ES6) based components that enhance the design specifications with certain functionalities that allow pieces of functionality 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 JavaScript components includes:

  • Calendar
  • Dropdown
  • Footer
  • 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

Team Scenario 1: Brand New Application

  1. Build your app using these recommendations: React, Redux, webpack, and Node v4+ toolchain
  2. Review components library and, at a minimum, use Typography, Colors, Icons, Responsive Utilities from the Elements SDK:
  3. Review App Header and Contextual Help for possible inclusion
  4. Consume other components as needed using ‘npm install’ and component usage instructions. (See Team Scenario 4)

Team Scenario 2: Adding Elements SDK or vanilla JS components to any Existing Application

  1. Install npm2+ and identify how npm modules will work with your build process
  2. Review the Elements SDK and, at a minimum, use Typography, Colors, Icons, Responsive Utilities:
  3. Review the other components in the Pearson Origami npm registry
  4. Consume other components as needed using ‘npm install’ and component usage instructions

Team Scenario 3: Adding Elements SDK or React components to non-React Application

  1. Install npm2+ and identify how npm modules will work with your build process
  2. Add React/ReactDOM dependencies, via either script includes to page or npm installation
  3. For Angular 1.x apps, review the compounds-ng wrapper
  4. Review the JavaScript components in Elements SDK
  5. Integrate npm installable App Header and Contextual Help
  6. Review the other components in the Pearson Origami npm registry
  7. Consume other components as needed using ‘npm install’ and component usage instructions

Team Scenario 4: Adding Elements SDK or React components to existing React Application

  1. Install npm2+ and identify how npm modules will work with your build process
  2. If on React < 0.14, upgrade to React v15
  3. Review the JavaScript components in Elements SDK
  4. Integrate npm installable App Header and Contextual Help if desired
  5. Review the other components in the Pearson Origami npm registry
  6. Consume other components as needed using ‘npm install’ and component usage instructions

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.

Google group

Neo site

Help with React