From 1067f5c16df7a359db4df2718a8d318134087e2a Mon Sep 17 00:00:00 2001 From: BogdanDanilescu <153850559+BogdanDanilescu@users.noreply.github.com> Date: Tue, 15 Oct 2024 13:52:21 +0300 Subject: [PATCH] feat: radio component (#279) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: “BogdanDanilescu” Co-authored-by: Andrea Pregnolato --- .../2-library/32-radio-button.mdx | 473 +++++++++++++++++- apps/docs/dictionary.txt | 7 +- .../src/components/document/common/mdx.tsx | 2 + apps/docs/src/components/form/radio.tsx | 53 ++ apps/docs/src/lib/components.ts | 6 +- examples/nextjs/src/app/page.tsx | 25 + examples/vite/src/application.tsx | 26 +- examples/wagtail/core/jinja/home_page.jinja | 7 +- examples/wagtail/core/jinja/vars.jinja | 26 + packages/design/tailwind/css/components.css | 18 + packages/html/ds/src/common/instances.ts | 2 + packages/html/ds/src/index.ts | 3 + packages/html/ds/src/radio/helpers.html | 19 + packages/html/ds/src/radio/radio.html | 60 +++ packages/html/ds/src/radio/radio.schema.ts | 104 ++++ packages/html/ds/src/radio/radio.stories.ts | 248 +++++++++ packages/html/ds/src/radio/radio.test.ts | 151 ++++++ packages/html/ds/src/radio/radio.ts | 62 +++ packages/html/ds/src/radio/radios-group.html | 91 ++++ packages/react/ds/package.json | 3 +- .../ds/src/checkbox/checkboxes-group.tsx | 2 +- .../react/ds/src/icon-button/icon-button.tsx | 2 +- packages/react/ds/src/index.ts | 1 + packages/react/ds/src/radio/radio.stories.tsx | 240 +++++++++ packages/react/ds/src/radio/radio.tsx | 92 ++++ packages/react/ds/src/radio/radios-group.tsx | 94 ++++ packages/react/ds/src/radio/types.ts | 47 ++ packages/react/ds/tsconfig.json | 3 +- packages/react/ds/vite.config.ts | 2 + pnpm-lock.yaml | 190 ++----- 30 files changed, 1907 insertions(+), 152 deletions(-) create mode 100644 apps/docs/src/components/form/radio.tsx create mode 100644 packages/html/ds/src/radio/helpers.html create mode 100644 packages/html/ds/src/radio/radio.html create mode 100644 packages/html/ds/src/radio/radio.schema.ts create mode 100644 packages/html/ds/src/radio/radio.stories.ts create mode 100644 packages/html/ds/src/radio/radio.test.ts create mode 100644 packages/html/ds/src/radio/radio.ts create mode 100644 packages/html/ds/src/radio/radios-group.html create mode 100644 packages/react/ds/src/radio/radio.stories.tsx create mode 100644 packages/react/ds/src/radio/radio.tsx create mode 100644 packages/react/ds/src/radio/radios-group.tsx create mode 100644 packages/react/ds/src/radio/types.ts diff --git a/apps/docs/content/3-components/2-library/32-radio-button.mdx b/apps/docs/content/3-components/2-library/32-radio-button.mdx index 6e50ab191..ff3c9102d 100644 --- a/apps/docs/content/3-components/2-library/32-radio-button.mdx +++ b/apps/docs/content/3-components/2-library/32-radio-button.mdx @@ -2,13 +2,484 @@ title: Radio Button description: Radio Button HTML Component draft: false -status: in-development +status: stable --- # Radio Button +import { standardProps, inlineProps, hintsProps } from "@/components/form/radio"; + +## Standard radio + + + + + + HTML + Macro + React + + + ```html +
+
+ +

Where do you live?

+ +
+
+
+
+ + +
+
+ +
+
+ + +
+
+ +
+
+ + +
+
+
+
+
+
+ ``` + + + ```html + {{ govieRadiosGroup({ + "fieldId": "uniqueId", + "title": { + "value": "Where do you live?", + "asHeading": { + "size": "md", + "tag": "h2" + } + }, + "items": [ + { + "label": "England", + "value": "england" + }, + { + "label": "Scotland", + "value": "scotland" + }, + { + "label": "Ireland", + "value": "ireland" + } + ] + }) }} + ``` + + + ```html + import { RadiosGroup } from '@govie-ds/react'; + + ; + + ``` + + + +## Inline radio + + + + + + HTML + Macro + React + + + ```html +
+
+ +

Where do you live?

+ +
+
+
+
+ + +
+
+ +
+
+ + +
+
+ +
+
+ + +
+
+
+
+
+
+ ``` + + + ```html + {{ govieRadiosGroup({ + "fieldId": "uniqueId", + "inline": true, + "title": { + "value": "Where do you live?", + "asHeading": { + "size": "md", + "tag": "h2" + } + }, + "items": [ + { + "label": "England", + "value": "england" + }, + { + "label": "Scotland", + "value": "scotland" + }, + { + "label": "Ireland", + "value": "ireland" + } + ] + }) }} + ``` + + + ```html + import { RadiosGroup } from '@govie-ds/react'; + + ; + + ``` + + + +## Radios with hints + + + + + + HTML + Macro + React + + + ```html +
+
+ +

Have you changed your name?

+ +
+

+ This includes changing your last name or spelling your name + differently. +

+
+ +
+
+
+
+ + +
+
+
+
+
+
+
+
+
+

+ Yes, I have changed my name +

+
+
+
+
+ +
+
+ + +
+
+
+
+
+
+
+
+
+

+ No, I didn't change my name +

+
+
+
+
+
+
+
+
+ ``` + + + ```html + {{ govieRadiosGroup({ + "fieldId": "uniqueId", + "title": { + "value": "Have you changed your name?", + "hint": "This includes changing your last name or spelling your name differently." + "asHeading": { + "size": "md", + "tag": "h2" + } + }, + "items": [ + { + "label": "Yes", + "value": "yes", + hint: "Yes, I have changed my name" + }, + { + "label": "No", + "value": "no", + hint: "No, I didn't change my name" + } + ] + }) }} + ``` + + + ```html + import { RadiosGroup } from '@govie-ds/react'; + + ; + + ``` + + ## When to use this component +Use the radios component when users can only select one option from a list. + ## When not to use this component + +Do not use the radios component if users might need to select more than one option. In this case, you should use the checkboxes component instead. \ No newline at end of file diff --git a/apps/docs/dictionary.txt b/apps/docs/dictionary.txt index 007982dd2..133a31e99 100644 --- a/apps/docs/dictionary.txt +++ b/apps/docs/dictionary.txt @@ -82,5 +82,10 @@ caseworking dropdowns breakpoint TwoThirdsOneThird +RadiosGroup +standardProps +asHeading +fieldId +hintsProps href -img \ No newline at end of file +img diff --git a/apps/docs/src/components/document/common/mdx.tsx b/apps/docs/src/components/document/common/mdx.tsx index 58b0f81cf..e72ad53fb 100644 --- a/apps/docs/src/components/document/common/mdx.tsx +++ b/apps/docs/src/components/document/common/mdx.tsx @@ -10,6 +10,7 @@ import { TabPanel, Tabs, Tag, + RadiosGroup, Card, } from '@govie-ds/react'; import { MDXComponents } from 'mdx/types'; @@ -149,6 +150,7 @@ const documentComponents: MDXComponents = { Tag: (props) => {props.children}, Header: (props) =>
{props.children}
, Footer: (props) =>
{props.children}
, + RadiosGroup: (props) => , Card: (props) => {props.children}, }; diff --git a/apps/docs/src/components/form/radio.tsx b/apps/docs/src/components/form/radio.tsx new file mode 100644 index 000000000..382138f3c --- /dev/null +++ b/apps/docs/src/components/form/radio.tsx @@ -0,0 +1,53 @@ +export const standardProps = { + fieldId: 'uniqueId', + title: { + value: 'Where do you live?', + asHeading: { + size: 'md', + as: 'h2', + }, + }, + items: [ + { + label: 'England', + value: 'england', + }, + { + label: 'Scotland', + value: 'scotland', + }, + { + label: 'Ireland', + value: 'ireland', + }, + ], +}; + +export const inlineProps = { + ...standardProps, + inline: true, +}; + +export const hintsProps = { + fieldId: 'uniqueId', + title: { + value: 'Have you changed your name?', + hint: 'This includes changing your last name or spelling your name differently.', + asHeading: { + size: 'md', + as: 'h2', + }, + }, + items: [ + { + label: 'Yes', + value: 'yes', + hint: 'Yes, I have changed my name', + }, + { + label: 'No', + value: 'no', + hint: "No, I didn't change my name", + }, + ], +}; diff --git a/apps/docs/src/lib/components.ts b/apps/docs/src/lib/components.ts index 4147ae377..b79536a28 100644 --- a/apps/docs/src/lib/components.ts +++ b/apps/docs/src/lib/components.ts @@ -288,14 +288,16 @@ export function getComponents(): ComponentDetail[] { { platform: { id: 'global', + href: '?path=/docs/form-radio--docs', }, - status: 'considering', + status: 'alpha', }, { platform: { id: 'react', + href: '?path=/docs/form-radio--docs', }, - status: 'considering', + status: 'alpha', }, ], }, diff --git a/examples/nextjs/src/app/page.tsx b/examples/nextjs/src/app/page.tsx index 22a67f806..95dd0803b 100644 --- a/examples/nextjs/src/app/page.tsx +++ b/examples/nextjs/src/app/page.tsx @@ -8,6 +8,7 @@ import { Link, Paragraph, PhaseBanner, + RadiosGroup, } from "@govie-ds/react"; export default function Home() { @@ -65,6 +66,30 @@ export default function Home() {
Span paragraph
+ face diff --git a/examples/vite/src/application.tsx b/examples/vite/src/application.tsx index 4936a6fa7..525dc62f2 100644 --- a/examples/vite/src/application.tsx +++ b/examples/vite/src/application.tsx @@ -19,6 +19,7 @@ import { TabList, FileUpload, Tag, + RadiosGroup, Card, } from "@govie-ds/react"; @@ -51,7 +52,6 @@ export function App() { /> Design System - @@ -166,6 +166,30 @@ export function App() { /> +