https://github.com/absaoss/cps-shared-ui
Angular shared components library
https://github.com/absaoss/cps-shared-ui
Last synced: 6 months ago
JSON representation
Angular shared components library
- Host: GitHub
- URL: https://github.com/absaoss/cps-shared-ui
- Owner: AbsaOSS
- License: apache-2.0
- Created: 2023-04-06T14:11:08.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2025-08-06T09:23:15.000Z (6 months ago)
- Last Synced: 2025-08-06T10:09:58.734Z (6 months ago)
- Language: TypeScript
- Homepage: https://absaoss.github.io/cps-shared-ui/
- Size: 3.1 MB
- Stars: 9
- Watchers: 4
- Forks: 3
- Open Issues: 26
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
## Consumer Products UI Kit
### Angular shared components library
This repository consists of two projects:
- `cps-ui-kit` - shared components library itself
- `composition` - application for previewing compositions of components consumed from the library
#### Available components
- Autocomplete
- Button
- Button toggles
- Checkbox
- Chip
- Datepicker
- Dialog
- Divider
- Expansion panel
- File upload
- Icon
- Info circle
- Input
- Loader
- Menu
- Notifications
- Paginator
- Progress circular (indeterminate)
- Progress linear (indeterminate)
- Radio
- Scheduler
- Select
- Sidebar menu
- Switch
- Table
- Tabs
- Tag
- Textarea
- Timepicker
- Tooltip directive
- Tree autocomplete
- Tree select
- Tree table
## Development server
Run `ng build cps-ui-kit --watch` and `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
## Design guidelines
https://www.figma.com/file/JAlfp4zwZIONMWYPbLY4aM/Consumer-products-design-system?node-id=0%3A1&t=qVkCtHGgnZSpAYVp-1
## How-to
#### Create a new component
- go to `projects/cps-ui-kit/src/lib/components` directory
- run: `ng g c cps-componentname --standalone --prefix`
- modify `projects/cps-ui-kit/src/public-api.ts` to export the component from the library
- update available components list in `projects/cps-ui-kit/README.md` (keep alphabetical order!)
Make sure `ng build cps-ui-kit --watch` is running, so the library will be rebuilt on each change of its contents due to `--watch` flag
#### Create a composition page
- go to `projects/composition/src/app/pages` directory
- run: `ng g c componentname-page --standalone`
- there is no need to test composition pages, so manually delete `componentname-page.component.cy.ts` file (can't be done automatically with Angular CLI flag, since cypress is used)
- provide `host: { class: 'composition-page' }` into page `@Component`
- import the components for the composition page from `cps-ui-kit`, provide them to imports array of `@Component`
- include `ComponentDocsViewerComponent` into `@Component` `imports` array in case of a new component page, include `ServiceDocsViewerComponent` into `@Component` `imports` array in case of a new service page
- import `ComponentData or ServiceData` from '../../api-data/cps-componentname.json' once it is generated
- wrap page html template contents into `...` in case of a new component page, wrap page html template contents into `...` in case of a new service page
- go to `projects/composition/src/app/components/navigation-sidebar.component.ts` file and extend `_components` array (keep alphabetical order!)
- go to `projects/composition/src/app/app-routing.module.ts` and add a new route for a new page
- update available components list in `/README.md` (keep alphabetical order!)
#### Generate API documentation
Execute `npm run generate-json-api` to generate documentation for any changes in the components' API.
#### Run Jest unit tests
`npm run test`
#### Run Cypress e2e tests
`npm run cypress:run` (headless run) or you can open Cypress tests using `npm run cypress:open`
#### Run accessibility tests
The project uses [pa11y-ci](https://github.com/pa11y/pa11y-ci) to test all components for WCAG 2.0 AA compliance.
To run accessibility tests:
1. Start the development server:
```bash
npm run start
```
2. In a separate terminal, run the accessibility tests:
```bash
npm run test:a11y
```
Alternatively, use the combined script that starts the server and runs tests:
```bash
npm run test:a11y:local
```
For a colorful summary with statistics:
```bash
npm run test:a11y:summary
```
This will display:
- Total URLs tested with pass/fail ratio
- Total accessibility errors found
- Accessibility standard (WCAG 2.0 AA)
- Test engine (axe-core via pa11y-ci)
- Top 10 components with the most issues
The tests will check all 33 components for accessibility issues and report any violations found.