feat(pie-docs): DSW-2497 add radio-group code page to docs

apps/pie-docs/src/components/radio-group/code/code.md

@@ -0,0 +1,144 @@
+---
+eleventyNavigation:
+    key: Code
+    parent: 'Radio Group'
+    order: 2
+shouldShowContents: true
+eleventyComputed:
+    props: "{% include './props.json' %}"
+    slots: "{% include './slots.json' %}"
+    events: "{% include './events.json' %}"
+---
+
+## Overview
+
+<p>
+  <a href="https://www.npmjs.com/@justeattakeaway/pie-radio-group" style="text-decoration: none">
+    <img alt="GitHub Workflow Status" src="https://img.shields.io/npm/v/@justeattakeaway/pie-radio-group.svg?label=pie-radio-group">
+  </a>
+
+  <a href="https://www.npmjs.com/package/@justeattakeaway/pie-webc">
+    <img alt="GitHub Workflow Status" src="https://img.shields.io/npm/v/@justeattakeaway/pie-webc.svg?label=pie-webc">
+  </a>
+</p>
+
+`pie-radio-group` is a Web Component built with [Lit](https://lit.dev/), providing a simple and accessible group of [radio buttons](/components/radio) for web applications.
+
+This component integrates easily with various frontend frameworks and can be customised through a set of properties.
+
+{% notification {
+  type: "information",
+  iconName: "engineers",
+  message: "You can try out this component on our [Storybook](https://webc.pie.design/?path=/docs/radio-group) instance!"
+} %}
+
+## Installation
+
+To install `pie-radio-group` in your application via `npm` or `yarn`:
+
+```shell
+npm i @justeattakeaway/pie-webc
+```
+
+```shell
+yarn add @justeattakeaway/pie-webc
+```
+
+{% notification {
+  type: "neutral",
+  iconName: "link",
+  message: "For more information on using PIE components as part of an application, check out the [Getting Started Guide](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components)."
+} %}
+
+## Props
+
+{% componentDetailsTable {
+  tableData: props
+} %}
+
+## Slots
+
+{% componentDetailsTable {
+  tableData: slots
+} %}
+
+## Events
+
+{% notification {
+  type: "warning",
+  message: "In React, the change event is similar to the input event. Our components adhere to the web standards definition of the change event, which means it is triggered when the element loses focus after its value has been changed. [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event)"
+} %}
+
+{% componentDetailsTable {
+  tableData: events
+} %}
+
+## Importing and usage in templates
+For HTML:
+
+Please ensure you apply the `name` property to each individual radio button.
+
+```js
+import '@justeattakeaway/pie-webc/components/radio-group.js';
+import '@justeattakeaway/pie-webc/components/radio.js';
+import '@justeattakeaway/pie-webc/components/form-label.js';
+```
+
+```html
+<pie-radio-group>
+    <pie-form-label slot="label">Favourite takeaway:</pie-form-label>
+    <pie-radio name="favouriteTakeaway" value="chinese">Chinese</pie-radio>
+    <pie-radio name="favouriteTakeaway" value="shawarma">Shawarma</pie-radio>
+</pie-radio-group>
+```
+
+For Vue applications:
+```js
+import '@justeattakeaway/pie-webc/components/radio-group.js';
+import '@justeattakeaway/pie-webc/components/radio.js';
+import '@justeattakeaway/pie-webc/components/form-label.js';
+```
+
+```html
+<pie-radio-group name="favouriteTakeaway" @change="favouriteTakeaway = $event.target.value">
+  <pie-form-label>Your favourite takeaway:</pie-form-label>
+  <pie-radio value="chinese">Chinese</pie-radio>
+  <pie-radio value="shawarma">Shawarma</pie-radio>
+</pie-radio-group>
+```
+For React Applications:
+```jsx
+import { PieRadioGroup } from '@justeattakeaway/pie-webc/react/radio-group.js';
+import { PieRadio } from '@justeattakeaway/pie-webc/react/radio.js';
+import { PieFormLabel } from '@justeattakeaway/pie-webc/react/form-label.js';
+
+<PieRadioGroup name="favouriteTakeaway" onChange={handleFavouriteTakeaway}>
+    <PieFormLabel slot="label">Choose a radio button:</PieFormLabel>
+    <PieRadio value="chinese">Chinese</PieRadio>
+    <PieRadio value="shawarma">Shawarma</PieRadio>
+</PieRadioGroup>
+```
+
+
+## Forms usage
+{% notification {
+  type: "information",
+  iconName: "link",
+  message: "For general guidance on using our web components within forms, see [our wiki page](https://github.com/justeattakeaway/pie/wiki/Form-Controls#pie-forms-usage)."
+} %}
+
+There are two kinds of forms usage to consider:
+1. Controlled forms: These are when forms are built using HTML, but controlled via application state. This is a common pattern in React and Vue applications.
+2. Uncontrolled forms: These are when forms are built using HTML and the form data is collected natively, usually via the [FormData](https://developer.mozilla.org/en-US/docs/Web/API/FormData) interface.
+
+When using the radio group component, the most important thing to be aware of is that if you are using an uncontrolled form (whether or not it is in a single-paged application or just HTML), you *must* apply the `name` property directly to each radio button inside the group. This ensures it is correctly captured in the `FormData` object when the form is submitted.
+
+When using controlled forms in an framework such as Vue or React, you can simply apply the `name` property to the radio group and omit adding it to each individual radio button.
+
+## Changelog
+
+{% notification {
+  type: "neutral",
+  iconName: "link",
+  message: "See [here](https://github.com/justeattakeaway/pie/blob/main/packages/components/pie-radio-group/CHANGELOG.md)."
+} %}

apps/pie-docs/src/components/radio-group/code/events.json

@@ -0,0 +1,17 @@
+{
+  "headings": [
+      "Event",
+      "Description"
+  ],
+  "rows": [
+      [
+          {
+              "type": "code",
+              "item": [
+                  "change"
+              ]
+          },
+          "Fires when one of the radio group's state is changed."
+      ]
+  ]
+}

apps/pie-docs/src/components/radio-group/code/props.json

@@ -0,0 +1,68 @@
+{
+  "headings": ["Prop", "Options", "Description", "Default"],
+  "rows": [
+      [
+          "name",
+          null,
+          "The name associated with the group.",
+          {
+              "type": "code",
+              "item": ["undefined"]
+          }
+      ],
+      [
+          "value",
+          null,
+          "The value of the radio group (used as a key/value pair in HTML forms with `name`).",
+          {
+              "type": "code",
+              "item": ["\"\""]
+          }
+      ],
+      [
+          "isInline",
+          {
+              "type": "code",
+              "item": ["true", "false"]
+          },
+          "Inline (horizontal) positioning of radio items.",
+          {
+              "type": "code",
+              "item": ["false"]
+          }
+      ],
+      [
+          "disabled",
+          {
+              "type": "code",
+              "item": ["true", "false"]
+          },
+          "Indicates whether or not the radio group is disabled.",
+          {
+              "type": "code",
+              "item": ["false"]
+          }
+      ],
+      [
+          "assistiveText",
+          null,
+          "An optional assistive text to display below the checkbox group.",
+          {
+              "type": "code",
+              "item": ["undefined"]
+          }
+      ],
+      [
+          "status",
+          {
+              "type": "code",
+              "item": ["\"default\"", "\"success\"", "\"error\""]
+          },
+          "The status of the radio group component / assistive text. Can be default, success, or error.",
+          {
+              "type": "code",
+              "item": ["\"default\""]
+          }
+      ]
+  ]
+}

apps/pie-docs/src/components/radio-group/code/slots.json

@@ -0,0 +1,19 @@
+{
+  "headings": ["Slot", "Description"],
+  "rows": [
+      [
+          {
+              "type": "code",
+              "item": ["default"]
+          },
+          "This should be [pie-radio-button](/components/radio) components without any other HTML."
+      ],
+      [
+          {
+              "type": "code",
+              "item": ["label"]
+          },
+          "To provide a custom label for the radio group. Please use [pie-form-label](/components/form-label)."
+      ]
+  ]
+}

apps/pie-docs/test/snapshots/expected-routes.snapshot.json

@@ -64,6 +64,7 @@
     "components/radio/code",
     "components/radio/motion",
     "components/radio-group",
+    "components/radio-group/code",
     "components/rating",
     "components/segmented-controls",
     "components/select-input",

packages/components/pie-radio-group/README.md

@@ -8,15 +8,6 @@
   </a>
 </p>
 
-# Table of Contents
-
-1. [Introduction](#pie-radio-group)
-2. [Installation](#installation)
-3. [Importing the component](#importing-the-component)
-4. [Peer Dependencies](#peer-dependencies)
-5. [Props](#props)
-6. [Contributing](#contributing)
-
 ## pie-radio-group
 
 `pie-radio-group` is a Web Component built using the Lit library.
@@ -29,63 +20,22 @@ This component can be easily integrated into various frontend frameworks and cus
 To install `pie-radio-group` in your application, run the following on your command line:
 
 ```bash
-# npm
-$ npm i @justeattakeaway/pie-radio-group
-
-# yarn
-$ yarn add @justeattakeaway/pie-radio-group
-```
-
-For full information on using PIE components as part of an application, check out the [Getting Started Guide](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components).
-
-
-### Importing the component
-
-#### JavaScript
-```js
-// Default – for Native JS Applications, Vue, Angular, Svelte, etc.
-import { PieRadioGroup } from '@justeattakeaway/pie-radio-group';
-
-// If you don't need to reference the imported object, you can simply
-// import the module which registers the component as a custom element.
-import '@justeattakeaway/pie-radio-group';
+npm i @justeattakeaway/pie-radio-group
 ```
-
-#### React
-```js
-// React
-// For React, you will need to import our React-specific component build
-// which wraps the web component using ​@lit/react
-import { PieRadioGroup } from '@justeattakeaway/pie-radio-group/dist/react';
+```bash
+yarn add @justeattakeaway/pie-radio-group
 ```
 
-> [!NOTE]
-> When using the React version of the component, please make sure to also
-> include React as a [peer dependency](#peer-dependencies) in your project.
-
-
-## Peer Dependencies
-
-> [!IMPORTANT]
-> When using `pie-radio-group`, you will also need to include a couple of dependencies to ensure the component renders as expected. See [the PIE Wiki](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components#expected-dependencies) for more information and how to include these in your application.
-
-
-## Props
+For full information on using PIE components as part of an application, check out the [Getting Started Guide](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components).
 
-| Property | Type | Default | Description |
-|---|---|---|---|
-| - | - | - | - |
+## Documentation
 
-In your markup or JSX, you can then use these to set the properties for the `pie-radio-group` component:
+Visit  [Radio Group | PIE Design System](https://pie.design/components/radio-group/code) to view more information on this component.
 
-```html
-<!-- Native HTML -->
-<pie-radio-group></pie-radio-group>
+## Questions
 
-<!-- JSX -->
-<PieRadioGroup></PieRadioGroup>
-```
+Please head to [FAQs | PIE Design System](https://pie.design/support/contact-us/) to see our FAQs and get in touch.
 
 ## Contributing
 
-Check out our [contributing guide](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide) for more information on [local development](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#local-development) and how to run specific [component tests](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#testing).
+Check out our [contributing guide](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide) for more information on [local development](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#local-development) and how to run specific [component tests](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#testing).