The TELUS Design System maintains a set of standards and practices for core components and community components.
- What is Core and Community?
- Community component criteria
- Component principles
What is Core and Community?
TDS Core provides a library of highly-reusable components and foundational principles that can be composed and combined to help solve complex designs rapidly. TDS Community is a centralized library of components that are not quite foundational, but are identified as reusable among several teams at TELUS.
Core versus Community
TDS Core and TDS Community are very similar. They have:
- Tooling: Sketch users consume InVision DSM components, React users consume npm packages
- Quality: both Core and Community embody the same quality standards
Core and Community differ in the following ways:
- Governance: Core's roadmap and maintenance is determined by a single product team, whereas Community utilizes a federated governance model; with a group of representatives from every major team at TELUS appraising and triaging contributions made to Community components
- Reusability: Core components typically wrap simple patterns that are highly reusable across most teams, whereas Community components represent solved designs that are coded and sharable among outcome teams without reliance on the Core design system team
- Ownership: Core components are built and maintained by the TELUS Design System team. Community components are built and maintained by all consumers, and and owned by the Digital Platform Ambassadors
Community component criteria
Before designing or contributing new components, confirm the following criteria in order to qualify a viable community component. If knowing that a component can qualify for TDS Community is uncertain, we still welcome opening a new issue to gather more details and find opportunities.
A community component:
- Must have an identified use case in at least 2 unique experiences
- Community components have the most impact when shared across multiple situations in many experiences
- Core components have the most impact when they can be used across most experiences and can be composed to solve complex designs
- Must be brand aligned and assessed by Design Direction (if applicable)
- New user experience patterns must involve Design Direction to preserve a high-quality and consistent end customer experience
Must not include business logic or proprietary information
- The presence of these things limits the breadth of reuse for a component
Design system components are focused on reusable user experience patterns. Keep business logic, API calls, content, or other application-specific behaviour in the application
See more details regarding business logicExamples of business logic:
- Controlling, fetching, and displaying proprietary TELUS data
- Controlling, fetching, and displaying information from an external API (such as YouTube or Google Maps) in a manner that could limit the component scope, or reusability of the API. Even if the external API has evaluated use cases, use discretion as it could increase the maintenance scope of the component
- Interacting with other components on a page that are not self-contained
- Rendering different views based on designs
- Controlling global aspects of the DOM (window, document). Not recommended, but acceptable
- Having internal component state (i.e. React class components)
- Must be sufficiently different than other available shared components
- Community components reduce duplication by promoting flexibility and reuse of existing code
- Before creating a new component, consider whether an existing pattern and component is sufficient. If not, consider extending or adding features to an existing component before creating a new one
- Should be sufficiently granular to promote reuse
- Design system components should encapsulate a single pattern or user experience "element." Seek to find the most granular, standalone, reusable pattern
Note, this criteria should be interpreted as described in RFC2119.
All TELUS Design System components follow these core principles.
- Components are most effective when they can be combined to form more complex patterns.
- Follow accessible standards defined in the TELUS Reference Architecture
- Mobile-first. Works on any viewport size.
- Thorough testing is a first class concern.
- See browser support in the FAQ