move docs

.eslintignore

@@ -1,5 +1,6 @@
 node_modules
 dist
+test
 
 packages/icons/src/index.ts
 packages/core/icons

.gitignore

@@ -74,20 +74,20 @@ e2e/downloads
 resources/data
 !resources/data/tags.json
 
-apps/docs/stories/contributors.md
-apps/docs/stories/development/00-guides/theming/theming.md
-apps/docs/public/assets/fonts/
-apps/docs/public/assets/data/
-apps/docs/public/assets/download/
-apps/docs/public/assets/css/baloise-design-system.min.css
-apps/docs/public/assets/css/design-system-table.css
-apps/docs/public/assets/css/baloise-design-system.min.css
-apps/docs/public/build/
-apps/docs/stories/components/**/api.md
-apps/docs/public/assets/images/map-markers
-apps/docs/public/assets/images/brand-icons
-apps/docs/public/assets/images/icons
-apps/docs/stories/assets/data
-apps/docs/dist
+docs/stories/contributors.md
+docs/stories/development/00-guides/theming/theming.md
+docs/public/assets/fonts/
+docs/public/assets/data/
+docs/public/assets/download/
+docs/public/assets/css/baloise-design-system.min.css
+docs/public/assets/css/design-system-table.css
+docs/public/assets/css/baloise-design-system.min.css
+docs/public/build/
+docs/stories/components/**/api.md
+docs/public/assets/images/map-markers
+docs/public/assets/images/brand-icons
+docs/public/assets/images/icons
+docs/stories/assets/data
+docs/dist
 
 .angular

.nxignore

@@ -1,4 +1,5 @@
 packages/core/components
 packages/core/loader
 packages/core/icons
-apps/docs/public
+docs/public
+test

README.md

@@ -1,5 +1,39 @@
-Start commands
+<a href="https://design.baloise.dev" target="blank">
+    <img src="https://raw.githubusercontent.com/baloise/design-system/main/resources/images/banner.svg?sanitize=true" alt="Baloise Design System" />
+</a>
 
