Teddy - Telia Norway's Design System

Welcome to Teddy, Telia Norway's component library crafted to enhance the development of consistent, user-friendly interfaces. Teddy offers a suite of components styled in harmony with Telia's brand guidelines, aiming to facilitate UI development and enrich user experience.

Project Philosophy

Teddy is built on a foundation of three core principles:

• Modularity and Reusability: Our focus is on creating small, modular components that can be easily integrated and reused, accelerating development and ensuring UI consistency.

• Accessibility: With a commitment to inclusivity, accessibility is at the forefront of our design process. We aim to make our components universally usable, adhering to WCAG guidelines and accessibility best practices.

Contributing

We welcome contributions to Teddy! Whether you're improving existing components, adding new features, or enhancing documentation, your input is invaluable. See our CONTRIBUTING.md for contribution guidelines.

To contribute to or utilize Teddy:

1. Clone the repository:

   git clone https://github.com/telia-company/teddy

2. Setup

   • Node.js (v20) nvm install 20 --lts/nvm use 20
   • PNPM (v9) npm install -g pnpm@9

3. Install dependencies:

   pnpm install

Explore and Develop

The Teddy project is structured to support efficient development, particularly through its lib and other directories. These directories are essential for the project, serving different but related purposes.

Lib Folder

The lib directory is where the core parts of the Teddy library are located. It contains:

• Components: The core UI components of the library.
• Styles: Util styles for consistency across components.
• Utils: Utility functions and hooks for enhanced component functionality.
• Icons and Tokens: Generated from the other folder, these assets include icons and design tokens for the library's visual design.
• Teams: A space for teams to develop custom components for specific needs, separate from the main library.

Other Folder

The other directory supports the development and documentation of Teddy.

• Scripts: Contains automation scripts crucial for the development and maintenance of the project. These scripts include:
  • Icon and Token Generation: Scripts for generating icons and tokens that populate the lib/icons and lib/tokens directories, ensuring design consistency and scalability across the project.
  • Component Scaffolding with Plop: Utilizes plopfile.ts to automate the process of creating new components, whether they are core components or team-specific components. This setup streamlines the addition of new components to the project by providing a series of prompts to specify the component's attributes (such as name, category, and team) and then automatically generating the necessary files according to predefined templates. This process not only saves time but also enforces coding and design standards across the project.
• Stories: Storybook stories that document the project.
• Tokens: Source files for design tokens that dictate the library's foundational styles.
• SVG-Icons: A collection of SVG files that are transformed into svg-sprite for the library. For more information, read the icon.md file