|
| 1 | +# Project Overview |
| 2 | +This project contains the public documentation for the Government of Alberta's Design System. |
| 3 | + |
| 4 | +## Libraries and Frameworks |
| 5 | +- The site is built with React components from the Government of Alberta's UI Components library. |
| 6 | + |
| 7 | +## Folder Structure |
| 8 | +- `src/routes/home.tsx`: The home page. |
| 9 | +- `src/routes/get-started`: The pages for starting with the design system. |
| 10 | +- `src/routes/examples/ExamplesOverview.tsx`: The page listing all examples. |
| 11 | +- `src/examples`: Examples of patterns, pages, tasks, component configurations, flows, and more. |
| 12 | +- `src/routes/components/AllComponents.tsx`: The page listing all components. |
| 13 | +- `src/routes/components`: The pages for each UI component. |
| 14 | +- `src/routes/design-tokens`: The pages for design tokens. |
| 15 | +- `src/routes/foundations`: The pages for design foundations. |
| 16 | + |
| 17 | +## Component versions |
| 18 | +- Documentation for the most recent version of components are shown with `version === "new"`. |
| 19 | +- Documentation for old Long-Term Support (LTS) components are shown with `version === "old"`. |
| 20 | + |
| 21 | +## Commits & Pull Requests |
| 22 | +- Use Conventional Commits format for commit messages. |
| 23 | +- Use the present tense. |
| 24 | +- Use the imperative mood. |
| 25 | +- Limit the first line to 72 characters or less. |
| 26 | +- Start the commit message with a reference to the GitHub Issue number, such as `feat(#1234):` |
| 27 | +- If the commit relates to an issue, include "Closes #ISSUE_NUMBER" in the commit message. |
| 28 | +- If the commit relates to a breaking change, include "BREAKING CHANGE:" in the commit message. |
| 29 | + |
| 30 | +## Pull Requests |
| 31 | +- Only add a single commit to a Pull Request. |
| 32 | +- Start the Pull Request title with a reference to the GitHub Issue number, such as `feat(#1234):` |
| 33 | + |
| 34 | +## CSS and Design Tokens |
| 35 | +- Use CSS custom properties that are defined by our design tokens. |
| 36 | +- Name custom properties for global styles in this format: `--goa-[category]-[name]`, such as `--goa-color-primary`. |
| 37 | +- Name custom properties for component-specific styles in this format: `--goa-[component]-[category]-[name]`. |
0 commit comments