-npx nx run core:start
-npx nx run docs:start
-npx nx run e2e:start
+<br>
+
+[![Continuous](https://github.com/baloise/design-system/actions/workflows/continuous.yml/badge.svg?branch=main)](https://github.com/baloise/design-system/actions/workflows/continuous.yml)
+
+![npm](https://img.shields.io/npm/v/@baloise/design-system-components)
+![npm bundle size](https://img.shields.io/bundlephobia/min/@baloise/design-system-components)
+![npm](https://img.shields.io/npm/dt/@baloise/design-system-components)
+![GitHub](https://img.shields.io/github/license/baloise/design-system)
+![GitHub issues](https://img.shields.io/github/issues/baloise/design-system)
+[![Registred on webnamespaces.org](https://img.shields.io/static/v1?label=webnamespaces.org&color=blue&message=bal)](https://webnamespaces.org)
+![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)
+
+## About
+
+The Baloise Design System consists of reusable components and a clearly defined visual style, that can be assembled together to build any number of applications.
+
+Check out the [documentation](https://design.baloise.dev)
+
+## Packages
+
+| Package                                          | Status                                                                         | Description                                                             |
+| ------------------------------------------------ | ------------------------------------------------------------------------------ | ----------------------------------------------------------------------- |
+| [Components](https://design.baloise.dev)         | ![npm](https://img.shields.io/npm/v/@baloise/design-system-components)         | Core package build with web components and global styling.              |
+| [Components Angular](https://design.baloise.dev) | ![npm](https://img.shields.io/npm/v/@baloise/design-system-components-angular) | Angular component proxies based on the the core package.                |
+| [Components Vue](https://design.baloise.dev)     | ![npm](https://img.shields.io/npm/v/@baloise/design-system-components-vue)     | Vue component proxies based on the the core package.                    |
+| [Components React](https://design.baloise.dev)   | ![npm](https://img.shields.io/npm/v/@baloise/design-system-components-react)   | React component proxies based on the the core package.                  |
+| [Components Table](https://design.baloise.dev)   | ![npm](https://img.shields.io/npm/v/@baloise/design-system-components-table)   | Integration library for AG-Grid with styles and renderer functions      |
+| [CLI](https://design.baloise.dev)               | ![npm](https://img.shields.io/npm/v/@baloise/design-system-cli)                | CLI to scaffold an angular project or migration helpers.                |
+| [Tokens](https://design.baloise.dev)             | ![npm](https://img.shields.io/npm/v/@baloise/design-system-tokens)             | Design Tokens like color and spacing.                                   |
+| [Styles](https://design.baloise.dev)            | ![npm](https://img.shields.io/npm/v/@baloise/design-system-styles)             | Basic CSS styles with utility classes.                                  |
+| [Icons](https://design.baloise.dev)              | ![npm](https://img.shields.io/npm/v/@baloise/design-system-icons)              | SVG icons of the design system.                                         |
+| [Favicons](https://design.baloise.dev)           | ![npm](https://img.shields.io/npm/v/@baloise/design-system-favicons)           | Favicons of the design system.                                          |
+| [Maps](https://design.baloise.dev)               | ![npm](https://img.shields.io/npm/v/@baloise/design-system-maps)               | Google Maps styles and icons.                                           |
+| [Fonts](https://design.baloise.dev)              | ![npm](https://img.shields.io/npm/v/@baloise/design-system-fonts)              | Web-Font of the design system.                                          |
+| [Testing](https://design.baloise.dev)            | ![npm](https://img.shields.io/npm/v/@baloise/design-system-testing)            | Testing package with custom and overridden commands for each component. |

apps/docs/.storybook/addons/version/register.js → docs/.storybook/addons/version/register.js

@@ -1,7 +1,7 @@
 import React from 'react'
 
 import { addons, types } from '@storybook/addons'
-import { version } from '../../../../../packages/core/package.json'
+import { version } from '../../../../packages/core/package.json'
 
 addons.register('my/toolbar', () => {
   addons.add('my-toolbar-addon/toolbar', {

apps/docs/.storybook/blocks/css-utils/CssBackgroundColors.tsx → docs/.storybook/blocks/css-utils/CssBackgroundColors.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { CssUtilitiesTable } from './helpers/CssPropertyTable'
-import json from '../../../../../packages/styles/docs/background.json'
+import json from '../../../../packages/styles/docs/background.json'
 
 export const CssBackgroundColors = () => (
   <CssUtilitiesTable

apps/docs/.storybook/blocks/css-utils/CssBorder.tsx → docs/.storybook/blocks/css-utils/CssBorder.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { CssUtilitiesTable } from './helpers/CssPropertyTable'
-import json from '../../../../../packages/styles/docs/border.json'
+import json from '../../../../packages/styles/docs/border.json'
 
 export const CssBorderColors = () => (
   <CssUtilitiesTable

apps/docs/.storybook/blocks/css-utils/CssElevation.tsx → docs/.storybook/blocks/css-utils/CssElevation.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import json from '../../../../../packages/styles/docs/elevation.json'
+import json from '../../../../packages/styles/docs/elevation.json'
 import { CssUtilitiesTable } from './helpers/CssPropertyTable'
 
 export const CssElevationOpacity = () => (

apps/docs/.storybook/blocks/css-utils/CssFlexbox.tsx → docs/.storybook/blocks/css-utils/CssFlexbox.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { CssUtilitiesTable } from './helpers/CssPropertyTable'
-import json from '../../../../../packages/styles/docs/flex.json'
+import json from '../../../../packages/styles/docs/flex.json'
 
 export const CssFlexboxAlignContent = () => <CssUtilitiesTable list={json} search="align-content" />
 export const CssFlexboxAlignItems = () => <CssUtilitiesTable list={json} search="align-items" />

apps/docs/.storybook/blocks/css-utils/CssInteractions.tsx → docs/.storybook/blocks/css-utils/CssInteractions.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { CssUtilitiesTable } from './helpers/CssPropertyTable'
-import json from '../../../../../packages/styles/docs/interaction.json'
+import json from '../../../../packages/styles/docs/interaction.json'
 
 export const CssInteractionsCursor = () => <CssUtilitiesTable list={json} search="cursor" />
 export const CssInteractionsUserSelect = () => <CssUtilitiesTable list={json} search="user-select" />

apps/docs/.storybook/blocks/css-utils/CssLayout.tsx → docs/.storybook/blocks/css-utils/CssLayout.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { CssTable } from './helpers/CssTable'
 import tokens from '@baloise/ds-tokens/dist/tokens.docs.json'
-import json from '../../../../../packages/styles/docs/layout.json'
+import json from '../../../../packages/styles/docs/layout.json'
 import { CssUtilitiesTable } from './helpers/CssPropertyTable'
 
 export const CssLayoutContainer = ({}) => {

apps/docs/.storybook/blocks/css-utils/CssSizing.tsx → docs/.storybook/blocks/css-utils/CssSizing.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import json from '../../../../../packages/styles/docs/sizing.json'
+import json from '../../../../packages/styles/docs/sizing.json'
 import { CssUtilitiesTable } from './helpers/CssPropertyTable'
 
 export const CssSizingHeight = () => <CssUtilitiesTable list={json} search="height" />

apps/docs/.storybook/blocks/css-utils/CssTypography.tsx → docs/.storybook/blocks/css-utils/CssTypography.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { CssUtilitiesTable } from './helpers/CssPropertyTable'
-import json from '../../../../../packages/styles/docs/typography.json'
+import json from '../../../../packages/styles/docs/typography.json'
 import tokens from '@baloise/ds-tokens/dist/tokens.docs.json'
 import { CssTable } from './helpers/CssTable'
 

apps/docs/project.json → docs/project.json

@@ -22,6 +22,12 @@
       ],
       "options": {
         "projectRoot": "{projectRoot}",
+        "fontsAssetPath": "packages/fonts/assets",
+        "iconsAssetPath": "packages/icons/src/assets",
+        "brandIconsAssetPath": "packages/brand-icons/src/assets",
+        "mapMarkersAssetPath": "packages/maps/src/assets",
+        "faviconsAssetPath": "packages/favicons/assets",
+        "figmaTokensAssetPath": "packages/tokens/dist/figma",
         "serve": true
       }
     },
@@ -35,7 +41,13 @@
         "{projectRoot}/dist"
       ],
       "options": {
-        "projectRoot": "{projectRoot}"
+        "projectRoot": "{projectRoot}",
+        "fontsAssetPath": "packages/fonts/assets",
+        "iconsAssetPath": "packages/icons/src/assets",
+        "brandIconsAssetPath": "packages/brand-icons/src/assets",
+        "mapMarkersAssetPath": "packages/maps/src/assets",
+        "faviconsAssetPath": "packages/favicons/assets",
+        "figmaTokensAssetPath": "packages/tokens/dist/figma"
       }
     }
   }

docs/stories/components/bal-accordion/api.md

@@ -0,0 +1,32 @@
+### bal-accordion
+
+#### Properties
+
+| Property     | Attribute     | Description                                                                                                                                                             | Type      | Default   |
+| ------------ | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | --------- |
+| `active`     | `active`      | If `true` the accordion is open.                                                                                                                                        | `boolean` | `false`   |
+| `card`       | `card`        | If `true` the accordion is used on the bottom of a card                                                                                                                 | `boolean` | `false`   |
+| `closeIcon`  | `close-icon`  | BalIcon of the close trigger button                                                                                                                                     | `string`  | `'close'` |
+| `closeLabel` | `close-label` | Label of the close trigger button                                                                                                                                       | `string`  | `''`      |
+| `debounce`   | `debounce`    | Set the amount of time, in milliseconds, to wait to trigger the `balChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`. | `number`  | `0`       |
+| `openIcon`   | `open-icon`   | BalIcon of the open trigger button                                                                                                                                      | `string`  | `'plus'`  |
+| `openLabel`  | `open-label`  | Label of the open trigger button                                                                                                                                        | `string`  | `''`      |
+
+
+#### Events
+
+| Event            | Description                                     | Type                   |
+| ---------------- | ----------------------------------------------- | ---------------------- |
+| `balChange`      | Emitted when the accordion has opened or closed | `CustomEvent<boolean>` |
+| `balDidAnimate`  | Emitted after the animation has finished        | `CustomEvent<boolean>` |
+| `balWillAnimate` | Emitted before the animation starts             | `CustomEvent<boolean>` |
+
+
+#### Methods
+
+| Method    | Description            | Type                            |
+| --------- | ---------------------- | ------------------------------- |
+| `dismiss` | Closes the accordion   | `dismiss() => Promise<boolean>` |
+| `present` | Opens the accordion    | `present() => Promise<boolean>` |
+| `toggle`  | Triggers the accordion | `toggle() => Promise<boolean>`  |
+

docs/stories/components/bal-accordion/bal-accordion-summary/api.md

@@ -0,0 +1,10 @@
+### bal-accordion-summary
+
+#### Properties
+
+| Property  | Attribute | Description                                                                | Type      | Default |
+| --------- | --------- | -------------------------------------------------------------------------- | --------- | ------- |
+| `trigger` | `trigger` | If `true` the whole summary component acts as a trigger and can be clicked | `boolean` | `false` |
+
+
+

docs/stories/components/bal-accordion/bal-accordion-trigger/api.md

@@ -0,0 +1,16 @@
+### bal-accordion-trigger
+
+#### Properties
+
+| Property     | Attribute     | Description                                             | Type                                                                                                                                                                                                                                                                     | Default        |
+| ------------ | ------------- | ------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------- |
+| `button`     | `button`      | Trigger will be a bal-button                            | `boolean`                                                                                                                                                                                                                                                                | `false`        |
+| `closeIcon`  | `close-icon`  | BalIcon of the close trigger button                     | `string`                                                                                                                                                                                                                                                                 | `''`           |
+| `closeLabel` | `close-label` | Label of the close trigger button                       | `string`                                                                                                                                                                                                                                                                 | `''`           |
+| `color`      | `color`       | The color to use from your application's color palette. | `"danger" `, ` "info" `, ` "info-light" `, ` "light" `, ` "link" `, ` "primary" `, ` "primary-light" `, ` "secondary" `, ` "success" `, ` "tertiary" `, ` "tertiary-green" `, ` "tertiary-purple" `, ` "tertiary-red" `, ` "tertiary-yellow" `, ` "text" `, ` "warning"` | `'info'`       |
+| `openIcon`   | `open-icon`   | BalIcon of the open trigger button                      | `string`                                                                                                                                                                                                                                                                 | `'caret-down'` |
+| `openLabel`  | `open-label`  | Label of the open trigger button                        | `string`                                                                                                                                                                                                                                                                 | `''`           |
+| `size`       | `size`        | Size of the button                                      | `"" `, ` "small"`                                                                                                                                                                                                                                                        | `''`           |
+
+
+