From 87ff4ec1bf443f464e733c84078464565f929091 Mon Sep 17 00:00:00 2001
From: Rowell Heria <rowell+dev@heria.uk>
Date: Thu, 19 Sep 2024 11:59:53 +0100
Subject: [PATCH] refactor(nhsuk-frontend-react): update breadcrumb component

update component to remove the nhsuk-width-container inside the breadcrumb
---
 .../navigation/breadcrumb/Breadcrumb.tsx      |  2 +-
 .../__snapshots__/Breadcrumb.spec.tsx.snap    | 82 +++++++++----------
 2 files changed, 40 insertions(+), 44 deletions(-)

diff --git a/packages/nhsuk-frontend-react/src/components/navigation/breadcrumb/Breadcrumb.tsx b/packages/nhsuk-frontend-react/src/components/navigation/breadcrumb/Breadcrumb.tsx
index 651244b5..daf52a75 100644
--- a/packages/nhsuk-frontend-react/src/components/navigation/breadcrumb/Breadcrumb.tsx
+++ b/packages/nhsuk-frontend-react/src/components/navigation/breadcrumb/Breadcrumb.tsx
@@ -34,7 +34,7 @@ const Breadcrumb = factory<BreadcrumbFactory>(
         {...props}
         ref={ref}
       >
-        <div className="nhsuk-width-container">{children}</div>
+        {children}
       </nav>
     );
   },
diff --git a/packages/nhsuk-frontend-react/src/components/navigation/breadcrumb/__snapshots__/Breadcrumb.spec.tsx.snap b/packages/nhsuk-frontend-react/src/components/navigation/breadcrumb/__snapshots__/Breadcrumb.spec.tsx.snap
index 95a6d6be..e58fa6d5 100644
--- a/packages/nhsuk-frontend-react/src/components/navigation/breadcrumb/__snapshots__/Breadcrumb.spec.tsx.snap
+++ b/packages/nhsuk-frontend-react/src/components/navigation/breadcrumb/__snapshots__/Breadcrumb.spec.tsx.snap
@@ -6,59 +6,55 @@ exports[`should render a breadcrumb element 1`] = `
     aria-label="Breadcrumb"
     class="nhsuk-breadcrumb"
   >
-    <div
-      class="nhsuk-width-container"
+    <ol
+      class="nhsuk-breadcrumb__list"
     >
-      <ol
-        class="nhsuk-breadcrumb__list"
+      <li
+        class="nhsuk-breadcrumb__item"
       >
-        <li
-          class="nhsuk-breadcrumb__item"
-        >
-          <a
-            class="nhsuk-breadcrumb__link"
-            href="/level-one"
-          >
-            Level one
-          </a>
-        </li>
-        <li
-          class="nhsuk-breadcrumb__item"
+        <a
+          class="nhsuk-breadcrumb__link"
+          href="/level-one"
         >
-          <a
-            class="nhsuk-breadcrumb__link"
-            href="/level-one/level-two"
-          >
-            Level two
-          </a>
-        </li>
-        <li
-          class="nhsuk-breadcrumb__item"
+          Level one
+        </a>
+      </li>
+      <li
+        class="nhsuk-breadcrumb__item"
+      >
+        <a
+          class="nhsuk-breadcrumb__link"
+          href="/level-one/level-two"
         >
-          <a
-            class="nhsuk-breadcrumb__link"
-            href="/level-one/level-two/level-three"
-          >
-            Level three
-          </a>
-        </li>
-      </ol>
-      <p
-        class="nhsuk-breadcrumb__back"
+          Level two
+        </a>
+      </li>
+      <li
+        class="nhsuk-breadcrumb__item"
       >
         <a
-          class="nhsuk-breadcrumb__backlink"
+          class="nhsuk-breadcrumb__link"
           href="/level-one/level-two/level-three"
         >
-          <span
-            class="nhsuk-u-visually-hidden"
-          >
-            Back to &nbsp;
-          </span>
           Level three
         </a>
-      </p>
-    </div>
+      </li>
+    </ol>
+    <p
+      class="nhsuk-breadcrumb__back"
+    >
+      <a
+        class="nhsuk-breadcrumb__backlink"
+        href="/level-one/level-two/level-three"
+      >
+        <span
+          class="nhsuk-u-visually-hidden"
+        >
+          Back to &nbsp;
+        </span>
+        Level three
+      </a>
+    </p>
   </nav>
 </div>
 `;