fix: radio button issue with default checked and checked values

Author: CyrilAdelekan

src/components/Radios/Radios.scss

@@ -1,8 +1,8 @@
 $govuk-images-path: "~govuk-frontend/dist/govuk/assets/images/";
 $govuk-fonts-path: "~govuk-frontend/dist/govuk/assets/fonts/";
-$govuk-assets-path: "~govuk-frontend/govuk/assets/";
+$govuk-assets-path: "~govuk-frontend/dist/govuk/assets/";
 $govuk-font-family: "Arial", sans-serif;
 
-// $govuk-brand-colour: #87c426;
-
+@import "~govuk-frontend/dist/govuk/base";
+@import "~govuk-frontend/dist/govuk/core/all";
 @import "~govuk-frontend/dist/govuk/components/radios/radios";

src/components/Radios/Radios.stories.tsx

@@ -1,41 +1,39 @@
 import React, { useEffect } from "react";
 import "./Radios.scss";
 import Radios from "./Radios";
-import { Meta, StoryFn, StoryObj } from "@storybook/react";
+import { Meta, StoryFn, StoryObj } from "@storybook/react-vite";
 import fixtures from "govuk-frontend/dist/govuk/components/radios/fixtures.json";
 import { extractShownFixtures } from "../../utils/ProcessExampleData";
 import { ComponentFixture } from "../../dynamics";
 import { WithItemRefs } from "../../utils/WithReference";
 import { ConfigureOverallRadios } from "./Radios.config";
-import { action } from "@storybook/addon-actions";
+import { action } from "storybook/actions";
 
-let configured = false;
 const meta: Meta<typeof Radios> = {
   title: "GOVUK Design System/Radios",
   component: Radios,
   decorators: [
-    (Story, { parameters }) => {
+    (Story) => {
       useEffect(() => {
-        const configureRadios = () => {
-          const isDocsMode = window.location.search.includes("viewMode=docs");
-          if (
-            isDocsMode &&
-            !configured &&
-            parameters.initializeConfigurations
-          ) {
-            ConfigureOverallRadios();
-            configured = true;
-          } else if (!isDocsMode) {
-            ConfigureOverallRadios();
-          }
-        };
-        configureRadios();
+        // Remove any existing initialization before configuring
+        const radios = document.querySelectorAll(".govuk-radios");
+        radios.forEach((radio) => {
+          radio.removeAttribute("data-module");
+        });
+
+        // Initialize once
+        ConfigureOverallRadios();
       }, []);
       return <Story />;
     },
   ],
-  tags: ["autodocs"],
-  args: { onChange: action("on-change"), onBlur: action("on-blur") },
+  parameters: {
+    initializeConfigurations: true,
+  },
+  args: {
+    onChange: action("on-change"),
+    onBlur: action("on-blur"),
+  },
 };
 
 export default meta;

src/components/Radios/Radios.tsx

@@ -9,13 +9,21 @@ const Radios: React.FC<RadiosProps> = (props) => {
   const processedItems: BooleanItem[] | undefined = items
     ? items.map((item) => {
         if (item) {
-          return {
-            ...item,
-            ...(value != null && { checked: item.value === value }),
-            ...(defaultValue != null && {
+          // Only set checked/defaultChecked - not both
+          if (value != null) {
+            return {
+              ...item,
+              checked: item.value === value,
+              defaultChecked: undefined, // Remove defaultChecked if value is provided
+            };
+          } else if (defaultValue != null) {
+            return {
+              ...item,
               defaultChecked: item.value === defaultValue,
-            }),
-          };
+              checked: undefined, // Remove checked if defaultValue is provided
+            };
+          }
+          return item;
         }
         return item;
       })