Merge branch 'main' into dsw-2495-radio-motion-page

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

@@ -0,0 +1,138 @@
+---
+eleventyNavigation:
+    key: Code
+    parent: Radio
+    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" style="text-decoration: none">
+    <img alt="GitHub Workflow Status" src="https://img.shields.io/npm/v/@justeattakeaway/pie-radio.svg?label=pie-radio">
+  </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` is a Web Component built using [Lit](https://lit.dev/). It offers a simple and accessible radio button component for web applications.
+
+This component can be easily integrated into various frontend frameworks and 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=/story/radio) instance!"
+} %}
+
+## Installation
+
+To install `pie-radio` in your application, run the following on your command line:
+
+```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
+
+{% componentDetailsTable {
+  tableData: events
+} %}
+
+## Examples
+
+{% notification {
+  type: "information",
+  iconName: "engineers",
+  message: "When using multiple radio buttons, you will want to use the [Radio Group component](/components/radio-group/)"
+} %}
+
+
+For HTML:
+
+```js
+// import as module into a js file e.g. main.js
+import '@justeattakeaway/pie-webc/components/radio.js'
+```
+
+```html
+<!-- pass js file into <script> tag -->
+<pie-radio></pie-radio>
+<script>
+    const pieRadio = document.querySelector('pie-radio');
+    // Properties can be set like any JS object
+    pieRadio.checked = checked;
+</script>
+```
+
+For Native JS Applications, Vue, Angular, Svelte etc.:
+
+```js
+// Vue templates (using Nuxt 3)
+import '@justeattakeaway/pie-webc/components/radio.js';
+
+// Setup code omitted
+<pie-radio :checked="checked" value="value" @change="handleRadioChange"></pie-radio>
+```
+
+For React Applications. When using the React version of the component, please make sure you also include React as a dependency in your project as well. See Peer Dependencies section.
+
+```jsx
+import { PieRadio } from '@justeattakeaway/pie-webc/react/radio.js';
+
+// Setup code omitted
+<PieRadio
+    checked={isRadioChecked}
+    value="value"
+    onInput={handleRadioInput}>
+    {`checked: ${isRadioChecked}`}
+</PieRadio>
+```
+For NextJS 13, please directly import from the individual component package. All other template usage is the same as above.
+```jsx
+// React templates (using Next 13 and SSR)
+import { PieRadio } from '@justeattakeaway/pie-radio/dist/react';
+```
+
+{% notification {
+  type: "neutral",
+  iconName: "link",
+  message: "For more examples, see [here](https://github.com/justeattakeaway/pie-aperture/tree/main)."
+} %}
+
+## Changelog
+
+{% notification {
+  type: "neutral",
+  iconName: "link",
+  message: "See [here](https://github.com/justeattakeaway/pie/blob/main/packages/components/pie-radio/CHANGELOG.md)."
+} %}

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

@@ -0,0 +1,26 @@
+{
+  "headings": [
+    "Event",
+    "Description"
+  ],
+  "rows": [
+    [
+      {
+        "type": "code",
+        "item": [
+          "change"
+        ]
+      },
+      "Fires when the radio is checked (but not when unchecked)."
+    ],
+    [
+      {
+        "type": "code",
+        "item": [
+          "input"
+        ]
+      },
+      "Should fire whenever a user toggles the radio."
+    ]
+  ]
+}

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

@@ -0,0 +1,127 @@
+{
+  "headings": [
+    "Prop",
+    "Options",
+    "Description",
+    "Default"
+  ],
+  "rows": [
+    [
+      "checked",
+      {
+        "type": "code",
+        "item": [
+          "true",
+          "false"
+        ]
+      },
+      "The checked state of the radio.",
+      {
+        "type": "code",
+        "item": [
+          "false"
+        ]
+      }
+    ],
+    [
+      "defaultChecked",
+      {
+        "type": "code",
+        "item": [
+          "true",
+          "false"
+        ]
+      },
+      "The default checked state of the radio (not necessarily the same as the current checked state). Used when the radio is part of a form that is reset.",
+      {
+        "type": "code",
+        "item": [
+          "false"
+        ]
+      }
+    ],
+    [
+      "disabled",
+      {
+        "type": "code",
+        "item": [
+          "true",
+          "false"
+        ]
+      },
+      "Same as the HTML disabled attribute - indicates whether or not the radio is disabled.",
+      {
+        "type": "code",
+        "item": [
+          "false"
+        ]
+      }
+    ],
+    [
+      "name",
+      {
+        "type": "code",
+        "item": [
+          "string"
+        ]
+      },
+      "The name of the radio (used as a key/value pair with `value`). This is required in order to work properly with forms.",
+      {
+        "type": "code",
+        "item": [
+          "undefined"
+        ]
+      }
+    ],
+    [
+      "required",
+      {
+        "type": "code",
+        "item": [
+          "true",
+          "false"
+        ]
+      },
+      "Same as native required attribute. If any radio button in a same-named group of radio buttons has the required attribute, a radio button in that group must be checked, although it doesn't have to be the one with the attribute applied.",
+      {
+        "type": "code",
+        "item": [
+          "false"
+        ]
+      }
+    ],
+    [
+      "value",
+      {
+        "type": "code",
+        "item": [
+          "string"
+        ]
+      },
+      "The value of the radio (used as a key/value pair in HTML forms with `name`).",
+      {
+        "type": "code",
+        "item": [
+          "undefined"
+        ]
+      }
+    ],
+    [
+      "status",
+      {
+        "type": "code",
+        "item": [
+          "\"default\"",
+          "\"error\""
+        ]
+      },
+      "The status of the radio component. Can be default or error.",
+      {
+        "type": "code",
+        "item": [
+          "\"default\""
+        ]
+      }
+    ]
+  ]
+}

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

@@ -0,0 +1,12 @@
+{
+  "headings": ["Slot", "Description"],
+  "rows": [
+    [
+      {
+        "type": "code",
+        "item": ["default"]
+      },
+      "The default slot is used for the radio label text."
+    ]
+  ]
+}

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

@@ -62,6 +62,7 @@
     "components/progress-stepper",
     "components/radio",
     "components/radio/motion",
+    "components/radio/code",
     "components/radio-group",
     "components/rating",
     "components/segmented-controls",