feat: added realistic radio-group template

.changeset/five-deer-join.md

@@ -0,0 +1,6 @@
+---
+'@solid-design-system/docs': minor
+---
+
+Created `sd-radio-group` templates with `help-text` and `invalid` state.
+

packages/docs/src/stories/components/radio-group.mdx

@@ -27,8 +27,11 @@ Used to group multiple input radio or radio buttons so they function as a single
 #### Related Templates
 
 [Radio Button Group](./?path=/docs/templates-radio-button-group--docs)
+
 [Radio Group with Tooltip](./?path=/docs/templates-tooltip--docs)
 
+[Radio Group](./?path=/docs/templates-radio-group--docs)
+
 ### Common Use Cases
 
 - Present options in forms where only one selection is allowed (e.g., gender selection, payment methods).

packages/docs/src/stories/templates/radio-group.a11y.ts

@@ -0,0 +1,31 @@
+import { test, expect } from '@playwright/test';
+
+test('Radio Group with Help text', async ({ page }) => {
+  await page.goto(
+    'http://127.0.0.1:6998/iframe.html?globals=&args=&id=templates-radio-group--radio-group-with-help-text&viewMode=story'
+  );
+  await expect(page.locator('body')).toMatchAriaSnapshot(`
+      - region "Top right notifications"
+      - region "Bottom center notifications"
+      - group "Greeting *":
+        - radio "Mr." [checked]
+        - radio "Ms."
+        - radio "Non-binary"
+    `);
+});
+
+test('Radio Group with Error text', async ({ page }) => {
+  await page.goto(
+    'http://127.0.0.1:6998/iframe.html?globals=&args=&id=templates-radio-group--radio-group-with-error-text&viewMode=story'
+  );
+  await expect(page.locator('body')).toMatchAriaSnapshot(`
+      - region "Top right notifications"
+      - region "Bottom center notifications"
+      - group "What is your role/function? *":
+        - radio "Advisor in service"
+        - radio "Customer advisor"
+        - radio "Securities specialist/Wealth advisor"
+        - radio "Online branch employee"
+        - radio "Other"
+    `);
+});

packages/docs/src/stories/templates/radio-group.stories.ts

@@ -0,0 +1,64 @@
+import '../../../../components/src/solid-components';
+import { html } from 'lit-html';
+
+export default {
+  tags: ['!dev', 'autodocs'],
+  title: 'Templates/Radio Group',
+  parameters: {
+    chromatic: { disableSnapshot: true },
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/YDktJcseQIIQbsuCpoKS4V/Component-Docs?node-id=2213-9389&t=5PpAC3TA3kYF7ufX-0'
+    }
+  }
+};
+
+export const radioGroupWithHelpText = {
+  name: 'Radio Group with Help text',
+  render: () => html`
+    <sd-radio-group
+      name="greeting"
+      value="mr"
+      label="Greeting"
+      orientation="horizontal"
+      help-text="Please select your preferred salutation."
+      required
+    >
+      <sd-radio value="mr">Mr.</sd-radio>
+      <sd-radio value="ms">Ms.</sd-radio>
+      <sd-radio value="non-binary">Non-binary</sd-radio>
+    </sd-radio-group>
+  `
+};
+
+export const radioGroupWithErrorText = {
+  name: 'Radio Group with Error text',
+  render: () => html`
+    <sd-radio-group
+      id="radio-group-error"
+      name="role"
+      label="What is your role/function?"
+      orientation="vertical"
+      required
+    >
+      <sd-radio value="advisor-in-service">Advisor in service</sd-radio>
+      <sd-radio value="customer-advisor">Customer advisor</sd-radio>
+      <sd-radio value="securities-specialist">Securities specialist/Wealth advisor</sd-radio>
+      <sd-radio value="online-branch-employee">Online branch employee</sd-radio>
+      <sd-radio value="other">Other</sd-radio>
+    </sd-radio-group>
+
+    <script type="module">
+      await customElements.whenDefined('sd-radio-group');
+
+      const radioGroup = document.querySelector('#radio-group-error');
+      radioGroup.setCustomValidity('Select an option to proceed.');
+      radioGroup.reportValidity();
+
+      radioGroup.addEventListener('sd-change', () => {
+        radioGroup.setCustomValidity('');
+        radioGroup.reportValidity();
+      });
+    </script>
+  `
+};