diff --git a/.changeset/five-deer-join.md b/.changeset/five-deer-join.md new file mode 100644 index 0000000000..4ee6f725b4 --- /dev/null +++ b/.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. + diff --git a/packages/docs/src/stories/components/radio-group.mdx b/packages/docs/src/stories/components/radio-group.mdx index 594054825d..abd4ce925b 100644 --- a/packages/docs/src/stories/components/radio-group.mdx +++ b/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). diff --git a/packages/docs/src/stories/templates/radio-group.a11y.ts b/packages/docs/src/stories/templates/radio-group.a11y.ts new file mode 100644 index 0000000000..8714182dac --- /dev/null +++ b/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" + `); +}); diff --git a/packages/docs/src/stories/templates/radio-group.stories.ts b/packages/docs/src/stories/templates/radio-group.stories.ts new file mode 100644 index 0000000000..f42b777952 --- /dev/null +++ b/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` + + Mr. + Ms. + Non-binary + + ` +}; + +export const radioGroupWithErrorText = { + name: 'Radio Group with Error text', + render: () => html` + + Advisor in service + Customer advisor + Securities specialist/Wealth advisor + Online branch employee + Other + + + + ` +};