@justeattakeaway/pie-radio-group 0.9.2 → 0.9.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +102 -18
- package/custom-elements.json +8 -8
- package/dist/index.js +1 -1
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -1,40 +1,124 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
</p>
|
|
1
|
+
# @justeattakeaway/pie-radio-group
|
|
2
|
+
[Source Code](https://github.com/justeattakeaway/pie/tree/main/packages/components/pie-radio-group) | [Design Documentation](https://pie.design/components/radio) | [NPM](https://www.npmjs.com/package/@justeattakeaway/pie-radio-group)
|
|
4
3
|
|
|
5
|
-
<p
|
|
4
|
+
<p>
|
|
6
5
|
<a href="https://www.npmjs.com/@justeattakeaway/pie-radio-group">
|
|
7
6
|
<img alt="GitHub Workflow Status" src="https://img.shields.io/npm/v/@justeattakeaway/pie-radio-group.svg">
|
|
8
7
|
</a>
|
|
9
8
|
</p>
|
|
10
9
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
`pie-radio-group` is a Web Component built using the Lit library.
|
|
10
|
+
`@justeattakeaway/pie-radio-group` is a Web Component built using the Lit library. It offers a simple and accessible interactive radio group component for web applications.
|
|
14
11
|
|
|
15
|
-
|
|
12
|
+
## Table of Contents
|
|
16
13
|
|
|
14
|
+
- [Installation](#installation)
|
|
15
|
+
- [Documentation](#documentation)
|
|
16
|
+
- [Properties](#properties)
|
|
17
|
+
- [Slots](#slots)
|
|
18
|
+
- [CSS Variables](#css-variables)
|
|
19
|
+
- [Events](#events)
|
|
20
|
+
- [Forms Usage](#forms-usage)
|
|
21
|
+
- [Usage Examples](#usage-examples)
|
|
22
|
+
- [Questions and Support](#questions-and-support)
|
|
23
|
+
- [Contributing](#contributing)
|
|
17
24
|
|
|
18
25
|
## Installation
|
|
19
26
|
|
|
20
|
-
To install
|
|
27
|
+
> To install any of our web components in your application, we would suggest following the [getting started guide](https://webc.pie.design/?path=/docs/introduction-getting-started--docs) to set up your project.
|
|
28
|
+
|
|
29
|
+
Ideally, you should install the component using the **`@justeattakeaway/pie-webc`** package, which includes all of the components. Or you can install the individual component package.
|
|
30
|
+
|
|
31
|
+
## Documentation
|
|
32
|
+
|
|
33
|
+
### Properties
|
|
34
|
+
| Prop | Options | Description | Default |
|
|
35
|
+
|----------------|----------------------------------------------|--------------------------------------------------------------------------------------------------------------------------|-------------|
|
|
36
|
+
| `name` | — | The name associated with the group. | `undefined` |
|
|
37
|
+
| `value` | — | The value of the radio group (used as a key/value pair in HTML forms with `name`). | `""` |
|
|
38
|
+
| `isInline` | `true`, `false` | Inline (horizontal) positioning of radio items. | `false` |
|
|
39
|
+
| `disabled` | `true`, `false` | Indicates whether or not the radio group is disabled. | `false` |
|
|
40
|
+
| `assistiveText`| — | An optional assistive text to display below the checkbox group. | `undefined` |
|
|
41
|
+
| `status` | `"default"`, `"success"`, `"error"` | The status of the radio group component / assistive text. Can be `default`, `success`, or `error`. | `"default"` |
|
|
42
|
+
|
|
43
|
+
### Slots
|
|
44
|
+
| Slot | Description |
|
|
45
|
+
|-----------|--------------------------------------------------------------------------------------------------|
|
|
46
|
+
| `default` | This should be [`pie-radio-button`](/components/radio) components without any other HTML. |
|
|
47
|
+
| `label` | To provide a custom label for the radio group. Please use [`pie-form-label`](/components/form-label). |
|
|
48
|
+
|
|
49
|
+
### CSS Variables
|
|
50
|
+
This component does not expose any CSS variables for style overrides.
|
|
51
|
+
|
|
52
|
+
### Events
|
|
53
|
+
| Event | Description |
|
|
54
|
+
|----------|----------------------------------------------------------|
|
|
55
|
+
| `change` | Fires when one of the radio group's state is changed. |
|
|
56
|
+
|
|
57
|
+
## Forms Usage
|
|
58
|
+
|
|
59
|
+
There are two kinds of forms usage to consider:
|
|
60
|
+
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.
|
|
61
|
+
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.
|
|
62
|
+
|
|
63
|
+
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.
|
|
21
64
|
|
|
22
|
-
|
|
23
|
-
|
|
65
|
+
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.
|
|
66
|
+
|
|
67
|
+
## Usage Examples
|
|
68
|
+
|
|
69
|
+
**For HTML:**
|
|
70
|
+
|
|
71
|
+
```js
|
|
72
|
+
// import as module into a js file e.g. main.js
|
|
73
|
+
import '@justeattakeaway/pie-webc/components/radio-group.js';
|
|
74
|
+
import '@justeattakeaway/pie-webc/components/radio.js';
|
|
75
|
+
import '@justeattakeaway/pie-webc/components/form-label.js';
|
|
24
76
|
```
|
|
25
|
-
|
|
26
|
-
|
|
77
|
+
|
|
78
|
+
```html
|
|
79
|
+
<pie-radio-group>
|
|
80
|
+
<pie-form-label slot="label">Favourite takeaway:</pie-form-label>
|
|
81
|
+
<pie-radio name="favouriteTakeaway" value="chinese">Chinese</pie-radio>
|
|
82
|
+
<pie-radio name="favouriteTakeaway" value="shawarma">Shawarma</pie-radio>
|
|
83
|
+
</pie-radio-group>
|
|
84
|
+
|
|
85
|
+
<script type="module" src="/main.js"></script>
|
|
27
86
|
```
|
|
28
87
|
|
|
29
|
-
For
|
|
88
|
+
**For Native JS Applications, Vue, Angular, Svelte etc.:**
|
|
30
89
|
|
|
31
|
-
|
|
90
|
+
```js
|
|
91
|
+
// Vue templates (using Nuxt 3)
|
|
92
|
+
import '@justeattakeaway/pie-webc/components/radio-group.js';
|
|
93
|
+
import '@justeattakeaway/pie-webc/components/radio.js';
|
|
94
|
+
import '@justeattakeaway/pie-webc/components/form-label.js';
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
```html
|
|
98
|
+
<pie-radio-group name="favouriteTakeaway" @change="favouriteTakeaway = $event.target.value">
|
|
99
|
+
<pie-form-label>Your favourite takeaway:</pie-form-label>
|
|
100
|
+
<pie-radio value="chinese">Chinese</pie-radio>
|
|
101
|
+
<pie-radio value="shawarma">Shawarma</pie-radio>
|
|
102
|
+
</pie-radio-group>
|
|
103
|
+
```
|
|
32
104
|
|
|
33
|
-
|
|
105
|
+
**For React Applications:**
|
|
106
|
+
|
|
107
|
+
```jsx
|
|
108
|
+
import { PieRadioGroup } from '@justeattakeaway/pie-webc/react/radio-group.js';
|
|
109
|
+
import { PieRadio } from '@justeattakeaway/pie-webc/react/radio.js';
|
|
110
|
+
import { PieFormLabel } from '@justeattakeaway/pie-webc/react/form-label.js';
|
|
111
|
+
|
|
112
|
+
<PieRadioGroup name="favouriteTakeaway" onChange={handleFavouriteTakeaway}>
|
|
113
|
+
<PieFormLabel slot="label">Choose a radio button:</PieFormLabel>
|
|
114
|
+
<PieRadio value="chinese">Chinese</PieRadio>
|
|
115
|
+
<PieRadio value="shawarma">Shawarma</PieRadio>
|
|
116
|
+
</PieRadioGroup>
|
|
117
|
+
```
|
|
34
118
|
|
|
35
|
-
## Questions
|
|
119
|
+
## Questions and Support
|
|
36
120
|
|
|
37
|
-
|
|
121
|
+
If you work at Just Eat Takeaway.com, please contact us on **#help-designsystem**. Otherwise, please raise an issue on [Github](https://github.com/justeattakeaway/pie/issues).
|
|
38
122
|
|
|
39
123
|
## Contributing
|
|
40
124
|
|
package/custom-elements.json
CHANGED
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
"type": {
|
|
36
36
|
"text": "DefaultProps"
|
|
37
37
|
},
|
|
38
|
-
"default": "{\
|
|
38
|
+
"default": "{\n status: 'default',\n disabled: false,\n isInline: false,\n value: '',\n}"
|
|
39
39
|
}
|
|
40
40
|
],
|
|
41
41
|
"exports": [
|
|
@@ -169,7 +169,7 @@
|
|
|
169
169
|
"privacy": "private",
|
|
170
170
|
"static": true,
|
|
171
171
|
"default": "false",
|
|
172
|
-
"description": "Tracks whether the `Shift` key was held during the last `Tab` key press.\
|
|
172
|
+
"description": "Tracks whether the `Shift` key was held during the last `Tab` key press.\n\nThe property is static because it needs to be shared across all instances of the\n`PieRadioGroup` component on the same page, ensuring consistent behavior."
|
|
173
173
|
},
|
|
174
174
|
{
|
|
175
175
|
"kind": "method",
|
|
@@ -180,7 +180,7 @@
|
|
|
180
180
|
"text": "void"
|
|
181
181
|
}
|
|
182
182
|
},
|
|
183
|
-
"description": "Dispatches a custom event to notify each slotted child radio element\
|
|
183
|
+
"description": "Dispatches a custom event to notify each slotted child radio element\nwhen the radio group is disabled."
|
|
184
184
|
},
|
|
185
185
|
{
|
|
186
186
|
"kind": "method",
|
|
@@ -321,7 +321,7 @@
|
|
|
321
321
|
}
|
|
322
322
|
}
|
|
323
323
|
],
|
|
324
|
-
"description": "Handles the `focusin` event to manage focus within the radio group.\
|
|
324
|
+
"description": "Handles the `focusin` event to manage focus within the radio group.\n\nThis method determines the appropriate element to focus when the radio group\ngains focus. It considers the last navigation action (whether `Shift+Tab` was used)\nand focuses the checked option, the first option, or the last option as needed."
|
|
325
325
|
},
|
|
326
326
|
{
|
|
327
327
|
"kind": "method",
|
|
@@ -332,7 +332,7 @@
|
|
|
332
332
|
"text": "void"
|
|
333
333
|
}
|
|
334
334
|
},
|
|
335
|
-
"description": "Handles the `focusout` event to restore the `tabindex` on the radio group's `fieldset`.\
|
|
335
|
+
"description": "Handles the `focusout` event to restore the `tabindex` on the radio group's `fieldset`.\n\nWhen focus leaves the radio group, this method enables the `tabindex` attribute\non the `fieldset` element. This ensures the radio group remains accessible for\nkeyboard navigation and can be re-focused when tabbing back into the group."
|
|
336
336
|
},
|
|
337
337
|
{
|
|
338
338
|
"kind": "method",
|
|
@@ -393,7 +393,7 @@
|
|
|
393
393
|
}
|
|
394
394
|
}
|
|
395
395
|
],
|
|
396
|
-
"description": "Determines if a key press indicates forward navigation within the radio group.\
|
|
396
|
+
"description": "Determines if a key press indicates forward navigation within the radio group.\n\nThis method evaluates a keyboard event to check if the pressed key corresponds\nto forward navigation based on the current text direction (LTR or RTL).\n\n**Behaviour:**\n- For LTR (Left-to-Right) layouts:\n - `ArrowRight` and `ArrowDown` indicate forward navigation.\n- For RTL (Right-to-Left) layouts:\n - `ArrowLeft` and `ArrowDown` indicate forward navigation."
|
|
397
397
|
},
|
|
398
398
|
{
|
|
399
399
|
"kind": "method",
|
|
@@ -412,7 +412,7 @@
|
|
|
412
412
|
}
|
|
413
413
|
}
|
|
414
414
|
],
|
|
415
|
-
"description": "Determines if a key press indicates backward navigation within the radio group.\
|
|
415
|
+
"description": "Determines if a key press indicates backward navigation within the radio group.\n\nThis method evaluates a keyboard event to check if the pressed key corresponds\nto backward navigation based on the current text direction (LTR or RTL).\n\n**Behaviour:**\n- For LTR (Left-to-Right) layouts:\n - `ArrowLeft` and `ArrowUp` indicate backward navigation.\n- For RTL (Right-to-Left) layouts:\n - `ArrowRight` and `ArrowUp` indicate backward navigation."
|
|
416
416
|
},
|
|
417
417
|
{
|
|
418
418
|
"kind": "method",
|
|
@@ -431,7 +431,7 @@
|
|
|
431
431
|
}
|
|
432
432
|
}
|
|
433
433
|
],
|
|
434
|
-
"description": "Handles keyboard navigation within the radio group using arrow keys.\
|
|
434
|
+
"description": "Handles keyboard navigation within the radio group using arrow keys.\n\nThis method responds to `keydown` events and determines the appropriate navigation\naction (forward or backward) based on the pressed key and the current focus. It prevents\nthe default browser behaviour (e.g., scrolling) when arrow keys are used for navigation."
|
|
435
435
|
},
|
|
436
436
|
{
|
|
437
437
|
"kind": "method",
|
package/dist/index.js
CHANGED
|
@@ -9,7 +9,7 @@ const p = class p extends b {
|
|
|
9
9
|
this.getAttribute("v") || this.setAttribute("v", p.v);
|
|
10
10
|
}
|
|
11
11
|
};
|
|
12
|
-
p.v = "0.9.
|
|
12
|
+
p.v = "0.9.4";
|
|
13
13
|
let u = p;
|
|
14
14
|
const R = "*,*:after,*:before{box-sizing:inherit}.c-radioGroup{--radio-group-gap: var(--dt-spacing-c);--radio-group-gap--inline: var(--dt-spacing-c) var(--dt-spacing-e);margin:0;padding:0;border:0;min-width:0;display:flex;flex-flow:column wrap;gap:var(--radio-group-gap)}.c-radioGroup>legend{margin-block-end:var(--dt-spacing-b)}.c-radioGroup.c-radioGroup--inline{flex-flow:row wrap;gap:var(--radio-group-gap--inline)}.c-radioGroup.c-radioGroup--hasAssistiveText{margin-block-end:var(--dt-spacing-a)}", E = ["default", "success", "error"], F = "pie-radio-group-disabled", h = {
|
|
15
15
|
status: "default",
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-radio-group",
|
|
3
3
|
"description": "PIE Design System Radio Group built using Web Components",
|
|
4
|
-
"version": "0.9.
|
|
4
|
+
"version": "0.9.4",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
7
7
|
"module": "dist/index.js",
|
|
@@ -36,11 +36,11 @@
|
|
|
36
36
|
"@justeattakeaway/pie-components-config": "0.20.1",
|
|
37
37
|
"@justeattakeaway/pie-css": "0.16.0",
|
|
38
38
|
"@justeattakeaway/pie-monorepo-utils": "0.5.1",
|
|
39
|
-
"@justeattakeaway/pie-radio": "0.11.
|
|
39
|
+
"@justeattakeaway/pie-radio": "0.11.2",
|
|
40
40
|
"cem-plugin-module-file-extensions": "0.0.5"
|
|
41
41
|
},
|
|
42
42
|
"dependencies": {
|
|
43
|
-
"@justeattakeaway/pie-assistive-text": "0.10.
|
|
43
|
+
"@justeattakeaway/pie-assistive-text": "0.10.4",
|
|
44
44
|
"@justeattakeaway/pie-webc-core": "1.0.0"
|
|
45
45
|
},
|
|
46
46
|
"volta": {
|