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

CHANGELOG.md

@@ -6,6 +6,10 @@ Since v0.0.10, this Changelog is formatted according to the [Common Changelog][c
 
 ### Added
 
+- ([#344](https://github.com/demos-europe/demosplan-ui/pull/344)) docs: add documentation for DpTabs ([@@ahmad-demos](https://github.com/@ahmad-demos))
+
+### Added
+
 - ([#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,61 @@
+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>
+```
+
+## DpTabs Props:
+
+```
+- activeId: is a String type, belongs to data.
+
+- tabSize: `medium` or `large`, default is `large`
+
+- useUrlFragment: Active tab state may be persisted via an Url fragment.
+                  Also, ab clicks are pushed to the browser history to enable state change when browser navigation is used.
+```
+
+## DpTab Props:
+
+```
+- id: Tab ID.
+
+- label: The label is passed to the DpTab child component, but then it is used in the parent component DpTabs.
+
+- suffix: A html string may be passed here which is appended to the tab label.
+```
+