From 85b34c1a369a300866c363eaa9ef9d344640ed55 Mon Sep 17 00:00:00 2001 From: Ahmad Alahrashi Date: Mon, 3 Jul 2023 14:02:29 +0200 Subject: [PATCH 01/13] chore (refs T33323): add storybook documentation to DpTabs. --- src/components/DpTabs/DpTabs.stories.mdx | 63 ++++++++++++++++++++++++ 1 file changed, 63 insertions(+) create mode 100644 src/components/DpTabs/DpTabs.stories.mdx diff --git a/src/components/DpTabs/DpTabs.stories.mdx b/src/components/DpTabs/DpTabs.stories.mdx new file mode 100644 index 000000000..968a29617 --- /dev/null +++ b/src/components/DpTabs/DpTabs.stories.mdx @@ -0,0 +1,63 @@ +import { Meta } from '@storybook/addon-docs' +import DpTabs from './DpTabs' + + + +# DpTabs + +DpTabs is a wrapper for DpTab component through ``. + +DpTabs component is a simple user interface (tabs UI) for organizing related content and occupying a compact space. + +The DpTab components are aligned horizontally, and each tab is associated with its header. + +Components DpTabs and DpTab contain ``. + +## Default usage + +```html + // call a method + + + + + + + + + + + +``` + +## 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. +``` + From a85459ca34997b88eadbc396252fefcfaa75eb5c Mon Sep 17 00:00:00 2001 From: Ahmad Alahrashi Date: Mon, 3 Jul 2023 14:42:11 +0200 Subject: [PATCH 02/13] chore (refs T33323): add CHANGELOG --- CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6b57ba2af..821c0600e 100644 --- a/CHANGELOG.md +++ b/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 From 1ee9a6dff034dcf6045710157f49513b45bb9e41 Mon Sep 17 00:00:00 2001 From: ahmad-demos <59571234+ahmad-demos@users.noreply.github.com> Date: Mon, 3 Jul 2023 15:44:12 +0200 Subject: [PATCH 03/13] Update src/components/DpTabs/DpTabs.stories.mdx Co-authored-by: spiess-demos <40452344+spiess-demos@users.noreply.github.com> --- src/components/DpTabs/DpTabs.stories.mdx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/src/components/DpTabs/DpTabs.stories.mdx b/src/components/DpTabs/DpTabs.stories.mdx index 968a29617..d20c8345a 100644 --- a/src/components/DpTabs/DpTabs.stories.mdx +++ b/src/components/DpTabs/DpTabs.stories.mdx @@ -7,13 +7,11 @@ import DpTabs from './DpTabs' # DpTabs -DpTabs is a wrapper for DpTab component through ``. +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 component is a simple user interface (tabs UI) for organizing related content and occupying a compact space. +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 components are aligned horizontally, and each tab is associated with its header. - -Components DpTabs and DpTab contain ``. +The `DpTab` instances are then aligned horizontally, and each tab is associated with its header. ## Default usage From 980833f26f3f071bd80549fd648278f6b8efe59c Mon Sep 17 00:00:00 2001 From: ahmad-demos <59571234+ahmad-demos@users.noreply.github.com> Date: Mon, 3 Jul 2023 15:44:30 +0200 Subject: [PATCH 04/13] Update src/components/DpTabs/DpTabs.stories.mdx Co-authored-by: spiess-demos <40452344+spiess-demos@users.noreply.github.com> --- src/components/DpTabs/DpTabs.stories.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/DpTabs/DpTabs.stories.mdx b/src/components/DpTabs/DpTabs.stories.mdx index d20c8345a..98e187087 100644 --- a/src/components/DpTabs/DpTabs.stories.mdx +++ b/src/components/DpTabs/DpTabs.stories.mdx @@ -25,7 +25,7 @@ The `DpTab` instances are then aligned horizontally, and each tab is associated id="id" :label="Translator.trans('tab.name')"> - + Tab content 1. Date: Mon, 3 Jul 2023 15:44:37 +0200 Subject: [PATCH 05/13] Update src/components/DpTabs/DpTabs.stories.mdx Co-authored-by: spiess-demos <40452344+spiess-demos@users.noreply.github.com> --- src/components/DpTabs/DpTabs.stories.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/DpTabs/DpTabs.stories.mdx b/src/components/DpTabs/DpTabs.stories.mdx index 98e187087..347d4dfdb 100644 --- a/src/components/DpTabs/DpTabs.stories.mdx +++ b/src/components/DpTabs/DpTabs.stories.mdx @@ -23,7 +23,7 @@ The `DpTab` instances are then aligned horizontally, and each tab is associated @change="setActiveTabId"> // call a method + label="Tab Title 1"> Tab content 1. From 7d3592734faa013c017c924f281b04a8c7b4c66b Mon Sep 17 00:00:00 2001 From: ahmad-demos <59571234+ahmad-demos@users.noreply.github.com> Date: Mon, 3 Jul 2023 15:44:44 +0200 Subject: [PATCH 06/13] Update src/components/DpTabs/DpTabs.stories.mdx Co-authored-by: spiess-demos <40452344+spiess-demos@users.noreply.github.com> --- src/components/DpTabs/DpTabs.stories.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/DpTabs/DpTabs.stories.mdx b/src/components/DpTabs/DpTabs.stories.mdx index 347d4dfdb..3827a2704 100644 --- a/src/components/DpTabs/DpTabs.stories.mdx +++ b/src/components/DpTabs/DpTabs.stories.mdx @@ -22,7 +22,7 @@ The `DpTab` instances are then aligned horizontally, and each tab is associated use-url-fragment @change="setActiveTabId"> // call a method Tab content 1. From 310f9ab6bc6fa7abcf2dacdbc8d71a16d7e2e2fc Mon Sep 17 00:00:00 2001 From: ahmad-demos <59571234+ahmad-demos@users.noreply.github.com> Date: Mon, 3 Jul 2023 15:44:51 +0200 Subject: [PATCH 07/13] Update src/components/DpTabs/DpTabs.stories.mdx Co-authored-by: spiess-demos <40452344+spiess-demos@users.noreply.github.com> --- src/components/DpTabs/DpTabs.stories.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/DpTabs/DpTabs.stories.mdx b/src/components/DpTabs/DpTabs.stories.mdx index 3827a2704..282339fe9 100644 --- a/src/components/DpTabs/DpTabs.stories.mdx +++ b/src/components/DpTabs/DpTabs.stories.mdx @@ -29,7 +29,7 @@ The `DpTab` instances are then aligned horizontally, and each tab is associated From 7a5c6041ac0f139ace3f44d5748244e331eb8187 Mon Sep 17 00:00:00 2001 From: ahmad-demos <59571234+ahmad-demos@users.noreply.github.com> Date: Mon, 3 Jul 2023 15:45:01 +0200 Subject: [PATCH 08/13] Update src/components/DpTabs/DpTabs.stories.mdx Co-authored-by: spiess-demos <40452344+spiess-demos@users.noreply.github.com> --- src/components/DpTabs/DpTabs.stories.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/DpTabs/DpTabs.stories.mdx b/src/components/DpTabs/DpTabs.stories.mdx index 282339fe9..12f2fd388 100644 --- a/src/components/DpTabs/DpTabs.stories.mdx +++ b/src/components/DpTabs/DpTabs.stories.mdx @@ -30,7 +30,7 @@ The `DpTab` instances are then aligned horizontally, and each tab is associated + label="Tab Title 2"> From 1726e4588602c975b8c71c344fd96a569b6e0fc3 Mon Sep 17 00:00:00 2001 From: ahmad-demos <59571234+ahmad-demos@users.noreply.github.com> Date: Mon, 3 Jul 2023 15:45:07 +0200 Subject: [PATCH 09/13] Update src/components/DpTabs/DpTabs.stories.mdx Co-authored-by: spiess-demos <40452344+spiess-demos@users.noreply.github.com> --- src/components/DpTabs/DpTabs.stories.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/DpTabs/DpTabs.stories.mdx b/src/components/DpTabs/DpTabs.stories.mdx index 12f2fd388..f2253e92e 100644 --- a/src/components/DpTabs/DpTabs.stories.mdx +++ b/src/components/DpTabs/DpTabs.stories.mdx @@ -32,7 +32,7 @@ The `DpTab` instances are then aligned horizontally, and each tab is associated id="idTab2" label="Tab Title 2"> - + Tab content 2. From 579d5acd26d7468522a98a237c8a945dc6411efd Mon Sep 17 00:00:00 2001 From: Ahmad Alahrashi Date: Mon, 3 Jul 2023 15:47:25 +0200 Subject: [PATCH 10/13] chore (refs T33323): edit comment. --- src/components/DpTabs/DpTabs.stories.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/DpTabs/DpTabs.stories.mdx b/src/components/DpTabs/DpTabs.stories.mdx index f2253e92e..a82b524f6 100644 --- a/src/components/DpTabs/DpTabs.stories.mdx +++ b/src/components/DpTabs/DpTabs.stories.mdx @@ -20,7 +20,7 @@ The `DpTab` instances are then aligned horizontally, and each tab is associated tab-size="medium" :active-id="activeTabId" use-url-fragment - @change="setActiveTabId"> // call a method + @change="setActiveTabId"> From 6fb4106a84dfd946232988f814e12612cdefbdc5 Mon Sep 17 00:00:00 2001 From: Ahmad Alahrashi Date: Tue, 4 Jul 2023 10:48:04 +0200 Subject: [PATCH 11/13] chore (refs T33323): add CHANGELOG --- CHANGELOG.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 821c0600e..5beb9e587 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,12 +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)) docs: add documentation for DpTabs ([@@ahmad-demos](https://github.com/@ahmad-demos)) ### Added +- ([#344](https://github.com/demos-europe/demosplan-ui/pull/344)) docs: 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 From 59b2c5bed951c294cf74dc3000a75077ceaeb6ba Mon Sep 17 00:00:00 2001 From: Ahmad Alahrashi Date: Tue, 4 Jul 2023 10:53:56 +0200 Subject: [PATCH 12/13] chore (refs T33323): remove props. - props not showing up as expected, because Storybook docs integration is broken. --- src/components/DpTabs/DpTabs.stories.mdx | 22 ---------------------- 1 file changed, 22 deletions(-) diff --git a/src/components/DpTabs/DpTabs.stories.mdx b/src/components/DpTabs/DpTabs.stories.mdx index a82b524f6..62581e51c 100644 --- a/src/components/DpTabs/DpTabs.stories.mdx +++ b/src/components/DpTabs/DpTabs.stories.mdx @@ -37,25 +37,3 @@ The `DpTab` instances are then aligned horizontally, and each tab is associated ``` - -## 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. -``` - From 9b6c92e847f1448ed9c70283be4df3f4a541c520 Mon Sep 17 00:00:00 2001 From: ahmad-demos <59571234+ahmad-demos@users.noreply.github.com> Date: Tue, 4 Jul 2023 11:17:34 +0200 Subject: [PATCH 13/13] Update CHANGELOG.md Co-authored-by: spiess-demos <40452344+spiess-demos@users.noreply.github.com> --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5beb9e587..234001e6c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,7 +7,7 @@ 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)) +- ([#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