To ensure the quality and usability of our design system features, each feature must meet the following criteria before it is considered complete:
General requirements
Acceptance criteria
- All specified acceptance criteria have been met.
Build and tests
- The build and all tests pass successfully.
Code review
- Code has been reviewed and approved by another developer.
Quality gate
- Code passes automated code linting and the SonarCloud quality gate.
Test coverage
- Minimum of 80% test coverage is achieved.
Cross-browser and device testing
- Tested on the latest versions of supported browsers:
- Microsoft Edge (Chromium)
- Chrome
- Safari
- Tested on supported devices:
- iOS (Safari)
- Android (Chrome)
Design System requirements
SCSS
- SCSS functions/helpers are documented in Storybook.
- SassDoc is provided for improved developer experience.
Components
Accessibility
- Meets WCAG 2.1 AA accessibility guidelines.
- Stories pass AXE automated accessibility testing.
- Accessibility considerations are documented in Figma and Storybook.
- HTML output is valid and semantic.
Developer/User experience
- A story is added to Storybook showcasing the main possible states/configurations.
- Example documentation for importing and using the component is provided.
- Components include TypeScript type definitions.
- Instructions are available for importing any related assets (e.g., icons, images, fonts).
Design review
- Components have received design approval.
Testing
- Interaction tests are included to demonstrate and test user interactions.
- The component can be successfully imported into a local sandbox environment.
Internationalisation
- CSS uses logical properties to respect different writing modes.
- Right to left stories are created to test how the component is displayed in RTL contexts.
- The component is tested with long text scenarios.
- All labels, symbols, and culture-specific formatting are configurable.
SEO
- The component uses slots where server-side rendered HTML is beneficial for SEO.
- Appropriate HTML tags are used for semantic elements.
- Static rendering docs provided for components that have no dynamic behaviour.