This project contains the Government of Alberta UI components. This web component project supports multiple frontend frameworks, React and Angular. The project is designed to be used to help bring consistency to all Government of Alberta websites and web applications. It's also being designed to help ease the burden on designers and developers alike throughout the development process.
Run the app-setup.sh file.
./app-setup.shYou can then test the playground apps at localhost:4200 by running one of the following:
npm run dev:angular
npm run dev:react
npm run dev:web The design system team is using “Discussions” in the UI-components GitHub repository for managing the creation and assessment of new ideas for platform components, services, and capabilities.
Before creating a new discussion topic, check the discussion board for any existing ideas that may match yours. If there is a good match, please add your examples and comments to the existing discussion instead of creating a new one. If a related discussion topic already exists please join in the discussion!
Provide a high-level description, relevant links and examples of the idea to the discussion topic.
Socialize your discussion topic with your colleague's to help refine and drive out contexts and use cases. If possible have those team members join the “discussion”.
“Vote” on the topics that you think are the highest priority.
Discussion topics that have the most votes and/or input from a number of different team members will be evaluated every two-week cycle by the Design System team. Those items that have the most number of votes and/or input will be evaluated
Opportunities are assessed against WiP limits.
After an assessment, selected “discussions” will be transitioned to “issues” and assigned and prioritized in the different “project” views (Figma, Angular, React, etc.)
You can view the documentation here. This has all the info on how to implement our components, as well as how to get setup to contribute.
You can view how you can contribute here.
| Library | Description |
|---|---|
| web-components | Library of native web components. Published to NPM @abgov/web-components. |
| react-components | Library of components for React. Published to NPM @abgov/react-components. |
| angular-components | Library of components for Angular. Published to NPM @abgov/angular-components. |
| Deprecated [^1] |
[^1]: The npm package, @abgov/styles is now deprecated. Import styles(css) from the web-components package. @import "@abgov/web-components/index.css";. For more instructions find the appropriate setup documentation here