From d643156bdf6f8753e614db6bb24975dfaa17ea7a Mon Sep 17 00:00:00 2001 From: "Mojsoski, Blagoja (UIS)" Date: Tue, 7 Apr 2026 13:35:43 +0200 Subject: [PATCH 01/10] feat: Added realistic template for sd-tag --- .changeset/flat-buses-sip.md | 5 + .../docs/src/stories/templates/tag.stories.ts | 191 ++++++++++++------ 2 files changed, 129 insertions(+), 67 deletions(-) create mode 100644 .changeset/flat-buses-sip.md diff --git a/.changeset/flat-buses-sip.md b/.changeset/flat-buses-sip.md new file mode 100644 index 0000000000..2e34d311ce --- /dev/null +++ b/.changeset/flat-buses-sip.md @@ -0,0 +1,5 @@ +--- +'@solid-design-system/docs': minor +--- + +Added realistic `sd-tag` template diff --git a/packages/docs/src/stories/templates/tag.stories.ts b/packages/docs/src/stories/templates/tag.stories.ts index ce4d5e3bb3..94b782b32c 100644 --- a/packages/docs/src/stories/templates/tag.stories.ts +++ b/packages/docs/src/stories/templates/tag.stories.ts @@ -15,91 +15,136 @@ export default { export const filterTagGroup = { render: () => html` - All - Extended Reality - Internet of things +
+

26 Results

+
+ All (26) + Funds (16) + Sustainability (5) + Retirement planing (2) + Documents (3) +
+
` }; export const filterTagGroupMorningstarRating = { name: 'Filter Tag Group with Morningstar Rating', render: () => html` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
+

+ Find Top-Rated Investments with Morningstar Ratings: +

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
` }; export const filterTagGroupRisk = { name: 'Filter Tag Group with Risk', - render: () => - html` -
- Very High Risk - - -
- High Risk - - -
- Increased Risk - - -
- Moderated Risk - - -
- Low Risk - ` + render: () => html` +
+

Risk level:

+
+ +
+ Very High Risk + + + +
+ High Risk + + + +
+ Increased Risk + + + +
+ Moderated Risk + + + +
+ Low Risk + +
+
+ ` }; export const removableFilterTagGroup = { render: () => html` -
- Filter 1 - Filter 2 - Filter 3 - Filter 4 +
+

Active filters:

+ +
+ Stocks + Bonds + Mutual funds + ETFs + + + + Remove filters + +
+ ` }; @@ -115,9 +166,15 @@ export const removableFilterTagGroup = { export const tagGroupLinks = { name: 'Tag Group with Links', render: () => html` - Topic 1 - Topic 2 - Topic 3 +
+

Additional topics:

+
+ Commercial real estate + Savings plan rate + Open-ended real estate funds + Retirement planning +
+
` }; From 8753f1ef195cc06ca1b95a8c39f408b752fda251 Mon Sep 17 00:00:00 2001 From: "Mojsoski, Blagoja (UIS)" Date: Wed, 8 Apr 2026 09:20:28 +0200 Subject: [PATCH 02/10] chore: removed the risk in the Filter Tag Group with Risk section, fixed the wrong underline start and added margin between tags and link and fixed horizontal size --- .../docs/src/stories/templates/tag.stories.ts | 25 +++++++++---------- 1 file changed, 12 insertions(+), 13 deletions(-) diff --git a/packages/docs/src/stories/templates/tag.stories.ts b/packages/docs/src/stories/templates/tag.stories.ts index 94b782b32c..2bb2d3ad6e 100644 --- a/packages/docs/src/stories/templates/tag.stories.ts +++ b/packages/docs/src/stories/templates/tag.stories.ts @@ -82,12 +82,12 @@ export const filterTagGroupRisk = { class="h-4 w-4 border-primary-800 border-[1px]" style="background-color: var(--fill-risk-veryhigh);" >
- Very High Risk + Very High
- High Risk + High @@ -95,7 +95,7 @@ export const filterTagGroupRisk = { class="h-4 w-4 border-primary-800 border-[1px]" style="background-color: var(--fill-risk-increased);" > - Increased Risk + Increased @@ -103,12 +103,12 @@ export const filterTagGroupRisk = { class="h-4 w-4 border-primary-800 border-[1px]" style="background-color: var(--fill-risk-moderate);" > - Moderated Risk + Moderate
- Low Risk + Low @@ -120,13 +120,12 @@ export const removableFilterTagGroup = {

Active filters:

-
+
Stocks Bonds Mutual funds ETFs - - + Remove filters @@ -168,11 +167,11 @@ export const tagGroupLinks = { render: () => html`

Additional topics:

-
- Commercial real estate - Savings plan rate - Open-ended real estate funds - Retirement planning +
+ Commercial real estate + Savings plan rate + Open-ended real estate funds + Retirement planning
` From 9cfc6f6b60f7b670b28461e71e41be1abe50ced8 Mon Sep 17 00:00:00 2001 From: "Mojsoski, Blagoja (UIS)" Date: Mon, 13 Apr 2026 17:17:12 +0200 Subject: [PATCH 03/10] chore: added the links in the tags with links, fixed the background color and fixed the chanhing site on remove click --- .../docs/src/stories/templates/tag.stories.ts | 54 ++++++++++++------- 1 file changed, 35 insertions(+), 19 deletions(-) diff --git a/packages/docs/src/stories/templates/tag.stories.ts b/packages/docs/src/stories/templates/tag.stories.ts index 2bb2d3ad6e..3b689d596b 100644 --- a/packages/docs/src/stories/templates/tag.stories.ts +++ b/packages/docs/src/stories/templates/tag.stories.ts @@ -78,36 +78,27 @@ export const filterTagGroupRisk = {

Risk level:

-
+
Very High -
+
High -
+
Increased -
+
Moderate -
+
Low
@@ -125,7 +116,12 @@ export const removableFilterTagGroup = { Bonds Mutual funds ETFs - + Remove filters @@ -168,10 +164,30 @@ export const tagGroupLinks = {

Additional topics:

- Commercial real estate - Savings plan rate - Open-ended real estate funds - Retirement planning + Commercial real estate + Savings plan rate + Open-ended real estate funds + Retirement planning
` From df0fc2918d48f7ccd97cec5d6e68373a74630b57 Mon Sep 17 00:00:00 2001 From: "Mojsoski, Blagoja (UIS)" Date: Tue, 14 Apr 2026 10:05:04 +0200 Subject: [PATCH 04/10] chore: made the stories interactive --- .../docs/src/stories/templates/tag.stories.ts | 45 ++++++++++++++++--- 1 file changed, 40 insertions(+), 5 deletions(-) diff --git a/packages/docs/src/stories/templates/tag.stories.ts b/packages/docs/src/stories/templates/tag.stories.ts index 3b689d596b..bf31e826f1 100644 --- a/packages/docs/src/stories/templates/tag.stories.ts +++ b/packages/docs/src/stories/templates/tag.stories.ts @@ -12,19 +12,30 @@ export default { } } }; - export const filterTagGroup = { render: () => html`

26 Results

-
- All (26) +
+ All (26) Funds (16) Sustainability (5) Retirement planing (2) Documents (3)
+ + ` }; @@ -35,7 +46,7 @@ export const filterTagGroupMorningstarRating = {

Find Top-Rated Investments with Morningstar Ratings:

-
+
@@ -68,6 +79,18 @@ export const filterTagGroupMorningstarRating = {
+ + ` }; @@ -76,7 +99,7 @@ export const filterTagGroupRisk = { render: () => html`

Risk level:

-
+
Very High @@ -103,6 +126,18 @@ export const filterTagGroupRisk = {
+ + ` }; From b5b07dc595b92a9dd3fe399113b5c7509ed8d235 Mon Sep 17 00:00:00 2001 From: "Mojsoski, Blagoja (UIS)" Date: Tue, 21 Apr 2026 11:55:40 +0200 Subject: [PATCH 05/10] chore: use single event listener and add radiogroup to tag template and use ids --- .../docs/src/stories/templates/tag.a11y.ts | 3 ++ .../docs/src/stories/templates/tag.stories.ts | 54 +++++++++---------- 2 files changed, 30 insertions(+), 27 deletions(-) diff --git a/packages/docs/src/stories/templates/tag.a11y.ts b/packages/docs/src/stories/templates/tag.a11y.ts index da868f832b..a8301f7243 100644 --- a/packages/docs/src/stories/templates/tag.a11y.ts +++ b/packages/docs/src/stories/templates/tag.a11y.ts @@ -5,6 +5,7 @@ test('Filter Tag Group', async ({ page }) => { await expect(page.locator('body')).toMatchAriaSnapshot(` - region "Top right notifications" - region "Bottom center notifications" + - radiogroup "Filter results": - button "All" [pressed] - button "Extended Reality" - button "Internet of things" @@ -18,6 +19,7 @@ test('Filter Tag Group with Morningstar Rating', async ({ page }) => { await expect(page.locator('body')).toMatchAriaSnapshot(` - region "Top right notifications" - region "Bottom center notifications" + - radiogroup "Filter by morningstar rating": - button "5 stars" [pressed] - button "4 stars" - button "3 stars" @@ -33,6 +35,7 @@ test('Filter Tag Group with Risk', async ({ page }) => { await expect(page.locator('body')).toMatchAriaSnapshot(` - region "Top right notifications" - region "Bottom center notifications" + - radiogroup "Filter by risk level": - button "Very High Risk" [pressed] - button "High Risk" - button "Increased Risk" diff --git a/packages/docs/src/stories/templates/tag.stories.ts b/packages/docs/src/stories/templates/tag.stories.ts index bf31e826f1..3d16d86dd0 100644 --- a/packages/docs/src/stories/templates/tag.stories.ts +++ b/packages/docs/src/stories/templates/tag.stories.ts @@ -16,7 +16,7 @@ export const filterTagGroup = { render: () => html`

26 Results

-
+
All (26) Funds (16) Sustainability (5) @@ -26,14 +26,14 @@ export const filterTagGroup = {
` @@ -46,7 +46,7 @@ export const filterTagGroupMorningstarRating = {

Find Top-Rated Investments with Morningstar Ratings:

-
+
@@ -81,14 +81,14 @@ export const filterTagGroupMorningstarRating = {
` @@ -99,7 +99,7 @@ export const filterTagGroupRisk = { render: () => html`

Risk level:

-
+
Very High @@ -128,14 +128,14 @@ export const filterTagGroupRisk = {
` From 4199a76c458b958a5076615ecae154f01112de39 Mon Sep 17 00:00:00 2001 From: "Mojsoski, Blagoja (UIS)" Date: Tue, 21 Apr 2026 12:50:23 +0200 Subject: [PATCH 06/10] chore: changed the role to group --- packages/docs/src/stories/templates/tag.a11y.ts | 5 +---- .../docs/src/stories/templates/tag.stories.ts | 16 ++++++++-------- 2 files changed, 9 insertions(+), 12 deletions(-) diff --git a/packages/docs/src/stories/templates/tag.a11y.ts b/packages/docs/src/stories/templates/tag.a11y.ts index a8301f7243..1a2e46dd91 100644 --- a/packages/docs/src/stories/templates/tag.a11y.ts +++ b/packages/docs/src/stories/templates/tag.a11y.ts @@ -4,8 +4,6 @@ test('Filter Tag Group', async ({ page }) => { await page.goto('http://127.0.0.1:6998/iframe.html?globals=&args=&id=templates-tag--filter-tag-group&viewMode=story'); await expect(page.locator('body')).toMatchAriaSnapshot(` - region "Top right notifications" - - region "Bottom center notifications" - - radiogroup "Filter results": - button "All" [pressed] - button "Extended Reality" - button "Internet of things" @@ -19,7 +17,7 @@ test('Filter Tag Group with Morningstar Rating', async ({ page }) => { await expect(page.locator('body')).toMatchAriaSnapshot(` - region "Top right notifications" - region "Bottom center notifications" - - radiogroup "Filter by morningstar rating": + - group "Filter by Morning star rating": - button "5 stars" [pressed] - button "4 stars" - button "3 stars" @@ -35,7 +33,6 @@ test('Filter Tag Group with Risk', async ({ page }) => { await expect(page.locator('body')).toMatchAriaSnapshot(` - region "Top right notifications" - region "Bottom center notifications" - - radiogroup "Filter by risk level": - button "Very High Risk" [pressed] - button "High Risk" - button "Increased Risk" diff --git a/packages/docs/src/stories/templates/tag.stories.ts b/packages/docs/src/stories/templates/tag.stories.ts index 3d16d86dd0..ae48a30e3c 100644 --- a/packages/docs/src/stories/templates/tag.stories.ts +++ b/packages/docs/src/stories/templates/tag.stories.ts @@ -16,7 +16,7 @@ export const filterTagGroup = { render: () => html`

26 Results

-
+
All (26) Funds (16) Sustainability (5) @@ -46,8 +46,8 @@ export const filterTagGroupMorningstarRating = {

Find Top-Rated Investments with Morningstar Ratings:

-
- +
+ @@ -55,25 +55,25 @@ export const filterTagGroupMorningstarRating = { - + - + - + - + @@ -99,7 +99,7 @@ export const filterTagGroupRisk = { render: () => html`

Risk level:

-
+
Very High From a7a45591f0824a821140b154d9d3112a7a3f7876 Mon Sep 17 00:00:00 2001 From: "Mojsoski, Blagoja (UIS)" Date: Fri, 24 Apr 2026 09:28:20 +0200 Subject: [PATCH 07/10] chore: addressing the comments --- .../docs/src/stories/templates/tag.a11y.ts | 82 ++++++++-------- .../docs/src/stories/templates/tag.stories.ts | 93 ++++++++++--------- 2 files changed, 92 insertions(+), 83 deletions(-) diff --git a/packages/docs/src/stories/templates/tag.a11y.ts b/packages/docs/src/stories/templates/tag.a11y.ts index 1a2e46dd91..f43ed07c36 100644 --- a/packages/docs/src/stories/templates/tag.a11y.ts +++ b/packages/docs/src/stories/templates/tag.a11y.ts @@ -4,9 +4,12 @@ test('Filter Tag Group', async ({ page }) => { await page.goto('http://127.0.0.1:6998/iframe.html?globals=&args=&id=templates-tag--filter-tag-group&viewMode=story'); await expect(page.locator('body')).toMatchAriaSnapshot(` - region "Top right notifications" - - button "All" [pressed] - - button "Extended Reality" - - button "Internet of things" + - region "Bottom center notifications" + - button "All (26)" [pressed] + - button "Funds (16)" + - button "Sustainability (5)" + - button "Retirement planing (2)" + - button "Documents (3)" `); }); @@ -15,15 +18,16 @@ test('Filter Tag Group with Morningstar Rating', async ({ page }) => { 'http://127.0.0.1:6998/iframe.html?globals=&args=&id=templates-tag--filter-tag-group-morningstar-rating&viewMode=story' ); await expect(page.locator('body')).toMatchAriaSnapshot(` - - region "Top right notifications" - - region "Bottom center notifications" - - group "Filter by Morning star rating": + - region "Top right notifications" + - region "Bottom center notifications" + - paragraph: "Find Top-Rated Investments with Morningstar Ratings:" + - group "Filter by morningstar rating": - button "5 stars" [pressed] - button "4 stars" - button "3 stars" - button "2 stars" - button "1 star" - `); + `); }); test('Filter Tag Group with Risk', async ({ page }) => { @@ -33,11 +37,11 @@ test('Filter Tag Group with Risk', async ({ page }) => { await expect(page.locator('body')).toMatchAriaSnapshot(` - region "Top right notifications" - region "Bottom center notifications" - - button "Very High Risk" [pressed] - - button "High Risk" - - button "Increased Risk" - - button "Moderated Risk" - - button "Low Risk" + - button "Very High" [pressed] + - button "High" + - button "Increased" + - button "Moderate" + - button "Low" `); }); @@ -46,25 +50,27 @@ test('Removable Filter Tag Group', async ({ page }) => { 'http://127.0.0.1:6998/iframe.html?globals=&args=&id=templates-tag--removable-filter-tag-group&viewMode=story' ); await expect(page.locator('body')).toMatchAriaSnapshot(` - - region "Top right notifications" - - region "Bottom center notifications" - - text: Filter 1 - - button "Remove": - - img "Remove": - - img - - text: Filter 2 - - button "Remove": - - img "Remove": - - img - - text: Filter 3 - - button "Remove": - - img "Remove": - - img - - text: Filter 4 - - button "Remove": - - img "Remove": - - img - `); + - region "Top right notifications" + - region "Bottom center notifications" + - paragraph: "Active filters:" + - text: Stocks + - button "Remove": + - img "Remove": + - img + - text: Bonds + - button "Remove": + - img "Remove": + - img + - text: Mutual funds + - button "Remove": + - img "Remove": + - img + - text: ETFs + - button "Remove": + - img "Remove": + - img + - button "Remove filters" + `); }); test('Tag Group with Links', async ({ page }) => { @@ -72,12 +78,14 @@ test('Tag Group with Links', async ({ page }) => { await expect(page.locator('body')).toMatchAriaSnapshot(` - region "Top right notifications" - region "Bottom center notifications" - - link "Topic 1": - - /url: "#" - - link "Topic 2": - - /url: "#" - - link "Topic 3": - - /url: "#" + - link "Commercial real estate": + - /url: https://solid-design-system.fe.union-investment.de/docs/ + - link "Savings plan rate": + - /url: https://solid-design-system.fe.union-investment.de/docs/ + - link "Open-ended real estate funds": + - /url: https://solid-design-system.fe.union-investment.de/docs/ + - link "Retirement planning": + - /url: https://solid-design-system.fe.union-investment.de/docs/ `); }); diff --git a/packages/docs/src/stories/templates/tag.stories.ts b/packages/docs/src/stories/templates/tag.stories.ts index ae48a30e3c..d6420a9fa2 100644 --- a/packages/docs/src/stories/templates/tag.stories.ts +++ b/packages/docs/src/stories/templates/tag.stories.ts @@ -16,7 +16,13 @@ export const filterTagGroup = { render: () => html`

26 Results

-
+
Only one option can be selected at a time
+
All (26) Funds (16) Sustainability (5) @@ -27,14 +33,11 @@ export const filterTagGroup = { ` }; @@ -46,35 +49,40 @@ export const filterTagGroupMorningstarRating = {

Find Top-Rated Investments with Morningstar Ratings:

-
- - +
+ + 5 stars - - + + 4 stars - - + + 3 stars - - + + 2 stars - - + + 1 star
@@ -82,14 +90,11 @@ export const filterTagGroupMorningstarRating = { ` }; @@ -99,29 +104,34 @@ export const filterTagGroupRisk = { render: () => html`

Risk level:

-
+
-
+
Very High -
+
High -
+
Increased -
+
Moderate -
+
Low
@@ -129,14 +139,11 @@ export const filterTagGroupRisk = { ` }; @@ -151,21 +158,16 @@ export const removableFilterTagGroup = { Bonds Mutual funds ETFs - + Remove filters - +