chore (refs T33323): add storybook documentation to DpTabs.

CHANGELOG.md

@@ -4,8 +4,10 @@ Since v0.0.10, this Changelog is formatted according to the [Common Changelog][c
 
 ## UNRELEASED
 
+
 ### Added
 
+- ([#344](https://github.com/demos-europe/demosplan-ui/pull/344)) Add documentation for DpTabs ([@ahmad-demos](https://github.com/@ahmad-demos))
 - ([#333](https://github.com/demos-europe/demosplan-ui/pull/333)) Add "rounded" prop to DpButton, add "arrow-up" and "arrow-down" icons to DpIcon ([@spiess-demos](https://github.com/spiess-demos))
 
 ## v0.1.7 - 2023-06-27

src/components/DpTabs/DpTabs.stories.mdx

@@ -0,0 +1,39 @@
+import { Meta } from '@storybook/addon-docs'
+import DpTabs from './DpTabs'
+
+<Meta
+  title="Components/Tabs"
+  component={DpTabs} />
+
+# DpTabs
+
+The DpTabs component provides a structured and interactive way to organize and navigate related content, allowing users to switch between different views while keeping context.
+
+DpTabs and DpTab both provide a default slot. For each tab, a `DpTab` instance is placed inside the default slot of `DpTabs`, while the content of each tab is placed inside the default slot of the respective `DpTab` instance.
+
+The `DpTab` instances are then aligned horizontally, and each tab is associated with its header.
+
+## Default usage
+
+```html
+<dp-tabs
+    tab-size="medium"
+    :active-id="activeTabId"
+    use-url-fragment
+    @change="setActiveTabId"> <!-- call a method -->
+    <dp-tab
+      id="idTab1"
+      label="Tab Title 1">
+      <slot>
+        Tab content 1.
+      </slot>
+    </dp-tab>
+    <dp-tab
+      id="idTab2"
+      label="Tab Title 2">
+      <slot>
+        Tab content 2.
+      </slot>
+    </dp-tab>
+  </dp-tabs>
+```