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 [email protected]: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

Publishing to NPM

1. Create an account on npmjs if you have not already
2. Setup two factor authentication on npmjs
3. Get access to publish components (if you need access to the @cpelements org, contact Tyler Martin, or Kyle Buchanan)
4. Update the project root package.json version by 1 with npm version patch i.e. 2.0.0-alpha.24 => 2.0.0-alpha.25
5. Check that you are logged in to npmjs using npm whoami (if you are not logged in you will need to log in before you can publish changes to npmjs)
6. Run a project build npm run build - if all is good move to the next step
7. Run a project lint npm run lint - if all is good move to the next step
8. To publish the new package version run the publish command npm publish --access=public
9. When succesful be sure to commit the updated package.json file to the repo.

Important Note about the package-lock.json file

• if you made changes to the package.json file, then commit the package-lock.json file otherwise DO NOT commit the package-lock.json