feat: adding the usage beta files

packages/storybook-vue/.storybook/usage-addon/usage.js

@@ -25,6 +25,8 @@ import card_en from 'raw-loader!../../stories/3_components/card/card.md';
 import card_de from 'raw-loader!../../stories/3_components/card/card_de.md';
 import checkbox_en from 'raw-loader!../../stories/3_components/checkbox/checkbox.md';
 import checkbox_de from 'raw-loader!../../stories/3_components/checkbox/checkbox_de.md';
+import checkboxGroup_en from 'raw-loader!../../stories/3_components/checkbox-group/checkbox-group.md';
+import checkboxGroup_de from 'raw-loader!../../stories/3_components/checkbox-group/checkbox-group_de.md';
 import datagrid_en from 'raw-loader!../../stories/3_components/data-grid/data-grid.md';
 import datagrid_de from 'raw-loader!../../stories/3_components/data-grid/data-grid_de.md';
 import date_picker_en from 'raw-loader!../../stories/3_components/date-picker/date-picker.md';
@@ -109,6 +111,8 @@ const Usage = (props) => {
     card_de,
     checkbox_en,
     checkbox_de,
+    'checkbox-group_en': checkboxGroup_en,
+    'checkbox-group_de': checkboxGroup_de,
     divider_en,
     divider_de,
     badge_en,

packages/storybook-vue/stories/3_components/checkbox-group/checkbox-group.md

@@ -0,0 +1,14 @@
+<div style="display: inline-flex; align-items: center; justify-content: space-between; width: 100%;">
+    <h1>Checkbox-Group</h1>
+    <img src="assets/beta.png" alt="Beta Component" />
+</div>
+
+This component contains the Telekom Checkbox-Group. This is used to display the Telekom Checkboxes in a list.
+
+The topmost checkbox is based on the following checkboxes and can have three different states (empty, checked and indeterminate).
+
+The top checkbox can be used to set all the checkboxes below it to empty or checked. Disabled checkboxes are not affected by this
+
+## Beta components
+
+This component is still in the beta phase. When testing it, keep in mind that it may not have gone through all quality control measures, and it may not yet have WCAG accessibility certification. There may be changes to this component in the future.

packages/storybook-vue/stories/3_components/checkbox-group/checkbox-group_de.md

@@ -0,0 +1,14 @@
+<div style="display: inline-flex; align-items: center; justify-content: space-between; width: 100%;">
+    <h1>Checkbox-Group</h1>
+    <img src="assets/beta.png" alt="Beta Component" />
+</div>
+
+Diese Komponente enthält die Telekom Checkbox-Group. Diese dient dazu, die Telekom Checkboxen in einer Liste darzustellen.
+
+Die oberste Checkbox richtet sich nach den darunter liegenden Checkboxes und kann drei verschiedene Zustände haben (leer, markiert und unbestimmt).
+
+Mit der obersten Checkbox können alle darunter liegenden Checkboxen auf empty oder checked gesetzt werden. Deaktivierte Checkboxes sind hiervon nicht betroffen
+
+## Beta-Komponente
+
+Diese Komponente befindet sich noch im Beta-Stadium. Wenn du sie testest, bedenke, dass sie möglicherweise noch nicht alle Qualitätskontrollmaßnahmen durchlaufen hat und noch keine WCAG-Zertifizierung zur Barrierefreiheit vorliegt. In Zukunft kann es zu Änderungen an dieser Komponente kommen.