refactor(nhsuk-frontend-react): update breadcrumb component

update component to remove the nhsuk-width-container inside the breadcrumb
rowellx68 · Sep 27, 2024 · 87ff4ec · 87ff4ec
1 parent 4c99385
commit 87ff4ec
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 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
@@ -34,7 +34,7 @@ const Breadcrumb = factory<BreadcrumbFactory>(
         {...props}
         ref={ref}
       >
-        <div className="nhsuk-width-container">{children}</div>
+        {children}
       </nav>
     );
   },

diff --git a/...rontend-react/src/components/navigation/breadcrumb/__snapshots__/Breadcrumb.spec.tsx.snap b/...rontend-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>
 `;