feat: added realistic template for select

.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

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.

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.

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"
+    `);
+});

packages/docs/src/stories/templates/select.stories.ts

@@ -26,7 +26,7 @@ export const Default = {
         <div class="text-black px-4 font-bold">Australia</div>
         <sd-option value="option-1">Brisbane (Queensland)</sd-option>
         <sd-option value="option-2">Sydney (Victoria)</sd-option>
-        <sd-divider class="mb-2"></sd-divider>
+        <sd-divider class="mb-4"></sd-divider>
         <div class="text-black px-4 font-bold">Austria</div>
         <sd-option value="option-3">Graz (Styria)</sd-option>
         <sd-option value="option-4">Hartberg (Styria)</sd-option>
@@ -37,9 +37,38 @@ export const Default = {
         <sd-option value="option-1">Japan</sd-option>
         <sd-option value="option-2">South Korea</sd-option>
         <sd-option value="option-3">Turkey</sd-option>
-        <sd-divider class="mb-2"></sd-divider>
+        <sd-divider class="mb-4"></sd-divider>
         <div class="text-black px-4 font-bold">Australia</div>
         <sd-option value="option-4">Australia</sd-option>
       </sd-select>
     </div>`
 };
+
+export const SelectWithOptionAndCheckbox = {
+  name: 'Select with Option and Checkbox',
+  render: () => html`
+    <div class="w-[400px] h-[500px]">
+      <sd-select
+        id="select-with-checkbox"
+        size="lg"
+        placement="bottom"
+        multiple
+        placeholder="Fund selection"
+        value="option-1 option-3"
+      >
+        <div slot="label" class="font-bold">Choose Fund Category</div>
+
+        <sd-option value="option-1">Union Investment funds</sd-option>
+        <sd-option value="option-2">Institutional retail funds</sd-option>
+        <sd-option value="option-3">Bank-specific funds </sd-option>
+        <sd-option value="option-4">Corporate client fund</sd-option>
+      </sd-select>
+    </div>
+    <script type="module">
+      const selectElement = document.querySelector('#select-with-checkbox');
+      selectElement.localize.setCustomLocalization({
+        numOptionsSelected: num => (num === 0 ? '' : 'Fund selection (' + num + ')')
+      });
+    </script>
+  `
+};