feat: radio component (#279)

Co-authored-by: “BogdanDanilescu” <bogdan.danilescu@nearform.com>
Co-authored-by: Andrea Pregnolato <andrea.pregnolato@nearform.com>

apps/docs/dictionary.txt

@@ -82,5 +82,10 @@ caseworking
 dropdowns
 breakpoint
 TwoThirdsOneThird
+RadiosGroup
+standardProps
+asHeading
+fieldId
+hintsProps
 href
-img
+img

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) => <Tag {...props}>{props.children}</Tag>,
   Header: (props) => <Header {...props}>{props.children}</Header>,
   Footer: (props) => <Footer {...props}>{props.children}</Footer>,
+  RadiosGroup: (props) => <RadiosGroup {...props} />,
   Card: (props) => <Card {...props}>{props.children}</Card>,
 };
 

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",
+    },
+  ],
+};

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',
         },
       ],
     },

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() {
         <hr />
         <Paragraph as="span">Span paragraph</Paragraph>
         <hr />
+        <RadiosGroup
+          title={{
+            value: "Where do you live?",
+            asHeading: {
+              size: "md",
+              as: "h2",
+            },
+          }}
+          items={[
+            {
+              label: "England",
+              value: "england",
+            },
+            {
+              label: "Scotland",
+              value: "scotland",
+            },
+            {
+              label: "Ireland",
+              value: "ireland",
+            },
+          ]}
+          fieldId="uniqueId"
+        />
 
         <span className="material-icons">face</span>
       </Container>

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() {
       />
       <Container>
         <Heading>Design System </Heading>
-
         <Tabs id="tabs">
           <TabList>
             <TabItem value="tab1" checked>
@@ -166,6 +166,30 @@ export function App() {
             />
           </TabPanel>
         </Tabs>
+        <RadiosGroup
+          title={{
+            value: "Where do you live?",
+            asHeading: {
+              size: "md",
+              as: "h2",
+            },
+          }}
+          items={[
+            {
+              label: "England",
+              value: "england",
+            },
+            {
+              label: "Scotland",
+              value: "scotland",
+            },
+            {
+              label: "Ireland",
+              value: "ireland",
+            },
+          ]}
+          fieldId="uniqueId"
+        />
       </Container>
       <Footer />
     </>

examples/wagtail/core/jinja/home_page.jinja

@@ -12,8 +12,9 @@
 {% from 'button/button.html' import govieButton %}
 {% from 'icon/icon.html' import govieIcon %}
 {% from 'tag/tag.html' import govieTag %}
+{% from 'radio/radios-group.html' import govieRadiosGroup %}
 
-{% from 'vars.jinja' import footerProps, HeaderProps, SelectProps, tabsProps %}
+{% from 'vars.jinja' import footerProps, HeaderProps, SelectProps, tabsProps, radioProps %}
 
 <!DOCTYPE html>
 <html lang="en">
@@ -165,6 +166,10 @@
     "content": 'Primary Button',
   }) }}
 
+  <h2>Radio</h2>
+
+  {{ govieRadiosGroup(radioProps) }}
+
   <h2>Footer (Local)</h2>
   <footer class="govie-footer"></footer>
   <h2>Footer (Global)</h2>

examples/wagtail/core/jinja/vars.jinja

@@ -132,4 +132,30 @@
         }
       ]
   }
+%}
+
+{% set radioProps = {
+  "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"
+    }
+  ]
+} 
 %}

packages/design/tailwind/css/components.css

@@ -293,6 +293,24 @@ input[type='file' i] {
 }
 
 /* End Footer */
