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.a11y.ts b/packages/docs/src/stories/templates/tag.a11y.ts index da868f832b..f43ed07c36 100644 --- a/packages/docs/src/stories/templates/tag.a11y.ts +++ b/packages/docs/src/stories/templates/tag.a11y.ts @@ -5,9 +5,11 @@ test('Filter Tag Group', async ({ page }) => { await expect(page.locator('body')).toMatchAriaSnapshot(` - region "Top right notifications" - region "Bottom center notifications" - - button "All" [pressed] - - button "Extended Reality" - - button "Internet of things" + - button "All (26)" [pressed] + - button "Funds (16)" + - button "Sustainability (5)" + - button "Retirement planing (2)" + - button "Documents (3)" `); }); @@ -16,14 +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" + - 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 ce4d5e3bb3..47fb0b1b4a 100644 --- a/packages/docs/src/stories/templates/tag.stories.ts +++ b/packages/docs/src/stories/templates/tag.stories.ts @@ -12,94 +12,170 @@ 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: +

+
+ + 5 stars + + + + + + + + 4 stars + + + + + + + 3 stars + + + + + + 2 stars + + + + + 1 star + + +
+
+ + ` }; 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 + + + +
+ High + + + +
+ Increased + + + +
+ Moderate + + + +
+ Low + +
+
+ + + ` }; export const removableFilterTagGroup = { render: () => html` -
- Filter 1 - Filter 2 - Filter 3 - Filter 4 +
+

Active filters:

+ +
+ Stocks + Bonds + Mutual funds + ETFs + + + Remove filters + +
+ ` }; @@ -115,9 +196,35 @@ 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 +
+
` };