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.
Create .env file from .env.example
if [ ! -f .env ]; then cp ./.env.example ./.env; fiRun the pg-setup file.
npm run pg:setupYou can then test the playground apps at localhost:4200 by running:
# build the web components
npm run dev:watch
# add one of the following
npm run serve:angular
npm run serve:react
npm run serve:webSince the playground is not included in the CVS it is common to have playground
comment/uncomment code the npm run pg:switch script can automate this by switching
code that is out of sync with library code. To prevent having to continually
between playgrounds that are specific to the branch.
To switch to a branch that doesn't yet exist, run the following
npm run pg:switch new [branch-name]To switch to an existing branch run the following
npm run pg:switch [branch-name]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. 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.
| 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 |