+
+/* Radio */
+
+.gi-radio-base {
+  @apply gi-cursor-pointer gi-appearance-none gi-border-solid gi-border-[2px] gi-rounded-[50%] gi-border-black checked:before:gi-border-solid checked:before:gi-rounded-[50%] checked:before:gi-border-black checked:before:gi-block checked:before:gi-w-0  focus:gi-border-[4px] focus:gi-outline-[3px] focus:gi-outline-yellow-400 focus:gi-outline hover:gi-shadow-[0_0_0_4px_#d8dadf] hover:focus:gi-shadow-[0_0_0_6px_#d8dadf]
+}
+.gi-radio-small {
+  @apply gi-radio-base gi-w-6 gi-h-6 checked:before:gi-border-[5px] checked:before:gi-translate-x-[5px] checked:before:gi-translate-y-[5px] focus:before:gi-translate-x-[3px] focus:before:gi-translate-y-[3px]
+}
+.gi-radio-medium {
+  @apply gi-radio-base gi-w-8 gi-h-8 checked:before:gi-border-[7px] checked:before:gi-translate-x-[7px] checked:before:gi-translate-y-[7px] focus:before:gi-translate-x-[5px] focus:before:gi-translate-y-[5px]
+}
+.gi-radio-large {
+  @apply gi-radio-base gi-w-11 gi-h-11 checked:before:gi-border-[10px] checked:before:gi-translate-x-[10px] checked:before:gi-translate-y-[10px] focus:before:gi-translate-x-[8px] focus:before:gi-translate-y-[8px]
+}
+
+/* End Radio */
+
 /* Card */
 
 .gi-card {

packages/html/ds/src/common/instances.ts

@@ -1,5 +1,6 @@
 import { Checkboxes } from '../checkbox/checkbox';
 import { Header } from '../header/header';
+import { Radio } from '../radio/radio';
 import { BaseComponent, BaseComponentOptions } from './component';
 
 function generateRandomId() {
@@ -9,6 +10,7 @@ function generateRandomId() {
 const componentRegistry = {
   Header,
   Checkboxes,
+  Radio,
   // TODO: additional component classes
 } as const;
 

packages/html/ds/src/index.ts

@@ -2,6 +2,7 @@ import { destroyAllInstances } from './common/instances.js';
 import { createEvents } from './events.js';
 import { initHeader } from './header/header.js';
 import { initCheckboxes } from './checkbox/checkbox.js'; /* eslint-disable-line import/order */
+import { initRadios } from './radio/radio.js';
 
 export * as properties from './dist/properties.js';
 
@@ -22,6 +23,7 @@ export function initGovIe() {
 
   initHeader();
   initCheckboxes();
+  initRadios();
 }
 
 export function destroyGovIe() {
@@ -37,3 +39,4 @@ componentEvents.init();
 
 export * from './header/header.js';
 export * from './checkbox/checkbox.js';
+export * from './radio/radio.js';

packages/html/ds/src/radio/helpers.html

@@ -0,0 +1,19 @@
+{% macro getRadioSize(size) %}
+  {% if size == 'lg' %}
+    gi-radio-large
+  {% elif size == 'sm' %}
+    gi-radio-small
+  {% else %}
+    gi-radio-medium
+  {% endif %}
+{% endmacro %}
+
+{% macro getRadioWidth(size) %}
+  {% if size == 'lg' %}
+    gi-w-11
+  {% elif size == 'sm' %}
+    gi-w-6
+  {% else %}
+    gi-w-8
+  {% endif %}
+{% endmacro %}

packages/html/ds/src/radio/radio.html

@@ -0,0 +1,60 @@
+{% from 'radio/helpers.html' import getRadioSize, getRadioWidth %}
+{% from 'hint-text/hint-text.html' import govieHintText %}
+{% from 'text-input/text-input.html' import govieTextInput %}
+
+{% macro govieRadio(props) %}
+  {% set hasConditionalInput = true if props.conditionalInput %}
+
+  <div class="gi-flex gi-flex-col">
+    <div class="gi-gap-4 gi-flex gi-items-center">
+      <input
+        name="{{ props.name }}"
+        data-has-conditional-input="{{ hasConditionalInput }}"
+        data-primary="true"
+        data-element="{{ props.dataElement }}"
+        id="{{ props.radioId }}"
+        value="{{ props.value }}"
+        class="{{ getRadioSize(props.size) | trim }} gi-radio-base"
+        type="radio"
+      />
+      <label
+        for="{{ props.radioId }}"
+        class="gi-cursor-pointer xs:gi-text-sm md:gi-text-md lg:gi-text-lg"
+      >
+        {{ props.label }}
+      </label>
+    </div>
+    {% if props.hint or props.conditionalInput %}
+      <div class="gi-flex gi-gap-4">
+        <div
+          data-conditional-divider="{{ props.radioId }}"
+          class="{{ getRadioWidth(props.size) | trim }} gi-invisible"
+        >
+          <div
+            class="{{ getRadioWidth(props.size) | trim }} gi-h-full gi-flex gi-justify-center gi-mt-1.5"
+          >
+            <div class="gi-h-full gi-w-1 gi-bg-gray-300"></div>
+          </div>
+        </div>
+        <div>
+          <div>
+            {{
+              govieHintText({
+                "content": props.hint,
+                "classNames": "!gi-mb-0"
+              })
+            }}
+          </div>
+          {% if props.conditionalInput %}
+            <div
+              data-conditional-container="{{ props.radioId }}"
+              class="gi-hidden"
+            >
+              {{ govieTextInput(props.conditionalInput) }}
+            </div>
+          {% endif %}
+        </div>
+      </div>
+    {% endif %}
+  </div>
+{% endmacro %}