Custom web components for the Red Hat Customer Portal. For guidance, check out the Red Hat Design System Wiki.
git clone git@gitlab.cee.redhat.com:customer-platform/cp-elements.git
cd cp-elements
npm ci
npm run start
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
],
});
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.
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 a new component
npm run new
# Build all components
npm run build
# Runs development server
npm run start
✨ 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
# View the documentation locally
npm run start
# Build the documentation site
npm run docs