diff --git a/.changeset/crisp-socks-itch.md b/.changeset/crisp-socks-itch.md new file mode 100644 index 0000000000..26cd63d34d --- /dev/null +++ b/.changeset/crisp-socks-itch.md @@ -0,0 +1,5 @@ +--- +'@solid-design-system/docs': minor +--- + +Added realistic `sd-select` template with option and checkbox, updated the a11y test and added related template links diff --git a/packages/docs/src/stories/components/checkbox-group.mdx b/packages/docs/src/stories/components/checkbox-group.mdx index 822c27f826..036e5a10b5 100644 --- a/packages/docs/src/stories/components/checkbox-group.mdx +++ b/packages/docs/src/stories/components/checkbox-group.mdx @@ -29,6 +29,8 @@ Used to select multiple options from a list of options. [Checkbox Group with Tooltip](./?path=/docs/templates-tooltip--docs) +[Select with Option and Checkbox](./?path=/docs/templates-select--docs) + ### Common Use Cases - Allow users to select multiple options from a list in forms. diff --git a/packages/docs/src/stories/components/option.mdx b/packages/docs/src/stories/components/option.mdx index 9794a43f5e..683fb6dd88 100644 --- a/packages/docs/src/stories/components/option.mdx +++ b/packages/docs/src/stories/components/option.mdx @@ -29,6 +29,8 @@ Used to define selectable items within various form controls such as select. [Autocomplete](./?path=/docs/templates-autocomplete--docs) +[Select](./?path=/docs/templates-select--docs) + ### Common Use Cases - Provide options in selects or comboboxes. diff --git a/packages/docs/src/stories/templates/select.a11y.ts b/packages/docs/src/stories/templates/select.a11y.ts index 19835d314e..42f48dd302 100644 --- a/packages/docs/src/stories/templates/select.a11y.ts +++ b/packages/docs/src/stories/templates/select.a11y.ts @@ -13,3 +13,16 @@ test('Grouping Options', async ({ page }) => { - button "Country" `); }); + +test('Select with Option and Checkbox', async ({ page }) => { + await page.goto( + 'http://127.0.0.1:6998/iframe.html?globals=&args=&id=templates-select--select-with-option-and-checkbox&viewMode=story' + ); + await expect(page.locator('body')).toMatchAriaSnapshot(` + - region "Top right notifications" + - region "Bottom center notifications" + - text: Choose Fund Category + - combobox "Choose Fund Category" + - button "Choose Fund Category" + `); +}); diff --git a/packages/docs/src/stories/templates/select.stories.ts b/packages/docs/src/stories/templates/select.stories.ts index b844c7bfb8..e0526b349f 100644 --- a/packages/docs/src/stories/templates/select.stories.ts +++ b/packages/docs/src/stories/templates/select.stories.ts @@ -26,7 +26,7 @@ export const Default = {
Australia
Brisbane (Queensland) Sydney (Victoria) - +
Austria
Graz (Styria) Hartberg (Styria) @@ -37,9 +37,38 @@ export const Default = { Japan South Korea Turkey - +
Australia
Australia ` }; + +export const SelectWithOptionAndCheckbox = { + name: 'Select with Option and Checkbox', + render: () => html` +
+ +
Choose Fund Category
+ + Union Investment funds + Institutional retail funds + Bank-specific funds + Corporate client fund +
+
+ + ` +};