feat(breadcrumbs): add padding and margin interfaces to component

Adds `margin` and `padding` props to component to allow custom values to be passed. Overrides the
user agent styling on the `ol` element as well.

fix #6096

src/components/breadcrumbs/breadcrumbs.component.tsx

@@ -1,9 +1,10 @@
 import React from "react";
+import { SpaceProps } from "styled-system";
 import tagComponent, { TagProps } from "../../__internal__/utils/helpers/tags";
 import StyledBreadcrumbs from "./breadcrumbs.style";
 import useLocale from "../../hooks/__internal__/useLocale";
 
-export interface BreadcrumbsProps extends TagProps {
+export interface BreadcrumbsProps extends TagProps, SpaceProps {
   /** Child crumbs to display */
   children: React.ReactNode;
 }
@@ -17,6 +18,7 @@ export const Breadcrumbs = React.forwardRef<HTMLElement, BreadcrumbsProps>(
         role="navigation"
         {...tagComponent("breadcrumbs", rest)}
         aria-label={l.breadcrumbs.ariaLabel()}
+        {...rest}
       >
         <ol>{children}</ol>
       </StyledBreadcrumbs>

src/components/breadcrumbs/breadcrumbs.spec.tsx

@@ -3,19 +3,28 @@ import "@testing-library/jest-dom";
 import { screen, render } from "@testing-library/react";
 import Breadcrumbs from "./breadcrumbs.component";
 import Crumb from "./crumb/crumb.component";
+import { testStyledSystemSpacing } from "../../__spec_helper__/test-utils";
 
-test("renders all child crumbs correctly", () => {
-  render(
-    <Breadcrumbs>
+describe("Breadcrumbs", () => {
+  testStyledSystemSpacing((props) => (
+    <Breadcrumbs {...props}>
       <Crumb href="#">Breadcrumb</Crumb>
-      <Crumb href="#">Breadcrumb</Crumb>
-      <Crumb href="#">Breadcrumb</Crumb>
-      <Crumb href="#" isCurrent>
-        Breadcrumb
-      </Crumb>
     </Breadcrumbs>
-  );
+  ));
+
+  it("renders children as expected", () => {
+    render(
+      <Breadcrumbs>
+        <Crumb href="#">Breadcrumb</Crumb>
+        <Crumb href="#">Breadcrumb</Crumb>
+        <Crumb href="#">Breadcrumb</Crumb>
+        <Crumb href="#" isCurrent>
+          Breadcrumb
+        </Crumb>
+      </Breadcrumbs>
+    );
 
-  const crumbElement = screen.getAllByText("Breadcrumb");
-  expect(crumbElement.length).toBe(4);
+    const crumbElement = screen.getAllByText("Breadcrumb");
+    expect(crumbElement.length).toBe(4);
+  });
 });

src/components/breadcrumbs/breadcrumbs.stories.mdx

@@ -2,6 +2,7 @@ import { Meta, Story, Canvas, ArgsTable } from "@storybook/addon-docs";
 import { Breadcrumbs, Crumb } from "./index";
 import * as stories from "./breadcrumbs.stories.tsx";
 import TranslationKeysTable from "../../../.storybook/utils/translation-keys-table";
+import StyledSystemProps from "../../../.storybook/utils/styled-system-props";
 
 <Meta title="Breadcrumbs" parameters={{ info: { disable: true } }} />
 
@@ -43,9 +44,11 @@ import { Breadcrumbs, Crumb } from "carbon-react/lib/components/breadcrumbs";
 
 ### Breadcrumbs
 
-<ArgsTable
-   of={Breadcrumbs}
- />
+<StyledSystemProps
+  of={Breadcrumbs}
+  spacing
+  noHeader
+/>
 
 ### Crumb
 

src/components/breadcrumbs/breadcrumbs.style.ts

@@ -1,11 +1,19 @@
 import styled from "styled-components";
+import { space } from "styled-system";
+import baseTheme from "../../style/themes/base";
 
 const StyledBreadcrumbs = styled.nav`
+  ${space}
+
   ol {
+    padding: 0;
+    margin: 0;
     list-style: none;
     display: flex;
     flex-wrap: wrap;
   }
 `;
 
+StyledBreadcrumbs.defaultProps = { theme: baseTheme };
+
 export default StyledBreadcrumbs;