\n\nWelcome to Teddy, Telia Norway's component library crafted to enhance the development of consistent, user-friendly\ninterfaces. Teddy offers a suite of components styled in harmony with Telia's brand guidelines, aiming to facilitate UI\ndevelopment and enrich user experience.\n\n## Project Philosophy\n\nTeddy is built on a foundation of three core principles:\n\n- **Modularity and Reusability**: Our focus is on creating small, modular components that can be easily integrated and\n reused, accelerating development and ensuring UI consistency.\n\n- **Accessibility**: With a commitment to inclusivity, accessibility is at the forefront of our design process. We aim\n to make our components universally usable, adhering to WCAG guidelines and accessibility best practices.\n\n## Contributing\n\nWe welcome contributions to Teddy! Whether you're improving existing components, adding new features, or enhancing\ndocumentation, your input is invaluable. See our [`CONTRIBUTING.md`](/docs/CONTRIBUTING.md) for contribution guidelines.\n\nTo contribute to or utilize Teddy:\n\n1. **Clone the repository**:\n\n ```bash\n git clone https://github.com/telia-company/teddy\n ```\n\n2. **Setup**\n\n - Node.js (v20) `nvm install 20 --lts`/`nvm use 20`\n - PNPM (v10) `npm install -g pnpm@10`\n\n3. **Install dependencies**:\n\n ```bash\n pnpm install\n ```\n\n### Explore and Develop\n\nThe Teddy project is structured to support efficient development, particularly through its `lib` and `other`\ndirectories. These directories are essential for the project, serving different but related purposes.\n\n#### Lib Folder\n\nThe `lib` directory is where the core parts of the Teddy library are located. It contains:\n\n- **Components**: The core UI components of the library.\n- **Styles**: Util styles for consistency across components.\n- **Utils**: Utility functions and hooks for enhanced component functionality.\n- **Icons and Tokens**: Generated from the `other` folder, these assets include icons and design tokens for the\n library's visual design.\n- **Teams**: A space for teams to develop custom components for specific needs, separate from the main library.\n\n#### Other Folder\n\nThe `other` directory supports the development and documentation of Teddy.\n\n- **Scripts**: Contains automation scripts crucial for the development and maintenance of the project. These scripts\n include:\n - **Icon and Token Generation**: Scripts for generating icons and tokens that populate the `lib/icons` and\n `lib/tokens` directories, ensuring design consistency and scalability across the project.\n - **Component Scaffolding with Plop**: Utilizes `plopfile.ts` to automate the process of creating new components,\n whether they are core components or team-specific components. This setup streamlines the addition of new components\n to the project by providing a series of prompts to specify the component's attributes (such as name, category, and\n team) and then automatically generating the necessary files according to predefined templates. This process not only\n saves time but also enforces coding and design standards across the project.\n- **Stories**: Storybook stories that document the project.\n- **Tokens**: Source files for design tokens that dictate the library's foundational styles.\n- **SVG-Icons**: A collection of SVG files that are transformed into svg-sprite for the library. For more information,\n [read the icon.md file](/docs/icons.md)\n","readmeFilename":"README.md"}
![\"Teddy](\"https://d67ed36g77c51.cloudfront.net/teddy200.png\")
\n![\"npm](\"https://img.shields.io/npm/v/@telia/teddy?style=flat-square&color=00a8f0\")
![\"downloads\"](\"https://img.shields.io/npm/dm/@telia/teddy?style=flat-square&color=00a8f0\")