docs: Updated contribution guide (#2169)

Extend contribution guide with more details and pages for 
- testing,
- styling,
- and writing stories.

Added example code-files.

Closes #2062

apps/docs/src/.vitepress/config.ts

@@ -177,7 +177,14 @@ export const CONFIG = {
             },
             {
               text: "Contribution guide",
-              link: "/contributing",
+              link: "/",
+              base: "/principles/contributing",
+              collapsed: true,
+              items: [
+                { text: "Stories", link: "/stories" },
+                { text: "Styling", link: "/styling" },
+                { text: "Testing", link: "/testing" },
+              ],
             },
             {
               text: "Technical vision & guidelines",

apps/docs/src/development/index.md

@@ -160,7 +160,7 @@ Be careful when overriding styles globally since it will affect **EVERY** compon
 import BrowsersList from "../.vitepress/components/BrowsersList.vue"
 </script>
 
-Onyx works best with the following browser versions. Older versions might also work but we can't guarantee full compatibility.
+onyx works best with the following browser versions. Older versions might also work but we can't guarantee full compatibility.
 
 <BrowsersList />
 

apps/docs/src/development/packages/nuxt.md

@@ -55,7 +55,7 @@ For all supported themes see: [Theming](/development/theming#themes)
 
 ## Integration with @nuxtjs/i18n
 
-Onyx features built in translations and the nuxt module extends on that by offering an out of the box integration with [@nuxtjs/i18n](https://i18n.nuxtjs.org/).
+onyx features built in translations and the nuxt module extends on that by offering an out of the box integration with [@nuxtjs/i18n](https://i18n.nuxtjs.org/).
 If your Nuxt project uses both modules, onyx will automatically detect it and use @nuxtjs/i18n to handle all the translations. This gives you all the bells and whistles of vue-i18n like lazy loading of translations.
 
 ### Setup

apps/docs/src/development/theming.md

@@ -4,7 +4,7 @@
 import { data } from './theming.data';
 </script>
 
-Onyx supports a dark and a light theme as well as multiple built-in color themes. The options how to set up the theme for your application are described on this page.
+onyx supports a dark and a light theme as well as multiple built-in color themes. The options how to set up the theme for your application are described on this page.
 
 To learn more about the theming concept of onyx, take a look at our [colors documentation](/basics/colors.html)
 

apps/docs/src/principles/contributing/index.md

@@ -0,0 +1,127 @@
+<script lang="ts" setup>
+import { packageManager } from "../../../../../package.json";
+import nodeVersion from "../../../../../.node-version?raw";
+</script>
+
+# Contribution Guide
+
+When contributing to onyx, please respect the [Schwarz IT Code of Conduct](https://github.com/SchwarzIT/.github/blob/main/CODE_OF_CONDUCT.md) and our [technical vision/guidelines](/principles/technical-vision).
+
+::: info Target audience
+This document is directed at people that are developing **for** onyx.
+It gives tips and guidelines on what should or must be considered when working with onyx.
+:::
+
+## Prerequisites / Technical setup
+
+1. Install [Node.js](https://nodejs.org/en) version **{{ nodeVersion }}**. <br />
+   We recommend using [fnm](https://github.com/Schniz/fnm) for managing your node versions which will automatically use the correct node version when working in the onyx repo.
+
+2. Install the [pnpm](https://pnpm.io/) package manager with a compatible version to `^{{ packageManager.replace("pnpm@", "") }}`
+
+## Recommended IDE Setup
+
+We follow the official Vue recommendation for IDE setup which is [VSCode](https://code.visualstudio.com) with the [Vue - Official](https://marketplace.visualstudio.com/items?itemName=Vue.volar) extension.
+
+## Set up the monorepo
+
+In order to work in the onyx monorepo, you need to install the dependencies by running:
+
+```sh
+pnpm install
+```
+
+## Package scripts
+
+Depending on which package you want to contribute, there are different scripts available. A full list can be found in the `package.json` file of the corresponding package.
+Here is a list of the most commonly used scripts.
+
+::: code-group
+
+```sh [Monorepo root]
+pnpm install # install all dependencies
+pnpm lint:fix:all # lint and fix all packages
+pnpm format:all # format all files
+```
+
+```sh [packages/sit-onyx]
+pnpm dev # run Storybook in dev mode when developing components
+pnpm build # build all onyx components
+pnpm test # run unit tests
+pnpm test:components # run Playwright component tests
+```
+
+```sh [apps/docs]
+pnpm dev # run docs in dev mode
+```
+
+:::
+
+## Creating a Pull Request
+
+Pull Requests are very welcome!
+Please consider our [technical guidelines](/principles/technical-vision) when contributing to onyx.
+
+1. [Create a fork](https://github.com/SchwarzIT/onyx/fork) to commit and push your changes to
+2. When your changes affect the user and need to be released, [add a changeset](https://github.com/SchwarzIT/onyx/blob/main/.changeset/README.md).
+3. Then [create a PR](https://github.com/SchwarzIT/onyx/compare) to merge your changes back into our repository.
+
+When your PR gets approved, you can expect a pre-release immediately after it is merged. Production releases are planned to be published every 2 weeks after the release of version 1.0.0.
+
+::: tip Screenshot tests
+Component screenshot tests using Playwright will only be performed in our [GitHub workflows](https://github.com/SchwarzIT/onyx/actions) to ensure consistency of the resulting images which vary on different operating systems.
+
+If you made visual changes to components, you can use [this Workflow](https://github.com/SchwarzIT/onyx/actions/workflows/playwright-screenshots.yml) to update the screenshots on your branch.
+:::
+
+## Developing Components
+
+Below is the basic code for a new onyx component.
+
+Find more details about:
+
+- 📚 [Writing stories](./stories.md)
+- 🎨 [Creating styles](./styling.md)
+- 🎭 [Implementing tests](./testing.md)
+
+::: code-group
+
+```vue [OnyxComponent.vue]
+<script lang="ts" setup>
+import type { OnyxComponentProps } from "./types";
+import { useDensity } from "../../composables/density";
+
+const props = defineProps<OnyxComponentProps>();
+
+const { densityClass } = useDensity(props);
+</script>
+
+<template>
+  <div :class="['onyx-component', densityClass]">
+    <!-- component HTML -->
+  </div>
+</template>
+
+<style lang="scss">
+@use "../../styles/mixins/layers.scss";
+
+.onyx-component {
+  @include layers.component() {
+    // component styles...
+  }
+}
+</style>
+```
+
+```ts [types.ts]
+import type { DensityProp } from "../../styles/density";
+
+export type OnyxComponentProps = DensityProp & {
+  // component props...
+};
+```
+
+<<< ./testing-example.ct.tsx [OnyxComponent.ct.tsx]
+
+<<< ./stories-example.ts [OnyxComponent.stories.ts]
+:::