diff --git a/apps/pie-docs/src/_11ty/shortcodes/indexPageDisplay.js b/apps/pie-docs/src/_11ty/shortcodes/indexPageDisplay.js index 72334216e3..f1ff70a3ba 100644 --- a/apps/pie-docs/src/_11ty/shortcodes/indexPageDisplay.js +++ b/apps/pie-docs/src/_11ty/shortcodes/indexPageDisplay.js @@ -59,7 +59,7 @@ const indexPageDisplay = ({ const hasMobileSource = fs.existsSync(path.join(__dirname, imgMobileSrc)); const throwOnMissingImage = () => { - throw new Error(`Image not provided for ${menuItemSlug}. Please ensure image is provided or add this item to ExcludedElements.`); + throw new Error(`Image not provided for ${menuItemSlug}. Please ensure image is provided or add this item to ExcludedElements. Expected path: ${imgSrc}`); }; return ` diff --git a/apps/pie-docs/src/assets/img/components/radio-group/anatomy.svg b/apps/pie-docs/src/assets/img/components/radio-group/anatomy.svg new file mode 100644 index 0000000000..99d09ab276 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/radio-group/anatomy.svg @@ -0,0 +1,39 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/components/radio-group/ltr.svg b/apps/pie-docs/src/assets/img/components/radio-group/ltr.svg new file mode 100644 index 0000000000..082a17ccdc --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/radio-group/ltr.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/components/radio-group/modifiers-assistive-text.svg b/apps/pie-docs/src/assets/img/components/radio-group/modifiers-assistive-text.svg new file mode 100644 index 0000000000..01a425d9f1 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/radio-group/modifiers-assistive-text.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/components/radio-group/modifiers-form-label-1.svg b/apps/pie-docs/src/assets/img/components/radio-group/modifiers-form-label-1.svg new file mode 100644 index 0000000000..21d7feab68 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/radio-group/modifiers-form-label-1.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/components/radio-group/modifiers-form-label-2.svg b/apps/pie-docs/src/assets/img/components/radio-group/modifiers-form-label-2.svg new file mode 100644 index 0000000000..e1db9a3db1 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/radio-group/modifiers-form-label-2.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/components/radio-group/overflow.svg b/apps/pie-docs/src/assets/img/components/radio-group/overflow.svg new file mode 100644 index 0000000000..0176691de1 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/radio-group/overflow.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/components/radio-group/overview.svg b/apps/pie-docs/src/assets/img/components/radio-group/overview.svg new file mode 100644 index 0000000000..466f15a5e4 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/radio-group/overview.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/components/radio-group/rtl.svg b/apps/pie-docs/src/assets/img/components/radio-group/rtl.svg new file mode 100644 index 0000000000..307a0b4df9 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/radio-group/rtl.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/components/radio-group/states-1.svg b/apps/pie-docs/src/assets/img/components/radio-group/states-1.svg new file mode 100644 index 0000000000..01a425d9f1 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/radio-group/states-1.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/components/radio-group/states-2.svg b/apps/pie-docs/src/assets/img/components/radio-group/states-2.svg new file mode 100644 index 0000000000..b4666e2040 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/radio-group/states-2.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/components/radio-group/variations-horizontal.svg b/apps/pie-docs/src/assets/img/components/radio-group/variations-horizontal.svg new file mode 100644 index 0000000000..8661d30a12 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/radio-group/variations-horizontal.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/components/radio-group/variations-vertical.svg b/apps/pie-docs/src/assets/img/components/radio-group/variations-vertical.svg new file mode 100644 index 0000000000..e66705808f --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/radio-group/variations-vertical.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/index/components/checkbox-group.svg b/apps/pie-docs/src/assets/img/index/components/checkbox-group.svg new file mode 100644 index 0000000000..9a6ba9de2a --- /dev/null +++ b/apps/pie-docs/src/assets/img/index/components/checkbox-group.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/index/components/radio-group.svg b/apps/pie-docs/src/assets/img/index/components/radio-group.svg new file mode 100644 index 0000000000..bbb2a352b2 --- /dev/null +++ b/apps/pie-docs/src/assets/img/index/components/radio-group.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/componentStatusData.js b/apps/pie-docs/src/componentStatusData.js index 37a055ad74..494af7742f 100644 --- a/apps/pie-docs/src/componentStatusData.js +++ b/apps/pie-docs/src/componentStatusData.js @@ -1461,6 +1461,45 @@ const rows = [ status: statusTypes.STABLE, } ], + [ + { componentName: 'Radio Group' }, + { + resource: resourceTypes.COMPONENT, + link: 'https://www.figma.com/design/pPSC73rPin4csb8DiK1CRr/%E2%9C%A8-%5BCore%5D-Web-Components-%5BPIE-3%5D?node-id=198-33663', + status: statusTypes.STABLE, + }, + { + resource: resourceTypes.DOCUMENTATION, + link: 'https://www.figma.com/design/OOgnT2oNMdGFytj5AanYvt/%5BCore%5D-Web-Component-Documentation-%5BPIE-3%5D?node-id=29-22', + status: statusTypes.STABLE, + }, + { + resource: resourceTypes.WEB_COMPONENTS, + link: 'https://webc.pie.design/?path=/story/radio-group--default', + status: webComponentStatuses['pie-radio-group'], + }, + { + resource: resourceTypes.VUE, + status: statusTypes.NOT_APPLICABLE, + }, + { + resource: resourceTypes.REACT, + link: 'https://snacks.takeaway.com/portal/components/radio-group/', + status: statusTypes.STABLE, + }, + { + resource: resourceTypes.IOS_JUST_UI, + status: statusTypes.STABLE, + }, + { + resource: resourceTypes.IOS_PIE, + status: statusTypes.STABLE, + }, + { + resource: resourceTypes.ANDROID_PIE, + status: statusTypes.STABLE, + } + ], [ { componentName: 'Rating' }, { diff --git a/apps/pie-docs/src/components/components.md b/apps/pie-docs/src/components/components.md index 6f50785966..42feb88111 100644 --- a/apps/pie-docs/src/components/components.md +++ b/apps/pie-docs/src/components/components.md @@ -11,6 +11,6 @@ title: Components {% indexPageDisplay { collection: collections.all, itemKey: "Components", -excludedElements: ['Component status', 'Checkbox Group'] +excludedElements: ['Component status'] } %} diff --git a/apps/pie-docs/src/components/radio-group/overview/overview.md b/apps/pie-docs/src/components/radio-group/overview/overview.md new file mode 100644 index 0000000000..83345ea97f --- /dev/null +++ b/apps/pie-docs/src/components/radio-group/overview/overview.md @@ -0,0 +1,192 @@ +--- +eleventyNavigation: + key: Overview + parent: 'Radio Group' + order: 1 +shouldShowContents: true +permalink: components/radio-group/ +--- + +## Overview +Radio groups present a set of mutually exclusive options, allowing users to select only one option from a predefined list. + +They are commonly used in forms, settings panels, and other interfaces where users need to make a single selection from multiple options. + +{% contentPageImage { + src:"../../../assets/img/components/radio-group/overview.svg", + alt: "A group of radio buttons that are vertically stacked together." +} %} + +--- + +## Dos and Don’ts + +{% usage { + do: { + type: usageTypes.text, + items: [ + "Make sure each radio button has a label which is clear, concise and accurate.", + "Use a minimum of 2 radio buttons within a group." + ] + }, + dont: { + type: usageTypes.text, + items: [ + "If the user can select multiple options from a group, checkboxes should be used instead of radio buttons.", + "Limit the number of radio buttons presented to users to avoid overwhelming them with choices." + ] + } +} %} + +--- + +## Anatomy + +{% contentPageImage { + src:"../../../assets/img/components/radio-group/anatomy.svg", + alt: "Anatomy of a radio group.", + width: 340 +} %} + +{% list { + type: listTypes.ordered, + items: [ + "**Form label (Optional):** The [form label](/components/form-label/) provides a clear and accessible description of the form element it is associated with.", + "**Radio input:** A radio input indicates the current selected state for the option. By default it is unselected.", + "**Radio label:** Describes the option that can be selected.", + "**Assistive text (Optional):** The [assistive text](/components/assistive-text/) provides additional instructions and error or success messaging for the entire radio group." + ] +} %} + +--- + +## Variations +Radio groups can be laid out either vertically or horizontally depending on the use-case and the structure of the user interface. The default layout is vertical, and this is recommended for easier reading. + +### Vertical +{% contentPageImage { + src:"../../../assets/img/components/radio-group/variations-vertical.svg", + alt: "A vertical stack of radio buttons grouped together by a single label above them.", + width: 72 +} %} + +### Horizontal +{% contentPageImage { + src:"../../../assets/img/components/radio-group/variations-horizontal.svg", + alt: "A row of radio buttons grouped together by a single label above them.", + width: 258 +} %} + +--- + +## Modifiers + +### Form label +A form label is recommended to provide the user context of the form element and its content. + +{% contentLayout %} + {% contentItem %} + {% contentPageImage { + src:"../../../assets/img/components/radio-group/modifiers-form-label-1.svg", + alt: "A row of radio buttons grouped together by a single label above them.", + width: 258 + } %} + {% endcontentItem %} + {% contentItem %} + {% contentPageImage { + src:"../../../assets/img/components/radio-group/modifiers-form-label-2.svg", + alt: "A row of radio buttons grouped together but missing a label.", + width: 258 + } %} + {% endcontentItem %} +{% endcontentLayout %} + + +### Assistive text +Assistive text is used where needed to provide additional information or error / success messaging regarding the whole form element, and never to individual radios. The assistive text is always used for an error state to provide the user with the information required to complete the form element. + +{% contentPageImage { + src:"../../../assets/img/components/radio-group/modifiers-assistive-text.svg", + alt: "A row of radio buttons grouped with an error colour around their borders. Below is a message with an error icon. The colour used for both the text and icon is the same as the error border.", + width: 258 +} %} + +--- + +## Content +All content should use sentence case. + +### Form label +{% notification { + type: "neutral", + iconName: "link", + message: "Check out the [form label content](/components/form-label/) documentation." +} %} + +### Label +- Always use clear and concise labels for radio buttons. +- Labels appear to the right of radio buttons. + +--- + +## Overflow + +When the label exceeds the available width, the label will wrap onto a new line. Radios with the same row remain top aligned for consistency, and any additional rows underneath move down to accommodate the additional content. + +{% contentPageImage { + src:"../../../assets/img/components/radio-group/overflow.svg", + alt: "A horizontal row of radio buttons. The first radio has a label that is very long, this forces the row to break to a new line.", + width: 470 +} %} + +--- + +## States +Individual radios have their own interactive states: default, hover, active, and focus. However, some states apply to the group as a collective because they affect all radios: error and disabled. + +{% contentLayout %} + {% contentItem %} + {% contentPageImage { + src:"../../../assets/img/components/radio-group/states-1.svg", + alt: "A row of radio buttons grouped with an error colour around their borders. Below is a message with an error icon. The colour used for both the text and icon is the same as the error border.", + width: 258 + } %} + {% endcontentItem %} + {% contentItem %} + {% contentPageImage { + src:"../../../assets/img/components/radio-group/states-2.svg", + alt: "A row of radio buttons grouped together by a single label above them. Their background colours are faded to signify that they are currently in a disabled state.", + width: 258 + } %} + {% endcontentItem %} +{% endcontentLayout %} + +--- + +## Examples + +### LTR examples +Here are some examples of the component in a left-to-right context: + +{% contentPageImage { + src:"../../../assets/img/components/radio-group/ltr.svg", + alt: "A vertical stack of radio buttons. The first one is selected. The radio buttons sit on the left hand side of the label text. This demonstrates a left-to-right reading direction.", + width: 94 +} %} + +### RTL examples +Here are some examples of the component in a right-to-left context: + +{% contentPageImage { + src:"../../../assets/img/components/radio-group/rtl.svg", + alt: "A vertical stack of radio buttons. The first one is selected. The radio buttons sit on the right hand side of the label text. This demonstrates a right-to-left reading direction.", + width: 88 +} %} + +--- + +## Resources + +{% resourceTable { + componentName: 'Radio Group' +} %} diff --git a/apps/pie-docs/src/components/radio-group/radio-group.json b/apps/pie-docs/src/components/radio-group/radio-group.json new file mode 100644 index 0000000000..b21c4c99dd --- /dev/null +++ b/apps/pie-docs/src/components/radio-group/radio-group.json @@ -0,0 +1,5 @@ +{ + "title": "Radio Group", + "navKey": "Radio Group", + "description": "" + } diff --git a/apps/pie-docs/src/components/radio-group/radio-group.md b/apps/pie-docs/src/components/radio-group/radio-group.md new file mode 100644 index 0000000000..b85a751a43 --- /dev/null +++ b/apps/pie-docs/src/components/radio-group/radio-group.md @@ -0,0 +1,8 @@ +--- +eleventyNavigation: + key: 'Radio Group' + parent: Components + url: /components/radio-group/ + order: 33 +permalink: false +--- diff --git a/apps/pie-docs/src/components/rating/rating.md b/apps/pie-docs/src/components/rating/rating.md index f977ea3e50..764c9dcdd3 100644 --- a/apps/pie-docs/src/components/rating/rating.md +++ b/apps/pie-docs/src/components/rating/rating.md @@ -2,7 +2,7 @@ eleventyNavigation: key: 'Rating' parent: Components - order: 33 + order: 34 --- ## Overview diff --git a/apps/pie-docs/src/components/segmented-controls/segmented-controls.md b/apps/pie-docs/src/components/segmented-controls/segmented-controls.md index b54fc048c8..d11d270a37 100644 --- a/apps/pie-docs/src/components/segmented-controls/segmented-controls.md +++ b/apps/pie-docs/src/components/segmented-controls/segmented-controls.md @@ -2,7 +2,7 @@ eleventyNavigation: key: 'Segmented Controls' parent: Components - order: 34 + order: 35 --- ## Overview diff --git a/apps/pie-docs/src/components/select-input/select-input.md b/apps/pie-docs/src/components/select-input/select-input.md index 2d15efe1b6..abf80a6302 100644 --- a/apps/pie-docs/src/components/select-input/select-input.md +++ b/apps/pie-docs/src/components/select-input/select-input.md @@ -2,7 +2,7 @@ eleventyNavigation: key: 'Select Input' parent: Components - order: 35 + order: 36 --- ## Overview diff --git a/apps/pie-docs/src/components/show-more/show-more.md b/apps/pie-docs/src/components/show-more/show-more.md index d309b97701..c6128187a3 100644 --- a/apps/pie-docs/src/components/show-more/show-more.md +++ b/apps/pie-docs/src/components/show-more/show-more.md @@ -2,7 +2,7 @@ eleventyNavigation: key: 'Show More' parent: Components - order: 36 + order: 37 --- ## Overview diff --git a/apps/pie-docs/src/components/side-sheet/side-sheet.md b/apps/pie-docs/src/components/side-sheet/side-sheet.md index 915fef46ce..8398bde2ca 100644 --- a/apps/pie-docs/src/components/side-sheet/side-sheet.md +++ b/apps/pie-docs/src/components/side-sheet/side-sheet.md @@ -2,7 +2,7 @@ eleventyNavigation: key: 'Side Sheet' parent: Components - order: 37 + order: 38 --- ## Overview diff --git a/apps/pie-docs/src/components/skeleton/skeleton.md b/apps/pie-docs/src/components/skeleton/skeleton.md index 89925363b5..778362f330 100644 --- a/apps/pie-docs/src/components/skeleton/skeleton.md +++ b/apps/pie-docs/src/components/skeleton/skeleton.md @@ -2,7 +2,7 @@ eleventyNavigation: key: 'Skeleton' parent: Components - order: 38 + order: 39 --- ## Overview diff --git a/apps/pie-docs/src/components/slider/slider.md b/apps/pie-docs/src/components/slider/slider.md index 58e3754c8f..a361f1ec29 100644 --- a/apps/pie-docs/src/components/slider/slider.md +++ b/apps/pie-docs/src/components/slider/slider.md @@ -2,7 +2,7 @@ eleventyNavigation: key: 'Slider' parent: Components - order: 39 + order: 40 --- ## Overview diff --git a/apps/pie-docs/src/components/spinner/spinner.md b/apps/pie-docs/src/components/spinner/spinner.md index 8b719bbaee..af94930bb6 100644 --- a/apps/pie-docs/src/components/spinner/spinner.md +++ b/apps/pie-docs/src/components/spinner/spinner.md @@ -2,7 +2,7 @@ eleventyNavigation: key: 'Spinner' parent: Components - order: 40 + order: 41 --- ## Overview diff --git a/apps/pie-docs/src/components/switch/switch.md b/apps/pie-docs/src/components/switch/switch.md index 0386a73825..9e05b3f5f9 100644 --- a/apps/pie-docs/src/components/switch/switch.md +++ b/apps/pie-docs/src/components/switch/switch.md @@ -2,7 +2,7 @@ eleventyNavigation: key: 'Switch' parent: Components - order: 41 + order: 42 url: /components/switch/ permalink: false --- diff --git a/apps/pie-docs/src/components/tabs/tabs.md b/apps/pie-docs/src/components/tabs/tabs.md index d59bab39d9..47cbd0f6e8 100644 --- a/apps/pie-docs/src/components/tabs/tabs.md +++ b/apps/pie-docs/src/components/tabs/tabs.md @@ -2,7 +2,7 @@ eleventyNavigation: key: 'Tabs' parent: Components - order: 42 + order: 43 --- ## Overview diff --git a/apps/pie-docs/src/components/tag/tag.md b/apps/pie-docs/src/components/tag/tag.md index 92c3e6b2cb..101661979f 100644 --- a/apps/pie-docs/src/components/tag/tag.md +++ b/apps/pie-docs/src/components/tag/tag.md @@ -3,6 +3,6 @@ eleventyNavigation: key: Tag parent: Components url: /components/tag/ - order: 42 + order: 44 permalink: false --- diff --git a/apps/pie-docs/src/components/text-input/text-input.md b/apps/pie-docs/src/components/text-input/text-input.md index 0208695264..a75d60bc05 100644 --- a/apps/pie-docs/src/components/text-input/text-input.md +++ b/apps/pie-docs/src/components/text-input/text-input.md @@ -3,6 +3,6 @@ eleventyNavigation: key: 'Text Input' parent: Components url: /components/text-input/ - order: 45 + order: 46 permalink: false --- diff --git a/apps/pie-docs/src/components/textarea/textarea.md b/apps/pie-docs/src/components/textarea/textarea.md index 20dc6df542..f60ff6f9a6 100644 --- a/apps/pie-docs/src/components/textarea/textarea.md +++ b/apps/pie-docs/src/components/textarea/textarea.md @@ -3,7 +3,7 @@ eleventyNavigation: key: 'Textarea' parent: Components url: /components/textarea/ - order: 46 + order: 47 permalink: false --- diff --git a/apps/pie-docs/src/components/thumbnail/thumbnail.md b/apps/pie-docs/src/components/thumbnail/thumbnail.md index 09a2f5176e..84d45d2853 100644 --- a/apps/pie-docs/src/components/thumbnail/thumbnail.md +++ b/apps/pie-docs/src/components/thumbnail/thumbnail.md @@ -2,7 +2,7 @@ eleventyNavigation: key: 'Thumbnail' parent: Components - order: 47 + order: 48 --- ## Overview diff --git a/apps/pie-docs/src/components/toast/toast.md b/apps/pie-docs/src/components/toast/toast.md index f5a57e01bf..0b89c2ce8d 100644 --- a/apps/pie-docs/src/components/toast/toast.md +++ b/apps/pie-docs/src/components/toast/toast.md @@ -3,6 +3,6 @@ eleventyNavigation: key: 'Toast' parent: Components url: /components/toast/ - order: 48 + order: 49 permalink: false --- diff --git a/apps/pie-docs/src/components/tooltip/tooltip.md b/apps/pie-docs/src/components/tooltip/tooltip.md index e00a447cea..f93ec7ee4e 100644 --- a/apps/pie-docs/src/components/tooltip/tooltip.md +++ b/apps/pie-docs/src/components/tooltip/tooltip.md @@ -2,7 +2,7 @@ eleventyNavigation: key: 'Tooltip' parent: Components - order: 49 + order: 50 --- ## Overview diff --git a/apps/pie-docs/src/components/uploader/uploader.md b/apps/pie-docs/src/components/uploader/uploader.md index bfa88301e1..ba6952ab28 100644 --- a/apps/pie-docs/src/components/uploader/uploader.md +++ b/apps/pie-docs/src/components/uploader/uploader.md @@ -2,7 +2,7 @@ eleventyNavigation: key: 'Uploader' parent: Components - order: 50 + order: 51 --- ## Overview diff --git a/apps/pie-docs/test/snapshots/expected-routes.snapshot.json b/apps/pie-docs/test/snapshots/expected-routes.snapshot.json index 7799f0f6aa..aeadfaa1e1 100644 --- a/apps/pie-docs/test/snapshots/expected-routes.snapshot.json +++ b/apps/pie-docs/test/snapshots/expected-routes.snapshot.json @@ -61,6 +61,7 @@ "components/progress-bar", "components/progress-stepper", "components/radio", + "components/radio-group", "components/rating", "components/segmented-controls", "components/select-input",