Merge branch 'main' into dsw-000-update-pr-template

.github/project-labeler.yml

@@ -128,4 +128,6 @@ pie-webc-core:
   - 'packages/components/pie-webc-core/**/*'
 
 pie-webc-testing:
-  - 'packages/components/pie-webc-testing/**/*'
+  - 'packages/components/pie-webc-testing/**/*'
+pie-toast-provider:
+  - packages/components/pie-toast-provider/**/*

.github/workflows/ci.yml

@@ -51,6 +51,7 @@ env:
   PERCY_DO_NOT_CAPTURE_RESPONSIVE_ASSETS: true
   PERCY_PAGE_LOAD_TIMEOUT: ${{ vars.PERCY_PAGE_LOAD_TIMEOUT }}
   PERCY_NETWORK_IDLE_WAIT_TIMEOUT: ${{ vars.PERCY_NETWORK_IDLE_WAIT_TIMEOUT }}
+  PERCY_TOKEN_PIE_TOAST_PROVIDER: ${{ secrets.PERCY_TOKEN_PIE_TOAST_PROVIDER }}
 
 jobs:
   check-change-type:

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",

apps/pie-storybook/package.json

@@ -39,6 +39,7 @@
     "@justeattakeaway/pie-text-input": "0.24.5",
     "@justeattakeaway/pie-textarea": "0.13.0",
     "@justeattakeaway/pie-toast": "0.5.0",
+    "@justeattakeaway/pie-toast-provider": "0.0.0",
     "dompurify": "3.1.3"
   },
   "devDependencies": {

apps/pie-storybook/stories/pie-toast-provider.stories.ts

@@ -0,0 +1,34 @@
+import { html } from 'lit';
+import { type Meta } from '@storybook/web-components';
+
+import '@justeattakeaway/pie-toast-provider';
+import { type ToastProviderProps } from '@justeattakeaway/pie-toast-provider';
+
+import { createStory } from '../utilities';
+
+type ToastProviderStoryMeta = Meta<ToastProviderProps>;
+
+const defaultArgs: ToastProviderProps = {};
+
+const toastProviderStoryMeta: ToastProviderStoryMeta = {
+    title: 'Toast Provider',
+    component: 'pie-toast-provider',
+    argTypes: {},
+    args: defaultArgs,
+    parameters: {
+        design: {
+            type: 'figma',
+            url: '',
+        },
+    },
+};
+
+export default toastProviderStoryMeta;
+
+// TODO: remove the eslint-disable rule when props are added
+// eslint-disable-next-line no-empty-pattern
+const Template = ({}: ToastProviderProps) => html`
+    <pie-toast-provider></pie-toast-provider>
+`;
+
+export const Default = createStory<ToastProviderProps>(Template, defaultArgs)();

bundlewatch.config.json

@@ -183,10 +183,16 @@
     {
       "path": "./packages/components/pie-toast/dist/react.js",
       "maxSize": "0.45 KB"
+    },
+    {
+      "path": "./packages/components/pie-toast-provider/dist/*.js",
+      "maxSize": "3 KB"
     }
   ],
   "defaultCompression": "gzip",
   "ci": {
-    "trackBranches": ["main"]
+    "trackBranches": [
+      "main"
+    ]
   }
-}
+}