chore(docs): Radio Group & Radio docs update (VIV-2123)

apps/docs/content/_data/components.json

@@ -241,15 +241,13 @@
 	},
 	{
 		"title": "Radio Group",
-		"page": "legacy",
-		"markdown": "./libs/components/src/lib/radio-group/README.md",
-		"children": ["Radio"]
-	},
-	{
-		"title": "Radio",
-		"page": "legacy",
-		"markdown": "./libs/components/src/lib/radio/README.md",
-		"parent": "Radio Group"
+		"description": "A radio group is a collection of Radio buttons where only one choice can be selected.",
+		"variations": "./libs/components/src/lib/radio-group/VARIATIONS.md",
+		"guidelines": "./libs/components/src/lib/radio-group/GUIDELINES.md",
+		"hideGuidelines": "true",
+		"code": "./libs/components/src/lib/radio-group/README.md",
+		"accessibility": "./libs/components/src/lib/radio-group/ACCESSIBILITY.md",
+		"useCases": "./libs/components/src/lib/radio-group/USE-CASES.md"
 	},
 	{
 		"title": "Option",

libs/components/src/lib/radio-group/ACCESSIBILITY.md

@@ -0,0 +1,3 @@
+## Implementation
+
+If a `label` can not be used, always provide an `aria-label` as an alternative. This will allow screen reader users to know the purpose of the Radio Group and the Radio button.

libs/components/src/lib/radio-group/GUIDELINES.md

@@ -0,0 +1,58 @@
+## Usage
+
+<docs-do-dont>
+<docs-do slot="description" headline="Use Checkboxes to select multiple options">
+
+```html preview example
+<div class="options">
+	<h5>Email Preferences</h5>
+	<vwc-checkbox label="Billing issues"></vwc-checkbox>
+	<vwc-checkbox label="Product updates"></vwc-checkbox>
+	<vwc-checkbox label="Price changes"></vwc-checkbox>
+</div>
+
+<style>
+	.options {
+		display: flex;
+		flex-direction: column;
+		gap: 12px;
+	}
+</style>
+```
+
+</docs-do>
+<docs-do headline="Use checkboxes for a single item">
+
+```html preview example
+<vwc-checkbox label="I agree to the terms and conditions"></vwc-checkbox>
+```
+
+</docs-do>
+</docs-do-dont>
+
+## Labelling
+
+### Label
+
+<docs-do-dont>
+<docs-do slot="description" headline="Use the label attribute whenever possible">
+
+```html preview example
+<vwc-checkbox label="Use signed Webhooks"></vwc-checkbox>
+```
+
+</docs-do>
+<docs-do dont headline="Avoid Checkboxes without visible label">
+
+```html preview example
+<vwc-checkbox aria-label="Use signed Webhooks"></vwc-checkbox>
+```
+
+</docs-do>
+</docs-do-dont>
+
+## Related Components
+
+- [Switch](/components/switch/)
+- [Searchable Select](/components/searchable-select/)
+- [Radio](/components/radio/)

libs/components/src/lib/radio-group/README.md

@@ -1,104 +1,112 @@
-# Radio-group
+## Usage
 
-Represents a radio-group custom element.
-
-The radio-group should be used to group related `radio` elements in a form.
-Use the `name` attribute to give a name to your value.
+<vwc-tabs>
+<vwc-tab label="Web component"></vwc-tab>
+<vwc-tab-panel>
 
 ```js
-<script type="module">import '@vonage/vivid/radio-group';</script>
+import '@vonage/vivid/radio';
+import '@vonage/vivid/radio-group';
 ```
 
-## Members
-
-### Label
+or, if you need to use a unique prefix:
 
-Use the `label` member to set the group's label.
+```js
+import { registerRadio, registerRadioGroup } from '@vonage/vivid';
 
-- Type: `string`
-- Default: `undefined`
+registerRadio('your-prefix');
+registerRadioGroup('your-prefix');
+```
 
 ```html preview
-<vwc-radio-group label="Pick a number" name="number">
-	<vwc-radio label="1" value="1"></vwc-radio>
-	<vwc-radio label="2" value="2"></vwc-radio>
-	<vwc-radio label="3" value="3"></vwc-radio>
-</vwc-radio-group>
+<script type="module">
+	import { registerRadio, registerRadioGroup } from '@vonage/vivid';
+	registerRadio('your-prefix');
+	registerRadioGroup('your-prefix');
+</script>
+
+<your-prefix-radio-group>
+	<your-prefix-radio label="1" value="1"></your-prefix-radio>
+	<your-prefix-radio label="2" value="2"></your-prefix-radio>
+	<your-prefix-radio label="3" value="3"></your-prefix-radio>
+</your-prefix-radio-group>
+```
+
+</vwc-tab-panel>
+<vwc-tab label="Vue"></vwc-tab>
+<vwc-tab-panel>
+
+```html
+<script setup lang="ts">
+	import { VRadio, VRadioGroup } from '@vonage/vivid-vue';
+</script>
+<template>
+	<VRadioGroup>
+		<VRadio label="1" value="1"></VRadio>
+	</VRadioGroup>
+</template>
 ```
 
-### Disabled
+</vwc-tab-panel>
+</vwc-tabs>
 
-Toggle the `disabled` member to disable/enable all radio buttons in the radio-group.
+### Value
 
-- Type: `boolean`
-- Default: `false`
+Use the `value` attribute to set the radio's value.
 
 ```html preview
-<vwc-radio-group label="Pick a number" name="number" disabled>
-	<vwc-radio label="1" value="1" checked></vwc-radio>
-	<vwc-radio label="2" value="2"></vwc-radio>
-	<vwc-radio label="3" value="3"></vwc-radio>
-</vwc-radio-group>
+<vwc-radio value="my-value" label="one"></vwc-radio>
 ```
 
-### Readonly
+## API Reference
 
-Set the `readonly` member to specify that the radio-group is read-only.
-A read-only radio-group cannot be modified but can be focused and tabbed into.
+### Radio Group
 
-- Type: `boolean`
-- Default: `false`
+#### Properties
 
-```html preview
-<vwc-radio-group label="Pick a number" name="number" readonly>
-	<vwc-radio label="1" value="1" checked></vwc-radio>
-	<vwc-radio label="2" value="2"></vwc-radio>
-	<vwc-radio label="3" value="3"></vwc-radio>
-</vwc-radio-group>
-```
+<div class="table-wrapper">
 
-### Orientation
+| Name            | Type                               | Description                             |
+| --------------- | ---------------------------------- | --------------------------------------- |
+| **disabled**    | `boolean`                          | Whether the input element is disabled   |
+| **label**       | `string`                           | Label of the the Radio Group            |
+| **orientation** | `horizontal` (default), `vertical` | Sets axis on which the tabs are aligned |
+| **readonly**    | `boolean`                          | The value is not editable               |
 
-Set the `orientation` member to set the orientation (`horizontal` or `vertical`) of the radio-group.
+</div>
 
-- Type: `horizontal` | `vertical`
-- Default: `horizontal`
+#### Events
 
-```html preview
-<vwc-radio-group label="Pick a number" name="number" orientation="vertical">
-	<vwc-radio label="1" value="1"></vwc-radio>
-	<vwc-radio label="2" value="2"></vwc-radio>
-	<vwc-radio label="3" value="3"></vwc-radio>
-</vwc-radio-group>
-```
+<div class="table-wrapper">
+
+| Name       | Type                     | Bubbles | Composed | Description                                          |
+| ---------- | ------------------------ | ------- | -------- | ---------------------------------------------------- |
+| **change** | `CustomEvent<undefined>` | Yes     | Yes      | Fires a custom 'change' event when the value changes |
+
+</div>
 
-## Events
+### Radio
+
+#### Properties
 
 <div class="table-wrapper">
 
-| Name     | Type                     | Bubbles | Composed | Description                                          |
-| -------- | ------------------------ | ------- | -------- | ---------------------------------------------------- |
-| `change` | `CustomEvent<undefined>` | Yes     | Yes      | Fires a custom 'change' event when the value changes |
+| Name            | Type                            | Description                           |
+| --------------- | ------------------------------- | ------------------------------------- |
+| **checked**     | `boolean`                       | Sets the radio to be checked          |
+| **connotation** | Enum: `accent` (default), `cta` | Whether the input element is disabled |
+| **disabled**    | `boolean`                       | Whether the input element is disabled |
+| **label**       | `string`                        | Label of the the Radio                |
+| **value**       | `string`                        | Set the radio's value.                |
 
 </div>
 
-## Use Cases
-
-### Inside Toolbar
+#### Events
 
-If the Radio Group is a child of an element with a `role` of `toolbar`, it's keyboard navigation behaviour will change to align with the [toolbar pattern](https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/):
+<div class="table-wrapper">
 
-- When pressing Left/Right arrow keys on the first/last radio button, the focus will move to the previous/next element in the toolbar.
-- Moving the focus with arrow keys will not automatically select the radio buttons.
+| Name       | Type                     | Bubbles | Composed | Description                                                |
+| ---------- | ------------------------ | ------- | -------- | ---------------------------------------------------------- |
+| **change** | `CustomEvent<undefined>` | Yes     | Yes      | Emits a custom change event when the checked state changes |
 
-```html preview
-<div role="toolbar" style="display: flex;">
-	<vwc-button label="Before"></vwc-button>
-	<vwc-radio-group>
-		<vwc-radio label="1" value="1"></vwc-radio>
-		<vwc-radio label="2" value="2"></vwc-radio>
-		<vwc-radio label="3" value="3"></vwc-radio>
-	</vwc-radio-group>
-	<vwc-button label="After"></vwc-button>
 </div>
-```

libs/components/src/lib/radio-group/USE-CASES.md

@@ -0,0 +1,18 @@
+## Inside Toolbar
+
+If the Radio Group is a child of an element with a `role` of `toolbar`, it's keyboard navigation behaviour will change to align with the [toolbar pattern](https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/):
+
+- When pressing Left/Right arrow keys on the first/last radio button, the focus will move to the previous/next element in the toolbar.
+- Moving the focus with arrow keys will not automatically select the radio buttons.
+
+```html preview
+<vwc-action-group role="toolbar" style="display: flex;">
+	<vwc-button label="Before"></vwc-button>
+	<vwc-radio-group>
+		<vwc-radio label="1" value="1"></vwc-radio>
+		<vwc-radio label="2" value="2"></vwc-radio>
+		<vwc-radio label="3" value="3"></vwc-radio>
+	</vwc-radio-group>
+	<vwc-button label="After"></vwc-button>
+</vwc-action-group>
+```