# Teddy - Telia Norway's Design System

<p align="center">
  <img src="https://d67ed36g77c51.cloudfront.net/teddy200.png" width="100" alt="Teddy - Telia Norway's Design System" />
</p>
<p align="center">
  <img src="https://img.shields.io/npm/v/@telia/teddy?style=flat-square&color=00a8f0" alt="npm version" />
  <img src="https://img.shields.io/npm/dm/@telia/teddy?style=flat-square&color=00a8f0" alt="downloads" />
</p>

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`](/docs/CONTRIBUTING.md) for contribution guidelines.

To contribute to or utilize Teddy:

1. **Clone the repository**:

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

2. **Setup**

   - Node.js (v20) `nvm install 20 --lts`/`nvm use 20`
   - PNPM (v10) `npm install -g pnpm@10`

3. **Install dependencies**:

   ```bash
   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](/docs/icons.md)