cpelements v0.0.1

CP Elements

Clone of PatternFly Elements

This repo was created to keep track of custom web components made for the customer portal that aren't necessarily great candidates for open source.

Table of Contents

1. Getting started
2. Element catalog
3. Creating components
4. Theming components

PatternFly Elements is a work-in-progress collection of flexible and lightweight Web Components based on the Unified Design Kit. The repo also includes a generator to build new components. PatternFly Elements are:

• Lightweight: small file size, minimal boilerplate, no "framework-like" features.
• Universal: write once, use everywhere. PatternFly Elements work in React, Vue, Angular, vanilla JS, anywhere HTML elements are used.
• Themable: Make overrides as needed via attributes or CSS variables

The result of these principles is that you can plug one set of components into a wide variety of applications; bringing UX consistency and developer familiarity to any web project.

A Yeoman generator is included for creating Web Components that meets these goals.

Quick start

git clone git@github.com:redhataccess/cp-elements.git
cd cp-elements
npm install # this will take a while due to lerna bootstrap
npm run storybook

The storybook script will launch the interactive demo pages.

Note: You will need to use Node v.7 or higher.

Command Line Helper Scripts

Many commands have an optional argument of a component name, if left off it will assume it should run on all components. These should run from the project root.

Compile

# Run, watch, and build all components
npm run dev

# Run, watch, and build one component
npm run dev [component-name]

Preview

# Runs server process to preview files
npm start

# Runs storybook preview tool
npm run storybook

# Runs build and server (but doesn't watch)
npm run demo

Compile & Preview

# Runs build, watch, and server processes
npm run live-demo

Testing

# Run tests on all components
npm run test 

# Run tests on one component
npm run test [component-name]

Support

Though we have tested and verified general usability within these frameworks, cp-elements makes no guarantees about compatibility within specific sites & applications. Please test accordingly. cp-elements is currently supported and maintained by the Customer Portal internal team.

home | start | develop | theming | storybook | web components