@cpelements/elements

Customer Portal Elements

Custom web components for the Red Hat Customer Portal. For guidance, check out the Red Hat Design System Wiki.

💻 For developers

Quick start

git clone [e-mail]:customer-platform/cp-elements.git
cd cp-elements
npm ci
npm run start

External dependencies

When importing an external dependency into to your component, don't forget to also update the ImportMapPlaugin in eleventy.config.cjs for our docs and demo site.

eleventyConfig.addPlugin(ImportMapPlugin, {
    defaultProvider: 'nodemodules',
    localPackages: [
      ...
      '@patternfly/elements/pf-timestamp/pf-timestamp.js',
      '@rhds/elements/rh-cta/rh-cta.js',
      ADD HERE
    ],
  });

Red Hat Design Tokens

When styling your components, don't forget to leverage Red Hat Design Tokens. The team has developed an editor plugin to help! The list of token values can be found here as well.

Command Line Helper Scripts

Many commands have an optional argument of space-separated component name(s), if left off it will assume it should run on all components. These should run from the project root.

Generate

# Generate a new component
npm run new

Compile

# Build all components
npm run build

Preview

# Runs development server
npm run start

Testing

✨ Test using (Web Test Runner)

# Run default test group in watch mode
npm run test:watch

# Run a single test in watch mode
npm run test:watch -- --files elements/cp-404/test/cp-404.spec.ts

# Or multiple:
npm run test:watch -- --files 'elements/cp-{404,more-like-this}/test/*.spec.ts'

# Run all tests excluding react and vue tests
npm run test:watch

# Run all tests using a React wrapper in watch mode
npm run test:react

# Run all tests using a Vue wrapper in watch mode
npm run test:vue

# Run all tests with and without React and Vue wrappers
# This is run on pull request within CI
npm run test:ci

Documentation site

# View the documentation locally
npm run start

# Build the documentation site
npm run docs